Moving from Photoshop to Flash

If you have a logo that you need to bring in to Flash from Photoshop, it's pretty simple. If you want to use a background on your flash project, it's better if you have a logo with a transparent background.

You'll need to make sure that the graphic is the right size. Usually graphics or logos made for print in Photoshop have too much resolution.

SIZE YOUR LOGO

1. Open the graphic or logo in Photoshop.
2. Go to the IMAGE menu and select IMAGE size
3. Take a look at the size of the image and compare it to the size of your project. If your image is bigger than the size of your project, pick one of the dimensions of your project and resize the project to that dimension. Let's say your project is 760 pixels wide by 500 pixels tall and your logo (like in this graphic) is 1644 pixels wide by 914 pixels tall. Change the width of the project to 760 pixels wide and make sure you have the CONSTRAIN PROPORTIONS option on.

4. Take a look at the other dimension. In this case, the height, it should be smaller than the width of the height of your project...if it isn't then change the height (making sure the width is smaller than the width of your project.
5. Once you've made your changes, click the OK button.

Now, the size of your image matches either the height or the width, but not both. We'll fix that now by changing the canvas size of the project.

CHANGE THE CANVAS SIZE

1. Go to the IMAGE menu and select CANVAS SIZE
2. In the Canvas size dialog box, switch the units pop up to Pixels
3. Change the size of the appropriate dimension to the size of your Flash project (in our case, we'll change the width height to 500 pixels.

We're almost ready for Flash. Chances are that your logo, if left at it's current size will is too large. We'll need to shrink it to the size it will be when you bring it into Flash.

PERFORM A FREE TRANSFORMATION

1. Go to the EDIT menu and select FREE TRANSFORM (COMMAND-T on a Mac, CONTROL-T) on a PC.
2. Use the handles to resize your logo to a manageable size.
3. Double click in the center of the logo to accept the resizing change.

Now that you've size the logo to the size that will be used in Flash, let's save the file. We're going to create some special effects versions of this logo for use in flash, so it will be good to have a version of it at this stage.

SAVE THE FILE

1. Go to the FILE menu and select SAVE AS...
2. Choose a location on your hard drive.
3. click on the SAVE button.

You can now create some special effects that you can bring into flash. The easiest effect to do is the motion blur effect.

APPLYING SPECIAL EFFECTS

1. Go to the FILTER menu and select the BLUR submenu and the MOTION BLUR option.
2. Set the motion blur to some setting. and click OK.

This will make the logo look like it's really moving along in flash. We need to export this logo, but before we do, let's get rid of the extra blank pixels in the image.

TRIMMING THE IMAGE

1. Go to the IMAGE menu and select TRIM
2. This will trim the transparent pixels in your image.

Now, you're ready to export the blurred logo. The best way to export out of Photoshop is through the SAVE FOR WEB option in the FILE menu.

EXPORT AS A TRANSPARENT PNG

1. Go to the FILE menu
2. Select SAVE FOR WEB...
3. From the file format, choose PNG-24
4. Make sure the transparency option is on.
5. Click on the SAVE button
6. Choose a location on the hard drive.

Okay, we're going to need the original version of the logo without the blur as well. Since we saved the logo beforehand, the easiest way to get a clean version is to go to the FILE menu and select REVERT. Now repeat the steps you took to eliminate the transparent pixels and save a different version of the logo.

You can repeat these steps to try create a few versions of special effects for your logos.
We're ready to bring the logo into Flash.

IMPORTING THE LOGO

1. Open your document in Flash or create a new document
2. Go to the FILE menu, then select IMPORT TO STAGE
3. Locate your logo on the hard drive select it and click on the IMPORT button
4. The logo will be placed on your work area.
5. Open (COMMAND-L Mac, CONTROL-L) or look at Flash's library.
6. You'll notice your logo is listed on the library but with an icon that doesn't look like a normal symbol. This is how Flash imports Bitmaps. You can double click on the bitmap and see the different options Flash has for compression.

Since the bitmap is not a Symbol and we'll probably want to animate it (or at least use multiple instances of the symbol in different parts o your movie, we'll need to convert it to a symbol.

CONVERTING IT TO A SYMBOL

1. Make sure the bitmap is selected in the work area.
2. Hit F8, name your symbol and make sure you select MOVIE CLIP as the behaviour

Repeat the import for the other bitmap (the blur or other blurs). Once you have your bitmaps in flash converted to symbols, you're ready to animate. Animating this type of special effect is something you don't really do with tweens, its something better handled with frame by frame or cel based animation.

Now, you're ready to animate your designs. There are different ways to achieve special effects with the Photoshop filters that you chose. the trick with these special effects is to keep them on screen for a very short time and animate.

Here's a few examples of what it can look like. Part II of this tutorial to find out how it's done:

• Mega Logo Animation 1
• Mega Logo Animation 2
• Mega Logo Animation 3
• Mega Logo Animation 4
• Mega Logo Animation 5
• Mega Logo Animation 6