Add button to Flash image flow component

Question

Could anyone help me with adding a left and right button to this image flow component? At the moment it uses images to navigate left and right but I can seem to understand how to link a button with the action script? I don't do much flash work so any help would be very much appreciated.

import flash.filters.BlurFilter;
xml=new XML();
xml.ignoreWhite=true;
xml.load("image_flow.xml"); // set the xml file for data
ActiveHeight=200;
InactiveHeight=70;
ActivePicture=1;
borderSize=2;
backgroundColor=0x666666;
backgroundOverColor=0x333333;
pictureSpacing=5;
ZoomSpeed=2;
MoveSpeed=3;
mirrorDistance=5;
autoFlow=false;
rand=true;
time=3000;

var titleFormat:TextFormat = new TextFormat();
titleFormat.color=0xFFFFFF;
titleFormat.font="verdana";
titleFormat.size=12;


xml.onLoad = function(ok)
{
if (ok)
create_image_flow();
}

create_image_flow = function(){
this.createEmptyMovieClip("mask",this.getNextHighestDepth());
with(mask){
    beginFill(0x000000,100);
    lineTo(Stage.width,0);
    lineTo(Stage.width,Stage.height);
    lineTo(0,Stage.height);
    lineTo(0,0);
}


var pic:Object = new Object();
var picMirror:Object = new Object();

picMirror.onLoadInit = function(target:MovieClip){
    target.forceSmoothing = true;
    while (target._height>InactiveHeight){
        target._width-=target._width/100;
        target._height-=target._height/100;
    }
    height=target._height;
      while(target._height<=height){
            target._yscale-=1;
      }
    target.load=true;
    for (j=0;j<xml.firstChild.childNodes.length;j++)
     if (target==flow["object"+j].mirror.picture){
         target._y=flow["object"+j].background._height+mirrorDistance+target._height;
         with (flow["object"+j].mirror.background){
             beginFill(backgroundColor,100);
             lineTo(target._width+2*borderSize,0);
             lineTo(target._width+2*borderSize,target._height+2*borderSize);
             lineTo(0,target._height+2*borderSize);
             lineTo(0,0);
             _y=flow["object"+j].background._height+mirrorDistance-borderSize;
             _x=-borderSize;
         }
         with (flow["object"+j].mirror.backgroundOver){
             beginFill(backgroundOverColor,100);
             lineTo(target._width+2*borderSize,0);
             lineTo(target._width+2*borderSize,target._height+2*borderSize);
             lineTo(0,target._height+2*borderSize);
             lineTo(0,0);
             _y=flow["object"+j].background._height+mirrorDistance-borderSize;
             _x=-borderSize;
             _alpha=0;
         }
         with (flow["object"+j].mirrorMask){
             matrix = {matrixType:"box", x:0, y:-flow["object"+j].mirror.background._height/2, w:flow["object"+j].mirror.background._width, h:flow["object"+j].mirror.background._height, r:90/180*Math.PI};
             beginGradientFill(fillType, colors, alphas, ratios, matrix);
             lineTo(flow["object"+j].mirror.background._width,0);
             lineTo(flow["object"+j].mirror.background._width,flow["object"+j].mirror.background._height);
             lineTo(0,flow["object"+j].mirror.background._height);
             lineTo(0,0);
             _x=-borderSize;
             _y=flow["object"+j].mirror.background._y;
         }
         flow["object"+j].mirror.cacheAsBitmap=true;
         flow["object"+j].mirrorMask.cacheAsBitmap=true;
         flow["object"+j].mirror.setMask(flow["object"+j].mirrorMask);

     }

}

pic.onLoadInit = function(target:MovieClip){
    target.forceSmoothing = true;
    while (target._height>InactiveHeight){
        target._width-=target._width/100;
        target._height-=target._height/100;
    } 
    target.load=true;
    target.onRelease = function(){
        flow.title.text="";
        timer=undefined;
        for (j=0;j<xml.firstChild.childNodes.length;j++)
          if (target==flow["object"+j].picture){
              flow["object"+ActivePicture].swapDepths(ActivePicture+1);
              ActivePicture=j;
              flow["object"+ActivePicture].swapDepths(xml.firstChild.childNodes.length+1);
          }
    }
    target.onRollOver = function(){
        this.caption=true;
    }
    target.onRollOut = function(){
        this.caption=false;
    }
    target.onReleaseOutside = function(){
        this.caption=false;
    }

    for (j=0;j<xml.firstChild.childNodes.length;j++){
        if (target==flow["object"+j].picture){
            imagMirror.loadClip(xml.firstChild.childNodes[j].attributes.url,flow["object"+j].mirror.picture);
            with(flow["object"+j].background){
                beginFill(backgroundColor,100);
                lineTo(target._width+(2*borderSize),0);
                lineTo(target._width+(2*borderSize),target._height+(2*borderSize));
                lineTo(0,target._height+(2*borderSize));
                lineTo(0,0);
                _x=-borderSize;
                _y=-borderSize;
            }
            with(flow["object"+j].backgroundOver){
                beginFill(backgroundOverColor,100);
                lineTo(target._width+(2*borderSize),0);
                lineTo(target._width+(2*borderSize),target._height+(2*borderSize));
                lineTo(0,target._height+(2*borderSize));
                lineTo(0,0);
                _x=-borderSize;
                _y=-borderSize;
                _alpha=0;
            }
        }
    }
}
var imag:MovieClipLoader = new MovieClipLoader();
imag.addListener(pic);
var imagMirror:MovieClipLoader = new MovieClipLoader();
imagMirror.addListener(picMirror);

this.createEmptyMovieClip("flow",this.getNextHighestDepth());
flow.setMask(mask);
flow.createEmptyMovieClip("background",0);
with(flow.background){
    beginGradientFill(fillType, colorsBackground, alphasBackground, ratios, matrixBackground);
    lineTo(Stage.width,0);
    lineTo(Stage.width,Stage.height);
    lineTo(0,Stage.height);
    lineTo(0,0);
}
flow.createTextField("title",xml.firstChild.childNodes.length+2,0,0,0,0);
flow.title.autoSize="left";
flow.title.selectable=false;
for (i=0;i<xml.firstChild.childNodes.length;i++){
    if (i==ActivePicture)
    flow.createEmptyMovieClip("object"+i,xml.firstChild.childNodes.length+1);
    else
    flow.createEmptyMovieClip("object"+i,i+1);
    flow["object"+i].createEmptyMovieClip("background",1);
    flow["object"+i].createEmptyMovieClip("backgroundOver",2);
    flow["object"+i].createEmptyMovieClip("picture",3);
    flow["object"+i].createEmptyMovieClip("mirror",4);
    flow["object"+i].mirror.createEmptyMovieClip("background",1);
    flow["object"+i].mirror.createEmptyMovieClip("backgroundOver",2);
    flow["object"+i].mirror.createEmptyMovieClip("picture",3);
    flow["object"+i].createEmptyMovieClip("mirrorMask",5);
    imag.loadClip(xml.firstChild.childNodes[i].attributes.url,flow["object"+i].picture);
}

flow.onEnterFrame = function(){
    if ((getTimer()-timer>time)&&(autoFlow)){
        flow.title.text="";
        flow["object"+ActivePicture].swapDepths(ActivePicture+1);
        if (rand){
        ActivePicture=Math.round(Math.random()*(xml.firstChild.childNodes.length-1));
        if (ActivePicture<0)
          ActivePicture=0;
        }
        else{
            ActivePicture++;
            if (ActivePicture==xml.firstChild.childNodes.length)
             ActivePicture=0;
        }
        flow["object"+ActivePicture].swapDepths(xml.firstChild.childNodes.length+1);
        timer=undefined;
    }
    flow["object"+ActivePicture].x=(mask._width-flow["object"+ActivePicture]._width)/2;
    for (i=(ActivePicture+1);i<xml.firstChild.childNodes.length;i++)
       if (i==ActivePicture+1)
       flow["object"+i].x=flow["object"+(i-1)].x+flow["object"+(i-1)]._width+pictureSpacing-2*borderSize;
       else
        flow["object"+i].x=flow["object"+(i-1)].x+flow["object"+(i-1)]._width+pictureSpacing;

    for (i=(ActivePicture-1);i>=0;i--)
       flow["object"+i].x=flow["object"+(i+1)].x-flow["object"+i]._width-pictureSpacing;
    for (i=0;i<xml.firstChild.childNodes.length;i++){
        flow["object"+i].y=(mask._height-flow["object"+i]._height/2)/2;
        if (flow["object"+i].picture.load){
            if (i==ActivePicture){
               flow["object"+i].height=Math.round(2*ActiveHeight+(2*borderSize));
               flow["object"+i].filters=[];
            }
            else{
               flow["object"+i].height=Math.round(2*InactiveHeight+(2*borderSize));
               flow["object"+i].filters=[blurEffect];
            }
        }
        if (Math.round(flow["object"+i]._height)>flow["object"+i].height){
            flow["object"+i]._x+=ZoomSpeed*flow["object"+i]._width/200;
            flow["object"+i]._y+=ZoomSpeed*flow["object"+i]._height/200;
            ySize=ZoomSpeed*flow["object"+i]._height/200;
            xSize=ZoomSpeed*flow["object"+i]._width/200;
            flow["object"+i]._height-=ZoomSpeed*flow["object"+i]._height/100;
            flow["object"+i]._width-=ZoomSpeed*flow["object"+i]._width/100;
            if (flow["object"+i]._height<flow["object"+i].height){
                flow["object"+i]._x+=xSize;
                flow["object"+i]._y+=ySize;
                flow["object"+i]._height=flow["object"+i].height;
            }
        }
        if (Math.round(flow["object"+i]._height)<flow["object"+i].height){
            flow["object"+i]._x-=ZoomSpeed*flow["object"+i]._width/200;
            flow["object"+i]._y-=ZoomSpeed*flow["object"+i]._height/200;
            ySize=ZoomSpeed*flow["object"+i]._height/200;
            xSize=ZoomSpeed*flow["object"+i]._width/200;
            flow["object"+i]._height+=ZoomSpeed*flow["object"+i]._height/100;
            flow["object"+i]._width+=ZoomSpeed*flow["object"+i]._width/100;
            if (flow["object"+i]._height>flow["object"+i].height){
                flow["object"+i]._x+=xSize;
                flow["object"+i]._y+=ySize;
                flow["object"+i]._height=Math.round(flow["object"+i].height);
                flow.title.text=xml.firstChild.childNodes[i].attributes.title;
                flow.title.setTextFormat(titleFormat);
                flow.title._x=flow["object"+i]._x;
                flow.title._y=flow["object"+i]._y-flow.title._height-borderSize;
                timer=getTimer();
            }
        }
        if (flow["object"+i]._x<flow["object"+i].x)
            flow["object"+i]._x+=(flow["object"+i].x-flow["object"+i]._x)/MoveSpeed;
        if (flow["object"+i]._y<flow["object"+i].y)
            flow["object"+i]._y+=(flow["object"+i].y-flow["object"+i]._y)/MoveSpeed;
        if (flow["object"+i]._x>flow["object"+i].x)
            flow["object"+i]._x-=(flow["object"+i]._x-flow["object"+i].x)/MoveSpeed;
        if (flow["object"+i]._y>flow["object"+i].y)
            flow["object"+i]._y-=(flow["object"+i]._y-flow["object"+i].y)/MoveSpeed;
        if (flow["object"+i].picture.caption){
            flow["object"+i].filters=[];
            if (flow["object"+i].backgroundOver._alpha<100){
                flow["object"+i].mirror.backgroundOver._alpha+=5;
               flow["object"+i].backgroundOver._alpha+=5;
            }
        }
        else{
            if (flow["object"+i].backgroundOver._alpha>0){
                flow["object"+i].mirror.backgroundOver._alpha-=5;
              flow["object"+i].backgroundOver._alpha-=5;
            }
        }

    }
}
}

Seems like you would need to increment or decrement the ActivePicture variable on your button presses. Would you be able to post a working example in a zip somewhere and I'll have a look? — net.uk.sweet, Jan 13 '13 at 01:32

Enigmadan · Accepted Answer · 2013-01-21T14:37:13.583

0

Add two buttons to the stage.

Give them instance names of btn1 and btn2 (or any name of your choice)

Add the following code

btn1.onPress = function () {
    flow.title.text="";
    if (ActivePicture==xml.firstChild.childNodes.length-1){
        ActivePicture=0;
    }else{
        ActivePicture++;
    }
}

btn2.onPress = function () {
    flow.title.text="";
    if (ActivePicture<=0){
        ActivePicture=xml.firstChild.childNodes.length-1;
    }else{
        ActivePicture--;
    }

}

What's Happening

Your buttons are incrementing or decrementing ActivePicture by 1 each time. If ActivePicture goes above the number of pictures it changes to the first picture. If ActivePicture goes below the number of pictures then it goes to the last picture.

edited Jan 21 '13 at 14:37

answered Jan 16 '13 at 08:19

Enigmadan

3,398
2
23
35

I just wanted to say thanks for all your comments and feedback. I'm sorry it has taken a while to respond - I didn't have my email notifications set up. I am just about to try out the code suggested so will let you know how I get on. Oh and here is an example of the xml: – Shorty Jan 21 '13 at 09:20
I have just tried the code and it works but there seems to be a slight issue when it is at the beginning or end of the pictures. The btn2 makes the first picture shrink if clicked on the first image. Likewise, btn1 makes the last picture shrink. I have also noticed that the caption stays between moving the pictures rather than disappearing between movements. I have adjusted the code but I'm not sure where to put it as there is not enough space in the comments box?! – Shorty Jan 21 '13 at 10:07
1

I have found how to fix the caption bit. Just add flow.title.text=""; – Shorty Jan 21 '13 at 12:02
Just fixed it and checked the code again, you actually can scrape most of the code that I added out. I made an edit to portray that. – Enigmadan Jan 21 '13 at 14:22
Thanks @Engmadan - perfect all sorted. Thanks for all your help. – Shorty Jan 22 '13 at 09:53

Add button to Flash image flow component

1 Answers1

What's Happening