Design insights & tutorials.

An Angel Grows Wings. Animated Mask in Flash


Download the Source File Here (INCLUDES THREE FREE VECTOR DESIGNS!)

Introduction

Like most Flash Motion Graphics designers, I am regularly perusing the web for design inspiration. I don’t know about you, but when I saw complex design elements like plants and tribal shapes grow on screen right before my eyes, I wanted to know how they did it. I assumed they were really good with shape tweening, but if you’ve tried to execute a complex shape tween, I’m sure you discovered quickly that Flash’s current shape tween renderer is about as predictable as Ohio’s weather. So the next best bet was masking a finished design and then revealing it magically as if it were being illustrated in real time. Sure enough, after testing some theories, we zeroed in on this process which we’ll now share with you!

Requirements:

This Flash tutorial requires a working knowledge of Flash’s GUI (because we’ll use most of it) as well as an understanding of Vector art and manipulating it with the pen and arrow tools. You will need Adobe Flash and in this case, I’ll be using some Vector resources from Go Media’s Vector Packs. Adobe Illustrator is handy for manipulating Vector resources, but it is not required. You can import most any type of graphic file directly into Flash.

I must warn you, shape tweening is a tedious process and your comfort level with the tools will also make an impact in how efficient it is for you. The tutorial here teaches you the technique of how to accomplish a multi-tier animated mask, but does not walk you through every single minute detail, nor the redundant steps to finish it. To complete the animation like you see above, may take 2-4 hours or longer so its probably better that we demonstrate for you these fundamentals, so you can take what you learn here and apply it to your own project. You should be able to complete the foundational work of this tutorial and gain the knowledge we’re sharing with you within an hour!

Alright, that being said, lets get started…

1.) Open Flash and create a New Flash Document. Name it “growwings.” Set the canvas size to 350h x 500w and then save it.

2.) Make sure your Frame Per-Second (fps) rate is set to 30. 30 is about the perfect speed because it’s the approximate rate of video too, so its versatile for most flash motion graphics work.

3.) Create your vector art. If you don’t have much experience creating complex shapes in Adobe Illustrator, we recommend getting Go Media’s Vector Packs or finding other vector resources that have already been created. For our tutorial we’ll be using a wing design from Wings Set 1 of the first Vector Pack set and then later a “sexy” woman silhouette from the “Sexy Vector Pack” in set 2.

wing_vectorpack_ss.jpg

  • a. Open your vector art in Illustrtator. In this case, we are using the wing1 vector pack.
  • b. Copy your vector art to the clipboard(Edit>Copy or Ctrl+C)
  • c. Paste your vector art into a new Illustrator document (if it’s not blank already)
  • d. Export your file to .swf (no HTML required) for most vector, you can leave the defaults “as is”
  • e. Import your .swf into Flash into your gowwings.fla Library (select File>Import>Import to Library)
  • f. Once your .swf is loaded into your library, drill into it and select and Copy the right half of the vector wing art in the .swf to your clipboard (ctrl c or Edit>Copy)

Quick Recap: At this point you should have a new Flash Movie created called growwings.fla, where you’ve imported your .swf vector resource to its library and now you have drilled into that .swf in your library and copied the vector shapes to your clipboard.

4. Create a New Symbol

flash_anime_mask_ss2.jpg

  • a. Next, Return to your stage and select Insert>New Symbol (or press ctrl f8) and create a new Movie Clip object and name it “wing”. You will be automatically brought to the first frame of your new movie clip object.
  • b. Paste the contents of your clipboard to the stage

flash_anime_mask_ss1.jpg

5.) Now is a good time to decide how long we want the movie to be. I am going to say 4 seconds, which would be equal to 120 frames since the fps is 30

  • a. Now click on frame 120 and right click, and select Insert Keyframe, or simply click f6. This should give you a 120 frame long timeline of just the right side of the vector wing

flash_anime_mask_ss3.jpg

  • b. I recommend naming your layers! Did I remind you to name your layers? NAME YOUR LAYERS!! Organization is key to efficiency so try to make habits of naming digital entities at all times! Lets go ahead and name the current layer “wing”
  • c. Lock the layer wing by clicking the little lock icon left of its timeline

6.) Add a new layer by clicking the Insert Layer icon in the bottom left of the timeline panel and name it “actions”

  • a. Go to frame 120 and right click, and select Insert Keyframe, or simply click f6.
  • b. Open the Actions panel while still highlighting the now frame 120 of the actions layer and add a “stop” command ( stop(); )

flash_anime_mask_ss4.jpg

7.) Highlight the bottom layer (wing) and then create a new layer by clicking the Insert Layer icon in the bottom left of the timeline panel and name this layer “m1”

flash_anime_mask_ss5.jpg

8.) Select frame 24 of layer m1 and put a keyframe there (select Insert Keyframe, or simply click f6)

flash_anime_mask_ss6.jpg

9.) Select the Pen tool

  • a. Open the properties panel and set the stroke weight to 15

10.) Select frame 1 of layer m1 and set a start point with the pen tool at the thick top left part of the wing and then proceed to set an end point with the pen tool about an eighth of the total length of the thicker horizontal top part of the wing art. For this first part of the exercise we’ll be isolating this part of the wing.

flash_anime_mask_ss8.jpg

11.) Select frame 6 and enter a key frame

  • a. Use your open arrow/sub-selection tool to select the end point arrow and drag the end point to about a quarter of the way up the top of the wing we’re isolating here

flash_anime_mask_ss9.jpg

  • b. Select frame 12 and enter a keyframe then again with your open arrow tool drag the end point about half-way up our shape. Please note, you may have to adjust the curve angles along the path to ensure our stroke is flowing along with the shape we’re isolating
  • c. Select frame 18 and enter a keyframe then drag the end point to about ¾ up our shape

flash_anime_mask_ss10.jpg

  • d. Copy frame 18 (right click>copy frames)

flash_anime_mask_ss11.jpg

  • e. Paste the frames to frame 24 (right click>paste frames) and proceed to pull the stroke’s end point to the end of the shape

12.) Now you will click on each key frame and convert the pen tool lines we just created into fills

  • a. Select Modify>Shape>Convert Lines to Fills for each keyframe line art you just created in layer m1

flash_anime_mask_ss12.jpg

13.) All of the art along the timeline in layer “m1” should now be Fills. Select frame 1 and then hold down shift and select frame 18. You should now have frames 1 through 18 highlighted along the timeline.

  • a. Open or go down to your Properties panel and and select the tween dropdown and select Shape. This should turn frames 1 through 23 along layer m1’s timeline into a shape tween. If you have done this correctly, you should see the frames highlighted in green and arrows connecting the keys.

flash_anime_mask_ss13.jpg

14.) Now right-click layer m1 and select Mask. You should see the layer mask function lock layers m1 and wing, where m1 is now masking the wing layer.

flash_anime_mask_ss14.jpg

  • a. We’ll go ahead and test our progress by selecting frame 1 and pressing enter on the keyboard. You should see the shape tween we just created grow from a quarter to the full length of the shape we isolated. If you setup your strokes similar to the way I did, you’ll probably see parts of the smaller intersecting shape showing along the animation? The shape tween is one of the most volatile functions in flash. You have to be brutally exacting about the strokes you created along m1, to get the shape tween to flow well. You may find yourself moving points (using the open arrow tool) around along your key frame shapes to try and tighten up the tweening. One trick to “fine-tuning” a shape tween is to add more keyframes along the tween and adjusting the new new keyframe shape’s points to help the tween flow the way you want it to. I am going to add a few more keyframes where needed and move some of the shape edges around to get it flowing closer to how I’d like it.

15.) Now we are going to repeat the same technique we just performed, only this time isolating the intersecting shape…

16.) Right-click on frame 1 of the ‘wing’ layer and select Copy Frames

  • a. Insert a new layer by clicking the Insert Layer icon in the bottom left of the timeline panel and name it “wing2” and then right-click and paste the contents of the clipboard onto frame 1. You should now have a new layer exactly like that of the existing layer ‘wing’ with the new name ‘wing2’

flash_anime_mask_ss15.jpg

  • Next, insert another new layer, this time calling it ‘m2’ and add keyframes at frame 6 and at frame 36

flash_anime_mask_ss16.jpg

  • a. Select frame 1 of the wing2 layer and click/drag it over to frame 6 and then go ahead and lock the layer

17.) Now we revisit the pen tool to start the same process, where we draw a line along another shape we’ll isolate in our wing design.

  • a. Select frame 6 of the m2 layer and use your pen tool to draw a line from the starting point to about 1/8-1/4th of the way along our shape. I’m going to change the stroke color and reduce its weight to 5 for this thinner part of the wing.

flash_anime_mask_ss18.jpg

  • b. Since the shape we’re isolating has a little more to it than the first one, we’re going to segway the keyframes every 3, rather than 6. So, select frame 9 and add a keyframe and then proceed to bring your pen’s end point further along the path, maybe twice the distance as previously.

flash_anime_mask_ss19.jpg

  • c. Go ahead and repeat this process every 3 key frames or so until you’ve reached the end of the isolated shape and then copy and paste the final keyframe contents over to frame 36

flash_anime_mask_ss20.jpg

  • d. Now, select each Keyframe you just created and go up to your top tool bar and choose Modify>Shape>Convert Lines to Fills. This will convert all of your vector lines into fills
  • e. Select your last keyframe of layer m2 (in my case its 30) and then hold down shift and then select frame 6, so you have them all highlighted. Go down to your properties panel, click on the drop-down menu for Tween and select Shape. This should give your frames 6 through 32 shape tweening, therefore the layer’s frame timeline will be green with arrows connecting each keyframe.

flash_anime_mask_ss21.jpg

18.) Did I mention your layer m2 should mask the wing2 layer? If you haven’t already, right-click layer m2 and select Mask from the drop-down.

  • a. Go ahead and leave the MovieClip by selecting Scene 1 at the very top of the Timeline panel. Once you are looking at the empty canvas of Scene 1, drag your wing movieclip onto the stage.
  • b. Press Ctrl>Enter on the keyboard to preview how your animated mask is coming along. (On mine, I didn’t love the timing of when the smaller intersecting shape started, so I moved the starting point to frame 10 of the layers m2 and wing2. Really all of these starting and ending points are arbitrary, so don’t hesitate to move them around as you see fit!)

19.) At this point you should have the basic understanding of how this is going to playout. To avoid redundancy, I am simply going to tell you that the steps you just went through SHOULD BE REPEATED FOR EVERY SHAPE YOU WANT TO ISOLATE IN THE DESIGN.

What this means is that you will duplicate the “wing” layer for every shape and isolate that shape with a shape tween that flows from the starting point to the ending point of the shape. The layers we call “m” should always only contain the shape tweens and they should always Mask our foundational design. (Note: Don’t try to combine the shape tween layers into one. As I stated before, the Shape Tween function is one of the most volatile in Flash and if you try to build more complex shape tweens, you are going to be in for some headaches, even with the Shape Hints tools).

  • a. So go ahead and repeat steps 17 through 18 over and over again, each time isolating a different shape of our wing. Keep in mind, you may have to manipulate the weight of the stokes you lay down and their points before and after you convert the lines to fills, to get it just right! Also don’t forget to LOCK EACH “WING” LAYER. Also LOCK EACH MASK SET whenever working on another so to avoid messing them up accidentally.
  • b. A good technique for when the shape you are isolating has other shapes intersecting with it is to have the intersecting part start at the time when whatever earlier mask comes across it, so you don’t have unusual chunks of the intersection showing up along either of the masks.

Once you have done the whole wing you’ll end up with something like this:flash_anime_mask_ss23.jpg
Masks Unlocked

flash_anime_mask_ss24.jpg
Masks locked.

As I stated before, the keyframes and the starting and ending points for each shape you isolate is subjective. You may have some shapes “make themselves known” earlier than others.

20.) Return to the stage.

  • a. Select your wing movieclip on the scene 1 stage and select Copy>Paste
  • b. Select the new wing and select Modify>Transform>Flip Horizontal
  • c. Bring the starting points close together (the only visible parts of your movieclip) and align them vertically and then select them both and Convert to Symbol (f8). Name the symbol “wingpair”.
  • d. Change the Align panel setting “To Stage” and then Center your grouped object horizontally on the stage. Position is vertically about a quarter of the way from the top (basically to keep the animation from running off the stage).

flash_anime_mask_ss22.jpg

22.) Next, to spice things up, we’re going back to our Vector Pack resources and will open the Sexy Vector Pack from Set 2 and grab this silhouette by Copying it to your clipboard.

sexy_vectorpack_ss.jpg

  • a. Return to Scene 1 of growwings.fla and create a new layer above your current layer that has the wing movie on it. Paste the contents of your clipboard to the new layer and name this layer “sexy”. Select the new object and select Convert to Symbol to convert it to a MovieClip object (f8) and name it “silhouette”.
  • b. Name the wing layer “grow”
  • c. Next I am going to select each movie clip object, navigate down to the properties panel and tint the silhouette and the wingpair to a light grey (#cccccc).

angel_fnl_ss.jpg

  • d. Change the canvas background to the darkest grey (#333333).
  • e. Now, I’m going to add a little more depth to the background by grabbing the Cathedrals from the Architectural Series Vector pack in Set 1. Add a third layer to your stage and copy and paste the three Steeple Catehdral vector design to it. Convert it into a Movie Clip object and scale it to fit across your canvas.
  • f. Last, rotate the wingpair object counter-clockwise to help it line up with the silhouette’s shoulders.

Voila!

Love, Chris

Conclusion:

Here’s a summary of what we just did, the art of “UNVEILING”

  • a. Find a vector design to “unveil” in front of your user (our wing)
  • b. Mask your vector design with a shape tween where you isolate one section of your design at a time, animating your masking shape from a small mask to a larger mask “unveiling” the masked vector design
  • c. Replicate your vector design as the masked object, where each time you unveil another piece of your design, repeatedly, until all the end results of all the shape tweens make up your entire vector design!


Dowload the Source File Here (INCLUDES THREE FREE VECTOR DESIGNS!)

About the Author, Wilson Revehl

Wilson Revehl is the co-founder and CTO of Go Media. He is a website & rich internet application designer & developer specializing in HTML, CSS, Javascript & PHP. Go Media is a Cleveland website design and development firm specializing in custom Wordpress websites, creative visual communications and resources for the graphic design community. Mr. Revehl runs the Fort Myers Technology Studio.
Discover More by Wilson Revehl

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • Sebastien DR

    Wow, GoMediaZine tutorial are getting better and better!

    Good and interesting work!

    sebastiendr.com

  • Sebastien DR

    Wow, GoMediaZine tutorial are getting better and better!

    Good and interesting work!

    sebastiendr.com

  • Sebastien DR

    Wow, GoMediaZine tutorial are getting better and better!

    Good and interesting work!

    sebastiendr.com

  • Devin

    That is amazing! I have been wondering how to do this for some time but never figured it out! I will definatly be giving this a try soon!

  • Devin

    That is amazing! I have been wondering how to do this for some time but never figured it out! I will definatly be giving this a try soon!

  • Devin

    That is amazing! I have been wondering how to do this for some time but never figured it out! I will definatly be giving this a try soon!

  • stein

    Nice tutorial, tanks!

  • stein

    Nice tutorial, tanks!

  • stein

    Nice tutorial, tanks!

  • Dakota Cortez

    Get guys! Great stuff, as a designer this is going to come in handy!! In fact, Im working with a band now and needed to learn how to do this, this is amazing luck! And I love the Ohio weather comment, its so true! haha, gotta love that lake effect!

  • Dakota Cortez

    Get guys! Great stuff, as a designer this is going to come in handy!! In fact, Im working with a band now and needed to learn how to do this, this is amazing luck! And I love the Ohio weather comment, its so true! haha, gotta love that lake effect!

  • Dakota Cortez

    Get guys! Great stuff, as a designer this is going to come in handy!! In fact, Im working with a band now and needed to learn how to do this, this is amazing luck! And I love the Ohio weather comment, its so true! haha, gotta love that lake effect!

  • nonamist

    ohhh thats going to save me so much time! Iv already wasted hours cursing out the shape tween and I sure wish I would have found this great idea alot earlier, Great Tutorial and thanks for the vector art source too! ^_^ !,,!

  • Konrad

    Very nice tutorial ,I love it , the outcome is very nice , well done man .

  • nonamist

    ohhh thats going to save me so much time! Iv already wasted hours cursing out the shape tween and I sure wish I would have found this great idea alot earlier, Great Tutorial and thanks for the vector art source too! ^_^ !,,!

  • nonamist

    ohhh thats going to save me so much time! Iv already wasted hours cursing out the shape tween and I sure wish I would have found this great idea alot earlier, Great Tutorial and thanks for the vector art source too! ^_^ !,,!

  • http://www.burzs.com/edit/arg.php?id=250 Davids

    cool =}

  • http://www.burzs.com/edit/arg.php?id=250 Davids

    cool =}

  • http://www.burzs.com/edit/arg.php?id=250 Davids

    cool =}

  • Rapid.Ideal

    Ce tutoriel est vraiment excellent, d’une grande qualité, et c’est un plaisir de pouvoir profiter de quelques brushs gratuitement.
    Un régal, merci encore.
    (french inside :p)

  • Rapid.Ideal

    Ce tutoriel est vraiment excellent, d’une grande qualité, et c’est un plaisir de pouvoir profiter de quelques brushs gratuitement.
    Un régal, merci encore.
    (french inside :p)

  • Rapid.Ideal

    Ce tutoriel est vraiment excellent, d’une grande qualité, et c’est un plaisir de pouvoir profiter de quelques brushs gratuitement.
    Un régal, merci encore.
    (french inside :p)

  • A.G.

    Amazing :) Thanks alot and great job for your package ill buy soon ;) I apreciate the tutorials :D

  • A.G.

    Amazing :) Thanks alot and great job for your package ill buy soon ;) I apreciate the tutorials :D

  • A.G.

    Amazing :) Thanks alot and great job for your package ill buy soon ;) I apreciate the tutorials :D

  • Konrad

    Very nice tutorial ,I love it , the outcome is very nice , well done man .

  • Konrad

    Very nice tutorial ,I love it , the outcome is very nice , well done man .

  • jerens

    Hey great work! Planning on buying the vectors soon! Any tuts on how to make vec?

  • jerens

    Hey great work! Planning on buying the vectors soon! Any tuts on how to make vec?

  • jerens

    Hey great work! Planning on buying the vectors soon! Any tuts on how to make vec?

  • yojan

    I’ve seen this effect in some music videos, was really fasinated..but didn’t know how they did it..Glad everything’s clear now

  • yojan

    I’ve seen this effect in some music videos, was really fasinated..but didn’t know how they did it..Glad everything’s clear now

  • yojan

    I’ve seen this effect in some music videos, was really fasinated..but didn’t know how they did it..Glad everything’s clear now

  • Jim

    Thanks for this tutorial… I was wondering how to do this for the longest time!!!

    I’m not trying to take away from your tutorial… but I found a much quicker way to get the exact same effect.

    make a new movie clip

    paste in the wings

    goto frame 2 and erase a little bit of the wings

    goto frame 3-New Keyframe- and erase a little more of the wings

    continue this until all the wings are erased

    highlight all the frames, and select (reverse frame order)

    Presto… exact same effect. =)

  • Jim

    Thanks for this tutorial… I was wondering how to do this for the longest time!!!

    I’m not trying to take away from your tutorial… but I found a much quicker way to get the exact same effect.

    make a new movie clip

    paste in the wings

    goto frame 2 and erase a little bit of the wings

    goto frame 3-New Keyframe- and erase a little more of the wings

    continue this until all the wings are erased

    highlight all the frames, and select (reverse frame order)

    Presto… exact same effect. =)

  • Jim

    Thanks for this tutorial… I was wondering how to do this for the longest time!!!

    I’m not trying to take away from your tutorial… but I found a much quicker way to get the exact same effect.

    make a new movie clip

    paste in the wings

    goto frame 2 and erase a little bit of the wings

    goto frame 3-New Keyframe- and erase a little more of the wings

    continue this until all the wings are erased

    highlight all the frames, and select (reverse frame order)

    Presto… exact same effect. =)

  • Travmanx

    Awesome tutorial you have there! I am looking foward to seeing some more tutorials. Also I am going to be buying a Vectpack very soon. You should make a tutorial on creating one too!

    Keep them comin’!

  • http://www.gomedia.us Chris

    Actually Jim (COMMENT #12), we’ve tried your method before and the tough thing with complex shapes and your proposed method is making it look smooth and not chunky. It also is more time-consuming if you want it to look good. The shape tween concept is more efficient because it cuts countless frames that you would otherwise have to chop away at using your technique.

  • http://www.gomedia.us Chris

    Actually Jim (COMMENT #12), we’ve tried your method before and the tough thing with complex shapes and your proposed method is making it look smooth and not chunky. It also is more time-consuming if you want it to look good. The shape tween concept is more efficient because it cuts countless frames that you would otherwise have to chop away at using your technique.

  • http://www.gomedia.us Chris

    Actually Jim (COMMENT #12), we\’ve tried your method before and the tough thing with complex shapes and your proposed method is making it look smooth and not chunky. It also is more time-consuming if you want it to look good. The shape tween concept is more efficient because it cuts countless frames that you would otherwise have to chop away at using your technique.

  • Travmanx

    Awesome tutorial you have there! I am looking foward to seeing some more tutorials. Also I am going to be buying a Vectpack very soon. You should make a tutorial on creating one too!

    Keep them comin’!

  • Travmanx

    Awesome tutorial you have there! I am looking foward to seeing some more tutorials. Also I am going to be buying a Vectpack very soon. You should make a tutorial on creating one too!

    Keep them comin’!

  • nimble

    wow. the whole process is tedious and the fact that you did a tutorial that is very easy to read is amazing!

  • nimble

    wow. the whole process is tedious and the fact that you did a tutorial that is very easy to read is amazing!

  • nimble

    wow. the whole process is tedious and the fact that you did a tutorial that is very easy to read is amazing!

  • oi oi

    any other guys from go media want to reply to this tutorial :) … and tell everyone to buy their overpriced vector shapes

  • oi oi

    any other guys from go media want to reply to this tutorial :) … and tell everyone to buy their overpriced vector shapes

  • oi oi

    any other guys from go media want to reply to this tutorial :) … and tell everyone to buy their overpriced vector shapes

  • Jennifer Sandra A

    Thank You so much for posting this tut.I was just searching for this and now its here.God bless You for this and keep the good work going.

  • Jennifer Sandra A

    Thank You so much for posting this tut.I was just searching for this and now its here.God bless You for this and keep the good work going.

  • Jennifer Sandra A

    Thank You so much for posting this tut.I was just searching for this and now its here.God bless You for this and keep the good work going.

  • kiran

    can’t we make same wings using mask
    anyway this is very nice
    please reply me

  • kiran

    can’t we make same wings using mask
    anyway this is very nice
    please reply me

  • kiran

    can’t we make same wings using mask
    anyway this is very nice
    please reply me

  • http://www.seastories.sg charles

    i would buy it if there was a component which did these actions!

  • http://www.seastories.sg charles

    i would buy it if there was a component which did these actions!

  • http://www.seastories.sg charles

    i would buy it if there was a component which did these actions!

  • http://www.seastories.sg charles

    how do i add curve points for the mask?

  • http://www.seastories.sg charles

    how do i add curve points for the mask?

  • http://www.seastories.sg charles

    how do i add curve points for the mask?

  • ezzz

    what does drill into the .swf mean?

  • ezzz

    what does drill into the .swf mean?

  • ezzz

    what does drill into the .swf mean?

  • http://www.gomedia.us Wilson

    “Drill into” is slang for double-click with the mouse. When it comes to Flash, this is how you might get down into sub-nested objects.

  • http://www.gomedia.us Wilson

    “Drill into” is slang for double-click with the mouse. When it comes to Flash, this is how you might get down into sub-nested objects.

  • http://www.gomedia.us Wilson

    “Drill into” is slang for double-click with the mouse. When it comes to Flash, this is how you might get down into sub-nested objects.

  • Pingback: moving light source in flash

  • http://www.pairodime.com/web-design/ pairodime

    I found this article truly impressive – You have great screen shots and the download came in handy to fully understand your process. I have been developing some new flourishes and was looking for a way to animate them in FLASH – I now have a great source for information.

    - Thank you.

    PS – keep up the good work on the tutorials – we will check back often.

  • http://www.pairodime.com/web-design/ pairodime

    I found this article truly impressive – You have great screen shots and the download came in handy to fully understand your process. I have been developing some new flourishes and was looking for a way to animate them in FLASH – I now have a great source for information.

    - Thank you.

    PS – keep up the good work on the tutorials – we will check back often.

  • http://www.pairodime.com/web-design/ pairodime

    I found this article truly impressive – You have great screen shots and the download came in handy to fully understand your process. I have been developing some new flourishes and was looking for a way to animate them in FLASH – I now have a great source for information.

    - Thank you.

    PS – keep up the good work on the tutorials – we will check back often.

  • Dragan

    thanks !

  • Dragan

    thanks !

  • Dragan

    thanks !

  • Linda

    Brutally…
    My result doesn’t look like yours, but I’ll keep on trying! Thanks anyway, I’ve searched a long time for a tutorial like this :)

  • Linda

    Brutally…
    My result doesn’t look like yours, but I’ll keep on trying! Thanks anyway, I’ve searched a long time for a tutorial like this :)

  • Linda

    Brutally…
    My result doesn’t look like yours, but I’ll keep on trying! Thanks anyway, I’ve searched a long time for a tutorial like this :)

  • Derek

    So does this translate to AFX as well using animated masks? Or is there a more efficient way to make elements “grow” in AFX?

    Thanks for the great tutorial.

  • Derek

    So does this translate to AFX as well using animated masks? Or is there a more efficient way to make elements “grow” in AFX?

    Thanks for the great tutorial.

  • Derek

    So does this translate to AFX as well using animated masks? Or is there a more efficient way to make elements “grow” in AFX?

    Thanks for the great tutorial.

  • http://www.gomedia.us Wilson

    Hi Derek, I think by AFX you mean some sort of Actionscript Effect? Masking and animation with actionscript is achievable, however animating an “unveil” of a complex shape would be a very difficult thing to pull off. I know if would require some pretty advanced algorithms to be possible but I haven’t attempted such to-date. If anyone out there has written actionscript to emulate this effect, we’d love to see it!

  • http://www.gomedia.us Wilson

    Hi Derek, I think by AFX you mean some sort of Actionscript Effect? Masking and animation with actionscript is achievable, however animating an “unveil” of a complex shape would be a very difficult thing to pull off. I know if would require some pretty advanced algorithms to be possible but I haven’t attempted such to-date. If anyone out there has written actionscript to emulate this effect, we’d love to see it!

  • http://www.gomedia.us Wilson

    Hi Derek, I think by AFX you mean some sort of Actionscript Effect? Masking and animation with actionscript is achievable, however animating an “unveil” of a complex shape would be a very difficult thing to pull off. I know if would require some pretty advanced algorithms to be possible but I haven’t attempted such to-date. If anyone out there has written actionscript to emulate this effect, we’d love to see it!

  • Derek

    No, sorry. I mean After Effects. =)

  • Derek

    No, sorry. I mean After Effects. =)

  • Derek

    No, sorry. I mean After Effects. =)

  • tido

    i finished my 1st wing but i cant copy it and flip it horizontle. I orginized them in folders . i think i have tried everything. please help!

  • tido

    i finished my 1st wing but i cant copy it and flip it horizontle. I orginized them in folders . i think i have tried everything. please help!

  • Jutes

    i’ll try to make one..i was amaze by the technique… Thanks for giving sample.. :j

  • Jutes

    i’ll try to make one..i was amaze by the technique… Thanks for giving sample.. :j

  • will

    I cant seem to get it working as the shape tween doesn’t work (broken line where there should be arrows). I used the pen tool and adjusted the shape on each key frame and then converted them to fills but the shape tween wont work. It’s driving me crazy. Any idea’s what im doing wrong?

    Cheers

  • will

    I cant seem to get it working as the shape tween doesn’t work (broken line where there should be arrows). I used the pen tool and adjusted the shape on each key frame and then converted them to fills but the shape tween wont work. It’s driving me crazy. Any idea’s what im doing wrong?

    Cheers

  • craz

    gibts das auch auf deutsch?
    die seite und das programm?
    aber so wie ich das verstanden habe
    ist des garnicht mal so schlecht.

  • craz

    gibts das auch auf deutsch?
    die seite und das programm?
    aber so wie ich das verstanden habe
    ist des garnicht mal so schlecht.

  • jet

    WAAAHHH!!!! finally i found this!!!!!!!!!!!!!!!!!!!11

  • jet

    WAAAHHH!!!! finally i found this!!!!!!!!!!!!!!!!!!!11

  • Shiney blue dude

    Excellent – I’m playing about a bit to get the paths shape to tween nicely, but getting there.

    For Derek: Yep you can do the 2D/3D stroke in After Effects to get this. It’s a hell of a lot easier too. 2 keyframes on a basic one, as many as you want on a more complicated one. There’s a growing vine tutorial somewhere on creative cow.

  • Shiney blue dude

    Excellent – I’m playing about a bit to get the paths shape to tween nicely, but getting there.

    For Derek: Yep you can do the 2D/3D stroke in After Effects to get this. It’s a hell of a lot easier too. 2 keyframes on a basic one, as many as you want on a more complicated one. There’s a growing vine tutorial somewhere on creative cow.

  • Laurens

    Hi,
    can someone make it for me :D
    i can’t make it becouse my computer have only 100 MB :S
    and i want it for my website!
    iff someone will make it for me , you can go to vuur_bende@yahoo.com.
    (please not spam)

    greetings Laurens
    ps. iff you want populariti on my website , you can gat it iff you make a animated wing’s effect. (take contact with me!!!)

  • Laurens

    Hi,
    can someone make it for me :D
    i can’t make it becouse my computer have only 100 MB :S
    and i want it for my website!
    iff someone will make it for me , you can go to vuur_bende@yahoo.com.
    (please not spam)

    greetings Laurens
    ps. iff you want populariti on my website , you can gat it iff you make a animated wing’s effect. (take contact with me!!!)

  • Pingback: Bluemag » Gig Poster Design

  • Pingback: multimediamaniacs » groeiende vleugels in flash

  • Laura

    Hi there,

    I’m trying to create a mask with a motion tween. It’s a circle moving over a stem- and I want the stem to appear gradually as the circle moves over it. I’ve managed to add the motion tween no problem, nut I can’t seem to integrate the circle (as a mask) with the stem (as a graphic under layer mask).
    Can you help me, please?

    Thanks
    Laura

  • Laura

    Hi there,

    I’m trying to create a mask with a motion tween. It’s a circle moving over a stem- and I want the stem to appear gradually as the circle moves over it. I’ve managed to add the motion tween no problem, nut I can’t seem to integrate the circle (as a mask) with the stem (as a graphic under layer mask).
    Can you help me, please?

    Thanks
    Laura

  • Pingback: Flash CS3 animation basics: Shape tween

  • Pingback: Q Swish/flash vraagej - 9lives

  • cutt

    nice post!!

  • cutt

    nice post!!

  • http://colordesktop.blogspot.com Rabin

    nice tutorial
    thanks for this

  • http://colordesktop.blogspot.com Rabin

    nice tutorial
    thanks for this

  • golfman_story

    What a useful and great info !! Tq very much..

    Cheers!

    Golfman Story

  • Ian

    Hi i need serious help in this tutorial…

    I had tried to did it in my own vectors…everything went fine. but when i bring to stage, it couldn't appeared the same as in the masking movie clip. It appeared the vector was blocking the whole growing masking effects please help.

    Ivanko83@hotmail.com

    Thanks…

  • anis

    thank …a lot……

  • Dan

    So does any one have any ideas on how to use the reveling mask movie as a mask for something else? I took the time to build the reveling mask for most of the Hoolander vectors but can't get flash to let me use them as mask for some images.

    thanx for any help, dan.

  • http://www.ifairwholesale.com Women's Shoes Wholesale

    Haha, I just see angel grows wings first time.

  • http://www.ifairwholesale.com Women's Shoes Wholesale

    Haha, I just see angel grows wings first time.

  • http://www.alleinunterhalter-toni.de/ Alleinunterhalter Köln

    great tutorial. thx alot.

  • http://www.superchinawholesale.com/ handbags

    method before and the tough thing with complex shapes and your proposed method is making it look smooth and not chunky. It also is more time-consuming if you want it to look good. The shape tween concept is more efficient because it cuts countless frames that you would otherwise have to chop away at using your technique.

  • 3dmodels

    Now Free Download Hight Quality 3d models 3d objects for 3DSMAX, Maya, Softimage, Lightwave. (3D Cars, 3D People, 3D Furnitures, etc). For use in all your 3D Animation and multimedia works. animation | art | vr | tutorials | 3d models | 2d | software | plug-ins | textures | materials | scripts | poser and find out new 3d jobs and hot 3d video. http://www.all3dmodels.com

  • Matt

    Thanks for this nice work!
    dizi izle

  • Matt

    Thanks for this nice work!
    dizi izle

  • Matt

    Thanks for this nice work!
    dizi izle

  • Mohana Kumar K V

    Great tutorial …. thank u for explaining it very clearly ……

  • iPod iPhone Jailbreak

    nice wing mask

  • Raghibsuleman

    Cool…

  • http://www.salesuggsboots.com/ugg-classic-cardy-c-5.html ugg boots

    I would have found this great idea alot earlier, Great Tutorial and thanks for the vector art source too!

  • http://www.ticketloot.com/reba-mcentire-tickets Reba McEntire Tickets

    I am looking foward to seeing some more tutorials. Also I am going to be buying a Vectpack very soon. You should make a tutorial on creating one too!

  • http://www.webhostingreviewz.com/1and1-review/ 1 and 1 review

    hi is it possible to see similar products in germany?

  • http://www.ghdhair-straightener.org 542476396

    Get guys! Great stuff, as a designer this is going to come in handy!! In fact, Im working with a band now and needed to learn how to do this, this is amazing luck! And I love the Ohio weather comment, its so true! haha, gotta love that lake effect!

  • http://www.orjinkrem.net orjin krem

    Wow, GoMediaZine tutorial are getting better and better!

    Good and interesting work!

  • Moliva

    I cant seem to get it working as the shape tween doesn’t work (broken line where there should be arrows). I used the pen tool and adjusted the shape on each key frame and then converted them to fills but the shape tween wont work. It’s driving me crazy. Any idea’s what im doing wrong?

    • http://www.bigponypoloshirts.co polo big pony

      Wow, I haven’t thought of that, but it makes sense. People do like the contoversial.I will use it on my site. It is most certainly a good way to draw people in. It excites people’s curiousity. Thanks for the helpful tip.

  • http://www.klavisnurs.com Klavis

    Your blog posts are insightful. I will take them into deep thought and consideration. Your point

  • http://www.drmustafaerarslan.org/ panax

    Thanks for the feedback and tips

  • http://www.facebook.com/abhishek.dwivedi.7 Abhishek Dwivedi

    very good work i like this

  • http://www.facebook.com/abhishek.dwivedi.7 Abhishek Dwivedi

    very good work