- Home
- Tutorials
- Flash
- Intermediate
- AS3 Photo Viewer Tutorial
AS3 Photo Viewer Tutorial

Transition Function
Amen KAMALELDINE
Amen is an industrial informatics engineer. he studied the first four years of his education in Faculty of Engineering in Lebanon. He went to France to Continue his studies by doing the fifth year of engineering and the master TIS (Technologie Information et Système) in the same time at UTC (Université de Technologie de Compiègne). He also work as a freelancer in flash development field. He is always interessted in the new multimedia technologies.
View all articles by Amen KAMALELDINENow we assign to the holder of all the images an ON_ENTERFRAME event and in it we perform some calculation to update the holder and the imgHolder postion and scale to have a nice transition between the images.
Code
private function dispatchOnEnterFrame(e){
//if the diffrence=0 do nothing
if(diffX==0)return;
//else update the sliding of our image holder with easing
imgHolder.x+=(finalX-imgHolder.x)/6;
//and also update the current X aside but with a greater easing coef to have some retard in time
//between the 2 transition
cX+=(finalX-cX)/12;
//generate a percentage
var per=100*(1-(finalX-cX)/diffX);
//and ease the current percentage depending on the current generated percentage
//this will assure the smoothing and the continus animation
percentage+=(per-percentage)/12;
//update the scaling to have the zoom in out effect
holder.scaleX=1-(.5)*Math.sin(Math.PI*percentage/100);
holder.scaleY=1-(.5)*Math.sin(Math.PI*percentage/100);
}
first of all if the difference between the selected image and the position of the imgHolder which is a child of the holder and contain the images IS Zero then do nothing. else we perform the easing Out equation on the imgHolder we also do the same think on a fake variable called cX the current is but with a greater coef to have the same result but in a slower time after this we calculate the percentage in an easing Out equation too, so we never have a discontinuty in our transition and at the end we update the scale wich goes between 1 if the percentage is 0 or 100 and min .5 if the precentage is 50.
all the rest in the class of our movie is some basic stuff like the drawing of the background function and the ON_CLICK event of the menuItems. If you have any questions regarding this please go to the forums.
Thanks for reading, the files are attached below. Have fun ;)
Spread The Word
Attachments
22 Responses to "AS3 Photo Viewer Tutorial" 
|
said this on 26 Mar 2008 6:44:30 PM CST
Leaving an ENTER_FRAME li
private function d //if the diff if holder.removeEventLi return; } //else update the sli imgHolder //and also //between cX+ //generate a percenta var per=100*(1 //and ease th //th percentage+= //update the scaling holder.scaleX= holder.scaleY= } |
|
said this on 10 Apr 2010 8:39:29 AM CST
Hi, would you mind tellin
thanks T |
|
said this on 29 Aug 2008 2:56:21 PM CST
Hey. I kinda new to AS3,
|
|
said this on 01 Sep 2008 9:14:29 PM CST
Andre, Hey. Download the
Go |
|
said this on 12 Oct 2008 9:23:24 AM CST
Excellent tutorial.
I'm - remove the the 1- - show the pi re But (if i don |
|
said this on 12 Nov 2008 11:17:27 AM CST
This is a great tutorial.
|
|
said this on 21 Mar 2009 2:26:54 PM CST
You don't have to invoke
|
|
said this on 19 Aug 2009 12:31:58 PM CST
Im also new to AS3 and i
|
|
said this on 20 Nov 2008 5:50:07 PM CST
I have adapted parts of y
Ken |
|
said this on 05 Dec 2008 8:42:13 PM CST
hi,
I'm also new to th Ho Thanks!!! |
|
said this on 08 Dec 2008 11:35:09 PM CST
Great transition effects!
impo impo var rect:Shape = new Sh rect.graphics.be rect rect.grap addChil var ld ldr.mask = rect; var var urlReq:URLRe ldr.load(urlReq); The er Thanks. |
|
said this on 14 May 2009 7:57:08 AM CST
Hi,
The problem is tha |
|
said this on 01 Dec 2009 9:06:11 PM CST
check this out. the #1099
the flyingbuddh publi // listen out for addEventListener(Eve } private functio // you can now work wi stage. stage.a stage.addEventLi // Check out the link if th Ame |
|
said this on 20 Jan 2009 12:07:51 AM CST
Love this tutorial as soo
just have one I would really apprecia |
|
said this on 04 May 2009 7:04:55 PM CST
Love the app
Does anyone |
|
said this on 10 Jul 2009 5:47:48 AM CST
thanks man..great job.. i
|
|
said this on 05 Aug 2009 3:03:08 PM CST
When I open the fla or sw
|
|
said this on 20 Aug 2009 6:32:20 PM CST
Hi, I am totally new to A
package AS { public class Pho { Class def } } class ImageContainer e { } Errors: 1. Packages 2. Cla |
|
said this on 31 Aug 2009 7:11:37 AM CST
How can i change the stag
Thank yo Best, |
|
said this on 10 Apr 2010 10:36:56 AM CST
Hi there,
i have two mor Is there an 2.) ho |
|
said this on 23 Apr 2010 3:03:44 PM CST
I hate tutorials like thi
|
|
said this on 30 Nov 2010 3:05:01 AM CST
can i get the source file
|


Author/Admin)