Chapter 20 CS4 - Revision history

Robin: /* Exercise 1: Buttons */

2013-02-13T17:56:13Z

Exercise 1: Buttons

Michael: /* Chapter 20: ActionScript3.0 */

2013-01-24T18:08:05Z

Chapter 20: ActionScript3.0

Robin: /* Chapter 20: ActionScript3.0 */

2013-01-22T22:49:14Z

Chapter 20: ActionScript3.0

Robin: /* Chapter 20: ActionScript3.0 */

2013-01-22T22:12:32Z

Chapter 20: ActionScript3.0

Xtine: /* Exercise 2: Add Buttons to the Timeline */

2013-01-19T19:33:36Z

Exercise 2: Add Buttons to the Timeline

Xtine: /* Exercise 2: Add buttons to the Timeline */

2013-01-19T19:33:10Z

Exercise 2: Add buttons to the Timeline

Xtine: /* Exercise 2: Add buttons to the Timeline */

2013-01-19T19:29:37Z

Exercise 2: Add buttons to the Timeline

Xtine: /* Exercise 3: Stopping the Timeline */

2013-01-19T19:29:11Z

Exercise 3: Stopping the Timeline

Xtine: /* Exercise 4: Analyze the Code */

2013-01-19T19:28:39Z

Exercise 4: Analyze the Code

Xtine at 19:27, 19 January 2013

2013-01-19T19:27:05Z

@@ Line 33: / Line 33: @@
 =Exercise 1: Buttons=
 In this exercise, we are going to write ActionScript that starts and stops the animation we created in the last exercise of Chapter 19. Before we can start and stop the Timeline with code, we need to create a user interface, in this case buttons, that the viewer will use to control the Flash Timeline.
 . Open the final FLA file that you created in Chapter 19, or download and open our file from Chapter 19 on the wiki.
 . Insert a new symbol and choose Button from the Type pull-down panel menu. Name it startStopBtn.

@@ Line 25: / Line 25: @@
 IMAGE FROM TRIGGER HAPPY
-[[File:Firefox008.jpg|400px]]
+[[File:Firefox008.png|400px]]
 Trigger Happy, 1998, Jon Thomson and Alison Craighead, computer program written in Macromedia Director, the predecessor to Flash. ([http://www.thomson-craighead.net/docs/thap.html http://www.thomson-craighead.net/docs/thap.html])

← Older revision		Revision as of 22:49, 22 January 2013
Line 24:		Line 24:

	IMAGE FROM TRIGGER HAPPY		IMAGE FROM TRIGGER HAPPY
		+
		+	[[File:Firefox008.jpg\|400px]]

	Trigger Happy, 1998, Jon Thomson and Alison Craighead, computer program written in Macromedia Director, the predecessor to Flash. ([http://www.thomson-craighead.net/docs/thap.html http://www.thomson-craighead.net/docs/thap.html])		Trigger Happy, 1998, Jon Thomson and Alison Craighead, computer program written in Macromedia Director, the predecessor to Flash. ([http://www.thomson-craighead.net/docs/thap.html http://www.thomson-craighead.net/docs/thap.html])

← Older revision		Revision as of 22:12, 22 January 2013
Line 16:		Line 16:

	[http://commons.wikimedia.org/wiki/Image:Spacewar!-PDP-1-20070512.jpg http://commons.wikimedia.org/wiki/Image:Spacewar!-PDP-1-20070512.jpg]		[http://commons.wikimedia.org/wiki/Image:Spacewar!-PDP-1-20070512.jpg http://commons.wikimedia.org/wiki/Image:Spacewar!-PDP-1-20070512.jpg]
		+
		+	[[File:800px-Spacewar!-PDP-1-20070512.jpg\|400px]]

	Spacewar, 1961, Martin Graetz, Stephen Russell, and Wayne Wiitanen, computer program for DEC PDP-1 computer.		Spacewar, 1961, Martin Graetz, Stephen Russell, and Wayne Wiitanen, computer program for DEC PDP-1 computer.

@@ Line 89: / Line 89: @@
 . Create a new layer named go in the timeline. Since buttons are symbols, you can add multiple instances of the button to the stage. Add another instance of the button in frame 1 of the go layer on the right side of the Stage. Use the Color Effect tint style in the Properties panel to change the color of the button to green. The tint effect changes the color of all of the button states.
 <br><br>
-[[File:Fig20-07-go.jpg|450px]]
+[[File:Fig20-07-go.jpg|750px]]
 <br><br>
 . Click on the first instance of the button on the stop layer. Name the first instance of the button stop_btn using the Instance Name field of the Properties panel.
-[[File:Fig20-08-stopbtn.jpg|450px]]
+[[File:Fig20-08-stopbtn.jpg|750px]]
 <br><br>

@@ Line 80: / Line 80: @@
 . Return to the scene Timeline by clicking on the left arrow or the Scene 1 button near the top left of the Stage.
 <br><br>
-[[File:Fig20-05-scene.jpg|100px]]
+[[File:Fig20-05-scene.jpg]]
 <br><Br>
 . Create a new layer named stop above the circles layer in the Timeline. Insert your button on the stage at frame 1 of the stop layer. Position the button on top of the circle on the left side of the Stage.
 <br><br>
-[[File:Fig20-06-stop01.jpg|200px]]
+[[File:Fig20-06-stop01.jpg]]
 <br><br>
 . Test the animation (Command+Return). Move your mouse over the button and watch the button as it responds to your mouse interactivity. You should see the circle morph into another shape.
 . Create a new layer named go in the timeline. Since buttons are symbols, you can add multiple instances of the button to the stage. Add another instance of the button in frame 1 of the go layer on the right side of the Stage. Use the Color Effect tint style in the Properties panel to change the color of the button to green. The tint effect changes the color of all of the button states.
 <br><br>
-[[File:Fig20-07-go.jpg|200px]]
+[[File:Fig20-07-go.jpg]]
 <br><br>
 . Click on the first instance of the button on the stop layer. Name the first instance of the button stop_btn using the Instance Name field of the Properties panel.
-[[File:Fig20-08-stopbtn.jpg|250px]]
+[[File:Fig20-08-stopbtn.jpg]]
 <br><br>

@@ Line 116: / Line 116: @@
 <table class="infobox"><tr><td>Note: Notice the words “event handlers” in the first line of the code. In programming, event handlers are common subroutines which essentially handle inputs. An input is considered something like a key press or mouse movement.</td></tr></table>
 <br>
-[[File:Fig20-09-actions.jpg|350px]]
+[[File:Fig20-09-actions.jpg]]
 <br><br>

@@ Line 131: / Line 131: @@
 .	Every line ends with a semicolon (;) unless it is inside curly braces {}
-.	Commands contained in curly braces are set on a new line and indented
+<br>
 .	Every time an opening parenthesis or curly brace is used, a closing parenthesis or curly brace must close the statement, otherwise the code will not be read by the program properly and you will receive errors.
 .	The two slashes in the first line (//) are used to make a comment. Comments allow you to leave yourself or others notes in the code. This is especially helpful if part of the code is complex or not working. Anything which is put after a // will be ignored by the program when it runs the code.
 There are four parts to this code:
@@ Line 139: / Line 143: @@
 First, a programming standard is to create a comment for yourself or anyone who reads your code. The two slashes tell ActionScript that what follows is a comment. This part of the code is important because it describes what the code does, but it does not affect the functionality of the buttons.
+<br>
 import flash.events.MouseEvent;
+<br>
 This line imports code that the Adobe developers wrote to control mouse events. The mouse moving onto the button is a mouse event, as is a click on a button, or the mouse moving off the button.
+<br>
 stop_btn.addEventListener(MouseEvent.CLICK, pulseStop);
+<br><br>
 This code adds an event listener to listen for click events. This event listener is defined in the code we imported in the line above.
 An event listener waits for an event to happen before allowing the code to respond. An event listener is a method; in programming, a method is like a verb. Methods are activities.
 In this example, the event listener is waiting, or listening, for a mouse click (as specified in MouseEvent.CLICK) When the event listener hears an event, it executes the function we created called pulseStop(). A function is code that defines an action and can be reused. A function can be predefined by a computer language, like stop(), or it can be created by the programmer, like pulseStop().
+<br>
 function pulseStop(event:MouseEvent):void{
 	stop();
+}
 <br>
-<table class=“infobox”><tr><td>Every function has a set of parentheses after it; sometimes they are empty and sometimes they contain additional code. In this basic introduction, it is not necessary to worry about the extra code inside the parentheses.</td></tr></table>
+<table class="infobox"><tr><td>Every function has a set of parentheses after it; sometimes they are empty and sometimes they contain additional code. In this basic introduction, it is not necessary to worry about the extra code inside the parentheses.</td></tr></table>
-<br>
+<br><br>
 The pulseStop function is defined in these three lines (the final curly bracket constitutes a line). The first line declares the function and the last line ends the function. The code between the curly braces is the part that actually does something. This function stops the timeline.
 .Test the movie (Command+Return) and click on the stop button. If the stop button stops the timeline, bravo! Otherwise, it’s time to debug.
 .To debug, first look at the ActionScript Debug Console (Window > Debug panels > Debug Console). This panel will help you figure out what the bug is and where it is located in your code. The Debug Console provides the scene, layer, and frame of the bug. Sometimes it will even be able to diagnose the bug itself.
-<Br>
+<Br><br>
-<table class=“infobox”><tr><td>Tip: When you receive a bug which is vauge or unclear, it is often helpful to try searching for the bug in Google using quotes around the error message. Example: “Frame 10. unexpected error: 102”</td></tr></table>
+<table class="infobox"><tr><td>Tip: When you receive a bug which is vauge or unclear, it is often helpful to try searching for the bug in Google using quotes around the error message. Example: “Frame 10. unexpected error: 102”</td></tr></table>
-<br>
+<br><br>
 .At first, most of your bugs are going to be typos such as missing semicolons or misused lower or upper case. For instance, if you typed pay(); instead of play(); the debugger would reveal that the bug was on Scene 1, Layer “actions”, and Frame 1. It would provide a message such as “1180: Call to a possibly undefined method pay,” which means it doesn’t know of a method named “pay.” Of course “pay” is a typographic mistake for the word “play.” Fix the typo, and the code will validate and play as expected.

@@ Line 77: / Line 77: @@
 . Insert another keyframe in the Hit frame. This defines the clickable area of the button. Set the Hit state to the same circle as you have in the Up button state by deleting the square (which was a result of adding a keyframe), then copying the red circle from the Up frame and using Edit > Paste in Place on the Hit frame (Command+Shift+V).
-=Exercise 2:=
+=Exercise 2: Add buttons to the Timeline=
-=Exercise 3:=
+=Exercise 3: Stopping the Timeline=
-=Exercise 4:=
+stop_btn.addEventListener(MouseEvent.CLICK, pulseStop);
-=Exercise 5:=
+<table class="infobox"><tr><td>Note: Notice the words “event handlers” in the first line of the code. In programming, event handlers are common subroutines which essentially handle inputs. An input is considered something like a key press or mouse movement.</td></tr></table>