Đăng Nhập
Latest topics
Thống Kê
Hiện có 2 người đang truy cập Diễn Đàn, gồm: 0 Thành viên, 0 Thành viên ẩn danh và 2 Khách viếng thăm Không
Số người truy cập cùng lúc nhiều nhất là 121 người, vào ngày Tue Feb 17, 2009 8:14 pm
Statistics
Diễn Đàn hiện có 99 thành viênChúng ta cùng chào mừng thành viên mới đăng ký: palzyli
Tổng số bài viết đã gửi vào diễn đàn là 180 in 140 subjects
ActionScript programing
Trang 1 trong tổng số 1 trang
ActionScript programing
ActionScript
overview
today we'll explore flash programming fundamentals
after each theory segment, we'll study an example: a multiple choice quiz
we'll build 3 versions of the quiz
user experience won't change with each quiz version
instead, we'll improve the code structure so it's:
# easier to maintain
# easier to extend
# faster to build
download example files here
the learning cycle
always remember: learning to program is a process, not an event
you should expect to learn something every time you program
don't worry if you don't follow everything the first time through
even those things you don't understand will give you get a sense of what's possible
speaking actionscript
programming languages are used to send information to and receive information from computers
programming languages have vocabulary and grammar used to communicate, just like human languages
using a programming language we tell a computer what to do or ask it for information
expressing logic
the art of programming lies in the formulation of logical steps
think of programming a computer like talking to a child:
# be explicit in every detail
# list every single step that's necessary to complete a task
flash's programming environment
Actions panel: the place you put your instructions
Window > Development panels > Actions (or "F9")
the "instructions" are known as "code" or "script"
Actions panel includes a quick reference pane for help while you code
you can also put code in external text files, but for now we'll stick to the actions panel
what you can do with actionscript
some of the things you can do with actionscript code:
# control the playhead of a timeline
# move things around
# create and manage user interfaces
# play sounds
# control video
# manage data (xml, lists, etc)
# communicate with server-side applications (e.g., web servers)
where to put the code
within a .fla file, code is attached to either a frame, button, or movie clip
to attach code to a frame, button, or movie clip, first select it, then type in the actions panel
notice that the actions panel title changes to match the current selection (Actions - Frame, Actions - Button, or Actions - Movie Clip
check the actions panel title before typing so you know what you're attaching your code to
code on a movie clip or button controls that clip or button
generally speaking, placing code on clips and buttons is discouraged, but is sometimes convenient
say hi to flash
select frame 1
type the following into the right side of the Actions panel:
var message = "Hi there Flash!";
that line of code constitutes a complete instruction, known as a statement
now create three more statements:
var firstName = "your name here"; trace(message); trace("Hi there, " + firstName + ", nice to meet you.");
the code doesn't do anything until we export a .swf file and play the movie
select Control>>Test Movie
storing information
take another look at our first line of code
var message = "Hi there Flash!";
a literal translation for that code is:
Flash, please remember a piece of information for me...
...specifically, remember the phrase 'Hi there Flash!'
...please label the information message so that i can ask you for it later
...whenever i ask you for message, give me back the text 'Hi there Flash!
storing information is one of the foundations of programming
you can label stored information so that it can be used later
variables
look at our second line of code again:
var firstName = "your name here";
it asks Flash to remember our first name and label it firstName
Flash can remember any information that is considered a valid type of data, such as numbers and text
in programming terms a piece of "text" is also known as string
an individual piece of data is known as a datum
a datum (e.g., "Hi there Flash!") and the label that identifies it (e.g., message) are together known as a variable
variable terminology
a variable's label ("message") is called its name
a variable's datum ("hi there Flash!") is called its value
a variable is said to "store" or "contain" its value
specifying a variable's value is called "assigning" or "setting" the variable
to assign a variable a value, use the equals sign: =
creating a variable is called declaring it
to declare a variable, use the keyword var
example sentence: "declare a new variable named message, and assign it the value "Hi there Flash!"
the interpreter
recall our third statement
trace(message);
it issues a command, trace, that causes data to appear in the Output window
how does that work?
when you create a variable or issue a command, you're actually addressing the ActionScript interpreter
the interpreter is the part of Flash that executes ActionScript code
the interpreter does the following:
# runs your programs
# manages your code
# listens for instructions
# performs any ActionScript commands
# stores your data
# sends you information
# calculates values
if the interpreter understands your commands, it sends them to the computer's processor for execution
if a command generates a result, the interpreter provides that response to you
if the interpreter can't understand the command, it sends you an error message
for example, try running this code:
= "test";
the interpreter outputs an error. it doesn't expect the = without a variable name
remember that the interpreter has to read your code, letter by letter, and try to understand it
error messages are GOOD! because they help you fix your code
arguments
commands usually require supplementary information to run
for example, the trace() command requires the text to display
the data sent to a command is called an argument
to supply an argument to a command, enclose the argument in parentheses, like this:
command(argument);
to supply multiple arguments to a command, separate them with commas, like this:
command(argument1, argument2, argument3);
supplying an argument to a command is known as passing the argument
for example, in the code gotoAndPlay(5):
# gotoAndPlay is the name of the command
# 5 is the argument being passed (the frame number)
some commands, (e.g., stop()) require parentheses but can not be passed arguments. we'll learn why later
operators
take another look at our fourth line of code:
trace("Hi there, " + firstName + ", nice to meet you.");
the + signs join (concatenate) our text together
+ is one example of a programming tool called an operator
operators are like conjunctions ("and," "or," "but," etc.) in human languages
all operators link phrases of code together
most operators transform data in some way
example operators:
# arithmetic: -, +, *, /
# comparison: < (less than), > (greater than)
logic in a program
we make millions of basic decisions in our daily lives
for example, when crossing the road we decide:
# if a car is coming, we wait for it to pass
# if a car is not coming, we cross the road
a program must make similar decisions based on the state of its environment
for example:
# if the user has seen the website's introduction already, don't show it again
# if the user specifies the wrong password to a restricted zone, don't show the restricted content
a "decision" in a program means choosing whether or not to execute a section of code
conditional statements
to let a program decide whether to execute code, we use a conditional statement (a.k.a., a "conditional")
generic conditional structure:
if (this condition is met) { then execute these lines of code }
for example:
if (username == "James Bond") { trace ("Welcome to my website, 007."); }
the equality operator, ==, tests if two data values are equal
don't mistake the equality operator (two equal signs ==) with the assignment operator (one equal sign =)!
to execute an alternative section of code when a condition is not met, use an else statement
if (userName == "James Bond") { trace ("Welcome to my website, 007."); } else { trace ("Sorry, only James Bond can use this site."); }
to execute one of many possible sections of code, use else if:
if (userName == "James Bond") { trace ("Welcome to my website, 007."); } else if (userName == "Moock") { trace("Welcome to my website, Colin."); } else { trace ("Sorry, only James Bond or Colin can use this site."); }
repetitive tasks
suppose you want to display a five-number sequence in the Output window, starting at any number
you could display the sequence like this:
trace(10); trace(11); trace(12); trace(13); trace(14);
if you want to start the sequence at 513, you have to retype all the numbers
trace(513); trace(514); trace(515); trace(516); trace(517);
to avoid this retyping, we use a variable:
var x = 1; trace (x); x = x + 1; trace (x); x = x + 1; trace (x); x = x + 1; trace (x); x = x + 1; trace (x);
to change the sequence starting number, just change the initial value of x
but what if we want to count to 500?
even with the variable, it's too much typing
loops
to perform repetitive tasks, we use a loop
a loop is type of statement that causes a block of code to be repeated
here's what the counting example looks like as a while loop:
var x = 1; while (x <= 5) { trace (x); x = x + 1; }
the statements to repeat are listed between the brackets: { }
the keyword while starts the loop
the comparison (x <= 5) indicates when to quit repeating the loop
the loop stops repeating when x is less than or equal to 5
to make the loop count to 500, simply change 5 to 500
the for loop
basic loops come in two varieties: a while loop and a for loop
for does the same thing as while, but with a different syntax
here's a for loop:
for (var x = 1; x <= 5; x = x + 1) { trace(x); }
the for loop is like a condensed while loop
the contents of the loop are the same, but rearranged:
initialize while (compare) { statements update } for (initialize; compare; update) { statements }
the for loop makes the initialization, comparison, and update easier to find
functions
a function is a group of statements packaged together to form a single, reusable command
functions let us write code once, but use it many times throughout a program
repetition is bad
suppose we use this code to display the area of a rectangle:
var height = 10; var width = 20; trace(width * height);
later we decide we want to display the area of five different rectangles
our code gets 5 times longer:
var height1 = 10; var width1 = 20; trace(width1 * height1); var height2 = 234; var width2 = 59; trace(width2 * height2); var height3 = 40; var width3 = 99; trace(width3 * height3); var height4 = 39; var width4 = 875; trace(width * height); var height5 = 3; var width5 = 2; trace(width5 * height5);
notice that the same three statements are used for each rectangle
repeating statements is error-prone and time-consuming
instead of repeating statements, create functions that contain the repeated code
an example function
here's a function that displays the area of a rectangle
function displayArea (width, height) { trace(width * height); }
the function keyword starts the function declaration
next comes the name of the function: displayArea
next comes a list of arguments used by the function, in parentheses: (width, height)
finally, we list the statements of the function, within brackets: { }
the statements contain the code that would otherwise have been repeated
running a function
to run a function use same format as trace() command earlier
first, specify the function name:
displayArea
then provide any required arguments:
displayArea(10, 20);
the statements inside the function then run with width set to 10 and height set to 20
running a function, illustrated
here is the flow of operations for our example function execution:
code comparison
here's our old code, with repeated statements:
var height1 = 10; var width1 = 20; trace(width1 * height1); var height2 = 234; var width2 = 59; trace(width2 * height2); var height3 = 40; var width3 = 99; trace(width3 * height3); var height4 = 39; var width4 = 875; trace(width * height); var height5 = 3; var width5 = 2; trace(width5 * height5);
here's the new code, with a function:
function displayArea (width, height) { trace(width * height); } displayArea(10, 20); displayArea(234, 59); displayArea(40, 99); displayArea(39, 875); displayArea(3, 2);
the new code is shorter
the new code is easier to understand
function names describe what the code is doing
code comments
to add even more descriptive information to our code, we use comments
a comment is a note in code that is meant to be read by programmers
any line of code that starts with // is a comment:
// This is a comment...
comments help programmers understand how code works
you should always narrate your code with comments
for example...
// Displays the area of a rectangle in Flash's Output window function displayArea (width, height) { trace(width * height); } // Display the area of five rectangles displayArea(10, 20); displayArea(234, 59); displayArea(40, 99); displayArea(39, 875); displayArea(3, 2);
exiting and returning values from functions
normally, a function ends when its last statement executes
but you can also stop a function manually, using a return statement
for example, this revised version of displayArea() quits before the area is ever displayed:
function displayArea (width, height) { return; trace(width * height); }
usually, we only quit functions early based on some condition
for example, this function quits if the supplied password is wrong:
function enterSite(pass) { if(pass != "cactus") { // Exit if the password is wrong: return; } // This code is reached only if the password is correct. gotoAndPlay("intro"); } enterSite("hackAttack"); // Function will exit prematurely enterSite("cactus"); // Function will end naturally
built-in functions
take another look at the command gotoAndPlay() from the previous example:
gotoAndPlay("intro");
gotoAndPlay() is a built-in function, provided by ActionScript
there are lots of built-in functions, and they are used just like any other function
returning to the point of execution
when a function finishes, the interpreter continues executing any code after the function call
for example:
// When this function is done displayArea(25, 10); // Execution resumes here trace("Done calculating area of first rectangle"); // When this function is done displayArea(13, 4); // Execution resumes here trace("Done calculating area of second rectangle");
returning information to the point of execution
return always terminates a function
but return can also send information back to the script that invoked the function
for example, the displayArea() function could return width*height instead of displaying it:
function displayArea (width, height) { return width * height; }
the information returned by a function is called a return value
using a function's return value
return values are often used to set a variable's value
for example, this code sets rectangleArea to 200:
var rectangleArea = displayArea(10, 20);
now that displayArea() returns the area instead of displaying it, we should rename it to getArea()
function getArea (width, height) { return width * height; }
return values can even be added together
// Sets totalArea to 260 var totalArea = getArea(10, 20) + getArea(5, 12);
objects
let's review a couple of concepts:
# a statement instructs Flash to do something
# a function groups multiple statements into a convenient command
an "object" takes the next logical step: it packages related functions and variables into a single code module
each object is like a self-contained, miniature program
multiple objects can be used together like building blocks to form complex functionality
object-oriented programming
object-oriented programming (oop) means structuring your code with objects
some languages require that all code be contained by some object (e.g., Java)
in flash, you can put all your code in objects if you want, but it's not mandatory
custom objects vs built-in objects
just as some functions are built-in to ActionScript, some objects are also built-in
built-in objects let us control:
# visuals (movie clips, buttons, text, video)
# sounds
# network communication
# ....and many other things in a movie
to program in flash, you must use the built-in objects
hence, some OOP knowledge is required, even if you don't structure your own code with objects
movie clip objects
each movie clip instance on stage is represented by an actionscript object
to control a movie clip object, we must give the movie clip an instance name
once a movie clip has a name, we can:
# set its variables (also called "properties")
# control it by calling its functions (also called "methods")
for example, suppose we give a movie clip the instance name ball
we can then set the horizontal position of the ball movie clip like this:
ball._x = 150;
and we can make the ball movie clip stop playing like this:
ball.stop();
the language of objects
using objects, we can create sentence-like instructions in code:
# the object is a noun
# the property is an adjective
# the method is a verb
for example:
object.property = value; noun.adjective = value;
object.method(); noun.verb();
let's see it all in action!
we've now learned quite a lot of theory
let's apply that theory to an example: a multiple choice quiz
quiz overview
two questions; each with three multiple-choice answers
users submit their answers by clicking answer buttons
user answers are recorded in a variable
answer variables are used to calculate the user's score
at the end of the quiz, the score is displayed
build the layer structure
make a layer called scripts on which to place code
keep the scripts layer at the top so it's easy to find
make a layer called labels for all labels in our movie
make four layers for our quiz assets
# quiz end: for the results screen
# question 2: for the second question screen
# question 1: for the first question screen
# choice buttons: for the answer buttons
# housing: for the background and instructions
add 30 frames to all layers
create the question 1 screen
frame 1, question 1 layer, add text: "1) When were movie clips introduced into Flash?"
below the question text add the answer text:
# Version 1
# Version 2
# Version 3
create the question 2 screen
select frame 1 of question 1 layer
right-click > copy frames
select frame 1 of question 2 layer
right-click > paste frames
insert blank keyframe at frame 10 of question 1 layer
at frame 10 of question 2 layer:
# change the question number from "1" to "2"
# change the text of the question to, "When was MP3 audio support added to Flash?"
# change the multiple choice answers to Version 3, Version 4, and Version 5
# notice that frames are used to represent application screens
add the answer buttons
create a simple button for the user to choose an answer
at frame 1 of choice buttons layer, place three answer button instances
set instance name for buttons to: choice1_btn, choice2_btn, and choice3_btn
initialize the quiz
add the code that initializes the movie to frame 1 of scripts layer
no preloader for this example
first describe what the code does with a comment:
// Initialize main timeline variables
next, create variables to store user's answers:
var q1answer; // User's answer for question 1 var q2answer; // User's answer for question 2
next, create a variable to track number of questions answered correctly:
var totalCorrect = 0; // Counts number of correct answers
finally, stop the movie at the first question:
stop();
variable naming styles
to indicate multiple words in variables use capital letters:
totalCorrect
or underscores:
total_correct
give variables and functions meaningful names
for example, avoid single letters, like "x" or abbreviations, like "tc"
well-named variables help you understand how the code works
add frame labels
question 2 is on frame 10, so when we want to display Question 2 we could do this:
gotoAndStop(10);
sensible code, right? WRONG!
if we add frames before frame 10, our code breaks!
to avoid this problem, use frame labels
# at frame 1, labels layer, set the label to init
# at frame 10, labels layer, add a blank keyframe
# at frame 10, labels layer, set the label to q2
# at frame 20, labels layer, add a blank keyframe
# at frame 20, labels layer, set the label to quizEnd
now we can add frames before question 2 and our code will still work
responding to answer button clicks
to submit an answer to a question, the user clicks the appropriate answer button
our code must record the user's choice in either q1answer or q2answer
how do we set a variable when a button is pressed?
using an event handler...
event-based code vs timeline code
two things cause code to run in flash:
# the playhead enters a frame with a script on it
# an event occurs (either user input or a system notification)
to run code in response to an event, we create an event handler function or an event listener object
today, we'll only study event handler functions
event broadcast
every event in flash is triggered by some object
for example:
# the Stage object tells you when the movie is resized
# the Key object tells you when a key is pressed
# a Button object tells you when a button is clicked
event-handler functions
to respond to a "button clicked" event from a button...
...define an event handler function on that button
theButton.onRelease = eventHandlerFunction;
# theButton is the button instance that was clicked
# onRelease is the name of the event
# eventHandlerFunction is the function that should run when the button is clicked
the eventHandlerFunction can be defined inline or somewhere else
// Define the event hanlder function inline... theButton.onRelease = function () { // Store the user's answer }
// Or define the event handler function separately... theButton.onRelease = storeAnswer; function storeAnswer () { // Store the user's answer }
here's the general format for event handler functions:
eventBroadcastingObject.nameOfEvent = eventHandlerFunction;
handling the answer button events, question 1
question 1 answer-button-handlers are defined on frame 1, scripts layer
here's the event handler function for answer button 1 of question 1:
// Code executed when button 1 is pressed. choice1_btn.onRelease = function () { this._parent.q1answer = 1; this._parent.gotoAndStop("q2"); };
the function does two things:
# records the user's choice in q1answer
# displays question 2
new code introduced:
# this means choice1_btn (the button that broadcast the event)
# _parent means the timeline containing choice1_btn
code for other two answer buttons follows same pattern:
// Code executed when button 2 is pressed. choice2_btn.onRelease = function () { this._parent.q1answer = 2; this._parent.gotoAndStop("q2"); }; // Code executed when button 3 is pressed. choice3_btn.onRelease = function () { this._parent.q1answer = 3; this._parent.gotoAndStop("q2"); };
handling the answer button events, question 2
frame 10, scripts layer, add a blank keyframe
question 2 answer-button-handlers are defined on frame 10, scripts layer:
// Code executed when button 1 is pressed. choice1_btn.onRelease = function () { this._parent.q2answer = 1; this._parent.gotoAndStop("quizEnd"); }; // Code executed when button 2 is pressed. choice2_btn.onRelease = function () { this._parent.q2answer = 2; this._parent.gotoAndStop("quizEnd"); }; // Code executed when button 3 is pressed. choice3_btn.onRelease = function () { this._parent.q2answer = 3; this._parent.gotoAndStop("quizEnd"); };
code for question 2 answer buttons is identical to question 1 buttons except:
# user's choice is stored in q2answer (instead of q1answer)
# quiz end screen is displayed (instead of question 2)
ending the quiz
quiz is mostly functional
to finish it, we'll:
# build a final results screen
# calculate and display the user's score
building the results screen
frame 20, scripts layer, add a blank keyframe for score-calculation code
frame 20, question 2 layer, add a blank keyframe
frame 20, choice buttons layer, add a blank keyframe
frame 20, quiz end layer, add a blank keyframe
frame 20, quiz end layer, add text "Thank you for taking the quiz!"
calculating the user's score
the score-calculation code is attached to frame 20, scripts layer
recall that the user's score is stored in the variable totalCorrect
if the answer to question 1 is correct, add one to totalCorrect (3 is the correct answer)
if (q1answer == 3) { totalCorrect = totalCorrect + 1; }
if the answer to question 2 is correct, add another one to totalCorrect (2 is the correct answer)
if (q2answer == 2) { totalCorrect++; }
the ++ operator adds one to a variable
totalCorrect now stores the user's score
displaying the score on screen
to display the user's score, create a text field:
this.createTextField("totalOutput_txt", 1, 150, 200, 200, 20);
this is main movie timeline
createTextField() is a built-in MovieClip method
totalOutput_txt is the name of the text field
now display the score in the text field:
totalOutput_txt.text = "Your final score is: " + totalCorrect + "/2.";
notice that the text field is an object (lots of things are objects)
the text property is the text to display on screen
a little fun
break time! let's make a mouse toy
see mouseTrailer-01.swf through mouseTrailer-04.swf in /examples/visuals folder
experimentation is key
build something simple, then play with it (change values, parameters, etc)
centralizing code
our quiz has two problems:
# the code is spread over three frames (hard to find, understand)
# the button handler code is very repetitious (prone to error)
to fix these problems, we'll:
# move all code to frame 1
# introduce two functions: answer() and gradeUser()
quiz v2, initialization
as before, we stop our quiz on question 1:
stop();
then initialize variables
we use q1answer and q2answer just like last time:
var q1answer; // User's answer for question 1 var q2answer; // User's answer for question 2
and we add these new variables:
var numQuestions = 2; // Number of questions in the quiz var correctAnswer1 = 3; // The correct choice for question 1 var correctAnswer2 = 2; // The correct choice for question 2 var currentQuestion = 1; // The question being answered
the answer() function
purpose: to reduce code repetition in answer button handlers
each answer button will call answer() when pressed
answer() has two duties:
# record the user's choice
# advance the quiz to either: a) the next question, b) the end results screen
here's the answer function skeleton:
function answer (choice) { }
choice parameter stores the user's answer
asserting that the code works
first task in the function: debugging information
display the current question and choice in the Output window:
function answer (choice) { trace("Question " + currentQuestion + ". The user answered: " + choice); }
we can now check if the code is doing what we expect
build code incrementally: when one section works, build the next section
setting the answer variables
when answer() runs, we must set either q1answer or q2answer
how do we know which one to set?
the currentQuestion variable tells us
when currentQuestion is 1, we should set q1answer
when currentQuestion is 2, we should set q2answer
here's how that looks in code:
function answer (choice) { // Display the question and answer in the Output window for debugging. trace("Question " + currentQuestion + ". The user answered: " + choice); // Record the user's answer to this question. if (currentQuestion == 1) { q1answer = choice; } else if (currentQuestion == 2) { q2answer = choice; } }
advancing the quiz
once the answer has been recorded, we advance the quiz
if the current question is the last question...
# ...calculate user's score and display the results screen
if the current question is not the last question...
# ...display the next question
here's the code:
function answer (choice) { // Display the question and answer in the Output window for debugging. trace("Question " + currentQuestion + ". The user answered: " + choice); // Record the user's answer to this question. if (currentQuestion == 1) { q1answer = choice; } else if (currentQuestion == 2) { q2answer = choice; } // If we're on the last question... if (currentQuestion == numQuestions) { // ...go to the quiz end frame. gotoAndStop("quizEnd"); // And grade the user. gradeUser(); } else { // ...otherwise, go to the next question frame. gotoAndStop("q"+ (currentQuestion + 1)); // Note that we're on the next question. currentQuestion++; } }
subcontracting labour
notice that the answer() function calls a separate function, gradeUser()
the code in gradeUser() could have been contained within answer()
but its wiser to do one-task-per-function
following the one-task-per-function rule makes code:
# easier to debug
# more reusable (each function can be independently)
new answer button handlers
here are the new event handler functions for the answer buttons:
choice1_btn.onRelease = function () { this._parent.answer(1); }; choice2_btn.onRelease = function () { this._parent.answer(2); }; choice3_btn.onRelease = function () { this._parent.answer(3); };
code repetition is reduced
answer() function keeps track of the current question...
...hence, handlers for question 1 and question 2 answer buttons can be the same!
grading the user
when the quiz is over, answer() calls gradeUser()
gradeUser() has two duties:
# calculate the user's score
# display the user's score on screen
once again, start the function with debugging information:
function gradeUser() { trace("Quiz complete. Now grading..."); }
tallying the score
to store the user's score, we'll create a variable, totalCorrect:
function gradeUser() { trace("Quiz complete. Now grading..."); var totalCorrect = 0; }
a variable defined within a function is called a local variable
local variables are deleted automatically when a function ends
calculate the score with a loop
we'll use a loop to calculate the user's score
the loop runs once for every question in the quiz:
for (var i = 1; i <= numQuestions; i++) { }
the loop body checks each answer to see if it is correct
for (var i = 1; i <= numQuestions; i++) { if (eval("q" + i + "answer") == eval("correctAnswer" + i)) { totalCorrect++; } }
the built-in eval() function returns the value of the specified variable
the first time the loop runs, i is 1...
...so the loop body reads:
if (eval("q" + 1 + "answer") == eval("correctAnswer" + 1)) { totalCorrect++; }
which is equivalent to:
if (q1answer == correctAnswer1) { totalCorrect++; }
the second time the loop runs, i is 2...
...so the loop body reads:
if (eval("q" + 2 + "answer") == eval("correctAnswer" + 2)) { totalCorrect++; }
which is equivalent to:
if (q2answer == correctAnswer2) { totalCorrect++; }
when the loop is finished, the final score is ready for display
displaying the score
the score-display code from quiz v1 has moved to gradeUser():
this.createTextField("totalOutput_txt", 1, 150, 200, 200, 20); totalOutput_txt.text = "Your final score is: " + totalCorrect + "/" + numQuestions;
add a little formatting to the text:
var format = new TextFormat(); format.size = 16; format.color = 0xC7FF9C; format.font = "_sans"; format.bold = true; totalOutput_txt.setTextFormat(format);
quiz v2, final code
here's all the code for version 2 of the quiz:
// * INITIALIZATION * // Stop the movie at the first question. stop(); // Init quiz variables var numQuestions = 2; // Number of questions in the quiz var q1answer; // User's answer for question 1 var q2answer; // User's answer for question 2 var correctAnswer1 = 3; // The correct choice for question 1 var correctAnswer2 = 2; // The correct choice for question 2 var currentQuestion = 1; // The question being answered. // * FUNCTIONS * // Function: answer() // Desc: Registers the user's answers to quiz questions and // advances the quiz through its questions. function answer (choice) { // Display the question and answer in the Output window for debugging. trace("Question " + currentQuestion + ". The user answered: " + choice); // Record the user's answer to this question. if (currentQuestion == 1) { q1answer = choice; } else if (currentQuestion == 2) { q2answer = choice; } // If we're on the last question... if (currentQuestion == numQuestions) { // ...go to the quiz end frame. gotoAndStop("quizEnd"); // And grade the user. gradeUser(); } else { // Note that we're on the next question. currentQuestion++; // ...otherwise, go to the next question frame. gotoAndStop("q"+ (currentQuestion + 1)); } } // Function: gradeUser() // Desc: Tallys the user's score at the end of the quiz. function gradeUser() { // Report that we're about to grade the quiz in the Output window. trace("Quiz complete. Now grading..."); // Create a local variable to track the // number of questions user answered correctly. var totalCorrect = 0; // Count how many questions the user answered correctly. // For each question... for (var i = 1; i <= numQuestions; i++) { // If the user's answer matches the correct answer. if(eval("q" + i + "answer") == eval("correctAnswer" + i)) { // Give the user a point. totalCorrect++; } // Display the correct answer and the user's answer // in the Output window for debugging. trace("Question " + i + ". Correct answer: " + eval("correctAnswer" + i) + ". User's answer: " + eval("q" + i + "answer")); } // Display the final score in the Output window for debugging. trace("User's score: " + totalCorrect + "/" + numQuestions); // Create an onscreen text field do display the user's score. this.createTextField("totalOutput_txt", 1, 150, 200, 200, 20); // Show the user's score in an onscreen text field. totalOutput_txt.text = "Your final score is: " + totalCorrect + "/" +numQuestions; // Customize the font face, size, and color for the text field. var formatObj = new TextFormat(); formatObj.size = 16; formatObj.color = 0xC7FF9C; formatObj.font = "_sans"; formatObj.bold = true; totalOutput_txt.setTextFormat(formatObj); } // * EVENT HANDLERS * // Code executed when button 1 is pressed. choice1_btn.onRelease = function () { // Call answer(), which records the user's choice // and advances the quiz to the next question. this._parent.answer(1); }; // Code executed when button 2 is pressed. choice2_btn.onRelease = function () { this._parent.answer(2); }; // Code executed when button 3 is pressed. choice3_btn.onRelease = function () { this._parent.answer(3); };
improving the data structure
quiz code is now quite clean
but the data handling is awkward
each user choice and each correct answer require a variable
answer() function code increases with each question
consider the code required to record answers in a 10-question quiz:
// Record the user's answer to this question. if (currentQuestion == 1) { q1answer = choice; } else if (currentQuestion == 2) { q2answer = choice; } else if (currentQuestion == 3) { q3answer = choice; } else if (currentQuestion == 4) { q4answer = choice; } else if (currentQuestion == 5) { q5answer = choice; } else if (currentQuestion == 6) { q6answer = choice; } else if (currentQuestion == 7) { q7answer = choice; } else if (currentQuestion == { q8answer = choice; } else if (currentQuestion == 9) { q9answer = choice; } else if (currentQuestion == 10) { q10answer = choice; }
now imagine a 100-question quiz!
problems with the code:
# time consuming to create
# error prone
working with lists of information
the data in the quiz can be treated as lists of information:
# the list of user answers
# the list of correct answers
to handle these lists more efficiently use arrays
the anatomy of an array
an array is a list of data values
this code assigns string values to two variables:
fruit1 = "oranges"; // A single string value fruit2 = "apples"; // Another string value
this code creates an array to store both values:
var fruitList = ["oranges", "apples"];
two ways to create an array:
# array literal
["item1", "item2"]
# array constructor:
new Array("item1", "item2")
in ActionScript, arrays can contain any kind of data
here's an array with both strings and numbers:
shoppingList = ["oranges", 5, "apples", 2];
array elements
each item stored in an array is called an element
each element's position in the array is its index
indices start at 0
for example, here are the indices for shoppingList:
0: "oranges" 1: 5 2: "apples" 3: 2
the number of elements in an array is called its length
for example, the shoppingList's length is 4
retrieving an element's value
to get an element's value, use this syntax:
theArray[theElementIndex]
for example:
var numberOfOranges = shoppingList[1];
or use variables instead of numbers to specify the element index
for example:
var index = 3; // Set numApples to 2 var numberOfApples = shoppingList[index];
the element index can also be calculated:
// Set numberOfApples to 2 var numberOfApples = shoppingList[5 - 2];
setting an element's value
to set an element's value, use this syntax:
theArray[theElementIndex] = theValue;
for example:
// Make an array var cities = ["Toronto", "Montreal", "Vancouver", "Tokyo"]; // cities is now: ["Toronto", "Montreal", "Vancouver", "Tokyo"] // Set the value of the array's first element // cities becomes ["London", "Montreal", "Vancouver", "Tokyo"] cities[0] = "London"; // Set the value of the array's fourth element // cities becomes ["London", "Montreal", "Vancouver", "Hamburg"] cities[3] = "Hamburg";
or:
var i = 1; // Set the value of element i // cities becomes ["London", "Prague", "Vancouver", "Hamburg"] cities[i] = "Prague";
looping through an array's elements
use a loop to systematically process the contents of an array
this code reports the location of the element with the value "hip hop":
// Create an array var soundtracks = ["electronic", "hip hop", "pop", "alternative", "classical"]; // Check each element to see if it contains "hip hop" for (var i = 0; i < soundtracks.length; i++) { trace("now examining element: " + i); if (soundtracks[i] == "hip hop") { trace("the location of 'hip hop' is index: " + i); break; } }
array methods
an array is an object with methods to manage its elements
the push() method adds one or more elements to the end of an array
for example:
// Create an array with 2 elements var menuItems = ["home", "quit"]; // Add an element // menuItems becomes ["home", "quit", "products"] menuItems.push("products"); // Add two more elements // menuItems becomes ["home", "quit", "products", "services", "contact"] menuItems.push("services", "contact");
the pop() method removes the last element of an array
for example:
var numbers = [56, 57, 58]; numbers.pop(); // numbers is now 56, 57 trace(numbers)
the unshift() method adds one or more elements to the beginning of the array
for example:
// Create an empty array (notice the use of the Array constructor) var flashVersions = new Array(); // Add an element flashVersions[0] = 5; // Add another element, bumping the previous 0 element up flashVersions.unshift(4); // flashVersions is now [4, 5] // Add two elements at once flashVersions.unshift(2,3); // flashVersions is now [2, 3, 4, 5]
the shift() method removes an element from the beginning of an array
for example:
var sports = ["hackey sack", "snowboarding", "inline skating"]; sports.shift(); // Now ["snowboarding", "inline skating"] sports.shift(); // Now ["inline skating"]
other methods perform various array manipulations:
# sort and reverse reorder the elements in an array
# splice() removes or adds elements from any part of an array
# slice() and concat() create new arrays based on existing arrays
# toString() and join() convert arrays to strings
a little more fun
time for some more visual experiments
# a random pattern generator (see randomPattern-01.swf through randomPattern-03.swf in /examples/visuals folder)
# a mouse follower (see moveTowards.swf in /examples/visuals folder)
using arrays in quiz v3
update the quiz to track answers with arrays
we'll make changes to initialization code and functions
but answer button event handler code will not change
quiz v3, initialization
except for line 1, initialization code has completely changed
line 1, stop the movie at question 1:
stop()
next, q1answer and q2answer are replaced by userAnswers array:
var userAnswers = new Array();
likewise, correctAnswer1 and correctAnswer2 are replaced by correctAnswers array:
var correctAnswers = [3, 2];
using correctAnswers, we can calculate the number of questions in the quiz:
var numQuestions = correctAnswers.length;
if the number of questions in correctAnswers changes, numQuestions updates automatically!
quiz v3, answer() function
quiz v3's answer() has the same duties as v2's answer():
# record the user's choice
# advance the quiz to either: a) the next question, b) the end results screen
so the function skeleton is the same:
function answer (choice) { }
quiz v3, recording the user's choice
this time, the choice is stored in userAnswers instead of q1answer:
userAnswers.push(choice);
quiz v3, asserting that the code works
once again, we assert that the code works
but this time, currentQuestion is based on the number of questions answered so far:
var currentQuestion = userAnswers.length;
and the user's answer is the last element in the userAnswers array
the index of the last element in an array is always one less than the array's length:
theArray[theArray.length - 1]
so here's our new debugging code:
trace("Question " + currentQuestion + ". The user answered: " + userAnswers[userAnswers.length - 1]);
quiz v3, advancing the quiz
quiz advancing in v3 is like v2 with one exception...
...the currentQuestion is not incremented
the userAnswers array length indicates the current question automatically
// If we're on the last question... if (currentQuestion == numQuestions) { // ...go to the quiz end frame. gotoAndStop("quizEnd"); // And grade the user. gradeUser(); } else { // ...otherwise, go to the next question frame. this.gotoAndStop("q"+ (currentQuestion + 1)); }
quiz v3, gradeUser()
v3's gradeUser() has the same duties as v2's gradeUser():
# calculate user's score
# display score on screen
display code has not changed
only score calculation code has changed
old code:
for (var i = 1; i <= numQuestions; i++) { if (eval("q" + i + "answer") == eval("correctAnswer" + i)) { totalCorrect++; } }
new code:
for (var i=0; i < numQuestions; i++) { if(userAnswers[i] == correctAnswers[i]) { totalCorrect++; } }
note that new loop starts at 0 because array indices start at 0
quiz v3, final code
here's the final code for quiz v3:
// Stop the movie at the first question. stop(); // =================== // INIT QUIZ VARIABLES // =================== // Create an array to contain user's answers. var userAnswers = new Array(); // Create an array to contain each question's correct answer. var correctAnswers = [3, 2]; // Create a convenience variable to store the number of // questions in the quiz. var numQuestions = correctAnswers.length; // ===================== // CREATE QUIZ FUNCTIONS // ===================== // Function: answer() // Desc: Registers the user's answers to quiz questions and // advances the quiz through its questions. // Params: choice The user's answer for the current question. function answer (choice) { // Add the current answer to the list of user answers. userAnswers.push(choice); // Create a convenient variable to store the number // of the current question. var currentQuestion = userAnswers.length; // Display the question and answer in the Output window for debugging. trace("Question " + currentQuestion + ". The user answered: " + userAnswers[userAnswers.length-1]); // If we're on the last question... if (currentQuestion == numQuestions) { // ...go to the quiz end frame. gotoAndStop("quizEnd"); // And grade the user. gradeUser(); } else { // ...otherwise, go to the next question frame. this.gotoAndStop("q"+ (currentQuestion + 1)); } } // Function: gradeUser() // Desc: Tallys the user's score at the end of the quiz. function gradeUser() { // Report that we're about to grade the quiz in the Output window. trace("Quiz complete. Now grading..."); // Create a local variable to track the // number of questions user answered correctly. var totalCorrect = 0; // Count how many questions the user answered correctly. // For each question... for (var i=0; i < numQuestions; i++) { // If the user's answer matches the correct answer. if(userAnswers[i] == correctAnswers[i]) { // Give the user a point. totalCorrect++; } // Display the correct answer and the user's answer // in the Output window for debugging. trace("Question " + (i + 1) + ". Correct answer: " + correctAnswers[i] + ". User's answer: " + userAnswers[i]); } // Display the final score in the Output window for debugging. trace("User's score: " + totalCorrect + "/" + numQuestions); // Create an onscreen text field do display the user's score. this.createTextField("totalOutput_txt", 1, 150, 200, 200, 20); // Show the user's score in an onscreen text field. totalOutput_txt.text = "Your final score is: " + totalCorrect + "/" + numQuestions; // Customize the font face, size, and color of the text field. var format = new TextFormat(); format.size = 16; format.color = 0xC7FF9C; format.font = "_sans"; format.bold = true; totalOutput_txt.setTextFormat(format); } // ================================= // DEFINE QUIZ BUTTON EVENT HANDLERS // ================================= // Code executed when button 1 is pressed. choice1_btn.onRelease = function () { // Call answer(), which records the user's choice // and advances the quiz to the next question. this._parent.answer(1); }; // Code executed when button 2 is pressed. choice2_btn.onRelease = function () { this._parent.answer(2); }; // Code executed when button 3 is pressed. choice3_btn.onRelease = function () { this._parent.answer(3); };
building blocks
for our last bit of fun, we'll combine our earlier mouse follower and random pattern experiments
remember that complex programs are just like lots of little simple programs combined
see moveAway-01.swf through moveAway-07.swf in /examples/visuals
summary
code is fun, even when you only know a little!
you can learn a lot quite quickly
best way to improve: play and experiment
overview
today we'll explore flash programming fundamentals
after each theory segment, we'll study an example: a multiple choice quiz
we'll build 3 versions of the quiz
user experience won't change with each quiz version
instead, we'll improve the code structure so it's:
# easier to maintain
# easier to extend
# faster to build
download example files here
the learning cycle
always remember: learning to program is a process, not an event
you should expect to learn something every time you program
don't worry if you don't follow everything the first time through
even those things you don't understand will give you get a sense of what's possible
speaking actionscript
programming languages are used to send information to and receive information from computers
programming languages have vocabulary and grammar used to communicate, just like human languages
using a programming language we tell a computer what to do or ask it for information
expressing logic
the art of programming lies in the formulation of logical steps
think of programming a computer like talking to a child:
# be explicit in every detail
# list every single step that's necessary to complete a task
flash's programming environment
Actions panel: the place you put your instructions
Window > Development panels > Actions (or "F9")
the "instructions" are known as "code" or "script"
Actions panel includes a quick reference pane for help while you code
you can also put code in external text files, but for now we'll stick to the actions panel
what you can do with actionscript
some of the things you can do with actionscript code:
# control the playhead of a timeline
# move things around
# create and manage user interfaces
# play sounds
# control video
# manage data (xml, lists, etc)
# communicate with server-side applications (e.g., web servers)
where to put the code
within a .fla file, code is attached to either a frame, button, or movie clip
to attach code to a frame, button, or movie clip, first select it, then type in the actions panel
notice that the actions panel title changes to match the current selection (Actions - Frame, Actions - Button, or Actions - Movie Clip
check the actions panel title before typing so you know what you're attaching your code to
code on a movie clip or button controls that clip or button
generally speaking, placing code on clips and buttons is discouraged, but is sometimes convenient
say hi to flash
select frame 1
type the following into the right side of the Actions panel:
var message = "Hi there Flash!";
that line of code constitutes a complete instruction, known as a statement
now create three more statements:
var firstName = "your name here"; trace(message); trace("Hi there, " + firstName + ", nice to meet you.");
the code doesn't do anything until we export a .swf file and play the movie
select Control>>Test Movie
storing information
take another look at our first line of code
var message = "Hi there Flash!";
a literal translation for that code is:
Flash, please remember a piece of information for me...
...specifically, remember the phrase 'Hi there Flash!'
...please label the information message so that i can ask you for it later
...whenever i ask you for message, give me back the text 'Hi there Flash!
storing information is one of the foundations of programming
you can label stored information so that it can be used later
variables
look at our second line of code again:
var firstName = "your name here";
it asks Flash to remember our first name and label it firstName
Flash can remember any information that is considered a valid type of data, such as numbers and text
in programming terms a piece of "text" is also known as string
an individual piece of data is known as a datum
a datum (e.g., "Hi there Flash!") and the label that identifies it (e.g., message) are together known as a variable
variable terminology
a variable's label ("message") is called its name
a variable's datum ("hi there Flash!") is called its value
a variable is said to "store" or "contain" its value
specifying a variable's value is called "assigning" or "setting" the variable
to assign a variable a value, use the equals sign: =
creating a variable is called declaring it
to declare a variable, use the keyword var
example sentence: "declare a new variable named message, and assign it the value "Hi there Flash!"
the interpreter
recall our third statement
trace(message);
it issues a command, trace, that causes data to appear in the Output window
how does that work?
when you create a variable or issue a command, you're actually addressing the ActionScript interpreter
the interpreter is the part of Flash that executes ActionScript code
the interpreter does the following:
# runs your programs
# manages your code
# listens for instructions
# performs any ActionScript commands
# stores your data
# sends you information
# calculates values
if the interpreter understands your commands, it sends them to the computer's processor for execution
if a command generates a result, the interpreter provides that response to you
if the interpreter can't understand the command, it sends you an error message
for example, try running this code:
= "test";
the interpreter outputs an error. it doesn't expect the = without a variable name
remember that the interpreter has to read your code, letter by letter, and try to understand it
error messages are GOOD! because they help you fix your code
arguments
commands usually require supplementary information to run
for example, the trace() command requires the text to display
the data sent to a command is called an argument
to supply an argument to a command, enclose the argument in parentheses, like this:
command(argument);
to supply multiple arguments to a command, separate them with commas, like this:
command(argument1, argument2, argument3);
supplying an argument to a command is known as passing the argument
for example, in the code gotoAndPlay(5):
# gotoAndPlay is the name of the command
# 5 is the argument being passed (the frame number)
some commands, (e.g., stop()) require parentheses but can not be passed arguments. we'll learn why later
operators
take another look at our fourth line of code:
trace("Hi there, " + firstName + ", nice to meet you.");
the + signs join (concatenate) our text together
+ is one example of a programming tool called an operator
operators are like conjunctions ("and," "or," "but," etc.) in human languages
all operators link phrases of code together
most operators transform data in some way
example operators:
# arithmetic: -, +, *, /
# comparison: < (less than), > (greater than)
logic in a program
we make millions of basic decisions in our daily lives
for example, when crossing the road we decide:
# if a car is coming, we wait for it to pass
# if a car is not coming, we cross the road
a program must make similar decisions based on the state of its environment
for example:
# if the user has seen the website's introduction already, don't show it again
# if the user specifies the wrong password to a restricted zone, don't show the restricted content
a "decision" in a program means choosing whether or not to execute a section of code
conditional statements
to let a program decide whether to execute code, we use a conditional statement (a.k.a., a "conditional")
generic conditional structure:
if (this condition is met) { then execute these lines of code }
for example:
if (username == "James Bond") { trace ("Welcome to my website, 007."); }
the equality operator, ==, tests if two data values are equal
don't mistake the equality operator (two equal signs ==) with the assignment operator (one equal sign =)!
to execute an alternative section of code when a condition is not met, use an else statement
if (userName == "James Bond") { trace ("Welcome to my website, 007."); } else { trace ("Sorry, only James Bond can use this site."); }
to execute one of many possible sections of code, use else if:
if (userName == "James Bond") { trace ("Welcome to my website, 007."); } else if (userName == "Moock") { trace("Welcome to my website, Colin."); } else { trace ("Sorry, only James Bond or Colin can use this site."); }
repetitive tasks
suppose you want to display a five-number sequence in the Output window, starting at any number
you could display the sequence like this:
trace(10); trace(11); trace(12); trace(13); trace(14);
if you want to start the sequence at 513, you have to retype all the numbers
trace(513); trace(514); trace(515); trace(516); trace(517);
to avoid this retyping, we use a variable:
var x = 1; trace (x); x = x + 1; trace (x); x = x + 1; trace (x); x = x + 1; trace (x); x = x + 1; trace (x);
to change the sequence starting number, just change the initial value of x
but what if we want to count to 500?
even with the variable, it's too much typing
loops
to perform repetitive tasks, we use a loop
a loop is type of statement that causes a block of code to be repeated
here's what the counting example looks like as a while loop:
var x = 1; while (x <= 5) { trace (x); x = x + 1; }
the statements to repeat are listed between the brackets: { }
the keyword while starts the loop
the comparison (x <= 5) indicates when to quit repeating the loop
the loop stops repeating when x is less than or equal to 5
to make the loop count to 500, simply change 5 to 500
the for loop
basic loops come in two varieties: a while loop and a for loop
for does the same thing as while, but with a different syntax
here's a for loop:
for (var x = 1; x <= 5; x = x + 1) { trace(x); }
the for loop is like a condensed while loop
the contents of the loop are the same, but rearranged:
initialize while (compare) { statements update } for (initialize; compare; update) { statements }
the for loop makes the initialization, comparison, and update easier to find
functions
a function is a group of statements packaged together to form a single, reusable command
functions let us write code once, but use it many times throughout a program
repetition is bad
suppose we use this code to display the area of a rectangle:
var height = 10; var width = 20; trace(width * height);
later we decide we want to display the area of five different rectangles
our code gets 5 times longer:
var height1 = 10; var width1 = 20; trace(width1 * height1); var height2 = 234; var width2 = 59; trace(width2 * height2); var height3 = 40; var width3 = 99; trace(width3 * height3); var height4 = 39; var width4 = 875; trace(width * height); var height5 = 3; var width5 = 2; trace(width5 * height5);
notice that the same three statements are used for each rectangle
repeating statements is error-prone and time-consuming
instead of repeating statements, create functions that contain the repeated code
an example function
here's a function that displays the area of a rectangle
function displayArea (width, height) { trace(width * height); }
the function keyword starts the function declaration
next comes the name of the function: displayArea
next comes a list of arguments used by the function, in parentheses: (width, height)
finally, we list the statements of the function, within brackets: { }
the statements contain the code that would otherwise have been repeated
running a function
to run a function use same format as trace() command earlier
first, specify the function name:
displayArea
then provide any required arguments:
displayArea(10, 20);
the statements inside the function then run with width set to 10 and height set to 20
running a function, illustrated
here is the flow of operations for our example function execution:
code comparison
here's our old code, with repeated statements:
var height1 = 10; var width1 = 20; trace(width1 * height1); var height2 = 234; var width2 = 59; trace(width2 * height2); var height3 = 40; var width3 = 99; trace(width3 * height3); var height4 = 39; var width4 = 875; trace(width * height); var height5 = 3; var width5 = 2; trace(width5 * height5);
here's the new code, with a function:
function displayArea (width, height) { trace(width * height); } displayArea(10, 20); displayArea(234, 59); displayArea(40, 99); displayArea(39, 875); displayArea(3, 2);
the new code is shorter
the new code is easier to understand
function names describe what the code is doing
code comments
to add even more descriptive information to our code, we use comments
a comment is a note in code that is meant to be read by programmers
any line of code that starts with // is a comment:
// This is a comment...
comments help programmers understand how code works
you should always narrate your code with comments
for example...
// Displays the area of a rectangle in Flash's Output window function displayArea (width, height) { trace(width * height); } // Display the area of five rectangles displayArea(10, 20); displayArea(234, 59); displayArea(40, 99); displayArea(39, 875); displayArea(3, 2);
exiting and returning values from functions
normally, a function ends when its last statement executes
but you can also stop a function manually, using a return statement
for example, this revised version of displayArea() quits before the area is ever displayed:
function displayArea (width, height) { return; trace(width * height); }
usually, we only quit functions early based on some condition
for example, this function quits if the supplied password is wrong:
function enterSite(pass) { if(pass != "cactus") { // Exit if the password is wrong: return; } // This code is reached only if the password is correct. gotoAndPlay("intro"); } enterSite("hackAttack"); // Function will exit prematurely enterSite("cactus"); // Function will end naturally
built-in functions
take another look at the command gotoAndPlay() from the previous example:
gotoAndPlay("intro");
gotoAndPlay() is a built-in function, provided by ActionScript
there are lots of built-in functions, and they are used just like any other function
returning to the point of execution
when a function finishes, the interpreter continues executing any code after the function call
for example:
// When this function is done displayArea(25, 10); // Execution resumes here trace("Done calculating area of first rectangle"); // When this function is done displayArea(13, 4); // Execution resumes here trace("Done calculating area of second rectangle");
returning information to the point of execution
return always terminates a function
but return can also send information back to the script that invoked the function
for example, the displayArea() function could return width*height instead of displaying it:
function displayArea (width, height) { return width * height; }
the information returned by a function is called a return value
using a function's return value
return values are often used to set a variable's value
for example, this code sets rectangleArea to 200:
var rectangleArea = displayArea(10, 20);
now that displayArea() returns the area instead of displaying it, we should rename it to getArea()
function getArea (width, height) { return width * height; }
return values can even be added together
// Sets totalArea to 260 var totalArea = getArea(10, 20) + getArea(5, 12);
objects
let's review a couple of concepts:
# a statement instructs Flash to do something
# a function groups multiple statements into a convenient command
an "object" takes the next logical step: it packages related functions and variables into a single code module
each object is like a self-contained, miniature program
multiple objects can be used together like building blocks to form complex functionality
object-oriented programming
object-oriented programming (oop) means structuring your code with objects
some languages require that all code be contained by some object (e.g., Java)
in flash, you can put all your code in objects if you want, but it's not mandatory
custom objects vs built-in objects
just as some functions are built-in to ActionScript, some objects are also built-in
built-in objects let us control:
# visuals (movie clips, buttons, text, video)
# sounds
# network communication
# ....and many other things in a movie
to program in flash, you must use the built-in objects
hence, some OOP knowledge is required, even if you don't structure your own code with objects
movie clip objects
each movie clip instance on stage is represented by an actionscript object
to control a movie clip object, we must give the movie clip an instance name
once a movie clip has a name, we can:
# set its variables (also called "properties")
# control it by calling its functions (also called "methods")
for example, suppose we give a movie clip the instance name ball
we can then set the horizontal position of the ball movie clip like this:
ball._x = 150;
and we can make the ball movie clip stop playing like this:
ball.stop();
the language of objects
using objects, we can create sentence-like instructions in code:
# the object is a noun
# the property is an adjective
# the method is a verb
for example:
object.property = value; noun.adjective = value;
object.method(); noun.verb();
let's see it all in action!
we've now learned quite a lot of theory
let's apply that theory to an example: a multiple choice quiz
quiz overview
two questions; each with three multiple-choice answers
users submit their answers by clicking answer buttons
user answers are recorded in a variable
answer variables are used to calculate the user's score
at the end of the quiz, the score is displayed
build the layer structure
make a layer called scripts on which to place code
keep the scripts layer at the top so it's easy to find
make a layer called labels for all labels in our movie
make four layers for our quiz assets
# quiz end: for the results screen
# question 2: for the second question screen
# question 1: for the first question screen
# choice buttons: for the answer buttons
# housing: for the background and instructions
add 30 frames to all layers
create the question 1 screen
frame 1, question 1 layer, add text: "1) When were movie clips introduced into Flash?"
below the question text add the answer text:
# Version 1
# Version 2
# Version 3
create the question 2 screen
select frame 1 of question 1 layer
right-click > copy frames
select frame 1 of question 2 layer
right-click > paste frames
insert blank keyframe at frame 10 of question 1 layer
at frame 10 of question 2 layer:
# change the question number from "1" to "2"
# change the text of the question to, "When was MP3 audio support added to Flash?"
# change the multiple choice answers to Version 3, Version 4, and Version 5
# notice that frames are used to represent application screens
add the answer buttons
create a simple button for the user to choose an answer
at frame 1 of choice buttons layer, place three answer button instances
set instance name for buttons to: choice1_btn, choice2_btn, and choice3_btn
initialize the quiz
add the code that initializes the movie to frame 1 of scripts layer
no preloader for this example
first describe what the code does with a comment:
// Initialize main timeline variables
next, create variables to store user's answers:
var q1answer; // User's answer for question 1 var q2answer; // User's answer for question 2
next, create a variable to track number of questions answered correctly:
var totalCorrect = 0; // Counts number of correct answers
finally, stop the movie at the first question:
stop();
variable naming styles
to indicate multiple words in variables use capital letters:
totalCorrect
or underscores:
total_correct
give variables and functions meaningful names
for example, avoid single letters, like "x" or abbreviations, like "tc"
well-named variables help you understand how the code works
add frame labels
question 2 is on frame 10, so when we want to display Question 2 we could do this:
gotoAndStop(10);
sensible code, right? WRONG!
if we add frames before frame 10, our code breaks!
to avoid this problem, use frame labels
# at frame 1, labels layer, set the label to init
# at frame 10, labels layer, add a blank keyframe
# at frame 10, labels layer, set the label to q2
# at frame 20, labels layer, add a blank keyframe
# at frame 20, labels layer, set the label to quizEnd
now we can add frames before question 2 and our code will still work
responding to answer button clicks
to submit an answer to a question, the user clicks the appropriate answer button
our code must record the user's choice in either q1answer or q2answer
how do we set a variable when a button is pressed?
using an event handler...
event-based code vs timeline code
two things cause code to run in flash:
# the playhead enters a frame with a script on it
# an event occurs (either user input or a system notification)
to run code in response to an event, we create an event handler function or an event listener object
today, we'll only study event handler functions
event broadcast
every event in flash is triggered by some object
for example:
# the Stage object tells you when the movie is resized
# the Key object tells you when a key is pressed
# a Button object tells you when a button is clicked
event-handler functions
to respond to a "button clicked" event from a button...
...define an event handler function on that button
theButton.onRelease = eventHandlerFunction;
# theButton is the button instance that was clicked
# onRelease is the name of the event
# eventHandlerFunction is the function that should run when the button is clicked
the eventHandlerFunction can be defined inline or somewhere else
// Define the event hanlder function inline... theButton.onRelease = function () { // Store the user's answer }
// Or define the event handler function separately... theButton.onRelease = storeAnswer; function storeAnswer () { // Store the user's answer }
here's the general format for event handler functions:
eventBroadcastingObject.nameOfEvent = eventHandlerFunction;
handling the answer button events, question 1
question 1 answer-button-handlers are defined on frame 1, scripts layer
here's the event handler function for answer button 1 of question 1:
// Code executed when button 1 is pressed. choice1_btn.onRelease = function () { this._parent.q1answer = 1; this._parent.gotoAndStop("q2"); };
the function does two things:
# records the user's choice in q1answer
# displays question 2
new code introduced:
# this means choice1_btn (the button that broadcast the event)
# _parent means the timeline containing choice1_btn
code for other two answer buttons follows same pattern:
// Code executed when button 2 is pressed. choice2_btn.onRelease = function () { this._parent.q1answer = 2; this._parent.gotoAndStop("q2"); }; // Code executed when button 3 is pressed. choice3_btn.onRelease = function () { this._parent.q1answer = 3; this._parent.gotoAndStop("q2"); };
handling the answer button events, question 2
frame 10, scripts layer, add a blank keyframe
question 2 answer-button-handlers are defined on frame 10, scripts layer:
// Code executed when button 1 is pressed. choice1_btn.onRelease = function () { this._parent.q2answer = 1; this._parent.gotoAndStop("quizEnd"); }; // Code executed when button 2 is pressed. choice2_btn.onRelease = function () { this._parent.q2answer = 2; this._parent.gotoAndStop("quizEnd"); }; // Code executed when button 3 is pressed. choice3_btn.onRelease = function () { this._parent.q2answer = 3; this._parent.gotoAndStop("quizEnd"); };
code for question 2 answer buttons is identical to question 1 buttons except:
# user's choice is stored in q2answer (instead of q1answer)
# quiz end screen is displayed (instead of question 2)
ending the quiz
quiz is mostly functional
to finish it, we'll:
# build a final results screen
# calculate and display the user's score
building the results screen
frame 20, scripts layer, add a blank keyframe for score-calculation code
frame 20, question 2 layer, add a blank keyframe
frame 20, choice buttons layer, add a blank keyframe
frame 20, quiz end layer, add a blank keyframe
frame 20, quiz end layer, add text "Thank you for taking the quiz!"
calculating the user's score
the score-calculation code is attached to frame 20, scripts layer
recall that the user's score is stored in the variable totalCorrect
if the answer to question 1 is correct, add one to totalCorrect (3 is the correct answer)
if (q1answer == 3) { totalCorrect = totalCorrect + 1; }
if the answer to question 2 is correct, add another one to totalCorrect (2 is the correct answer)
if (q2answer == 2) { totalCorrect++; }
the ++ operator adds one to a variable
totalCorrect now stores the user's score
displaying the score on screen
to display the user's score, create a text field:
this.createTextField("totalOutput_txt", 1, 150, 200, 200, 20);
this is main movie timeline
createTextField() is a built-in MovieClip method
totalOutput_txt is the name of the text field
now display the score in the text field:
totalOutput_txt.text = "Your final score is: " + totalCorrect + "/2.";
notice that the text field is an object (lots of things are objects)
the text property is the text to display on screen
a little fun
break time! let's make a mouse toy
see mouseTrailer-01.swf through mouseTrailer-04.swf in /examples/visuals folder
experimentation is key
build something simple, then play with it (change values, parameters, etc)
centralizing code
our quiz has two problems:
# the code is spread over three frames (hard to find, understand)
# the button handler code is very repetitious (prone to error)
to fix these problems, we'll:
# move all code to frame 1
# introduce two functions: answer() and gradeUser()
quiz v2, initialization
as before, we stop our quiz on question 1:
stop();
then initialize variables
we use q1answer and q2answer just like last time:
var q1answer; // User's answer for question 1 var q2answer; // User's answer for question 2
and we add these new variables:
var numQuestions = 2; // Number of questions in the quiz var correctAnswer1 = 3; // The correct choice for question 1 var correctAnswer2 = 2; // The correct choice for question 2 var currentQuestion = 1; // The question being answered
the answer() function
purpose: to reduce code repetition in answer button handlers
each answer button will call answer() when pressed
answer() has two duties:
# record the user's choice
# advance the quiz to either: a) the next question, b) the end results screen
here's the answer function skeleton:
function answer (choice) { }
choice parameter stores the user's answer
asserting that the code works
first task in the function: debugging information
display the current question and choice in the Output window:
function answer (choice) { trace("Question " + currentQuestion + ". The user answered: " + choice); }
we can now check if the code is doing what we expect
build code incrementally: when one section works, build the next section
setting the answer variables
when answer() runs, we must set either q1answer or q2answer
how do we know which one to set?
the currentQuestion variable tells us
when currentQuestion is 1, we should set q1answer
when currentQuestion is 2, we should set q2answer
here's how that looks in code:
function answer (choice) { // Display the question and answer in the Output window for debugging. trace("Question " + currentQuestion + ". The user answered: " + choice); // Record the user's answer to this question. if (currentQuestion == 1) { q1answer = choice; } else if (currentQuestion == 2) { q2answer = choice; } }
advancing the quiz
once the answer has been recorded, we advance the quiz
if the current question is the last question...
# ...calculate user's score and display the results screen
if the current question is not the last question...
# ...display the next question
here's the code:
function answer (choice) { // Display the question and answer in the Output window for debugging. trace("Question " + currentQuestion + ". The user answered: " + choice); // Record the user's answer to this question. if (currentQuestion == 1) { q1answer = choice; } else if (currentQuestion == 2) { q2answer = choice; } // If we're on the last question... if (currentQuestion == numQuestions) { // ...go to the quiz end frame. gotoAndStop("quizEnd"); // And grade the user. gradeUser(); } else { // ...otherwise, go to the next question frame. gotoAndStop("q"+ (currentQuestion + 1)); // Note that we're on the next question. currentQuestion++; } }
subcontracting labour
notice that the answer() function calls a separate function, gradeUser()
the code in gradeUser() could have been contained within answer()
but its wiser to do one-task-per-function
following the one-task-per-function rule makes code:
# easier to debug
# more reusable (each function can be independently)
new answer button handlers
here are the new event handler functions for the answer buttons:
choice1_btn.onRelease = function () { this._parent.answer(1); }; choice2_btn.onRelease = function () { this._parent.answer(2); }; choice3_btn.onRelease = function () { this._parent.answer(3); };
code repetition is reduced
answer() function keeps track of the current question...
...hence, handlers for question 1 and question 2 answer buttons can be the same!
grading the user
when the quiz is over, answer() calls gradeUser()
gradeUser() has two duties:
# calculate the user's score
# display the user's score on screen
once again, start the function with debugging information:
function gradeUser() { trace("Quiz complete. Now grading..."); }
tallying the score
to store the user's score, we'll create a variable, totalCorrect:
function gradeUser() { trace("Quiz complete. Now grading..."); var totalCorrect = 0; }
a variable defined within a function is called a local variable
local variables are deleted automatically when a function ends
calculate the score with a loop
we'll use a loop to calculate the user's score
the loop runs once for every question in the quiz:
for (var i = 1; i <= numQuestions; i++) { }
the loop body checks each answer to see if it is correct
for (var i = 1; i <= numQuestions; i++) { if (eval("q" + i + "answer") == eval("correctAnswer" + i)) { totalCorrect++; } }
the built-in eval() function returns the value of the specified variable
the first time the loop runs, i is 1...
...so the loop body reads:
if (eval("q" + 1 + "answer") == eval("correctAnswer" + 1)) { totalCorrect++; }
which is equivalent to:
if (q1answer == correctAnswer1) { totalCorrect++; }
the second time the loop runs, i is 2...
...so the loop body reads:
if (eval("q" + 2 + "answer") == eval("correctAnswer" + 2)) { totalCorrect++; }
which is equivalent to:
if (q2answer == correctAnswer2) { totalCorrect++; }
when the loop is finished, the final score is ready for display
displaying the score
the score-display code from quiz v1 has moved to gradeUser():
this.createTextField("totalOutput_txt", 1, 150, 200, 200, 20); totalOutput_txt.text = "Your final score is: " + totalCorrect + "/" + numQuestions;
add a little formatting to the text:
var format = new TextFormat(); format.size = 16; format.color = 0xC7FF9C; format.font = "_sans"; format.bold = true; totalOutput_txt.setTextFormat(format);
quiz v2, final code
here's all the code for version 2 of the quiz:
// * INITIALIZATION * // Stop the movie at the first question. stop(); // Init quiz variables var numQuestions = 2; // Number of questions in the quiz var q1answer; // User's answer for question 1 var q2answer; // User's answer for question 2 var correctAnswer1 = 3; // The correct choice for question 1 var correctAnswer2 = 2; // The correct choice for question 2 var currentQuestion = 1; // The question being answered. // * FUNCTIONS * // Function: answer() // Desc: Registers the user's answers to quiz questions and // advances the quiz through its questions. function answer (choice) { // Display the question and answer in the Output window for debugging. trace("Question " + currentQuestion + ". The user answered: " + choice); // Record the user's answer to this question. if (currentQuestion == 1) { q1answer = choice; } else if (currentQuestion == 2) { q2answer = choice; } // If we're on the last question... if (currentQuestion == numQuestions) { // ...go to the quiz end frame. gotoAndStop("quizEnd"); // And grade the user. gradeUser(); } else { // Note that we're on the next question. currentQuestion++; // ...otherwise, go to the next question frame. gotoAndStop("q"+ (currentQuestion + 1)); } } // Function: gradeUser() // Desc: Tallys the user's score at the end of the quiz. function gradeUser() { // Report that we're about to grade the quiz in the Output window. trace("Quiz complete. Now grading..."); // Create a local variable to track the // number of questions user answered correctly. var totalCorrect = 0; // Count how many questions the user answered correctly. // For each question... for (var i = 1; i <= numQuestions; i++) { // If the user's answer matches the correct answer. if(eval("q" + i + "answer") == eval("correctAnswer" + i)) { // Give the user a point. totalCorrect++; } // Display the correct answer and the user's answer // in the Output window for debugging. trace("Question " + i + ". Correct answer: " + eval("correctAnswer" + i) + ". User's answer: " + eval("q" + i + "answer")); } // Display the final score in the Output window for debugging. trace("User's score: " + totalCorrect + "/" + numQuestions); // Create an onscreen text field do display the user's score. this.createTextField("totalOutput_txt", 1, 150, 200, 200, 20); // Show the user's score in an onscreen text field. totalOutput_txt.text = "Your final score is: " + totalCorrect + "/" +numQuestions; // Customize the font face, size, and color for the text field. var formatObj = new TextFormat(); formatObj.size = 16; formatObj.color = 0xC7FF9C; formatObj.font = "_sans"; formatObj.bold = true; totalOutput_txt.setTextFormat(formatObj); } // * EVENT HANDLERS * // Code executed when button 1 is pressed. choice1_btn.onRelease = function () { // Call answer(), which records the user's choice // and advances the quiz to the next question. this._parent.answer(1); }; // Code executed when button 2 is pressed. choice2_btn.onRelease = function () { this._parent.answer(2); }; // Code executed when button 3 is pressed. choice3_btn.onRelease = function () { this._parent.answer(3); };
improving the data structure
quiz code is now quite clean
but the data handling is awkward
each user choice and each correct answer require a variable
answer() function code increases with each question
consider the code required to record answers in a 10-question quiz:
// Record the user's answer to this question. if (currentQuestion == 1) { q1answer = choice; } else if (currentQuestion == 2) { q2answer = choice; } else if (currentQuestion == 3) { q3answer = choice; } else if (currentQuestion == 4) { q4answer = choice; } else if (currentQuestion == 5) { q5answer = choice; } else if (currentQuestion == 6) { q6answer = choice; } else if (currentQuestion == 7) { q7answer = choice; } else if (currentQuestion == { q8answer = choice; } else if (currentQuestion == 9) { q9answer = choice; } else if (currentQuestion == 10) { q10answer = choice; }
now imagine a 100-question quiz!
problems with the code:
# time consuming to create
# error prone
working with lists of information
the data in the quiz can be treated as lists of information:
# the list of user answers
# the list of correct answers
to handle these lists more efficiently use arrays
the anatomy of an array
an array is a list of data values
this code assigns string values to two variables:
fruit1 = "oranges"; // A single string value fruit2 = "apples"; // Another string value
this code creates an array to store both values:
var fruitList = ["oranges", "apples"];
two ways to create an array:
# array literal
["item1", "item2"]
# array constructor:
new Array("item1", "item2")
in ActionScript, arrays can contain any kind of data
here's an array with both strings and numbers:
shoppingList = ["oranges", 5, "apples", 2];
array elements
each item stored in an array is called an element
each element's position in the array is its index
indices start at 0
for example, here are the indices for shoppingList:
0: "oranges" 1: 5 2: "apples" 3: 2
the number of elements in an array is called its length
for example, the shoppingList's length is 4
retrieving an element's value
to get an element's value, use this syntax:
theArray[theElementIndex]
for example:
var numberOfOranges = shoppingList[1];
or use variables instead of numbers to specify the element index
for example:
var index = 3; // Set numApples to 2 var numberOfApples = shoppingList[index];
the element index can also be calculated:
// Set numberOfApples to 2 var numberOfApples = shoppingList[5 - 2];
setting an element's value
to set an element's value, use this syntax:
theArray[theElementIndex] = theValue;
for example:
// Make an array var cities = ["Toronto", "Montreal", "Vancouver", "Tokyo"]; // cities is now: ["Toronto", "Montreal", "Vancouver", "Tokyo"] // Set the value of the array's first element // cities becomes ["London", "Montreal", "Vancouver", "Tokyo"] cities[0] = "London"; // Set the value of the array's fourth element // cities becomes ["London", "Montreal", "Vancouver", "Hamburg"] cities[3] = "Hamburg";
or:
var i = 1; // Set the value of element i // cities becomes ["London", "Prague", "Vancouver", "Hamburg"] cities[i] = "Prague";
looping through an array's elements
use a loop to systematically process the contents of an array
this code reports the location of the element with the value "hip hop":
// Create an array var soundtracks = ["electronic", "hip hop", "pop", "alternative", "classical"]; // Check each element to see if it contains "hip hop" for (var i = 0; i < soundtracks.length; i++) { trace("now examining element: " + i); if (soundtracks[i] == "hip hop") { trace("the location of 'hip hop' is index: " + i); break; } }
array methods
an array is an object with methods to manage its elements
the push() method adds one or more elements to the end of an array
for example:
// Create an array with 2 elements var menuItems = ["home", "quit"]; // Add an element // menuItems becomes ["home", "quit", "products"] menuItems.push("products"); // Add two more elements // menuItems becomes ["home", "quit", "products", "services", "contact"] menuItems.push("services", "contact");
the pop() method removes the last element of an array
for example:
var numbers = [56, 57, 58]; numbers.pop(); // numbers is now 56, 57 trace(numbers)
the unshift() method adds one or more elements to the beginning of the array
for example:
// Create an empty array (notice the use of the Array constructor) var flashVersions = new Array(); // Add an element flashVersions[0] = 5; // Add another element, bumping the previous 0 element up flashVersions.unshift(4); // flashVersions is now [4, 5] // Add two elements at once flashVersions.unshift(2,3); // flashVersions is now [2, 3, 4, 5]
the shift() method removes an element from the beginning of an array
for example:
var sports = ["hackey sack", "snowboarding", "inline skating"]; sports.shift(); // Now ["snowboarding", "inline skating"] sports.shift(); // Now ["inline skating"]
other methods perform various array manipulations:
# sort and reverse reorder the elements in an array
# splice() removes or adds elements from any part of an array
# slice() and concat() create new arrays based on existing arrays
# toString() and join() convert arrays to strings
a little more fun
time for some more visual experiments
# a random pattern generator (see randomPattern-01.swf through randomPattern-03.swf in /examples/visuals folder)
# a mouse follower (see moveTowards.swf in /examples/visuals folder)
using arrays in quiz v3
update the quiz to track answers with arrays
we'll make changes to initialization code and functions
but answer button event handler code will not change
quiz v3, initialization
except for line 1, initialization code has completely changed
line 1, stop the movie at question 1:
stop()
next, q1answer and q2answer are replaced by userAnswers array:
var userAnswers = new Array();
likewise, correctAnswer1 and correctAnswer2 are replaced by correctAnswers array:
var correctAnswers = [3, 2];
using correctAnswers, we can calculate the number of questions in the quiz:
var numQuestions = correctAnswers.length;
if the number of questions in correctAnswers changes, numQuestions updates automatically!
quiz v3, answer() function
quiz v3's answer() has the same duties as v2's answer():
# record the user's choice
# advance the quiz to either: a) the next question, b) the end results screen
so the function skeleton is the same:
function answer (choice) { }
quiz v3, recording the user's choice
this time, the choice is stored in userAnswers instead of q1answer:
userAnswers.push(choice);
quiz v3, asserting that the code works
once again, we assert that the code works
but this time, currentQuestion is based on the number of questions answered so far:
var currentQuestion = userAnswers.length;
and the user's answer is the last element in the userAnswers array
the index of the last element in an array is always one less than the array's length:
theArray[theArray.length - 1]
so here's our new debugging code:
trace("Question " + currentQuestion + ". The user answered: " + userAnswers[userAnswers.length - 1]);
quiz v3, advancing the quiz
quiz advancing in v3 is like v2 with one exception...
...the currentQuestion is not incremented
the userAnswers array length indicates the current question automatically
// If we're on the last question... if (currentQuestion == numQuestions) { // ...go to the quiz end frame. gotoAndStop("quizEnd"); // And grade the user. gradeUser(); } else { // ...otherwise, go to the next question frame. this.gotoAndStop("q"+ (currentQuestion + 1)); }
quiz v3, gradeUser()
v3's gradeUser() has the same duties as v2's gradeUser():
# calculate user's score
# display score on screen
display code has not changed
only score calculation code has changed
old code:
for (var i = 1; i <= numQuestions; i++) { if (eval("q" + i + "answer") == eval("correctAnswer" + i)) { totalCorrect++; } }
new code:
for (var i=0; i < numQuestions; i++) { if(userAnswers[i] == correctAnswers[i]) { totalCorrect++; } }
note that new loop starts at 0 because array indices start at 0
quiz v3, final code
here's the final code for quiz v3:
// Stop the movie at the first question. stop(); // =================== // INIT QUIZ VARIABLES // =================== // Create an array to contain user's answers. var userAnswers = new Array(); // Create an array to contain each question's correct answer. var correctAnswers = [3, 2]; // Create a convenience variable to store the number of // questions in the quiz. var numQuestions = correctAnswers.length; // ===================== // CREATE QUIZ FUNCTIONS // ===================== // Function: answer() // Desc: Registers the user's answers to quiz questions and // advances the quiz through its questions. // Params: choice The user's answer for the current question. function answer (choice) { // Add the current answer to the list of user answers. userAnswers.push(choice); // Create a convenient variable to store the number // of the current question. var currentQuestion = userAnswers.length; // Display the question and answer in the Output window for debugging. trace("Question " + currentQuestion + ". The user answered: " + userAnswers[userAnswers.length-1]); // If we're on the last question... if (currentQuestion == numQuestions) { // ...go to the quiz end frame. gotoAndStop("quizEnd"); // And grade the user. gradeUser(); } else { // ...otherwise, go to the next question frame. this.gotoAndStop("q"+ (currentQuestion + 1)); } } // Function: gradeUser() // Desc: Tallys the user's score at the end of the quiz. function gradeUser() { // Report that we're about to grade the quiz in the Output window. trace("Quiz complete. Now grading..."); // Create a local variable to track the // number of questions user answered correctly. var totalCorrect = 0; // Count how many questions the user answered correctly. // For each question... for (var i=0; i < numQuestions; i++) { // If the user's answer matches the correct answer. if(userAnswers[i] == correctAnswers[i]) { // Give the user a point. totalCorrect++; } // Display the correct answer and the user's answer // in the Output window for debugging. trace("Question " + (i + 1) + ". Correct answer: " + correctAnswers[i] + ". User's answer: " + userAnswers[i]); } // Display the final score in the Output window for debugging. trace("User's score: " + totalCorrect + "/" + numQuestions); // Create an onscreen text field do display the user's score. this.createTextField("totalOutput_txt", 1, 150, 200, 200, 20); // Show the user's score in an onscreen text field. totalOutput_txt.text = "Your final score is: " + totalCorrect + "/" + numQuestions; // Customize the font face, size, and color of the text field. var format = new TextFormat(); format.size = 16; format.color = 0xC7FF9C; format.font = "_sans"; format.bold = true; totalOutput_txt.setTextFormat(format); } // ================================= // DEFINE QUIZ BUTTON EVENT HANDLERS // ================================= // Code executed when button 1 is pressed. choice1_btn.onRelease = function () { // Call answer(), which records the user's choice // and advances the quiz to the next question. this._parent.answer(1); }; // Code executed when button 2 is pressed. choice2_btn.onRelease = function () { this._parent.answer(2); }; // Code executed when button 3 is pressed. choice3_btn.onRelease = function () { this._parent.answer(3); };
building blocks
for our last bit of fun, we'll combine our earlier mouse follower and random pattern experiments
remember that complex programs are just like lots of little simple programs combined
see moveAway-01.swf through moveAway-07.swf in /examples/visuals
summary
code is fun, even when you only know a little!
you can learn a lot quite quickly
best way to improve: play and experiment
Trang 1 trong tổng số 1 trang
Permissions in this forum:
Bạn không có quyền trả lời bài viết
|
|
Fri Jul 25, 2014 9:21 am by Admin
» Visa H4 application
Sat Dec 07, 2013 5:09 pm by Admin
» Kỹ thuật Nuôi gà
Fri Aug 30, 2013 4:39 pm by Admin
» All links regarding to Marriage paper
Wed Aug 28, 2013 11:14 am by Admin
» [vnplay.org]MU Việt Season 6.3 - Reset Và Non Reset -Không Webshop - Open tháng 5
Sat May 04, 2013 8:46 pm by noheart91
» MU bavuong.vn ss6.3 open 11/3
Sun Mar 11, 2012 9:45 am by keishin
» Game4V và Event "Viết bài hay, nhận ngay quà tặng"
Tue Feb 21, 2012 1:21 pm by noheart91
» MU Truyền Kỳ Season 6.2 - Huyền thoại Atlans
Fri Nov 25, 2011 3:41 pm by noheart91
» TRY.VN RA MẮT CỤM MÁY CHỦ MỚI : HOÀN MỸ - OPEN 22/11 - ĐỈNH CAO MU ONLINE
Fri Nov 25, 2011 2:04 am by noheart91
» 15 minutes per day
Fri Aug 26, 2011 9:35 am by Admin
» Khởi tranh đua top tuần cùng MU Hải Phòng
Sun May 15, 2011 2:06 pm by haixe
» Kỹ thuật nuôi chim cút
Tue May 10, 2011 3:31 pm by Admin
» Mu Hồi Sinh Season 5 Full - Open Lúc 15h ngày 20/04/2011
Tue Apr 19, 2011 1:14 pm by haixe
» Chao hạt kê
Sat Apr 16, 2011 9:56 am by Admin
» Kinh doanh nông sản
Fri Apr 15, 2011 4:58 pm by Admin
» Say rừng rim đường. Đặc sản phan rang
Fri Apr 15, 2011 4:55 pm by Admin
» Bạn của nhà nông
Thu Apr 14, 2011 9:41 pm by Admin
» Mô hình nông nghiệp bền vững.
Wed Mar 23, 2011 11:19 pm by Admin
» Kinh nghiệm xây dựng hầm Biogas - V.A.C Vi Na
Mon Mar 21, 2011 5:01 pm by Admin
» Giáo Trình cho chuyên ngành điện
Tue Mar 15, 2011 1:53 pm by Admin