Tips for Animating with Flash CS6

In this post

Tips for creative animations using Adobe Flash. Whether your new to Adobe Flash or not you will find innovative animation tips here. 


flashIn my industry I’ve worn so many hats and learned so many programming languages and programs that I couldn’t even name them all. In 1999-2001 I was primarily a Flash programmer. Since the advent of HTML5 the use of Flash has steadily declined, however not where I am working now. I’m a conceptual interactive modeler. I create user interfaces for technology that doesn’t exist. I love what I do.

That being said I’ve found myself designing in Flash on a pretty regular basis. I’d forgotten how much I liked animating. Creating interfaces and how the operate has been a dream come true. It has been a bit of a learning curve as Flash has changed quite a bit since I last used it over 10 years ago. So I figured I’d make a post for a few Flash tips that have come in handy as of late.

Creating Vector images with Illustrator

Flash works well with vector images, but you don’t always have a vector version of the subject you want to use. That’s where you can use Illustrator to create vector images for use with Flash. It’s a lot easier than I thought it was going to be and is outlined in the steps below.

Creating Vector images with Illustrator

  1. Open the image you want to turn vector in Illustrator.
  2. At the top of the screen is a button that says “Image Trace”. There are several options including low and high fidelity. Depending on how complex your image is; colors, angles, etc, you can pick accordingly. For this image, I used the Black and White logo option.
  3. Once your image is done rendering you will see a button that says expand. This will outline all of the angles in your image.
  4. Once all the images are outlined you’ll need to separate them from your background. To do this go to the “Object” tab and select “Ungroup”. You can now delete the background.
  5. Once your image is rendered and cut out you’ll need to export it in a format to use with Flash. Go to file > export and select Flash SWF.
  6. You now have a file that you can import into Flash.

Masking Layer in Flash

If you’re familiar with Photoshop masks this is very similar with the exception of animated cells. Basically, you place a layer over another so that only the masked content is displayed. The image below illustrates how to create a mask in Flash. It’s really quite simple.

Masking Layer in Flash

  1. Create 2 layers. 1 for your main layer and one for the layer that will be masking the other.
  2. You can use a graphic if you want for your masked layer or you can insert an animated clip. In this one, I made the clip animated to create the look that the tire track is being laid down.
  3. Right, click on the layer that will be masking the layer below it and click “Mask”. This will lock both of the layers and c create the masked effect.

Video Encoding for Flash

If you want to include flash video in your animation you can do so with the correct file format. 2 good tools for changing files into the format you need are Adobe Media Encoder which comes with most versions of Adobe bundled packages. If you don’t have this tool for one reason or another you can use a great on-line alternative Online Video Convert. Whether you are using either option they will both let you output the correct video file type for use with Flash which is an FLV. Once you have your FLV encoded you can now import that into Flash using File > Import.

That’s all for this post. I hope you found it helpful. I’ll be adding more Flash tutorials here soon. Bookmark this post or share it on your favorite social networks. Happy Flashing Y’all.



Tips for Animating with Flash CS6 Click To Tweet