GoMedia_Vector_Freebie_An-Angel-Grows-Wings (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 Cleveland’s source for graphic design services, Go Media and the  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.

• 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

• 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

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

• 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(); )

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”

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

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.

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

• 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

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

• 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

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.

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.

• 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’

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

• 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.

• 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.

• 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

• 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.

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:
Masks Unlocked

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).

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.

• 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).

• 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!

GoMedia_Vector_Freebie_An-Angel-Grows-Wings (INCLUDES THREE FREE VECTOR DESIGNS!)