Title: Adding Interactivity with ActionScript
1Tutorial 8
- Adding Interactivity with ActionScript
2Objectives
- 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
3Programming 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
4Sample Flash Application
5Working 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
6Code Hints in the Actions Panel
7Using Actions, Methods, and Functions
- 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)
8Writing ActionScript Using Variables,
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
9Writing ActionScript Using Variables,
Expressions, Operators, and Comments (continued)
- Types of operators
- Assignment operator () assigns value to
variable - Arithmetic operators , -, , and /
- Comparison operators lt, lt, gt, gt, , !
- Conditional statement
- Uses comparison operators to compare values
- Example if (x gt 50) gotoAndPlay(1)
- Comments explanatory notes set off by slashes
(//)
10Comment in Script Pane
11Writing 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
12ActionScript Syntax
13Exploring ActionScript Examples
- Leslies 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)
14ActionScript for Movie Clip
15Linking to Web Sites Using the getURL() Function
- 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
16getURL() Function
17Text Block Above Buttons
18Creating 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
19Using 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
20Dynamic Text Options
21Additional Options for Input Text
22Creating 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
23Dynamic Text Block For Cost Calculator Page
24Complete ActionScript Code
25Using 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
26Sample Preloaders
27Creating 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
fileelse continue playing the preloader
animation
28Changing the Width of a Movie Clip
29Creating a Preloader for the Jacksons 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
30ActionScript for Preloader
31Completing the Actions for the Jacksons Sports
Web Site
- 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