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 KAMALELDINE

Now 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 ;)