Wikibooks

Introduction to ActionScript 2.0/MovieClips

< Introduction to ActionScript 2.0
Introduction to ActionScript 2.0
Arrays MovieClips Date and Time

Key concepts:


ActionScript 2.0 revolves around movie clips. (They have decreased in importance in AS3, but they remain an important part of Flash applications.) In this long chapter, we will go through the nitty-gritty details of movie clips.

What are some basic movie clips concepts to know?

edit

What is the stage?

edit

The stage is the area where all the action happens. The Stage class is a class containing static functions, static properties and event handlers related to the stage.

How can I get the stage dimensions?

edit

The first properties we need to know are Stage.width and Stage.height. These are read-only properties, which means we can retrieve their values, but cannot change them during runtime. They are set in the Flash IDE itself through the Modify > Document window. The following code retrieves the coordinates of the centre point of the stage:

Code Result 
var centrePoint:Object = {x:Stage.width/2, y:Stage.height/2};
trace(centrePoint.x);
trace(centrePoint.y);

Depends on application settings.

Note how we created an object with the properties x and y. This will come in handy later in this chapter and in the second section.

How can I set the application to full-screen mode?

edit

Sometimes, we want the stage to, well 'jump out of the box' of the player or browser and occupy the whole screen. This is called full-screen mode. The Stage class has functions for doing so. Note that full-screen mode must be initiated by user input, and the application is not allowed to do it itself. It is also worth noting that keyboard input is disabled in full-screen mode. Furthermore, full-screen mode can only be used when the application is embedded in a webpage. This is because of security reasons. The HTML code also needs to be slightly altered to support the full-screen mode.

The Stage.displayState should be altered in order to toggle in and out of full-screen mode.

What exactly is a timeline?

edit

By now, you should be quite familiar with Flash timelines, but how exactly do they work?

When a Flash application without ActionScript runs, a playhead runs through the frames of the main timeline and plays them one by one. When there are MovieClip symbols on the stage, they each have a playhead and a timeline, too. The speed at which the playhead moves is called the frame rate, which is measured in frames per second (fps). For example, an application with 10 fps moves ten times a second.

Now, this is a bit different when ActionScript comes in. The first thing to remember is that the code in each frame is executed before the frame is displayed. For instance, if you put gotoAndStop(3); in the first frame of a movie clip, it will jump directly to the third frame without displaying the first frame. There are several functions which move the playhead, and we've learnt them in the first section, so here's a quick refresher:

  • play() and stop() will play and stop playing the frames in order respectively.
  • gotoAndPlay(frame) and gotoAndStop(frame) will go to the specified frame, then play and stop the Flash respectively.
  • prevFrame() and nextFrame() go to the previous and next frame respectively. Unless there is a stop() statement on the target frame, they will play.

You might think that once the playhead is stopped, e.g. with gotoAndStop or stop, the frame rate is no longer significant. That cannot be further from the truth. Remember events? When events are triggered, the screen does not change immediately. Instead, it waits till the next time the frame is 'entered', which happens at the frame rate. There are two exceptions to this rule, both involving a special function; we'll discuss one later in this chapter, and another in the next chapter.

The onEnterFrame event of the MovieClip class allows code to be executed constantly, at the frame rate. The following example shows how to make a box fall:

Code Result 
//Assume that 'box' is a MovieClip instance on the stage.
onEnterFrame = function(){
     box._y++;
     trace("The box moved!");
}

The box moved!
(x infinite times)

Now suppose we want the bottom edge of the application to act as the ground. How should be change the code?

Code Result 
//Assume that 'box' is a MovieClip instance on the stage.
onEnterFrame = function(){
     if(box._y != Stage.height - box._height){
          box._y++;
          trace("The box moved!");
          if(box._y > Stage.height - box._height){
               box._y = Stage.height - box._height;
          }
     }
}

The box moved!
(x number of times the box moves before hitting the ground)

What are scenes?

edit

The Main Timeline has a limited number of frames. If you wanted to create a Flash application involving a lot of frames, such as a detective game, it may not be sufficient. In addition, in an application with lots of frames, it may be irritating if you keep all the frames in the same timeline. Fortunately, there is one solution to this problem: scenes. A Flash application may have lots of scenes. Click on the Window menu in the Flash IDE to create, delete and rename scenes. There are four functions that allow you to change scenes:

  • prevScene(scene);
  • nextScene(scene);
  • gotoAndPlay(scene, frame);
  • gotoAndStop(scene, frame);

You might be wondering why gotoAndPlay popped up again! Well, this gotoAndPlay is not the same as the MovieClip method gotoAndPlay(). Firstly, MovieClip.gotoAndPlay(frame) and MovieClip.gotoAndStop(frame) don't require the first scene parameter. All four functions are global functions, and it doesn't matter where you call them; they always, without exception, move the main timeline. Here's an example with three scenes (firstScene, secondScene, lastScene):

Code Result

On the first frame of the first scene: 

stop();
trace("Welcome to firstScene!");
Mouse.addListener(this);
this.onMouseDown = function(){
     if(Scene.currentScene != "lastScene"){
          nextScene();
     } else {
          gotoAndPlay("firstScene", 1);
     }
}

On the first frame of the second scene: 
trace("Welcome to secondScene!")

On the first frame of the third scene: 
trace("Welcome to lastScene!")

Welcome to firstScene!
When the mouse is clicked for the first time:
Welcome to secondScene!
When the mouse is clicked for the second time:
Welcome to lastScene!
When the mouse is clicked for the third time:
Welcome to firstScene!

Unfortunately, Scene.currentScene is not available for older Macromedia versions of Flash. Therefore, you may need to devise some clever technique to work around this problem. For example, you could put a movie clip with a weird name off the stage of the last scene. If that movie clip is defined, then the mouse click should result in a move to the first scene.

Can I name frames?

edit

Frame numbers are usually quite difficult to remember. It is often a good idea to name your most important frames. Frame names are called frame labels. To label a frame, type in the name in the properties panel. The label can then replace the frame number in the gotoAndPlay function (both MovieClip and global).

Code Result 
//Assume that the fps is 20 and someImportantFrame is frame 5.
var timePassed:Number = 0;
onEnterFrame = function(){
     if(_currentframe == 1){
          timePassed++;
          if(timePassed >= 20){
               gotoAndPlay("someImportantFrame");
          }
     } else if(_currentframe == 5){
          trace("Welcome to Frame 5!");
     }
}

After a second:
Welcome to Frame 5!

How can I change the appearance and position of a MovieClip?

edit

Movie clips and coordinates

edit

As we've already discussed, _x and _y are the x- and y-coordinates of (the top-left corner of) a movie clip in its parent. That's all good, but how can we find the coordinates of a movie clip on the stage when it is two levels above the main timeline? How about the opposite? Can we find the coordinates of a movie clip on the stage in terms of another movie clip on the stage?

Local coordinates are the coordinates of a point inside another movie clip, while global coordiantes (also known as stage coordinates) are the coordinates of a point on the stage. The MovieClip.localToGlobal() and MovieClip.globalToLocal() functions convert between local and local coordinates. Let's try them one by one.Put an apple movie clip instance on the stage, then place a worm movie clip instance inside it. Our job is to find the coordinates of the worm, relative to the stage. Put the following code on the first frame of the main timeline:

Code Result 
var someCoordinates:Object = {x:apple.worm._x, y:apple.worm._y};
apple.worm.localToGlobal(someCoordinates);
trace("Global coordinates: (" + someCoordinates.x + ", " + someCoordintes.y));

Depends.

_xscale and _yscale

edit

_xscale is the ratio of a movie clip's original width in the library and its current width after scaling. _yscale is the ratio of a movie clip's original height in the library and its current height after scaling. They are not related to the _x and _y properties! If _xscale and _yscale are equal, then the aspect ratio of the movie clip is unchanged.

Code Result 
apple._width = 10;
apple._height = 10;
if(apple._xscale == apple._yscale){
 trace("Same aspect ratio!");
} else {
 trace("Different aspect ratio!");
}
trace("Global coordinates: (" + someCoordinates.x + ", " + someCoordintes.y));

Depends.

Opacity

edit

_alpha is a measure (from 0 to 100) of a movie clip's opacity. If a movie clip has an _alpha value of 0, it is completely transparent; if its _alpha is 100, it is completely opaque. Try playing around with _alpha!

Code Result 
apple._alpha = 0;

What is focus?

edit

Have you ever had two windows on your screen at the same time? When you, say, type, the text would affect only one of the windows. The affected window has focus and the other window does not.

Movie clips also have focus.

How do movie clips respond to mouse actions?

edit

What are the events associated with the mouse?

edit

How can the user drag movie clips?

edit

How can I detect collisions?

edit

To detect collision between Movie Clips its actually quite simple,

there are two methods:

if(MovieClip1.hitTest(MovieClip2)) will detect if MovieClip1 and 2 hitboxes are touching.

and

if(MovieClip1.hitText(x,y,flag)) will detect if the MovieClip1 hitbox is touching the x and y position.

How can I create movie clips dynamically?

edit

What is depth?

edit

How can I use movie clips from the library?

edit

How can I create empty movie clips?

edit

How can I duplicate movie clips?

edit

How can I destroy movie clips?

edit

How can I change a movie clip's depth?

edit

What is the drawing API?

edit

Is there anything else to learnt about movie clips?

edit
  • _quality
  • getSWFVersion

Conclusion

edit

Notes

edit
Retrieved from "https://en.wikibooks.org/w/index.php?title=Introduction_to_ActionScript_2.0/MovieClips&oldid=4452281"