Movable XML Image Gallery
| Category | : Flash | Views | : 29639 | ||
| Version | : 8 | Rating | : | ||
| Type | : Text | Source File | : movable-xml-image-gallery.zip | ||
| Result | : See the result | ||||
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:
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.
![]() |
![]() |
![]() |
![]() |
![]() |




