Flash Essential

In this tutorial I'll be showing you how to take your artwork from Photoshop and import it into Flash retaining all your PSD File Information. This works by Flash taking all the individual layers from the PSD file and importing them as individual layers on our timeline. This allows us to edit each individual layer inside Flash, for example you could add instance names, create movie clips and buttons to the individual PSD layers. This allows us to get maximum creativity from both applications! In the example below I have just created a simple PSD with an open book, some shapes and text on it, ok nothing fancy I know. We'll import this into flash and add some basic animation to it . So let's get to it.

Note; This only works with Flash CS3

Download

Starter File

Finished File

TweenLite Powerful tweening engine.

Step 1 - Import Your PSD

Open up Flash and create a new Flash Document. Click File - Import - Import To Stage - Navigate To Your PSD. A dialog box (shown below) should appear, In the dialog select Convert Layers to Flash Layers and check the boxes for Place Layers at Original Position and Set Stage Size to Same Size as Photoshop Canvas, this sets the flash document to the size of the PSD document.

Step 2 - Editing The Layers

Now we'll edit the import setting for each layer. First we'll convert some of the layers to Movie-Clips allowing us to animate flash filter effects ect. To do this, we simply select the layer and then select Create Movie Clip For This Layer, notice we can now give an Instance Name below. We now need to do this for our Text Layers as well but instead we select Editable Text and then Create Movie Clip. Notice I have given the tut info layer the instance name text_mc.

Step 3 - Adding Some Animation

We'll add some basic animation just to show how easy it is to edit each individual layer of the Photoshop file in flash. We'll add a basic tween to our tut info layer using the TweenLite engine. So create a new layer on the timeline and name it actions then press F9 to open up our Actions panel and copy and paste the code below. All this code will do is add a red tint to the tut info later.

• import gs.TweenLite;
• TweenLite.to(text_mc, 1, {tint:0xcc3300});

Conclusion

This is just a short and very simple tutorial but it's a very powerful and useful tool and will save you bags of time on your projects, if like me you spend a lot of time integrating between Photoshop and Flash this integration tool is a bit of a god send!

This post is tagged AS3, Flash CS3, photoshop to flash intergration, PSD to Fla, TweenLite

Share This Post