Movable XML Image Gallery

Category : Flash Views : 29639
Version : 8 Rating
3.1/5 (46 votes)
Type : Text Source File: movable-xml-image-gallery.zip
Result: See the result


Previous | 1 | 2 | 3 | 4 | 5 | 6 | Next

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.


del.icio.us digg it Reddit Stumble Upon Technorati

Previous | 1 | 2 | 3 | 4 | 5 | 6 | Next




Supporters

Reseller Web Hosting