Next previous button in gallery
Hi guys, been a while, hope everyone is well. I am having a problem implementing a next/previous button on an image once it has been enlarged in my gallery. I have done it in pure as3 but all tutorials seem to use the timeline. I will post my code underneath so you can see what I am up too. The next/previous button should I think be added to the modelClicked function.
From what I understand, I will get a next/previous button and turn them into a button object. I will then delete them from my stage and instantiate them within the class below. I would then add them to the modelClicked function with events tied to them. What should I then do in these events to make it fit in with the code below?
Any advise appreciated,
Cheers
Nick
package classes.models
{
import flash.display.Bitmap;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.geom.Rectangle;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.net.URLRequest;
import eu.flashlabs.ui.BasicButton;
import classes.ui.StateClip;
import classes.ui.Placeholder;
import classes.utils.URLUtil;
import classes.vo.ModelsStates;
import fl.containers.ScrollPane;
import fl.controls.ProgressBar;
import com.greensock.TweenLite;
public class IndividualModel extends StateClip
{
//--------------------------------------------------------------------------
// CONSTANTS
//--------------------------------------------------------------------------
private static const PADDING_TOP:Number= 28;
private static const PADDING_LEFT:Number= 50;
private static const COLS:int= 4;
private static const ROWS:int= 8;
private static const GAP_HORIZONTAL:Number= 5;
private static const GAP_VERTICAL:Number= 5;
//--------------------------------------------------------------------------
// MEMBER VARIABLES
//--------------------------------------------------------------------------
private var _data:XML;
public function get data():XML
{
return _data;
}
public function set data(value:XML):void
{
setData(value);
}
private var items:Array;
private var backBtn:BasicButton;
private var itemsHolder:MovieClip;
private var loadIndex:int;
private var sp:ScrollPane;
private var clonedBitmap:Bitmap;
private var originalBitmap:Bitmap;
private var rect:Rectangle;
private var screen:Sprite = new Sprite();
public function IndividualModel()
{
super();
items = [];
addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
}
private function addedToStageHandler(event:Event):void
{
initChildren();
}
private function initChildren():void
{
itemsHolder = new MovieClip();
addChild(itemsHolder);
sp = getChildByName("mc_pane") as ScrollPane;
backBtn = getChildByName("btn_back") as BasicButton;
backBtn.addEventListener(MouseEvent.CLICK, backBtn_clickHandler);
screen.graphics.beginFill(0x111111, .75);
screen.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
screen.graphics.endFill();
}
public function destroy():void
{
clearItems();
}
//--------------------------------------------------------------------------
// PUBLIC INTERFACE
//--------------------------------------------------------------------------
//--------------------------------------------------------------------------
// LAYOUT
//--------------------------------------------------------------------------
private function clearItems():void
{
while (items.length > 0)
{
var item:ModelsItem = items.pop() as ModelsItem;
itemsHolder.removeChild(item);
item.destroy();
}
}
private function populateItems():void
{
for (var i:int = 0; i < Math.min(COLS * ROWS, data.picture.length()); i++)
{
var item:ModelsItem = new ModelsItem();
item.data = data.picture;
item.x = PADDING_LEFT + (i % COLS) * (ModelsItem.ITEM_WIDTH + GAP_HORIZONTAL);
item.y = PADDING_TOP + Math.floor(i / COLS) * (ModelsItem.ITEM_HEIGHT + GAP_VERTICAL);
/*item.addEventListener(MouseEvent.CLICK, modelClicked);*/
itemsHolder.addChild(item);
/*item.mouseEnabled = false;*/
sp.source = itemsHolder;
items.push(item);
}
sp.verticalScrollPolicy = "on";
sp.horizontalScrollPolicy = "off";
sp.update();
}
//--------------------------------------------------------------------------
// PICTURE LOADING
//--------------------------------------------------------------------------
private function loadNextPicture():void
{
if (loadIndex < items.length)
{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadNextPicture_completeHandler);
var item:ModelsItem = items[loadIndex] as ModelsItem;
loader.load(new URLRequest(URLUtil.getURL(item.data.@url.toString())));
/*item.mouseEnabled = true;*/
}
}
private function loadNextPicture_completeHandler(event:Event):void
{
event.target.removeEventListener(Event.COMPLETE, loadNextPicture_completeHandler);
ModelsItem(items[loadIndex]).bitmap = event.target.content as Bitmap;
ModelsItem(items[loadIndex]).addEventListener(MouseEvent.CLICK, modelClicked);
loadIndex++;
loadNextPicture();
}
//--------------------------------------------------------------------------
// EVENT HANDLERS
//--------------------------------------------------------------------------
private function backBtn_clickHandler(event:MouseEvent):void
{
state = ModelsStates.HIDDEN;
}
private function modelClicked(e:MouseEvent):void
{
stage.addChild(screen);
var item:ModelsItem = e.currentTarget as ModelsItem;
originalBitmap = item.bitmap;
clonedBitmap = new Bitmap(originalBitmap.bitmapData.clone());
stage.addChild(clonedBitmap);
rect = originalBitmap.getBounds(stage);
clonedBitmap.x = rect.x;
clonedBitmap.y = rect.y;
clonedBitmap.width = rect.width;
clonedBitmap.height = rect.height;
clonedBitmap.smoothing = true;
TweenLite.to(clonedBitmap, 1, { x: (stage.stageWidth - originalBitmap.width) / 4, y: (stage.stageHeight - originalBitmap.height) / 6, onComplete:zoomInFinished, scaleX: 1, scaleY: 1 });
}
private function zoomInFinished():void
{
trace("Zoom In Finished");
stage.addEventListener(MouseEvent.CLICK, mouseClicked);
}
private function mouseClicked(e:MouseEvent):void
{
TweenLite.to(clonedBitmap, 1, { x: rect.x, y: rect.y, onComplete:zoomOutFinished, width: rect.width, height: rect.height});
stage.removeEventListener(MouseEvent.CLICK, mouseClicked);
}
private function zoomOutFinished():void
{
trace("Mouse Clicked");
stage.removeChild(screen);
stage.removeChild(clonedBitmap);
}
//--------------------------------------------------------------------------
// GETTERS & SETTERS
//--------------------------------------------------------------------------
private function setData(value:XML):void
{
_data = value;
clearItems();
populateItems();
loadIndex = 0;
loadNextPicture();
state = ModelsStates.SHOWN;
}
//--------------------------------------------------------------------------
// UTILS
//--------------------------------------------------------------------------
override protected function animateInComplete():void
{
super.animateInComplete();
switch (state)
{
case ModelsStates.SHOWN :
break;
case ModelsStates.HIDDEN :
break;
}
}
}
}
AdChoices