Adding Interactivity with ActionScript

1
Tutorial 8

• Adding Interactivity with ActionScript

2
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

3
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

4
Sample Flash Application
5
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

6
Code Hints in the Actions Panel
7
Using 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)

8
Writing 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

9
Writing 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
  (//)

10
Comment in Script Pane
11
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

12
ActionScript Syntax
13
Exploring 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)

14
ActionScript for Movie Clip
15
Linking 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

16
getURL() Function
17
Text Block Above Buttons
18
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

19
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

20
Dynamic Text Options
21
Additional Options for Input Text
22
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

23
Dynamic Text Block For Cost Calculator Page
24
Complete ActionScript Code
25
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

26
Sample Preloaders
27
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
  fileelse continue playing the preloader
  animation

28
Changing the Width of a Movie Clip
29
Creating 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

30
ActionScript for Preloader
31
Completing 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