SHREESWAMINARAYAN COLLEGE OF COMPUTER SCIENCE

Paper: FC602 Animation using Flash MX

Unit-4: Creating and editing symbols

In this unit

Creating Buttons
we shall study

(Button frame)
about.....
* UJAS SAVANI
Button states

Button Events

Creating Start and Stop buttons

Action Script of Start and Stop buttons

T Buttons as Symbols

How to create the third type of symbol, a button. Buttons are similar in many respects to other

symbols, but there are two important differences.

The main difference is that, by default a button does not have a full timeline, like a graphic or a

movie clip.

(the
Instead, it has four distinct frames in which you can place the various button "states'".

default appearance of the button, as well as the way it looks when the mouse is hovercd over and

clicked down on the button).

The second difference is that a button will automatically update its appearance upon user
interaction.

That is, the button will automatically change its state, and switch the system cursor betweenthe

default selectionarrow and a "pointing finger" to respond to çorresponding mouse movements.

be programmed with ActionScript to affect your movie, the button
Although the button must still

state and cursor feedback are handled for you.

your user click anywhere in the banner area and open

When you create a banner, you need to let

a new browser window.

You can create buttons very easily in Flash.

Your button can either have a graphic with rollover graphics, sounds, and even animations of

their own.
You can create an invisible button. Invisible buttons are useful when you want to create "hot

spots" on your website, or make the entire banner clickable without obscuring your graphics.

Simple Buttons creation

and sometimes you just need a quick 'hot spot'. You will
• Multiple button states are not required,

buttons (and even an button), but your first example is

see how to crea's more complex invisible

to start with a basic button symbol.

To create a button with the word Button on it:

in the
Flash document to experiment with and save the as simple
file button,fla
1. Create a new
one folder.

100 x 50.
2. Draw a rectangle (choose any color you ike) and resize it to

3. Use the Text tool to create the word Button. Center-justify the text using the Properties panel,

and center the text object itself within the rectangle.(Hint: Try using the Align panel.)

Click and drag to selcct everything on the Stage, and then press F8 to convert the image to a
4.

symbol.

Page 1 of 7
Prepared By: Madhav K. Dave
 SHREESWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Paper: FC 602 Animation using Flash MX
Unit-4: Creating and editing symbols

5. In the Convert to Symbol dialog box, name the symbol btn and choose "Button" as the

Behavior type, as shown in Figure. Click OK to close the dialog box.

Bufton

Convere to Symbol

Name: hts

Cancel
Type: Movie clip Registration:

OButton
O Graphic Adyanced

Figure: Converting the object to a button symbol

6. Test the movie.

The Preview window opens, and when you move you cúrsor over the instance of the bin symbol,
the cursor displays as a hand, just as it does when yttoll over a link on a web page. Why did
not the button's appearance change? You have creatéta default, or Up button state, but you
have not yet created new artwork to display when the meuse rolls over and clicks on the button.

Button States

Button have four states Up, Over, Down and Hit.

When you look inside a button symbol, the timeline appears unique because of the
aforementioned four predefined frames. The first three e button states.

The Up state represents the button's appearance wheithe mouse cursor is not over the button,

theOver state is displayed when the mouse is rolled over the button,and the Down state displays
when the user clicks on the button.
You will take a look at the fourth state, the Hitstate, in a moment.
For the next project, make your button more complex by creating the Over and Down states for

your button symbol:

1. Inyour existingsimple_buttonfla file, double-click the btn symbol to edit it in place.

2. Add a new empty layer and call it text. Name the previous layer art.

3. Be carefulto select only the Button text in the original art layer, and cut it toyour clipboard.
Then select the new text layer, and use the Edit, Paste in Place menu command (Ctrl/Cmd
Shift-V). This will paste any clipboard object into the same place on the Stage that it

occupied when it was placed on the clipboard (it works for multiple objects as well). The
result will be that Button now resides in the new layer.

Warning
The Paste in Place command is relative to the timeline you are ediring, and locations and
sizes can affect the registrationpoint ofeach tineline. So, ifyou cut or copyfrom inside one
symboland then paste in place outside that symbol (for example, in the root scene or inside
anothar symbol), you may not get the same restults.
4. Select the Over and Down frames in the art layer, and press F6 to add keyframes. The
rectangle in your button is re-created in these frames.

5. Select the same frames in the text layer, but this time press F5 to add frames, not keyframes.

6. Click on the Over frame in the art layer. This will let you work only on this state.

Prepared By: Madhav K. Dave Page 2 of 7

 SHREE SWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Paper: FC 602Animation using Flash MX
Unit-4: Creating and editing symbols

In order to visually distinguish the button's Over state from its Up state, while in the Over
7.

frame, change the fill color for the rectangle in the Properties panel.

8. Repeat this process for the Down state, choosing another unique color.

should resemble simple button 02,fla, and your timeline should

9. Save and test the movie. It

look like as per below Figure.

Timeline scene

p OVer Down Hit

text

Gat
12.0

1
Figure: Timeline for a button symbol

the button displays it's 'over state, which in this case changes the button's
When you roll over it,

color. When you click the button, it displays its Down state, which causes it to change colors

again.
automatically switch between the three primary button
You have now sccn Flash's ability to

but what does the fourth state do? The Hit state allows you to
states and update the cursor,

respond to the cursor.

customize the areas of the button that will

By default, the button will react to the Up state.

frame, and ondy content in this frame,

However,if the Hit frame is populated, any content in this

will trigger the mouse and allow the button to work.

buttons of irregular shapes, and since the Hit content

state is
This makes it very easy to make
invisible to the user, it means you can really get creative.

you can add content to a Hit

Just as you can customize the Hit state to exclude a particular area,

state to make the button react to more than just what is visible.

create a slide show, you can place previous/next buttons in the

For instance, if you want to

center of the Stage, but also add a thin vertical ribbon, the height of the Stage, on the
bottom
extreme left and right sides of the viewalble area.

The four frames and the button layers (Button States)

and several layers. For cach frame, different

Built-in button symbols contain four frames
be reused
may be defined but some,e:g. the label text may
in several layers:
drawings
frames for button symbols (ncluding the ones
Look the various frames. The four mandatory

you may create) are:

Up: displayed in a frame of

the drawing that appears "as is" when the button is
The button, i.e.

your animation.
Over:
defines
button graphics as appears when the user moves the mouse over it. E.g. it

The it

highlighting.

Down: mouse
the user presses the mouse (just during the time the
The button as it appears when
button is held). It showsthe pressing down effect.

Page 3 of 7
Prepared By: Madhav K. Dave
 SHREE SWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Paper: FC 602 AnimationusingFlash MX
Unit-4: Creating and editing symbols
Hit:
This framne allows defining the sensible area (usually the complete button)
with a graphic.
Its contents will not be shown.

Various kinds ofbuttons have various layers (usually between three and five) depending on the
complexity of the drawings. These layers contain just drawing for these four button frames. The
Flash engine will then select the appropriate frame for display
according to user action (mouse
over, mouse down,etc.).
Beginners just should use built-in buttons.
There is no need to change anything in the keyframes or the layers except the label.

However,you later can change any drawings in any way you like.

A button can be made of any sort of graphics you like (even pictures as you shall learn below)
and you even may add animation with embedded movie clips.

Button Events

Button Event Button Event Occurs When..

Name
press Primary mouse button is depressed while pointer is in the button's hit area. Other
mouse buttons are not detectable.

release Primary mouse button depressed

is and then released while pointer is in the
button'shit area.

releaseOutside Primary mouse button is depressed while pointer is in the button's hit area and then
released while pointer is outside of the hit area.
rollOver Mouse pointer moves into the button's hit area without the mouse button
depressed.
rollOut Mouse pointer moves out of the button's hit area without the mouse button
depressed.
dragOut Primary mouse button depressed while pointer is in the button's hit area, and
then, while mouse button is still depressed, pointer is moved out of the hit area.

dragOver Primary mouse button is depressed while pointer is in the button's hit area, and
then, while mouse button is still depressed, pointer moved out
is of, then back into,
the button's hit area.

keyPress Specified key is depressed. In most cases, the keyDown clip event is preferred over
the keyPress button event.

press
A mouseclick is technically a two-step process: the mouse button is depressed (press) and then
released (release).
A press event occurs when the mouse pointer is in the hit area of a button and the primary mouse
button is depressed.
Secondary mouse buttons are not detectable. Button press events are appropriate for radio buttons
or weaponsfiring in a game,but use release events to allow the user to change his mind before
releasing the mouse.

Prepared By:Madhav K. Dave

Page 4 of 7
 SHREESWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Paper: FC 602 Animationusing Flash MX
Unit-4: Creating and editing symbols

release
The release button event occurs when the following sequence is detected:

1. The mouse pointer is in the hit area of a button.

2. The primary mouse button is pressed while the mouse pointer is still in the hit area of the
button (at vwhich point a press event occurs).

3. The primary mouse button is released while the mouse pointer is still in the hit area of the

originalbutton (at which point the releasecvent occurs).

By using the release event instead of the press event, you give users a chance to move the pointer

off of a button even after it has been clicked, thus allowing them to retract their action.

releaseOutside
The releaseOutside event typically indicates that the user changed his mind by clicking on a

button but moving the pointer off the button before releasing the mouse button. The event is

generated when the following sequence is detected:

1. The mouse pointer is in the hit aren of a button.

2. The primary mouse button is pressed and held (thepress event occurs).

3. The mouse pointer moves out of the button's hit area (the dragOut event occurs).

4. The primary mouse button is released while not in the hit area of the original button.

You will rarely bother detecting relaaseOutside events, as they usually indicate that the user
intended not to perform any action.

rollOver
The rolUOver event occurs when the mouse pointer moves into the hit area of a button with no

mouse buttons depressed.

The rollOver event is rarely used in ActionScipt because visual button changes are created

directly in the authoring tool, not with scripting.

You should use the provided up, over, and down frames in the authoring tool to create highlight
states for buttons.

The rollOver event in Flash 5 provides a handymeans ofretrieving a text field selection.

rollOut
. The rolIOut event is rollOver's counterpart; it occurs when the mouse pointer is moved out of the
hit area ofa button with no mouse buttons depressed.
As with rollOver, rol:Out is rarely used because button highlight states are created directly in the

authoring tool, so manual image swapping is not'required in ActionScript.

dragOut
• The dragOutevent is similar to rollOut, except that it is generated if the mouse button is down
when the pointer leaves a button's hit area.

The dragOutevent is followed by either the releaseOutside event (if the ser releases the mouse
button) or the dragOver event (if the user moves the pointer back into the button's hit area
without having released the mouse button).

By: Madhav K. Dave Page 5 of 7

Preparcd
 SHREESWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Pper: FC 602 Animation using Flash MX
Unit-4: Creating and editing symbols

dragOver
The dragOver event is a seldom-seen woodland creature. It is conjured up when the following
sequence is performed:

1. The mouse pointer moves into the hit area of a button (rollOver event occurs).
2. The primary mouse button is pressed and held (press event occurs).

3. Themouse pointer moves out of the button's hit area (dragOut event occurs).
4. Themouse pointer moves back into the button's hit area (dragOver event occurs).
Thus, the dragOver event indicates that the user has moved the mouse pointer out of and back
into the hit area, all the while holding the mouse button down.Note that dragover, instead of the
rollOver event, is generated if the mouse button is still down when the pointer reenters the
button's hit area.

keyPress
The keyPress event is unrelated to mouse events and is insteadtriggered by the pressing of a
specified key.

We cover it here because it uses the on (eventName) syntax of other ActionScript button event
handlers.

This event handler requires us to specify the key that triggers the event:

on (keyPress key)
{

statements

o where key is a string representing the key associated with the event.
o The string may bc either the character on the key (such as "s" or "S"), or a keyword
representing the key in the format "",

o Only one key may be specified with each handler.

o To capture multiple keys using keyPress, we must create multiple keyPress event
handlers.

o For example:

I/Detects the Enter key I|Detects the "a" key

on (keyPress "<Enter>) on (keyPress "a")
{

trace("The Enter key was pressed"); trace("The 'a' keywas pressed");

}

I/ Detects the Down Arrow key

on (keyPress "<Down>")

trace("The Down Arrow key was pressed");

Prepared By: Madhav K. Dave Page 6 of 7

L
SHREESWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Paper: FC 602 Animation-using Ffash MX
Unit-4: Creating and editing symbols

The legal values of Keyword are as follows (note that the function keys F1... F12 are not

supported by keyPress, but are detectable using the Key object):

<Backspace>,Delete> ,<Dowr>, <End>,<Enter>,<Home> ,<Insert>, <Left>,

<PgDn>, <PgUp>, Right>,<Space>,<Tab>, <Up>

Creating 'start and "stop'button in Animation.

Step-1: Open Flash New Document

Step-2:Draw a two circle on stage
Step-3: Give name Start and Stop into circle separately
Step-4: Now select Start circle F8 (or Modify
and press >
Convert to Symbol) and select button
type from Convert to Symbol window.Givenname "btnStart",then press OK.
Step-5: Create Stop button as per the Step-4.
Step-6: Now two start and stop button created, then you can apply Action Script in respective
button.

Action Seript for Start button to Playthe Animation

on (release)

play();

Ations-Dullen

1on (relesse)
apelet
play ()

Auorgtdn
Deve
Cunpter
Ty

Action Seript for Stop' butte: to Stop the Animation

on (release)

stop():

Atigns-Duttoh

tteiesze)
on
Cçersn

net

Prepared By: Madhav K. Dave Page 7 of 7

 SHREE SsWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Paper: FC 602Animation using Flash MX
Unit-4: Creating and editing symbols

In this unit we shall study about....

Creating Symbols

Converting text or object to symbol

* UTAS SAVANI
• Frame by frame animation and onion skin

• Flash Fade-in Fade-out effect

Working with Color in Flash

Creating a symbol

A symbolis an object that you create in Flash.

A symbolcan be a graphic,button or movie clip, and you can then reuse it throughout the current
FLA or other FLA files.

Any symbol that you create is automatically added to the document's library (Window->
Library), so you can use it many times within a document.

When you add animation, you should always animate symbols in Flash, instcad of animating raw

graphics (graphicsthat you draw) or raw assets that you import (such as a PNG file).

For example, if you draw a circle using the Oval tool in Flash, you should convert that circle

graphic into a movie clip before you animate it.

This helps you roduce the SWF fle siz,and makes it easier to create an animation in Flash.

You will create a movie clip sysbolwith the following cxercise.

1. In bauner.fla, select the star,png image (imported this image in file) and select Modify
Convert to Symbol from the main menu.
The Convert to Symbol dialog box opens (see the following figure), where you can name
a symbol and select which type of symbol you want it to be.

2. Type *join us" in the Name text box (see the following figure).

You will see the name of the symboljoin us" in the Library panel after you create the

symbol. You will also see an icon that represents movie clips next to the symbol's name
in library panel.

. Renember that the symbol's name is different than its instance name, because you can
have nunerous instances of a single symbolon the Stage.
• For exampie, you can set an instance name for the join us" symbolusing the Property

inspectorafter you drag it to the Stage from the Library pancl.

• If you drag another instance of the join us symbol to the Stage, assi gn it a different

instance name.

You use the instance name in your ActionScript to reference and manipulate the instance

vith code. There are some naming guidelines you must follow when yoi assign an
instance name.

By: Madhav K. Dave Page 1 of 12

Prepared
 SHREE SWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Paper: FC 602 Animation using Flash MX
Unit-4: Creating and editing symbols

Convertto Symbo

Nne: joiUS

TyeO Move cp Registation be Caice

C Buttor

CGraçtic
Rasc

tinkage

Linkager Egport fur ActianSaigt

Eprtfor runtitie shrins

Export in.frst frame

Inportfor runtime stharing

Source

Fle:
S/mboN Symboi nane: Symbol2

Aways ppdere befor aublsnirig

Enable guides far 9-sie scaing

3. Select the Movie clip option from type ofsymbol, and click OK.
This means that you will convert the graphic imageinto a movie clip symbol.
Movie clip symbols have their own timelines.

Thismeans you can animate each movie clip instance on its own timeline, and on the
main timeline of the document. This is unique to movie clip instances.

4. Select File > Saveto save your progress before moving on.

r Converting Text or Object to Symbols

Not all graphics/text/object in a Flash movie are symbols; you need to take special steps to define

the items you create as symbols.

You can convert elements you have already created into symbols or create symbolsfrom scratch

in the symboleditor.
Symbolsreside in the library of the ile in which you create them.

You can copy a symbol from one document to another or from one library to another file's

library; the symbol then resides separately in each file's library.

The standard library ofa Flash document contains all the symbols used in that document; it can

also contain unused symbols.

Prepared By: Madhav K. Dave Page 2 of 12

 SHREE SWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Paper: FC 602 Animationusing Flash MX

Unit-4: Creating and editing symbols

To turn an existing graphic/ text/object into a symbol

1. On the Stage, select the graphic/text/object element(s) you want to convert into a symbol. Flash

highlights the selected element(s).

2. Choose Modify Convert to Symbol (displayed in Figure), or press F8 on the keyboard.

Figure:Choose Modify > Convert to Synmbol to turn a selected existing graphic into a symbol.

Ctr+]
Documant.

BCorvërt to Syibal F

Breat: Apart Chr+£

The Convert toSymbol dialog appears. Flash gives default name to the symbol.
For example, Symbol 5 based on the number of symbols previously created for the library.

Figure: The Convert to Symbol dialog lets you name your symbol, define its type,and set its registration

(Click the Advanced button to expand the box to set linkages for sharing and import/export.)
point.

Convert to Symbol

Name: Symbol 1 K

Iype: OMovie cip

Begistration: Cancel

OButton.

OSraphic
Adyaneed

3. If you don't want to use the default name, type a new name for your symbol.

4. Choose Graphic or Button or Movie clin as the symboltype.

one of the squares in the registration model.
5. To set the symbol's registration mark, click

symbol by the upper-left corner of its bounding box. Click a

By default, Flash registers a

model another corner, the center, or the middle of a side to

different square on the registration

the symbol by the corresponding point o the symbol's bounding box.

make Flash register

Tips
symbol can consist of one or more merge-shapes, drawing-objects, grouped
shapes
A graphic
is selected on the Stage
you name it. You can even include symbols within symbols. Whatever
when you choose Convert to Symbolbecomes part of the symbol.

a symbol quickly, select the elements on the Stage and drag the
To convert graphic elements to

selection to the lower half of the document's Library panel. The Convert to Symbol dialog

symbolas described the preceding

appears. Name and define your
in task.

appears only in the Convert to Symbol dialog. That means

The registration model is elusive. It

select a point on the syimbol's bounding box or at its center and make that
you get one chance to

However,you can always go into symbol-editing mode and reposition the

the registration point.

the registration mark.

graphic elements in relation to

Page 3 of 12
Prepared By: Madhav K. Dave
 SHREE SWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Paper: FCGA2Animafion using Flash MX
Unit-4: Creating and editing symbols

About Symbol Types

In Flash, you must specify a symbol' type for each symbol.

You have three choices for symbol's type: graphic, button, and movie clip.
. Graphics are, as you might expect, graphic elments, but they can also be animated graphic
elements. The feature that distinguishes one symbol type from another is the way the symbol
interacts with the Timeline ofthe movie in which it appears.

Graphic symbols operate in lock step with the Timeline of the movie in which they ajpear.

A static graphic symbol takes up one frame of the movie in which you place it (just as any
graphic element).
A three-frame animated graphic symboltakes up three frames of the movie.

. Buttons have their own four-frame Timeline; a button sits in a single frameof the main movie
Timeline but displays different frames as a user's mouse interacts with the button.
Movie clips have their own multi rame Timeline that plays independently of the main movie
Timeline.

Create frame-by-frame animations

Frame-by-frame animation changes the contents of the Stage in every frame.

It is best suited to complex animation in which an image changes in every frame instcad of

simply moving across the Stage.

Frame-by-tiame animation increases file size more rapidly than tweened animation.
Inframe-by-frame animation, Animatestores the values for each complete frame.

To create a frame-by-fame animation, define each frame as a keyframe and create a different
image for each frame.
• Each new keyframe initially contains the same contents as the keyframe preceding it, so you can

modify the frames in the animation incrementally.

1. Click a layer name to make it the active layer, and select a frame in the layer where the
animation is to start.

2. If theframe isn't already a keyframe, select Insert> Timeline > Keyframe.

3. Create the artwok for the first frameof the sequence. Use the drawing tools, paste graphics
frorn the Clipboard, or imp:rt a file.

4. To add a keyframe whose contents are the same as the first keyframe, click the next frarme to

the right in the same row. Select Insert > Timeline > Keyfranme, or right-click and select
Insert Keyframe.

5. To develop the next increment of the animation, alter the cortents ofthis frame on the Stage.

6. To complete your frame-by-frame animation sequence, repeat steps 4 and 5 until you've
built the desired motion.

7. To test the animation sequence, select Control > Play or click the Play button on the

Controller (Window > Toolbars > Controller).

Prepared By: Madhav K. Dave Page 4 of 12

 SHREESWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Paper: FC 602Animation using Flash VEX

Unit-4: Creating and editing symbols

Onion skin (Viewing Multiple Frames Simutaneously)

Problem
You want to see multiple contiguous framcs of an animation simultaneously.
Solution

Use onion skinning.

Discussion

Onion skinning shows multiple contiguous frames of an animation, which is useful for

previewing animations, as well as adjusting positioning and other features of animated graphic

elements.

Many of the sereenshots in this chapter use onion skinning to depict the different frames of an
animation all at once.

To activate onion skinning, toggle on either the Onion Skin or Onion Skin Outlines button.

The Onion Skin button displays the graphic itself, as it appears in multiple frames, with lowered

opacity in inactive frames.

The Onion Skin Outlines button displays a low-resolution outline of the graphic in multiple
frames.

Onion skinning applies to all visible layers in the timeline.

If View Layer as Outlines is toggled on, onion skinning will display the outlines only, regardless

of which onion skin button you toggle on.

When onion skinning is toggled on, Flash shows a span of five frames by default: two frames
before the active frame through two frames after the active frame.

If the active frame is (or is near) the first or last frame, it may show as few as three or four
frames.

Onion markers, which appear at the top of the timeline the same area as the playhead, depict

the range of frames that are displayed; the arca between them is shaded.

1 10 15 20

Onion Skín Outlines

Onion Skin -Modify Onion Markers

12 12.0 fps

Edit Multiple Frames

Onion Skin

Figure: Control onion skinning in the timeline

You can control how many frames Flash includes in the onion skin span.

Prepared By: Madhav K. Dave Page 5 of 12

 SHREE SWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Paper:FC 602.Animationusing Flash MX
Unit-4: Creating and editing symbols

• Drag the onion markers to define a custom area, or choose one of the presets from the Modify
Onion Markers menu.
• Presets include Onion 2, Onion 5, and Onion All.

2
Onion and Onion 5 tell Flash to use onion skinning for two or five frames before and after the
active frame.

As you move the playhead, the active onion span moves along with it.

For example, if the playhead is in frame 10 and the default Onion 2 is active so that frames 8-12
are onion-skinned, and you move the playhead to frame20, frames 18-22 will be onion-skinned.

You can lock the onion markers at their current positions by choosing Anchor Onion from the
Modify Onion Markersmenu.
That way, even if you move the playhead, the onion span will not change.

Onion skinning by itself enables you to see the contents of several contiguous frames.
Alone it does not allow you to edit multiple frames simultaneously.

However,you can use the Edit Multiple Frames feature so that you can edit the contents of more
than one frame at the same time.

&A

Figure: Onionskin Effect Figure: Onionskin Outlines Effects

o Flash Fade In and Fade Out Effect

Learn how to fade an imagein Flash. You can use this fading effect on images and text; it is a
very common Flash effect.
The Fade In/Fade Out behavior lets you dissolve into and out of any object by ramping the
opacity of the object from O percent to 100 percent at the start, and then back to 0-percent at the
end.

An optical effect in which an image/text appears gradually out of darkness and then gradually
disappears.

To apply fade-in and fade-out effects on image or text as per following steps.

1. Open a new file. Go to File >New. A Sereen called New Document will appear. Select Tlash

Document and click on OK. Go to Modify>Document and give a file size as the Bitmap
pictures size.

Prepared By: Madhav K. Dave Page 6 of 12

 SHREE SWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Paper: FC 602 Animationusing FlashMMX
Unit-4:Creating and editing symbols

and Fade out from your picture file and

2. Select the Bitmap pictures that you want to Fade in

bring it to the Flash Library. Select File>Import to Library from the Meu Bar. A Screen

named Import To Library will open. Choose the file name and click on Open. Repeat these

steps for all the Bitmap pictures. To open Library, go to Window>Library. You can see the

pictures in the Library panel.

Drag the picture from the Library panel to the Stage. Select the picture by clicking on it.
3.
Create New
Go Modify>ConvertTo Symbol from the Menu Bar. A dialog Box named
to
on OK.
Symbol will appear. Give the name as piclme. Select Movie Clip. Click

Movie Clip. Go Frame 15. Insert a Keyframe. Right click on layer 1 in the
4. Click on your to

middle of the frames 1 to frames 15. The frames will become black. Select Create Motion

Tween. An arrow from frame 1 to frame 15 will appear. Again click on Frame 30. Insert a

Keyframe. A second arrow will appear automatically.

Here we give the fade in effect. Select the picture by clicking on it. Go
5. Click on Frame 1. will

to Properties in the panel below the Stage. Go to Color>Alphagive 0% to it.

Colar: None
etis
None
cokn
ne
Brightness
Tnt
Alpha
Advanced

Click on Frame 30. Here we will give the fade in effect. Select the
Your picture has faded in.

picture by clicking on it. Go to Properties in the panel below the Stage. Go to Color>Alpha

give 0% to it.

6.
5 in laycr 2 from the frame31 to 45 to 60. To make a new layer, click
7. Repeat the steps 3 to

which on the right side below the layers. Repeat the above
on the following button t is

the images in new layers and you will create a simple fade in and fade out Flash
steps for all

animation.

• Press on Crl+Enter to see the Fade in & Fade out Effect of the 4 pictures.

Iot Command Cgtrt W

ade

Fade Ou'
Page 7 of 12
Prepared By: Madhav K. Dave
 SHREE SWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Paper:FC 602Animation using Flash MX
Unit-4: Creating and editing symbols

Working with Color in Flash

Flash offers a lot of options for creating, saving, and working with colors and gradients. In

addition, the panels and workspace make it easy to choose and apply colors from virtually
anywhere, or to save color sets that you can share between multiple Flash documents and
projects.

$ Creatinggradients
A gradient is a gradual blend between two or more colors, and is often used for complex
color transitions or to imply lighting efects. You can create and save gradients and apply
them to fills or strokes within your artwork. Flash supports linear gradients and radial

gradients.Both types can include anynumber ofcolors.

• Linear gradients blend in a uniform manner and, as the name implies, ina straight line going
in any direction or angle.

Radial gradients blend in a circular manner, either from the inside out or the outside in.

On the left, a linear gradient; on the right, a radial gradient

> Steps to create gradients color effect.

I. Choose your Selection tool (), and click once on your fish to select it. ChooseModify > Break
Apart to separate the fish and its parts, and then choose Edit > Deselect All. Click once on the
body of the fish.

2. Locate the Color type drop-downmenu at the, top-right corner of the Color panel. This allows

you to choose a solid color or gradient for the currently active color. Choose Radial gradient to

set a radial gradient to your fill. The fish displays the defaultblack-to-white gradient.

Prepared By: Madhav K. Dave

Page 8 of 12
 SHREE SWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Paper: FCG02 Animation using Flash MX
Unit-4: Creating and editing symbols

Color

Color Mxer tches.

Type: Rad
OverflowNorne
Soid
Linear
Radia
Ritrnap

R: 255

G: 255

B: 255

Apha: 100% #FFFFFF

ChooseRadial to switch yourshape'sfill to a radial gradient.

3. At the bottom of the Color panel, you see the color ramp, which now appears with two color

stops (sliders), one for cach color that forms your gradient. You'll need to assign a new color to
each stop.

4. Double-click the rigbt slider, and the Swatches panel appears. Choose the dark orange color

marked #CC6600. Double-click the left slider, and from the Swatches panel, choose the light
orange color marked #FF9900.
Color YColor

Color Mixer ototSwotches

Cotor MixerCoorSwatdnes
10396 10396
Tyrie: Radlal Type: (Rackal

Overflow: Overflow:

inear RGB
Dinear l

R: 204 R: 255

G: 102 G: 153

B: 0 B0
Alpha: 100% CC6600 Abha: 100% #F9900

#0cS00 Aphas10096 #FP00 Aptas 100%

Set a unique value for each color stop on yourgradient

Prepared By: Madhav K. Dave Page 9 of 12

 SHREE SWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Paper: FC 602Animation using Flash MX
Unit-4: Creating and editing symbols

5. The position and distance between the two sliders determines the blend point. Moving one slider

closer to the other changes the balance between the two colors. lick and drag the left slider
slightly toward the middle this makes the lighter orange more prominent than the darkorange.
6. To add colors to your gradient, youll add more color stops. Add a new color stop by clicking on
the far left edge ofthe color ramp. A new stop should appear below the color ramp. Double-click
the stop, and choose white (#FFFFFF) from the Swatches panel.

Now, you'll save this gradient for use later on.

7. Locate and open the Color panel menu (#)in the upper-ight comer of the panel. Choose Add
Swatch to add your new gradient swatch to the existing swatch presets.

Color
RGB
HSB

Add Swatch

Help

Group Color Mixer with

Close Color Mixer

Rename panel group..

Maxómize panel group

Ckasepanl graup

Saveyour new gradient as a preset that you can recall later on from the Swatchespanel.

Creating customcolors

As you may have discovered, creating and saving a solid color swatch is nearly identical to

creating and saving a gradient swatch. In this case, you will set specifc RGB values to create

a color that you can apply to your artwork, as well as add tó your existing swatches.

To add color in color swatches follow below listed steps.

1. Choose specific color from color mixer panel.

2. Give the R, G, and B values in text fields on the Color mixer and type 250, 100, and 16,

respectively. This creates a dark orange color that is immediately applied to the selected

object.

Page 10 of 12
Prepared By: Madhav K. Dave
 SHREESWAMINARAYAN COLLEGE OF COMPUTER SCENCE
Paper: FC602 Animationusing Flash MX
Unit-4: Creating and editing symbols

T Color
Cator Mbxer Colar Swatches

Type:Solid

R: 250

G: 100

B: 16

100%
FA6410
Aipta:

3. From the Color panel menu located in the upper-right corner, sclect "Add Swatch to add

your new color to the Swatches panel.

Cölor

RGB

HSB

Add Swatch

Help

Group Color Mxer with

Clase Colar Mixer

Renarnepanel group...

Maximize parnel group

Close panel group

> Saving a custom color set

Once you have added new color swatches, you will want to save that set for use with other

projects and documents.

If you have ever created and saved custom color swatches in applications like Photoshop or

Illustrator, you will find that saving color sets in Flash is very similar.

Press the Swatches panel tab located next to the Color panel tab to open the Swatches panel.
1.

Press the panel menu button () in the upper-right corner of the Swatches panel.

2. From the panel menu, choose Save Colors.

Page 11 of 12
Prepared By: Madhav K. Dave
 SHREE SWAMINARAYAN COLLEGE OF COMPUTER SCIENCE
Paper:FC 602Animation using Flash X

Unit-4: Creating and editing symbols

Swatthes

Duplicate Swatch
Detete Swatch

Add Colors...

Replace Colors..
Load Default Colors

Save Colors
Save as Default

Clear Colors

Web 216

Sortby Color

Help

Close
Close Group

Save the current swatches asa new color set thatyou can recallat any tme.

3. From the dialog box that appears, choose your Save location, and name the new file

flcolors.clr.

4. Press Save to save the color set into the selected folder. The color set appears in your
destination folder as a single .clr (Flash Color Set) file.

Prepared By: Madhav K. Dave Page 12 of 12