For the start, to prove how easy it's to work with Adobe Flash, especially for simple effects, here's how a simple Flash animation can be created in a matter of seconds.
Follow these steps:
1. Open Flash and select
ActionScript 3.0 from the
Create New column of Flash's start page.
- If the start page isn't initially visible, click
File menu -> New (or Ctrl+N), then choose
ActionScript3.0
2. Click the
Rectangle tool in the
Tools panel (or press the R key) to turn your cursor into a Rectangle tool. When you do this, you should notice the Rectangle tool becomes active in the Tools panel.
3. On the left side of the Stage, click and drag down toward the right to draw a medium-size rectangle.
4. The Timeline panel should be visible just below the white Stage. It is made up of numbered cells; select Frame 25 (see "Select Frame" image) and click
Insert -> Timeline, then choose
Blank keyframe (or press F7).
-
If the Timeline panel is not visible, click Window -> Timeline.
Select Frame
5. Now press the O key to turn the cursor into an
Oval tool. Click the right side of the Stage and drag to draw a medium-size oval.
6. Return to Frame 1 (where the animation begins) by clicking the dot under the 1 (for Frame 1) in the Timeline.
-
That dot represents a keyframe that has content (your rectangle).
7. Click
Insert from the menu, and click
Shape Tween as shown in the image below.
8. To view your animation, click
Control -> Play (or press the
Enter key).
Insert Shape Tween
To view the animation created in this example, click on the image below.
Simple Flash animation
- Here ->
FLA - Simple flash animation you can download the FLA file with that animation.
Save / Open / Export Flash content
The Flash CS5 documents are saved (with
File -> Save or "Ctrl+S") in the FLA format, with "
.fla" extension.
The FLA files contain all necessary information for that document to can be opened and modified with Adobe Flash.
For example, to save the animation created in the example above, press Ctrl + S (or menu File -> Save), then in the window that appears, choose the folder where to save the document, give it a suggestive name (later to know what it is), for example, "simple_animation.fla" and click Save. The document and its elements are saved.
So, anytime you want, you can modify that animation and add new elements to it, by opening the FLA file with the Adobe Flash CS5.
You can open an existing document file and the Flash program at one time, or you can open the file from within Flash, with
Open command on the
File menu (or "Ctrl+O").
To add in a Web page a Flash presentation created in a FLA document, it must be exported in
SWF format, from
File -> Export and
Export Movie. This will create a file with ".swf" extension which contains the animation, effects and other elements created in the FLA document. The SWF content is recognized and displayed by the Flash Player installed in your browser.
To include the SWF file in a web page, use the following (X)HTML code:
<object type="application/x-shockwave-flash" data="file_name.swf" width="400" height="500">
<param name="src" value="file_name.swf" />
<param name="bgcolor" value="#e8e8fe" />
</object>
- "
file_name.swf" is the path and the name of the SWF file.
- "
width" and "
height" defines the dimensions (in pixels) of the area in which the Flash presentation is displayed.
- "
value="#e8e8fe" define a background-color for the area in which the Flash presentation is displayed.
For example, to include in a web page the animation created in this tutorial, it must be exported in SWF format. In the Adobe Flash aplication, click
File -> Export, then
Export Movie; ghive a name for the SWF file (e.g "simple_flash.swf") and click
Save.
Then, add the following code in the HTML file:
<object type="application/x-shockwave-flash" data="simple_flash.swf" width="400" height="500">
<param name="src" value="simple_flash.swf" />
<param name="bgcolor" value="#e8e8fe" />
</object>
- Here, the "simple_flash.swf" file and the HTML document are in the same directory. If you save the SWF file in a different directory, you must also specify the path to it.
• The FLA document can also be saved as
Flash CS4 Document, from:
File -> Save As, this can be useful if the Flash presentation must be opend and edited with "Adobe Flash CS4".
• Another option to save a Flash document is in the "
Flash CS5 Uncompressed Format" (XFL). An XFL file is essentially a folder containing separate files, including XML files and other asset files (JPG, GIF, DAT) which contain the document information for your Flash project. You can use a Flash uncompressed document in the XFL format in other programs, such as Adobe InDesign and Adobe After Effects.
Besides the option to export as a ".swf" file, there is another often used option of export, the
Export Image. With this you can create an image of the current working stage (with all designs within it), saved in one of the following file formats:
bmp, jpg, jpeg, gif or
png. To do this, choose
File menu -> Export -> Export Image, then you can select the folder and the type file to save the image.