Skip to Navigation | Skip to Content

MAT 150 - Flash 1: Animation and Interactivity

Menu

Basic scripting Samples (AS2, AS3, and HTML5/JS)

Navigating the Timeline

Stop the timeline

In AS2/AS3
stop();

In HTML5/JS
this.stop();
Play the timeline

In AS2/AS3
play();

In HTML5/JS
this.play();
Play from frame 10 on the timeline

In AS2/AS3
gotoAndPlay(10);

In HTML5/JS
this.gotoAndPlay(9);

//Note frames in HTML5/JS start counting from 0 (so frame 1 on the timeline is frame 0 in the code; frame 10 is actually frame 9 in the code)
Stop the timeline on frame 20

In AS2/AS3
gotoAndStop(20);

In HTML5/JS
this.gotoAndStop(19);
Play the timeline from the frame labeled "main"

In AS2/AS3
gotoAndPlay("main");

In HTML5/JS
this.gotoAndPlay"main");
Go to "Scene 5" and play from frame 1

In ActionScript 2

gotoAndPlay("Scene 5", 1);

In ActionScript 3

gotoAndStop(1, "Scene 5");

In HTML5/JS

There are no "Scenes" in HTML5/Canvas; Use subsequent frames.
Go to the scene named "Opening" and stop on frame 30

In ActionScript 2

gotoAndStop("Opening", 30);

In ActionScript 3

gotoAndStop(30, "Opening");

In HTML5/JS

There are no "Scenes" in HTML5/Canvas; Use subsequent frames.

Scripting Buttons

Go to and play from frame 10 on release of a button

In ActionScript 2

on (release) {
gotoAndPlay(10);
}

In ActionScript 3

btnInstanceName.addEventListener(MouseEvent.CLICK, onClick);

function onClick(e:MouseEvent) {
gotoAndPlay(10);
}

In HTML5/JS

this.btnInstanceName.addEventListener("click", onClick.bind(this));

function onClick() {
this.gotoAndPlay(9);
}
Go to and stop on the next frame on the roll over of a button

In ActionScript 2

on (rollOver) {
nextFrame();
}

In ActionScript 3

btnInstanceName.addEventListener(MouseEvent.ROLL_OVER, onRoll;

function onRoll(e:MouseEvent) {
nextFrame();
}

In HTML5/JS

var frequency = 3;
stage.enableMouseOver(frequency);

this.btnInstanceName.addEventListener("mouseover", onRoll); function onRoll() {
this.gotoAndStop(this.currentFrame + 1);

}
Go to and stop on the previous frame on the roll out of a button

In ActionScript 2

on (rollOut) {
prevFrame();
}

In ActionScript 3

btnInstanceName.addEventListener(MouseEvent.ROLL_OUT, onOut;

function onOut(e:MouseEvent) {
prevFrame();
}

In HTML5/JS

var frequency = 20;
stage.enableMouseOver(frequency);

this.btnInstanceName.addEventListener("mouseout", onOut.bind(this));

function onOut() {
this.gotoAndStop(this.currentFrame - 1);
}
Go to and play a scene upon the release of a button.

In ActionScript 2

on (release) {
gotoAndStop("Scene 2", 1);
}

In ActionScript 3

btnInstanceName.addEventListener(MouseEvent.CLICK, onClick);

function onClick(e:MouseEvent) {
gotoAndPlay(1, "Scene 2");
}

In HTML5/JS

There are no "Scenes" in HTML5/Canvas; Use subsequent frames.
Go to a URL on the release of a button

In ActionScript 2

on (release) {
getURL ("http://karlcleveland.com");
}

In ActionScript 3

btnInstanceName.addEventListener(MouseEvent.CLICK, onClickMe);

function onClickMe(e:MouseEvent) {
navigateToURL(new URLRequest("http://karlcleveland.com"), "_self");
}

In HTML5/JS

this.btnInstanceName.addEventListener("click", clickToGoToWebPage);

function clickToGoToWebPage() {
window.open("http://www.karlcleveland.com", "_self");
}

Movie Clips

Play from a movieclip with the instance name of "myClipName"

In ActionScript 3

myClipName.play();

In HTML5/JS

this.myClipName.play();
Play from frame 5 of the movieclip "myClipName"

In ActionScript 3

_root.myClipName.gotoAndPlay(5);

In HTML5/JS

this.myClipName.gotoAndPlay(4);
Stop on frame 10 of the movieclip "myClipName2" that is inside the movieclip "myClipName1"

In ActionScript 3

_root.myClipName1.myClipName2.gotoAndStop(10);

In HTML5/JS

this.myClipName1.myClipName2.gotoAndStop(9);

Sound

Loading and starting an external mp3 sound file

In ActionScript 2

var my_sound:Sound = new Sound();
// creates sound object
my_sound.loadSound("trackname.mp3",true);
// loads track and streams
my_sound.start();
//starts the sound

 

In ActionScript 3

var mySound:Sound = new Sound();
mySound.load(new URLRequest("trackname.mp3"));
mySound.play();

 
Stopping a sound that was started using the previous script

In ActionScript 2

my_sound.stop();

 

In ActionScript 3

//To control sound in AS3, you must play the sound through a 'SoundChannel'

var myMusic:Sound = new Sound();
var myChannel:SoundChannel = new SoundChannel();
myMusic.load(new URLRequest("track1.mp3"));
myChannel = myMusic.play();

//Then you can stop the channel

myChannel.stop();

 
Stopping all sounds

In ActionScript 2

stopAllSounds();

In ActionScript 3

SoundMixer.stopAll();
   

Video (AS2)
Using a video object on the stage to play an external .flv video file var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
myVideo.attachVideo(ns);
ns.play("myMovie.flv"); // myVideo is the instance name of the Video Object on the Stage
//myMovie.flv is the name of your video file
Scripting a play/pause button for the video above on (release) {
ns.pause();
}
Scripiting a rewind button for the video above on (release) {
ns.seek(0);
}
Scripiting a fast forward button for the video above that will move the video 5 seconds forward. on (release) {
ns.seek(ns.time + 5);
}
Tracing a possible cuepoint Using cuepoints to play a movieclip instance (called "myMovieClip") that is on the stage _root.onMouseDown=function(){
trace(myVideo.playheadTime);
} myObj=new Object();

myObj.cuePoint=function(p){
trace("received sync cue point named: "+ p.target.name);
myMovieClip.gotoAndPlay(p.target.name);
}

myVideo.addEventListener("cuePoint", myObj);

Video (AS3)
Full example of creating a video object to play an external .flv file and then controlling that file with varying custom controls/buttons.

var nc:NetConnection = new NetConnection();
//establish a net connection for streaming
nc.connect(null);
//For local or progresive downloads off the web, inform the class that no streaming service will be used by passing the "null" value
var ns:NetStream = new NetStream(nc);
//Pass the Net Connection to the Net Stream, which controls the video playback

var myVideo:Video = new Video(240,240);
//create new video object at appropriate width,height
myVideo.attachNetStream(ns);
//Associate video object wth the net stream

addChildAt(myVideo, 0);
//add video object to the stage

myVideo.x = 200;
myVideo.y = 100;
//position video object on stage

var videoFile:String = "filename.flv";
//establish variable for path to the video file
ns.play(videoFile);
//use net stream to play the video

//capture metaData or CuePoint info about the video
var infoclient:Object = new Object();
ns.client = infoclient;
infoclient.onMetaData = onMetaData;

function onMetaData(info:Object):void
{
trace("metadata: duration=" + info.duration + " width=" + info.width + " height=" + info.height + " framerate=" + info.framerate);
}

//control buttons
play_btn.addEventListener(MouseEvent.CLICK, onPlay);
function onPlay(e:MouseEvent) {
ns.play(videoFile);
}

stop_btn.addEventListener(MouseEvent.CLICK, onStop);
function onStop(e:MouseEvent) {
ns.pause();
}

ff_btn.addEventListener(MouseEvent.CLICK, onFF);
function onFF(e:MouseEvent) {
//trace (ns.time);
ns.seek(Math.floor(ns.time + 1)); //add 1 seconds to current time
}

close_btn.addEventListener(MouseEvent.CLICK, onExit);
function onExit(e:MouseEvent) {
ns.close();
myVideo.clear();
videoFile = "newfilename.flv";
ns.play(videoFile);
}
Useful commands for Video

ns.play(yourfile) //play your video file

ns.pause(); //stop at current position

ns.togglePause(); //hit once to pause, again to resume

ns.resume(); //resume playing video

ns.close(); //close video stream, make available for new vid

ns.time; //current time of video

ns.seek(15); //to to 15 seconds into video

myVideo.clear(); //clear the video object/image in object
   

FS Commands for Projector Files
Make the screen size fullscreen fscommand("fullscreen", "true");
Allow the movie to scale to the screen size fscommand("allowscale", "true");
Don't allow the movie to scale fscommand("allowscale", "false");
Script for a "quit" or "exit" button

In ActionScript 2

on (release) {
fscommand("quit");
}

In ActionScript 3

btnInstanceName.addEventListener(MouseEvent.CLICK, onClick);

function onClick(e:MouseEvent) {
fscommand("quit");
}
   

Scrolling Text
Make up and down buttons control the scrolling of a text field.

In ActionScript 3

//Scrolling text with buttons
//The text field should be set to dynamic and scrollable; the fonts should be embedded
//This asssumes instances names of 'up_btn' and 'down_btn' for the buttons and 'theText' for the text field

var up:Boolean = false;
var down:Boolean = false;

up_btn.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
up_btn.addEventListener(MouseEvent.MOUSE_UP, onUp);
up_btn.addEventListener(MouseEvent.ROLL_OUT, onUp);

down_btn.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
down_btn.addEventListener(MouseEvent.MOUSE_UP, onUp);
down_btn.addEventListener(MouseEvent.ROLL_OUT, onUp);

function onDown(e:MouseEvent) {
if (e.target.name == "up_btn") {
up = true;
} else if (e.target.name == "down_btn") {
down = true;
}
}

function onUp(e:MouseEvent) {
if (e.target.name == "up_btn") {
up = false;
} else if (e.target.name == "down_btn") {
down = false;
}
}

this.addEventListener(Event.ENTER_FRAME, onEnter);

function onEnter(e:Event) {
if (up) {
theText.scrollV -=1;
} else if (down) {
theText.scrollV +=1;
}
}