INTERACTIVE MOTION DESIGN

CHAMPLAIN COLLEGE - FALL 2011

event listeners (for buttons)

example code for event listener:

btn_start.addEventListener(MouseEvent.CLICK, startAnimation);


function startAnimation(event:MouseEvent):void {
	gotoAndPlay(2);
}

make a new layer for actions (call it "Actions" or "Actionscript")
create a button, give it an "instance name" in the Properties panel
the instance name should start with a letter and not use any spaces, an not use many punctuation (other than underscores)
the Actionscript should be on the same frame(s) as the button it refers to.

btn_start

is the instance name of the button you created... it could be named

go_button

button_begin

or something else...

startAnimation

is the name of the function that will be triggered by this event. You could name your function

beginAnimation

or something else...

gotoAndPlay(2);

will move the playhead to frame 2 of the main timeline and play the animation.

using sound

Info taken from Adobe website

Select a synchronization option from the Sync pop-up menu:
Note: If you are placing the sound on a frame other than frame 1 in the main Timeline, select the Stop option.

Event

Synchronizes the sound to the occurrence of an event. An event sound, such as a sound that plays when a user clicks a button, plays when its starting keyframe first appears and plays in its entirety, independently of the Timeline, even if the SWF file stops playing. Event sounds are mixed when you play your published SWF file. If an event sound is playing and the sound is instantiated again (for example, by the user clicking the button again), the first instance of the sound continues to play and another instance begins to play simultaneously.

Start

The same as Event, except that if the sound is already playing, no new instance of the sound plays.

Stop

Silences the specified sound.

Stream

Synchronizes the sound for playing on a website. Flash forces animation to keep pace with stream sounds. If Flash can’t draw animation frames quickly enough, it skips frames. Unlike event sounds, stream sounds stop if the SWF file stops playing. Also, a stream sound can never play longer than the length of the frames it occupies. Stream sounds are mixed when you publish your SWF file.

An example of a stream sound is the voice of a character in an animation that plays in multiple frames.

when a movie clip or button is nested inside a movie clip

In the earlier example the button is on the main timeline and the "gotoAndPlay(2);" referred to frame two on the main timeline...

btn_start.addEventListener(MouseEvent.CLICK, startAnimation);


function startAnimation(event:MouseEvent):void {
	gotoAndPlay(2);
}

If your animation is actually inside a separate Movie Clip symbol you can still access it you just have to let Actionscript know how.

Make a movie clip symbol on the stage of the main timeline. IN THE PROPERTIES PANEL, GIVE IT AN INSTANCE NAME. (This is the name that you will use in the Actionscript.) For this demo, name it my_animation.

In the timeline of the movie clip symbol create a simple animation. Make a new layer and name it "actions" then highlight frame 1. In the Actions window type stop;.

Now btn_start which is on teh main timeline cna be made to access the timeline of the movie clip symbol by specifying it by the instance name: my_animation.gotoAndPlay(2);

btn_start.addEventListener(MouseEvent.CLICK, startAnimation);

function startAnimation(event:MouseEvent):void {
	my_animation.gotoAndPlay(2);
}

If you want to nest the button in a movie clip, give that movie clip an instance name (say "control_panel") and include it in the Actiosncript event listener Actionscript.

control_panel.btn_start.addEventListener(MouseEvent.CLICK, startAnimation);

As you can see, the levels of nested symbols are specificed from outer to inner, so it may be helpful to think of the it in terms of folder paths.

EXAMPLE FILE FROM CLASS: INTERACTIVE MAP DEMO

INTERACTIVE MAP DEMO

NOTES FROM 10/31

1. trace() - great for debugging

http://www.mediacollege.com/adobe/flash/actionscript/trace.html
When testing withon the Flash authoring environment trace() allows you to send values to teh output window.
Examples:
send arbitary text:

trace("button was clicked")

send a variable:

trace(player_1_score)

send the value of a symbol property:

trace(race_car_inst.x)

2. a slideshow that loops

bg_button.addEventListener(MouseEvent.MOUSE_DOWN, changeBackground);

function changeBackground(evt:MouseEvent):void{
	
	if(bg_holder.currentFrame < bg_holder.totalFrames){
        bg_holder.nextFrame();
    } else {
        bg_holder.gotoAndStop(1);
    }
}

3. Drag/Drop

to drag a symbol...

clip_1.addEventListener(MouseEvent.MOUSE_DOWN, dragClipOne);

function dragClipOne(event:MouseEvent):void {
	clip_1.startDrag();
}


clip_1.addEventListener(MouseEvent.MOUSE_UP, stopDraggingClipOne);

function stopDraggingClipOne(event:MouseEvent):void {
	clip_1.stopDrag();
}

...with (primitive) snapping...

clip_1.addEventListener(MouseEvent.MOUSE_DOWN, dragClipOne);

function dragClipOne(event:MouseEvent):void {
	clip_1.startDrag();
}


clip_1.addEventListener(MouseEvent.MOUSE_UP, stopDraggingClipOne);

function stopDraggingClipOne(event:MouseEvent):void {
	clip_1.stopDrag();
	if(clip_1.x < 100){
		clip_1.x = 0;
	}else{
		clip_1.x = 200;
	}
}

changing other properties: rotation

clip_2.addEventListener(MouseEvent.CLICK, rotateClip2);

function rotateClip2(event:MouseEvent):void {
	clip_2.rotation = clip_2.rotation + 45;
	trace(clip_2.rotation);
	// using trace to see what the value of clip_2.rotation is...
}

changing other properties: x, y


move_character_1_btn.addEventListener(MouseEvent.CLICK, moveCharacter1);

function moveCharacter1(event:MouseEvent):void {
	character_1.x = character_1.x + 5;
}

changing other properties: alpha

alpha for a movie clip i sbetween 0 and 1 (full opacity)

some examples to look at

http://www.hmodder.com/app/hmodder.php
www.miniusa.com/

11/28: working w/ video

sample video files: (videos.zip)

Adobe reference

Methodds:

Progressive download from a web server
Stream video using Adobe Flash Media Server
Embed video data directly inside a Flash Pro file

The method we are covering is: Progressive download from a web server. This means that the video file will be saved outside of the .swf and uploaded with the published .swf. The .swf will link to the video file(s).

For this demo we will use .flv video files. (when using other types of video files (ie .mov etc) you may need to convert them to flv using Adobe Media Encoder). Create a folder called videos in the same folder as your demo project and save two or more .flv files in it. These wil be the video files that you reference in the demo.

To add a FLVPlaybackComponent:

(from the main menu in Flash...) Windows > Components > (then scroll down to > Video and choose FLVPlaybackComponent or FLVPlaybackComponent 2.5)

Getting started with the ActionScript 3 FLVPlayback component

Highlight the FLVPlaybackComponent on the stage and look at the Properties panel...
Note that you can choose the type of skin, teh type of controls, whether the clip autoplays when loaded, etc. Look for the entry for "Source"... this is where you specify which video plays in the component. We are linking (not embedding) the video... so enter the path to one of the .flv files in the video folder.

When moving the project (to another drive, for instance) or uploading the project remeber that you will need to move the .swf AND the folder of videos and keep the relationship between the folders.

Once you have specified a video files under source, publish the .swf and test that the video does indeed load.

Check the folde and you will see that if you have chosen a skin for the player then Flash has also published the skin as a .swf. When uplaoding the projectr you will also need to upload the skins that it uses.

Part 2: Using Actionscript w/ the FLVPlayback component.

Highlight the FLVPlayback component and you will see that in the Properties panel there is a space for an Instance Name. By giving the component an instance name you can access it in the Actionscript.

Challenge:
create a button on teh stage and use it to change the alpha, rotation or x, y values of the FLVPlayback component

Challenge:
Create two buttons on the stage and use them to change which video is playing.

Discuss:
What to do about l;ag timebetween click and the loading of the video?

...loading progress
illusion/feedback ... keeps user visually oriented
slow movement vs fast?

code example:

v_1_button.addEventListener(MouseEvent.CLICK, playVideo1);
 
function playVideo1(event:MouseEvent) {
	video_player_inst.source = "videos/cbc.flv";
	video_player_inst.play();
	

}

IDEAS/INSPIRATION:

Faith – Robert Kendall

I Made Tea

Strings – Dan Waber http://www.vispo.com/guests/DanWaber/index.html

Ana Maria Uribe
Dry Red Leaves
http://vispo.com/uribe/gym.html
http://vispo.com/uribe/gym2.html
http://vispo.com/uribe/gym3.html
http://vispo.com/uribe/2000/circo/zancos.html

GDD 212