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


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.


3/82

STEP 5Make a 1100 px Ellipse and fill it

with black.

STEP 6It needs to be on the new layer

named 1100.


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.


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.


6/82

STEP 13Duplicate layer 900 and rename

it 900 red.

STEP 14Change the color from black to

red.


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.


8/82

STEP 17Apply a Render: Len Flare filter.

STEP 18Make sure that the highlight is

located in the proper location.


9/82

STEP 19Select the 1000 layer.

STEP 20Choose the Magic Wand tool.


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.


11/82

STEP 25Observe

STEP 26Select the Dodge Tool


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.


13/82

STEP 30Repeat the process for the Black

Shape on the 1100 layer

STEP 31Dump black paint in to the

background layer.


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.


15/82

STEP 34Change the foreground color to

white.

STEP 35Select Edit on the main menu

bar, then select Stroke.


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.


17/82

STEP 38Use the Lasso to de-select the

Marque.

STEP 39Select your Eraser Tool and turn

down the Opacity.


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.


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.


20/82

STEP 44Select Image: Adjustments: Hue/

Saturation and change the hue

to green.

STEP 45Turn off 900 red layer.


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.


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.


23/82


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


24/82


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.#


25/82


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


26/82


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


27/82


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.


28/82


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.


29/82


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


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


30/82


PAGE 30


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.


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


31/82


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


32/82


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.


33/82


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


34/82


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


35/82


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


36/82


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.


37/82


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.


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.


39/82


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.


40/82


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.


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".


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,


43/82


PAGE 43


44/82


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.


45/82


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.


46/82


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


47/82


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


48/82


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,


49/82


PAGE 49


50/82


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


51/82


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.


52/82


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


53/82


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.


54/82


PAGE 54


and press F6.


Wings Midway that is on the

stage. (Make sure that Frame 7 is

selected.)


and Select Swap


Wings Down

Press OK


55/82


PAGE 55


and press F6.


Wings Down that is on the

stage. (Make sure that Frame 10

is selected.)


and Select Swap


Wings Midway.

Press OK


56/82


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.


57/82


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.


58/82


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


59/82


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.


60/82


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!


61/82


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.


62/82


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,


63/82


PAGE 63


64/82


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


65/82


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


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


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


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.


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){



deletecolor;

}


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


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){



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.


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


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


74/82


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/


75/82


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


76/82


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.


77/82


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 .


78/82


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]


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


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


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


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]

Interactive Design 1- Lecture Handouts

Documents

Transcript of Interactive Design 1- Lecture Handouts