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:
To view the animation created in this example, click on the image below.
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
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.
On the left side of the Stage, click and drag down toward the right to draw a medium-size rectangle.
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.
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.
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).
from the menu, and click Shape Tween
as shown in the image below.
To view your animation, click Control -> Play
(or press the Enter
Insert Shape Tween
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" />
- "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">
- 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.
<param name="src" value="simple_flash.swf" />
<param name="bgcolor" value="#e8e8fe" />
• 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.