Course notes
syllabus | schedule | topics | projects | class notes | resources | students | ARTC courses
 Lectures:
Lecture A: The Flash Interface Lecture 4: User Input
Lecture B: Animation Lecture 5: Extras & Game Design
Lecture 1: Drawing with Code and ActionScripting Lecture 6: Linking up the Nucleus
Lecture 2: Graphics Application Development Lecture 7: Brainstorming Game Types
Lecture 3: Working with Movieclips Lecture 8: Topics for Discussion
  Lecture 9: Preloaders and JavaScript Windows
 
Notes: [Sound]    [Masks]    [Frames]    [Playback]    [Frame Scripts]    [Timers]    [Date]    [Fullscreen]   

Lecture 5: Frames, Time, etc.
 

Flash supports a variety of audio formats, including MP3, WAV, MOV, AU and AIF files.

Method 1: Using Sounds internally

To Import a Sound:
1            File > Import - Import to Library…Choose your sound. It appears in your library.
2            Create a NEW LAYER called Sound in your timeline to place your sound;

  • Create a New Keyframe (F6)
  • Drag your sound file from the Library to the Stage.  (You'll see a box outline as you drag)
  • Lock your layer to prevent accidentally adding graphic elements.
  • To view your sound wave:  Select Sound layer; Modify - Timeline - Layer Properties -  Layer Height: 200 or 300%
  • Each Layer can contain only one sound, so if you want more than one to play simultaneously, you must create new layers for each one.

Using the Property Inspector:

  • Follow steps 1-3 in To Import a Sound.
  • Insert a new keyframe where you want the sound to play.
  • In the Property Inspector, Select the Sound

To Add Sounds to Buttons:

  • Double-click the button you'd like to add sound to (in Library for symbol, on Stage for instance).  This throws you into Symbol Editing Mode
  • In the button's timeline, add a NEW LAYER called Sound.
  • In the Sound Layer, select the Over and Down Frames and Insert > Blank Keyframe
  • Drag your sound file from the library onto the Stage for each state you desire sound.
  • To test, Control > Enable Simple Buttons

Event Sounds:
In the Property Inspector, you have four Sync Settings:  Event, Start, Stop, and Stream.

  • Event sounds play in their own timeline, playing until Flash reaches the end of the sound clip or encounters an instruction to stop playing.  If your movie loops, every time the playhead passes a frame with the event sound, Flash starts another instance of that sound playing (WATCH OUT! You can get some weird effects when a sound keeps playing on top of itself.)  Use Event sounds for short clips. Flash pauses to load each sound, which interrupts play.

  • Start sounds are just like Event sounds EXCEPT Flash does NOT play a NEW instance of a start sound if that sound is already playing (no overlap).  Use for Looped frames, especially.

  • Stream sounds are broken into smaller clips. They can be synchronized to specific frames of the movie. Flash stops streaming sound when playback reaches a new keyframe or an instruction to stop.  Streaming sounds don't have to download fully to start playing, they start playing after a few frames have loads. They are best for long sounds.

  • Stop forces a sound to stop at a specific keyframe.

To make a sound a Streaming Sound:

  • Insert a Blank Keyframe where you'd like your sound to start
  • In the Property Inspector, choose Sound: File Name
  • In the Property Inspector, choose Sync: Stream
  • To see how the sound fits into the available time in your movie, click Effect - Custom… in the Property Inspector.  The Edit Envelope window appears.  A vertical line indicates where Flash cuts off the sound.
  • The truncated waveform appears in your timeline.  Play the movie to hear it.

*  If you find the streaming sound cutting off too soon, switch the units of measure in the Edit Envelope window to FRAMES to see how many frames to add to accommodate your sound.
*  You can scrub audio by dragging the playhead in the timeline. Use this to test image/sound sync. Then add or delete frames to better synchronize your images.

To Stop a Sound at a Certain Frame:
1            Follow steps 1-4 in To Import a Sound.
2            Insert a new keyframe where you want the sound to stop playing.
3            In the Property Inspector, Sound: None, Sync: Stop; a square appears in that frame.
4            Play your movie to hear how sound stops at that frame. 

To Loop a Sound:

  • Follow steps 1-4 in To Import a Sound.
  • In the Property Inspector, enter Loops: #; Flash extends the waveform in the timeline

EDITING SOUNDS:

You can make limited changes in each instance of a sound in the Edit Envelope window. You can:

  • Trim the sound (cut a piece of the beginning or end of the waveform)
  • Adjust the volume (left channel, right channel, fade left to right, fade right to left, fade in, fade out

To assign a predefined volume effect:

  • Select the Keyframe that contains the sound you want to change
  • Property Inspector:  Effect - Custom… to get to Edit Envelope window.
  • Effect:  Choose effect.  Flash adjusts the sound envelope, shown by the box and vertical line
  • Click Play button to hear effect.

*  You can also just choose an Effect: from the Property Inspector.

To customize a volume effect:

  • Follow instructions 1-2 above
  • Effect:  Custom
  • In the EE window, add envelope handles by clicking on the waveform. (max of 8) Remove by dragging them out of sound editing window. It automatically adds two handles to a stereo sound, but you can move each handle individually for more effects.
  • Drag the square handles (0% at bottom, 100% at top) to adjust the volume
  • Click Play to test.

To Trim Sounds:

  • In EE window:  drag the time-in or time-out controls accordingly. (located between waveforms)

* Remember, although it's trimmed, it still downloads the ENTIRE untrimmed file, so do this sparingly. It is better to trim your audio in an audio editor.


Method 2: Access the sounds externally
Store the sounds in the same folder as the .swf and .as files
If you want to be able to stop the sound also, you need to play it in a sound channel

Need to import some classes:

import flash.media.*;
import flash.net.*;

Above the constructor function initialize some variables:

var mySoundReq:URLRequest=new URLRequest("Saxflutefun.mp3");
var mySound:Sound = new Sound();
var mySoundChannel:SoundChannel = new SoundChannel();

In the constructor function load the sound and add listeners for the buttons to start and stop the music:

mySound.load(mySoundReq);
startSoundButton.addEventListener(MouseEvent.CLICK,playMySound);
stopSoundButton.addEventListener(MouseEvent.CLICK, stopSound);

Create two new functions:

		function playMySound(theevent:MouseEvent):void {
			mySoundChannel=mySound.play();
		}

		function stopSound(event:MouseEvent):void {
			mySoundChannel.stop();
		}

Mask Layer: 

Limited to only a single shape (Paste Inside); create fill, reveals what is under fill, hides others

  1. Select/create the layer containing the CONTENT visible THROUGH Holes in the Mask

  2. Insert > Timeline > Layer to create a new layer above it.

  3. Draw a shape, type, or create an instance on mask layer; filled area is transparent

  4. Right-click layername and select MASK; down arrow appears and linked to layer below

Properties:

currentFrame : int
[read-only] Specifies the number of the frame in which the playhead is located in the timeline of the MovieClip instance.

currentLabel : String
[read-only] The current label in which the playhead is located in the timeline of the MovieClip instance.

currentLabels : Array
[read-only] Returns an array of FrameLabel objects from the current scene.

framesLoaded : int
[read-only] The number of frames that are loaded from a streaming SWF file.

totalFrames : int
[read-only] The total number of frames in the MovieClip instance.

Methods:

gotoAndPlay(frame:Object, scene:String = null):void
Starts playing the SWF file at the specified frame.
MovieClip

gotoAndStop(frame:Object, scene:String = null):void
Brings the playhead to the specified frame of the movie clip and stops it there.
MovieClip

nextFrame():void
Sends the playhead to the next frame and stops it.
MovieClip

play()
:void
Moves the playhead in the timeline of the movie clip.
MovieClip

prevFrame():void
Sends the playhead to the previous frame and stops it.
MovieClip

prevScene():void
Moves the playhead to the previous scene of the MovieClip instance.
MovieClip

stop():void
Stops the playhead in the movie clip.

Examples

MCname.gotoAndPlay("theJumpScene");
MCname.gotoAndStop(27);
MCname.stop();

Setup for Flash Horse Example:

Make a couple of movieclips with a number of frames - call them horse and horseMC.
Make 2 buttons named horseRun and horseButton
In Flash make another layer and call it scripts
Put a stop(); on this layer by going to the Windows menu - Actions

Inititalize a variable (above the constructor function)

 var horseon:String="on";

In the constructor function:

 //Run button
this.horse.gotoAndStop(1);
runHorse.addEventListener(MouseEvent.CLICK,doHorseRun);

//1 step button
this.horseMC.gotoAndStop(1);
horseButton.addEventListener(MouseEvent.CLICK,doHorseWalk);

Make new functions:

		//***** Horse Walk *********************************************
		private function doHorseWalk(theEvent:MouseEvent) {
			//this is the amount he has to move over after a full trot
			var fulltrot:uint=300;
			//we need to make sure that we have not exceeded the total number of frames in the animation
			if (this.horseMC.currentFrame!=this.horseMC.totalFrames) {
				//go to the next frame
				this.horseMC.gotoAndStop(this.horseMC.currentFrame+1);
			} else {
				if (this.horseMC.x < stage.stageWidth) {
					this.horseMC.x=this.horseMC.x+fulltrot;
				} else {
					this.horseMC.x=0;
				}
				//do a reset back to frame 1
				this.horseMC.gotoAndStop(1);
			}
		}
		//***** Horse Run *********************************************
		private function doHorseRun(theEvent:MouseEvent) {
			if (horseon=="on") {
				this.horse.gotoAndPlay(1);
				horseon="off";
			} else {
				this.horse.gotoAndStop(1);
				horseon="on";
			}
		}

Besides putting scripts in the .as file, you can put scripts on the frames.

ALWAYS make a new layer for your Actions- call it Actions

Make a key frame for the action before writing it.

Setup for the Flash Exercise (Arrows to go to the next level):

1. Make a new layer and call it Labels
2. Put a key frame where you want the first level and a keyframe where you want a second level
3. Make arrow buttons for each page.
4. Name each arrow instance - nextButton, previousButton
5. Create a new layer and call it Actions and put a new keyframe onthe first frame and the frame of the second level
6. Select the first keyframe Actions layer
7. Open the Window menu - Actions

Write the following:

stop();
nextButton.addEventListener(MouseEvent.CLICK, goNext);
function goNext(e:MouseEvent):void
{
   gotoAndStop("Level2");
}

On the keyframe of the second level frame write this:
NOTE: I had to stop the playing of each of my MovieClips on the frame I go to

stop();
previousButton.addEventListener(MouseEvent.CLICK, goPrev);
function goPrev(e:MouseEvent):void
{
   gotoAndStop("Level1");
   horseMC.gotoAndStop(1);
   horse.gotoAndStop(1);
}


clearInterval(id:uint):void
Cancels a specified setInterval() call.

clearTimeout(id:uint):void
Cancels a specified setTimeout() call.

getTimer():int
Returns the number of milliseconds that have elapsed since Flash Player was initialized, and is used to compute relative time.

setInterval(closure:Function, delay:Number, ... arguments):uint
Runs a function at a specified interval (in milliseconds).

setTimeout(closure:Function, delay:Number, ... arguments):uint
Runs a specified function after a specified delay (in milliseconds).


Example: put a timer on the screen

Put this ABOVE the constructor function
		//used for the timer
		var timeDisplay:TextField = new TextField();
		var startTime:int=getTimer();
Put this in the constructor function
			    // timer 
			addChild(timeDisplay);
			timeDisplay.x = 320;
			timeDisplay.y = 40;
			this.addEventListener(Event.ENTER_FRAME, showClock);

Make a new function

 		//***** Show the clock and time passing *********************************************
		function showClock(theEvent:Event):void {
			// get the current time and subtract the time it was when we started
			var timePassed:int=getTimer()-startTime;
			// divide the miliseconds by 1000 to get seconds
			var seconds:int=Math.floor(timePassed/1000);
			// divide the seconds by 60 to get minutes
			var minutes:int=Math.floor(seconds/60);
			// subtract the minutes * 60 from the seconds to get the remaining seconds
			seconds-=minutes*60;
			// make a string out of the time elements
			var timeString:String=minutes+":"+String(seconds+100).substr(1,2);
			// show in text field
			timeDisplay.text=timeString;
		}
Case statements to get date
Make a dynamic text field that is called dayField
		function getDay():void {
			var someDate:Date = new Date();
			var dayNum:uint=someDate.getDay();
			switch (dayNum) {
				case 0 :
					dayField.text = "Sunday";
					break;
				case 1 :
					dayField.text = "Monday";
					break;
				case 2 :
					dayField.text = "Tuesday";
					break;
				case 3 :
					dayField.text = "Wednesday";
					break;
				case 4 :
					dayField.text = "Thursday";
					break;
				case 5 :
					dayField.text = "Friday";
					break;
				case 6 :
					dayField.text = "Saturday";
					break;
				default :
					dayField.text = "Out of range";
					break;
			}
		}

              

Publish Settings to do a full screen, resizable flash file embedded in an HTML page.

Click the Dimensions drop down box. Select Percent and type 100 for the Width and Height.

Click the Scale drop down box and select No scale.

Click Publish to publish the files.

Open the HTML file and add this code after the </title> tag

<style type="text/css">
                <!--
                body {
                height: 100%;
                width: 100%;
                margin: 0;
                }
                -->
</style>