Flash CS3: Advanced Action Scripting

1
Flash CS3Advanced Action Scripting

• Lloyd Rieber
• a.k.a. Real programming! (Yes, you will feel your
  head getting a little pointier after you complete
  this workshop!)

2
IMPORTANT NOTES!

• Workshop Web Site
• Download PPT slides
• Download flash projects
• See working examples

http//it.coe.uga.edu/studio/new_site_content/work
shops/advanced_actionscripting
3
Workshop ObjectivesBy the end of the workshop,
you should be able to

• Add scripts to frames, buttons, and movie clips
• Use variables to control aspects of a movie
• Create simple scripts that move movie clips
• Use variables to control dynamic text
• Create a drag and drop interaction

4
What You Need to Already Know

• How to add simple scripts to frames, buttons, and
  movie clips to control the timeline
• Add labels to particular frames and use scripts
  to link to these frame labels
• Add simple scripts to buttons to give the user
  control over the actions in a movie
• Use Flash as a hypermedia authoring tool

5
(No Transcript)
6
Using Scripts in an Object-Oriented Environment
like Flash

• Where do you put the scripts? Flash is
  object-oriented scripts can be attached to
  almost any object
• Frames, movie clips, buttons, lots more
• Scripts are activated when an event occurs
• A frame is played
• A button is pressed
• A movie clip is loaded
• There is no one BIG controlling program, instead,
  the various objects, and their scripts, interact
  with one another

7
Quick ReviewGiving the user control over a
screen animation

• Quick review of animating (via a motion tween)
  and rotating a simple object
• Developing good habits
• Adding separate layers for labels and scripts
• Creating a frame label and adding a script to
  loop to that label

8
Using Buttons

• Understanding the syntax of Event Handlers
• on (release)
• gotoAndPlay(1)
• In English
• On the event of release of the mouse button, do
  whatever is between the , in this case, go to
  frame 1 and begin playing.
• Other button events
• Press, roll-over, drag-over, etc.

9
Some Good Rules and Hints
Press F9 to show/hide action panel

• Use the code hints
• Take note of script colorization
• Use the Check Syntax and Auto format buttons
  frequently at the start
• Rules for typing action commands
• First word is lowercase, remaining words begin
  with uppercase
• Examples gotoAndPlay, gotoAndStop, stopAllSounds
• Advice Use this convention when naming your own
  variables and functions
• Type both at each new handler or condition
• Right click on an action to get to the reference
  section

10
Variables

• Types of variables
• Numeric
• Integers and floating point numbers
• Strings
• A sequence of characters
• Local and Global Variables
• Global variables are accessible throughout the
  Flash movie
• Local variables are stored in objects and only
  accessible by that object
• You can have two local variables with the same
  name if they are in separate objects
• You can only have one global variable with the
  same name

11
Parts of a Script

• on (press)
• var x 7
• var y "Lloyd Rieber"
• for (i0 ilt10 i)
• trace(i)
• if (x3 10)
• trace(y)

12
Parts of a Script
Handler this triggers the script

• on (press)
• var x 7
• var y "Lloyd Rieber"
• for (i0 ilt10 i)
• trace(i)
• if (x3 10)
• trace(y)

All instructions end with a semi-colon
13
Parts of a Script
Braces are used to identify code segments

• on (press)
• var x 7
• var y "Lloyd Rieber"
• for (i0 ilt10 i)
• trace(i)
• if (x3 10)
• trace(y)

Notice the pairs of braces!
14
Syntax Comparisons Operators

• on (release)
• a 7
• trace(a 8)
• trace(a 7)
• trace(a ! 7)

• False
• True
• False

15
Syntax Comparisons Operators
Less Than or Greater Than

• on (release)
• a 7
• trace(a lt 8)
• trace(a gt 6)
• trace(a lt 1)

• True
• True
• False

16
Syntax Comparisons Operators
Operators
Two equivalent ways to increase a variable by a
certain amount.

• on (release)
• a 7
• a a 4
• trace(a)
• a 5
• trace(a)
• trace(a)

• 11
• 16
• 17

Increments a variable by 1. Other ways a a
1 a 1
17
The if Statement

• if (a 7)
• gotoAndPlay(2)

18
Syntax Conditions
The if and else Statements

• on (release)
• a 7
• if (a 7)
• trace(Yes, its 7)
• else
• trace(No, not 7)

19
Dot Syntax

• var a Math.sqrt(4)
• var a myClip._x
• var a myClip.myVariable

Lloyd Advice Think of the dot as like an
apostrophe in the phrase Lloyds
bike Lloyd.bike, or the bike of Lloyd
Get used to referring to things starting at the
root level _root.shuttle._rotation 90
20
Project-Based Learning!
Follow the bouncing ball!
Drag Drop!
Step-by-step!
21
Project Bouncing Ball, Step 1Go to the right,
then bounce back to the left
The following script is attached to an movie clip
instance of an orange ball

• onClipEvent (load)
• speedX 10
• onClipEvent (enterFrame)
• this._x speedX
• if (this._xgt550)
• speedX -speedX

22
Project Bouncing Ball, Step 2Make the ball
bounce back to the right
Add the script outlined in green

• onClipEvent (load)
• speedX 10
• onClipEvent (enterFrame)
• this._x speedX
• if (this._xgt550)
• speedX -speedX
• else if (this._xlt0)
• speedX -speedX

23
Project Bouncing Ball, Step 3Add a vertical
bounce

• onClipEvent (load)
• speedX 10
• speedY 10
• onClipEvent (enterFrame)
• this._x speedX
• this._y speedY
• if (this._xgt550)
• speedX -speedX
• else if (this._xlt0)
• speedX -speedX
• if (this._ygt400)
• speedY -speedY
• else if (this._ylt0)
• speedY -speedY

24
Project Controlling a Movie Clip with Keypresses

• The script on the following page gets attached to
  the blue ball movie clip
• When the user moves the blue ball to the target,
  a message is triggered.

25
Project Controlling a Movie Clip with Keypresses
This script gets attached to the blue ball
movie clip

• onClipEvent(enterFrame)
• step 20
• if(Key.isDown(Key.LEFT)) this._x -step
• if(Key.isDown(Key.RIGHT)) this._x step
• if(Key.isDown(Key.UP)) this._y -step
• if(Key.isDown(Key.DOWN)) this._y step
• //The following script checks for an overlap
• //with the target
• if(_root.target.hitTest(this._x, this._y, true))
  
• trace("You made it!")

26
Project Drag Drop Matching Game

• The script on the following page gets attached to
  the Au movie clip (symbol for gold)
• Similar scripts are added to the other symbols.

27
Project Drag Drop Matching Game This script
gets attached to the Au movie clip
Be sure to title your zone instances correctly!

• onClipEvent (load)
• origX this._x
• origY this._y
• onClipEvent (mouseDown)
• if (this.hitTest(_root._xmouse, _root._ymouse))
  
• this.startDrag()
• onClipEvent (mouseUp)
• if (this.hitTest(_root._xmouse, _root._ymouse))
  
• this.stopDrag()
• //see if the target contains the center of this
  mc
• if (_parent.zoneGold.hitTest(this._x, this._y,
  true))
• //center it on the drop zone
• this._x _parent.zoneGold._x
• this._y _parent.zoneGold._y
• _root.goldCorrect true

28
Project Drag Drop Matching GameThis script
determines if all 3 symbols have been matched

• //The following script is only needed in one of
  the movie clips
• onClipEvent (enterFrame)
• if ((_root.goldCorrect true) and
  (_root.silverCorrect true) and
  (_root.leadCorrect true))
• _root.f "Great! You matched all of the
  symbols!"

29
Time to Explore!