Download - Interactive Design 1- Lecture Handouts
-
7/24/2019 Interactive Design 1- Lecture Handouts
1/82
Making a
Button
Interactive Design LessonPHOTOSHOPOVERVIEW
The following lesson will showyou 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 itwith ease. When you are finished
try to find other ideas that you
can apply these techniques.
STEP 1Open up a new Photoshop
document. A window will appear.
Set the window to the following
values. (1200 pixels width and
height) (resolution 300)
STEP 2Create a new layer and name it
1100
-
7/24/2019 Interactive Design 1- Lecture Handouts
2/82
STEP 3
Select a Elliptical Marquee Tool.
STEP 4Change the Style to fixed size
for the Elliptical Marquee and set
the Width and Height to 1100
px.
-
7/24/2019 Interactive Design 1- Lecture Handouts
3/82
STEP 5Make a 1100 px Ellipse and fill it
with black.
STEP 6It needs to be on the new layer
named 1100.
-
7/24/2019 Interactive Design 1- Lecture Handouts
4/82
STEP 7Make a layer and name it 1000.
STEP 8Change the Style: Fixed Size to
1000 px for both the Width and
the Height.
STEP 9
Make a 1000 px Ellipse and fill itwith black.
-
7/24/2019 Interactive Design 1- Lecture Handouts
5/82
STEP 10Make a layer and name it 900.
STEP 11Change the Style: Fixed Size to
900 px for both the Width and
the Height.
STEP 12
Make a 900 px Ellipse and fill itwith black.
-
7/24/2019 Interactive Design 1- Lecture Handouts
6/82
STEP 13Duplicate layer 900 and rename
it 900 red.
STEP 14Change the color from black to
red.
-
7/24/2019 Interactive Design 1- Lecture Handouts
7/82
STEP 15Apply a Gaussian Blur filter of 10
to the red shape. This will
create an alpha feather on the
edge of the shape and allow thelayer 900 to seep through. This
will give the illusion of depth and
curvature.
STEP 16Apply a Render: Lighting Effect
filter to the red shape. Use thetangents to move and adjust the
light source.
-
7/24/2019 Interactive Design 1- Lecture Handouts
8/82
STEP 17Apply a Render: Len Flare filter.
STEP 18Make sure that the highlight is
located in the proper location.
-
7/24/2019 Interactive Design 1- Lecture Handouts
9/82
STEP 19Select the 1000 layer.
STEP 20Choose the Magic Wand tool.
-
7/24/2019 Interactive Design 1- Lecture Handouts
10/82
STEP 21Select the white empty area.
STEP 22Go 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.
-
7/24/2019 Interactive Design 1- Lecture Handouts
11/82
STEP 25Observe
STEP 26Select the Dodge Tool
-
7/24/2019 Interactive Design 1- Lecture Handouts
12/82
STEP 25Choose a large brush.
STEP 26Select Range: Shadow
STEP 27Select Exposure and reduce the
range to between 10 and 20
STEP 28In a clock wise direction sweep
once around the 1000 pixel
Black Shape.
STEP 29Then Dodge the areas in the
Black Shape that are nearest to
the darker areas in the Red
Shape.
-
7/24/2019 Interactive Design 1- Lecture Handouts
13/82
STEP 30Repeat the process for the Black
Shape on the 1100 layer
STEP 31Dump black paint in to the
background layer.
-
7/24/2019 Interactive Design 1- Lecture Handouts
14/82
STEP 32Add a Layer between 1100 and
1000 and name it Edge.
STEP 33Make 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.
-
7/24/2019 Interactive Design 1- Lecture Handouts
15/82
STEP 34Change the foreground color to
white.
STEP 35Select Edit on the main menu
bar, then select Stroke.
-
7/24/2019 Interactive Design 1- Lecture Handouts
16/82
STEP 36
Set the Width at 3 px and the
Location to Center.
STEP 37Move the Edge Layer up. So it is
between layer 1000 and 900.
-
7/24/2019 Interactive Design 1- Lecture Handouts
17/82
STEP 38Use the Lasso to de-select the
Marque.
STEP 39Select your Eraser Tool and turn
down the Opacity.
-
7/24/2019 Interactive Design 1- Lecture Handouts
18/82
STEP 40Erase parts to give the edge a
natural shine.
STEP 41Select 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.
-
7/24/2019 Interactive Design 1- Lecture Handouts
19/82
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 43Duplicate the 900 Red layer and
rename it.
-
7/24/2019 Interactive Design 1- Lecture Handouts
20/82
STEP 44Select Image: Adjustments: Hue/
Saturation and change the hue
to green.
STEP 45Turn off 900 red layer.
-
7/24/2019 Interactive Design 1- Lecture Handouts
21/82
STEP 46Now 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.
-
7/24/2019 Interactive Design 1- Lecture Handouts
22/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 22
When you start a new Flash Document the program will automatically create your firsscene and title it Scene 1.
Flash Tutorial: Creating and Linking Sce
Creating a Scene
Part 1 "Open New Do
1. Open Flash
2. Create a New Flash D"Action Script 2#
3. Notice: Flash Makes automatically for you
But did you know that you can create more scenes? Flash document often have multipscene 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 If they are big files this can take more time than a person is willing to wait. If you break
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 organize
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 inediting process.
4.Choice selection and timeline length: The timeline can get very long and ine$cientwithout using Scenes. This is especially problematic when you invite the viewer to makechoices in narrative structures.
-
7/24/2019 Interactive Design 1- Lecture Handouts
23/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 23
Part 2 "Create a Button#
1. Select Insert
2. Select New Symbol
3. Select Button4.Name Button: sample button
5. Select OK
Notice: You are now in ButtoMaking mode rather than Scmode. When we are done mathe button you will select
to return to the Scene.
Dont return to the Scene yet
-
7/24/2019 Interactive Design 1- Lecture Handouts
24/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 24
Part 3 "Create a B
1. Create a Circle Up key frame
2. Select the Overand Press F6 to iframe.
3. Select the Downframe and Press
a key frame.
4. Select the Overand change the ccircle. "This will button light up wroll over it.#
-
7/24/2019 Interactive Design 1- Lecture Handouts
25/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 25
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 LayerText Layer
2. Select the Buttons Layer
3. Drag Sample Button from the Scene 1 Stage
-
7/24/2019 Interactive Design 1- Lecture Handouts
26/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 26
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 unlockActions Layer
2. Select the Window > Actions
-
7/24/2019 Interactive Design 1- Lecture Handouts
27/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 27
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 theActions Layer. This mean you have anaction in that key frame.
-
7/24/2019 Interactive Design 1- Lecture Handouts
28/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 28
Part 10 "Creating Scene 2#
1. Select Insert from the Main Menu Bar.
2. Select Scene from the Drop Down Men
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 thcan use.
Important: To toggle betwScene 1 and Scene 2
1. Select Window
2. Select Scene
3. Click on the Scene you deswork on.
-
7/24/2019 Interactive Design 1- Lecture Handouts
29/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 29
Part 11 "Preparing Scene 2#
1. Make two more layers in Sceneand name all three layersaccordingly.
2. Switch to Scene 1 and copy the
Part 12 "Preparing Scene 2#
1. Select Scene 2 to return2. Select the 1st key frame in the
Buttons Layer.
3. Select Edit> Paste in Place.This puts the Button in thesame location as the one onScene 1
-
7/24/2019 Interactive Design 1- Lecture Handouts
30/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 30
Part 13 "Preparing Scene 2#
1. Switch to Scene 1 and copy the Text from the stage. Make sure you unlock the l
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 Sc
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 > Actions3. Script Assistant should still be
on.
4.Double click: Stop in theTimeline Folder.
Now there should be an a in thefirst keyframe of the Actions Layer in
S
-
7/24/2019 Interactive Design 1- Lecture Handouts
31/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 31
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. Save8.Switch to Scene 2
9.Select the Button
10.Select the Actions Palette
11.Select goto in the Timeline Folder
12. Select Scene 1 in the Scene Menu
S
-
7/24/2019 Interactive Design 1- Lecture Handouts
32/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 32
Part 16 "Linking Scene 1 and Scene 2 #
1.Test Flash File.
Now you have learn how tolink two scene. You can linkas many scenes as you want.I hope this was fun. Isuggest that you do this
tutorial 4 or five times inorder to cement it into yourprocess.
-
7/24/2019 Interactive Design 1- Lecture Handouts
33/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 33
FTPingThere are a lot of
programs that allow you transfer your web site filethe web space that youpurchased. I think theeasiest ones are Fetch an
Transmit. When you tra
a web site to the given foon the server it must havfollowing files.
1. Index.html
2. name.swf
3. What ever movies used
4.What ever PDFs yhave included.
Professor Cri
How to Post a Web SitUsing a FTP ProgramFTP: File Transfer Protocol
Before you can upload your file from flash you first have to publishthe file. We will first go through this simple process and then proceedto uploading
Publishing in Flash
1. Part 1
2. Select File
3. Select Publish Settings
-
7/24/2019 Interactive Design 1- Lecture Handouts
34/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 34
1. Make a new folder ondesktop and name it so itrelates to the project
1. Make sure that Flash HTML are checked.
2. Select the Folder Iconto each and redirect each me saved in the folder youmade.
3. Note: Flash does not name the HTML file with.html extension on the M
You can either enter it hefix it later.
4. Select Publish afterredirecting files.
5. Select OK
Note: Dont worry abou
the other things on this winat the present time. I will eit as your need to know it la
-
7/24/2019 Interactive Design 1- Lecture Handouts
35/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 35
1. Open the folder to chand see if everything it th
You should have two files, a .html file and a .swf file. Both will me needed to be transfer toyour web space. If you do not have a .html extension on the one file, then add it yourself. Youneed this extension for the site to work on the internet.
Posting your Flash Site: FTPing
http://www.apple.com/downloads/macosx/internet_utilities/transmit.html
We are going to use Transmit to post. You can get a copy of the application from apple or theTransmit site. The cost for this software is about 3o dollars. It is totally worth it. After you useit you will wonder how you ever got along with out it.
About TransmitA next&generation FTP and SFTP client for Mac OS X. Withits famously clean drag and drop interface, and powerfulfeatures set, Transmit makes maintaining files and foldersthrough the Internet as easy as, well, the Mac!
http://www.apple.com/downloads/macosx/internet_utilities/transmit.htmlhttp://www.apple.com/downloads/macosx/internet_utilities/transmit.html -
7/24/2019 Interactive Design 1- Lecture Handouts
36/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 36
Posting your Flash Site: FTPing
Your Web Space provider will supply you with the following information the you need to fillin to the access fields.
1. Server "The Server is either the Name of the Computer or in some cases it they will makeit 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.
-
7/24/2019 Interactive Design 1- Lecture Handouts
37/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 37
This will bring you to your folder. My folder it called Public_html, but yours may be yourname or default or what ever. Because I use this folder I add my own folders, therefore yoursmight look di%erent.
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.
-
7/24/2019 Interactive Design 1- Lecture Handouts
38/82
PROFESSOR CRISAFULLI PRELOADERTUTORIAL
PAGE 38
Assignment
Do this tutorial then3 different pre-loadeyour personal site.
This means that youcreate 3 site shells.
(A Site Shell is a sitebuttons and pages binformation such as and text. I block outtext and image areaboxes but not alway
Start
1.Make 2 layers
2.Name them: Preloand Action
3.If you are making Preloader after thealready started thewill need to make the beginning of thby adding frames. this you: select allframes in your moright click > selectFrame.
4.Make 6 new frame
Clear the informatthe first 5 frame.
5.Make a key frame frame 1 and 2 on tactions layer. (seeto left.)
Interactive Desig
Making a Flash Pre&loaderUnlike HTML files Flash
requires the entire site ofanimation to load before it is
viewable to the public. This lag&time can confuse your viewerinto thinking that something is
wrong with the site or animation.A pre&loader will identify to the
viewer that your site is indeedcoming but it will take a littlelonger. If your pre&loader isanimated simply, then the viewer
will not fully realize the amount oftime that has passed. Even
seconds count on the Web.
-
7/24/2019 Interactive Design 1- Lecture Handouts
39/82
PROFESSOR CRISAFULLI PRELOADERTUTORIAL
PAGE 39
6. Go to the first framthe Preloader layeplace a text displa
"Loading" on it.7. Open the Actions
8. Go to the first framthe Preloader layecopy this script bethe actions panel. small A will appeafirst frame of thePreloader layer to that a script is atta
ifFrameLoaded ("end
gotoAndPlay ("st
}
Note: This actionscri
checks if the last fra
your movie (that you
label "end") is loaded
then only starts playflash file at the start
frame that you will la
"start". Thus this act
script decides wheth
continue the preload
or to break free and
playing the movie.
To Label a Frame:
1.Select a frame.
2.Go to your Properties Inspector
3.Enter the name you wish to call
the frame.
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.
-
7/24/2019 Interactive Design 1- Lecture Handouts
40/82
PROFESSOR CRISAFULLI PRELOADERTUTORIAL
PAGE 40
Preloader Loop: Now we need to make a loop that executes till the last frame is loaded. To m
use of a very basic animation we will display three dots after the loading text to show that loa
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 D
3. F6 frame 4 of the actions layer to copy frame 3 into it. Add another dot. (now you have 3 D
4.See example below.
5.
-
7/24/2019 Interactive Design 1- Lecture Handouts
41/82
PAGE 41
1. Now we need a frame to return to the first frame as the condition is being checked
So, on the actions layer and give the following action script to the Fifth Frame. We j
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 w
be displayed in your movie starts from the 6th frame and that you label the last fram
your completed movie as "end".
-
7/24/2019 Interactive Design 1- Lecture Handouts
42/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
Animation
1
Interactive Design Lesson
PAGE 42
FLASH
OVERVIEWIn 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 nothave 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,
-
7/24/2019 Interactive Design 1- Lecture Handouts
43/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 43
-
7/24/2019 Interactive Design 1- Lecture Handouts
44/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 44
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.
-
7/24/2019 Interactive Design 1- Lecture Handouts
45/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 45
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.
-
7/24/2019 Interactive Design 1- Lecture Handouts
46/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 46
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
-
7/24/2019 Interactive Design 1- Lecture Handouts
47/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 47
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
-
7/24/2019 Interactive Design 1- Lecture Handouts
48/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 48
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
Click here to access menu. Duplicate is located here,
-
7/24/2019 Interactive Design 1- Lecture Handouts
49/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 49
-
7/24/2019 Interactive Design 1- Lecture Handouts
50/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 50
STEP 10Select Insert on main menu
and then Select New Symbol.
STEP 11Name the Symbol fly and
then Select: Type Movie Clip.
Select OK
-
7/24/2019 Interactive Design 1- Lecture Handouts
51/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 51
STEP 12Check to see that you are now
in the Movie Clip window.
STEP 13Select Bird with Wings Up
from the Library and drag it
onto the stage of Movie Clip
fly.
-
7/24/2019 Interactive Design 1- Lecture Handouts
52/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 52
STEP 14Select frame 4 of the Time Line
and press F6.
STEP 15Click 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
-
7/24/2019 Interactive Design 1- Lecture Handouts
53/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 53
STEP 16Select the Symbol Bird with
Wings Midway.
Press OK
STEP 17Notice 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.
-
7/24/2019 Interactive Design 1- Lecture Handouts
54/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 54
STEP 18Select frame 7 of the Time Line
and press F6.
STEP 19Click 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 20Select the Symbol Bird with
Wings Down
Press OK
-
7/24/2019 Interactive Design 1- Lecture Handouts
55/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 55
STEP 21Select frame 10 of the Time Line
and press F6.
STEP 22Click 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 23Select the Symbol Bird with
Wings Midway.
Press OK
-
7/24/2019 Interactive Design 1- Lecture Handouts
56/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 56
STEP 24Select Frame 12 and press F5.
Notice that this time we
selected F5 rather than F6. F6would have worked as well but
since we did not need another
Key Frame we used F5 to cap
the animation cycle.
STEP 25Turn 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.
-
7/24/2019 Interactive Design 1- Lecture Handouts
57/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 57
STEP 26Test Animation by Selecting
STEP 27A 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.
-
7/24/2019 Interactive Design 1- Lecture Handouts
58/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 58
MAKING THE BIRD FLY
ACROSS THE STAGE.
STEP 28Make 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
-
7/24/2019 Interactive Design 1- Lecture Handouts
59/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 59
STEP 29Select 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 30Select the First KeyFrame of the
Time Line.
STEP 31Go to your Property Inspector
and Select Tweening > Motion
STEP 32Notice 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 between 1 and 48 to
create the illusion that the bird
is moving across the Stage.
-
7/24/2019 Interactive Design 1- Lecture Handouts
60/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 60
STEP 33Select Frame 48 and move the
Bird to the right of the Stage.
STEP 34Return to the Main Scene and
place the new Movie clip on a
Key Frame. I used the first KeyFrame but if you had a site built
you could put it on any Key
frame.
Test Movie,
WOW it works!
-
7/24/2019 Interactive Design 1- Lecture Handouts
61/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 61
TIP:
You can use Symbols from on
Flash Movie to another by havingboth opened at once and
Switching Libraries within the
Library Palette.
-
7/24/2019 Interactive Design 1- Lecture Handouts
62/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
Adding
Sound
Interactive Design Lesson
PAGE 62
FLASH
OVERVIEWIn 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 recentcopy 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 thewindow option on the Main
Menu bar at the top,
-
7/24/2019 Interactive Design 1- Lecture Handouts
63/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 63
-
7/24/2019 Interactive Design 1- Lecture Handouts
64/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
PAGE 64
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 oldlayers.
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.
ADDING SOUND TO A BUTT
-
7/24/2019 Interactive Design 1- Lecture Handouts
65/82
EORUM CLARITATEM VESTIG ATIONESMARCH 8, 2010
ADDING SOUND TO A
BUTTON
PAGE 65
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. (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.
ADDING SOUND TO A SOUND
AN ANIMATION
-
7/24/2019 Interactive Design 1- Lecture Handouts
66/82
Interac t ive Design
Interactive Coloring Book
DIRECTIONS
Most of us have seen thoseinteractive 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. Allof 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
INVESTOR NEWSLETTER ISSUE N3 FALL
This tutorial will teach you how to make a coloring b
style flash application, in which you can select colo
click on certain sections of an image and change its
or color it in, in other words.
This tutorial will contain enough information on how
create an image, split it into pieces, apply code to c
its color, and create a cursor that will display what c
currently being used.
A nice pretty example of the effect you're trying to
accomplish is shown below applied to an unintentiostrange looking dude.
http://www.kirupa.com/developer/mx2004/coloringbook.htmhttp://www.kirupa.com/developer/mx2004/coloringbook.htm -
7/24/2019 Interactive Design 1- Lecture Handouts
67/82
How To Accomplish This
First you should go and download the source file f
tutorial. The ZIP contains the finished file as an FL
an SWF, and the start file as a FLA.
Download ZIP
i. Open the source file that you downloaded abo
ii. Create a new layer by clicking the "Insert La
button, or from Insert/Timeline/Layer.
iii. Select the fill that makes up the hair, and Conva Symbol, using F8, Modify>Convert to Symbo
right-click/control-clicking on it, and selecting C
to Symbol.
[ Call it whatever you want, as long as it's a button ]
iv. Continue step iii until you've converted all four
buttons.
v. Select the button that makes up the hair, and C
to a Symbol, using F8, Modify > Convert to Sy
by right-click/control-clicking on it, and selectin
Convert to Symbol.
http://www.kirupa.com/developer/mx2004/code/coloringprog.ziphttp://www.kirupa.com/developer/mx2004/code/coloringprog.zip -
7/24/2019 Interactive Design 1- Lecture Handouts
68/82
vi. Continue step v until you've converted all four
movie clips.
vii. Select all the outlines, copy them with Edit > CCtrl + C, select the top layer, and Paste in Plac
Edit > Paste in Place or Ctrl + Shift + V.
Optional Step
You can group the outlines together if you want, with
or Modify > Group.The next section will talk about adding the first piece
to make it work, and will explain it as well. In this sec
should have separated the outline and fills to separa
and converted each fill to a movie clip containing a b
you missed something in this section, you should do
back and read everything over again.
-
7/24/2019 Interactive Design 1- Lecture Handouts
69/82
In this section you'll add code to them in order to ch
their color.
The Code
We're going to add the code now. Add this code to tframe of the top layer:
_root.fillColor=0xFFFFFF;
Add this code to the BUTTON inside each movie cl
on(press){
color=newColor(this);
color.setRGB(_root.fillColor);
deletecolor;
}
Optional Step
You can group the outlines together if you want, wit
or Modify > Group.
Now it's on to...
I'm going to show you the code now. The code that the first frame of the top layer is:
_root.fillColor=0xFFFFFF;
And all that does is make it so that when you click b
having selected a color, the piece doesn't turn black
piece of code wasn't there, the _root.fillColor variab
be undeclared, and would default to 0x000000, or b
The code that you added to each of the fill buttons w
on(release){
color=newColor(this);
color.setRGB(_root.fillColor);
deletecolor;
}
-
7/24/2019 Interactive Design 1- Lecture Handouts
70/82
That makes it so that when you click on the fill, it fil
whatever color _root.fillColor is currently holding, a
deletes that current state of the variable color, so thparticular instance is not used again.
This section showed you the first part of the code, a
next section will deal with making buttons, and cha
color contained in _root.fillColor.
Note
You can change the variables "color", not to be conwith "Color", to anything you like, as long as all the
references match.
In this section you will make some buttons to chang
_root.fillColor variable, so that you can use some d
colors.
The Buttons
We're going to make the buttons now.
i. Draw a circle with an outline of one of the gra
shades, and fill it with white.
ii. Convert it to a Symbol, with F8, Modify>Conv
Symbol, or by right-click/control-clicking on it
selecting Convert to Symbol.
iii. Drag as many of these to the stage as you w
Set each one to have a Tint, of about 70-75%, of th
you want it to use
-
7/24/2019 Interactive Design 1- Lecture Handouts
71/82
The Code
I'm going to show you the code now. The code for the
is:
on(release){
_root.fillColor=/*someHexCode here, e.g. 0x0
for black*/
}
And what that does is make it so that if you click on a
button, it changes _root.fillColor to the hexcode of yo
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 wa
on(release){
color=newColor(this);
color.setRGB(_root.fillColor);
deletecolor;
}
That makes it so that when you click on the fill, it fills
whatever color _root.fillColor is currently holding, and
deletes that current state of the variable color, so tha
particular instance is not used again.
This section showed you the first part of the code, an
next section will deal with making buttons, and chang
color contained in _root.fillColor.
-
7/24/2019 Interactive Design 1- Lecture Handouts
72/82
The CursorThis section is not mandatory for the functioning of t
program, so if you don't want to do this section, you
have to. This is simply to make a cursor that will dis
what color is being used at the moment.
Making the Cursor
This section will show you how to set up and code y
cursor.
i. You can do this type of thing in many ways. M
making a cursor with a large filled area, with a
for each color that I'm going to use in my mov
Then, I add a piece of code to each color butt
makes it go to the frame that matches the colo
can do that or you can use setRGB(); comma
change its color. We're going to do the earlier
two.
ii. Draw your cursor with a large filled area, that
noticeable at 100%, and a frame for each col
in your movie.
iii. Make an empty movie clip and drag an instan
the gray area off of the stage. Name it someth
"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
-
7/24/2019 Interactive Design 1- Lecture Handouts
73/82
v. Now, add this code to each color button, inside
(release) handler:
_root.fillColor=/*hexcode of the colorbutton*/
I certainly hope that you learned something from this
ad I hope you can use what you learned elsewhere.
you had fun making the stuff in this tutorial, because
lot of fun making it. This is my first tutorial, hope you
-
7/24/2019 Interactive Design 1- Lecture Handouts
74/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 74
There are many ways to create a web link in flash. This tutorial covers two of the most commuseful ways. The first way I will cover will be using your property inspector while the second way
will use the Behaviors window.
Flash Tutorial: Creating a Web Link
Property Inspector Linking
Part 1
1. Create a new layer
2. Select the text tool3. Type the on the stage
Part 2
1. Select Arrow Tool
2. Select the text "Link 3. Look at Property Bar
4.Find an area5. Fill in with site addre"ex: http://www.tonycris
or email link(ex:mailto:acrisafulli@ut
mailto://[email protected]://www.tonycrisafulli.com/mailto://[email protected]://www.tonycrisafulli.com/ -
7/24/2019 Interactive Design 1- Lecture Handouts
75/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 75
Behavior Linking
Part 1
1. Create a New Symbol
2. Select Graphic
3. Name it: Link Graphic
Part 2
1. Create a simple graph
2. Check to see it is in the
3. Select: Scene to return tMain Scene
-
7/24/2019 Interactive Design 1- Lecture Handouts
76/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 76
Part 3
1. Select Arrow To
2. Drag symbol linfrom Library to sta
Part 4
1. Select Window: Behaviors
Part 5
1. Behaviors Window will pop up.
-
7/24/2019 Interactive Design 1- Lecture Handouts
77/82
INTERACTIVE DESIGNCRISAFULLI
PAGE 77
Part 6
1. Select the graphic that you dragged on the stage.
2. Select "PLUS SYMBOL #on the Behaviors Window
3. Select Web4. Select Go to Web Page
Part 7
1. Select Type in Wlocation
2. Select Open in
3. Select OK
4. Save and test .
-
7/24/2019 Interactive Design 1- Lecture Handouts
78/82
INTERACTIVE DESIGNCRISAFULLI
F
L
AS
HT
UPAGE 78
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 typingmailto:[email protected] in stead of http://sitename.com
3. Google Chrome can act strange sometimes when you are makingmailto:[email protected] links. If this happens load the site then test.
mailto:[email protected]://sitename.com/mailto:[email protected]:[email protected]://sitename.com/mailto:[email protected] -
7/24/2019 Interactive Design 1- Lecture Handouts
79/82
TO
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 ScriptSTEP 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 2A. 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
-
7/24/2019 Interactive Design 1- Lecture Handouts
80/82
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
-
7/24/2019 Interactive Design 1- Lecture Handouts
81/82
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 eachframe 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 theTimeline 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
-
7/24/2019 Interactive Design 1- Lecture Handouts
82/82
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 DESIGNEDA. 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]