© 2011 Delmar, Cengage Learning Chapter 10 Using ActionScript to Enhance User Experience

© 2011 Delmar, Cengage Learning

Chapter 10

Using ActionScript to Enhance User Experience

Chapter 10 Lessons

1. Create complex interactivity

2. Load movies at runtime

3. Work with conditional actions

4. Use ActionScript to create external links

© 2011 Delmar Cengage Learning


Use ActionScript to Enhance User Experience

• Introduction– You can use ActionScript to enhance

the user experience by:1. Replacing the mouse cursor with a custom

cursor

2. Tracking user interactions and offer feedback based on the data you gather

3. Breaking your movies into smaller movies



• Introduction– Creating conditional actions to implement

complex branching in your movies– Creating looping actions to help streamline

your ActionScript– Providing a way to repeat a set of actions

based on a value provided by the user or on a task you want the user to perform


Tools You’ll Use



Create Complex Interactivity

• Creating a custom cursor is a fun way for you to make a Flash site distinctive.

• You can integrate a custom cursor with the purpose of the site.

• The custom cursor can be a graphic, photograph, or even an animation.



• When you are implementing a custom cursor, the first step is to hide the regular cursor, using the mouse.hide method.

• Then you display the custom cursor which means you will have two cursors on the stage, but only the custom cursor is visible.



• You need to set up an event listener that “listens” for when the mouse moves.

• Mouse movement is tracked by mouseX and mouseY properties.

• As the user moves the mouse, the mouseX and mouseY values are updated constantly to reflect the current position.



ActionScript to create a custom cursor by setting X and Y coordinates

myCursor is the instance name of the custom cursor movie clip symbol

The mouse X and Y coordinates are passed to the custom cursor



• In ActionScript 3.0, you have the ability to reuse lines of code.

• This is especially applicable to functions (which are made up of blocks of code).

• You can have one event listener that calls (executes) the same function for more than one object.



Three objects that call the same function

These three objects call thesame function, clickToDrag

event.target refers to whichever object calls the function



• ActionScript includes an if action that can test whether certain conditions have been met and, if so, can perform other actions.



• Conditional statements offer many possibilities for building more interactive movies.

• You should enclose all the actions you want Flash to carry out in braces following the if action.

• If the conditions are not met, the actions in the braces are ignored.




This action is only carriedout when it is equal to 9



• The Display list is a list of all the items that will be visible on the screen in a Flash document, including: movie clips, drawn shapes, text fields, videos, and bitmaps.

• These items are Display Object types.



• Some of these display objects can have children.

• It is important, when you are referring to an object in ActionScript, to specify whether an object is a child or a parent.




This is checking to see if the mySquare object has been dropped on top of the parent (a movie clip) of the targetSquare object



• One aspect of interactivity involves responding to user actions, such as jumping to a different point in a movie when a user clicks a button.

• Another aspect involves providing users with individual feedback based on the actions they take or information they supply.



• When you collect information it presents many opportunities to offer user custom feedback.

• When you track interactions it can also provide you with insight on the way people work with your site or application.



• The increment and decrement actions are useful when you are tracking user interactions.– The increment action ++ (two plus signs)

adds 1 unit to a variable or expression– The decrement action - - (two minus signs)

subtracts 1 unit


Load Movies at Runtime

When you create multiple movies they create smoother transitions between pages because the new movies load into the current HTML page

A Flash site that takes advantage of using multiple movies



• Using multiple movies can help you keep organized during development of a movie, especially if different people are working on different parts of the movie.

• You can use the Loader class along with the addChild method to load an external movie, graphic, text block, or sound.



• When you are creating a link to a file, you can include an absolute path, which specifies the exact location of the file.

• A relative path indicates the location based on the current location of your movie file.



ActionScript for loading an SWF file in the same location as the Flash document

Code to load fish.swf file



• You can load a new movie with the original document or into a movie clip symbol.

• If you load a movie with the original document, the new movie inherits the frame rate, dimensions, and background color of the original document.



• You can use the removeChild method to unload movies which will create smoother transitions between movies.

• When you unload a movie, it is removed from the player but it is still available to be replayed without having to download it again.


Work with Conditional Actions

• ActionScript includes the else statement you can use to create more sophisticated branching.

• An else statement lets you specify one set of actions to run if a condition is true, and an alternate set to run if the condition is false.



If a condition has more than two possible states, you can use the else if to set up a series of possible branches

ActionScript using else if statements to create multiple branches



• You may not want passwords to be visible onscreen as users enter them. Instead you can set an input text field to display asterisks rather than the actual keystrokes being typed by the user.

• You can generate x and y Stage coordinate values for an object’s position using the Math.random function.


Use ActionScript to Create External Links

• Many websites contain links to other sites and you might want to create links to lead the user to a related site or just to another site you want to share.

• The URLRequest class along with the navigateToUL function lets you open another file or jump from a button or a movie clip symbol to another website.


ActionScript to display a website




• When you use the URLRequest to lead to another website, you must supply the URL for the file.

• Make sure you include the entire URL, including the protocol prefix, for example, http://www.adobe.com, which is known as an absolute path.

http://www.adobe.com/



• You can also use URLRequest to create an email link from a button or a movie clip symbol.

• To create an email link, you need to include mailto: and then the email address in the URL field of the URLRequest statement.

• If you want to create an email link from text, not a button or movie clip symbol, you can use the Properties panel.


New message window for a mailto:link


To: field filled inwith the addressyou specify

Documents

© 2011 Delmar, Cengage Learning Chapter 10 Using ActionScript to Enhance User Experience