INFO 424 SCHEDULE

Olympic medals, Phase 2

a

Phase 2:
Open Illustrator file in Flash

In Phase 2, you'll turn your image into a Flash file in preparation for adding interactivity. The final result of this phase will look identical to the Illustrator file, but it will be a .swf file (which can be viewed with the Adobe flash player).

Step 1: Create a new .fla file

a.   Watch this video which shows how to create a file and set up your workspace.

b.  Create a file and save it with the name “Medals_2.fla” (The 2 stands for "phase 2")"

"fla" is the file extension for uncompiled Flash files. When you compile a .fla file (i.e. package it to be run by the Flash reader), the file produced will have a "swf" extension.

Step 2: learn a bit more about the Flash interface

a.  To save yourself a few headaches, watch this video on managing panels.

b.  Open a few panels (from the Window menu). I’d suggest the "swatch" panel and the "color" panel. Practice moving them around, minimizing them, docking them, closing them.

c.  To get back to your original display, click the “CLASSIC” option from the drop-down menu in the upper right-hand corner and, if you've made changes, chose "Reset 'Classic'"

 f

Now you’re ready to import your Illustrator file:

Step 3: Import the Illustrator file

d.  Watch this video which shows how to import a file from Illustrator into Flash

e.  Import MedalDrawing.ai to the stage (choose the options to "Place objects at original position" and "Set stage to same size as Illustrator artboard..."

You’ll notice that the display of layers shown in the timeline is similar to the display in Illustrator - it includes the name of the layer and a hide/display and a lock/unlock option for each layer.

The layers will have the same locked/unlocked and hidden/visible status they had in Illustrator.

f. Your layers should now look like this:

g

You're almost done, but there is one minor modification that I'll have you make now so it doesn't cause problems later on. The text automatically gets imported as "TLF Text". If you leave it this way, it will interfere with the function of your button later so...

g. Select the text for one of the tabs and view its properties in the Properties Panel:

h. Change the text from TLF Text to "Classic Text:

i. Test your file by going to the "Control" menu and choosing "Test Movie" (in Flash Profesional) - if you get errors with that method, try another option.

If you use the "test in Flash Professional" option, a new window will open. It should look like this:

You're done!

In the next phase, you’ll really dive into to Flash and learn to make things move.

FINAL PRODUCT: Medals_2.fla

SUMMARY

Setting up a new file in Flash (video)

Flash intro screen

Managing panels in Flash (video)

Flash panels

Importing from Illustrator (video)

import form Illustrator dialog