Digital Media. Seasons Assignment. 1. Copy and open the file seasonsbegin.fla from the Read folder.

Transcription

1 Digital Media Seasons Assignment 1. Copy and open the file seasonsbegin.fla from the Read folder.

2 2. Make a new layer for buttons. Create a button that the user will click to start the interaction. (Be sure to give the button an instance name in the scene!)

3 3. Make a new layer for actions. Open the actions for frame 1, and begin with a stop statement. Then add an event listener for the button you created in step 2, sending Animate to frame 2. Note that the import statement in line 1 will normally appear automatically after you complete the addeventlistener line. If it does not, create a new line and type in the import statement manually.

4 4. Test your project. When it first opens, it should be frozen on frame 1. Click the Start button; does anything happen? It may appear that nothing changes, but there are several methods we can use to test that. One is by using the trace function, which can be very useful for troubleshooting. In the code for the Start button, add a line that uses the trace function to print out a message. The message itself is not important, and it will not appear in the test window. It will, however, print out in the output tab of Animate, and will tell us whether the Start button is functioning at all. Note that whatever is inside quotes is shown in green, and that will print out exactly character for character in the output tab. Now when you test again and click the Start button, you should see: (or whatever you entered in the trace command). Because the trace function worked properly, the button itself seems to be functioning. In other words, Animate really is going to frame 2. Why don t we see it? Perhaps it is going to frame 2, but then returning to frame 1 so quickly that we cannot see it. We can test this by entering a stop statement in frame 2 of the actions. After inserting a blank keyframe on frame 2 of the actions layer, and adding a stop statement, the animation should stop on frame 2.

5 5. The library contains four images related to the seasons. From the library panel, click and drag the Autumn image on to the stage either on to the buttons layer or to a new layer that you create, such as seasonimages. Convert the image to a symbol. In the dialogue box that opens, set the symbol to Movie Clip, and click the box labeled Export for ActionScript. (If you do not see that option, you might need to expand the Advanced section of the dialogue.) Animate will by default give a Class name which is the same as the name of the movie clip. You can keep that name, or change it to something such as AutumnMC. Click OK twice to return to the stage. You should now see the Class name displayed to the right of the movie clip in the library panel.

6 6. Repeat this process for the Spring, Summer, and Winter images. 7. Position the season movie clips on the stage as desired. Select each individual movie clip and note its position (x and y coordinates) in the Properties panel. You might want to write down these coordinates, as you will need to enter them in ActionScript. 8. Now that you have the locations picked for the seasons, you do not need the movie clips on the stage anymore. Delete them from the stage (but not from the library!). 9. Declare a variable for each of the season movie clips, using the Class name that you assigned to each previously. (You should still be in frame 2, on the actions layer.) 10. Add the season movie clips back into the scene by using an addchild statement in ActionScript. This is where you will need to know the positions where you want to place the movie clips. You

7 will not see the movie clips until you test the movie. Your positions may be different; these are provided simply as an example. This adds an instance of the Autumn movie clip at position 800, If you test your project at this point, you should notice a few issues. First, when you click the Start button and advance to frame 2, the Start button still appears. We will fix that in the next steps. Second, if you click the Start button while in frame 2, it will take you to frame 1, even though we have not entered any code to tell it to do so. This is also no problem, as you will soon see. Third, if you advance to frame 2 and then return to frame 1, the season movie clips will still be on the stage, even though we would like them to be gone. Fear not, we shall also remedy that situation quite soon. ***** Publish your file at this point and submit as Last_First_Seasons1.swf. ***** 12. Insert a blank keyfame in frame 2 of the buttons layer. This will remove the Start button from the scene in frame 2. Note that simply deleting buttons that have had ActionScript applied to them sometimes causes problems; it may be necessary later on to bring that button back, but move it off stage so it is out of sight. If you have any concerns that this could happen, you are welcome to keep the button now by inserting a keyframe in frame 2 rather than a blank keyframe, but be sure to move the Start button off of the stage. 13. Insert a new layer, which will host a thermometer, and insert a keyframe at frame 2. Drag a copy of the thermometer movie clip from the library into the location that had been occupied by the Start button. Select the thermometer movie clip into the scene but off of the stage and give it an instance name, such as Thermometer_mc.

8 Create an instance of the thermometer movie clip and make it visible on the stage by using the desired x and y values (in frame 2 of the actions layer), as you did with the seasons images: 14. With the thermometer selected, click on Window Code Snippets and expand the Actions folder. Double click the Drag and Drop listing; this will automatically enter some code for the thermometer in your actions.

9 15. We need to make one edit to the code snippet. The ReleaseToDrop function begins with an event listener added to the stage. This means the code will apply as soon as the user enters that frame (frame 2), where the stage is present. We want this function to apply only after the user has dragged the thermometer and then released it, so change the word stage to the name of your thermometer movie clip. becomes 16. Next we want to encourage the user to drag the thermometer to one of the seasons. We can create a text box that will do so. We will be using several text boxes in this project, so create a layer for text (Note that it is common practice to keep the actions layer at the top, so insert a new layer below that.) and insert a keyframe in frame 2. Then create a static textbox (the text remains constant) directing the user to drag the thermometer to one of the movie clips. Make sure the font is readable against the background picture.

10 17. You can (actually should) now delete the thermometer from the stage; the ActionScript you added in Step 13 will place an instance of it on the stage. 18. Now we want to be able to tell which season the user selects. One way to do so is by detecting a collision between the thermometer and one of the seasons. Say for example the user drags the thermometer to the Spring movie clip. We would like that to trigger some additional events, such as moving to a scene that has a spring-like image, or even a spring-themed animation. (The possibilities are limitless see what springs to mind!) And while we might wish to keep the Spring movie clip visible in our scene, we would like to at least hide the other three seasons. Because the seasons are movie clips, which have had variables associated with them, we can use a binary visibility function to turn the movie clips on and off: set the visible status to true or false. Note these actions are in frame 2. Also, the hittestobject function could cause some difficulties if we do not make the thermometer movie clip disappear. A quick way to do this would be to turn the visibility to false, but unfortunately that simple trick often causes errors in Animate. Another option is to immediately move the movie clip off-stage, by assigning an x or y-coordinate that is clearly outside of the 1280 x 720 dimensions of the stage: 19. This particular example sends the user to frame 3 if he/she selects Spring, so now we need a frame 3. We can start by adding a keyframe to the background layer in frame 3, and then deleting and replacing the background image, or by inserting a blank keyframe (which will automatically remove the image) and placing a new image in place. Also insert a blank keyframe on the actions layer, and create a stop statement in frame 3, so that the animation does not automatically advance. 20. Next we want to create a system that will convert a Fahrenheit temperature that the user enters into Celsius. This will include three different types of text boxes: a static text box to direct the user, an input text box where the user enters a temperature, and a dynamic text box that will output a converted temperature. Create a static text box that requests the user enter a temperature in Fahrenheit, and click a convert button. Create an input text box for the user to enter a temperature. Note that input and dynamic text boxes need instance names. Check the Show border around text option, so that the user can see the text box. Also, be sure to embed fonts, for numbers at a minimum, but you can also check upper and lower case letters.

11 Important detail: Looking ahead, you will be using an input text box for each season. Animate will not be happy, however, if you try to use the same text box with the same instance name in multiple frames. To prevent errors, you might want to add a unique identifier to the instance name, such as the frame number. Note the example for frame 3: FahrIn3Box.

12 21. Of course we will also need a Convert button. Create one and place it on the stage, on the buttons layer. (Insert a blank keyframe on the buttons layer first.) You can reuse this button for the other seasons, but they should have different instance names, so you might want to give it an instance name corresponding to the season. In this example, the button itself is called Convert_btn, but the instance name is Convert_Spring_btn. 22. Add an event listener to the Convert button, which will send the user ahead one frame to show the converted temperature. 23. We will need several variables for our conversion, all of which will be numbers. For starters, consider the temperature that the user inputs. Although it is a number, it is entered in a text box, which means it has a String data type. We can convert it to a Number data type by a process known as casting. In this example, tempfahr is the name of the variable representing the temperature in Fahrenheit, and FahrInBox is the name of the text box where the user enters a temperature. We will need another variable to represent the Celsius temperature, which we will find by converting the input temperature into Celsius. Place these declarations in frame 1 or 2!

13 24. Now that we have these variables, we can add some code to our Convert button actions (frame 3). We want to cast the input temperature to a Number data type, and round it to an integer in case the user enters a decimal, and then convert that temperature to Celsius, again rounding. Add these two lines to your already existing convert function..text takes whatever text has been entered in the named text box Here we are casting the text to a Number data type. 25. In frame 4 of this example (your frame numbers might be different), we want to provide the user with the converted temperature, as well as an option to go back to the beginning. Create a dynamic text box which will display the temperature in Celsius. You may also create a static text box which indicates something about the fact that Celsius is indicated, and perhaps even another dynamic text box that shows the Fahrenheit temperature that the user entered in the previous step. Note: Part of the student s task here is to determine which layers may need a keyframe or blank keyframe for frame 4. Don t forget instance names for any dynamic text boxes you use! Also remember that you may wish to include a reference to the frame number or season in the instance names.

14 Dynamic text boxes frequently have the Show border around text option disabled, but that is personal preference. 26. Now we need the code to display the desired temperature(s). Here is an example: Note that the temperatures have been cast to String data types, because they will appear in text boxes. 27. Create some type of Restart button, so that the user can go back to the beginning (frame 2 in this case). This button should also turn off the visibility of the thermometer (which is put back in place upon returning to frame 2) and the current season movie clip (Spring in this case). ***** Publish and turn in your project as Last_First_Seasons2.swf. ***** 28. So far you should have a welcome scene, a scene with four images representing the seasons, a thermometer that the user can drag to a season, and an action that occurs if the user drags the thermometer to the Spring movie clip instance. Complete the project by creating actions for the remaining three seasons. If you want a similar action to take place for each season, you will be able to copy and paste much of your project, and make some changes in the code to reflect the different seasons. If you want more variety, this will of course entail more work but it may be worth the extra effort! ***** Publish and turn in your completed project as Last_First_Seasons3.swf. *****