Fall 2010 week 7:—10/27: Wed 12:25pm - 3:25pm &—10/29: Fri 6:00pm - 9:00pm

Hi Everyone,

I'm very proud of all of you this week. You have been trying very hard to solve this problem of the back button. I'm not putting the steps to solve it here in this blog post. I'll take you through them in class.

Instead, I have some steps for you to follow for a little something new.

Carter-

1. WEEK 8
   
   1. Classwork
   • LINK    no class files this week
   2. Homework:
      • Exercise 1:    Now let's play around a little bit with the display.
      
      
      1. Perhaps, your first question would be to ask, "what is the display?". What this is really about is stuff that is displayed in the player when you test a flash movie. It's about doing cool stuff with ActionScript. Many of you, I am sure, will be happy to know that after the last couple of weeks of all this typing and absolutely NOTHING visual, no graphics, nada, that here we begin doing graphic stuff again, but with code.
      
      
      2. What we're about to explore is known as the display list, in case you want to look it up in your own book or do a search online. As in many other things with ActionScript 3.0, the terminology is a bit deceptive and non-descriptive, but oh well. They didn't ask me.
      
      
      3. The display list is made up of a hierarchy of display objects. All of these belong to what is known as the DisplayObject class, which is just part of the DisplayObjectContainer class, both of which are built-in classes that are part of Flash when you buy or download it. There are many children of these classes, basically everything visual that you can put in or create in a Flash movie is part of a Flash class. Here are some examples of these classes:
         
         
         1. DisplayObject—This class provides basic graphical properties to objects, such as width, height, x, and y.
         2. InteractiveObject—This class provides various methods and properties that allow users to interact with objects in Flash, such as Movieclips.
         3. DisplayObjectContainer—This class provides the ability for some objects to contain other objects, such as Movieclips which may, for example, contain other Movieclips.
         4. Sprite—This class provides similar functionality to Movieclips. It is not something that you can create graphically by drawing it as you can with Movieclips, but may only be created through code.
         5. MovieClip—This class will be the most familiar to you as you have been creating Movieclips now for a few semesters. This class of objects have their own timeline and all the properties and functionality that go along with that, such as playing and stopping the timeline.
         
         
      4. So, let us get started. First, you'll need to create a new project folder named dma213_project_01. As you have surely noticed by now, in all classes that use coding such as HTML, JavaScript, and PhP, you need to be careful, specific, and tediously precise about naming and saving your files. ActionScript is no different, especially when you start working with classes.
      
      
      5. Open up a new .fla file and save it as display.fla within this new folder.
      
      
      6. Draw a perfect square with the dimensions 100 X 100 and with a rather thick black outline.
      
      
      7. Select this square (make sure you get both the fill and the stroke, and convert it into a symbol. Name it Square (upper-case S), select movieclip for type, make sure the registration point is the upper-left, and then, if necessary, click on the advanced button here to open up and see additional options. Once you do so, or if the convert to symbol box already opened up wide, check off where it says Export for ActionScript. Once you do so, you'll see the symbol name appear there (now also a class name) and what sort of class it is (MovieClip). The reason we're doing this is because we're going to save our class in a separate folder. As you've learned in other coding classes, it is always good to segregate your different types of files. It is no different in Flash. Moreover, in Flash, it is often possible to re-use your classes for other projects, so we will often locate them in other disparate folders. Now, click Okay.
      
      
      8. Now, with the symbol selected, give it an instance name of square (lower-case s).
      
      
      9. Now, within the folder that you've already created, you must create a new folder named wk8.
      
      
      10. Once you do that, back in Flash, Create a new ActionScript file for the document class. Save the file within the new wk8 folder and name it DisplayTest.as.
      
      
      11. Within the new .as file, type the following class definition and class constructor:
      
      
      1. package wk8 { /* package is named the same thing as the
                         folder where the class is located. */
      2.  
      1. import flash.display.Sprite;
      2.  
      3. public class DisplayTest extends Sprite { /* here, we are
                       using the properties of the Sprite class as
                       it already exists in Flash to indicate to
                       what family, or class, our own custom class
                       (DisplayTest) belongs.*/
      1. public function DisplayTest() {
      2. }
      4.  
      5. }
      3.  
      4. }
      
      
      12. But we have a couple more things to do before we can test this out. First, let's put a trace in our constructor method above so that it does something, and we're actually going to trace the instance name of the movieclip, square.
      
      
      1. package wk8 {
      2.  
      1. import flash.display.Sprite;
      2.  
      3. public class DisplayTest extends Sprite {
      1. public function DisplayTest() {
      1. trace(square);
      2. }
      4.  
      5. }
      3.  
      4. }
      
      
      13. Save that (but don't test yet because you'll get an error). Before you test it, since we have saved our class into a different folder, we have to specify that in our class instance, the .fla file. We have to indicate that the display.fla movie should use our DisplayTest class as its document class. So, click somewhere in an empty area of the stage to deselect all, and then open up the Properties panel to show the properties for the movie. Where it says Document class:, you need to type the path (using dot notation) to the class as follows: wk8.DisplayTest. Save your changes and test your movie.
      14. More than likely, you'll still get an error, one that mentions something about type not found and MovieClip. To get around this problem, you have to import the MovieClip class in the same way that you imported the Sprite clas:
          
          
          1. package wk8 {
          2.  
          1. import flash.display.MovieClip;
          2. import flash.display.Sprite;
          3.  
          4. public class DisplayTest extends Sprite {
          1. public function DisplayTest() {
          1. trace(square);
          2. }
          5.  
          6. }
          3.  
          4. }
          
          Now, once you test your movie again, you should get some output that tells you the object with the instance name square is a movieclip:
      
      
      1. [object MoveClip]
      
      
      15. Big deal!!! You might say sarcastically. Okay, so let's now modify our square by moving it to a new spot using new x/y coordinates, and let's also modify it's shape using width/height:
      
      
      1. package wk8 {
      2.  
      1. import flash.display.MovieClip;
      2. import flash.display.Sprite;
      3.  
      4. public class DisplayTest extends Sprite {
      1. public function DisplayTest() {
      1. trace(square);
      2. square.x = 300;
      3. square.y = 300;
      4. square.width = 200;
      5. square.height = 25;
      2. }
      5.  
      6. }
      3.  
      4. }
      
      
      16. Let's also rotate the object and change its opacity:
          
          1. package wk8 {
          2.  
          1. import flash.display.MovieClip;
          2. import flash.display.Sprite;
          3.  
          4. public class DisplayTest extends Sprite {
          1. public function DisplayTest() {
          1. trace(square);
          2. square.x = 300;
          3. square.y = 300;
          4. square.width = 200;
          5. square.height = 25;
          6. square.rotation = 60;
          7. square.alpha = .5;
          2. }
          5.  
          6. }
          3.  
          4. }
          
          Below you have something like what your stage should look like in your .fla file.
          
          
          
          And then you have what the .swf file should look like when you generate it, ctrl or cmd-enter.
      
      
      
      
      
      
      • Extra Credit:    Below I will lead you through some more experimentation with the display. If you complete these steps, you will receive extra credit in the next class. We are going to work with blend modes, filters, as well as other properties throughout the rest of this posting.
      
      
      1. Depth—Normally, when working with objects on the stage, you manage depth primarily with layers. In ActionScript, the depth of an object is determined by an index number in an array of child objects on the stage. The higher the index number, the further toward the front of the movie that object appears. A Sprite instance or a MovieClip instance with an index of 0 will appear below another object with an index of 1. This depth of the display object may be manipulated, meaning that you can change the stacking order of the objects on the stage.
      
      
      1. Create a new ActionScript file, save it into the wk8 folder with the name of DepthTest.as. Then place the following lines of code inside of it:
      
      
      1. package wk8 {
      2.  
      1. import flash.display.MovieClip;
      2. import flash.display.Sprite;
      3.  
      4. public class DepthTest extends Sprite {
      5.  
      1. public function DepthTest() {
      1. trace(getChildIndex(square_01));
      2. }
      6.  
      7. }
      3.  
      4. }
      
      
      2. Save this file as depth.fla, set the document class in the properties panel as before to wk8.DepthTest. If you test the movie now, you should see that the square object is at depth 0; but this is boring. Let's see what happens when we add a few more instances to the stage.
      
      
      3. In the .fla file, drag three more instances of the Square MovieClip symbol from the Library onto the stage, and make certain each is in its own layer. Move them around so that the squares overlap each other so that you can see which is on top of which.
      
      
      4. Provide each of these symbol instances with instance names, such as square_02, square_03, and square_04.
      
      
      5. Go back to the DepthTest.as file and add a few additional trace() statements:
      
      
      1. package wk8 {
      2.  
      1. import flash.display.MovieClip;
      2. import flash.display.Sprite;
      3.  
      4. public class DepthTest extends Sprite {
      5.  
      1. public function DepthTest() {
      1. trace("square_01: " + getChildIndex(square_01));
      2. trace("square_02: " + getChildIndex(square_02));
      3. trace("square_03: " + getChildIndex(square_03));
      2. }
      6.  
      7. }
      3.  
      4. }
      
      
      6. Save your changes to the .as file, switch back to the .fla file, and test the movie. What you will find is that the symbols are arranged from level 0 to level 2.
      
      
      2. Manipulate Depth—Now that we have several objects to work with, we can begin to play around a bit with their depths using the setChildIndex() method.
      1. This method has two parameters that need to be satisfied: when using it, you must state two things, which object you want to manipulate, and then to which index level you want to move it.
      
      
      2. We'll first move the first square we had on the stage to the top of the display. As mentioned, we'll call the setChildIndex() method, passing the object named square and its new depth. Since we have only three objects, and since we are dealing with an array of 3 objects, the depths start at 0 and count up to 2 (0, 1, 2). We could use the number 2 as the top depth, but the best way to bring an object to the top of the list is to use numChildren to determine the highest depth. This property is much like the length property for arrays. If we wanted the last index of an array, we simply subtract 1 from the length (i.e. myArray.length-1). Therefore, we'll use numChildren - 1 to determine the highest index number. A parent object with three child objects has a top depth of 2 (0 for the depth of the 1st child, 1 for the depth of the 2nd child, and 2 for the depth of the 3rd child).
      
      
      1. package wk8 {
      2.  
      1. import flash.display.MovieClip;
      2. import flash.display.Sprite;
      3.  
      4. public class DepthTest extends Sprite {
      5.  
      1. public function DepthTest() {
      1. trace("square_01: " + getChildIndex(square_01));
      2. trace("square_02: " + getChildIndex(square_02))
      3. trace("square_03: " + getChildIndex(square_03));
      4.  
      5. setChildIndex(square_01, numChildren-1);
      6.  
      7. trace("square_01: " + getChildIndex(square_01));
      8. trace("square_02: " + getChildIndex(square_02))
      9. trace("square_03: " + getChildIndex(square_03));
      2. }
      6.  
      7. }
      3.  
      4. }
      
      
      3. Once you save the above changes, and test your .fla file again, you'll see that the original first square is now at the top of the list (with a 2 as its index. The indexes of the other two objects have been reduced by one.
      
      
      1. square_01: 0
      2. square_02: 1
      3. square_03: 2
      4. square_01: 2
      5. square_02: 0
      6. square_03: 1
      
      
      3. Swapping Depths—Another way of changing the index level of an object is to swap its index with another of the objects. There are two ways of doing this: use teh swapChildren() method and pass the instance names of the objects that you want to exchange depths, and the swapChildrenAt() method and instead pass the index numbers that you want to switch with each other.
      1. First, let's swap the index levels of square_02 and square_03:
      
      
      1. package wk8 {
      2.  
      1. import flash.display.MovieClip;
      2. import flash.display.Sprite;
      3.  
      4. public class DepthTest extends Sprite {
      5.  
      1. public function DepthTest() {
      1. trace("square_01: " + getChildIndex(square));
      2. trace("square_02: " + getChildIndex(square_02))
      3. trace("square_03: " + getChildIndex(square_03));
      4.  
      5. setChildIndex(square_01, numChildren-1);
      6.  
      7. trace("square_01: " + getChildIndex(square));
      8. trace("square_02: " + getChildIndex(square_02))
      9. trace("square_03: " + getChildIndex(square_03));
      10.  
      11. swapChildren(square_02, square_03);
      2. }
      6.  
      7. }
      3.  
      4. }
      
      
      2. Now, let's try swapping the indexes of the objects at level 0 and 2.
      
      
      1. package wk8 {
      2.  
      1. import flash.display.MovieClip;
      2. import flash.display.Sprite;
      3.  
      4. public class DepthTest extends Sprite {
      5.  
      1. public function DepthTest() {
      1. trace("square_01: " + getChildIndex(square));
      2. trace("square_02: " + getChildIndex(square_02))
      3. trace("square_03: " + getChildIndex(square_03));
      4.  
      5. setChildIndex(square_01, numChildren-1);
      6.  
      7. trace("square_01: " + getChildIndex(square));
      8. trace("square_02: " + getChildIndex(square_02))
      9. trace("square_03: " + getChildIndex(square_03));
      10.  
      11. swapChildren(square_02, square_03);
      12. swapChildrenAt(0, 2);
      13.  
      14. trace("square_01: " + getChildIndex(square));
      15. trace("square_02: " + getChildIndex(square_02))
      16. trace("square_03: " + getChildIndex(square_03));
      2. }
      6.  
      7. }
      3.  
      4. }