Movable XML Image Gallery
| Category | : Flash | Views | : 29620 | ||
| Version | : 8 | Rating | : | ||
| Type | : Text | Source File | : movable-xml-image-gallery.zip | ||
| Result | : See the result | ||||
Create an xml file like this:
<xml>
<image1 title="image1.jpg"/>
<image2 title="image2.jpg"/>
<image3 title="image3.jpg"/>
<image4 title="image4.jpg"/>
<image5 title="image5.jpg"/>
</xml>
You can use as much images as you want.
Now paste this on the main timeline:
//new XML object
var images_xml = new XML();
images_xml.ignoreWhite = true;
//load xml named "images.xml" on the same folder of this document
images_xml.load("images.xml");
//new array to hold the images path
var images_path = new Array();
//when the xml finished loading
images_xml.onLoad = function()
{
//images_path equals the number of
//image nodes inside the xml file.
_root.images_path = images_xml.firstChild.childNodes;
//load the fist image inside the instance that
//we placed in the stage
_root.Frame.Pic.load(images_path[0].attributes.title);
//for loop, runs depending on the number of images
for (i = 1; i < _root.images_path.length; i++)
{
//duplicate the Movie Clip
duplicateMovieClip(Frame, "Frame" + i, _root.getNextHighestDepth())
//use the frame variable to call it bellow
var frame = _root["Frame" + i];
//random position
frame._x = Math.random() * 400 + 20;
//random _y coordinate above the screen so the frame fall down on the screen.
frame._y = Math.random() * 20 - 40;
//set the path of the image to load
frame.imagePath = _root.images_path[i].attributes.title;
}
}
You can test the loading by pressing Ctrl + Enter while debugging the code.
Code Explanation
onClipEvent(load)
{
var imagePath;
mDown = false;
oldMousex = _root._xmouse;
oldMousey = _root._ymouse;
The first variable is the path to the image that needs to be loaded; we will be set when we duplicate this Movie Clip."mDown" is whether the mouse is clicked or not and the "old" variables are going to be used for resizing and rotating.
this.Pic.load(imagePath);
Load the image on the Loader component.
destX = this._x + (Math.random() * 160) – 80
destY = this._y + (Math.random() * 50) + 50
Get a random destination for this Movie Clip, this will be the position of the Movie Clip after loading.
 |
 |
 |
 |
 |