Making a

Button
PHOTOSHOP
OVERVIEW
The following lesson will show
you how to build a realistic
button with Photoshop. You will
learn how to create Blocking
Layers in the same tradition as
classical painting. You will also
learn how to use your Burn and
Dodge tools as well as your blurs
and fix sizes. This assignment
should take about 1/2 hour to
complete and after a couple of
times you should be able to do it
with ease. When you are finished
try to find other ideas that you
can apply these techniques.
STEP 1
Open up a new Photoshop
document. A window will appear.
Set the window to the following
values. (1200 pixels width and
height) (resolution 300)
STEP 2
Create a new layer and name it
1100

Interactive Design Lesson

STEP 3
Select a Elliptical Marquee Tool.

STEP 4
Change the Style to fixed size
for the Elliptical Marquee and set
the Width and Height to 1100
px.

STEP 5
Make a 1100 px Ellipse and fill it
with black.

STEP 6
It needs to be on the new layer
named 1100.

STEP 7
Make a layer and name it 1000.

STEP 8
Change the Style: Fixed Size to
1000 px for both the Width and
the Height.

STEP 9
Make a 1000 px Ellipse and fill it
with black.

STEP 10
Make a layer and name it 900.

STEP 11
Change the Style: Fixed Size to
900 px for both the Width and
the Height.

STEP 12
Make a 900 px Ellipse and fill it
with black.

STEP 13
Duplicate layer 900 and rename
it 900 red.

STEP 14
Change the color from black to
red.

STEP 15
Apply a Gaussian Blur filter of 10
to the red shape. This will
create an alpha feather on the
edge of the shape and allow the
layer 900 to seep through. This
will give the illusion of depth and
curvature.

STEP 16
Apply a Render: Lighting Effect
filter to the red shape. Use the
tangents to move and adjust the
light source.

STEP 17
Apply a Render: Len Flare filter.

STEP 18
Make sure that the highlight is
located in the proper location.

STEP 19
Select the 1000 layer.

STEP 20
Choose the Magic Wand tool.

STEP 21
Select the white empty area.

STEP 22
Go to the Main Menu and
choose Select than choose
Inverse.
Reason: By selecting the empty
area and than inverse you ensure
that you have selected all the
pixels in the circle.

STEP 25
Observe

STEP 26
Select the Dodge Tool

STEP 25
Choose a large brush.

STEP 26
Select Range: Shadow

STEP 27
Select Exposure and reduce the
range to between 10 and 20

STEP 28
In a clock wise direction sweep
once around the 1000 pixel
Black Shape.

STEP 29
Then Dodge the areas in the
Black Shape that are nearest to
the darker areas in the Red
Shape.

STEP 30
Repeat the process for the Black
Shape on the 1100 layer

STEP 31
Dump black paint in to the
background layer.

STEP 32
Add a Layer between 1100 and
1000 and name it Edge.

STEP 33
Make a fixed Size Ellipse of 1000
on the Edge Layer and place it
over the area where the 1100
and 1000 shapes appear to meet.

STEP 34
Change the foreground color to
white.

STEP 35
Select Edit on the main menu
bar, then select Stroke.

STEP 36
Set the Width at 3 px and the
Location to Center.

STEP 37
Move the Edge Layer up. So it is
between layer 1000 and 900.

STEP 38
Use the Lasso to de-select the
Marque.

STEP 39
Select your Eraser Tool and turn
down the Opacity.

STEP 40
Erase parts to give the edge a
natural shine.

STEP 41
Select Filters: Blur: Radial Blur
and select 24 for the Amount
and Spin for Blur Method and
Best for Quality.
Note: After you apply the blur
you may also want to turn down
the layer opacity.

STEP 42
Inspect the edge.

Buttons always have two states.

On and Off or Up and
Depressed. We will make On
and Off states,

STEP 43
Duplicate the 900 Red layer and
rename it.

STEP 44
Select Image: Adjustments: Hue/
Saturation and change the hue
to green.

STEP 45
Turn off 900 red layer.

STEP 46
Now you can Change the DPI to
72 and save a red copy for the
web and a green copy. These can
be imported into Flash and used.

INTERACTIVE DESIGN
CRISAFULLI

PROFESSOR

Flash Tutorial: Creating and Linking Scenes

When you start a new Flash Document the program will automatically create your first
scene and title it Scene 1.

But did you know that you can create more scenes? Flash document often have multiple
scene that are linked together. Here are some reason behind making multiple scenes:
1. Faster Loading Time: Flash Files have to completely load before the viewer can see them.
If they are big files this can take more time than a person is willing to wait. If you break your
file in multiple scenes, the file only loads that scene. Making the load speed faster.
2. Organization: Flash Files can have 100s of elements which are hard to keep organized.
Scenes help you break down the process and the elements into discernible units.
3. Animation and Sound: When putting together an complex animation Scenes help in the
editing process.
4.Choice selection and timeline length: The timeline can get very long and inecient
without using Scenes. This is especially problematic when you invite the viewer to make
choices in narrative structures.

Creating a Scene
Part 1 (Open New Document)

1. Open Flash
2. Create a New Flash Document
(Action Script 2)
3. Notice: Flash Makes Scene 1
automatically for you.

PAGE 22

INTERACTIVE DESIGN
CRISAFULLI

PROFESSOR

Part 2 (Create a Button)

1. Select Insert
2. Select New Symbol
3. Select Button
4.Name Button: sample button
5. Select OK

Notice: You are now in Button

Making mode rather than Scene
mode. When we are done making
the button you will select
to return to the Scene.
Dont return to the Scene yet.

PAGE 23

INTERACTIVE DESIGN
CRISAFULLI

PROFESSOR

Part 3 (Create a Button)

1. Create a Circle in the
Up key frame

2. Select the Over key fram

and Press F6 to insert a key
frame.

3. Select the Down key

frame and Press F6 to inser
a key frame.

4. Select the Over key fram

and change the color of the
circle. (This will make the
button light up when you
roll over it.)

PAGE 24

INTERACTIVE DESIGN
CRISAFULLI

PROFESSOR

Part 4 (Return to Scene 1)

1. Select Scene 1 to return to the main scene.

Part 5 (Make and Name Layers)

1. Make two more layers and name all three layers accordingly.

Part 6 (Add Button to Stage)

1. Lock o the Actions Layer and the
Text Layer
2. Select the Buttons Layer

3. Drag Sample Button from Library to

the Scene 1 Stage

PAGE 25

INTERACTIVE DESIGN
CRISAFULLI

Part 7 (Add Text to Stage)

1. Lock o Buttons Layer
2. Unlock Text Layer and Select it
3. Select the Text Tool and type Scene 1 on the stage.

Part 8 (Script a Stop in Actions Layer)

1. Lock o the Text Layer and unlock
Actions Layer
2. Select the Window > Actions

PAGE 26

PROFESSOR

INTERACTIVE DESIGN
CRISAFULLI

PROFESSOR

Part 9 (Scripting a Stop Action)

1. Select Script Assist (if not selected) (This will make things a bit easier for you.)
2. Open Global Functions Folder.
3. Open Timeline Controls Folder.
4.Select stop and Double Click
5. Leave Actions open.

Notice:
1. An a is in the 1st keyframe on the
Actions Layer. This mean you have an
action in that key frame.
PAGE 27

INTERACTIVE DESIGN
CRISAFULLI

PROFESSOR

Part 10 (Creating Scene 2)

1. Select Insert from the Main Menu Bar.
2. Select Scene from the Drop Down Menu
Notice:
1. You are now in Scene 2.
2. Scene 1 is not visible
3. Scene two is blank
4.Your Library still has your
sample button symbol that you
can use.

Important: To toggle between

Scene 1 and Scene 2
1. Select Window
2. Select Scene
3. Click on the Scene you desire to
work on.

PAGE 28

INTERACTIVE DESIGN
CRISAFULLI

PROFESSOR

Part 11 (Preparing Scene 2)

1. Make two more layers in Scene 2
and name all three layers
accordingly.
2. Switch to Scene 1 and copy the

Part 12 (Preparing Scene 2)

1. Select Scene 2 to return
2. Select the 1st key frame in the
Buttons Layer.
3. Select Edit> Paste in Place.
This puts the Button in the
same location as the one on
Scene 1

PAGE 29

INTERACTIVE DESIGN
CRISAFULLI

PROFESSOR

Part 13 (Preparing Scene 2)

1. Switch to Scene 1 and copy the Text from the stage. Make sure you unlock the layers
when you are using them.
2. Select Scene 2 to return
3. Select the 1st key frame in the Text Layer.
4.Select Edit> Paste in Place. This puts the Text in the same location on both Scenes.
5. Change the text to read: Scene 2.
6.Remember to Save.

Part 14 (Preparing Scene 2)

1. Unlock to Actions Layer.
2. Select Window > Actions
3. Script Assistant should still be
on.
4.Double click: Stop in the
Timeline Folder.
PAGE 30
Now there should be an a in the
first keyframe of the Actions Layer in
Scene 2.

INTERACTIVE DESIGN
CRISAFULLI

Part 15 (Linking Scene 1 and Scene 2)

1. Switch to Scene 1
2. Select the Button
3. Select the Actions Palette
4.Select goto in the Timeline Folder

5. Select Scene 2 in the Scene Menu

6. Frame 1 is already selected for you
7. Save
8. Switch to Scene 2
9. Select the Button
10. Select the Actions Palette
goto
11. Select
PAGE
31 in the Timeline Folder
12. Select Scene 1 in the Scene Menu
13. Save

PROFESSOR

INTERACTIVE DESIGN
CRISAFULLI

Part 16 (Linking Scene 1 and Scene 2)

1. Test Flash File.

Now you have learn how to

link two scene. You can link
as many scenes as you want.
I hope this was fun. I
suggest that you do this
tutorial 4 or five times in
order to cement it into your
process.

PAGE 32

PROFESSOR

INTERACTIVE DESIGN
CRISAFULLI

PROFESSOR

How to Post a Web Site

Using a FTP Program
FTP: File Transfer Protocol
Before you can upload your file from flash you first have to publish
the file. We will first go through this simple process and then proceed
to uploading

Publishing in Flash

FTPing
There are a lot of
programs that allow you to
transfer your web site files to
the web space that you
purchased. I think the
easiest ones are Fetch and
Transmit. When you transfer
a web site to the given folder
on the server it must have the
following files.

1. Part 1
2. Select File

1. Index.html

3. Select Publish Settings

2. name.swf
3. What ever movies you
used
4. What ever PDFs you
have included.

Professor Crisafulli

PAGE 33

INTERACTIVE DESIGN
CRISAFULLI

PROFESSOR

1. Make a new folder on your

desktop and name it so it
relates to the project

1. Make sure that Flash and

HTML are checked.
2. Select the Folder Icon next
to each and redirect each file to
me saved in the folder you just
made.
3. Note: Flash does not alway
name the HTML file with the
.html extension on the Mac.
You can either enter it here or
fix it later.
4. Select Publish after
redirecting files.
5. Select OK

Note: Dont worry about all

the other things on this window
at the present time. I will explain
it as your need to know it later.

PAGE 34

INTERACTIVE DESIGN
CRISAFULLI

PROFESSOR

1. Open the folder to check

and see if everything it there.

You should have two files, a .html file and a .swf file. Both will me needed to be transfer to
your web space. If you do not have a .html extension on the one file, then add it yourself. You
need this extension for the site to work on the internet.

Posting your Flash Site: FTPing

We are going to use Transmit to post. You can get a copy of the application from apple or the
Transmit site. The cost for this software is about 3o dollars. It is totally worth it. After you use
it you will wonder how you ever got along with out it.
http://www.apple.com/downloads/macosx/internet_utilities/transmit.html

About Transmit
A next-generation FTP and SFTP client for Mac OS X. With
its famously clean drag and drop interface, and powerful
features set, Transmit makes maintaining files and folders
through the Internet as easy as, well, the Mac!

PAGE 35

INTERACTIVE DESIGN
CRISAFULLI

PROFESSOR

Posting your Flash Site: FTPing

Your Web Space provider will supply you with the following information the you need to fill
in to the access fields.
1. Server (The Server is either the Name of the Computer or in some cases it they will make
it your folder name.
2. Your Username
3. Your Password (Sometimes they assign you a password other than your pass word.
4. Port: If they do not give you one use 21
5. Protocol: Almost alway FTP
6. When you have all of this click Connect.

PAGE 36

INTERACTIVE DESIGN
CRISAFULLI

This will bring you to your folder. My folder it called Public_html, but yours may be your
name or default or what ever. Because I use this folder I add my own folders, therefore yours
might look dierent.
1. Once you have access to you area
2. Open the folder where you save the Published files from Flash.
3. Select the Folders and Drag then into Transits big window
4. Done.
5. Test the site online after they have loaded.

PAGE 37

PROFESSOR

PROFESSOR CRISAFULLI
TUTORIAL

PRELOADER

Interactive Design
Making a Flash Pre-loader
Unlike HTML files Flash
requires the entire site of
animation to load before it is
viewable to the public. This lagtime can confuse your viewer
into thinking that something is
wrong with the site or animation.
A pre-loader will identify to the

viewer that your site is indeed

coming but it will take a little
longer. If your pre-loader is
animated simply, then the viewer
will not fully realize the amount of
time that has passed. Even
seconds count on the Web.

Assignment
Do this tutorial then design
3 different pre-loaders for
your personal site.
This means that you need to
create 3 site shells.
(A Site Shell is a site with
buttons and pages but no
information such as pictures
and text. I block out basic
text and image areas with
boxes but not always.)
Start
1.Make 2 layers
2.Name them: Preloader
and Action
3.If you are making the
Preloader after the site is
already started then you
will need to make room at
the beginning of the site
by adding frames. To do
this you: select all the first
frames in your movie >
right click > select Insert
Frame.
4.Make 6 new frames and
Clear the information on
the first 5 frame.
5.Make a key frame on
frame 1 and 2 on the
actions layer. (see image
to left.)

PAGE 38

PROFESSOR CRISAFULLI
TUTORIAL

PRELOADER

6. Go to the first frame in

the Preloader layer and
place a text displaying
"Loading" on it.
7. Open the Actions Panel
8. Go to the first frame in
the Preloader layer and
copy this script below into
the actions panel. (A
small A will appear on the
first frame of the
Preloader layer to indicate
that a script is attached.)
ifFrameLoaded ("end") {
gotoAndPlay ("start");
}
Note: This actionscript
checks if the last frame of
your movie (that you will
label "end") is loaded and
then only starts playing your
flash file at the starting
frame that you will label
To Label a Frame:
1.Select a frame.
2.Go to your Properties Inspector
3.Enter the name you wish to call
the frame.

PAGE 39

4.You need to label, for this

Preloader, frame 6 start and the
last frame of your flash file/movie
end.
5.See below for example.

"start". Thus this action

script decides whether to
continue the preloader loop
or to break free and start
playing the movie.

PROFESSOR CRISAFULLI
TUTORIAL

PRELOADER

Preloader Loop: Now we need to make a loop that executes till the last frame is loaded. To make
use of a very basic animation we will display three dots after the loading text to show that loading is
taking place.
1. To do this make a Dot on frame 2 of the action layer and place it after the word LOADING.
2. F6 frame 3 of the actions layer to copy frame 2 into it. Add another dot. (now you have 2 Dots)
3. F6 frame 4 of the actions layer to copy frame 3 into it. Add another dot. (now you have 3 Dots)
4. See example below.
5.

PAGE 40

1. Now we need a frame to return to the first frame as the condition is being checked there.
So, on the actions layer and give the following action script to the Fifth Frame. We just
return the control to the first frame to complete a loop.
2. gotoAndPlay (1);

1. That's it your simple preloader is ready. Just make sure that all the stuff that you want to
be displayed in your movie starts from the 6th frame and that you label the last frame of
your completed movie as "end".

PAGE 41

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010

A n i m ati o n
1
FLASH
OVERVIEW
In this lesson we will learn how
to animate in Flash. Their are two
types of animation that a beginner
can easily master with in a few
session - they are Motion
Animation and Shape Animation.
In this lesson we will be learning
motion animation,
You should already be familiar
with the three types of Symbols Movie Symbols, Button Symbols
and Graphic Symbols.
OPEN DOCUMENT
Open up a new Flash
Document. If you have a recent
copy of the software then you
will want to choose action
script 2. If you have an older
version of the software dont
worry about this as you do not
have that option.
You will need to have your
Property Inspector, Color
Palettes, Library, and Tools
visible. They are located in the
window
PAGE option
42 on the Main
Menu bar at the top,
!

Interactive Design Lesson

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010

PAGE 43

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
STEP 1
Select Insert on the main
menu bar and choose New
Symbol...

STEP 2 A new window will

appear.
Title it Birds with Wings Up.
Select the Graphic Button.
Select OK.

PAGE 44

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
STEP 3
Check to See if the Symbol is
located in your Library.
Check to make sure you are in
the Graphic Symbol
development window.

PAGE 45

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
STEP 4
Make 2 Layers.
Name the bottom layer Body.
Name the top layer Wings.
Lock the Wings Layer.
Click on the first frame of the
Body Layer.

STEP 5
Draw the Birds Body on the
Body Layer.

STEP 6
Lock the Body Layer.
Unlock the Wings Layer
Select the First KeyFrame of
the Wings Layer

PAGE 46

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
STEP 7
Draw Wings

STEP 8
Create a new layer and name it
details.
Lock off other layers.
Select the First frame of the
Details Layer
Add details on to the bird.
Save

PAGE 47

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
STEP 9
Go to your Library and
Duplicate the Bird with Wings
Up Symbol twice and rename
each accordingly.
Bird with Wings MIdway
Bird with Wings Down

PAGE 48

Click here to access menu. Duplicate is located here,

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010

PAGE 49

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
STEP 10
Select Insert on main menu
and then Select New Symbol.

STEP 11
Name the Symbol fly and
then Select: Type Movie Clip.
Select OK

PAGE 50

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
STEP 12
Check to see that you are now
in the Movie Clip window.

STEP 13
Select Bird with Wings Up
from the Library and drag it
onto the stage of Movie Clip
fly.

PAGE 51

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
STEP 14
Select frame 4 of the Time Line
and press F6.

STEP 15
Click on the Symbol Bird with
Wings Up that is on the stage.
(Make sure that Frame 4 is
selected.)
Go to your Property Inspector
and Select Swap

PAGE 52

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
STEP 16
Select the Symbol Bird with
Wings Midway.
Press OK

STEP 17
Notice that Frame 4 now holds
the Graphic Symbol Bird with
Wings Midway. while Frames 1
through 3 hold the Graphic
Symbol Bird with Wings Up.

PAGE 53

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
STEP 18
Select frame 7 of the Time Line
and press F6.

STEP 19
Click on the Symbol Bird with
Wings Midway that is on the
stage. (Make sure that Frame 7 is
selected.)
Go to your Property Inspector
and Select Swap

STEP 20
Select the Symbol Bird with
Wings Down
Press OK

PAGE 54

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
STEP 21
Select frame 10 of the Time Line
and press F6.

STEP 22
Click on the Symbol Bird with
Wings Down that is on the
stage. (Make sure that Frame 10
is selected.)
Go to your Property Inspector
and Select Swap

STEP 23
Select the Symbol Bird with
Wings Midway.
Press OK

PAGE 55

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
STEP 24
Select Frame 12 and press F5.
Notice that this time we
selected F5 rather than F6. F6
would have worked as well but
since we did not need another
Key Frame we used F5 to cap
the animation cycle.

STEP 25
Turn to the Main Scene by
clicking the Scene Icon.
Drag the Movie Clip Symbol that
you named fly onto the Stage
of the Main Scene.
Rename Layer 1 to Bird in
Flight.

PAGE 56

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
STEP 26
Test Animation by Selecting

STEP 27
A window will pop-up playing
your animation. It will be a .swf
file.
After you test the Movie you
need to Delete it from the first
frame of the Time Line.
Im going to show you a trick.

PAGE 57

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010

MAKING THE BIRD FLY

ACROSS THE STAGE.
STEP 28
Make another Movie Clip
Symbol and name it Fly Across.
This will allow the bird to enter
the viewable (stage) area and
exit the stage during the
animation loop.
Drag the fly Movie Clip for the
Library onto the First Frame

PAGE 58

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010

STEP 29
Select Frame 48 on the Time
Line and Press F6.
Since the Fly animation has 12
Frames and the Flash Player pays
12 Frames per Sec. I like to
choose a Frame that is Dividable
by 12. 12 goes into 48 four
times.

STEP 30
Select the First KeyFrame of the
Time Line.

STEP 31
Go to your Property Inspector
and Select Tweening > Motion

STEP 32
Notice that you know have an
Arrow between Frames 1 and
48. This is a Motion Tween. This
will allow the program to adjust
each
frame
PAGE
59between 1 and 48 to
create the illusion that the bird
is moving across the Stage.

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
STEP 33
Select Frame 48 and move the
Bird to the right of the Stage.

STEP 34
Return to the Main Scene and
place the new Movie clip on a
Key Frame. I used the first Key
Frame but if you had a site built
you could put it on any Key
frame.
Test Movie,
WOW it works!

PAGE 60

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
TIP:

You can use Symbols from on

Flash Movie to another by having
both opened at once and
Switching Libraries within the
Library Palette.

PAGE 61

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010

Adding
So u n d
FLASH
OVERVIEW
In this lesson we will learn how
to add sound to a flash symbol.
Sound is a key design element in
the interactive world. It tell
people that they did just push a
button or that our animation/
environment has more depth.
OPEN DOCUMENT
Open up a new Flash
Document. If you have a recent
copy of the software then you
will want to choose action
script 2. If you have an older
version of the software dont
worry about this as you do not
have that option.
You will need to have your
Property Inspector, Color
Palettes, Library, and Tools
visible. They are located in the
window option on the Main
Menu bar at the top,
!

Interactive Design Lesson

PAGE 62

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010

PAGE 63

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
STEP 1
Open your A through Z web
page. It should now have 26
buttons and 26 animations.
STEP 2
Go to Sounddogs.com or
another sound site and
download two sounds. One for
the button click and the other
for your first animation.
STEP 3
Import them into your Library
by selecting File: Import: Import
to Library.
STEP 4
Open up the button symbol for
Button A.
Add a layer and lock off old
layers.
Create a Keyframe on each
button state.
Select the Over state and drag
your sound file into that
keyframe only.
Notice the Over area has a line
in it. That is the sound.
Save, test and repeat for all
buttons.

PAGE 64

ADDING SOUND TO A BUTTON

EORUM CLARITATEM VESTIG ATIONES

MARCH 8, 2010
ADDING SOUND TO A
STEP 1
BUTTON
Open your A through Z web
page. It should now have 26
buttons and 26 animations.
STEP 2
Go to Sounddogs.com or
another sound site and
download two sounds. One for
the button click and the other
for your first animation. (You
should have done this already)
STEP 3
Import them into your Library
by selecting File: Import: Import
to Library.
STEP 4
Open up a Movie Clip symbol
from your library. It should
contain an Animation.
Add a layer and lock off old
layers and Name it sound.
Drag your sound into the layer
named sound.
Save, Test and repeat process
with new sounds for all
animations.

PAGE 65

ADDING SOUND TO A SOUND TO

AN ANIMATION

INVESTOR NEWSLETTER ISSUE N3

FALL 2008

In ter active Des ign

Interactive Coloring Book

DIRECTIONS
Most of us have seen those
interactive coloring books on the
web. Today you are going to learn
how to make one. I am basing
my tutorial off of one located at
http://www.kirupa.com/
developer/mx2004/
coloringbook.htm

I hope you enjoy this project. All

of the Script is supplied for you.
You have to simply past it in
place. So relax!
Assignment: Do this tutorial 3
times so that it sinks in. Then
Make a Xmas Interactive
Coloring application using what
you have learned.
This is due next Wednesday
November 4th 2009

This tutorial will teach you how to make a coloring bookstyle flash application, in which you can select colors, and
click on certain sections of an image and change its color,
or color it in, in other words.
This tutorial will contain enough information on how to
create an image, split it into pieces, apply code to change
its color, and create a cursor that will display what color is
currently being used.
A nice pretty example of the effect you're trying to
accomplish is shown below applied to an unintentionally
strange looking dude.

How To Accomplish This

First you should go and download the source file for this
tutorial. The ZIP contains the finished file as an FLA and
an SWF, and the start file as a FLA.
Download ZIP
i.

Open the source file that you downloaded above.

ii.

Create a new layer by clicking the

"Insert Layer"
button, or from Insert/Timeline/Layer.

iii. Select the fill that makes up the hair, and Convert it to
a Symbol, using F8, Modify>Convert to Symbol, or by
right-click/control-clicking on it, and selecting Convert
to Symbol.

[ Call it whatever you want, as long as it's a button ]

iv. Continue step iii until you've converted all four fills into
buttons.
v.

Select the button that makes up the hair, and Convert it

to a Symbol, using F8, Modify > Convert to Symbol, or
by right-click/control-clicking on it, and selecting

Convert to Symbol.

vi. Continue step v until you've converted all four fills into
movie clips.
vii. Select all the outlines, copy them with Edit > Copy, or
Ctrl + C, select the top layer, and Paste in Place with
Edit > Paste in Place or Ctrl + Shift + V.

Optional Step
You can group the outlines together if you want, with Ctrl+G,
or Modify > Group.
The next section will talk about adding the first pieces of code
to make it work, and will explain it as well. In this section you
should have separated the outline and fills to separate layers,
and converted each fill to a movie clip containing a button. If
you missed something in this section, you should double
back and read everything over again.

In this section you'll add code to them in order to change

their color.
The Code
We're going to add the code now. Add this code to the first
frame of the top layer:
_root.fillColor = 0xFFFFFF;

Add this code to the BUTTON inside each movie clip:

on (press) {
color = new Color(this);
color.setRGB(_root.fillColor);
delete color;
}

Optional Step
You can group the outlines together if you want, with Ctrl+G,
or Modify > Group.
Now it's on to...
I'm going to show you the code now. The code that we put in
the first frame of the top layer is:
_root.fillColor = 0xFFFFFF;

And all that does is make it so that when you click before
having selected a color, the piece doesn't turn black. If that
piece of code wasn't there, the _root.fillColor variable would
be undeclared, and would default to 0x000000, or black.
The code that you added to each of the fill buttons was:
on (release) {
color = new Color(this);
color.setRGB(_root.fillColor);
delete color;
}

That makes it so that when you click on the fill, it fills with
whatever color _root.fillColor is currently holding, and then
deletes that current state of the variable color, so that
particular instance is not used again.
This section showed you the first part of the code, and the
next section will deal with making buttons, and changing the
color contained in _root.fillColor.
Note
You can change the variables "color", not to be confused
with "Color", to anything you like, as long as all the
references match.
In this section you will make some buttons to change the
_root.fillColor variable, so that you can use some different
colors.
The Buttons
We're going to make the buttons now.
i.

Draw a circle with an outline of one of the gray

shades, and fill it with white.

ii.

Convert it to a Symbol, with F8, Modify>Convert to

Symbol, or by right-click/control-clicking on it and
selecting Convert to Symbol.

iii. Drag as many of these to the stage as you want.

Set each one to have a Tint, of about 70-75%, of the color
you want it to use

The Code
I'm going to show you the code now. The code for the buttons
is:
on (release) {
_root.fillColor = /*someHexCode here, e.g. 0x000000
for black*/
}

And what that does is make it so that if you click on a color

button, it changes _root.fillColor to the hexcode of your
specification, which is then used as a parameter in
color.setRGB when you click on a piece.
The code that you added to each of the fill buttons was:
on (release) {
color = new Color(this);
color.setRGB(_root.fillColor);
delete color;
}

That makes it so that when you click on the fill, it fills with
whatever color _root.fillColor is currently holding, and then
deletes that current state of the variable color, so that
particular instance is not used again.
This section showed you the first part of the code, and the
next section will deal with making buttons, and changing the
color contained in _root.fillColor.

The Cursor
This section is not mandatory for the functioning of the
program, so if you don't want to do this section, you don't
have to. This is simply to make a cursor that will display
what color is being used at the moment.
Making the Cursor
This section will show you how to set up and code your
cursor.
i.

You can do this type of thing in many ways. My way is

making a cursor with a large filled area, with a frame
for each color that I'm going to use in my movie.
Then, I add a piece of code to each color button that
makes it go to the frame that matches the color. You
can do that or you can use setRGB(); command to
change its color. We're going to do the earlier of the
two.

ii.

Draw your cursor with a large filled area, that is easily

noticeable at 100%, and a frame for each color used
in your movie.

iii. Make an empty movie clip and drag an instance into

the gray area off of the stage. Name it something like
"cursor".
iv. Add this code to it:

onClipEvent (enterFrame) {
_root.//instance name of your cursor._x =
_root._xmouse;
_root.//instance name of your cursor._y =

v.

Now, add this code to each color button, inside the on

(release) handler:

_root.fillColor = /*hexcode of the color on this

button*/

I certainly hope that you learned something from this tutorial,

ad I hope you can use what you learned elsewhere. I hope
you had fun making the stuff in this tutorial, because I had a
lot of fun making it. This is my first tutorial, hope you had fun.

INTERACTIVE DESIGN
CRISAFULLI

PROFESSOR

Flash Tutorial: Creating a Web Link

There are many ways to create a web link in flash. This tutorial covers two of the most common and
useful ways. The first way I will cover will be using your property inspector while the second way we
will use the Behaviors window.

Property Inspector Linking

Part 1
1. Create a new layer
2. Select the text tool
3. Type the on the stage

Part 2

1. Select Arrow Tool

2. Select the text (Link to Site)
3. Look at Property Bar
4.Find an area
5. Fill in with site address
(ex: http://www.tonycrisafulli.com
or email link
(ex:mailto:acrisafulli@utpa.edu)

PAGE 74

INTERACTIVE DESIGN
CRISAFULLI

PROFESSOR

Behavior Linking
Part 1
1. Create a New Symbol
2. Select Graphic
3. Name it: Link Graphic

Part 2
1. Create a simple graphic
2. Check to see it is in the Library
3. Select: Scene to return to the
Main Scene

PAGE 75

INTERACTIVE DESIGN
CRISAFULLI

PROFESSOR

Part 3
1. Select Arrow Tool

2. Drag symbol link graphic

from Library to stage.

Part 4
1. Select Window: Behaviors

Part 5
1. Behaviors Window will pop up.

PAGE 76

INTERACTIVE DESIGN
CRISAFULLI

PROFESSOR

Part 6
1. Select the graphic that you dragged on the stage.
2. Select (PLUS SYMBOL
3. Select Web
4. Select Go to Web Page

)on the Behaviors Window

Part 7
1. Select Type in Web Link
location
2. Select Open in blank
3. Select OK
4. Save and test .

PAGE 77

INTERACTIVE DESIGN
CRISAFULLI

F
L
A
S
H
T
U

PROFESSOR

Notes:

1. Behavior Linking can be done with a graphic, a button or a movie clip symbol.
But it can not be done without making something a symbol first.
2. You can crete a mailto link in the Behaviors Window by typing
mailto:name@xxx.com in stead of http://sitename.com
3. Google Chrome can act strange sometimes when you are making
mailto:name@xxx.com links. If this happens load the site then test.

PAGE 78

T
O
R
I
A
L
1
Interactive Design
This tutorial will reaffirm the skills we learned in the in class section of Interactive
Design. It will cover: Symbols: Movie Clips, Buttons, and Graph- ics as well as simple
scripting and building your first Flash Site.
FAll 2009: Crisafulli
INTRODUCTION:
Below are the instructions for building your first Flash Site by your self. You are to
build a site with 10 pages. Each page will have a graphic that tells the user what
page they are on. All pages will include 10 buttons so you can navigate to any other
page.
STEP 1: CREATE A NEW FLASH DOCUMENT
A. Open Flash. B. Click the Action Script
STEP 2: CREATE 3 LAYERS IN TIMELINE
A. Name the bottom layer - Buttons Layer. B. Name the middle layer - Graphics Layer.
C. Name the top layer - Actions Layer.
STEP 3: CREATE THE BUTTONS
A. Select > Insert (main menu) B. Select > Symbol C. Select > Button D. Name it >
Button Master E. Click > OK
A. Crisafulli 2009[1]
NOTE: YOUR MASTER BUTTON SYMBOL IS NOW IN YOUR LIBRARY
A. If you can not see your Library it is accessible under Window in the main menu.
STEP 4: CREATE A BUTTON 2
A. The main Flash window will go away and you will see this.
B. Create a graphic that looks like a button (The red play back head should be over the
UP keyframe.)
[2]
PAGE 79

C. Click on the empty Over KeyFrame and select F6 (This will copy the graphic into the
Over KeyFrame.)
D. Repeat this process for the Down KeyFrame
E. Select the Layer Key Frame and Change the color of the button in this state. (This will
simulate the button lighting up when you roll over it.)
[3]
F. Name this layer Graphics Layer G. Create a new Layer and name it Text, H. Put a 1 in
the Up Keyframe and F6 it into the Over and Down states (Remember to save your
document.)
STEP 5: CREATE BUTTONS 1-10
A. Go to your Library and Select the Button Master B. Duplicate it 10 times C. ReName
each Duplicate (Example: Button 1, Button 2 etc.) D. Go in to each new button and
change the text to correspond to the proper button (Example: Change the 1 to 2 for
Button 2)
[4]
STEP 6: ADDING BUTTONS TO YOUR STAGE
A. Click on the Scene 1 Icon at the top of your document to switch out of Button mode
and back to the main scene.
B. Drag your buttons 1-10 onto the stage and arrange as desired. (Lock off all layers that
you are not using.) (Have the 1st KeyFrame in the Button Layer selected before you start
dragging)
[5]
C. Click on Frame 10 in the Buttons Layer and push F5 on the keyboard. This will show
the buttons on all 10 pages.
D. Lock Buttons Layer and unlock Graphics Layer and select the first key frame. (Hope
you are saving)
STEP 7: CREATE YOUR GRAPHICS 1 -10
A. Select > Insert (main menu) B. Select > Symbol C. Select > Graphic D. Name it >
Graphic 1
E. Click > OK F. Make a 1 G. Repeat until you have 1 through 10 graphics done.
[6]
STEP 8: PUTTING YOU GRAPHICS ON THE TIMELINE
A. Click on the Scene 1 Icon at the top of your document to switch out of Graphic mode
and back to the main scene.
B. Drag graphic 1 into frame 1 of the graphic layer on the main timeline. Make sure that
you have highlighted the frame and that it the layer is unlocked.
[7]

PAGE 80

C. Select frame 2 of the Graphic Layer timeline and press F6. This will create a
duplicate keyframe.
D. Click on the Graphic graphic 1 in frame 2. Then go to your Property Inspector
(located in Window if it is not up) and select Swap.
E. Select Graphic 2 then OK
[8]
F. Repeat Process until you have put a corresponding graphic on each page. Ten in total.
F. Lock off the Graphics Layer and unlock the actions layer.
STEP 9: PREPARING TO PROGRAM
A. Select Frame 2 of the Actions Layer and press F6. B. Repeat till frame 10 of the
actions layer C. Select frame 1 of the actions layer
[9]
STEP 9: PROGRAMING/SCRIPTING THE PLAYBACK HEAD
The red playback head in the timeline functions as like a quicktime movie player. I will
not stop on each page until we tell it to do so, Therefore we have to put stops in each
frame of the Actions Layer..
A. Select Window from the main menu bar B. Selections Actions C. Select script assist
button
Above is before you select the Script Assist button
Above is after you select the Script Assist button
[10]
C. If you do not have the Global Functions folder opened than do so, You will need to
have the subfolder Timeline Control and Movie Clip Control opened. Scroll down to find.
D. Select Frame 1 of the Actions Layer, then double click the stop action under the
Timeline Control subfolder.
[11]
E. Repeat until all 10 frames have a stop in them. (SAVE)
F. Lock the actions layer and the graphic layer and unlock the buttons layer.
STEP 10: PROGRAMING/SCRIPTING THE BUTTONS
A. Select Button 1 B. Open the Actions Palate that you were just using. Main Menu >
Window > Actions (make sure it is still in Script Assist) C. Double Click on in the
Movie Clip Control sub folder.
[12]
D. (THEN) Double Click goto in the Timeline Control sub folder.
E. Select a new button and repeat for each button. Replace the 1 in the Frame field to
match the button. Button 2 should have a 2 in the frame field, 3 should have a 3 in the
frame field and etc.

PAGE 81

The Frame field tells the playback head were to move to when the button is clicked while
the stopin the actions layer tell it to stop there.
STEP 11: TEST THE WEB PAGE:
A. Select: Control on the Main Menu bare then select Test movie. (Save)
STEP 12: REPLACE THE GRAPHICS WITH ONES YOU HAVE DESIGNED
A. Redesign the graphics on each page and replace the simple graphic we did for 1 -10.
The Site is due Monday of Sept.14th and a test on building this will be given in class on
Wed Sept16th. Working Site on Monday is 10% of total grade. Wendsday Test is 15% of
total grade.
[13]

PAGE 82