XP
Tutorial 8
Adding Interactivity with ActionScript
XP
Objectives
• Review the basics of ActionScript programming
• Use ActionScript to create links to access external
Web sites
• Create input and dynamic text fields
• Use ActionScript to create an input form
• Create and test a Flash preloader
New Perspectives on Macromedia Flash 8
2
XP
Programming with ActionScript
• ActionScript: programming language in Flash
• ActionScript is used to make a document interactive
– Examples: make buttons operational, process user input
• ActionScript may also be used to write applications
– Example: shopping card application
• Tutorial tasks involving the use of ActionScript
– Control multimedia elements to access Web pages
– Process data entered into input forms
New Perspectives on Macromedia Flash 8
3
XP
Sample Flash Application
New Perspectives on Macromedia Flash 8
4
XP
Working with Objects and Properties
• ActionScript is used to control and modify objects
• Object: Flash element with modifiable properties
– Examples: buttons, movie clips, and text blocks
• Properties are identified by underscore; e.g., _alpha
• ActionScript examines and modifies many properties
– Objects to be manipulated often require a name assignment
• Dot notation: links object to properties and methods
– Example: circle_mc._alpha = 30 // mc stands for movie clip
New Perspectives on Macromedia Flash 8
5
XP
Code Hints in the Actions Panel
New Perspectives on Macromedia Flash 8
6
Using Actions, Methods, and
Functions
XP
• Action: statement passing instruction to SWF file
• Functions
– Statement blocks that process data when called
– Return a value or perform some action
– Parameters or arguments: values passed to a function
• Methods are functions specific to a particular object
– Use dot notation to bind a method to an object
– Example: circle_mc.gotoAndPlay(10)
New Perspectives on Macromedia Flash 8
7
Writing ActionScript Using Variables,
XP
Expressions, Operators, and
Comments
• Variable: container that holds data while SWF plays
• Keyword: word or phrase reserved for ActionScript
– Examples: else, if, while, this
• Expression: statement assigning a value to a variable
• Two types of data
– String data: series of characters within quotation marks
– Numeric data: numbers not enclosed with quotation marks
• Operators manipulate values in expressions
New Perspectives on Macromedia Flash 8
8
Writing ActionScript Using Variables,
XP
Expressions, Operators, and
Comments (continued)
• Types of operators
– Assignment operator (=): assigns value to variable
– Arithmetic operators: + , -, *, and /
– Comparison operators: <, <=, >, >=, = =, !=
• Conditional statement
– Uses comparison operators to compare values
– Example: if (x > 50) { gotoAndPlay(1):}
• Comments: explanatory notes set off by slashes (//)
New Perspectives on Macromedia Flash 8
9
XP
Comment in Script Pane
New Perspectives on Macromedia Flash 8
10
XP
Writing ActionScript Code
• Syntax: set of rules specifying valid code constructs
• ActionScript statements follow a specific syntax
– Example: parentheses are required to group arguments
• Use Actions toolbox to limit syntax errors
• Some places where scripts are added
– Frame: script triggered when playhead reaches frame
– Button: script activated when button clicked and released
– Movie clip: script performed as part of a movie clip
New Perspectives on Macromedia Flash 8
11
XP
ActionScript Syntax
New Perspectives on Macromedia Flash 8
12
XP
Exploring ActionScript Examples
• Leslie’s Salad and Sandwich Shop Web site
– Use this site to review ActionScript examples
• ActionScript code for buttons in Specials page
– Controls how playhead moves in the Timeline
– Playhead moves to daily special based on button click
• Another code example from ballsample.fla
– _x property of movie clip is modified with ActionScript
– _x property contains horizontal position (X coordinate)
New Perspectives on Macromedia Flash 8
13
XP
ActionScript for Movie Clip
New Perspectives on Macromedia Flash 8
14
Linking to Web Sites Using the
getURL() Function
XP
• Objective: add links to a Resources page
• getURL(): loads a document into a browser window
• Format: getURL(url, window)
– url (uniform resource locator): address of the Web site
– window options: _self, _blank, _parent, and _top
• _blank option will be used in Resources page
– Specifies that document is opened in a new window
• Button clicks cause getURL() to load document
New Perspectives on Macromedia Flash 8
15
XP
getURL() Function
New Perspectives on Macromedia Flash 8
16
XP
Text Block Above Buttons
New Perspectives on Macromedia Flash 8
17
XP
Creating an Input Form
• How an input form works
– User enters data into input fields
– Input data processed by current page or Web server
– Results of process are displayed
• One scenario involving an input form
– Visitor enters number and type of items to be purchased
– Other fields display total price based on entry
• Input forms must include dynamic text and input text
New Perspectives on Macromedia Flash 8
18
XP
Using Dynamic and Input Text
• Static text: cannot be changed after document plays
• Dynamic text: defined to display variable contents
– Variable can be manipulated to change value displayed
• Use the Text tool to create a dynamic text block
– Select Dynamic Text type in the Property inspector
• Input text: allows user to enter text into text block
• Use Text tool to create an input text box
– Select Input Text type in the Property inspector
New Perspectives on Macromedia Flash 8
19
XP
Dynamic Text Options
New Perspectives on Macromedia Flash 8
20
XP
Additional Options for Input Text
New Perspectives on Macromedia Flash 8
21
XP
Creating the Team Jersey Calculator
Page
• Objective: calculate costs for team jerseys
• Calculator requirements
–
–
–
–
Four input text boxes to gather type, quantity, add-ons
Calculate button with ActionScript to process input data
Dynamic text block to display the total cost
Explanatory text for input text and calculate button
• Pseudocode: programming logic in English syntax
• Use pseudocode to design the script
New Perspectives on Macromedia Flash 8
22
Dynamic Text Block For Cost
Calculator Page
New Perspectives on Macromedia Flash 8
XP
23
XP
Complete ActionScript Code
New Perspectives on Macromedia Flash 8
24
XP
Using a Flash Preloader
• SWF files are often downloaded to a client computer
• Factors affecting the download time of SWF files
– Size of the file measured in kilobytes
– Type of Internet connection; e.g., broadband or dial-up
• Large SWF file may require a long time to download
• Ways to overcome excessive download wait time
– Stream the content: play frames as content arrives
– Add a preloader animation to advise user of status
New Perspectives on Macromedia Flash 8
25
XP
Sample Preloaders
New Perspectives on Macromedia Flash 8
26
XP
Creating the Preloader ActionScript
• Adding a preloader requires ActionScript code
• Pseudocode for the preloader logic
– Get the total number of bytes
– Get the number of bytes loaded
– If the number of bytes loaded equals the total number
of bytes
Play the rest of the SWF file
else
continue playing the preloader animation
New Perspectives on Macromedia Flash 8
27
XP
Changing the Width of a Movie Clip
New Perspectives on Macromedia Flash 8
28
XP
Creating a Preloader for the Jackson’s
Sports Web Site
• Objective: create a preloader on main page
• Specifications for preloader
– Add preloader to revised version of Main.fla file
– Preloader will start Frame 1 of its own layer
– ActionScript is added to second frame of Actions layer
New Perspectives on Macromedia Flash 8
29
XP
ActionScript for Preloader
New Perspectives on Macromedia Flash 8
30
Completing the Actions for the
Jackson’s Sports Web Site
XP
• Objective: make new buttons on Main.fla functional
• Resources and Calculate buttons load SWF files
• Requirements
–
–
–
–
SWF files load in level 1 of Flash Player
loadMovieNum() action will be added to each button
Action will execute after button is clicked
Files to load: Resources.swf and Calc.swf
New Perspectives on Macromedia Flash 8
31