Skip to main content
Participant
March 7, 2011
Question

need help with timeline

  • March 7, 2011
  • 1 reply
  • 475 views

I have this photo gallery code that i found online. I have various frames in my timeline, when the photo gallery loads in frame x and i try to go to frame y. the photo gallery doesnt close out.  I want to include a button that says CLOSE and remove the photo gallery from the timeline.

The code involves xml files and is pretty complicated. Here it is...  Some Help would be great!!! thank in advance

import fl.transitions.*;
import fl.transitions.easing.*;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.geom.Matrix;
import flash.display.Sprite;

import com.flashandmath.objects.Tile;
import com.flashandmath.loaders.GalleryLoader;
import com.flashandmath.preloaders.LoadSpinner2;
import flash.display.Loader;
import flash.display.Shape;
import flash.events.MouseEvent;
import flash.text.TextFormat;
import flash.events.Event;

var sw:Number = 780;
var sh:Number = 740;

var galLoader:GalleryLoader;
var numPics:int;
var thumbsData:Vector.<BitmapData>
var largePicURLs:Vector.<String>;
var captions:Vector.<String>;
var spinner:LoadSpinner2;

var picWidth:Number;
var picHeight:Number;
var divisions:Number;
var gap:Number;
var tiles:Vector.<Tile>;
var tileWidth:Number;
var tileHeight:Number;
var galleryHolder:Sprite;
var parameterTween:Tween;
var variationX:Vector.<Number>;
var variationY:Vector.<Number>;
var variationMax:Number;
var collapsed:Boolean;
var currentPicIndex:int;
var captionBox:TextField;
var collapseTweenDuration:Number;
var separateTweenDuration:Number;
var closedPositionOffsetY:Number;
var thumbnails:Vector.<Bitmap>;
var pics:Vector.<Bitmap>;
var angles:Vector.<Number>;
var loader:Loader;
var isLoading:Boolean;
var scrollTweenDuration:Number;
var pageShift:int;
var numTiles:int;
var numPages:int;
var backSkip:int;
var navigationPanel:Sprite;

//////////

stage.scaleMode = StageScaleMode.NO_SCALE;

//this paramObject will be used for our tweened motion:
var paramObject:Object = {t:0};

//we create some instances of MovieClips from the library:
var btnNextImage:BtnNextImage = new BtnNextImage();
var btncloseGallery:btncloseGallery = new btncloseGallery();
var btnPrevImage:BtnPrevImage = new BtnPrevImage();
var btnNextPage:BtnNextPage = new BtnNextPage();
var btnPrevPage:BtnPrevPage = new BtnPrevPage();
var btnReturn:BtnReturn = new BtnReturn();
var mcViewInstructions:McViewInstructions = new McViewInstructions();


init();

/////////

function init():void {
   
    thumbsData = new Vector.<BitmapData>();
    largePicURLs = new Vector.<String>();
    captions = new Vector.<String>();
    loader = new Loader();
    isLoading = false; //boolean flag for image loading after thumbnail click

    infoBox.text = "Loading thumbnails, please wait...";
   
    galleryHolder = new Sprite();
    galleryHolder.x = sw/2 - 3;
    galleryHolder.y = sh/2 + 10;
    this.addChild(galleryHolder);
   
    btnPrevImage.mouseEnabled = false;
    btnNextImage.mouseEnabled = false;
    btnReturn.mouseEnabled = false;
    btncloseGallery.mouseEnabled = false;
   
    spinner = new LoadSpinner2(100,100);
    spinner.setColors(0x000762C5, 0xFF0762C5);
    spinner.bgAlpha = 0.5;

    spinner.x = galleryHolder.x;
    spinner.y = galleryHolder.y;
    this.addChild(spinner);
    spinner.startSpinner();
    galLoader = new GalleryLoader("gallery.xml");
    galLoader.addEventListener(GalleryLoader.XMLLOAD_ERROR, xmlError);
    galLoader.addEventListener(GalleryLoader.IMGSLOAD_ERROR, imgsError);
    galLoader.addEventListener(GalleryLoader.ALL_LOADED, loadEnded);
    galLoader.loadXML();
}

function xmlError(e:Event):void {
    galLoader.removeEventListener(GalleryLoader.XMLLOAD_ERROR, xmlError);
    galLoader.removeEventListener(GalleryLoader.ALL_LOADED, loadEnded);
    galLoader.removeEventListener(GalleryLoader.IMGSLOAD_ERROR, imgsError);
    infoBox.text="There has been an error loading the XML file. The server may be busy. Try refreshing the page.";
    spinner.stopSpinner();
    spinner.visible=false;
}

function imgsError(e:Event):void {
    galLoader.removeEventListener(GalleryLoader.XMLLOAD_ERROR, xmlError);
    galLoader.removeEventListener(GalleryLoader.ALL_LOADED, loadEnded);
    galLoader.removeEventListener(GalleryLoader.IMGSLOAD_ERROR, imgsError);
    infoBox.text="There has been an error loading thumbnails. The server may be busy. Try refreshing the page.";
    spinner.stopSpinner();
    spinner.visible=false;
}
       
function loadEnded(e:Event):void {
    galLoader.removeEventListener(GalleryLoader.XMLLOAD_ERROR, xmlError);
    galLoader.removeEventListener(GalleryLoader.ALL_LOADED, loadEnded);
    galLoader.removeEventListener(GalleryLoader.IMGSLOAD_ERROR, imgsError);
    infoBox.text="";
    spinner.stopSpinner();
    spinner.visible=false;
    initApp();        
}

function populateVecs():void {
    var j:int;
    for(j=0;j<numPics;j++){
        thumbsData=galLoader.bmpDataVec;
        largePicURLs=galLoader.picsVec;
        captions=galLoader.capsVec;
    }
}


function initApp():void {
    numPics = galLoader.numPics;
    populateVecs();
   
    thumbnails = new Vector.<Bitmap>();
   
    createThumbnailBitmaps();
   
    picWidth = 300;
    picHeight = 200;
    gap = 50;   
    divisions = 3;
    numTiles = divisions*divisions;
   
    variationMax = 12;
   
    numPages = Math.ceil(Number(numPics)/Number(numTiles));
    backSkip = numPages*numTiles - numPics;
   
    collapseTweenDuration = 36;
    separateTweenDuration = 30;
    scrollTweenDuration = 40;
   
    closedPositionOffsetY = 0;
   
    pageShift = 0;
   
    navigationPanel = new Sprite();
    this.addChild(navigationPanel);
    navigationPanel.mouseEnabled = false;
    navigationPanel.y = galleryHolder.y + closedPositionOffsetY - picHeight/2 - 40;
    navigationPanel.x = galleryHolder.x + 2;
   
    navigationPanel.addChild(btnNextImage);
    btnNextImage.y = 0;
    btnNextImage.x = btnReturn.width/2 + 20;
   
    navigationPanel.addChild(btnPrevImage);
    btnPrevImage.y = 0;
    btnPrevImage.x = -btnReturn.width/2 - 20;
   
    navigationPanel.addChild(btnReturn);
    btnReturn.y = 0;
    btnReturn.x = 0;
   
    navigationPanel.addChild(btncloseGallery);
    btncloseGallery.y = 0;
    btncloseGallery.x = 0;
   
    this.addChild(mcViewInstructions);
    mcViewInstructions.y = galleryHolder.y - (picHeight + gap*(divisions-1))/2 - 30;
    mcViewInstructions.x = galleryHolder.x + 3;
    mcViewInstructions.mouseEnabled = false;
   
    this.addChild(btnPrevPage);
    btnPrevPage.x = galleryHolder.x + (picWidth + gap*(divisions-1))/2 + 30;
    btnPrevPage.y = galleryHolder.y - 8;
   
    this.addChild(btnNextPage);
    btnNextPage.x = galleryHolder.x + (picWidth + gap*(divisions-1))/2 + 30;
    btnNextPage.y = galleryHolder.y + 12;
   
    this.addChild(btncloseGallery);
    btncloseGallery.x = galleryHolder.x + (picWidth + gap*(divisions-1))/2 + 30;
    btncloseGallery.y = galleryHolder.y + 12;
   
    btnPrevImage.addEventListener(MouseEvent.CLICK,prevImage);
    btnNextImage.addEventListener(MouseEvent.CLICK, nextImage);
    btnReturn.addEventListener(MouseEvent.CLICK, returnToThumbs);
    btncloseGallery.addEventListener(MouseEvent.CLICK,closeGallery);
   
    btnNextPage.addEventListener(MouseEvent.CLICK, btnNextPageHandler);
    btnPrevPage.addEventListener(MouseEvent.CLICK, btnPrevPageHandler);
    setPagingVisibility();
   
    navigationPanel.alpha = 0;
   
    tiles = new Vector.<Tile>();
    variationX = new Vector.<Number>();
    variationY = new Vector.<Number>();
    angles = new Vector.<Number>();
   
    tileWidth = picWidth/divisions;
    tileHeight = picHeight/divisions;
   
    var dsf:DropShadowFilter = new DropShadowFilter(6,45,0,0.7,6,6,1);
    galleryHolder.filters = [dsf];
   
    var format:TextFormat = new TextFormat("arial",12,0x000000,false,true);
    format.align = TextFormatAlign.CENTER;
    captionBox = new TextField();
    captionBox.defaultTextFormat = format;
    captionBox.autoSize = TextFieldAutoSize.CENTER;
    captionBox.text = "";
    captionBox.x = galleryHolder.x - captionBox.width/2;
    captionBox.y = 20+galleryHolder.y + 0.5*picHeight + closedPositionOffsetY;
    this.addChildAt(captionBox,0);
                                                             
    captionBox.mouseEnabled = false;
   
    setUpThumbnails();
    setUpTiles();
       
    collapsed = false;
}

function createThumbnailBitmaps():void {
    var i:int;
    for (i = 0; i < galLoader.numPics; i++) {
        thumbnails.push(new Bitmap(galLoader.bmpDataVec));
    }
}

function setUpThumbnails():void {
    var k:int;
    var scaleFactor:Number;
    for (k = 0; k < numPics; k++) {
        scaleFactor = tileWidth/thumbnails.width;
        thumbnails.x = -scaleFactor*thumbnails.width/2;
        thumbnails.y = -scaleFactor*thumbnails.height/2;
        thumbnails.scaleX = thumbnails.scaleY = scaleFactor;
    }
}

function setUpTiles():void {
    for (var i=0; i<= divisions-1; i++) {
        for (var j=0; j<= divisions-1; j++) {
            var thisTile:Tile = new Tile();
           
            thisTile.thumbnailHolder.addChild(thumbnails[i*divisions + j]);
           
            galleryHolder.addChild(thisTile);
           
            thisTile.openPosition.x = -(picWidth + gap*(divisions-1))/2 + tileWidth/2+(tileWidth+gap)*j;// + (2*Math.random()-1)*gap*0.5;
            thisTile.openPosition.y = -(picHeight + gap*(divisions-1))/2 + tileHeight/2+(tileHeight+gap)*i;// + (2*Math.random()-1)*gap*0.5;
            thisTile.closedPosition.x = -picWidth/2 + tileWidth/2 + tileWidth*j;
            thisTile.closedPosition.y = closedPositionOffsetY - picHeight/2 + tileHeight/2 + tileHeight*i;
           
            thisTile.x = thisTile.openPosition.x;
            thisTile.y = thisTile.openPosition.y;
           
            thisTile.which = i*divisions+j;
           
            thisTile.buttonMode = true;
           
            tiles.push(thisTile);
            variationX.push(4*variationMax*(2*Math.random()-1));
            variationY.push(4*variationMax*(2*Math.random()-1));
            angles.push(0);
            thisTile.addEventListener(MouseEvent.CLICK, onTileClick);
        }
    }
}

function onTileClick(evt:MouseEvent):void {
   
    if(isLoading||collapsed){
        return;
    }
    isLoading=true;
   
    currentPicIndex = evt.target.which;
   
    setFlipVisibility();
   
    spinner.visible = true;
    spinner.startSpinner();
   
    //set up listeners for load complete or error, go to changeTilesBeforeCollapse on complete
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete);
    loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,loadingError);
   
    //load image
    loader.load(new URLRequest(largePicURLs[currentPicIndex + pageShift]));
       
}


function setFlipVisibility():void {
    btnPrevImage.visible = btnPrevImage.mouseEnabled = (currentPicIndex + pageShift > 0);
    btnNextImage.visible = btnNextImage.mouseEnabled = (currentPicIndex + pageShift < (numPics - 1));
}

function loadingError(e:IOErrorEvent):void {
    infoBox.text="There has been an error loading the image. The server may be busy. Refresh the page and try again.";
    loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loadComplete);
    loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR,loadingError);
    isLoading=false;
    spinner.stopSpinner();
    spinner.visible=false;
}


function onPicClick(evt:MouseEvent):void {
    btnReturn.removeEventListener(MouseEvent.CLICK, returnToThumbs);
    galleryHolder.removeEventListener(MouseEvent.CLICK, onPicClick);
    separate();
}

function returnToThumbs(evt:MouseEvent):void {
    galleryHolder.removeEventListener(MouseEvent.CLICK, onPicClick);
    btnReturn.removeEventListener(MouseEvent.CLICK, returnToThumbs);
    btnReturn.mouseEnabled = false;
    separate();
}

function loadComplete(evt:Event):void {
    loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loadComplete);
    loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR,loadingError);
       
    spinner.stopSpinner();
    spinner.visible=false;
   
    isLoading=false;
   
    //paint tiles with pic:
    var matrix:Matrix = new Matrix(1,0,0,1);
    var index:int;
    var bd:BitmapData = Bitmap(loader.content).bitmapData;
    for (var i=0; i<= divisions-1; i++) {
        for (var j=0; j<= divisions-1; j++) {
           
            index = i*divisions + j;
           
            matrix.tx = (-j-0.5)*picWidth/divisions;
            matrix.ty = (-i-0.5)*picHeight/divisions;
           
            tiles[index].graphics.clear();
            tiles[index].graphics.beginBitmapFill(bd,matrix,false,false);
            tiles[index].graphics.drawRect(-tileWidth/2, -tileHeight/2, tileWidth, tileHeight);
            tiles[index].graphics.endFill();
        }
    }
   
    //change caption:
    captionBox.text = "  "+captions[currentPicIndex + pageShift]+"  "; //adding a little extra space to avoid cutoff
   
    if (!collapsed) {
        collapse();
    }
}

function collapse():void {   
    collapsed = true;
    //reset the randomization variables so it won't look the same every time:
    for (var i:int = 0; i < divisions*divisions; i++) {
        variationX = (4*variationMax*(2*Math.random()-1));
        variationY = (4*variationMax*(2*Math.random()-1));
        angles = 60-Math.random()*120;
    }
    parameterTween = new Tween(paramObject,"t",Elastic.easeInOut,0,1,collapseTweenDuration);
    parameterTween.addEventListener(TweenEvent.MOTION_FINISH, collapseComplete);
    this.addEventListener(Event.ENTER_FRAME, onEnterCollapse);
}

function separate():void {
    collapsed = false;
    //reset the randomization variables so it won't look the same every time:
    for (var i:int = 0; i < divisions*divisions; i++) {
        variationX = (4*variationMax*(2*Math.random()-1));
        variationY = (4*variationMax*(2*Math.random()-1));
        angles = 60-Math.random()*120;
    }
    parameterTween = new Tween(paramObject,"t",Elastic.easeInOut,0,1,separateTweenDuration);
    parameterTween.addEventListener(TweenEvent.MOTION_FINISH, separateComplete);
    this.addEventListener(Event.ENTER_FRAME, onEnterSeparate);
   
    btnPrevImage.mouseEnabled = false;
    btnNextImage.mouseEnabled = false;
}

function onEnterCollapse(evt:Event):void {
   
    captionBox.alpha = paramObject.t;
    navigationPanel.alpha = paramObject.t;
    mcViewInstructions.alpha = 1 - paramObject.t;
    btnPrevPage.alpha = 1 - paramObject.t;
    btnNextPage.alpha = 1 - paramObject.t;
   
    var quad:Number;
    for (var i:int = 0; i< divisions*divisions; i++) {
        quad = paramObject.t*(1-paramObject.t);
        tiles.x = tiles.openPosition.x + paramObject.t*(tiles.closedPosition.x-tiles.openPosition.x)+variationX*quad;
        tiles.y = tiles.openPosition.y + paramObject.t*(tiles.closedPosition.y-tiles.openPosition.y)+variationY*quad;
        tiles.thumbnailHolder.alpha = 1-paramObject.t;
        tiles.rotation = quad*angles;
    }
}

function onEnterSeparate(evt:Event):void {
   
    captionBox.alpha = 1-paramObject.t;
    navigationPanel.alpha = 1-paramObject.t;
    mcViewInstructions.alpha = paramObject.t;
    btnPrevPage.alpha = paramObject.t;
    btnNextPage.alpha = paramObject.t;
   
    var quad:Number;
    for (var i:int = 0; i< divisions*divisions; i++) {
        quad = paramObject.t*(1-paramObject.t);
        tiles.x = tiles.closedPosition.x + paramObject.t*(tiles.openPosition.x-tiles.closedPosition.x)+variationX*quad;
        tiles.y = tiles.closedPosition.y + paramObject.t*(tiles.openPosition.y-tiles.closedPosition.y)+variationY*quad;
        tiles.thumbnailHolder.alpha = paramObject.t;
        tiles.rotation = quad*angles;
    }
}


function collapseComplete(evt:Event):void {   
    captionBox.x = galleryHolder.x - captionBox.width/2;
    this.removeEventListener(Event.ENTER_FRAME, onEnterCollapse);
    galleryHolder.addEventListener(MouseEvent.CLICK, onPicClick);
    btnReturn.addEventListener(MouseEvent.CLICK, returnToThumbs);
    btnReturn.mouseEnabled = true;
}

function separateComplete(evt:Event):void {
    this.removeEventListener(Event.ENTER_FRAME, onEnterSeparate);
}

function prevImage(evt:MouseEvent):void {
    if(isLoading){
        return;
    }
    isLoading=true;
   
    currentPicIndex -= 1;
    if (currentPicIndex < 0) {
        //pageShift -= numTiles;
        currentPicIndex = numTiles - 1
        //have to do something special if we're on the last page
        if (Math.ceil(Number(pageShift)/Number(numTiles)) == numPages - 1) {
            currentPicIndex -= backSkip;
        }
        prevPage();
    }
       
    setFlipVisibility();
   
    spinner.visible = true;
    spinner.startSpinner();
   
    //set up listeners for load complete or error, go to changeTilesBeforeCollapse on complete
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete);
    loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,loadingError);
   
    //load image
    loader.load(new URLRequest(largePicURLs[currentPicIndex + pageShift]));
   
}

function nextImage(evt:MouseEvent):void {
    if(isLoading){
        return;
    }
    isLoading=true;
   
    currentPicIndex += 1;
    if (currentPicIndex > numTiles - 1) {
        //pageShift -= numTiles;
        currentPicIndex = 0;
        //have to do something special if we're on the last page
        if (Math.ceil(Number(pageShift + numTiles)/Number(numTiles)) == numPages - 1) {
            currentPicIndex += backSkip;
        }
        nextPage();
    }

    setFlipVisibility();
   
    spinner.visible = true;
    spinner.startSpinner();
   
    //set up listeners for load complete or error, go to changeTilesBeforeCollapse on complete
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete);
    loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,loadingError);
   
    //load image
    loader.load(new URLRequest(largePicURLs[currentPicIndex + pageShift]));
   
}

function setPagingVisibility():void {
    btnPrevPage.visible = false;
    btnPrevPage.mouseEnabled = false;
    btnNextPage.visible = false;
    btnNextPage.mouseEnabled = false;
    if (pageShift + numTiles < numPics - 1) {
        btnNextPage.visible = true;
        btnNextPage.mouseEnabled = true;
    }
    if (pageShift > 0) {
        btnPrevPage.visible = true;
        btnPrevPage.mouseEnabled = true;
    }
}

function btnNextPageHandler(evt:MouseEvent):void {
    nextPage();
}

function btnPrevPageHandler(evt:MouseEvent):void {
    prevPage();
}

function nextPage():void {
    var k:int;
    pageShift += numTiles;
    if (pageShift + numTiles > numPics) {
        pageShift = numPics - numTiles;
    }
       
    for (k = 0; k < numTiles; k++) {
        if (tiles.thumbnailHolder.numChildren > 0) {
            tiles.thumbnailHolder.removeChildAt(0);
        }
        tiles.thumbnailHolder.addChild(thumbnails[k + pageShift]);
    }
   
    setPagingVisibility();
}

function prevPage():void {
    var k:int;
    pageShift -= numTiles;
    if (pageShift < 0) {
        pageShift = 0;
    }
       
    for (k = 0; k < numTiles; k++) {
        if (tiles.thumbnailHolder.numChildren > 0) {
            tiles.thumbnailHolder.removeChildAt(0);
        }
        tiles.thumbnailHolder.addChild(thumbnails[k + pageShift]);
    }
   
    setPagingVisibility();
}

This topic has been closed for replies.

1 reply

Inspiring
March 7, 2011

try:

//inside your close-Button-Linstener

this.removeChild(galleryHolder);

meker315Author
Participant
March 7, 2011

Thank you! you actually gave me an idea which worked. All i did was put an emtpy movie clip on stage and put my actionscript nested within that empty movie clip and it worked. Thanks!