Building a simple Picture Viewer:Part Three

This example is based upon one of the Tutorials that comes packaged with Flash. Essentially this "Viewer" allows you "scatter" the images on the stage. Click an image and two things happen:

This can be accomplished by understanding a couple of the fundamentals of Flash. The first is the power of the MovieClip. The second is the ability to load .jpg images into a MovieClip when the movie is playing.

Image 1: Click a picture and it moves to the front of the "stack" and is draggable.

This lesson is more of a deconstruction than a construction. We will be examining the structure of the movie clips that make up the movie and the Actionscript that makes the movie function. To get started:

  1. Dowmload the Part3Ex file and unzip it to your hard drive.
  2. Open the .fla file in the folder.

Deconstructing the structure:

When you open the .FLA the first thing you will notice is the movie is composed of four layers, one of which, contains part of the code that drives the movie. On the stage are five grey boxes and a title.

Image 1: Everything is on a seaparate layer.

When you open the Library you will see there are a series of MovieClips in the library. They are:

Image 2: The MovieClips in the Library

 

Symbols and instances

The five MovieClips on the stage will each need to hold separate images. Thus each clip on the stage has to be treated as a separate entity. This is accomplished by dragging five copies of the "snapshot" MovieClip from the library to the stage. The MovieClip is a symbol (There are three types in Flash: Image,Movie and Button). Each one of the those clips is now independent of the MovieClip in the library. Still, if you were to change the color of the "picture area" MovieClip to red that change would appear in the "snapshot" MovieClip and in the five copies of that MovieClip that are on the stage.

MovieClips that sit on the stage, though, have properties that are independent of their parent in the Library. For example, if you were to resize one of the clips on the stage, only that clip would resize. The others would not. In order to alow MovieClips to differentiate themselves, they need to be named.

  1. Click on a MovieClip on the stage.
  2. Open the Property inspector and notice the name of the selected movie clip.

This name is called an "Instance name" and any symbol dragged from the library that is sitting on the stage is called an "instance" of the symbol.

Image 3: Instances of symbols are given names in the Property inspector.

How the code works:

If you open the code in Frame 1 of the Actions layer you will see:

this.snapshot1.photo.loadMovie("picture01.jpg");

this.snapshot2.photo.loadMovie("picture02.jpg");

this.snapshot3.photo.loadMovie("picture03.jpg");

this.snapshot4.photo.loadMovie("picture04.jpg");

this.snapshot5.photo.loadMovie("picture05.jpg");

One little trick to reading the code is to read it backwards, from right to left. In this case the code, in English, for the first line is:

Find the .jpg image named "picture01.jpg" and load it into the MovieClip named "photo", which is in the MovieClip "snapshot1" and it can only be applied to this MovieClip.

LoadMovie is a function that that loads a .swf or external .jpg image into a MovieClip while the movie is playing. In the case of a slide show, only the needed .jpg is loaded at runtime and the images aren't in the library. The result is a seriously small .swf file that loads very quickly.

This is an identifier that references an object or movieclip instance.

Now that you know how the picture is added to the MovieClip, you are probably wondering how the MovieClip moves to the fron of the stack when it is clicked and can then be dragged. This is done by treating the MovieClip like a button.

MovieClips sitting on the stage can also be treated just like buttons. In this way you can have a MovieClip sitting on the stage and nothing happens to trigger the clip until the user clicks on it. The code that makes this happens is:

on (press) {
startDrag(this);
mx.behaviors.DepthControl.bringToFront(this);
}

on (release) {
stopDrag();
}

Let's go through it line-by-line:

on (press) {

When the mouse is pressed...


startDrag(this);

...make the MovieClip that is clicked able to be dragged.


mx.behaviors.DepthControl.bringToFront(this);

... and apply the bringtoFront behavior from the behavior library to move it to the top of the pile.


}

on (release) {

When the user releases the mouse..


stopDrag();

... turn off the ability to drag the MovieClip around the stage.


}

Flash behaviors are located in the Behaviors panel. To apply the bringtoFront behavior, select the MovieClip and click the "+" sign in the Behaviors panel. Select Movieclip>Bring to Front. Select the instance name of the movieclip where the behavior will be applied in the dialog box and click OK.

Publishing the movie

When you publish this file be sure to place the .swf in the same folder as the images or they will not appear in the final .swf . If you do use a separate folder for the images then you have to change the parameter in loadMovie("picture01.jpg"). The parameter should reflect the path to the image. For example, if the images are beink kept in a folder on your site named "pictures", the actual parameter would be:

this.snapshot1.photo.loadMovie("picutures/picture01.jpg");

 

Creative Commons Licence