Nicole Henningsen's Blog
Posted At : October 20, 2007 9:19 AM | Posted By : Nicole Henningsen

Flash and XML Image Viewer/slideshow

If you have been looking for a Flash and XML image viewer or sideshow with a description you may be hit a dead end.

Example

Find out How......

Thanks to Lee's Flash Blog I was able to come up with a good working example to go off of.

You will need to Download Fuse 2.1.3r1 ยป

Fuse is a great tool to have check out their documentation. There is a lot that you can do with Fuse if you haven't used it yet!

Once you have downloaded fuse unzip the folder. Close Flash. Open up the fuse2.1.3r1 folder. Click on FuseKit2.1 to loaded your flash extension.

What the coded looks like Gallery.as File

import com.mosesSupposes.fuse.*;
import mx.utils.Delegate;
import flash.display.BitmapData;
import flash.geom.*;

ZigoEngine.register(Fuse, FuseFMP, PennerEasing);

textBar.swapDepths(10);

var photos:Array = new Array();
var caps:Array = new Array();
var current:Number = 0;

this.createEmptyMovieClip("gallery", 1);
this.gallery.createEmptyMovieClip("bmdc", 1);
this.gallery.createEmptyMovieClip("photo", 2);

var bmd:BitmapData = new BitmapData(500, 375,true,0x000000);
this.gallery.bmdc.createEmptyMovieClip("preload", 1);
this.gallery.bmdc.attachBitmap(bmd, 2);

var mcl:MovieClipLoader = new MovieClipLoader();
var mclL:Object = new Object();
mclL.onLoadComplete = Delegate.create(this, tranny);
mcl.addListener(mclL);

function loadPhoto():Void
{
   trace("loading photo...");
   bmd.draw(this.gallery.photo);
   this.gallery.photo._alpha = 0;
   if(current == photos.length-1) current = 0;
   else current++;
   textbar._rotation = rr;
   textBar.t.text = caps[current];
   mcl.loadClip(photos[current], this.gallery.photo);
}

function preload():Void
{
   if(current == photos.length-1) var num = 0;
   else var num = current+1;
   this.gallery.bmdc.preload.loadMovie(photos[num]);
}

function tranny():Void
{
   trace("starting transition...");
   var f:Fuse = new Fuse();
   f.push([{target:this.gallery.photo, alpha:100, time:2},
            {target:textBar, delay:0.5, start_x:-518, x:cx, time:0.5, ease:"easeOutExpo"},
            {target:textBar.arrow, x:ca, time:0.5, ease:"easeOutQuad", delay:0.5}]);
   f.push({func:preload, scope:this});
   f.push({target:textBar,delay:5, x:-518, time:1, ease:"easeOutExpo", func:loadPhoto, scope:this});
   f.start();
}

function cx():Number
{
   var te:Number = textBar.t.textWidth;
   var nx:Number = -518 + te + 60;
   return nx;
}

function ca():Number
{
   return textBar.t._x - cx()+27;
}

function rr():Number
{
   if(Math.random() < 0.5) return Math.round(Math.random()*15);
   else return Math.round(-Math.random()*15);
}

var feed:XML = new XML();
feed.ignoreWhite = true;
feed.onLoad = function()
{
   var nodes:Array = this.firstChild.childNodes;
   for(var i=0;i<nodes.length;i++)
   {
      _root.caps.push(nodes[i].attributes.desc);
      _root.photos.push(nodes[i].attributes.url);
   }
   _root.mcl.loadClip(photos[0], _root.gallery.photo);
   _root.textBar.t.text = caps[0];
}

feed.load("photos.xml");

The XML

<photos>
<photo url="one.jpg" desc="Your Description Here" />
<photo url="two.jpg" desc="Your Description Here" />
<photo url="three.jpg" desc="Your Description Here" />
<photo url="four.jpg" desc="Your Description Here" />
<photo url="five.jpg" desc="Your Description Here" />
</photos>

Its very easy to implement and change! You can download the full source here. Don't forget to save your xml file using the above code!

Comments
Hey Nicole. This is exactly what im looking for bar one part.

I'm totally new to flash and actionscript and would really appreciate it if you'd take some time to help me out.

is it possible to add another part to the xml. a link="http://www.site.com" and when the user clicks on the picture or on the text they would be sent to it.

I'm assuming you'd have to create another clip and call the info from the xml doc...i just have no idea how.

thank you for you time and i await your reply.
# Posted By Rrory | 12/30/07 8:05 PM
add this line to the top:
var link:Array = new Array();

and include this in the if loop:
textBar.onRelease = function() {
getURL(link[current], "_blank");
trace(link[current]);
};

then in the xml, add link="http://www.site.com"
# Posted By Nicole Rutter | 1/14/08 9:14 AM
i see the link code and it almost makes sense but could you be just a touch more specific where to put it in the gallery .as??
# Posted By keeb | 6/25/08 8:01 AM
Thanks for a nice idea. Though it doesn't seem so easy. I never used Fuse. Hope it doesn't differ much.
# Posted By Rapidshare SE | 2/13/10 2:35 PM



Blog provided and hosted by CF Webtools. Blog Sofware by Ray Camden.