This tutorial introduces some basic topics of flash animation and also gives you specific instructions for the customization of your flash intro. All good template suppliers provid full .fla source code for each intro, so that you can make just about anything out of it - including a really unique introduction to your site. However, this task is likely to require some advanced skills that this tutorial is too short too cover. So we are going to simply replace some text and images leaving the overall flow of the movie intact. The process of embedding a flash object into your page is also discussed.
Sample Intro is available to download for your practice. Once you have downloaded and unzipped it with WinZip, you will find these two files:
- The .swf file is a compiled movie.
- The .fla file is the source that you will edit.
In this tutorial, it is assumed that you are using Macromedia Flash 5.0 or later. Some options might be unavailable in earlier versions.
You can consult our short
Introduction to Flash article if you are new to this technology.
Our
Flash tools tutorial introduces the key concepts of Flash editing that will be referred to in the following three steps. The steps give detailed instructions on different aspects of customization:
The Three Steps to Customize the Sample Intro
» Step 1: Replacing text
» Step 2: Replacing graphics
» Step 3: Publishing HTML
Step 1: Replacing text
In this step you will edit the .fla file to customize text symbols. You will play the movie in a Flash editor step-by-step to find occurrences of symbols that you need changed, select these symbols, switch to
symbol editing mode, enter your text, and switch back to
movie editing mode to observe the results of changes you made. The sub-steps 1 to 11 below give a more detailed explanation of this.
- Open the .fla file from your downloaded Sample Intro directory.
- Make sure that the timeline is visible and that the movie is rewound to the start - that is, that the pink square in the timeline ruler highlights frame 1. You can rewind the movie by selecting Control»Rewind. Zooming can be adjusted by using View»Magnification.
- Play the movie step-by-step by using Control»Step Forward or typing '.' (dot). Search the scene for the text that needs to be changed.
- When you have found the text you wish to change switch to the Arrow
tool. (If the Toolbox is not visible, you can use Window»Tools to display it.)
- Make sure the needed text symbol can be selected. Click it with the Arrow tool and proceed directly to step 8 if it successfully selected - that is, if a blue box appeared around the symbol and a black cross appeared over it. If it did not select, go to the next step.
- Follow this step only if the text symbol did not select in step 5. Identify the layer to which the text symbol belongs by trying to make layers transparent or displaying contents in contours. When you have found the needed layer select the key frame in which the symbol appears for the first time. The symbol should get selected automatically. If one key frame does not work try successive key frames - it does not matter from which key frame you start editing the symbol. Once you have succeeded go directly to step 8. If it has still not selected, go on to the next step.
- Follow this step only if the text symbol did not select in step 5. Display the Library Window by selecting Window»Library and find the text you need by scrolling through all symbols in the movie.
- If you were able to select the symbol with a click (step 5 or 6) go to symbol editing mode by right-clicking it and selecting Edit. If you located the symbol in Library (step 7) double-click on the symbol icon.
- When in symbol editing mode select the Text
tool and click on scene to create a single-line auto-size text box. Type and highlight the text, making sure that the Character tab displays (if not, select Window»Panels»Character) and match the text appearance as well as you can using the options provided in the character formatting tab.
- When you have finished formatting the text switch to the Arrow tool and select the text block. Select Modify»Break Apart to transform the text into curves. This makes it impossible to edit the text in future but playback becomes more robust on various systems.
- Finally, delete the initial text block and drag the one you created into its place. Return to movie editing mode by selecting Edit»Movie.
Please note that, though this occurs infrequently, symbols themselves may happen to be animated movies with their own layers, key frames, tweening, and embedded symbols. You can freely apply the above described movie editing procedures (steps 2 to 8 above) to animated symbols.
Step 2: Replacing graphics
This step describes the editing procedure for graphical symbols. The process of locating symbols and entering
symbol editing mode was described in sub-steps 2 to 8
above, so now we'll start right from symbol editing.
- Right-click anywhere in the scene and choose Select All from the drop-down menu. Press the Delete key to erase the entire contents of the symbol. You may want to make a backup of your template prior to attempting to introduce any substantial changes.
- Insert any external graphics you need via the exchange buffer or by selecting File»Import...
- Return to movie editing mode by using Edit»Movie.
- When you have finished customizing your text and graphics, look through the whole intro to make sure none of your changes have resulted in some undesired effects such as enlarged elements obscuring others or extending beyond view. You can use either HTML preview mode or Flash preview mode listed in File»Publish Preview.
Step 3: Publishing HTML
When you are satisfied with the appearance of your intro it is time to publish it so that the animation can be used on your site. Flash publishes animations in files of .swf format, which is not editable, and others will not be able to use your work. Flash .swf files are embedded in HTML pages much like .gif or .jpg files - with a help of special HTML tag. However, the syntax is more complex, so that this tag is also responsible for automatic download of the Flash player if one is needed, as described in our
Introduction to Flash article.
To make things easy, Flash also exports a page with a snippet of animation embedding code that you can cut and paste from the exported file into your page. The sub-steps 1 to 3 below provide more details:
- Make sure that the File»Publish settings are set up correctly: go to Formats tab and check Flash and HTML boxes. You will not need the others so uncheck them. Click OK.
- Select File»Publish and see new files (.html and .swf) created in the same folder as your .fla file.
- Open the .html file in a text editor and copy the entire <OBJECT>...</OBJECT> tag that may look something like this:
Code like this taken from the exported file should appear in the HTML of your page where you want the animation to be played. The .swf file must of course be present on your server and available via the path specified in the SRC attribute of the EMBED tag.
This concludes the Flash Intro tutorial. However, there is much more to Flash animation than this. Listed below are two of the good places to start on improving your skills.
» Flashkit.com
» Macromedia.com
We hope that you found this tutorial helpful. If you have any suggestions that might help us to improve it, please do not hesitate to
contact us.
Last modified: Sunday, 11-Jul-2004 08:16:21 EDT.
Print this page.
LEGAL NOTICE: This tutorial has been substantially adapted by Templates.net from a tutorial originally produced by Inverse Logic, Inc. and has been used by permission. The resultant text, as shown on this page, or its underlying HTML source code may not under any circumstances be stored or reproduced, in full or in part, in any form, and may not be further adapted. Copyright © 2003 Inverse Logic, Inc. and/or Site Engineering Ltd dba Templates.net. All rights reserved.
