Accessibility

FlashSlideShow Article

FlashSlideShow Sample Application: Part Two: Building the Macromedia Flash Files

Veropa

Veropa

Part two of the Flash Slide Show tutorials shows you how to set up and create the Macromedia Flash files for the sample application. This tutorial covers building movie clips, adding and configuring components, and writing all the necessary code for the Macromedia Flash part of the project.

Important: Before you begin, you must download the sample files from the Flash Slide Show sample application page and follow the setup instructions.

This tutorial will cover the following:

Building the Thumbnail View Movie

  1. Open the thumbnails_tutorial.fla in Macromedia Flash MX.
  2. Select frame 1 of the ScrollPane layer.
  3. Drag a ScrollPane component from the Component Panel to the stage.
  4. In the Properties Panel (Window > Properties or Ctrl+F3), assign the following Parameters to the ScrollPane:

    Scroll Content: myScrollContent
    Horizontal Scroll: false
    Vertical Scroll: true
    Drag Content: false

    and assign the following Properties to the ScrollPane:

    Instance Name: myScrollPane
    Width: 100
    Height: 100
    X position: 0
    Y position: 0
  5. In the Library (Window > Library or F11) right-click on the movie clip myScrollContent in the scrollPane Clips folder and select Linkage. Assign the following:

    Linkage: Check Export for ActionScript and Export in First Frame
    Identifier: myScrollContent
  6. Now that you have a scrollPane on the stage and the content movie linkage set you must assign the content movie actions and the symbols it contains. To edit it, go to the Library (Window > Library or F11) and right-click the movie clip myScrollContent in the scrollPane Clips folder and select edit, or double-click the movie clip.
  7. Open the Actions Panel (Window > Actions or F9). Make sure the Actions Panel is in Expert Mode by selecting Expert Mode from the panel menu in the upper right-hand corner or by pressing Ctrl-Shift-E while selecting the Actions Panel. Expert Mode allows you to type ActionScript directly into the Actions Panel.
  8. Select frame 1 of the actions layer and then select the Actions Panel. Add the following code:

    imageShell._visible=0;

    You will duplicate the movie clip imageShell on frame 1 of the imageShell layer for each image you want to load. We want the initial clip to have a visibility of 0.
  9. Double-click the imageShell movie clip on the stage or right-click and select Edit.
  10. Select the imageButton on the stage. The imageButton button is on the imageButton layer. Open the Actions Panel and add the following code:

    on (release) {
      fscommand("viewImage", mypath);
    }

    This code will send the path of the image to VB. VB will open a new window that sends the image to the viewImage.swf.
  11. Select the imageContainer on the stage. The imageContainer movie clip is on the ImageContainer layer. Open the actions Panel and add the following code:

    onClipEvent (data) {
      _parent._visible=1;
      if (this._width > this._height){
        this._height = this._height * (_root.imageWidth / this._width);
        this._width = _root.imageWidth;
        this._y = (_root.imageHeight-this._height)/2;
      } else {
        this._width = this._width * (_root.imageHeight / this._height);
        this._height = _root.imageHeight;
        this._x = (_root.imageWidth-this._width)/2;
      }
    }

    When you duplicate the imageShell the image loads into the imageContainer movie clip. Once the image loads, this code sets the visibility of the imageShell to 1 and sizes the image proportionally.
  12. Now that you have your scrollPane and the imageShell ready, you can add the action movie clips for loading images. Go to the scene's start.
  13. Select frame 1 of the action clips layer.
  14. Open the Library and drag the movie clips loadImages and vbCall onto the stage. The clips loadImages and vbCall movie clips are in the control clips folder in the Library.
  15. Select the vbCall movie clip and assign it the instance name of vbCall.
  16. Double-click the vbCall movie clip or right-click the movie clip and select edit.
  17. On frame 1 of the actions layer add the following code:

    stop();

    On frame 10 of the actions layer (LoadThumbNails label) add the following code:

    // VB calls this movie clip frame label "loadThumbNails" after is sets the XML var with the list of images
    _root.ClearThumbNails();
    _root.LoadThumbNails();
    gotoAndStop(1);

    VB calls the vbCall movie clip frame label "loadThumbNails" after is sets the XML_String variable in the root with the list of images.
  18. Go to the start of the scene and edit the loadImages movie clip. On frame 1 add the following code:

    stop();

    On frame 2 add the following code:

    subindex = 0;
    currentrow = 0;

    imagesPerRow = _root.imagesPerRow;
    index2 = _root.index;

    var myContent = _root.myScrollPane.getScrollContent();
    var imageWidth = 120;
    var imageHeight = 120;
    var imageHortSpacing = 14;
    var imageVertSpacing = 14;

    fscommand("loadingAnim", "start");

    On Frame 3 add the following code:

    subindex++;

    if (index2 > 0){
      myContent.imageShell.duplicateMovieClip ("myclip"+subindex, subindex);
      myContent[string("myclip"+subindex)].imageContainer.loadMovie
    (_root.ThumbNailPics[subindex-1]);

      x = ((subindex-Math.floor(currentrow*imagesPerRow))-1)*
    (imageWidth+imageHortSpacing)
      y = currentrow*(imageHeight+imageVertSpacing)

      myContent[string("myclip"+subindex)].mypath = _root.ThumbNailPics[subindex-1];

      myContent[string("myclip"+subindex)]._x = x;
      myContent[string("myclip"+subindex)]._y = y;

      if (Math.floor(subindex/(currentrow+1)) == imagesPerRow) {
        currentrow++;
      }

      _root.refresh();

      index2--;

    }else{
        // send FS command to VB. VB will tell the toolbar swf to stop the loading animation
        fscommand("loadingAnim", "stop");
        stop();
    }

    On Frame 4 add the following code:

    gotoAndPlay(3);

    This movie clip is uses a frame loop to load in each image.
  19. Now that you have the movie clips for VB to call (vbCall), and the frame loop movie clip to load the images (loadImages), you can add your actions to initialize the movie and the functions that the movie calls.
  20. Go to the main scene and select frame 1 of the actions layer and add the following code in the Action Panel:

    // set XML_String as a variable
    var XML_String;

    // set constants
    var myContent = myScrollPane.getScrollContent();
    var imageWidth = 120;
    var imageHeight = 120;
    var imageHortSpacing = 14;
    var imageVertSpacing = 14;

    // set stage listener for resizing stage and placing images

    // create new object for listener
    myListener = new Object();

    // set function for myListener object
    myListener.onResize = function () {
      sizer();
      placeImages();
      refresh();
      refresh();
    }

    // add myListener to stage
    stage.addListener(myListener);
  21. Select frame 1 of the functions layer and add the following code in the Action Panel:

    // function to remove all duplicated image movie clips
    function ClearThumbNails() {
      // check to see if there are an images on the stage
      if (ThumbNailPics.length > 0){
        myLength = ThumbNailPics.length;
        subindex = 0;
        // run loop to delete all image movie clips on the stage
        for (var i=myLength;i>0;i--) {
          subindex++;
          removeMovieClip(eval("myContent.myclip"+subindex));
        }
      }
    }

    // function to place the XML list of images into an array for loading the images
    function LoadThumbNails() {

      ThumbNail_XML = new XML(XML_String);
      ThumbNail_XML.ignoreWhite = true;

      ThumbNailPics = new Array();

      rootNode = ThumbNail_XML.firstChild;
      totalNodes = rootNode.childNodes.length;
      currentNode = rootNode.firstChild;

      // loop through XML and place in array
      for (var i=0;i<totalNodes;i++) {
        ThumbNailPics[i] = currentNode.firstChild.nodeValue;
        currentNode = currentNode.nextSibling;
      }
      // set index to the total number of images
      index = ThumbNailPics.length

      // load images using a frame loop in a movie clip
      _root.loadImages.gotoAndPlay(2);
    }

    // function to size scrollPane to the stage size
    function sizer(){
      // determines how many image per row will fit on the stage
      imagesPerRow = int((stage.width)/136);

      // set stage width, height, x, y
      myScrollPane.setSize(stage.width -1, stage.height-1);
      myScrollPane._x = 0;
      myScrollPane._y = 0;
    }

    // function to place image movie clips in the scrollPane
    function placeImages(){

      subindex=0;
      currentrow = 0;

      for (i=index; i>0; i--) {

        subindex++;

        x = ((subindex-Math.floor(currentrow*imagesPerRow))-1)*
    (imageWidth+imageHortSpacing)
        y = currentrow*(imageHeight+imageVertSpacing)

        myContent[string("myclip"+subindex)]._x = x;
        myContent[string("myclip"+subindex)]._y = y;

        if (Math.floor(subindex/(currentrow+1)) == imagesPerRow) {
          currentrow++;
        }
      }
    }
    // function to refresh the contents of the scrollPane
    function refresh(){
      myScrollPane.refreshPane();
    }
  22. Save and close thumbnails_tutorial.fla file.


Building the View Image Movie

  1. Open the viewImage_tutorial.fla in Macromedia Flash MX.
  2. Select frame 1 of the ScrollPane layer.
  3. Drag a ScrollPane component from the Component Panel to the stage.
  4. In the Properties Panel (Window > Properties or Ctrl+F3), specify the following Parameters to the ScrollPane:

    Scroll Content: myScrollContent
    Horizontal Scroll: auto
    Vertical Scroll: auto
    Drag Content: true

    and specify the following Properties to the ScrollPane:

    Instance Name: myScrollPane
    Width: 100
    Height: 100
    X position: 0
    Y position: 0
  5. In the Library (Window > Library or F11) right-click the movie clip myScrollContent in the scrollPane Clips folder and select Linkage. Assign the following:

    Linkage: Check Export for ActionScript and Export in First Frame
    Identifier: myScrollContent
  6. Now that you have a scrollPane on the stage and the content movie linkage set up, you must assign the actions for the content movie. In the Library (Window > Library or F11) right-click the movie clip myScrollContent in the scrollPane Clips folder and select edit. You can also double-click the movie clip in the library to edit it.
  7. Open the Actions Panel (Window > Actions or F9). Make sure the Actions Panel is in Expert Mode by selecting Expert Mode from the panel menu in the upper right-hand corner or press Ctrl-Shift-E while the Actions Panel is selected. Expert Mode allows you to type ActionScript directly into the Actions Panel.
  8. Select the imageContainer movie clip on the stage then select the Actions Panel. Add the following code:

    onClipEvent(data){
      _root.myIntWidth = this._width;
      _root.myIntHeight = this._height;
      _root.sizer(this._width, this._height);
      _root.myScrollPane.refreshPane();
      _root.myScrollPane._visible = 1;
    }

    When the image loads into the imageContainer movie, this code sets the visibility of the scrollPane to 1, sets variables to the initial size of the image, and calls the function sizer() sending the current size of the image.
  9. Now that you have your scrollPane and the imageContainer ready, you can add the vbCall movie clip for loading the image.
  10. Go to the start of the scene and select frame 1 of the action clips layer.
  11. Open the Library and drag the movie clips loadImages and vbCall onto the stage. The clips loadImages and vbCall movie clips are in the control clips folder in the Library.
  12. Select the vbCall movie clip and assign it the instance name of vbCall.
  13. Double-click the vbCall movie clip or right-click the movie clip and select Edit.
  14. On frame 1 of the actions layer, add the following code:

    stop();

    and on frame 10 of the actions layer (LoadImage label), add the following code:

    // This frame is called by VB after the
    // _root.myImage var is set.
    _root.loadImage();
    gotoAndStop(1);

    VB calls the vbCall movie clip frame label "loadImage" after it sets the _root.myImage variable to the image path.
  15. Now that you have the movie clip for VB to call (vbCall), you can add your actions to initialize the movie and the functions the movie calls.
  16. Go to the main scene and select frame 1 of the actions layer and add the following code in the Action Panel:

    // set scrollPane properties not available from properties window
    myScrollPane._visible = 0;
    myScrollPane.setStyleProperty("background", 0xF0F0F0)

    // set var for calling content of scrollPane
    var myContent = myScrollPane.getScrollContent();

    // create new object for listener
    myListener = new Object();

    // set object function for listener
    myListener.onResize = function () {
      sizer(myContent._width, myContent._height);
      myScrollPane.refreshPane();
    }
    // add listener to the stage
    stage.addListener(myListener); }

    // add myListener to stage
    stage.addListener(myListener);
  17. Select frame 1 of the functions layer and add the following code in the Action Panel:

    // function to load image into the scrollPane
    function loadImage(){
      // myImage is set by VB before this function is called
      myContent.imageContainer.loadMovie(myImage);
    }

    // function to size scrollPane when stage size changes
    function sizer(myWidth, myHeight){

      if (myWidth > stage.width or myHeight > stage.height){

        if (myWidth > stage.width){
          myScrollPane.setSize(stage.width, myHeight);
          myScrollPane._x = 0
          myScrollPane._y = (stage.height - myScrollPane._height)/2;
        }
        if (myHeight > stage.height){
          myScrollPane.setSize(myWidth, stage.height);
          myScrollPane._x = (stage.width - myScrollPane._width)/2;
          myScrollPane._y = 0
        }
        if (myHeight > stage.height and myWidth > stage.width){
          myScrollPane.setSize(stage.width, stage.height);
          myScrollPane._x = 0
          myScrollPane._y = 0
        }
      }else{
          myScrollPane.setSize(myWidth, myHeight);
          myScrollPane._x = (stage.width - myWidth)/2;
          myScrollPane._y = (stage.height - myHeight)/2;
      }

      myScrollPane.refreshPane();
    }
  18. Save and close viewImages_tutorial.fla.

Building the Slide Show Movie

  1. Open the sliderShower_tutorial.fla in Macromedia Flash MX.
  2. Select frame 1 of the action clips layer.
  3. Drag the myImage movie clip onto the stage from the Library and assign it an instance name of myImage.
  4. Select the myImage movie clip and add the following code in the Actions Panel:

    onClipEvent (data) {

      // This determines which side of the stage is the
      // shortest and resizes the image accordingly
      // to keep it in proportional.

      var RelativeHW;

      if (stage.width < stage.height){
        RelativeHW = stage.width;
      }else{
        RelativeHW = stage.height;
      }

      if (this._width > RelativeHW || this._height > RelativeHW){
        if (this._width > this._height){
          this._height = this._height * (RelativeHW /this._width)
          this._width = RelativeHW;
        }else {
          this._width = this._width * (RelativeHW /this._height)
          this._height = RelativeHW;
        }
      }

      this._x = (stage.width-this._width)/2;
      this._y = (stage.height-this._height)/2;
    }
  5. Drag the runSlideShow movie clip onto the stage from the Library and assign it an instance name of runSlideShow.
  6. Double-click the runSlideShow movie clip or right-click the movie clip and select Edit. On frame 1 (stop label) add the following code:

    stop();

    On frame 6 (int label) add the following code:

    // This frame is called by VB after the XML_String
    // list if images is set.

    _root.createImageArray();
    gotoAndPlay("start");

    On frame 12 (start label) add the following code:

    _root.loadImage();

    On frame 36 add the following code:

    gotoAndPlay("start");

    Now that we have the movie clip for VB to call (runSlideShow), we can add our functions called within the movie.
  7. Select frame 1 of the functions layer and add the following code in the Action Panel:

    // This function creates an Array
    // from the XML_String var set by VB

    function createImageArray() {

      ThumbNail_XML = new XML(XML_String);
      ThumbNail_XML.ignoreWhite = true;

      myImageArray = new Array();

      rootNode = ThumbNail_XML.firstChild;
      totalNodes = rootNode.childNodes.length;
      currentNode = rootNode.firstChild;

      for (var i=0;i<totalNodes;i++) {
        myImageArray[i] = currentNode.firstChild.nodeValue;
        currentNode = currentNode.nextSibling;
      }
    }

    // This function cycles through the myImageArray
    // and loads the images into the myImage movie clip

    function loadImage(){
      subindex++
      if (subindex > myImageArray.length){
        subindex = 1
      }
      myImagePath = myImageArray[subindex-1];
      loadMovie(myImagePath, myImage);
    }
  8. Save and close slideShower_tutorial.fla.

Building the Tool Bar Movie

  1. Open the toolbar_tutorial.fla in Macromedia Flash MX.
  2. Select the addDirectory button on the stage. The addDirectory button is on the buttons layer. Add the following code in the Actions Panel:

    on (release){
      fscommand("addDirectory");
    }
  3. Select the refreshDirectory button on the stage. The refreshDirectory button is on the buttons layer. Add the following code in the Actions Panel:

    on (release){
      fscommand("refreshDirectory");
    }
  4. Select the runSlideShow button on the stage. The runSlideShow button is on the buttons layer. Add the following code in the Actions Panel:

    on (release){
      fscommand("runSlideShow");
    }
  5. Select the aboutUs button on the stage. The aboutUs button is on the buttons layer. Add the following code in the Actions Panel:

    on (release){
      fscommand("aboutUs");
    }
  6. Select frame 1 on the loadingAnim layer.
  7. Open the Library and drag the loadingAnim movie clip onto the stage and assign the instance name of loadingAnim.
  8. Select frame 1 on the actions layer and add the following code in the Actions Panel:

    // set stage listener for resizing stage and placing loadingAnim

    // create new object for listener
    myListener = new Object();

    // set function for myListener object
    myListener.onResize = function () {
      placeLoadingAnim();
    }

    // add myListener to stage
    stage.addListener(myListener);
  9. Select frame 1 of the functions layer and add the following code in the Actions Panel:

    // function for placing the loadingAnim in the upper right corner
    function placeLoadingAnim(){
      loadingAnim._x = stage.width-40;
      loadingAnim._y = 0;
    }
  10. Save and close toolbar_tutorial.fla.

Note: Don't forget to put all of your SWF files in the FlashSlideShow/FlasfSWfs directory before running the project.

Now that you have the Macromedia Flash files set up, you can run the application and you can move to the last tutorial, Part 3: Putting it All Together.

About the author

Veropa is a small company that was founded in 2000 by three core members Susan Barlow, Chris Boland, and Greg Williams-who were eager to take over the world. Focusing on enterprise web applications and front-end website design, Veropa has found its niche in the vast world of modern computing. The members of Veropa enjoy moonlight strolls along the beach, candlelight dinners and playing Frisbee in the park. Unfortunately, they have not seen the light of day in three years, so it is a good thing that they really like computers as well.