three

1
three

• Linking to the library in ActionScript

2
Adding sound to the Pong game

• First, we add a sound to the library
• Then we add ActionScript code to make a Sound
  object
• Then we add code to play the Sound at the right
  time

3
Importing a sound into Flash

• You can import most sounds into Flash
• ChooseFilegtImportgtTo Library

4
Importing a sound into Flash

• And select the sound file you want

5
Importing a sound into Flash

• Flash cant import all audio formats
• And not all WAV formats
• If you cant import a file
• Open it in Audacity
• Export it out as a WAV file (if its small)
• Or an MP3 (if its big)

6
Importing a sound file

• Now go to the library and right-click on the
  sound and choose Linkage

7
Importing a sound file

• Check Export for ActionScript
• And specify a class name to give to the sound
• This will let you make new instances of the sound
  just by saying new Pong()

8
Importing a sound file

• If it complains about classpath, just ignore it
• Click OK

9
Accessing the sound from ActionScript

• To play a sound, you need to make a Sound object
• Flash has already made a subclass of Sound that
  will use the sound file you imported
• So just use new to make an instance of it

• var ballSoundPong new Pong()

10
Oh yea, and maybe we should play it

• Making the sound object doesnt start it playing
• So we call its play() method when we want it to
  play
• In this case, we add it to the code that runs
  when the ball bounces off a paddle

• player.addEventListener(
• Event.ENTER_FRAME,
• function(evt)
• player.y player.mouseY
• if (ball.xltplayer.x
• Math.abs(ball.yplayer.y)
  ltplayer.height/2)
• ball.xvel -ball.xvel
• ball.x player.x
• ballSound.play()
• )

11
The other paddle

• We also have to add code to the handler for the
  computers paddle

• computer.addEventListener(
• Event.ENTER_FRAME,
• function(evt) code omitted
• if (ball.xgtcomputer.x
  Math.abs(ball.y-computer.y)
  ltcomputer.height/2)
• ball.xvel -ball.xvel
• ball.x computer.x
• ballSound.play()
• )

12
Trying it out

• It works!
• Cant you tell from this static screenshot?

13
Adding a sound for scoring

• Now we add in another sound to play when a player
  scores a point

14
Adding a sound for scoring

• Now we add in another sound to play when a player
  scores a point
• And make a new Sound object for it

• var scoreSoundYay new Yay()

15
Adding a sound for scoring

• Now we add in another sound to play when a player
  scores a point
• And make a new Sound object for it
• And change the scoring code to play it

• function serve()
• scoreSound.play()
• if (player.score5 computer.score5)
• gameOver()
• ball.x stage.stageWidth/2
• ball.y stage.stageHeight/2

16
Trying it out

• It still works!

17
Making a particle system

• An example of dynamically creating movie clips
  from the library

18
Particle systems

• Particle systems are used for making effects like
  smoke and explosions
• Basic idea
• Make a bunch of little objects (particles)
• Random speeds and/or positions
• Animate them with a small amount of physical
  simulation

19
Making the template for the particles

• Start out by making a circle on the stage
• And turn it into a symbol
• Name it Particle
• Dont keep a copy on the stage

20
Making the template for the particles

• And again, right click on it and go into Linkage
  Properties
• Then click Export for ActionScript
• And enter an class name

21
Making lots of particles

• Now click on frame 1 of the main timeline and go
  to the actions window
• Then enter this code

22
What does this code do?

• The new call tells it to make a new copy of the
  Particle MovieClip

• for (var i0 ilt30 i)
• this.addChild(new Particle())

23
What does this code do?

• The new call tells it to make a new copy of the
  Particle MovieClip
• The variable this refers to the object
  currently running code
• In this case, that object is the main MovieClip
• Because this script is in the timeline of the
  main MovieClip
• And the call to addChild tells
• this (the main movie)
• To add the Particle as a child in the display
  list

• for (var i0 ilt30 i)
• this.addChild(new Particle())

24
What does this code do?

• The for statement tells the system to run the
  code in the curly braces repeatedly

• for (var i0 ilt30 i)
• this.addChild(new Particle())

25
What does this code do?

• The for statement tells the system to run the
  code in the curly braces repeatedly
• The var i0 part says to start by making a new
  local variable called i and setting it to 0

• for (var i0 ilt30 i)
• this.addChild(new Particle())

26
What does this code do?

• The for statement tells the system to run the
  code in the curly braces repeatedly
• The var i0 part says to start by making a new
  local variable called i and setting it to 0
• The ilt30 part means keep running as long as ilt30

• for (var i0 ilt30 i)
• this.addChild(new Particle())

27
What does this code do?

• The for statement tells the system to run the
  code in the curly braces repeatedly
• The var i0 part says to start by making a new
  local variable called i and setting it to 0
• The ilt30 part means keep running as long as ilt30
• And the i part means add 1 to i each time the
  code in the curly braces is run

• for (var i0 ilt30 i)
• this.addChild(new Particle())

28
What does this code do?

• The for statement tells the system to run the
  code in the curly braces repeatedly
• The var i0 part says to start by making a new
  local variable called i and setting it to 0
• The ilt30 part means keep running as long as ilt30
• And the i part means add 1 to i each time the
  code in the curly braces is run
• So in other words, it run this code 30 times,
  first with i0, then i1, etc.

• for (var i0 ilt30 i)
• this.addChild(new Particle())

29
This is kind of boring

• Technically, it does make a bunch of particles
• But theyre all at 0,0 (the upper left hand
  corner) and nearly invisible
• And they dont do anything

30
Adding behavior

• We can add behavior for all the particles by
  adding a script to the particle symbol itself
• Start by double clicking the icon next to the
  symbol in the library

31
Adding behavior

• Now the main window shows the timeline for the
  symbol itself, not for the main movie
• Click on frame 1 and go into the actions window

32
Adding new behavior

• Now you should see a blank actions window because
  youre viewing the actions for frame 1 of the
  symbol, not of the main movie

33
Adding new behavior

• Any actions you enter here will get run for every
  particle
• Because its a script for the particle symbol,
  not for the main movie timeline

34
Setting the particles initial position

• Lets start by moving the particles
• We add lines to the frame 1 script to initialize
  the x and y properties
• Again, because these are in the scripts for the
  particles, rather than the main timeline, they
  will run for every particle

• x stage.stageWidth/2
• y stage.stageHeight/2

35
Animating the particles

• Thats a little better, but nothings moving on
  screen
• We fix that the same way we did in Pong, but
  adding a frame handler to update the particles
  position based on a velocity variable

• this.addEventListener(Event.ENTER_FRAME,
• function(evt)
• x xvel
• y yvel
• )

36
Animating the particles

• That only works if we tell it what xvel and yvel
  should be

• this.addEventListener(Event.ENTER_FRAME,
• function(evt)
• x xvel
• y yvel
• )

37
Animating the particles

• That only works if we tell it what xvel and yvel
  should be
• So we add initializations to set them to random
  values
• Math.random() returns a random number between 0
  and 1 (e.g. 0.462)
• So Math.random()10-5 gives us a random number
  between -5 and 5

• var xvelNumber Math.random()10-5
• var yvelNumber Math.random()10-20
• this.addEventListener(Event.ENTER_FRAME,
• function(evt)
• x xvel
• y yvel
• )

38
Adding gravity

• We can make them fall by increasing the Y
  velocity on each frame
• Remember than larger Y values mean lower on the
  screen
• So we want to make yvel bigger over time

• var xvelNumber Math.random()10-5
• var yvelNumber Math.random()10-20
• this.addEventListener(Event.ENTER_FRAME,
• function(evt)
• x xvel
• y yvel yvel 1
• )

39
Making them grow and fade

• Finally, we hack it to grow the particles and
  gradually make them transparent over time

• var xvelNumber Math.random()10-5
• var yvelNumber Math.random()10-20
• this.addEventListener(Event.ENTER_FRAME,
• function(evt)
• x xvel
• y yvel yvel 1
• width 5
• height 5
• alpha 0.95
• )

40
The complete code

• Main timeline
• for (var i0 ilt30 i)
• this.addChild(new Particle())

• Particle timeline
• x stage.stageWidth/2
• y stage.stageHeight/2
• var xvelNumber Math.random()10-5
• var yvelNumber Math.random()10-20
• this.addEventListener(Event.ENTER_FRAME,
• function(evt)
• x xvel
• y yvel yvel 1
• width 5
• height 5
• alpha 0.95
• )

41
Trying it out

• It works!

42
Programming assignment 1

• On the wiki
• Make an interactive Flash project involving at
  least 50 lines of new ActionScript code
• Three options
• Make a clock
• Improve pong
• Some thing else that I approve
• Feel free to ask me how to do things
• Project proposals due Wednesday, April 22
• Completed project due Sunday, May 3