485742 lab4
N/A
Paid on delivery
flash project
Week 4: Classes and Objects - iLab Help
Print This Page
Remember this!
Connect to the iLab here.
Lab 4 of 7: Building a Matching Game
Submit your assignment to the Dropbox located on the silver tab at the top of this page.
(See the Syllabus section, Due Dates for Assignments & Exams, for due dates.)
Note: JavaScript is required for your course. Please ensure that JavaScript is enabled in your browser preferences.
i L A B O V E R V I E W
Scenario/Summary
In this lab, you will work with Flash and ActionScript to explore fundamental features of programming, including items such as data types, functions, and the properties of built-in ActionScript classes (primary among which is the MovieClip class). By creating a matching game, you are able to develop a program that employs a number of ActionScript features that you have explored in previous labs, which will be further explored in labs to come. In this lab, you will make use of a new item, the Document class, which substitutes for the standard timeline program scripting you have employed in previous labs. In this lab, you will also explore the notion that an application is developed from functional requirements.
At the end of this lab, you will turn in *.fla, *.as, and *.swf files showing your work. These files should be named [url removed, login to view], [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], and [url removed, login to view]). It is important to keep these deliverables ready for use in the next lab during which you will complete the game.
Retain copies of your [url removed, login to view] and [url removed, login to view] files because they will also be used in the next lab.
To complete the work in this lab, you will require the files in the Lab 4 Student Resources folder.
You will start off by exploring how to develop an application from a set of specifications. Your finished product will be a board containing several cards. The following figure shows the board with the face of two exposed cards. In this lab, you will not implement the functionality that allows you to see the faces of the cards, but you will add the functionality so that you can see the backs of the cards.
Deliverables
At the end of this lab, you will turn in *.fla, *.as, and *.swf files showing your work. These files should be named [url removed, login to view], [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], and [url removed, login to view]).
i L A B S T E P S
Step 1: Setting Up for Work
Create a project folder for this lab on your hard drive called WBG340Lab4.
Create a project called MatchingGameV1.fla. To accomplish this task, access the Resources folder provided with this lab, open the starter file ([url removed, login to view]), and save the starter file as MatchingGameV1.fla. The resource file can be found here: Lab4_resources.zip.
Note: When you turn in your work, it will be necessary to rename your work as specified in the final set of instructions. Prior to the final step, be sure to save your work in incremental versions as you go (e.g., [url removed, login to view], [url removed, login to view], [url removed, login to view]). An incremental version set allows you to revert to a previous version if your work at any given stage becomes corrupted.
Step 2: Specifications
The set of specifications for a game can be fairly simple, especially when you are working from a modification of a common game or MOD. In a card matching game, a number of cards are laid out in rows on a table and the player is allowed to turn the cards over two at a time. If no match occurs, then the player must turn both cards back over and wait another turn before attempting another match.
In the matching game, you must first create cards. The cards will have, as you might expect, fronts and backs. The backs of the cards should all be the same. The fronts of the cards should be grouped into sets of two and each group should contain one unique image or number.
The game ends when all pairs are matched. With each start of the matching game, however, the cards are placed in a random order on the playing area.
Each turn of play is characterized by the following actions (states):
One card is turned over or shown.
Another card is turned over or shown.
If the first card is the same as the second, a match is registered and the card faces are left showing.
If the first card is not the same as the second, then the cards are turned back over.
Step 3: Creating Cards
The starter file in the Resources folder has been partially set up for you. As mentioned previously, save it as MatchingGameV1.fla. In the Library of the starter file, you should see a Card symbol. In the top of the Library, you should see the back of the card, represented as a dark square.
Double-click on the Card symbol in the Library to open it in the symbol editing mode.
Note: The editing mode for symbols is evident by the blue arrow pointing to the left at the left-end of the Scene bar.
Make certain you distinguish between the Card symbol timeline and the timeline of the main application. When in symbol editing mode for the Card, you should see Scene 1 -> Card in the symbol editing mode, as shown in the previous figure. When in the main application timeline, you should see only Scene 1 in the timeline editing mode, as shown in the following figure.
To be complete, the Card symbol must have 19 populated frames. You should see only 15 populated frames. Note that in the following figure, representing the Card symbol, only frames 1 through 15 are populated with card faces.
If you click on Frame 15, for example, you see a football.
Frame 1 is the back of the card.
Frames 16 through 19 should have blank card faces. In the next step, we will add faces to the cards.
Step 4: Adding the Four Card Faces
To create cards 16 through 19, use the four *png files included in the zipped Resources directory. Employ the following steps:
Click to open the Card symbol in symbol editing mode.
Examine the four empty frames by clicking on frames 16 through 19 of the Symbol layer. Be careful not to distort the 50 by 50 box that appears in each of the empty frames.
Click on Frame 16 of the Symbol layer.
Select File > Import > Import to Stage. Select the Resources file. Choose the [url removed, login to view] file.
Place the image in the middle of the white box. Be careful not to move, delete, or distort the box. If you do so by accident, press Ctrl Z to undo and try again. Use the arrow keys to precisely move the pizza image.
Again, be careful not to change the dimensions of the box (52 by 52 pixels). Now, repeat the actions performed on Frame 16 of the Symbol layer for frames 17, 18, and 19. For each frame, use the imagery outlined below. Prior to importing the new file, remember to click on the frame with which you want to place it. Here are the frames you need to complete:
16 – Pizza
17 – Globe
18 – Pencil
19 – Apple
When you are done, test your work by swabbing through the frames.
To swab the frames, click on the red rectangle at the top of the timeline and pull it horizontally back and forth along the timeline.
After testing, exit the symbol editing mode by clicking on the blue arrow located at the top left of the stage, and save your project work.
Step 5: Export for ActionScript
If you have not done so, exit the symbol editing mode and view the Library.
Right-click on the Card symbol and select the Properties option.
Click the check box for Export for Action Script.
In the Class field, type Card if it is not already there.
Click OK. Note that you may see an ActionScript Class Warning dialog. Click OK. The dialog at this point is merely advisory.
Step 6: Create a Document File
In this lab, you will enter the world of ActionScript programming by creating a Document class. A Document class is a code file that contains the code for your Flash application.
To create a Document file, select File > New, and then from the dialog select the ActionScript file.
The new file appears as a tab (Script-1) in your Flash application.
Save the new file by selecting File -> Save. Navigate to the same directory in which you have saved your [url removed, login to view] file. Save the ActionScript file as MatchingGameV1.as.
Note that the *.as extension stands for ActionScript and is appended to the file name automatically.
Step 7: Create a Package
Now, type the package wrapper for a file in the [url removed, login to view] file. Add this code to your file:
For now, do not be overly concerned about the specific meaning of the code you enter. This code creates a package for your class. The import statement gives you access to important ActionScript or Flash resources that you use in your program.
At a more technical level, the import statement for [url removed, login to view] packages gives you access to objects and classes such as Stage, Graphics, and DisplayObject. You will work more extensively with these tools in future labs.
Save your work. Note that the typical save command (File > Save or Ctrl + S) saves only the currently active document—either the .as file or the .fla file—but not both! Don't forget to save both of the files or use the File > Save All command.
Step 8: Create a Class
Now, inside the package code, add code for the signature line of your Document class. The signature line of a class is the line that begins with public and ends with the opening brace of the class. Add this code to your file:
Note that the name of the class is the same as the name of the file. You are required in ActionScript to name the class a file that contains the same name as the file. The class signature line is something covered more extensively in future labs, but note the following features for now.
Public is a keyword known as an access modifier for the class.
Class is a keyword that allows you to define a class.
Extends is a keyword that allows you to inherit the features of a parent class, MovieClip.
Step 9: Checking Syntax
To check your syntax, click the blue check that is third from the left of the ActionScript file tab. Another useful function is invoked by using the icon with the wavy lines that is fourth from the left. This helps you format your code. To use it, first press Ctrl + A to select your code, and then click the icon.
In the code sample shown, your work comments (//) add commentary to your code.
Step 10: Create a Constructor
Here is the code for the constructor of the MatchingGameV1 document class. Add the new code elements to your existing code.
Note: The constructor is a function that can initialize an instance of a class. It acts like any other function, but it differs from other functions because it is named precisely the same as the class that contains it. In this case, the name of the constructor function is MatchingGameV1, which the same as the class MatchingGameV1.
The term void is used to designate that the function does not return a value.
Step 11: Implement a Repetition Structure
In future labs, you deal much more extensively with control structures, but it does not hurt to use one in this context to create a playing board of cards for the matching game.
In this case, you use a repetition control structure. There are several such control structures available to you in ActionScript. This one uses the keyword for and a common term for such structures is a for loop.
You need to create a 6 by 6 playing board. To accomplish this, you use one for loop inside another. Add the new code elements to your existing code.
The inner for loop cycles six times for each repetition of the outer for loop. Since the outer for loop repeats six times, the inner for loop repeats a total of 36 times.
For each repetition of the inner for loop, the constructor of the Card class is invoked. When you used the Linkage dialog to export the Card symbol for use by ActionScript, you made it available as a data type for use in your ActionScript file. For this reason, you can now use the new keyword to create instances of the Card class.
The mcard variable allows you to create a new Card object with each iteration, and the x and y properties of a Card object allow you to place it on the stage. The x and y properties of the Card class are inherited from the MovieClip class, which the Card class extends.
For each Card object, you call the stop() method to stop the Card object on its first frame. Then, set the position of the card using Card dimensions.
For each Card object, you call the addChild() function to add it to the stage.
Step 12: Associate the Document Class
Now you can create your playing board. To do so, however, you must associate the Document class with the Flash application.
To accomplish this, click on the tab of your [url removed, login to view] file.
On the stage of your Flash application, click once again.
Press Ctrl + F3 or select Window > Properties > Properties. You see the Properties panel to the right of the stage.
In the Properties panel of the stage in the Class field, enter MatchingGameV1. This identifies the timeline class.
Step 13: Test and Debug Your Code
You see a game board that is six cards across and six cards down.
Step 14: View Compiler Errors
If your application does not compile correctly, you will see a Compiler Error panel. Press Ctrl + F2 to view it. Also, select Window > Compiler Errors.
If you click on the line reporting the error, the application takes you to the point in your code at which the problem occurs.
Step 15: Common Problems
Common problems are usually along the following lines:
Forgotten braces: Examine the code samples closely, checking them character by character if necessary. The code sample shown above has been copied directly from the compiler and has compiled correctly.
Make certain that the class name is spelled the same as the file name. Make certain that the name of the constructor is the same as the class.
In your *.fla file, make certain that that name of the document class (MatchingGameV1) has been correctly typed in the Document class field of the Properties panel.
In your *.fla file, right-click on the Card symbol in the Library panel and verify that you have exported it for ActionScript and that it is named Card.
Verify that you have saved all the files in your project.
Verify that the *.as and *.fla files are in the same directory.
Step 16: Setting Up for Work
In the previous steps of this lab, you have worked with a file named [url removed, login to view], the ActionScript file. Save your [url removed, login to view] file as [url removed, login to view] using the File -> Save As… command.
Change the name of the class to MatchingGameV2.
Change the name of the class constructor to MatchingGameV2.
In the [url removed, login to view] file in the Properties panel, change the name of the identified Document class to MatchingGameV2.
Test your application. You should see the same result you observed at the end of the first part. Remember to use the Save All function.
Step 17: Add Class Attributes (or Class Variables)
Working from the existing code that you created, add the following class attributes (class variables) after the “public class” signature line.
A class attribute is also known as a class variable. These variables are all distinguished by three keywords:
private: an access modifier that makes it so that the variable cannot be used (is not visible) outside the scope of the class (outside the braces that enclose the class).
const: a keyword that makes it so that the variable that it qualifies cannot be changed after its creation.
>uint: a keyword that defines a data type, in this case an unsigned integer. An unsigned integer is an integer that can have only a positive value.
Number: a keyword that specifies any number—rational or integer—that you want to use. It differs from a uint because it can be positive or negative and because it can be much larger. Unless you have a reason for doing so, use the Number data type for numbers.
In each case, you see the name of a class variable, such as boardWidth. You then see a colon (:). After that you see the data type keyword. This is how you define a variable.
In this case, the variable you define is within the scope of the document class, so you use an access modifier. As you will see later, if you are not working within the scope of a class, you cannot use an access modifier. Flash allows you to write both object-oriented programs (such as this one) and procedural programs (such as those you use in the scripts associated with specific frames).
Step 18: Replace Magic Numbers
It is generally not considered good programming to use what are known as literal constants in the code of a program. A literal constant is simply a number that you include in your code. Rather than a number, the preferred practice is to employ a defined constant. In the previous section, you created six defined constants, each of which is a data member of your Document class.
Since all of the data members represented are constants, you can identify them fairly easily. Here is the code you have implemented in Part 1. In the first for loop line, you see x < 6. The number 6 is a literal constant.
public function MatchingGameV1():void {
//implementation needed
for(var x:uint=0; x < 6; x++) { // width of board
for(var y:uint=0; y < 6; y++) { //height of board
var mcard:Card = new Card();
[url removed, login to view]();
mcard.x = x * 52 + 120; //horizontal spacing
// = offset X
mcard.y = y * 52 + 45; //vertical spacing
// = offset Y
addChild(mcard);
}
}//end for implementation
}//end of constructor
Using the constants you have defined as your class member variables, replace the literal constants 6, 52, 120, and 45. Refer to the comments above to see how to replace the values.
Here is an example of how the outer loop looks after the replacement:
for(var x:uint=0; x < boardWidth; x++) {
Step 19: Test
To see the usefulness of defined constants, temporarily change the values as follows and view the results:
private static const boardWidth:uint = 4;
private static const boardHeight:uint = 4;
This is what you see:
Remember to change the board size back to 6 by 6, but at the same time keep in mind that for purposes of testing, you are likely to want to set the values to 2 by 2.
Step 20: Conclusion and Turning in Your Work
Retain copies of your [url removed, login to view] and [url removed, login to view] files. They will be used in the Week 5 iLab.
At this point, your Lab 4 work is complete. Save your *.fla, *.as, and *.swf files showing your work. These files should be named as follows:
[url removed, login to view]
[url removed, login to view]
[url removed, login to view]
(For example: John Smith = [url removed, login to view], [url removed, login to view], and [url removed, login to view])
Project ID: #2231652
About the project
Awarded to:
