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;
}
}
}
}
}
Add two buttons to the stage.
Give them instance names of
btn1andbtn2(or any name of your choice)Add the following code
What’s Happening
Your buttons are incrementing or decrementing
ActivePictureby 1 each time. IfActivePicturegoes above the number of pictures it changes to the first picture. IfActivePicturegoes below the number of pictures then it goes to the last picture.