10 Replies Latest reply on Apr 5, 2010 4:23 PM by Chorale0001

    How do I create this effect?


      I have been doing a lot of reading about Flash techniques, and there is one particular effect that I cannot find any documentation about.

      I found the effect on a website, and they totally nailed it! I want to know how to create this effect, but I can't even articulate it.It looks like it

      could be accomplished through masking, frame-by-frame animation, or through some motion tricks, but I just don't know.


      You can see what I am talking about here --> http://www.nike.com/jumpman23/historyofflight/ click on number 96 . You see a path being drawn in .

      Please give me some feedback about how I can create a similar effect!


      Thank you!

        • 1. Re: How do I create this effect?
          WhatUC Level 1

          ETA: I'm referring to the multi-colored path consisting of various shades of blue.

          • 2. Re: How do I create this effect?
            Ned Murphy Adobe Community Professional & MVP

            It probably only involves using animated masks over sections of the visual such that it is gradually revealed.

            1 person found this helpful
            • 3. Re: How do I create this effect?
              Chorale0001 Level 1

              As far of my knowledge, i believe this is achieve by doing a Mask that will reveal the graphic under it.


              One way to do it ( please other viewer and expert, feel free to correct me if i'm wrong ) would be :


              1- create your "rainbow" design in the program you want ( illustrator, photoshop, flash, your call)

              2- import it in flash and put it where it belong and in his own layer

              3- create a new layer and move that one above the one containing your design


              4- Extend all frametime of all your element by a large number ( depending of your design, it can be 50-100-200, your call once again, just remember that the basic speed is 24 frame / secondes, and the more frame you take, the longer it take )

              5- in that new layer, create small section of timeline using the "create keyframe" ( yes they are empty right now, so the timeline should be white), be sure however to allow at least 3-4 frame per block if you want to have a smooth animation.

              6- on the first block, create a small shape using Flash tool, the shape need to be at the start of your animation and where you want your design to start being revealed. the color and form of the shape don't matter as long you get what you want. Usually, a square is a good choice.


              7- Copy that shape and past it in the NEXT block of your frametime at the exact same location ( Ctrl + Shift + V).

              8- Then using the Free Transform Tool, modifie the shape to make it cover a larger portion of your design. Decide how much you want or it you want to cover.


              This layer will be use as the animation layer to make your desigh appear. So  every part of the design that will be covered by the shape will be "revealed"


              9- select your shape in it's new size, and repeat Step 7 and 8 until you completly covered your design. You can take as many step as you want, the more of it the smooter it will be, but also in time consuming for the animation itself. When you are done, add 1 frame with a keyframe at the end of your timeline on that layer and copy in it the last step of your shape form ( should be the one covering everything)

              10- Now, select each Block of your frame time that contain the shape we just made and apply to Each the following : Right click on it, and use "create shape tween". Do not apply this on the keyframe that is alone at the end of the timeline. ( it should stay gray, while all other should be green with an arrow in each)

              11- All you need to do now is select your layer with all this, rightclick it, and use "mask".



              This will make the layer to gain a green symbol and the layer below it ( containing your design ) to also gain a green symbol. It will also be put as in a "sub-layer" like in any Adobe program when you make a layer with multiple layer in it.


              And voila, you have your animation.


              This may not be the best way to do it, but it is working.


              For more information please visit the http://community.adobe.com/help/search.html?q=mask&hl=en_US&lr=en_US&l=flash_product_adobe lr and explore those link. it will take you even further.


              hope this help

              • 4. Re: How do I create this effect?
                Chorale0001 Level 1

                ho yes, Just to be safe, be sure to check the properties of each of your block with the shape tween and in the Tweening propertie, set the Ease at Zero, and the mode at Distributive.

                • 5. Re: How do I create this effect?
                  WhatUC Level 1

                  Chorale, thank you for such a detailed explanation! I am going to try out this method and update my post later on .

                  • 6. Re: How do I create this effect?
                    Chorale0001 Level 1

                    You are welcome


                    It may require you to experiment a little, but in fact it is very easy once you catch it.


                    This also work well to do the reverse effect (making disapear), really all you need to do is to select all the frame of the layer with the tween and your shape on it, right click and select "reverse" and voila lol


                    Very usefull.

                    • 7. Re: How do I create this effect?
                      WhatUC Level 1

                      Chorale thank you so much! This worked like a charm! I will show the finished product once I am done with the movie. I can stand to become a little neater, but it worked perfectly! I really appreciate your help . Words cannot express it !

                      • 8. Re: How do I create this effect?
                        Chorale0001 Level 1

                        You are quite Welcome


                        Happy to help

                        • 9. Re: How do I create this effect?
                          WhatUC Level 1

                          Here's the finished product. I may make more changes along the way, but this is live.




                          Any feedback is more than welcomed!

                          • 10. Re: How do I create this effect?
                            Chorale0001 Level 1

                            Very nice Job