XML Image Gallery with Falling Pictures (Snow Effect)
| Category | : Flash | Views | : 37218 | ||
| Version | : 8 | Rating | : | ||
| Type | : Text | Source File | : xml-image-gallery-with-falling-pictures.zip | ||
| Result | : See the result | ||||
In my case the size of the rectangle inside the frame is "500x375"; yours can be different, but you will need to change some numbers I use later on this tutorial.
Drag an instance of this MC to the stage and name it "frame1", we are going to duplicate it for our images.
Add this code to the first frame:
//MovieClipLoader objecto to load our images
MCloader = new MovieClipLoader();
//New object to create an Event Handler
listener = new Object();
//Add the Event Handler bellow to the MovieClipLoader
MCloader.addListener(listener);
//This event is called when the image finished loading
listener.onLoadInit = function(target)
{
//Create new BitmapData with the size "500x375" If you draw a different size, use that size
var bmd:BitmapData = new BitmapData(500,375);
//Get the _x and _y scale for the image
var xscale = 500/target._width
var yscale = 375/target._height
//New Matrix Object
var MT = new Matrix();
//Set the Matrix to scale using the values we got above
MT.scale(xscale, yscale)
//Draw the image that is loaded to our BitmapData using the Matrix
bmd.draw(target, MT);
//Loop the code below, 10 times to make 10 copies of this image
for(i = 0; i < 10; i++)
{
//duplicate MC
duplicateMovieClip(frame1, "copy" + _root.frames + i, _root.getNextHighestDepth());
//Use the variable "mc" to refer to the duplicate
mc = _root["copy" + _root.frames + i]
//Create a new MC inside the duplicate
mc.createEmptyMovieClip("pic", 10);
//Set the position of the new MC
mc.pic._x = -250
mc.pic._y = -187.5
//Attach the Bitmap to the MC
mc.pic.attachBitmap(bmd, 1);
}
//Remove the image that was loaded
target.removeMovieClip();
//Increase this variable by one to get unique names for
//the duplicates the next time this event is called
_root.frames++
//This variable controls whether the MCs can fall or not.
_root.ready = true;
}
Above we coded how the images are loaded, scaled and positioned inside the frames.
Now we are going to load the XML and pass the paths of the images to the MovieClipLoader object. Paste:
image_xml.onLoad = function()
{
//Loop for each node inside the XML
for(i = 0; i < image_xml.firstChild.firstChild.childNodes.length; i++)
{
//Get paths from the attribute "title" of each node
_root.images_path[i] = image_xml.firstChild.firstChild.childNodes[i].attributes.title;
//Create empty MC
_root.createEmptyMovieClip("frames" + i, _root.getNextHighestDepth());
//Load the image to this MC using the MovieClipLoader Object
_root.MCloader.loadClip(_root.images_path[i], _root["frames" + i]);
}
}
![]() |
![]() |
![]() |
![]() |
![]() |






