# AS3 next\_image button (Help meeee!)

**URL:** https://forum.kirupa.com/t/as3-next-image-button-help-meeee/313931
**Category:** flash
**Created:** [September 14, 2010, 7:18am UTC](https://forum.kirupa.com/t/as3-next-image-button-help-meeee/313931 "2010-09-14T07:18:32Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![catalin](https://avatars.discourse-cdn.com/v4/letter/c/7ba0ec/32.png) [@catalin](https://forum.kirupa.com/u/catalin)
#### Post date: [September 14, 2010, 7:18am UTC](https://forum.kirupa.com/t/as3-next-image-button-help-meeee/313931/1 "2010-09-14T07:18:32Z")

</div>

Can someone help me to add 2 buttons : next\_image, prev\_image to this gallery [http://www.flashmo.com/preview/flashmo\_202\_motion\_gallery](http://www.flashmo.com/preview/flashmo_202_motion_gallery), when the image is loadet at full size i want that 2 buttons to apper and when i press them to load me next image or pre image

_The surce cod is this  
\*\*  
import caurina.transitions.;  
var folder:String = “photos/”;  
var css\_file:String = “flashmo\_202\_style.css”;  
var show\_tooltip:Boolean = true; // true OR false  
var tween\_duration:Number = 0.6;  
var tween\_delay:Number = 0;  
var tn\_alpha:Number = 0.5;  
var tn\_spacing:Number = 10;  
var tn\_border:Number = 0;  
var tn\_border\_color:Number = 0xAAAAAA;  
var max\_tn\_width:Number = 120;  
var max\_tn\_height:Number = 80;  
var tn\_width:Number;  
var tn\_height:Number;  
var i:Number;  
var j:Number;  
var tn:Number = 0;  
var current\_pic\_no:Number = 0;  
var current\_page\_no:Number = 0;  
var start\_from:Number = 0;  
var end\_to:Number;  
var total\_pages:Number;  
var no\_of\_columns:Number = 5;  
var no\_of\_rows:Number = 4;  
var no\_of\_thumbnails:Number = no\_of\_columns \* no\_of\_rows;  
var total\_items:Number;  
var css\_loader:URLLoader = new URLLoader();  
var flashmo\_style:StyleSheet = new StyleSheet();  
var flashmo\_xml:XML;  
var flashmo\_photo\_list = new Array();  
var flashmo\_pic:MovieClip = new MovieClip();  
var thumbnail\_group:MovieClip = new MovieClip();  
var mc:MovieClip = new MovieClip();  
this.addChild(thumbnail\_group);  
this.addChild(flashmo\_tooltip);  
if( show\_tooltip == false )  
{  
this.removeChild(flashmo\_tooltip);  
}  
else  
{  
flashmo\_tooltip.visible = false;  
flashmo\_tooltip.addEventListener( Event.ENTER\_FRAME, tooltip );  
}  
flashmo\_pic.addEventListener( MouseEvent.CLICK, pic\_click );  
flashmo\_pic\_info.x = -3000;  
thumbnail\_group.x = ( max\_tn\_width + tn\_border ) \* 0.5;  
thumbnail\_group.y = ( max\_tn\_height + tn\_border ) \* 0.5;  
thumbnail\_sketch.visible = false;  
flashmo\_previous.visible = false;  
flashmo\_next.visible = false;  
loading\_info.text = “”;  
thumbnail\_counter.text = “”;  
css\_loader.load( new URLRequest(css\_file) );  
css\_loader.addEventListener(Event.COMPLETE, css\_complete);  
function css\_complete(e:Event):void  
{  
var css\_format:TextFormat = new TextFormat();  
flashmo\_style.parseCSS(css\_loader.data);  
flashmo\_pic\_info.photo\_description.styleSheet = flashmo\_style;  
}  
function load\_gallery(xml\_file:String):void  
{  
var xml\_loader:URLLoader = new URLLoader();  
xml\_loader.load( new URLRequest( xml\_file ) );  
xml\_loader.addEventListener(Event.COMPLETE, create\_thumbnail);  
}  
function create\_thumbnail(e:Event):void  
{  
flashmo\_xml = new XML(e.target.data);  
total\_items = flashmo\_xml.photo.length();  
total\_pages = Math.ceil( total\_items / no\_of\_thumbnails );  
for( i = 0; i \< total\_items; i++ )  
{  
flashmo\_photo\_list.push( {  
thumbnail: flashmo\_xml.photo.thumbnail.toString(),  
filename: flashmo\_xml.photo.filename.toString(),  
title: flashmo\_xml.photo_.title.toString(),  
description: flashmo\_xml.photo\*.description.toString()  
} );  
}  
load\_tn();  
}  
function load\_tn():void  
{  
var pic\_request:URLRequest = new URLRequest( folder + flashmo\_photo\_list[tn].thumbnail );  
var pic\_loader:Loader = new Loader();  
pic\_loader.load(pic\_request);  
pic\_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, on\_thumbnail\_loaded);  
tn++;  
loading\_info.text = "Loading Thumbnail " + tn + " of " + total\_items;  
}  
function on\_thumbnail\_loaded(e:Event):void  
{  
var flashmo\_tn\_bm:Bitmap = new Bitmap();  
var flashmo\_tn\_mc:MovieClip = new MovieClip();  
flashmo\_tn\_bm = Bitmap(e.target.content);  
flashmo\_tn\_bm.x = - flashmo\_tn\_bm.width \* 0.5;  
flashmo\_tn\_bm.y = - flashmo\_tn\_bm.height \* 0.5;  
flashmo\_tn\_bm.smoothing = true;

tn\_width = flashmo\_tn\_bm.width;  
tn\_height = flashmo\_tn\_bm.height;

var bg\_width:Number = flashmo\_tn\_bm.width + tn\_border \* 2;  
var bg\_height:Number = flashmo\_tn\_bm.height + tn\_border \* 2;  
if( tn\_border \> 0 )  
{  
flashmo\_tn\_mc.graphics.beginFill(tn\_border\_color);  
flashmo\_tn\_mc.graphics.drawRect( - bg\_width \* 0.5, - bg\_height \* 0.5, bg\_width, bg\_height );  
flashmo\_tn\_mc.graphics.endFill();  
}  
flashmo\_tn\_mc.addChild(flashmo\_tn\_bm);  
flashmo\_tn\_mc.buttonMode = true;  
flashmo\_tn\_mc.addEventListener( MouseEvent.MOUSE\_OVER, tn\_over );  
flashmo\_tn\_mc.addEventListener( MouseEvent.MOUSE\_OUT, tn\_out );  
flashmo\_tn\_mc.addEventListener( MouseEvent.CLICK, tn\_click );  
flashmo\_tn\_mc.name = “flashmo\_” + thumbnail\_group.numChildren;  
flashmo\_tn\_mc.y = 1800;  
flashmo\_tn\_mc.alpha = 0;  
thumbnail\_group.addChild(flashmo\_tn\_mc);

if( tn \< total\_items )  
load\_tn();  
else  
{  
move\_in();  
loading\_info.text = “”;  
flashmo\_previous.addEventListener( MouseEvent.CLICK, previous\_page );  
flashmo\_next.addEventListener( MouseEvent.CLICK, next\_page );  
}  
}  
function move\_in():void  
{  
flashmo\_previous.visible = true;  
flashmo\_next.visible = true;

if( current\_page\_no \<= 0 )  
{  
current\_page\_no = 0;  
flashmo\_previous.visible = false;  
}

if( current\_page\_no \>= total\_pages - 1 )  
{  
current\_page\_no = total\_pages - 1;  
flashmo\_next.visible = false;  
}

start\_from = current\_page\_no \* no\_of\_thumbnails;  
end\_to = start\_from + no\_of\_thumbnails;

if( end\_to \> total\_items )  
end\_to = total\_items;  
if( total\_items \> no\_of\_thumbnails )  
thumbnail\_counter.text = (start\_from + 1) + “-” + end\_to + " of " + total\_items + " thumbnails";  
j = 0;  
for( i = start\_from; i \< end\_to; i++ )  
{  
mc = MovieClip( thumbnail\_group.getChildByName(“flashmo\_” + i) );

mc.x = Math.floor( j / no\_of\_rows ) \*  
( max\_tn\_width + tn\_border \* 2 + tn\_spacing ) + ( max\_tn\_width - mc.width );  
mc.y = 900 + j % no\_of\_rows \*  
( max\_tn\_height + tn\_border \* 2 + tn\_spacing ) + ( max\_tn\_height - mc.height );  
Tweener.addTween( mc, {  
y: j % no\_of\_rows \* ( max\_tn\_height + tn\_border \* 2 + tn\_spacing ),  
alpha: tn\_alpha, time: tween\_duration, delay: tween\_delay + j \* 0.04,  
transition: “easeOutExpo” } );  
j++;  
}  
}  
function move\_out():void  
{  
j = 0;  
for( i = start\_from; i \< end\_to; i++ )  
{  
mc = MovieClip( thumbnail\_group.getChildByName(“flashmo\_” + i) );

Tweener.addTween( mc, {  
y: j % no\_of\_rows \* ( max\_tn\_height + tn\_border \* 2 + tn\_spacing ) - 900,  
alpha: 0, time: tween\_duration, delay: j \* 0.04,  
transition: “easeInExpo” } );  
j++;  
}  
tween\_delay = tween\_duration;  
move\_in();  
}  
function tn\_over(e:MouseEvent):void  
{  
mc = MovieClip(e.target);  
Tweener.addTween( mc, { alpha: 1, time: tween\_duration, transition: “easeOutQuart” } );  
flashmo\_tooltip.visible = true;  
flashmo\_tooltip.pic\_title.text = flashmo\_photo\_list[parseInt( mc.name.slice(8,12) )].title;  
}  
function tn\_out(e:MouseEvent):void  
{  
mc = MovieClip(e.target);  
Tweener.addTween( mc, { alpha: tn\_alpha, time: tween\_duration, transition: “easeOutQuart” } );  
flashmo\_tooltip.visible = false;  
}  
function tn\_click(e:MouseEvent):void  
{  
mc = MovieClip(e.target);  
current\_pic\_no = parseInt(mc.name.slice(8,12));  
load\_photo();  
thumbnail\_group.visible = false;  
thumbnail\_counter.visible = false;  
flashmo\_previous.visible = false;  
flashmo\_next.visible = false;  
}  
function previous\_page(e:MouseEvent):void  
{  
current\_page\_no–;  
move\_out();  
}  
function next\_page(e:MouseEvent):void  
{  
current\_page\_no++;  
move\_out();  
}  
function tooltip(e:Event):void  
{  
flashmo\_tooltip.x = mouseX; // (or) mc.x + 60  
flashmo\_tooltip.y = mc.y; // (or) mouseY - 5  
}  
function load\_photo():void  
{  
var pic\_request:URLRequest = new URLRequest( folder + flashmo\_photo\_list[current\_pic\_no].filename );  
var pic\_loader:Loader = new Loader();  
pic\_loader.load(pic\_request);  
pic\_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, on\_photo\_progress);  
pic\_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, on\_photo\_loaded);

if( flashmo\_pic.numChildren \> 0 )  
flashmo\_pic.removeChildAt(0);

this.addChild(flashmo\_pic);  
this.addChild(flashmo\_pic\_info);  
flashmo\_pic\_info.photo\_title.text = flashmo\_photo\_list[current\_pic\_no].title;  
flashmo\_pic\_info.photo\_description.htmlText = flashmo\_photo\_list[current\_pic\_no].description;  
}  
function unload\_photo():void  
{  
this.removeChild(flashmo\_pic);  
}  
function on\_photo\_progress(e:ProgressEvent):void  
{  
var percent:Number = Math.round(e.bytesLoaded / e.bytesTotal \* 100);  
var filesize:Number = Math.round(e.bytesTotal / 1024);  
loading\_info.text = "Loading Image… " + percent + “% (” + filesize + “KB)”;  
}  
function on\_photo\_loaded(e:Event):void  
{  
loading\_info.text = “”;  
flashmo\_pic.alpha = 0;  
flashmo\_pic.addChild( Bitmap(e.target.content) );  
flashmo\_pic.addEventListener( Event.ENTER\_FRAME, detect\_mouse );

Tweener.addTween( flashmo\_pic, { alpha: 1, time: tween\_duration, transition: “easeOut” } );  
flashmo\_pic\_info.x = flashmo\_pic.x = ( stage.stageWidth - flashmo\_pic.width ) \* 0.5 - this.parent.x;  
flashmo\_pic\_info.y = flashmo\_pic.y = ( stage.stageHeight - flashmo\_pic.height ) \* 0.5 - this.parent.y;  
}  
function pic\_click(e:MouseEvent):void  
{  
flashmo\_pic\_info.visible = false;  
thumbnail\_group.visible = true;  
thumbnail\_counter.visible = true;  
tween\_delay = 0;  
move\_in();  
flashmo\_pic.removeEventListener( Event.ENTER\_FRAME, detect\_mouse );  
Tweener.addTween( flashmo\_pic, { alpha: 0, time: tween\_duration,  
transition: “easeIn”, onComplete: unload\_photo } );  
}  
function detect\_mouse(e:Event):void  
{  
if( mouseX \> flashmo\_pic\_info.x && mouseX \< flashmo\_pic\_info.width &&  
mouseY \> flashmo\_pic\_info.y && mouseY \< flashmo\_pic\_info.height )  
flashmo\_pic\_info.visible = true;  
else  
flashmo\_pic\_info.visible = false;  
}