1. No category

Introduction
In this chapter we'll show the basic techniques of animation. In animation, Flash
provides many facilities; obtain effects that require much knowledge and storage
space to be created in a very simple way, with no need for excessive knowledge and
taking very small disc space.
Before learning the animation techniques, we will work on Timeline and Layers. Both
are the most important parts of the Flash. We will use them for all Flash animations.
Flash Animation Types
Frame by Frame
Motion Tween
Shape Tween
Motion Guide
Mask
Timeline
The timeline is the area on the screen where you will be working with layers and
frames to alter your movie. A movie is a collection of frames and the timeline is the area
in Flash where you will be configuring those frames (like the way a cartoon is made,
with a collection of still pictures run together really fast to give the illusion of motion).
The concept of time in Flash is different than in the real world. In the real world, you
measure the time it takes to do something in seconds or minutes or hours. In Flash,
the primary measure of time revolves around frames, and the seconds/minutes of a
movie are dependent on your frame rate.
PlayHead
Individual Frame
Onion-Skinning
Buttons
Frames
Per Second
Length of
Movie
Current
Frame
36
Adobe Flash CS3
Current Frame
The current frame indicates the current position of the playhead. You can see the
current frame number from here.
Frames per Second
Frames per second (or Frame rate) is the actual frames per second setting for
your movie. When the movie is playing, it dynamically shows the actual playback
speed. Frames per second will always stay the same but you can change Frame
rate from Document Properties.
Length of Movie
The number is actually the elapsed time between the first frame of the movie and the
current frame. Depending on where you place the playhead, the number will
dynamically change as well.
Playhead
The playhead allows you to select the frame to be altered. It also allows you to view
the movie by scrubbing, or dragging the playhead across the timeline ruler.
Layers
Layers are transparent sheets on which you add buttons, text, movie clips, and other
objects that form your finished Flash movie. Layers let you work with each distinct
group of elements in your movie separately.
Flash will name the first layer, "Layer 1" and will add sequential numbers to each layer
added. Example: Layer 2, then Layer 3, and so on. To change the name of the layer
simply double click on name, type in the name, and press enter.
You can split objects on a single layer into
separate individual layers with the
Ctrl+Shift+D key combinaton. Flash will
create a new layer for each separate selected
object.
Square (Level 1)
Oval (Level 2)
Polygon (Level 3)
Layer Properties Dialog Box
You can adjust your layer from Layer Properties. It is an alternate method for working
with layers. To open it, right click on a layer and select Layer Properties.
Animating Flash
37
Insert a New Layer
Adding a new layer is very easy. Simply click in the white box with the plus sign (
to add a layer. By default, a layer will be added above the current layer.
)
Inserting a Layer Folder
A Layer Folder ( ) is just like any other computer folder. It is a place to store things.
In this case it stores Layers. This is done to help organize your work and has no effect
on the final Flash Movie.
Deleting a Layer
Deleting a layer can be done in two ways: dragging the layer to the trash can ( )
or clicking the trash can when the layer to be removed is highlighted as the current
layer.
Showing/Hiding a Layer
The purpose of this button ( ) is to hide or show a layer. This is helpful when
compiling many layers to keep from getting distracted by background or foreground
content. When the eye is highlighted, the layer will be hidden and vice versa.
Lock Layer
Locking a layer ( ) is another great option to practice good layer management.
When dealing with layers, a user may accidentally forget what layer he/she is on when
editing a portion of the movie. This is counter acted by using the lock function.
Show Outline
An outline is an edit mode that shows only the objects outlines. To switch Outline
mode on and off go to the Timeline and click the dot just next to the layer name and
just under the Outline Icon (
).
Hidden
Locked
In Outline Mode
38
Adobe Flash CS3
Using Onion Skinning
Normally, Flash displays one frame of the animation sequence at a time on the Stage.
To help you position and edit an animation, you can view two or more frames on the
Stage at once. The frame under the playhead appears in full color, while the
surrounding frames are dimmed. Dimmed frames cannot be edited.
Tweening Animation
Flash tweening is the most interesting part of Flash. It directly influences the way
animation is done. Consider that you have to create an animated ball on the timeline
that moves from one point to another point.
Tweening has been derived from the word "be-tween" or rather "in between". It
works on the principle that the designer just has to create the first and the last key
frame of the animation and the "in between" part is managed by Flash.
Finally, the tweening method is also one of the important and interesting ways to
create 2D animations. This method is extensively used in creating short movies,
animated e-learning coursewares and CD based presentations.
Motion Tween
It is the basic action of the animations in Flash. It allows you to move a Flash symbol
from one place of the stage to another, being necessary only two frames, which
optimizes the movie performance a lot.
Step 1: Select the first
frame and draw your own
object.
Any object in Flash should be converted to
a symbol before applying motion tween.
Step 2: Right click the
frame 20 in the Timeline
and select Keyframe. You
can also press (F6) on
frame 20.
Animating Flash
39
Step 3: Move
your
Symbol to the final
position while keeping
the playhead on frame
20.
Step 4: Select
any
frame between, 2 to 19
and right click on layer
and select “Create Motion
Tween” from drop down
menu.
Step 5: Now
press
(Ctrl+Enter) to view
your motion tween.
Practice 1: Text Effect
Step 1. Start a new document.
Step 2. Click the Size button in the Properties panel to
change the document size.
Step 3. In the with box type 500 and in the height box type
250, and then click OK.
Step 4. Select the Text toll. Change properties of text tool in
the Properties panel. Font: Verdana, font size: 30, letter
spacing: 5, and bold style.
Step 5. Click the scene and then type”~Odessa~”
Step 6. Select the Selection tool, right-click the text
“~Odessa~”, and then select Break Apart.
40
Adobe Flash CS3
Step 7. The letters must be in different layers. While the letters are
selected, right-click again, and then select Distribute to Layers. Each
letter has its own layer now.
Step 8. Apply a different color to each
character.
Step 9. Right-click the frame 20 in the layer
~ (tilde) and then click Insert a Keyframe.
Step 10. Select the first frame of layer ~ and move the Tilde sign to the left. Right-click anywhere between the
frames 1 and 20 in the Tilde layer, and then click Create Motion Tween.
Step 11. Right-click the frame 25 in the layer
O and then click Insert Keyframe. Select the first
frame of layer O and move the O letter
somewhere up.
Step 12. Right-click anywhere between the frames 1 and 25 in
the layer O, and then click Create Motion Tween.
Step 13. Create keyframes for all the other layers and move the
letters in different directions up and down and then add motion
tweens. Your timeline should be like in the picture.
Animating Flash
41
Step 14. Select the frame 30 for all
the layers except Layer 1. Right-click
the selected frames and then click
Insert Keyframe.
Step 15. The first part of movie is ready.
Let’s create the second part now. Rightclick the frame 45 in the layer D.
Right-click anywhere between the frames
30 and 45 in the layer D and then click
Create Motion Tween. Click the frame 45
and move the letter D to the opposite
direction according to the frame 1.
Step 16. Create keyframes for all the
other layers and move the letters up and
down to the opposite directions according
to the frame 1 and then add motion
tween, as you see in the image. Press
Ctrl+Enter to see the result.
Step 17. Let’s add some more effects. Select the first frame of all layers except Layer
1. Click the Ease drop-down arrow in the Properties panel and then drag the slider to
apply 100. While the first frame of all layers are selected, click one of the letters on the
scene, click the Color drop-down arrow in the Properties panel, and select Alpha and
then apply 0%. Now all the letters are invisible in the first frame.
42
Adobe Flash CS3
Step 18. Select the frame 30 of all layers except Layer 1. Click the Ease drop-down arrow in the Properties
Panel and then drag the slider to apply -100.
Step 19. Select the last frame, and click the letter on the scene and then click the Color drop-down arrow in
the Properties panel and select Alpha to apply 0%, for each layer.
Step 20. Select the frame 60 for all the layers except Layer 1. Right-click the selected frames and then click
Insert Keyframe. You can use Layer 1 to add a background for this movie, if you want. The movie is now ready.
Press Ctrl+Enter to see the result.
Shape Tween
By tweening shapes, making one shape appear to change into another shape over
time. Flash can also tween the location, size, and color of shapes. Before creating
your tween you need to produce the shapes that will be used in the tween effect.
Step 1:
You can apply shape the tweening effect to a
text. Make sure that the text block is broken
apart.
Select the first frame. Draw an object (circle) on the stage.
Animating Flash
43
Step 2: Select frame 20 and press F6 to insert a new keyframe.
Step 3: Still keeping playhead on frame 20, delete the object present in your
working area and draw a different object (polygon).
Step 4: Right click any frame between 2 to 19 and select Create Shape Tween.
Alternatively you can select motion from the tween drop down menu in the Property
inspector. Press Ctrl+Enter to play your shape tween animation.
Motion Tweening Along a Path
A Motion Guide will set the path for an object to travel from one position of the
Stage to another position.
Motion guide layers let you draw paths along which tweened instances, groups,
or text blocks can be animated. You can link multiple layers to a motion guide layer
to have multiple objects follow the same path. A normal layer that is linked to a motion
guide layer becomes a guided layer.
Step 1: Create a new Flash document about
550 X 400 pixels.
Step 2: Draw a road.
Step 3: Insert a new layer and change its
name as Car. Import a proper car image into
Flash (File>Import>Import to Stage) or draw
your own car. Place the car in the front of the
road.
For objects that appear on the Stage, use
suffix when you name them. For
example,use _mc suffix to all MovieClip
objects. Using suffixes consistently helps
make your code understandable and display
cod hints whenever you type the instance
name followed by a period in the Actions
pannel.
44
Step 4: With the car image selected choose
Modify>Convert to Symbol (F8) and then select
Movie Clip behavior. Name it as car_mc.
Adobe Flash CS3
Step 5: Go to frame 30 and select both layers and press F6 to insert a new
keyframe. In the frame 30 of the Car layer put the car_mc in the other end of the
road.
Step 6: Right click on the Car layer between 1-30 frames and choose Create
Motion Tween.
Step 7: Right click on the Car layer and choose Add Motion Guide. Name it
Guide_Car.
Step 8: Select the first frame of the
Guide_Car Layer and draw a path using the
Pencil Tool. Your path should follow the road
like a yellow line.
Step 9: Snap the center of the car_mc to the beginning of the line in the first
frame, and to the end of the line in the frame 30.
Step 10: Add some ease to the motion. Go to the first frame of the car layer. In the
Properties Inspector choose Edit button from the right of the Ease. Custom Ease
In/Easey Out dialog box opens.
Step 11: he 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
percentage
of
change. Using the mouse, curve
the line as you wish then click
OK.
The Easing property allows you to specify
the rate of motion from start to finish. With a
value of -100, objects accelerate towards the
finish while the reverse happens if the value
is set to 100. Easing creates a more natural
appearance of acceleration or deceleration
by gradually adjusting the rate of change.
Ease In: the motion begins slowly,
before gaining speed as time progresses.
Ease Out: the motion begins quickly,
before losing speed as time progresses.
Step 12: Test your movie (Ctrl+Enter) and see how the car is moving on the road.
Animating Flash
45
Masking
For spotlight effects and transitions, use a mask layer to create a hole through which
underlying layers are visible. To create a mask, you specify that a layer is a mask layer,
and either draw or place a filled shape on that layer. You can use any filled shape,
including groups, text, and symbols, as a mask. The mask layer reveals the area of
linked layers beneath the filled shape.
It is strongly recommended to use a .PNG
image format instead of a .JPG for best
results in flash.
Step 1: Rename the first
layer as “Picture”.
Step 2: Select the first
keyframe of the Picture layer
and import the picture you
want to mask.
Step 3: Add a new layer.
Name the new layer as
"Mask". This layer will hold
the object that will be used to
reveal the base picture.
Step 4: Select the Oval
Tool from the Toolbar and
draw a circle while the first
keyframe of the Mask layer is
selected.
Step 5: Make sure you
extend the keyframes of the
Picture layer to match the
length of the Mask keyframes.
46
Adobe Flash CS3
Step 6: Apply
Motion
Tween to the circle.
Step 7: Click on Frame
15, Add a Keyframe (F6) and
then extend the circle with
using the Free Transform
Tool (
).
Step 8: Right-click on the
Mask layer and select Mask
from the drop-down menu.
The layers will be locked
automatically.
Step 9: Play your motion
guide animation.
Using Sounds in Flash
There are two different types of sound in flash: Static and dynamic. Static is the
older method. It involves assigning a sound to a particular frame and setting its
properties at design time. The second way which is more common nowadays is to
attach them dynamically. This method relies on some simple ActionScript and Flash's
Symbol Linkage features. It is a little more difficult to set up, but it offers the flexibility
of scripted effects and timing that static sound does not.
You can import the following sound file formats into Flash:
WAV (Windows only)
AIFF (Macintosh only)
mp3 (Windows or Macintosh)
If you have QuickTime 4 or a newer version installed on your system, you can import
some other sound file formats.
Static Method
File>Import>Import to Stage
Drag and drop: Sound assets can be dragged and dropped into a movie either
directly from the file local folder or from the library of another movie. This method
is useful if you already know where you want to place the sound on the Timeline
and you have everything set up and ready to go.
Sound Panel - Effect
The Sound Panel allows you to modify the properties of the selected sound.
None: Select this option to remove previously applied effects.
Animating Flash
47
Left Channel/Right Channel: Play sound in the left or right channel only.
Fade Left To Right/Fade Right To Left: Shift the sound from one channel
to the other.
Fade In: Gradually increases the volume of a sound over its duration.
Fade Out: Gradually decreases the volume of a sound over its duration.
Custom: Lets you create
custom in and out points of
sound using the Edit Envelope.
The best way to get a feel for
the sound editor is to apply
each effect to your sound,
listen to it and try some things
in the custom effect editor.
Sound Panel - Synchronize the Sound
Event: Associated with specific actions, not tied to the Timeline.
Start: Same as Event, but will create a new instance of that sound if it is already
playing.
Stop: Stops the specified sound.
Stream: Synchronizes the sound with the animation, forces the animation to
play at the same rate as the sound, dropping frames if necessary.
Practice 2: Car
Step 1: Open “guide.fla” animation
and create a new layer that named
“sound”. (You can download the file from
http://book.zambak.com.)
Step 2: Import the sound file “car_effect.wav” by choosing Import from the
File menu or drag the sound file to the Stage.
Step 3: Open the Library Panel, and click on the sound symbol you just
imported. You will see it in the Library window with a play arrow. You can listen to the
sound you just imported by clicking on the arrow at the top right of the Library
window.
48
Adobe Flash CS3
Step 4: Drag the sound onto the
stage. You should see it on the layer as a
waveform.
You can loop the sound the number of
times you type in the Repeat box, in the
Properties panel. Don't loop streaming
sound; it will increase your file size
dramatically.
Step 5: Select the Sound layer to see the sound properties in the Properties Panel. In the Sound drop-down
menu, select the sound file you want to edit. If you have other sounds imported, they will also be in the menu.
You can change the sound file you want to edit from here. Directly under these properties you will see the sound
file information, MHz and file size.
Step 6: Press (Ctrl+Enter) to view your animation with sound.
Dynamic Method
Dynamic sounds are created and controlled with ActionScript. By using
ActionScript, you are able to change the sound's speaker directions, pans, volume,
and more. Best of all, you can create virtual sound environments by using various
random numbers and values that change how your sound feels throughout your
animation.
Step 1:
.fla file.
Step 2:
Copy file (car_effect.mp3) into the folder where you save your flash
Write the following actions in the Action Panel.
1 var MySound:Sound = new Sound(new URLRequest ("car_effect.mp3"));
2 MySound.play();
Line 1:
Line 2:
Creates a new sound object.
Starts to play the sound.
Step 3: Press Ctrl+Enter to view your animation with sound.
Animating Flash
49
Review Questions
1. Which of the following is NOT an animation type in
Flash?
a) Motion Tween
b) Shape Tween
c) Motion Guide
d) Action Tween
2. What is the area on the screen where you worked
with layers and frames to alter your movie?
a) Timeline
b) Layers
c) Stage
d) Toolbox
3. ____________ dynamically shows the actual playback
speed.
a) Onion Skin
b) Frame Rate
c) Frame Per Second d) Elapsed Time
4. ____________ allows you to select the frame to be
altered.
a) Current Frame
b) Frames per second
c) Length of Movie
d) Playhead
5. What lets you work with each distinct group of
elements in your movie separately?
a) Scene
b) Layers
c) Timeline
d) Objects
6. Which of the following sound file format is less used
than others?
a) Rm (Real Player)
b) WAV (Windows only)
c) AIFF (Macintosh only)
d) mp3 (Windows or Macintosh)
50
7. Which icon is used to add a new layer?
a)
b)
c)
d)
8. The button ( ) is purposely used to ____________.
a) Show/Hide All Layers.
b) Lock/Unlock All Layers.
c) Show All Layers As Outline.
d) Scroll To Playhead.
9. You can use ____________ to prevent a layer from
been modified by mistake.
a) Hide function
b) Lock function
c) Read only function d) Onion Skin
10.What is the elapsed time on frame 19 when the frame
rate is 12 fps?
a) 1.5 s
c) 2.3 s
b) 1.9 s
d) 3.1 s
11.Which of the following is not used to import a sound
file?
a) File>Import>Import to Stage
b) Drag and drop the sound file to the Stage.
c) Import from another movie’s library.
d) Export>Export Movie
Adobe Flash CS3
Working with Text
Adobe Flash's text tool doesn't just create graphic-objects in the shape of letters, it
creates text boxes filled with live type; in the authoring environment, and the contents
of a text box are fully editable. As you create text elements, you must decide how they
will be used in the published movie and assign them a text-type property.
We will explain the basics of Text in Flash. In Flash there are three types of Textboxes;
Static, Input and Dynamic.
Static Text: Static text is used for titles, labels, or other text contents that appear
in a flash document by default.
Input Text: Input text fields are used for collecting form data and can assign
variable names for this purpose that store the user’s entry.
Dynamic Text: Dynamic text changes depending on the events you scripted;
these fields can display the contents of variables or even text contained in external
files.
The process for creating a text is the same regardless of the type of text you want to
create.
Step 1: Open a new blank flash file (Ctrl+N)
and change the layer’s name as Background.
Step 2: Insert a picture in the Stage.
Step 3: Insert a new layer and change its name
as Text.
Step 4: While the first frame of a Text layer is selected, click the Text Tool ( ) on
the Toolbox and select a frame on the Timeline where you want the text to appear.
The Static textbox has a rectangular handle in the upper right corner, which can be
used to adjust the size of the Textbox.
Step 5: The various Text properties such as the Font, Font size, Font style,
Font color, Alignment etc. can be set using the Properties inspector as shown
below.
Change Font
Size
Select a Font
Boldface
Left Aligned
Selectable
52
Change Font
Color
Adobe Flash CS3
Step 6: Select a device font from the
Font Rendering Method menu.
Device Fonts
Device Fonts are not embedded in the file. When a device font is used, the Flash
Player uses a similar font on the user’s computer. While a device font may not display
text exactly as you want it, the appearance will at least be predictable. Using device
fonts result in smaller final file size.
Anti-Aliasing Text
Anti-aliased text has a smoother appearance, but at smaller font sizes it can
sometimes seem blurred and difficult to read. In these cases, you can select in the
Property Inspector to clarify the text.
The Alias Text feature is only supported
for static text in Flash Players earlier than
version 7. Version 7 of the Flash Player
supports the feature for all three kinds of
text (static, dynamic and input).
Step 7: Expanding-width
textboxes can be created by selecting the
Text Tool and clicking once on the Stage
without dragging it. Once you click on the
Stage, start typing the text in it.
Step 8:
below.
Let’s write a title that is “Country”. Change the properties of text as shown
Set Letter
Spacing
Change Orientation
of Text
Step 9: Now, we will insert an input text in the Stage. Select the Text Tool on the
Tools Panel, and then select Input from the drop-down menu on the Property Inspector.
On the Stage, click and drag a text field with the size you prefer.
Working with Text and Buttons
53
Line Type: You can use the Property
Inspector to specify a single-line or
multiline text field, a multiline text field
without word wrapping, or even a password
field, which masks the user’s input.
Show Boarding Around Text:
You can
set text boarding as show or not.
Maximum characters: You can limit the
entered number of characters.
Render text as HTML: This button in the
Property Inspector. When selected, you can
include HTML tags in the text file to format
the text.
Instance Name: You can enter an
instance name for using in Action Script.
Step 10: Select the text box and set its options from the Property Inspector as
below.
Show Boarding
Around Text
Instance Name
Character
Embedding
Maximum
characters
Line Type
Render Text as
HTML
Step 11: You can click the Embed... button on the Property Inspector and specify
the range of characters you want to embed.
Character Embedding
Flash embeds font information in the finished file. Specifically, the outlines of the font,
which are then used to draw the text. For dynamic and input text fields, Flash
stores the names of the fonts you selected and then the Flash Player searches for
those names on the user’s computer. Obviously, if the user doesn’t have those fonts
installed, the Flash Player won’t be able to find them.
Step 12: Give an instance name to the text box as input_txt.
Step 13: Now; add a dynamic text field under input text. Select the dynamic text
box and set its options from the Property Inspector as in the picture. In addition,
change the instant name as dynamic_txt.
54
Adobe Flash CS3
Step 14: Add a new layer and change its layer name as “Action”. Write the
following code at the first frame of Layer Action.
1 input_txt.addEventListener(Event.CHANGE, changeHandler);
2 function changeHandler(e:Event){
3
dynamic_txt.text = input_txt.text;
}
Line 1:
Line 2:
Line 2:
Creates a new event listener which calls the function changeHandler whenever the text
of the input_txt text box has been changed.
Header of the function changeHandler.
dynamic_txt gets the text of input_txt.
Step 15: Test the movie by pressing
Ctrl + Enter. Type a name into the
input text field. As you type into the
input text field, the dynamic text
displays what you’ve typed.
Working with Buttons
One major application of Adobe Flash is to create interactive buttons that have mouse
events animations effects. You can import animations, images, texts and drawing
objects in it.
Buttons are actually four-frame interactive movie clips. When you select the button
behavior for a symbol, Flash creates a Timeline with four frames. The first three
frames display the button’s three possible states (Up, Over, Down); the fourth frame
defines the active area of the button (Hit). The Timeline doesn’t actually play; it reacts
to pointer movement and actions by jumping to the appropriate frame.
Simple Button
Step 1: Open a new blank flash file (Ctrl+N).
Step 2: Create a new symbol in the library. Choose Insert>New Symbol or Ctrl +
F8. Select Button as a type of the symbol. Name your button as button_simple.
Alternatively, firstly you can draw an object in the Stage and then convert it to a
symbol. After selecting the object, Modify>Convert the Symbol or press F8.
Working with Text and Buttons
55
Step 3: The symbol editing window will open 4 frames: Up, Over, Down, and
Hit.
Up
Determines what the button looks like in an inactive state, when the pointer is not over
the button.
Over
Represents the button’s appearance when the pointer is over the button.
Down
Determines the appearance of the button when it is clicked but not released yet.
Hit
Defines the area that responds to the mouse click. This area is invisible in the SWF file.
The mouse pointer takes a hand view inside this area.
Step 4: In the Up frame, Draw a rectangle on the Stage by using Rectangle Tool.
Select outline, stroke color and line size. Type UP in the rectange.
56
Step 5:
Insert a Keyframe (F6) in the Over frame and create a button for that state.
Step 6:
state.
Insert a Keyframe (F6) in the Down frame and create a button for that
Adobe Flash CS3
Animated Button
Step 1: Open a new blank flash file (Ctrl+N) and change the name of Layer 1 to
Button.
Step 2: Select the Rrectangular Tool. Set the properties of rectangle as shown
in the picture and draw a shape on the Stage.
Step 3: Convert your rectangular shape to a button. Press F8 when the shape is
selected and chose Button in the Convert to Symbol dialog box.
Step 4: Duble click the button or right click the it, and select Edit in Place from the
pop-up menu to see the button’s own frames.
Step 5: Every button has a Timeline with four frames that represent four states of
the button: Up, Over, Down, and Hit. Insert Keyframe by pressing F6 on each
state.
Step 6: Click the Over state, select the button and press F8 to convert it to a movie
clip. Select Movie Clip as a type in the Convert to Symbol dialog box, and then click
OK. Right click the button again and then select Edit in Place.
Step 7: Change the name of Layer 1 to Main. Create another layer with the name
Copy. Select, the layer Main, select the rectangle on the Stage. Right click the
rectangle and then select Copy. Select the layer Copy and then right click on the
Stage and select Paste in Place.
Step 8: Select the frame 10 of the Copy and Main layers, and ınsert a Keyframe.
Create a Motion Tween between frame 1 and frame 10 for the layer Copy.
Working with Text and Buttons
57
Step 9:
Select the last frame of the Copy layer and enlarge the rectangle on the
Stage a little bit with the Free Transform Tool (
).
Step 10: Click the last frame of the Copy layer, select Motion Tween from Tween
Type in the Properties panel. Type 100 in the Ease box to make it a little smooth.
Step 11: While the frame 10 of the layer Copy is still selected click the button, click
the Color drop down arrow in the Properties panel and then set the Alpha value to 0.
It makes your symbol invisible.
Step 12: Now click Symbol 1 to turn back to symbol 1. Select the Down state, and
change the color of the rectangle to red.
Step 13: Click Scene 1 to turn back to scene 1. Select the Text Tool and type click
me on your button.
Step 14: Press Ctrl + Enter to test your animated button.
Practice 1: Football Teams
Prapare Flash document to show the pictures
of your favorite footbal teams. Whenever you
click a button, the related teams should
appear on the screeen.
58
Adobe Flash CS3
Project 1:
ASCII Convertor
ASCII stands for American Standard Code
for Information Interchange. ASCII codes
represent text in computers, communications
equipment, and other devices that work with
text.
Make a Flash program with an input text field
and a dynamic text field to convert a text to
its equivalent ASCII codes. Use the input text
field to obtain the user’s entry as a text, and
display the ASCII codes in the dynamic text
field.
The following code reads any keyboard hit in the input text field and display the ASCII code of the key. You can
use this event listener to complete your program.
input_txt.addEventListener(KeyboardEvent.KEY_UP, convert);
function convert(event:KeyboardEvent):void
{
trace (event.charCode);
}
Working with Text and Buttons
59
Review Questions
1. Which one of the following is not a type of Flash text?
a) Static
b) Input
c) Output
d) Dynamic
2. What is the advantage of using device fonts?
a) Smaller file size
b) Different appearance
c) Smoother appearance
d) HTML renderingl
3. Which one doesn’t appear in the Property Inspector
when an input text field is selected?
a) Show Boarding Around Tex
b) Maximum characters
c) Instance Name
d) Minimum characters
4. Which key combination is used to add a new symbol
to the Library?
a) Ctrl + F5
b) Ctrl + F8
c) Shift + F5
d) Alt + F9
5. Which key combination is used to convert a shape to
a symbol?
a) F5
b) F6
c) F7
d) F8
6. Which state determines the button state when the
mouse cursor is taken over it and the mouse button
is pressed
a) Up
b) Over
c) Down
d) Hit
7. Why do you increase the ease value.
a)
b)
c)
d)
For playing a movie easily
For brightness
For making a smooth motion
For alpha effect
8. How can open the Library?
a) Window>Library
b) Window>Stage>Library
c) Control>Movie>Library
d) Edit>Library
9. How can you change the dimensions of a Flash
document?
a) Modify>Document
b) Control>Test Movie>Dimensions
c) Window>Library>Dimensions
d) File>Change dimensions
10.Use ____________ fonts as an alternative to
embedding font outline information.
a) system
b) postscript type
c) true type
d) device
60
Adobe Flash CS3
Using Sound and Video
Sound and video files add new dimensions to your projects. Adobe Flash is a powerful
tool to create presentations for web with video and sound.
Adobe Flash offers several ways to use sound:
Make sounds that play continuously, independent of the Timeline.
Use the Timeline to synchronize animation to a sound track.
Add sounds to buttons to make them more interactive
Make sounds fade in and out for a more polished sound track.
Your are going to create a Flash movie about five football stars in this chapter to
learn using sound and video in Adobe Flash.
Step 1: Create a new Flash document, and change the dimensions of the Stage
to 650 px X 529 px. Modify>Document.
Step 2: Import the picture background.jpg to the Stage as a background
image. File>Import to Stage (Ctrl+R). Flash imports the background image to the
centre of the Stage.
Step 3: Resize image to fit the stage. Select the image and set the X and Y values
as 0, W to 650, and H to 529 form the Properties. You can also resize the image
manually with Free Transform Tool.
Step 4: Change the name of Layer 1 to Background. Lock the layer Background
to prevent yourself from editing it accidentally. Insert a Keyframe at the frame 30 of
the layer Background.
Step 5: Insert a new layer and name it as Buttons.
Now you’ll import thumbnails for each football star to create animated buttons.
Step 6: Let’s import the picture of our football stars. Select the first frame of the
Buttons layer, and import the picture figo.jpg to the Stage. File>Import>Import to
Stage.
Step 7: While the figo.jpg image is still selected, in the Properties panel, enter
25 for X and Y values to locate the image at the left-top corner of the Stage.
Step 8: Covert the figo.jpg image to a Button. Modify>Convert to Symbol. Name
the symbol as figo and select Button as a type in the Convert to Symbol dialog box
and then click OK.
Flash CS3 Professional filters (graphic
effects) let you add interesting visual effects
to text, buttons, and movie clips.Those
effects include “drop shadow”, “blur”,
“glow”, “bevel”, “gradient glow”,
“gradient bevel”, and “adjust color”.
62
Step 9: Double-click the button figo. The four states (Up, Over, Down and Hit)
appears. Select the figo image and convert it to a symbol to apply filters. Choose
Modify>Convert to Symbol. The Convert to Symbol dialog box opens. In the Name
box type figo_mc, select Movie clip as a type and then click OK.
Adobe Flash CS3
Step 10: In the Filters panel, click the Add Filter icon (
) and select Drop
Shadow from the menu. Set the Blur X and Blur Y values to 10, the Distance to 10,
the Quality to High.
Step 11: Add a Keyframe to the Over, Down and Hit states.
Step 12: Now select the Over frame and then select the figo image. In the
Properties panel, in the Color drop-down menu select Brightness and set the
brightness value to -30.
Step 13: Select the Down frame and then select the figo image. Press the Right
Arrow and Down Arrow key four times to slightly move the image to right and down
when the left mouse button is being pressed on the image.
Step 14: Select the Filters panel. Set the Blur X and Blur Y values to 5, the Distance
value to 5. Now the figo button is ready. Click Scene 1 to turn back to Scene 1. Select
the figo button. In the Properties panel, in the Instance name box type figo_btn. Press
Ctrl+Enter to see how the figo button works.
Step 15: Repeat the steps from 6 to 14 to create the Henry (X:25, Y:180), Kaka
(X:46, Y:330), Shevchenko (X:190, Y:370) and Tuncay (X:325, Y:395)
buttons. Your work should look like the following.
Working with Sound and Video
63
Importing Video
Adobe Flash CS3 is a powerful tool for incorporating video footage into web-based
presentations. Flash Video offers technological and creative benefits that let you use
video together with data, graphics, sound, and interactive control. Flash Video lets
you easily put video on a web page in a format that almost anyone can view.
Step 16: Add one more layer and name the layer as Video player.
Step 17: While the Video player layer is still selected,
import the first movie. Choose File>Import>Import Video.
The Import Video dialog box opens. Click the Browse
button to and find the file figo.flv and then click Next.
Step 18: Select Progressive download from a web
server and then click Next.
Step 19: In the Skin drop-down list select
SkinUnderPlayStopSeekMuteVol.swf and select Orange
(#FF3300) as a color. Click Next and Finish to complete
importing video.
64
Adobe Flash CS3
Step 20: Select the Video player. Set X value to
210 and Y value to 55. Press Ctrl+Enter to see the
result. When you start presentation the figo.flv movie
starts playing immediately. Select the Video player,
and in the Parameters panel set autoPlay to false.
Step 21: Insert a Keyframe at frame 5. Set the autoPlay feature of the
FLVPlayer to true.
Step 22: Insert a Keyframe at frame 10. Change the source item of the
FLVPlayer to henry.flv. Be sure that autoPlay is set to true.
Step 23: Repeat step 17 for the frames 15, 20, 25, to add video files kaka.flv,
shevchenko.flv, and tuncay.flv.
Creating Labels
Now you’ll create a label for each football star in different frames to move the
Playhead to the appropriate frame to play video when you click a button.
Step 24: Add one more layer for labels and ame the new layer as Labels.
Step 25: Insert a Keyframe at frame 5 in the
Labels layer. While frame 5 is still selected, in the
Properties panel, in the Frame Label box type figo.
Do the same for frames 10, 15, 20, 25 and name the
labes as henry, kaka, shevchenko, and tuncay.
Working with Sound and Video
65
Adding Action Script
Step 26: Insert a new layer with the name Actions. Right-click frame 1 in the
Actions layer and then select Actions. Actions Panel for frame 1 opens. In the first line,
type stop(); to stop the presentation at the beginning. Add the following code to
create a listener for each button to listen the clicks, and create a function for each
button to play the appropriate video.
Event listeners (event handlers) are
functions that Flash Player executes in
response to specific events (when a specific
event occurs).
Some MouseEvent constants are CLICK,
DOUBLE-CLICK,
MOUSE_DOWN,
ROLL_OUT, MOUSE_WHEEL, MOUSE_OUT,
MOUSE_OVER, ROLL_OVER, MOUSE_UP,
MOUSE_MOVE, ROLL_OUT, ROLL_OVER.
Functions are blocks of code that carry out
specific tasks and can be reused in your
program.
You can import the following sound file
formats into Flash: WAV (Windows only),
AIFF (Macintosh only), and mp3 (Windows
or Macintosh).
If you have QuickTime 4 or later installed on
your system, you can import some
additional sound file formats too.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
stop();
this.kaka_btn.addEventListener(MouseEvent.CLICK, kakaButton);
function kakaButton(event:MouseEvent):void {
gotoAndStop("kaka");
}
this.shevchenko_btn.addEventListener(MouseEvent.CLICK, shevchenkoButton);
function shevchenkoButton(event:MouseEvent):void {
gotoAndStop("shevchenko");
}
17
18
19
20
this.tuncay_btn.addEventListener(MouseEvent.CLICK, tuncayButton);
function tuncayButton(event:MouseEvent):void {
gotoAndStop("tuncay");
}
this.figo_btn.addEventListener(MouseEvent.CLICK, figoButton);
function figoButton(event:MouseEvent):void {
gotoAndStop("figo");
}
this.henry_btn.addEventListener(MouseEvent.CLICK, henryButton);
function henryButton(event:MouseEvent):void {
gotoAndStop("henry");
}
Adding Sound
You can use sound in Flash CS3, in several different ways to make your work more
interesting and involving.
You can import sounds and edit them after they are imported.
You can attach sounds to different kinds of objects and trigger them in different
ways, depending on your desired effect.
There are two songs to be added to this project: Champions.mp3 and UEFAOfficial Theme.mp3. You’ll add two buttons from Common Libraries, change their
text, and import sounds with them.
Step 27: We add to buttons from the buttons library to play the mp3 files. Select
the Buttons layer. Choose Window>Common Libraries>Buttons to opens the LibraryButtons.fla dialog box. Double-click the buttons tube folder to open it and move the
tube purple and the tube yellow buttons onto Scene 1.
66
Adobe Flash CS3
Step 28: Change the text of buttons. Double-click the purple tube button first. You
see that the text layer is locked. Unlock the text layer and replace the text with
Champions. Change the text of tube yellow button to UEFA – CL.
Step 29: Import the sound files We Are The Champions.mp3 and UEFA Official Theme.mp files to the Library. Choose File>Import>Import to Library.
Step 30: Double click the Champions button. Select the Down state of the center
layer. In the Properties panel, click the Sound drop-down arrow and select We Are
The Champions.mp3.
Step 31: Do the same for the UEFA – CL button. But this time select the UEFA –
Official Theme.mp3.
Step 32: Your FootballStars project is now ready. Press Ctrl+Enter to see the
result.
Practice 1: Football Stars
There are five football stars in the project; Figo, Henry, Kaka, Shevchenko
and Tuncay. Add your favorite football star to this project. There is an empty
place for the picture of your football star at the right-bottom corner of the
Scene.
Add one more sound button and import a sound file to play with your
button.
You can download the picture and video about your football star from the
Internet.
Project 1:
Bad Habits
Using the skills you have learned in this chapter, create a presentation
about the following topics:
Drug addiction kills people!
Drinking alcohol is mother of all disasters!
Stop smoking, start living!
Create a button and find a video for each topic and add sounds.
Your project should explain what a wonderful life we have without these
bad habits.
Working with Sound and Video
67
Review Questions
1. Select _____________ tool on the Tools bar to expand
the image.
a) Rotate
b) Transform
c) Free Transform
d) Lasso
7. To navigate to a frame without using its frame number
use a ____________.
a) Insert Name
b) Insert Label
c) Frame Name
d) Frame Label
2. You can select different skins for FLV Player.
a) True
b) False
8. How to open button common libraries?
a) Window>Common Libraries>Buttons
b) Window>Common Libraries>Classes
c) Insert>Common Libraries>Buttons
d) Window>Library>Buttons
3. Filters can be applied only to symbols.
a) True
b) False
4.
Add Filter icon (
panel.
a) Properties
c) Options
9. ________ adjusts the transparency of the instance,
a) Brightness
b) Tint
c) Alpha
d) Ease
) is located on the____________
b) Filter
d) Parameters
5. ________ adjusts the relative lightness or darkness of
an image.
a) Brightness
b) Tint
c) Alpha
d) Ease
10.________ component lets you quickly add a fullfeatured FLV or mp3 playback control to your Flash
movie.
a) FLVPlayer
b) FLVPlayback
c) MP3Player
d) MP3Playback
11.According to the screen image below, what is the
length of the sound in seconds?
6. How to import a video?
a)
b)
c)
d)
Insert>Import>Import Video
File>Import>Import to Stage
File>Import>Import Video
Edit>Import>Import to Stage
a) 5.7
c) 21
68
b) 8.5
d) 121
Adobe Flash CS3