At the end of this lab, you will turn in both *.fla and *.swf files to show your work. These files should be named [url removed, login to view] and [url removed, login to view] (e.g., John Smith = [url removed, login to view] & [url removed, login to view]).
Create a project folder for this lab called Lab3.
Download the resource archive and extract its contents to the lab folder [url removed, login to view]
Create a new project called DataTypes.fla. To accomplish this task, select File > New. Select Flash File (ActionScript 3).
Note: When you turn in your work, it will be necessary to rename your work as specified in the final step of these instructions.
Step 2: Exploring Actions, Output, and Error
Click in Frame 1 of your Flash application and press F9. Alternatively, select Windows -> Actions from the top menu.
You will see the Actions panel.
Click the top bar of the Actions panel to collapse it, and click again to expand it.
On the far right of the Actions panel is a small icon with three horizontal lines. Click this icon to show the options for the Actions panel. Then, click Line Numbers in the options list. You will see a number to the left of the text editing area.
Click in the text area next to the 1 and type the following:
Press Ctrl + Enter (Windows). You now see the Output panel, which is generated automatically whenever you employ the trace() function, together with the output from the trace() function. This panel is distinct from the Flash executable, which appears as a standard executable.
Click the red x control button on the Flash executable to close it. You then see only the Flash application with the stage area and the Action and Output windows.
You will use the Actions panel continuously during your programming activities. Click the options icon (small icon with three horizontal lines) to view the options available to you, which include Script Assist and Word Wrap.
Press return at the end of line 1 in the Actions panel to move the cursor to line 2. Add to your script so that it appears as follows on lines 1 and 2:
Press Ctrl + Enter to compile your code. You will see the Compiler Errors panel. This panel appears automatically whenever your code contains an error. As with other panels, you can collapse it by clicking on the top bar.
Double-click on the line in the Compiler Error panel. This highlights the line that contains the error in the Actions panel. Using this approach to locate errors is something you will do often as you work with ActionScript.
Delete "error" from your ActionScript code and compile your code again. The error message no longer appears, and you see "Hello World" in the Output pane.
Step 3: Review Data Types of ActionScript
ActionScript provides a set of data types that are usually referred to as "primitive" data types. You use these data types continuously, often creating other types of data classes by using them. Here are the basic types:
int – any whole number
uint – any non-negative whole number (unsigned)
String – a string of characters
Boolean – holds only two values: true or false
Number – any number, integer, or floating point
For data types and other ActionScript language features, Adobe provides many free resources to ActionScript programmers. Keeping these at hand during your programming sessions is essential. Add the following links to the Favorites list of your browser:
[url removed, login to view]
[url removed, login to view]
After creating links to these two documents, spend a few minutes exploring them.
Step 4: Comments
Note: In this step and in subsequent steps, you will work in the Actions panel for Frame 1. You will be adding code as you go and labeling the steps as instructed.
In the Actions panel, beneath your previous work, type the following code:
//Lab 1, Part 1, S
//Samples of line and block comments
/*You can create comments of two
types, line and block*/
Compile your code and correct any errors. Notice that this code does not produce any output.
Note: You can also use buttons that the Actions panel tool bar provides to comment on code.
To use the toolbar comment services, highlight the text you want to comment on, and click the toolbar icon.
Save your work (press Ctrl + S).
Step 5: Variable Declaration
In the Actions panel, beneath your previous work, add the following comment using either a block of comments or line comments:
You can declare a variable using the keyword var.
Follow the var keyword with the identifier that names the variable.
Then, type a colon (:).
Next, type the keyword that identifies the data type.
You can then use the assignment operator (=) to assign a value.
After the commented code, type the following code:
Compile your code and correct any errors.
Next, declare a variable for the objects: int, uint, Number, and Boolean types. Name each object using var and the data type. For example, for Number (varNumber), assign incremental values starting at 20 (20, 21, 22, etc.) to each of the number types. Assign “true” to the variable with the Boolean type. Preface your work with the following comment in a block quote:
"Examples of primitive variables."
Use the trace() function to output the value of each variable to the Output pane.
Type the following code in the Actions panel following the previous code. This code represents the definition and the use of variables using abstract data types.
/*Examples of variables defined using ActionScript classes:*/
Note: The String data type is often considered a primitive data type, which you can directly assign values to, as you do with StringA. The Object data type is the most fundamental data type. It is at the base of the ActionScript class hierarchy. For this reason, you can use an assignment statement, as you do in the objectA = stringA statement, for any variable you define in ActionScript.
Declare variables for the String, Object, and Array types, and name them the same as in the previous example. The only exception is that you replace the A with B in each of the identifier names. Preface your work with the following comment:
/*Examples of variables defined using abstract data types.*/
Step 6: if and if...else Statements
When using if and if…else statements, you define two int values and then test them in different ways. These statements are examples of selection operations.
Test 1 uses the comparison operator (==) to evaluate if testA is equal to 5. Since it is, you see the output.
Test 2 uses a categorical test (if...else) to evaluate if testA is equal to testB. The values are not equal, but this approach to testing ensures that you see a result regardless of the result of the tests.
Test 3 is an extended selection structure. Having assigned a value to someNumber, you test it against 5 and then 4. If the value assigned to someNumber equaled neither 5 nor 4, then the message in the else clause would be displayed.
Type the following code in your script.
Note: You do not type a space between the equal signs that form the comparison operator(==). As you go, type Test 1 and compile. Then, type Test 2 and compile. Then, type Test 3 and compile. Debug your code as you go.
After the previous example, type the following line and comment it:
Examples of simple, category, and sequential selection
Define two new variables of the int type: testC and testD.
Assign 4 to testC and 7 to testD.
Copy Test 1, Test 2, and Test 3 and paste them into the next section of your code.
Change the name of the variable testA to testC.
Change the name of the variable testB to testD.
Change the name of the variable someNumberA to someNumberB.
Step 7: Create a Switch Structure
A switch structure is also a selection structure, and its actions resemble those of the “if” and “if…else” structures.
Add the following code to the end of your script:
Compile and debug the code. You should see "Switch value 3" in the Output panel.
Note: The switch statement provides a convenient substitute for else…if structures, but it is sometimes difficult to work with in beginning programming contexts because the syntax is more involved. It opens with the switch keyword, and then uses case statements closed with break statements to establish the clauses of the comparisons. In each case, you place the value that you want to select immediately after the case keyword. You then follow the value with a colon.
After you have debugged the previous switch structure, copy it, and retitle it Test 2.
Change the name of the test variable to valueB.
Change the type of the valueB variable to String.
For each clause of the switch statement, change the code as follows, now comparing the valueB to a set of words that that conveys numerical values:
Compile and test your code. You now see “Switch value three” as the output.
Step 8: Construct and Populate an Array
After the code you have already completed, add the following code in your script for Frame 1:
Compile and debug your code.
Note: The push() and pop() functions are complementary. Push() inserts an item into an array and pop() removes an item from an array. The length property of the array tells you how many items are in an array. Note: The number is always one more than the final index value of the array.
Now, create a second array. This one will use string constants (values of the String type).
Compile and examine the output.
Note: Many functions accompany the Array class in addition to push(), pop(), sort(), and splice(). As shown above, you can also display all the elements in an array by using the name of the array as an argument in the trace() method.
Add this body of code to the code you have already developed.
Compile and debug your output.
Note that static properties of the Array class can be used with the sort() function to sort the array on a descending case sensitive basis. The use of a single pipe is a way of OR-ing (merging) two such values.
Add the following code to the code you have already developed. Debug and examine the output.
Note: In this case, the use of the delete function allows you to delete an item in a given position in the array, but the array is left with an empty slot so to speak. You can then fill it with another.
Step 9: Create Repetition with for
Repetition, along with selection and sequence, is one of the three primary ways to control the flow of a program.
Enter, compile, and debug the following lines in your Frame 1 code set:
Copy and alter the code for the second loop so that it increases by 3 to 18. Change inx to iny. Insert an if selection structure in the statement so that if the number reached is greater than 10, a trace() message is printed” “Reached 10. Here is the code for the selection statement (needs to be inserted at the bottom portion of your loop statement):
Step 10: Create Repetition with while
Repetition structures that use “while” allow you to control and exit loops in different ways.
Enter, compile, and debug the following lines in your Frame 1 code set:
Copy and alter the code for the first loop so that it increases by 3 to 18 like you did in the “for” loop, which was executed in the beginning of this lab.
Step 11: Create Repetition with do...while()
Enter the following code for a do…while() loop:
Copy and alter the code so that you use a break statement instead of a control statement.
Set the condition in the while clause to true.
Use a selection statement and the break keyword.
Step 12: Arrays and Loops
In this step, you will explore the use of an array with a repetition structure. This is a common feature of the ActionScript program, and the length property of the Array class helps tremendously with the work you perform in this respect.
In this exercise, you will make use of a TextArea component. To access a TextArea component, select Windows > Components from the main menu.
You will then see the Components list.
Click the TextArea component and drag it to the far left of the stage.
Using the Selection Tool “V”, click the TextArea component on the stage, press Ctrl + F3 (or select Window > Properties > Properties from the main menu), and then change the width and height to 110 by 110 pixels in the Properties panel.
In the Instance name field, type planetTxt.
Now, enter and compile the following code at the end of the body of code in the Actions panel for Frame 1:
Note: This code first defines an array using square braces. You then use a “for” loop to iterate through the elements of the array. The pctl variable is set so that it is less than the value assigned to the length parameter. To write items to the Output panel, you use the trace() function. To write to the TextArea object, you use the name of the object to call the text property of the component. The += operator is a concatenation operator. The \n is an escape character, which causes the line to return with each iteration of the loop, resulting in a vertical column of planet names.
Even though Pluto is considered a dwarf planet, add it to the planet list of the planets array. Lengthen the TextArea object in the display so that it will accommodate an additional line. Compile and debug your code.
Step 13: Repetition with for...each
Use the same approach you used in the previous example to drag a TextArea component to the left side of the stage. Place this below the first TextArea component.
Name the component missionTxt.text.
Add the code below to your Frame 1 code set.
Verify your work.
The number of missions from NASA continues to grow. Add the following items to the missions array and recompile your work:
Deep Space 2
Step 14: Embedded or Nested Repetition
Using inner and outer for loops (embedded repetition structures) proves useful in a number of ways. Two particularly important applications involve creating matrices and detecting collisions between items. To create a matrix using embedded loops, complete the following steps.
Select Window > Library to open the Library panel.
Select File > Import > Import to Library.
In the dialog for Import, access the Resources folder for Lab 3 and access the [url removed, login to view] file, and then click Open.
You will see a new symbol in the Library panel, along with the [url removed, login to view] file. Rename the symbol Earth.
Right-click on the Earth symbol and select Properties.
In the Properties dialog, click the radio button for MovieClip.
Also, click the check box for Export for ActionScript. Click OK when you are done. A warning dialog will appear, and click OK once again.
Add the following code to the end of your code for Frame 1.
Compile and run this code. When you do so, you will see a 6 by 6 matrix of globes in the display area of your application.
Note: The outer loop begins at zero. The flow of the program then enters the inner loop. The inner loop repeats six times. As soon as the inner loop reaches six, control returns to the outer loop, which is increased by 1. Control then flows back into the inner loop. The ctrx value controls the movement horizontally. The ctr value controls the movement vertically. As the ctrx and ctry values are increased, the globes are distributed in six horizontal lines down the stage.
Change the code so that the control numbers are changed from six to five.
ctrx < 5
ctry < 5
Compile your code and observe the results.
Step 15: Conclusion and Turning in Your Work
At the end of this lab, you will turn in both *.fla and *.swf files to show your work.
These files should be named [url removed, login to view] and [url removed, login to view] (e.g., John Smith = [url removed, login to view] & [url removed, login to view]).