As2 fullscreen gallery

Question

Hi!
I want to create a simple but sweet flash portfolio like:http://www.jeanmalek.com/
That one is a bit over the top for me though, with al the transitions and stuff.
I want it to start with a menu with btns calling different xmls showing infullscreen my photographs.
I want the gallery to be controlled with next and prev btns on top of the picture. It would be nice to have the cursor changing to arrows when hovering over each side.
Layout jpgs:
http://wimmerman.se/portfolio/layout1.jpg
http://wimmerman.se/portfolio/layout2.jpg
I guess the first step is to make the "menu btns" calling each xml gallery.
Its based on Noponies tutorial:
example: http://www.noponies.com/dev/fullscreen/
files: http://www.noponies.com/dev/fullscreen/xmlFullCrossXML.zip
What code do I import.
Cheers!

Answer 1

Furianaxus wrote:
Hi There,
http://gotoandlearn.com/play.php?id=22
Watch that video tutorial. It should cover absolutely everything you need to get this done.
oh sweet thanks!
Ive been trying to implement the code but im not getting it to work right.
For the moment its working as a slideshow and I think there is something with:
bitmapFadeInterval = setInterval(_root, "loadRandomBitmap", imageTime);
That launghes the loadRandomBitmap function.
thanks for your help
Here is my code:
Terms and Conditions of use
http://www.blog.noponies.com/terms-and-conditions
//init
import flash.display.BitmapData;
Stage.scaleMode = "noscale";
import gs.TweenLite;
stop();
//load in background images XML details
var backImage:XML = new XML();
backImage.ignoreWhite = true;
var bgImages:Array = new Array();
var p:Number = 0;//track pos in arrays
//Variables pulled in from XML
var minHeight:Number;
var minWidth:Number;
var crossFadeTime:Number;
var imageTime:Number;
var order:String;
backImage.onLoad = function(success:Boolean) {
     if (success) {
          //get vars from XML file
          minHeight = this.firstChild.attributes.minHeight;
          minWidth = this.firstChild.attributes.minWidth;
          crossFadeTime = this.firstChild.attributes.crossFadeTime;
          imageTime = this.firstChild.attributes.imageTime;
          imageTime = (1000*60)*imageTime;
          order = String(this.firstChild.attributes.order);
          p = 0;
          bgImages = [];//reset the array var, should for some reason you want to load in a different set of images
          xmlNodes = this.firstChild;
          largeImages = xmlNodes.childNodes.length;
          for (i=0; i<largeImages; i++) {
               bgImages[i] = xmlNodes.childNodes[i].childNodes[0].firstChild.nodeValue;
          //load random image when we successfully parse XML
          loadRandomBitmap();
     } else {
          trace("Fatal Error - Loading background image XML failed");
//name of your xml file
backImage.load("backimages.xml");
/*create an empty mc to act as the background smoothed bitmap holder
change the depth etc here should you need to..Note that this is created inside the
small mc on the stage*/
bgHolder_mc.createEmptyMovieClip("bg_mc",1);
//var to track the fading, we use this to try to resize the temp bitmap with a resize, should the user be resizing the window when we fade in out
var fadingComplete:Boolean = true;
var firstRun:Boolean = true;
//BITMAP BACKGROUND LOADING///
function loadRandomBitmap():Void {
     if (order == "random") {
          //create the temp loader mc that we load our unsmoothed bitmap into
          //a limitation of this approach is that as this top image fades in/out it looks a little jagged for 2 seconds or so..
          bgHolder_mc.createEmptyMovieClip("bg_loader",2);
          //random function for loaded images
          randomImg = Math.floor(Math.random(bgImages.length)*bgImages.length);
          bitLoader.loadClip(bgImages[randomImg],bgHolder_mc.bg_loader);
     } else {
          //sequential loading of images
          bgHolder_mc.createEmptyMovieClip("bg_loader",2);
          bitLoader.loadClip(bgImages[p],bgHolder_mc.bg_loader);
          p++;
          if (p == bgImages.length) {
               p = 0;
//MovieClipLoader for bitmap image loading
var bitLoader:MovieClipLoader = new MovieClipLoader();
var bitlistener:Object = new Object();
bitlistener.onLoadStart = function(target:MovieClip):Void  {
     //alpha out our image we load our bitmap into
     target._alpha = 0;
bitlistener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void  {
     //amountLoaded = Math.floor((bytesLoaded/bytesTotal)*100);//calulate a loading percentage!
     //do something with this data if you want
/*here we both draw our bitmap to our offscreen MC and handle the cross fading in and out -
First we load our bitmap into our temp mc which is set to alpha 0, then we resize and fade our
temp mc in so that we achieve the cross fading effect. When the temp MC is at 100% alpha we
attach our bitmap object to our smoothed background MC and then quickly fade out and remove the temp MC.*/
bitlistener.onLoadInit = function(target:MovieClip):Void  {
/*clear the timer interval each time. We do this so that each new iteration of the timer
starts from when the bitmap is loaded, this stops us from trying to fade images etc that have not loaded
and ensures that each bitmap is displayed for the required amount of time on screen. Essentially it negates
download time*/
     clearInterval(bitmapFadeInterval);
     //create the bitmap object, each time this is reset, keeping memory footprint fairly low..
     var bitmap:BitmapData = new BitmapData(target._width, target._height, true);
     //draw the bitmap
     bitmap.draw(target);
     //we are starting to fade, so set our var to false and let the temp resize functions run
     fadingComplete = false;
     //resize the temp bitmap to match the size of the bg bitmap
     this.resizeTemp = function() {
          if (Stage.height/Stage.width>target._height/target._width) {
               img_propa = target._width/target._height;
               target._height = Stage.height;
               target._width = Stage.height*img_propa;
               target._y = 0;
               target._x = 0;
          } else {
               img_propa = target._height/target._width;
               target._width = Stage.width;
               target._height = Stage.width*img_propa;
               target._y = 0;
               target._x = 0;
     this.resizeTemp();
     //fade in the temp bitmap
     TweenLite.to(target,crossFadeTime,{_alpha:100, onComplete:fadedIn, onCompleteParams:[this], onUpdate:this.resizeTemp});
     function fadedIn(ref):Void {
          ref.resizeTemp
          //attach our loaded bitmap to our background mc when the temp totally obscures it
          //this is the smoothed bitmap
          bgHolder_mc.bg_mc.attachBitmap(bitmap,0,"auto",true);
          //make the bg resize
          fullScreenBg();//This is  abit of a hack to catch user resizes
          TweenLite.to(target,.1,{_alpha:0, onComplete:cleanUpTemp});
          function cleanUpTemp():Void {
               //remove the temp mc
               removeMovieClip(bgHolder_mc.bg_loader);
               //we are done fading..
               fadingComplete = true;
          //reset the timer
          bgHolder_mc.bg_mc.attachBitmap(bitmap,0,"auto",true);
          bitmapFadeInterval = setInterval(_root, "loadRandomBitmap", imageTime);
          //resize the bg image
          fullScreenBg();
          //add the stage listener, which fixes an issue with the image being scaled out to
          //some crazy size if a user is resizing as the image loads in for the first time.
          if (firstRun) {
               Stage.addListener(catchStage);//stage resize listener, added here after first image load.
               firstRun = false;
bitLoader.addListener(bitlistener);
//stage listener to handle resizing images
var catchStage:Object = new Object();
catchStage.onResize = function() {    
     /*simple "OR" conditional to set a min size, if we are below that we don't do any more scaling
     note that we wrap this in a if/else so that the function that we actually use to to the bg
     resizing can be called independently of this check, for instance when we are below the resize
     min but we are fading in a new image, obviously we would want that new image to scale*/
     //**IF YOU WANT TO SCALE AT ALL STAGE SIZES, SET THE MIN HEIGHT ETC TO 0 IN THE XML
     if (Stage.width<minWidth || Stage.height<minHeight) {
          return;
     } else {
          //call the resize function
          fullScreenBg();
//screen resize function
function fullScreenBg() {
     if (Stage.height/Stage.width>bgHolder_mc.bg_mc._height/bgHolder_mc.bg_mc._width) {
          img_prop = bgHolder_mc.bg_mc._width/bgHolder_mc.bg_mc._height;
          bgHolder_mc.bg_mc._height = Stage.height;
          bgHolder_mc.bg_mc._width = Stage.height*img_prop;
          bgHolder_mc.bg_mc._y = 0;
          bgHolder_mc.bg_mc._x = 0;
     } else {
          img_prop = bgHolder_mc.bg_mc._height/bgHolder_mc.bg_mc._width;
          bgHolder_mc.bg_mc._width = Stage.width;
          bgHolder_mc.bg_mc._height = Stage.width*img_prop;
          bgHolder_mc.bg_mc._y = 0;
          bgHolder_mc.bg_mc._x = 0;