as3.0 Stacked Photos (tweener applications)

This example of learning, should be able to master the basic use of tweener. To use this class, you need to download the source code:
Download Address: Http://code.google.com/p/tweener/downloads/list
Here are a few versions, I use the AS3, so down: tweener_1_33_74_as3.zip
After downloading, decompression will produce a folder called: Caurina.
Remember to put your FLA file in the same directory as the Caurina folder.
Well, now that we've got tweener, we'll do the album.
First, build a flash as3.0 document.
If you want a picture to do the background, you can import a picture, put it on the stage, as the background layer, and then lock the layer.
Insert a new layer, at this level we will put our photos in. Picture to resize, width of the stage about half, put the photo on the left side of the stage. Let's make some modifications to the photos. Point, convert it to a movie clip, and the registration point is transferred to a central location. Double-click it, go to the edit window, create a new layer underneath the photo layer, and use a white-filled rectangle to draw a larger rectangle than the photo, which in effect adds a white edge to the photo. Back to the main scene, click the photo symbol, open the properties > Filter panel, add a glow filter to it, color black, and a value of 10. This adds a shadow to the picture. Next, take an instance name for the photo symbol in the property panel: Photo1.
The following thing is, the second photo, the same practice, the instance name is: Photo2
Next, the 3rd, the 4th ..., the instance name: Photo3,photo4 .....
OK, start writing code, a new layer, according to the custom, the name of this layer should be: action, you can also call it John, Dick, Wang. Perhaps you call it watermelon may be very creative.
Open the Frame action panel and write code: (There will be complete code later)
First, you need to import the Tweener class:
Import caurina.transitions.*;
Next, declare some variables, followed by:
var photooriginx:number = photo1.x; The original location of the photo and set it to the location of the 1th photo. When the photo is clicked, it moves to the right and then back to the position.
var photodestx:number = Photooriginx + 200; This is where the photo moves to the right, and it moves 200 pixels to the right, based on the original position.
var speed:number =. 5; This is the time required for the move to be set for 0.5 seconds.
var rotationrange:number = 10; This is the limit of the angle of the photo rotation.
var photocount:number = 3; The number of photos, I only used 3 photos, so set to 3, you have a few photos, here set to a few.
var easetype:string = "Easeoutquad";//This is the type of easing, and tweener has many easing types. The following figure:

As we can see from the image above, we use the following: Easeoutquad

As you can see from the diagram, the effect is that the start is faster, and at the end, the slowest move.
Next is a function that, when clicked, moves the picture to the right:

code is as follows	copy code
function Photoslideout (e:event): void { E.target.parent.setchildindex (e.target, e.target.parent.numchildren-1); Tweener.addtween (E.target, {x:photodestx, time:speed, Transition:easetype, Oncomplete:photoslidein, Oncompleteparams:[e.target]}); Tweener.addtween (E.target, {Rotation:Math.floor (Math.random () * (rotationrange*2))-rotationrange, time:speed*2 , transition:easetype}); }

The 1th sentence in the above function is to move the clicked photo to the top. The 2nd sentence of the
is moving the picture. The
Tweener Addtween method produces a tween effect.
Addtween method:
1th parameter: E.target is the object to which the tween is to be applied, and here is the picture being clicked.
The 2nd argument: X is the object's property, here is the object's X property, and you can change any other value of the object.
3rd parameter: PHOTODESTX is the value of this property value changed, here is the X is changed to PHOTODESTX, that is, the clicked photo, the X property was shifted to the right 200 pixels.
The 4th argument: time is the number of times it takes to change this value.
5th parameter: Transition is a type of easing.
6th parameter: OnComplete is the function to execute when this tween is completed, where the Photoslidein function is called after the move is completed, so that the photo is moved back to its original place.
7th parameter: Oncompleteparams is the argument passed to the function called by OnComplete. Here the clicked image is passed to the Photoslidein function.
Summary: The basic usage of Tweener:
Tweener.addtween (the object to be applied to the tween, {property: The changed value, time: The required times}),
The 3rd sentence of the function above, again applying Tweener, This time it produces a 10-to-10 rotation of the tweened action.
Next, the Photoslidein function:

The code is as follows	Copy Code
function Photoslidein (p:movieclip) { P.parent.setchildindex (P, 1); Tweener.addtween (p, {x:photooriginx, time:speed, transition:easetype}); }

This function first sets the index number of the photo to 1, puts it on the bottom level, and then uses Tweener to move the photo back to its original position.
The next two sentences are relatively simple:

The code is as follows	Copy Code
for (var i=1; i<=photocount; i++) { this["Photo" +i].addeventlistener (Mouseevent.mouse_down, photoslideout); this["Photo" +i].rotation = Math.floor (Math.random () * (rotationrange*2))-rotationrange; }

Let all the pictures listen to the Click event and call the Photoslideout function.
Causes all pictures to have a rotation from 10 to 10 angles.
So much for the code, just try it.
Complete code:

The code is as follows

Copy Code

Import caurina.transitions.*; var photooriginx:number = photo1.x; var photodestx:number = Photooriginx + 200; var speed:number =. 5; var rotationrange:number = 10; var photocount:number = 3; var easetype:string = "Easeoutquad"; function Photoslideout (e:event): void { E.target.parent.setchildindex (E.target, e.target.parent.numchildren-1); Tweener.addtween (E.target, {x:photodestx, time:speed, Transition:easetype, Oncomplete:photoslidein, Oncompleteparams:[e.target]}); Tweener.addtween (E.target, {Rotation:Math.floor (Math.random () * (rotationrange*2))-rotationrange, Time:speed*2, Transition:easetype}); } function Photoslidein (p:movieclip) { P.parent.setchildindex (P, 1); Tweener.addtween (p, {x:photooriginx, time:speed, transition:easetype}); } for (var i=1; i<=photocount; i++) { this["Photo" +i].addeventlistener (Mouseevent.mouse_down, photoslideout); this["Photo" +i].rotation = Math.floor (Math.random () * (rotationrange*2))-rotationrange; }