Building a simple Picture Viewer:Part Four

In this exercise we do things a lot differently than in the past three. As you have seen, MovieClips are a rather powerful feature of the application and they can be manipulated at run time. In this exercise we create the MovieClip at run time rather than create one during development. The other interesting feature of this exercise is the use of descriptive text for each image. This is accomplished by using Dynamic text rather than Static text.


Creating the movie clip at run time uses createEmptyMovieClip(). It is a method which creates an empty movie clip as a child of the parent which, in this case, is the stage. It behaves exactly like the attachMovie() method but the neat thing is you don't need to provide an external linkage name for the movie clip being created. Also keep in mind that the registration point for the new MovieClip is always the upper left hand corner of the clip.

Text in Flash is handled, for the most part, in one of two ways. It can be Static meaning the text appears on the stage when you input it. Dynamic text is totally different. It streams into the text area either through the use of Actionscript code or uses Actionscript to call the text into the area from an external source such as an XML document.

Image 1: The final project .swf and the Flash stage.

 

Getting started :

  1. Create a new folder on your Desktop and copy the images in the Exercise folder to this folder.
  2. Launch Flash and create a new document with a stage that is 350 pixels wide by 310 pixels high.
  3. Create three new layers and name the layers, starting with the bottom layer:
    • Actions
    • Head
    • Text
    • Buttons
  4. Select Insert>New Symbol (Control-F8...PC or Command-F8...Mac) to open the New Symbol dialog box.
  5. Name the symbol photoButton_btn and select Button as the Behavior.
  6. When the Button Symbol editor opens, click once on the "Up" keyframe and draw a small green square on the stage.You only need the up state because the button will be clicked to change the image.
  7. Click the Scene 1 button to return to the main timeline.
  8. Drag a copy of the button to Frame 1 of the Buttons layer.

Image 2: The button that controls movie is created.

Creating Multiple Buttons from 1 button:

  1. While pressing the Alt/Option-Shift keys, click drag a copy of the button on the stage below the original. Repeat this step three more times to create five copies of the button on the stage.
  2. Select the first button and give it the instance name of "btnPic1".
  3. Select the second button and give it the instance name of "btnPic2".
  4. With the second button selected, select Color>Tint on the Property Inspector.
  5. Select a color from the color chip and set the opacity to 100%.
  6. Repeat steps 3,4 and 5 for the remaining three buttons.

Image 3: Five buttons can be created from one button symbol.

Adding the text

  1. With the button finished we can now turn to adding the text to the movie. We will be adding both static and dynamic text to this movie.
  2. Select the keyframe in the Text layer and select the Text tool.
  3. Click once on the screen and drag out a Text Box.
  4. With the Text Box selected select Dynamic from the Text properties and give the object the instance name of "textBox". Assign a font ,point size and text alignment to the text box.

Image 4: The dynamic text box is created and assigned an instance name.

  1. Select the key frame in the "Head" layer.
  2. Select the Text Tool and click once in the selected layer.
  3. Enter the words "Orlando Hotel" and assign them a font, point size and text alignment in the Property inspector.

"Wiring it up" with Actionscript

Now that the assets are in place it is time to make the Picture Viewer functional through the use of Actionscript.

Select the keyframe in the Actions layer and enter the following code:

_root.createEmptyMovieClip("mcImageHolder",1);
mcImageHolder._x = 85;
mcImageHolder._y = 70;

btnPic1.onRelease = function()
{
mcImageHolder.loadMovie("picture01.jpg");
textBox.text = "Picture 1";
}

btnPic2.onRelease = function()
{
mcImageHolder.loadMovie("picture02.jpg");
textBox.text = "Picture 2";
}

btnPic3.onRelease = function()
{
mcImageHolder.loadMovie("picture03.jpg");
textBox.text = "Picture 3";
}

btnPic4.onRelease = function()
{
mcImageHolder.loadMovie("picture04.jpg");
textBox.text = "Picture 4";
}

btnPic5.onRelease = function()
{
mcImageHolder.loadMovie("picture05.jpg");
textBox.text = "Picture 5";
}

Let's look at the the first two chunks of code and review what they do:

_root.createEmptyMovieClip("mcImageHolder",1);

This line creates the new empty MovieClip. The clip is given an instance name ""mcImageHolder" and is placed at the same level as the movie "1". This clip is then added to the main timeline "_root".


mcImageHolder._x = 85;
mcImageHolder._y = 70;

These two lines position the clip on the stage. The values are the x and y coordinates for the registration point of the empty Movie Clip. To get those numbers I drew a box on the stage that matched the size of the images - 320 X 240 -, moved it into place and then noted the X and Y values for the box in the Property Inspector. I then deleted the box.

btnPic1.onRelease = function() {
mcImageHolder.loadMovie("picture01.jpg");
textBox.text = "Picture 1";
}

This chunk of code is a "function". In Actionscript , functions are self contained bits of code that are only executed or "called" when you need them. In this case, when the button is clicked. Note that the instance name is placed in front of the "onRelease". In this way, the function will only execute when the button is clicked. When creating functions also note that the arguments are placed between the curly braces- {}.

The first argument tosses the picture into the empty Movie Clip.

The second puts the text "Picture 1" in the dynamic text box named "textBox". You can enter any text you wish as long as it is enclosed within quotation marks. In english, it would read: Put the this text "Picture 1", which is text (.text) in the object on the stage named "textBox".

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:

mcImageHolder.loadMovie("pictures/picture01.jpg");

 

Creative Commons Licence