DOWNLOAD SOURCE FILE FOR THIS TUTORIAL

Posted by webzo

This gallery can load pictures from a xml file and you can rotate, resize and move the pictures.

First create a new Movie Clip and draw a square that we will use as a frame for our picture.

It can look like anything you want just make sure it?s filled with some color inside, even if it?s the same color as the background so because the loader we are going to use scales the image and it may appear to have holes if the picture isn?t squared.

Now place a loader component inside your square and give it the instance name "Pic".

Then add a dynamic text box with the instance name "percent" in the middle of the square.

It will display the progress for the loading picture.

Go back to the stage and create an instance of the Movie Clip we just made. Give the instance name "Frame" and open the actions for it. Paste:

Code: Select all
onClipEvent(load)
{

//path to the image, we will let this after getting the path from the XML
var imagePath;

//variable to know if the mouse is pressed or not
mDown = false

//this will keep track of the last position of the mouse
oldMousex = _root._xmouse;

//so we know how much to scale or rotate later
oldMousey = _root._ymouse;

//load the picture in our Loader
this.Pic.load(imagePath);

//the destination of the Movie Clip when it is loaded
destX = this._x + (Math.random() * 160) ? 80
destY = this._y + (Math.random() * 50) + 50

//the new rotation for the Movie Clip
rot = (Math.random() * 90) ? 45

//speed between 2 and 7; the Movie Clip will move using
//this speed to the dest(X,Y) coordinate
xSpeed = Math.random() * 5 + 2
ySpeed = Math.random() * 5 + 2

//rotating speed between 2 and 7
rotSpeed = Math.random() * 5 + 2

//image is not loaded yet, so set loaded to false.
loaded = false;
}

onClipEvent(enterFrame)
{
//if the image is not loaded move to the destination set on
//load event so until the image is completely loaded the
//user shouldn?t move this Movie Clip
if(!loaded)
{
//move in the _x and _y coordinate with easing
this._y += (destY - this._y)/ySpeed;
this._x += (destX - this._x)/xSpeed;

//rotate with easing
this._rotation += (rot - this._rotation)/rotSpeed;
}

//if the picture is not completely loaded
if(this.Pic.percentLoaded != 100)
{
//the text box equals percent loaded
this.percent.text = this.Pic.percentLoaded;
}
//if the loader finished the loading
else
{
//set the text to invisible
this.percent._visible = false;

//image is loaded so this variable is true.
loaded = true;
}
}

//mouse was pressed
onClipEvent(mouseDown)
{
this.oldMousex = _root._xmouse;
this.oldMousey = _root._ymouse;

//mouse is down so it?s true
this.mDown = true;

//if the mouse is located in this Movie Clip instance
if(this.hitTest(_root._xmouse, _root._ymouse, true))
{
//start dragging the Movie Clip
this.startDrag();

//swap depth, so this Movie Clip is in the top of the rest
this.swapDepths(_root.getNextHighestDepth());
}
}

//if mouse was released
onClipEvent(mouseUp)
{
//not down so it?s false
this.mDown = false;

//stop dragging the Movie Clip
this.stopDrag();
}

//if the mouse is moving
onClipEvent(mouseMove)
{
//if the mouse is on this Movie Clip
if(this.hitTest(_root._xmouse, _root._ymouse, true))
{
//if the mouse is down
if(this.mDown)
{
//if the control key is down
if(Key.isDown(Key.CONTROL))
{
//scale the Movie Clip with the movement
//of the mouse
_xscale += _root._xmouse - this.oldMousex;
_yscale += _root._xmouse - this.oldMousex;

//stop dragging the Movie Clip
this.stopDrag();
}
//if the shift is down
else if (Key.isDown(Key.SHIFT))
{
//rotate with the movement of the mouse in the _y coordinate
_rotation += _root._ymouse - this.oldMousey;

//stop dragging
this.stopDrag();
}

//save the previous position of the mouse
this.oldMousex = _root._xmouse;
this.oldMousey = _root._ymouse;
}
}
}


You can test the code to see how it works, but no image will be loaded yet.

Create an xml file like this:

Code: Select all
<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:

Code: Select all
//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 (j = 1; j < _root.images_path.length; j++)
{
//duplicate the Movie Clip
duplicateMovieClip(Frame, "Frame" + j, _root.getNextHighestDepth())

//use the frame variable to call it bellow
var frame = _root["Frame" + j];

//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[j].attributes.title;
}
}


You can test the loading by pressing Ctrl + Enter while debugging the code.

Code explanation

Code: Select all
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.

Code: Select all
this.Pic.load(imagePath);


Load the image on the Loader component.

Code: Select all
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.

Code: Select all
rot = (Math.random() * 90) ? 45


Set the variable "rot" to a random rotation between -45 and 45.

Code: Select all
xSpeed = Math.random() * 5 + 2
ySpeed = Math.random() * 5 + 2


Random _x and _y speed.

Code: Select all
rotSpeed = Math.random() * 5 + 2


Get a random speed for the rotation.

Code: Select all
loaded = false;
}


Variable used to know whether the image is loaded or not.

Code: Select all
onClipEvent(enterFrame)
{
if(!loaded)
{


If the image is not loaded move the Movie Clip to the destination.

Code: Select all
this._y += (destY - this._y) / ySpeed;
this._x += (destX - this._x) / xSpeed;


Move the code using this easing math:
(destination - current position) / speed;
The smaller the speed the faster the Movie Clip will move and vise-versa.

Code: Select all
this._rotation += (rot - this._rotation)/rotSpeed;
}


Rotate Movie Clip with easing.

Code: Select all
if(this.Pic.percentLoaded != 100)
{
this.percent.text = this.Pic.percentLoaded;
}


If the image is not 100% loaded set the text of the textbox to the current percentage.

Code: Select all
else
{
this.percent._visible = false;
loaded = true;
}
}


If the image is loaded hide the textbox by setting the visibility to false and set loaded to true.

Code: Select all
onClipEvent(mouseDown)
{
this.oldMousex = _root._xmouse;
this.oldMousey = _root._ymouse;


Set the old position to the current position of the mouse.

Code: Select all
this.mDown = true;


Mouse is down so set to true.

Code: Select all
if(this.hitTest(_root._xmouse, _root._ymouse, true))
{
this.startDrag();
this.swapDepths(_root.getNextHighestDepth());
}
}


If the mouse clicked on this Movie Clip use the function startDrag() to automatically make the mouse drag the Movie Clip and use swapDepths(depth) to get this frame on the top of the others.

Code: Select all
onClipEvent(mouseUp)
{
this.mDown = false;
this.stopDrag();
}


If the mouse was released set mDown to false and use stopDrag() to stop dragging the Movie Clip with the mouse.

Code: Select all
onClipEvent(mouseMove)
{
if(this.hitTest(_root._xmouse, _root._ymouse, true))
{
if(this.mDown)
{


Only run this code if the mouse is down.

Code: Select all
if(Key.isDown(Key.CONTROL))
{
_xscale += _root._xmouse - this.oldMousex;
_yscale += _root._xmouse - this.oldMousex;


Change the scale of this Movie Clip by the difference of the current position of the mouse and the old one.

Code: Select all
this.stopDrag();
}


Stop dragging.

Code: Select all
else if (Key.isDown(Key.SHIFT))
{
_rotation += _root._ymouse - this.oldMousey;


Change the rotation with the mouse movement, just like scaling.

Code: Select all
this.stopDrag();
}


Stop dragging.

Code: Select all
this.oldMousex = _root._xmouse;
this.oldMousey = _root._ymouse;
}
}
}


Set the old position of the mouse to the current position so we can use it on the next mouse movement.

Code: Select all
var images_xml = new XML();
images_xml.ignoreWhite = true;
images_xml.load("images.xml");


Create XML object and load the xml file "images.xml".

Code: Select all
var images_path = new Array();


This array will be the node with all images paths.

Code: Select all
images_xml.onLoad = function()
{
_root.images_path = images_xml.firstChild.childNodes;


Set the array we created previously to the nodes with the images paths.

Code: Select all
_root.Frame.Pic.load(images_path[0].attributes.title);


Load the picture for the Frame Movie Clip we already placed on the stage.

Code: Select all
for (j = 1; j < _root.images_path.length; j++)
{


This for statement will loop the number of paths we have inside "images_path".

Code: Select all
duplicateMovieClip(Frame, "Frame" + j, _root.getNextHighestDepth())


Duplicate the frame Movie Clip.

Code: Select all
var frame = _root["Frame" + j];


var frame = _root["Frame" + i];
The variable "frame" is set to be the Movie Clip we just created, any changes made on the variable "frame" will be done on the Movie Clip as well.

Code: Select all
frame._x = Math.random() * 400 + 20;
frame._y = Math.random() * 20 ? 40;


Set the starting position for the Movie Clip using the "frame" variable. The frame is placed above the screen because we coded the Movie Clip to move to a destination inside the screen.

Code: Select all
frame.imagePath = _root.images_path[j].attributes.title;
}
}


Here we set the "imagePath" variable to the attribute "title" of the node "j" inside the images_path array.
Then the Movie Clip will load the image using this variable.