Opening Your FLA File

FLA file is a source Flash file that contains all animation and graphics. To manage this file you should have Macromedia Flash MX 6 or higher installed on your computer. 

To open FLA file in Macromedia Flash editor you should select File/Open from top menu and browse to the location of your FLA file. Another and more simple way to open file is just drag and drop it from file browser to your Macromedia Flash editor window. Also if FLA files on your computer associated with Macromedia Flash software you can just double click it in your file browser and this file will be opened and ready to use.

Fig 9.1 Open FLA File

Note: If you see “Missing Font Warning” alert message it means that you’ve not installed all fonts included in package. To get more information about fonts installation read Font Installation section.
 

Changing text in Flash

To fit flash header your company needs you have to change company name, company slogan and buttons text.

It’s quite easy. So let’s do it step by step.

First of all you should open your FLA file from web design template package in Macromedia Flash. Previous chapter contains quick guide about this question.

Now you should locate text that you want to change. There are two ways of how to do that.

The first way is to access it from the timeline. After you’ve opened FLA file in Macromedia Flash, move red timeline slider and watch the animation process. When you’ll see text that needs to be modified, stop the timeline slider. Choose Selection Tool from tools panel or call this tool by pressing “V” hotkey. Double click this text until you’ll get type cursor in it. Then just type your own text instead of original once.

Fig 9.2 Edit Text

But some of flash headers have complicated structure to create powerful animation effects. So it will be hard to access symbols containing text from the timeline. The easiest and most reliable way to locate elements in flash is to use symbols library.


To open symbols library you can use “Ctrl + L” hotkey or choose Window/Library… from the top menu.

 

Fig 9.3 Symbols Library

Browse the symbols library to find symbol containing text you want to modify. You can see symbols preview in the preview window at the top of symbols library panel. Actually all symbols the contain text have appropriate names such as “Company Name” or “About Us”. If you are unable to see text for some reasons try to change movie background to non white. Because white colored text on white background is invisible. To do those choose Modify/Document… from the top menu and change background color in popup window.

When you have found symbol containing text you want to change double click symbols icon to show text symbol in main workspace window. Then just double click text with Selection Tool or single click it with Text Tool (hotkey “T”) to edit text.

While editing text in Macromedia Flash you have wide choice of attributes able to modify. All that options are accessible from the properties panel at the bottom of Macromedia Flash workspace. If you can’t see this panel for any reason you can open it by pressing “Ctrl + F3” hotkey.

 

Fig 9.4 Text Properties

 To modify text color or font size just select text using Text Tool and go to Properties Panel to change appropriate option. You can find font family and size dropdowns, color select box and align icons there. Modify any of that options and change will update to selected text.

When you have finished editing of the text block, press “Esc” key to quit editing mode. Now you can repeat operations described above to edit other text blocks of your flash header.

After you’ve made all appropriate changes you should publish your flash movie to SWF file and update it to your web design template. You can find instructions about it in Publishing your flash movie section.

Assigning links in Flash

To add some interactivity to the flash animated part of your web design template you should add some links to the flash objects. For example you’ll need to link flash buttons with pages of your website or redirect your flash intro to homepage after it finished.

There are some kinds of links in Macromedia Flash: button symbol links, frame links and text links.

First of all you should open source FLA file in Macromedia Flash editor, see instructions about it in Opening your FLA file section.

To add links to the button symbols in your flash movie do the following. First of all you should locate button symbol you want links be assigned to. There are two ways of how to do that.

The first way is to access it from the timeline. After you’ve opened FLA file in Macromedia Flash, move red timeline slider and watch the animation process. When you’ll see button symbol that needs to be linked, stop the timeline slider.

Select it by single clicking it with Selection Tool . You can choose Selection Tool from tools panel or call this tool by pressing “V” hotkey. Go to the Properties Panel to check this symbols behavior. If you can’t see this panel for any reason you can open it by pressing “Ctrl + F3” hotkey. At the top left corner of this panel symbols behavior dropdown is located. It must be a “Button”. If it is “Movie Clip”, “Graphics” or some other that differs from “Button” you can’t assign links to it in the right way. Don’t change it to the “Button” because it will damage original rollover structure. Double click this symbol to get inside of it, select its content and check symbols behavior again.

 

Fig 9.5 Symbol Behavior

If you are still unable to locate appropriate symbol, maybe some symbols are hidden or locked. To unhide/unlock symbols do the following. Go to timeline panel, there is a layers list at the left of it. There are three icons at the top of this list: eye, lock and rectangle. Click eye and lock icons twice to unhide and unlock all layers in current symbol.

Some of flash headers have complicated structure to create powerful animation effects. So it will be hard to access button symbols from the timeline. The easiest and most reliable way to locate elements in flash is to use symbols library. To open symbols library you can use “Ctrl + L” hotkey or choose Window/Library… from the top menu.

Browse the symbols library to find button symbol you want links be assigned to. You can see symbols preview in the preview window at the top of symbols library panel. Actually all button symbols have appropriate names such as “About Us button” or “Search button”. Double click symbols icon to edit it in the main workspace window. Then do operations described above to locate symbol with “Button” behavior.

After you’ve selected button symbol press “F9” to open Actions panel. If this button has rollover effect, you will see following script code there:


on (rollOver) {

gotoAndPlay(2);

}

on (rollOut) {

gotoAndPlay(10);

}


Add there following getURL action script code:



on (release) {

getURL("your_url_here");

}

Fig 9.6 GetURL Action Script

You should type URL button will be linked to as getURL function argument. For example if you want to link button to your contacts page type following:



on (release) {

getURL("http://mywebsite.com/contacts.html");

}

Actually getURL function accepts three arguments: URL, window type and variables send method. Window type argument specifies were new URL will be opened. If this argument is blank link will be open in same window. If you wan to open it in a new window, use “_blank” argument. Variables send method should be used if you are parsing some variables through URL string. Available options are “GET” and “POST”. Next action script example calls products page with “item” variable with “9” value in the same window using GET method.

on (release) {

getURL("http://mywebsite.com/products.php?item=9", "_self", "GET");

}

If you are using flash intro template, you will need to redirect visitor to your website after intro finished playing. To do these follow next instructions.

Move red timeline slider to the end of flash intro movie. Select the last frame by single clicking it with mouse. Press “F6” to create keyframe in this frame. Press “F9” to open Actions panel. Type the following code there.

getURL("your_url_here");

Replace your_url_here text with appropriate URL of your website.

If you want some portion of text to be linked to some location on web do the following. Locate symbol containing text using instructions from Changing text section. Select text you want to link with URL using Text Tool. Go to Properties Panel, press “Ctrl+F3” if you can’t see it for some reasons. At the very bottom of that panel you’ll see URL input box. It have chain icon at the left of it. Just fill that empty input box with appropriate URL.

Fig 9.7 URL Input Box

Fig 9.7 URL Input Box

Now it’s time to publish your flash movie. Read Publishing Your Flash Movie section for detailed instructions.
 

Changing images in Flash

In process of your web design template customization maybe you’ll need to insert to insert your company logo or images in flash animated header. Here you’ll find quick guide of how to do that.

Open your source FLA file in Macromedia Flash editor using instructions from Opening your FLA file section.

Now press “F11” to launch symbols library. To make search of needed image symbol easier sort them by kind by pressing “kind” tab at the top of symbols list. You’ll see that all bitmap symbols are grouped now at the top of whole symbols library.
 

Fig 9.8 Bitmap Symbols in Library

Browse these symbols to find symbol your want to substitute. You can see symbols preview at the top of symbols library. When you have found necessary bitmap symbol double click icon at the left of it to see symbol properties window.

Fig 9.9 Bitmap Properties

You’ll see image preview and options there. Check the image size. It looks like 193 x 214 pixels at 32 bits per pixel. To make your image fit original effects and animation the best way, your image must be same size as exchange image.

You can resize or crop your image using Adobe Photoshop. Open your image in it using File/Open… from the top menu. To resize or crop choose Image/Image Size… or Image/Canvas Size… accordingly. Then save image using File/Save As…, for using in flash chose one of the following image formats: JPEG, GIF or PNG.

Press Import button at the left and browse to location of your image file.

At the bitmap symbols properties window you can change image quality. Make it lower to reduce published file size.

No you should publish your flash movie. Next chapter will provide you with detailed instructions and tips about it.

Publishing your Flash movie

Finally, after you’ve made all appropriate change to the flash animated header of your web design template, you should publish and update it.

Maybe you’ll want to modify publish settings to reduce download time or increase image quality. To do that choose File/Publish Settings… from top menu. In Publish Settings window choose Flash tab. Main options that have significant influence on published SWF movie file size are Jpeg Quality, Audio Stream and Audio Event.
 

Fig 9.10 Publish Settings