Unit 04 - Slide Show

Conditional operators

Loading the first slide

An easy way to dynamically load external images into a Flash movie is to use the UILoader which can be found under Window > Componets. You can give it an instance name and then load images using the code below.

imageLoader.source="images/slide_0.jpg";

Loading the total number variable

  1. Next create a variable that will keep track of what the current slide is.
    • var CurImgNum:Number=0;
    • Flash starts counting from 0
    • Next, use your UILoader to load the .jpg, .png, .swf, etc. slide. In this case, the URL contains the string indicating the folder/file name. We then concatenate the current number and .jpg extension and load it into our movie
      imageLoader.source="images/slide_" + CurImgNum +".jpg";

Loading the total slides variable

  1. Create a variable to indicate the total number of slides
    • TotalImgNum:Number=10;
    • This creates a variable that indicates the total number of slides so that when the slides are done they can start over

Adding the next button functionality - Use with video training

  1. Set up an EventListener
    • next_btn.addEventListener(MouseEvent.CLICK, nextImg);

    Declare the nextImg function and add an if else statement.

    • function nextImg(evtObj:MouseEvent):void {

      if (CurImgNum<TotalImgNum-1) {
      trace("under total");
      CurImgNum++;
      trace(CurImgNum);
      trace(TotalImgNum);
      imageLoader.source="images/slide_" + CurImgNum +".jpg";
      } else {
      CurImgNum = 0;
      trace("over total");
      trace(CurImgNum);
      trace(TotalImgNum);
      imageLoader.source="images/slide_" + CurImgNum +".jpg";
      }


Adding the previous slide functionality

See if you can figure out the logic. It is very similar to the next slide button.

back_btn.addEventListener(MouseEvent.CLICK, backImg);
function backImg(evtObj:MouseEvent):void {

if (CurImgNum > 0) {

trace("under total");
CurImgNum--;
trace(CurImgNum);
trace(TotalImgNum);
imageLoader.source="images/slide_" + CurImgNum +".jpg";
} else {
CurImgNum = 9;
trace("over total");
trace(CurImgNum);
trace(TotalImgNum);
imageLoader.source="images/slide_" + CurImgNum +".jpg";
}

Homework

#1 Add a slide show to your final project.

#2 Take initial sketchs of your character and bring it into flash. Create a graphic symbol for each body part and organize the library. Nest parts where needed such as mouth positions in mouth graphic symbol.