dig2500c: fundamentals of interactive design

DIG2500c: Fundamentals of Interactive Design

Fall 2009 Semester

Dr. Rudy McDaniel

Lecture 9: ActionScript Programming: The Basics, Part 2

Reminder Lab 3 due this Friday by 5pm

Please name your files correctly and be sure to upload them into the correct directory!

From now on, all code examples from lecture can be found online here: http://www.dm.ucf.edu/~rmcdaniel/courses/dig2500c/code/ Both SWF and FLA files are available for

download

How to Study Don’t forget: treat these programming slides

like math problems. Try each and every example on your own until you understand how the logic and syntax works. It will be slow going at first, but you’ll become more comfortable with coding over time.

Download the examples from the web, tweak them, play with the values, and experiment! You’ll need to use these techniques for your final project!

Lecture Review from Last Time Computers are stupid. That makes

our jobs difficult as programmers.

Think iteratively and design in English, pseudocode, then code.

Last week, we discussed variables, variable typing, instance names, and basic dot notation on objects.

Remember the Method

Write it out in English first Then sort into the programming structures

Identify all variables, conditions, loops, and functions required

Write out in pseudo-code Refine pseudo-code

Investigate if functions close to what is needed are built into programming language Study vocabulary and syntax!

Then, code

This Week

Controlling the Timeline and Movie Clips

Loading External Web Pages

Conditional Logic

Loops

Functions

Controlling the Timeline and Movie Clips

Controlling the Timeline Controlling Movie Clips The gotoAndPlay and gotoAndStop

functions URL objects and functions

Controlling the Timeline

Movies by default play in their entirety until it reaches the last frame of the Timeline, unless you tell it to do otherwise.

ActionScript can control the movie with play and stop actions.

You can apply these actions to both frames and buttons

Controlling Movie Clips

Movie Clips can be controlled just like the main Timeline

Instance naming (we’ve seen this already)

The dot (.) syntax

The goto Actions

nextFrame(); prevFrame(); gotoAndStop(); v. gotoAndPlay();

Moving through Frames

nextFrame(); // moves to next frame in timeline

prevFrame(); // moves to previous frame in timeline

Example

Consider this scene, which has five keyframes, each which displays a box with a different background color

By Default

If we compile and run this SWF file with no ActionScript, it will create a strobe-like effect.

Live Demo

Adding a Timer and Frame Control

New Version

We control advancing through each keyframe, one time unit at a time.

Live Demo

At this point, we’ve used objects, functions, event handling, and timeline control functions!

gotoAndPlay vs. gotoAndStop Both move the playhead to specific locations

on the timeline. Can be used with frame numbers or frame labels.

gotoAndPlay: plays from a set frame until the next forced stop (either the end of the timeline or a stop() action).

gotoAndStop: goes to a set frame, plays it, then stops until the timeline is triggered again.

Questions

In general, when is it appropriate to use these different actions?

Specifically, when might each of these be appropriate in your interactive movie site?

Example (Movie Clip “BlueBall”)

Live Demo

[Live Demo]

But what if we want the blue ball and the green rectangle to animate independently of one another, and perhaps at irregular times?

What if we want to cycle a dropping ball on a different timetable?

Example (Scene 1, Using Frame Number)

We use dot notation to specify the correct frame number to start playing from.

Example (Scene 1, Using Label)

Labels are useful because they will always work as expected during run time.

Revising the ActionScript

Makes the code much easier to understand from within the scene!

Live Demo

[Live Demo]

Sequence of events: Main timeline animates BlueBall object is located (movie clip) The keyframe sequence labeled “drop”

within the BlueBall object animates

This allows for sophisticated animation within collections of movie clips!

Go to Web Page BehaviorKey Objects and Functions: URLRequest(URL); navigateToURL(URLRequest,target);

Relative v. Absolute Addressing Targeting Sending email with a mailto:URL link

Example Code (Using Exception Handling)

var url:String = "http://www.dm.ucf.edu"; var request:URLRequest = new URLRequest(url); try

{ navigateToURL(request, '_blank'); // second argument is target }

catch (e:Error) { trace ("Error occurred!"); }

Adding Event Handler

If we wanted to only create the URLRequest object when a button was clicked, we would need to attach an event handler for that button.

Event Handling Code

Live Demo

[Live Demo]

In this code, the web site is only launched once the user has clicked on the button.

We are gradually moving towards a more interactive experience.

Remember How Flash Works Flash movies play in their entirety

until they reach the last frame of the timeline, unless you tell it to do otherwise.

ActionScript can control a timeline with play(); and stop(); You can apply these actions to the main

timeline and to the timelines inside movieclips

Operators and Datatypes Most of the time, when we're using

comparison operators, we're comparing numbers

When the two operands of any comparison operator belong to different datatypes, or when neither operand is a string or a number, the interpreter attempts a type conversion according to the following steps:

Steps to Compare Different Datatypes1. If both operands are numbers, compare the operands

mathematically and return the result. If either number is (or if both numbers are) NaN, the result of the comparison is false, except in the case of the != operator.

2. If both operands are strings, compare the operands by Unicode code point and return the result. For characters in the Latin alphabet, this is a case-sensitive, alphabetic comparison.

3. If one operand is a number and the other is a string, convert the string to a number and go back to Step 1.

4. If either operand is a Boolean, null, or undefined, convert the operand to a number and go back to Step 1.

5. If either operand is an object, invoke its valueOf ( ) method to convert the object to a primitive value and go back to Step 1. If the valueOf ( ) method fails or does not return a primitive value, return false.

6. For any other condition, return false.

Add logical operators to gain more options AND operator

(operand1) &&(operand2) OR operator

(operand1) || (operand2) NOT operator

!operand Useful for constructing more

complex logic

Simple Example (Using Input Text)

Dynamic Text Fields

Code Part I (Event Handler)

Note how we access the text field properties of our dynamic text inputs using dot notation.

Code Part II (Conditional Logic)

Live Demo

[Live Demo]

Loops - The for Loop

Here's the syntax of the for loop: for (initialization; condition; update) { substatements }

Before the first iteration of a for loop, the initialization statement is performed (once and only once).

It is typically used to set the initial value of one or more iterator variables

For Loop Example

Easier to understand if we do an example:

for (var i = 1; i <= 10; i++) { trace("Now serving number " + i); }

Remember that + here acts as a concatenation (glue) operator.

A More Complicated (But Interesting) Example

Did you know you can draw graphics without even using the GUI tools?

Output Cool, huh? How do you

think we would change the: Color? Stroke? Number of

squares? Distance

between squares?

Loops – The while Loop

Structurally, a while statement is constructed much like an if statement: a main statement encloses a block of substatements that are executed only when a given condition is true:while (condition) { substatements}

While Loop Example

The same loop as before, but as a while loopvar i = 1;while (i <= 10) { trace("Now serving number " + i); i++;}

Other Code as While Loop

In Review

Loops – limit the number of duplicate segments of code we have to write

Questions?

Homework

Keep Working on Lab 3

Keep up with your readings from the Flash book!