Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Web Design Basics  Home Web Design Basics Templates & Tuning Working with Flash
rss

Working with Flash

Author: Igor Lognikov, Editor More by this author


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 the top menu and browse to the location of your FLA file. Another and simpler way to open your file is just to drag and drop it from your file browser to your Macromedia Flash editor window. Also, if FLA files on your computer are based on Macromedia Flash software, you can just double click them in your file browser and this file will be opened and ready to use.

Open FLA File
Open FLA File

Note: If you see the "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.

Changing Text in Flash

To customize a Flash header to your company needs you have to change company name, company slogan and button texts.

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

First of all you should open your FLA file from a web design template package in Macromedia Flash.

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

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

Edit Text
Edit Text

But some Flash headers have complicated structures 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 the symbols library.

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

Symbols Library
Symbols Library

Browse the symbols library to find the symbol containing text you want to modify. You can see a symbol's preview in the preview window at the top of the symbols library panel. Actually, all symbols that contain text have appropriate names such as ‘Company Name' or ‘About Us'. If you are unable to see the text for some reason, try to change the movie background to non-white. Because white colored text on a white background is invisible. To do this you should choose Modify/Document… from the top menu and change the background color in the 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.

Text Properties
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.

Assigning Links in Flash

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.

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.

Symbol Behavior
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");
}

GetURL Action Script
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. 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.

URL Input Box
URL Input Box

Now it's time to publish your flash movie.

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

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.

Bitmap Symbols in Library
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.

Bitmap Properties
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.

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.

Publish Settings
Publish Settings

To change jpeg image compression ratio move Jpeg Quality slider or type it in the input box at the right of it. Low quality (high compression) extremely reduces download time by flash looses its professional look. Try to experiment with quality to get optimal size/quality balance.

Another way to affect movie size is to change Audio Stream and Event options. Press Set button at the right to change music quality options.

Actually you can publish your movie directly from Publish Settings window, see Publish button at the bottom. Or you can publish it from every point of Macromedia Flash by pressing "Shift+F12" hotkey.

Published SWF file will appear in the folder were corresponding FLA file located.

Note: If some fonts in your published SWF file differ from original it means that you have not installed all appropriate fonts. For instructions about it read Font Installation section.

Replace old SWF file in HTML/Flash folder with a new one. Now it's time to check modifications you've made. Go to the HTML folder of your web design template and launch HTML file to see changes.



About the Author:

Click to Visit Author's Website

Igor Lognikov is an editor at Web Design Library, the author of many pamphlets related to the web design industry and a fully accredited card-carrying journalist since 1999.


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Working with Flash"