© Anselm SpoerriDigital Media Production

Digital MediaProduction

Digital Media Production

Anselm Spoerri PhD (MIT)SC&I @ Rutgers University

aspoerri@rutgers.eduanselm.spoerri@gmail.com

© Anselm SpoerriDigital Media Production

Lecture 12 - Overview

Flash– Flash Templates provided by Knight Digital Media Center– Quick Overview and How to Customize– Save Video as .flv to play inside Flash Template

– Build Flash Website with Animated Navigation Structure– Decide on Overall Navigation Layout, Import Images & Organize Assets– Create Animations for Navigation Buttons– Create "UP" Buttons– Create "Down" Buttons– Make Button Instance Interactive– Create Scenes and Swap in “Down” Button

– ActionScript 2.0– Done So Far and Build Upon– Create Function– Create “Button” using ActionScript 2.0– Name Keyframes– Create “Disjointed Rollover” using ActionScript 2.0

Lectures – Week 12 Contenthttp://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures.html#week12

© Anselm SpoerriDigital Media Production

Flash Templates – Knight Digital Media Center

http://multimedia.journalism.berkeley.edu/tutorials/using-flash-templates/

Detailed Instructions provided for how to customize

Create SAME Image Dimensions as in Template– Example: 107x193 for front navigation images

Swap Your Images in place of template images– Double-click image in library

– Click on “Import” to import your photo in its place

– Click “Update”

Edit Text in some case you need to edit it inside symbol

Specify FLV Video to show– Specify contentPath in FLVPlayback instance

© Anselm SpoerriDigital Media Production

Step 0 – Download files, Launch Flash, Create Document

Download Files http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec12/Steps/Part1

Launch Flash– Start > Macromedia > Flash

Create Flash Document and Set its Properties – File > New– Modify > Document or use Property Inspector

– Frame Rate = 12 Dimensions = 640 x 480 Background color = White

800 x 600

Using Grid, Rulers and Guides– Rulers

View > Rulers– Guides

– View > Guides > Show Guides

© Anselm SpoerriDigital Media Production

Step 1 – Overall Navigation Layout and Organize Assets

Decide on Overall Navigation Layout

1) Create layers for "background", "navigation", "stage" ...

2) Create Guides for Navigation Text and Images

Import Images for Navigation

1) Resize to fit allocated space (or "create to spec" in image editing program).

2) Convert images into Graphic Symbols.

Organize Assets

1) Open "Library" window.

2) Click on "Folder" icon to create folders for "Images", "Buttons" ...

© Anselm SpoerriDigital Media Production

Step 2 – Create Animations for Navigation Buttons

1) Create "Movie" symbol using "Insert > New Symbol".

2) Drag "Graphic Symbol“ onto Stage of Animation (creates instance)

3) Add keyframes.

4) For each keyframe, apply effects (select instance on stage to apply Alpha effect).

5) Animate by applying "tweening"

6) Select last keyframe, open "Actions" window (can use Right-Click) and type "stop ();" (so that the animation does loop).

Make sure "Frame" is selected by checking "Actions for ..." the heading in top left corner.

© Anselm SpoerriDigital Media Production

Step 3 – Create "UP" Buttons

1) Insert "Button" symbol.

2) Create layers and guides for text and animation.

3) "UP" state - create text (and possibly background shape)

4) "OVER" state - insert keyframe, modify text, add animation.

5) "DOWN state - insert (empty) keyframe, modify text and add static graphic by selecting animation and using "Swap" in the Property Inspector; want graphic to line up with end state of animation.

6) "HIT" state - define "hotspot" for button (in addition to shapes in other states).

© Anselm SpoerriDigital Media Production

Step 4 – Create "Down" Buttons

Use "Duplicate Symbol" to Create Buttons

1) Select "Button" symbol, Right-Click, select "Duplicate" and name it.

2) Replace text in the keyframes for the different states.

3) Use "Swap" to replace animation and position appropriately.

Create "Down" Buttons

1) Use "Duplicate Symbol" to create "Down" button and name it.

2) Update states: "down" and "up" become identical (use "Copy Frames" and extra layer for swapping if needed).

3) "Over" should also contain static image as in "Up" state and the same text color as in "Up" state.

© Anselm SpoerriDigital Media Production

Step 5 – Make Button Instance Interactive

Open "Scene" Window

1) "Scene 1" - name it "Bilbao".

Make Button Instance Interactive

1) Select instance of button in "Scene 1" and name it

2) Open "Action" window.

3) Press "+" and then select action to be triggered:

Global Functions > Timeline Control

6) Select "gotoAndStop" and for scene select "Bilbao".

Action associated with button is:

on (release) {

gotoAndStop ("Bilbao", 1);

}

© Anselm SpoerriDigital Media Production

Step 6 – Make Button Instance Interactive (cont.)

Select ActionScript for "Bilbao" Button

1) Select instance of "Bilbao" button and open Actions Window

2) Select ActionScript and copy it

Select Button Instance

1) Select instance of button (and name it).

2) Open "Action" window

3) Paste ActionScript.

4) Modify "gotoAndStop ("Bilbao", 1) so that another scene (to be created) is referenced, such as "Gehry", "Meret" or "Dance".

Action associated with button is:

on (release) {

gotoAndStop ("SceneName", 1);

}

© Anselm SpoerriDigital Media Production

Step 7 – Create Scenes and Swap in “Down” Button

Create "actions" Layer

1) Insert layer called "actions".

2) Select first keyframe and open "Actions" window.

3) Type "stop ();".

Open "Scene" Window to Duplicate Scenes

1) Open "Scene" window.

2) Click the "Duplicate Scene" icon in the bottom right.

3) Name the duplicate consistent with scenes referenced in the ActionScripts associated with the different buttons.

Insert "Down" Button for Each Scene

1) Select button related to selected scene.

2) Use "Swap" in Property Inspector and select "Down" button.

© Anselm SpoerriDigital Media Production

Recap – How to create Animated & Interactive Button

4. Button UP = BUTTON Symbol

OVER State

3. Animation = MOVIE Symbol

2. Bitmap Symbol = GRAPHIC Symbol

1.Import Bitmap

To Change Alpha Select Instance of Symbol

Animation Stops Add “stop ()” to last keyframe

Navigation• Select instance of Button and attach ActionScript

Save Time Use “Duplicate” and Modify

© Anselm SpoerriDigital Media Production

Done So Far – Create Flash Website with Animated Buttons

1. Import Images

2. Convert Images to Graphic Symbols • “Insert > Convert to Symbol”

3. Create Movie Clip using “Insert > New Symbol”

4. Insert Graphic Symbol and Animate

5. Create Buttons

6. Insert Movie Clip in “Over” State

7. Create “UP” and “DOWN” Buttons

8. Create Navigation Bar in “Scene 1” and add ActionScript

9. Create Scene for Each Category and “Swap In” “Down” Button

This Week – Create Secondary Navigationand “Disjointed Rollover” using ActionScript

© Anselm SpoerriDigital Media Production

Attach ActionScript

• Frame stop (); Function definitions Variables

• Button

• Movie Clip

Actions panel allows you to select, drag and drop, rearrange, and delete actions

Reference panel to view detailed descriptions of actions Window > Reference

Flash can detect what action you are entering and display code hint

Scripts attached to a frame execute when playhead enters frame. – first frame in a movie is rendered incrementally

Scripts attached to movie clips / buttons execute when event occurs

© Anselm SpoerriDigital Media Production

ActionScript Terminology

Objects are collections of properties and methods

Methods are functions assigned to an object

Instances are objects that belong to a certain class

Instance names are unique names that allow you to target movie clip instances in scripts Use Property inspector to assign instance names to instances on Stage.

“this” to movie clips

Target Paths = Hierarchical Addresses movie clip instance names, variables, objects in movie

– Use target path to direct action at a movie clip or to get or set variable value

_root.stereoControl.volume

© Anselm SpoerriDigital Media Production

Dot Syntax “.”

Indicate the properties or methods related to an object or movie clip

Used to identify target path to a movie clip, variable, function, or object

movieClip._x

movieClip._alpha

movieClip._xscale

movieClip._visible = true;

_parent.movieClip.play ();

© Anselm SpoerriDigital Media Production

Defining a Function

// global

_global.myFunction = function (x) {

return (x*2)+3;

}

// local

function sqr(x) {

return x * x;

}

© Anselm SpoerriDigital Media Production

MovieClip – Event Handler Actions and Methods

Event handler actions Event handler methods

onClipEvent (load) onLoad

onClipEvent (enterFrame) onEnterFrame

onClipEvent (mouseDown) onMouseDown

onClipEvent (mouseUp) onMouseUp

onClipEvent (mouseMove) onMouseMove

onClipEvent (keyDown) onKeyDown

onClipEvent (keyUp) onKeyUp

onPress onRelease

onRollOver onRollOut

© Anselm SpoerriDigital Media Production

Step 0 – Download files, Launch Flash, Create Document

Download Files http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec12/Steps/Part2

Launch Flash

Open File “Step0.fla”

Using Grid, Rulers and Guides– Rulers

View > Rulers– Guides

– View > Guides > Show Guides

© Anselm SpoerriDigital Media Production

Step 1 – Create Global Function

Insert Layer “functions” in first scene “Bilbao” to contain global functions

Want to create function that changes transparency and scale of movie

1) Open Actions Window

2) Enter function definition

_global.changeVisuals = function (movieClip, alpha, scale) {

movieClip._alpha = alpha;

movieClip._xscale = scale;

movieClip._yscale = scale;

}

© Anselm SpoerriDigital Media Production

Step 2a – Create Secondary Navigation Buttons Using ActionScript

1) Create “Movie” Symbol = “Furcup Button”

2) Create Button Background and Text

3) Create Secondary Navigation Area in “Meret” Scene

4) Add instance of “Furcup Button” movie clip to “Meret” scene and name it “Furcup”

5) Select “Furcup” instance

6) Open Actions window

© Anselm SpoerriDigital Media Production

Step 2b – Create Secondary Navigation Buttons Using ActionScript

With “Furcup” movie clip instance selected, add in Actions Window

onClipEvent (load) {

var alphaOut = 50;

var alphaOver = 75;

var alphaPress = 100;

var scaleOut = 100;

var scaleOver = 110;

var scalePress = scaleOver;

// set transparency

this._alpha = alphaOut;

this.onRollOver = function () {

trace ("Over");

changeVisuals (this, alphaOver, scaleOver);

}

}

© Anselm SpoerriDigital Media Production

Step 2c – Create Secondary Navigation Buttons Using ActionScript

onClipEvent (load) {var alphaOut = 50;

var alphaOver = 75;

var alphaPress = 100;

var scaleOut = 100;

var scaleOver = 110;

var scalePress = scaleOver;

// set transparency

this._alpha = alphaOut;

this.onRollOver = function () {

trace ("Over");

changeVisuals (this, alphaOver, scaleOver);

}

this.onRollOut = function () {

trace ("Out");

changeVisuals (this, alphaOut, scaleOut);

}

this.onPress = function () {

trace ("Press");

changeVisuals (this, alphaPress, scalePress);

_parent.gotoAndStop("Furcup");

}}

© Anselm SpoerriDigital Media Production

Step 3a – Label Keyframe, Create “DOWN” Button

1) Create layer = “labelled”

2) Select frame = 20, Insert Keyframe and Name it “Furcup”

3) Add “stop ();” to “actions” layer at frame = 20(need to add insert keyframe)

3) Insert Keyframe at frame = 20 in layer “furcup”

4) Select instance of movie clip and name it “FurcupDown”

© Anselm SpoerriDigital Media Production

Step 3b – Modify attached ActionScript

Modify ActionScript attached to “FurcupDown” instance

var scalePress = 120;

this._alpha = alphaPress;

this._xscale = scaleOver;

this._yscale = scaleOver;

this.onRollOver = function () {

trace ("Over");

changeVisuals (this, alphaPress, scaleOver);

}

this.onRollOut = function () {

trace ("Out");

changeVisuals (this, alphaPress, scaleOut);

}

this.onPress = function () {

trace ("Press");

changeVisuals (this, alphaPress, scalePress);

_parent.gotoAndStop("Furcup");

}

© Anselm SpoerriDigital Media Production

Step 4a – Create “Disjointed” Rollover

Create “Furcup Animation”

1) Import “Furcup” image and convert to Graphic Symbol

2) Create new movie clip symbol called “Furcup Animation”

3) Create Animation (make sure image expands from origin of movie clip).

4) Add instance “Furcup Animation” to “Meret” scene at frame = “Furcup”

5) Name instance “FurcupImage”

Create “Furcup Text"

1) Create new movie clip symbol called “Furcup Text”

2) Create Text

3) Add instance “Furcup Text” to “Meret” scene at frame = “Furcup”

5) Name instance “FurcupText”

© Anselm SpoerriDigital Media Production

Step 4b – Create “Disjointed” Rollover

Make “FurcupText” Invisible

1) Select “actions” layer at frame = 20

2) Add ActionScript

FurcupText._visible = false;

© Anselm SpoerriDigital Media Production

Step 4c – Create “Disjointed” Rollover

Add “Disjointed Rollover” to “FurcupImage”

Select “FurcupImage” instance and in Actions window

onClipEvent (load) {

this.onRollOver = function () {

trace ("Over");

_parent.FurcupText._visible = true;

}

this.onRollOut = function () {

trace ("Out");

_parent.FurcupText._visible = false;

}

this.onPress = function () {

trace ("Press");

}

}