Adobe Flash CS 3: Education

CeIT
EDUCATION
Adobe Flash CS 3
1
Copyright © 2010 by Information Technology Center, University of Peradeniya
CeIT
EDUCATION
Prepared by: Ms. I. Rathanapala (B.Sc.Eng, M. Sc.),
Reviewed by:Dr. Manjula Sandirigama (B.Sc. Eng. (Peradeniya), M.Sc. (Ehime), PhD (Ehime), Department of Computer Engineering,
Faculty of Engineering, University of Peradeniya.
Disclaimer: Material and images freely available on the web have been incorporated without prior written permission from the original source
/ author as those are solely used for educational purposes.
The authors have taken all possible effort to minimize the errors. However this document may not be error-free. The authors welcome all
suggestions to improve this material. The authors and institutions to which authors belong accept no responsibility with regard to the problems
including damages and losses arising from using or not using this manual.
2
CeIT
EDUCATION
Adobe Flash CS3

Introduction to Flash
Adobe Flash (previously called Shockwave Flash and Macromedia Flash) is a set of
multimedia software created by Macromedia and currently developed and distributed by Adobe
Systems. Since its introduction in 1996, Flash has become a popular method for adding
animation and interactivity to web pages; Flash is commonly used to create animation,
advertisements, and various web page components, to integrate video into web pages, and
more recently, to develop rich Internet applications.
Flash can manipulate vector and raster graphics and supports bi-directional streaming of audio
and video. It contains a scripting language called ActionScript. Several software products,
systems, and devices are able to create or display Flash content, including Adobe Flash Player,
which is available for most common web browsers, some mobile phones and other electronic
devices (using Flash Lite).
Files in the SWF format, traditionally called "ShockWave Flash" movies, "Flash movies" or
"Flash games", usually have a .swf file extension and may be an object of a web page, strictly
"played" in a standalone Flash Player, or incorporated into a Projector, a self-executing Flash
movie (with the .exe extension in Microsoft Windows). Flash Video (FLV) files have a .flv file
extension and are either used from within .swf files or played through a flv aware player, such
as VLC, or QuickTime and Windows Media Player with external codecs added.
It is written using C++ Programming Language. The latest version is Flash CS4.
Action Script
Action Script is the programming language which is used to write the scripts in Flash. This
comes with several versions such as ActionScript 3.0 or ActionScript 2.0 so on.
Start Adobe Flash Software
To start Flash, if available, the shortcut can be used or follow the following steps.
Start Ö All Programs Ö Adobe Web Premium CS3 Ö Adobe Flash CS3 Professional
Then the following window will be appeared.
1
3
2
3
CeIT
EDUCATION
1. Open a recent Item - This shows the files, which were created recently or it
allows opening an already created flash file.
2. Create New- This shows several options to create different kind of flash
files. Normally we use Flash File (Action Script 3.0).
3. Create from Template - This shows the available template comes with flash.
Set up a document
After creating a new flash file, we can set the document properties
Modify ÖDocument
4
5
6
1. Title - What do you want to display as the title of the Flash Movie
2. Description - Detail about the flash file
3. Dimension - Set the width and the height
4. Background Color - Select the colour of the Background
5. Frame Rate - How many frames you need per second
6. Ruler Unit - The measuring unit of the ruler
4
CeIT
EDUCATION
Flash Interface
Frames
Time Line
Panels
Tool Box
Stage
Properties
Tool Box
Most of the major tools are located in the Tool bar for easy access. The tools are in Flash are
very similar to the tools in Photoshop.
Panels
Panels contain functions that help to monitor and modify images. These are similar to palettes
in the Photoshop.
Stage
This is the Working area of the Flash file.
Properties
This is also a panel, which shows the available properties of the selected tool.
Time Line
2 3
4
5
1
6 7 8 9 10 11 12
5
CeIT
EDUCATION
1. Layers - The layers are displayed as a stack. The first layer is the Top layer of the
document.
2. Show/hide all layers - This icon acts as a toggle button. Open eye implies all the layers
are visible. The column displays the show/hide options for each layer. To hide a
particular layer, you have to click the appropriate dot in that layer.
3. Lock/unlock Layers - This is used the lock or unlock layers. When a layer is locked,
the changes can’t be done to any content in that layer.
4. Play Head - The playhead indicates the current frame displayed on the Stage. As a
Flash document plays, the playhead moves from left to right through the Timeline.
5. Key Frame - The frame has some content in that layer.
6. Insert Layer - This is used to add a new layer to the document.
7. Add Motion Guide - This is used to add the motion guide to the document. The motion
guide is added as a separate layer.
8. Add a Layer folder - This is used to add a layer folder. The Layers can be added inside
this folder. This will help to organize the layers.
9. Delete Layer - This is used to delete a layer from the file.
10. Current Frame Indicator - It shows the current frame number.
11. Frame Rate Indicator - It shows the document’s frame rate.
12. Elapsed Time Indicator - It shows the time difference from the starting.
6
CeIT
EDUCATION
Tool Box
Select Tool: Selects objects in the document.

Sub Selection Tool: Selects parts of an object.
Free Transform Tool: Used to change the size of an object.
Lasso Tool: Free hand tool to select an area.
Pen Tool: Used to draw shapes in advanced way.

Text Tool: Used to type text.
Line Tool: Used to draw straight lines
Rectangle Tool: Used to draw geometric shapes
Pencil Tool: Used to draw free hand.
Brush Tool: Used to paint.
Ink Bottle Tool: Used to draw strokes.
Paint Bucket Tool: Used to fill an area with a colour.
Eyedropper Tool: Used to take a sample a colour
Eraser Tool: Used to erase unnecessary parts
Hand Tool: Use to drag objects.

Zoom Tool: Use to zoom in and out areas.
Stroke Color: Display the color that lines draws in
Fill Color: Display the color that fill when paint bucket tool is used.
7
CeIT
EDUCATION
Crating a Simple Flash Document
Before creating a simple animation, a new file has to be created. After creating a new file set,
the document properties are as follows.
Type “Ex 1” as the title

Type learning Flash as the description
Keep the default the default for height and width.
Select light yellow from the color grid as the background colour. Keep the default for
the Frame Rate
Change ruler units to inches.
Draw Shapes in Flash
There are several tools can be used to draw different shapes and lines in Flash.
Line
Rectangle (others are hidden)
Pencil
Brush
Line tool is used to draw straight lines in any direction. With shift key, you can draw the lines
in horizontally or vertically.
Pencil Tool is used to draw freeform outlines.
Rectangle Tool has the hidden tools such as oval, Rectangle primitive (to draw rounded
rectangles), oval primitive (to draw a fraction of an oval) and PolyStar tool (to draw polygons
or stars).
• Click on the tool

• Go to the Property Panel; select stroke (border) color, fill color,
stroke width, and strokestyle and corner curvedness.
• Select the appropriate layer
• Draw the shape.
Insert Text in Flash
The text can be inserted to the Flash document using Text tool. When the text tool is selected,
the property panel will display the options for customizing the text.
8
CeIT
EDUCATION
Transforming an Object
The free transform tool is used to rotate and change the size of an object in the stage. The
Gradient Transform tool is used to rotate the gradient filling of an object.
Free Transform Gradient Transform
If you want more transform options;
Select Modify Menu Ö Transform
Selecting Objects
The select tools can be used to select the whole object or a part of an object. There are three
main selection tools in Flash.
Selection Tool
This tool can be used to select an object in the stage.
Single mouse Double Single mouse

click in the mouse click on any
middle will anywhere side will
select only will select select the
the middle the whole clicked side
part.
The selection tool can be used to create customized shapes from the available shapes.
Rectangle converted to Petal Rectangle converted to a fish
9
CeIT
EDUCATION
• Select the selection tool

• Place your mouse pointer to the point that you want to change. It
shows whether the change is applied as a curve or as a straight edge.
• Click and drag smoothly until you get the correct shape
Subselection Tool
This tool is used to view and select anchor points that make up vector objects drawn in the
flash document.
Lasso Tool
This is used to make freeform selections of objects on the stage.
Deleting Objects from the Stage
The normal delete button or an Eraser tool can be used to delete object s on the stage.
When the eraser tool is selected its option is available in the tool box as follows.
Eraser Mode
Faucet
Brush Size
Erase by clicking
Double -click the eraser tool to delete all the objects on the stage
Or
Select the Eraser tool, and then click the Faucet modifier
Click the stroke segment or filled area to delete that area only.
Erase by dragging
Select the Eraser tool.

Click the Eraser Mode modifier and select an erasing mode:
10
CeIT
EDUCATION
There are 5 eraser modes.

Erase Normal Erases strokes and fills on the same layer.
Erase Fills Erases only fills; strokes are not affected.
Erase Lines Erases only strokes; fills are not affected.
Erase Selected Fills Erases only the currently selected fills and does not affect strokes,
selected or not. (Select the fills to erase before using the Eraser tool in
this mode.)
Erase Inside Erases only the fill on which you begin the eraser stroke. If you begin
erasing from an empty point, nothing is erased. Strokes are unaffected
by the eraser in this mode.
Symbols in Flash
A symbol is a graphic, button or a movie clip, that can be reused once it is created. It can be an
object or a group of several objects. Once it is converted to a symbol, it is saved as a library
item in that Flash file. There three types of symbols available in Flash.
Graphic - This type is used for static objects. Graphic symbols operate synchronously with the
movie’s time line.
Button - This is used to create Interactive Buttons in a movie that responds to the mouse click.
A button has several status such as up, over, down and hit. Separate graphic formats can assign
to that states.
Movie clip - This is used when creating a symbol for movie clips. This symbol is independent
from the main movie’s time line. When creating motion guides you have to convert objects in
the stage as a movie clip symbol.
An instance is a copy of a symbol located in the stage. Its size and orientation can be changed
after inserting to the stage.
To convert to a symbol
Draw the objects in the stage
• Select the objects
• Choose Modify menu Ö Convert to Symbol
• Select either Graphic, Button or Movie Clip and give a name for the Symbol
• After Pressing OK it will come to the Library panel
11
CeIT
EDUCATION
To use a symbol in the library:

• Select the required symbol
• Click and drag it to the stage
• Use the transform tool to change its size and the direction. You can add any number of
instances to the stage.
To edit a symbol in the library:

• Select the required symbol in the library.
• Double click on that symbol to go to the symbol editing mode.
• Do the formatting
• Click on Scene to get the stage back.
Example: Creating the following Flash Document using Shapes and Text tools.
• Create a new Flash document selecting Flash File (Action Script 3.0)
• Open the Document Property Window set the options as follows
Title - Example1, Description - Learning Flash , width – 550, height - 300
Background col. - light yellow, frame rate - 12 fps, Ruler Unit - select inches
• Change the name of the layer1 by clicking on layer1 as “Background”
• Select the rectangle tool; change the properties in the property panel as follows
Stroke Col (SC) -dark Ash Stroke Size (SS) - 4 Fill Col (FC) - black
• Click and drag to draw the rectangle to draw the one side of the road.
• Copy and paste the rectangle, and move it to the correct place as in the above figure.
• Insert a new layer and name it as the Bus
• Use the rectangle tool and change the properties as follows to draw the bus
SC - Light Ash, FC - Red , SS - 2 ,
Upper rounded edges - 2 (unlock before changing)
• Draw the rectangle to draw the bus structure
• Select the rectangle tool to draw the windows and set the properties as follows.
SC – black, FC – white, SS – 1, Upper & lower rounded edges - 2
• Draw one rectangle out side from the bus. Copy it 4 times and arrange it as those four
windows fit to inside the bus structure. Then move that to the correct place.
• Change only the lower rounded edge value to 0 and draw the door.
• Insert a new layer rename it as “wheels”
• Select the oval tool to draw the wheels and set the properties as follows.
SC - Dark Ash FC - Light Ash SS – 9
• Click and drag on the stage draw a wheel.
12
CeIT
EDUCATION
• Get a copy of it, move both ovals to the correct place.
• Insert a new layer; name it as “stop”.
• Using the rectangle tool and oval tool to draw the bus stop.
• Use the type text tool to type the word “STOP”. Change the font size, until it fits to the
oval.
• Save the file as Flash CS3 document.
Animation in Flash
The objects in the stage can be animated using the option in Flash. The objects can be moved
across the stage and can be changed their shape, size, color or opacity and can rotate over the
time factor. When creating animation, some of the frames are defined as Key Frames. Key
Frame is a frame where changes in the animation are defined. Simply, we can create frame by
frame animation; i.e. create different frames and animate or tweened animation; i.e. create first
and last frames and met Flash to build the rest of the frames.
Frame-by-Frame Animation
If the contents in the stage are changing frame by frame; we have to use the Frame-by-Frame
Animation option. This increases the file size because Flash stores the values for each data in
each frame.
In Frame-by-Frame Animation all the frames should be defined as Key frames.
Ex :
To create the animation for these 4 frames, all the frames should be defined as key frames.
Since the number of frames is limited and not a large number frame by frame animation is
good with a low frame rate.
Frame 1 Frame 2 Frame 3 Frame 4
13
CeIT
EDUCATION
To create a Frame-by-Frame Animation
• Select the layer and the starting frame.

• Choose Insert menu Ö Timeline Ö Keyframe to convert the frame to a Keyframe if it
is not a Keyframe. (or click the right mouse button on that frame to get the dropdown
menu and select Keyframe)
• Click the next frame, convert it to a key frame using the above step and alter the
contents of the stage to develop the next movement of the animation.
• Repeat the above process until the last frame.
• Place Playhead to the starting frame and Choose control Ö Play to test the animation.
(Or press Enter key).
Tweening
Only first and last frames of layer are defined as the key frames. The changes are done only in
those layers. Flash builds the intermediate steps. There are two types of tweened animations in
Flash.
Motion Tweening
To create a Motion Tweening Animation

• Click the last frame, convert it to a key frame using the above step and alter the
contents of the stage to develop the last position.
• Choose Insert menu Ö Timeline ÖCreate Motion Tween. (or click the right mouse
button on that frame to get the dropdown menu and select Create Motion Tween)
(or press Enter key)
Shape Tweennig
To create a Motion Tweening Animation

• Draw a shape.
• Click the last frame.
• Choose Insert menu ÖTimeline ÖBlank Keyframe
• Draw another shape.
14
CeIT
EDUCATION
• Choose Insert menu Ö Timeline ÖCreate Shape Tween. (or click the right mouse
button on that frame to get the dropdown menu and select Create Shape Tween)
(or press Enter key)
Example of the Motion Tween and Shape Tween;
In the example an oval is moving from one place to another using motion tween and a star with
8 sides is converted to a star with 4 sides using shape tween.
Starting frame Middle frame Last frame
Example contd: Create the motion Tween for the bus and stop the bus in the bus stop.
Create Motion along a specified path
In the above example you have got to know, in the motion tweens Flash uses the shortest path
to move from the starting to the destination. In some situation we have to use a path to move
the object.
How to create a motion path for a tweened animation
Step 1 : Adding the item to be moved on the stage

• Convert it to a key frame if it is not a key frame.
• Draw the object and convert that object to Movie Clip Symbol shape.
15
CeIT
EDUCATION
Step 2: Inserting the motion guide layer

• Click the right mouse button on the layer name Ö click on Add Motion Guide
• Then a new layer is added and layer 1 is bounded with that guide layer
• If you want to remove the guide layer, Click the right mouse button on the
guide layer name Ö uncheck the Guide option
Step 3: Creating the motion guide line

• Click the first frame of the motion guide layer
• Draw the path using a drawing tool. (pencil, line, pen or any polygon)
Step 4: Snapping the symbol to each end of the motion guide line
• Choose Insert menu Ö Timeline ÖBlank Keyframe
• With View Ö Snapping ÖSnap to object is on, use the arrow tool to click in
the center of the symbol. Holding the mouse button down, drag the graphic to
snap it to the left end of the motion guide line. (A black circle appears under the
cursor as the symbol is being moved, to indicate that it will be snapped to the
motion guide.)
Step 4: Creating other frames

• Go to last frame of the object layer
• Insert menu ÖTimeline ÖBlank Keyframe
• Go o the last frame of Motion Guide layer
• Insert menu Ö Timeline ÖBlank Frame ( this should not be a key frame)
• Go to the object Layer click on the last frame.
• Move the object to the end of the path snapping with the end point of the path.
Step 4: Enabling the tween motion
16
CeIT
EDUCATION
• Choose Insert menu Ö Timeline ÖCreate Motion Tween (or use the dropdown
menu)
• In the Motion Property Panel check Orient to Path option to make the object
turn as the line turns.
Step 4: Watching the completed motion

• Click Ctrl and Enter to view the movie.
• You can’t see the motion guide there.
Creating Symbols with animation
An object with animation can be converted into a Movie Clip Symbol. Then it can be reused
with that animation also.
How to create a symbol with animation.

• Convert it to a key frame if it is not a key frame.
• Draw the object and convert that object to a Graphic Symbol shape.
• Delete it from the stage.
• Insert that to the stage from library items.
• Convert graphic symbol to a Movie Clip.
• Double click on the movie clip to edit it.
• Apply any animation for that Movie Clip.
• Reuse the library Item with the animation.
17
CeIT
EDUCATION
Example contd: Create the wheels as shown in the following picture. Create the wheel’s
motion.
Example contd: Insert a new layer and create a Stick man with hand and leg animations.
When you put the hand and leg animation separately, you can see the different pauses as in the
above figure.
Example contd: Using the Motion Guide, move the stick man to get the bus at the bus stop.
The above figures show two different segments in the animation.
Customising the Animation
After adding the animation to a layer, using Ease option

The animation can be customized. When giving a
value for Ease Property in the property box, the
object movement can be accelerated or decelerated.
Ease out (positive) decelerates the object but Ease in

(negative) accelerates the object. By clicking the edit
button next to Ease property, you can get the
following curve. The Custom Ease In/Ease Out dialog
box displays a graph representing the degree of
motion over time. The horizontal axis represents frames, and the vertical axis represents
18
CeIT
EDUCATION
percentage of change. The first keyframe is represented as 0%, and the last keyframe is
represented as 100%. To add a control point, press Control-click and to increase the speed of
the object, drag the control point up, to slow down the speed of the object, drag it downwards.
Getting external Files to the Flash File or Library
The picture files, sounds or other movie clips can be imported to the stage of the Flash file or
as a library item. The library in a Flash document stores media assets that you create in the
Flash authoring environment or import to use in the document.
How to import an external file.
Choose File menu Ö Import
There are four options available in the Import Submenu

• Import to Stage - this will import the external file to the stage and save it as a library
item
• Import to Library - This will import the file only to the library
• Open External Library - This will open a library in another flash file.
• Import Video - This will use to import video files.
Creating Interactive Controls in Flash
Buttons are four-frame interactive movie clips which can be used in the flash movies or web
sites. The first three frames display the button’s three possible states; the fourth frame defines
the active area of the button. The Timeline doesn’t actually play; it reacts to pointer movement
and actions by jumping to the appropriate frame.
To make a button interactive, an instance of the button symbol has to place on the Stage and
assigns actions to the instance. The actions are assigned to the instance of the button in the
document, not to frames in the button’s Timeline.
Each frame in the Timeline of a button symbol has a specific function:
Up State - The button appearance when the mouse pointer is not over the button.
Over state - The button appearance when the pointer is over the button.
Down state - The button appearance when it is clicked.
Hit state - This shows the clickable area of the button.
19
CeIT
EDUCATION
How to Create a Button
• Open a New Flash Document

• Choose Insert menu Ö New Symbol (Ctrl. + F8)
• Type “button” as the name for the symbol and select the type as Button in the “Create
New Symbol Window”.
• Draw a shape which you want as your button in the “Up” frame.
• Add a Text on the button using text tool.
• Go to the “over frame” and add a key frame.
• Modify the shape or Text using its properties.

• Similarly apply the above three steps to “Down Frame” also.
• Go to the “Hit Frame” and add a key frame. It is not necessary to any modification in
the Hit frame, since it shows only the clickable area of the button.
• Run the flash file to see the button appearance in the different states.
ActionScript
ActionScript is the programming language which is used in the flash movies to add
interactivity to the Flash applications. ActionScript can be used for simple programming and
advance programming also. Flash is "event-driven," meaning that events trigger scripts to
execute. Even after you write a script, you must select an event to trigger that script.
ActionScript started as a scripting language for Macromedia's Flash authoring tool, now
developed by Adobe Systems as Adobe Flash. The first three versions of the Flash authoring
tool provided limited interactivity features. Early Flash developers could attach a simple
command, called an "action", to a button or a frame. The set of actions was basic navigation
controls, with some commands such as "play", "stop", "getURL", and "gotoAndPlay". In this
book, we will discuss how to control a Flash Movie with simple codes of ActionScript.
ActionScript Basics
Actionscripts codes are written on ActionScript Window.
20
CeIT
EDUCATION
How to get the ActionScript window.
Syntax:
ActionScript has its own rules of grammar and punctuation that determine which characters
and words are used to create meaning and in which order they can be written. ActionScript has
syntax rules that you must follow to create scripts that can compile and run correctly. The
comment lines can be added with ‘//’ and it will not execute as programming codes.
Components
There are predefined movie clips specifically designed for ActionScript are available in
Flash as Component.
How to get the Component window.
Choose Window menu Ö Component
After opening this component window, these

symbols can be added to the Stage in a similar
way of adding tools.
When an instance of a component is added to
the stage, a name has to give for the identification
purpose.
21
CeIT
EDUCATION
Use the Property window and write

the name as a single word (No spaces)
in <Instance Name> area. Ex: My_Label,
Label1, NameLabel
Each component has several properties and methods. To refer a particular method of a
component, the following syntax has to be used.
Instance_Name.PropertyName
Ex: My_Label.Text
If you want to assign some values to that property, you have to use the assignment operator.
Ex: MyLabel.Text = “This is the text appear in the label Component”
All your scripts are written in the Actions panel, but there are three places you can attach
scripts: keyframes, button instances, and Movie Clip instances.
Adding ActionScript in a keyframe
Keyframe scripts are probably the easiest to understand. You simply select a keyframe and
open the Actions panel to create a script. When the frame is reached, a frame script is
triggered.
How to create ActionScript to appear some text in a middle frame

• Create a New Flash Document.
• Draw an Oval and a rectangle in the first frame in the layer 1.
• Use the Text Tool and Type the heading as “”
• Open Component window and two labels and name them as lblOval, lblRect.
• Open Action Script Window and write the following code the code area. (Make sure
that Script Assist button is not selected)
lblRect.text="";
lblOval.text="";
(The above two lines assign an empty text to the text property of the labels)
• Go to the 25th Frame in the Time Line
• Add a Key Frame
• Go to the Action Script Window and write the following code.
lblRect.text="Rectangle";
lblOval.text="Oval";
stop();
(The first two lines assign relevant text to the text property of the relevant labels
and the third line stop the animation.)
• Press Ctrl + Enter to test the Movie.
22
CeIT
EDUCATION
Stage in the editing Mode Starting the Movie After Some time period
Adding ActionScript to a button.
When adding the actions to a button, the event has to be chosen first. Then the actions will
occur when the event is triggered.
Some Actions are as follows;
• Start to play movie

• Jump to a new keyframe
• Go to a new website or a webpage.
Button can be created as your own or can be inserted using Component window or external
Library Window. There are so many button categories in the external library window.
Selected Button
Button Categories
Buttons
The ActionScript in Adobe Flash CS 3 does not allow adding action to movie clip or button, so
all the action will be on the timeline frame as one code window.
If you want to write the coding to a button, you have to use the Event Listener. The Event
listener means it will listen to the mouse action such as mouse release, mouse roll-over, mouse
23
CeIT
EDUCATION
click or mouse roll-out etc. When this event happens, it executes the function that includes
what you need to object to do when clicked.
Syntax
Button_Instance_Name.addEventListener (MouseEvent.MOUSE_EVENT,
Function_Name);
function Function_Name (event:MouseEvent):void

{
The Codes should write here
}
Button_Instanct_Name : The instance name you are giving to the button.
ROLL_OVER : Available mouse event; CLICK, ROLL_OVER, MOUSE_DOWN so

on.
Function_Name : We have to give name as a single word. A function name should be
unique for a particular code window. The same function name
should be used in the both place as it appear in the above syntax.
Ex: If we add a button to the stage and name it as btn_Play. Here is the coding for Mouse Click
event.
Btn_Play.addEventListner(MouseEvent.CLICK,BtnPlay_Click);
function BtnPlay_Click (event:MouseEvent): void
{
Play( );
}
Start to play movie
• Create a New Flash Document.

• Draw an Oval and add a motion guide to create any motion until the 25th Frame.
• Insert a new layer rename the layer as button; create two buttons for Play and Stop.
• Name them as btn_play and btn_stop.
• Go to 25th frame of the button layer and insert a key frame; now buttons are visible
throughout the animation.
• Create another layer rename it as actions. When the first frame is active in the action
layer, open action palette.
• Write the following coding in the action window.
stop( ); // The animation should be stopped first
24
CeIT
EDUCATION
btn_play.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownPlay); function
mouseDownPlay(event:MouseEvent):void
{
play( );//this command is to play the flash motion
}
btn_stop.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownStop); function

mouseDownStop(event:MouseEvent):void
{
stop( );//this command is to stop the flash motion
}
• Press Ctrl + Enter to see the movie.
Stage of the Flash File Movie Preview
Jump to a new keyframe

If you want to write the coding to jump to a specific frame when a button is clicked, the
following statements can be used.
gotoAndStop(frame_number) : This will jump to the specific frame and stop the animation
gotoAndPlay(frame_number) : This will jump to the specific frame and continue playing.
Ex:
drill_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function
mouseDownHandler(event:MouseEvent):void
{
gotoAndStop(20); // This will jump to Frame 20 an wait
}
Go to a new website or a webpage.

The following code can be used to create button with link to a URL.
navigateToURL (new URLRequest(“Address of the website or name of the web page”))

Ex:
25
CeIT
EDUCATION
Btn_URL.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function
mouseDownHandler(event:MouseEvent):void
{
navigateToURL(new URLRequest(“www.rivira.lk”); // This will open the web site
}
Adding action to a movie clip:
To add an action to a movie clip, you will need to follow the above steps, but you will need to
tell Flash that to deal with this movie clip instance, as if it were a button and shows a hand
curser when the mouse goes over it. This will be done by adding action script to the button
Save and Publish the Flash Files
Flash files can be saved as a flash document, but the Flash software is needed to open the files
with .fla extension.
If a flash file is needed to put in a website, it should be saved as a shockwave flash object.
(.swf)
How to publish a flash file
• File menu Ö Publish Setting to select the option. You can SWF and HTML options are
checked by default, but if you want to publish as any other format, you can select.
• Choose File menu Ö Publish to create swf file and the HTML file.
• Then you can see there are two other files have created with the same name but in
different extension. SWF file can be open without flash also. HTML file will open
through a browser.
How to add swf file to an existing HTML file.
Add the following code in the Body Tag
<EMBED src="your_file_name.swf" quality=high bgcolor= background_colour WIDTH=

“number_of_pixels” HEIGHT“number_of_pixels” ALIGN=""
TYPE="application/x-shockwave-flash”
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
Ex:
<body>
<h2>My Flash File</h2>
<EMBED src="actioSc1.swf" quality=high bgcolor=#008080 WIDTH="320" HEIGHT="240"
ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </body>
26
CeIT
EDUCATION
Exercises
1) Create a simple MCQ type quiz using Flash and ActionScripts. The following figures
show some stages of the quiz. The flash file should contain two frames, containing
questions and 3 possible answers. When someone clicks on the correct question, the
feedback should be given and the next button should be visible. Apply the same
formatting and logic for the second question in the second frame, but there will be a
back button to come back to the first screen.
2) Create your own web site using flash, with four pages in it. Use four frames as the four
pages in the web site.
Home Personal Interest Curriculum
27

Adobe Flash CS 3: Education

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Adobe Flash CS 3: Education

Uploaded by

Copyright:

Available Formats

CeIT

Prepared by: Ms. I. Rathanapala (B.Sc.Eng, M. Sc.),

Adobe Flash CS3

Start Adobe Flash Software

Then the following window will be appeared.

2. Description - Detail about the flash file

3. Dimension - Set the width and the height

4. Background Color - Select the colour of the Background

5. Frame Rate - How many frames you need per second

6. Ruler Unit - The measuring unit of the ruler

5. Key Frame - The frame has some content in that layer.

6. Insert Layer - This is used to add a new layer to the document.

9. Delete Layer - This is used to delete a layer from the file.

10. Current Frame Indicator - It shows the current frame number.

11. Frame Rate Indicator - It shows the document’s frame rate.

Select Tool: Selects objects in the document.

Pen Tool: Used to draw shapes in advanced way.

Hand Tool: Use to drag objects.

Stroke Color: Display the color that lines draws in

Type “Ex 1” as the title

Draw Shapes in Flash

Rectangle (others are hidden)

• Click on the tool

Insert Text in Flash

Free Transform Gradient Transform

If you want more transform options;

Select Modify Menu Ö Transform

This tool can be used to select an object in the stage.

Single mouse Double Single mouse

Rectangle converted to Petal Rectangle converted to a fish

• Select the selection tool

This is used to make freeform selections of objects on the stage.

Deleting Objects from the Stage

Select the Eraser tool.

There are 5 eraser modes.

To use a symbol in the library:

To edit a symbol in the library:

Frame 1 Frame 2 Frame 3 Frame 4

• Select the layer and the starting frame.

To create a Motion Tweening Animation

To create a Motion Tweening Animation

Example of the Motion Tween and Shape Tween;

Starting frame Middle frame Last frame

Create Motion along a specified path

How to create a motion path for a tweened animation

Step 1 : Adding the item to be moved on the stage

Step 2: Inserting the motion guide layer

Step 3: Creating the motion guide line

Step 4: Creating other frames

Step 4: Enabling the tween motion

Step 4: Watching the completed motion

Creating Symbols with animation

How to create a symbol with animation.

The above figures show two different segments in the animation.

Customising the Animation

After adding the animation to a layer, using Ease option

Ease out (positive) decelerates the object but Ease in

Getting external Files to the Flash File or Library

How to import an external file.

Choose File menu Ö Import

There are four options available in the Import Submenu

Creating Interactive Controls in Flash