DIG2500c: Fundamentals of Interactive Design

1. Fall 2009 Semester Dr. Rudy McDaniel DIG2500c: Fundamentals of Interactive Design Lecture 9: ActionScript Programming: The Basics, Part 2

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

3. 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!

4. 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.

5. 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

6. This Week • Controlling the Timeline and Movie Clips • Loading External Web Pages • Conditional Logic • Loops • Functions

7. Controlling the Timeline and Movie Clips • Controlling the Timeline • Controlling Movie Clips • The gotoAndPlay and gotoAndStop functions • URL objects and functions

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

9. Controlling Movie Clips • Movie Clips can be controlled just like the main Timeline • Instance naming (we’ve seen this already) • The dot (.) syntax

10. The goto Actions • nextFrame(); • prevFrame(); • gotoAndStop(); v. gotoAndPlay();

11. Moving through Frames • nextFrame(); // moves to next frame in timeline • prevFrame(); // moves to previous frame in timeline

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

13. By Default • If we compile and run this SWF file with no ActionScript, it will create a strobe-like effect. • Live Demo

14. Adding a Timer and Frame Control

15. 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!

16. 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.

17. 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?

18. Example (Movie Clip “BlueBall”)

19. 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?

20. Example (Scene 1, Using Frame Number) • We use dot notation to specify the correct frame number to start playing from.

21. Example (Scene 1, Using Label) • Labels are useful because they will always work as expected during run time.

22. Revising the ActionScript • Makes the code much easier to understand from within the scene!

23. 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!

24. Go to Web Page Behavior Key Objects and Functions: • URLRequest(URL); • navigateToURL(URLRequest,target); • Relative v. Absolute Addressing • Targeting • Sending email with a mailto:URL link

25. Example Code (Using Exception Handling) var url:String = "http://www.dm.ucf.edu"; varrequest:URLRequest = new URLRequest(url); try { navigateToURL(request, '_blank'); // second argument is target } catch (e:Error) { trace ("Error occurred!"); }

26. 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.

27. Event Handling Code

28. 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.

29. 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

30. 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:

31. Steps to Compare Different Datatypes • 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. • 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. • If one operand is a number and the other is a string, convert the string to a number and go back to Step 1. • If either operand is a Boolean, null, or undefined, convert the operand to a number and go back to Step 1. • 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. • For any other condition, return false.

32. Add logical operators to gain more options • AND operator • (operand1) &&(operand2) • OR operator • (operand1) || (operand2) • NOT operator • !operand • Useful for constructing more complex logic

33. Simple Example (Using Input Text)

34. Dynamic Text Fields

35. Code Part I (Event Handler) • Note how we access the text field properties of our dynamic text inputs using dot notation.

36. Code Part II (Conditional Logic)

37. Live Demo • [Live Demo]

38. 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

39. For Loop Example • Easier to understand if we do an example: for (vari = 1; i <= 10; i++) { trace("Now serving number " + i); } • Remember that + here acts as a concatenation (glue) operator.

40. A More Complicated (But Interesting) Example • Did you know you can draw graphics without even using the GUI tools?

41. Output • Cool, huh? • How do you think we would change the: • Color? • Stroke? • Number of squares? • Distance between squares?

42. 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 }

43. While Loop Example • The same loop as before, but as a while loop vari = 1; while (i <= 10) { trace("Now serving number " + i); i++; }

44. Other Code as While Loop

45. In Review • Loops – limit the number of duplicate segments of code we have to write • Questions?

46. Homework • Keep Working on Lab 3 • Keep up with your readings from the Flash book!