dig2500c: fundamentals of interactive design
DESCRIPTION
Fall 2009 Semester Dr. Rudy McDaniel. DIG2500c: Fundamentals of Interactive Design. 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! - PowerPoint PPT PresentationTRANSCRIPT
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)
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!