Wednesday, November 13, 2013

Thumbnail image pop up [Actionscript 3]

 
  • Open Flash and create new movieclips like in the below screenshot for each and every thumbnail image and give instance names a1, a2,......


  • Let's consider image grid with 16 images (4x4). so instance names are a1, a2, a3, ..., a16
  • Logic is, when the time passing for a specific time delay scale of a selected image increases gradually and then decreases. Then randomly another image selected and do the same and this process continues as a loop
  • Try to build up you own script to the logic.Mine is posted below with comments
<code>

import flash.utils.Timer;
import flash.events.TimerEvent;

var i=0;
var timer:Timer = new Timer(10,100);
var randomNum;
var img;
var prev;


/* assigning variables
          i                   : To count the the time passing
          randomNum : for the random number selected
          img               : for the instance name of image selected
          prev              : for the previous image number

*/


function bringToFront(mc:MovieClip){
        mc.parent.setChildIndex(mc,mc.parent.numChildren-1);
    }

//above function makes the selected image to be arraged to the front

timer.addEventListener(TimerEvent.TIMER,function(){
                       i++; //count the time passing
                       if(i==1){
                           randomNum = Math.floor(Math.random() * 16) + 1;
                           img = getChildByName("a"+randomNum);
                           bringToFront(img);

 /*
      when i becomes 1 it select a random number between 1 & 16 .
      then select the movieClip with instance name having that number.
      calling bringToFront function in order to do its meaning :D

 */
                          
                           if(prev==randomNum){
                               randomNum +=1;
                               img = getChildByName("a"+randomNum);
                               bringToFront(img);

 /*
       To stop the same image popping out twice consecutively. randomNum+=1
        forces to select the next image.
        bringToFront is called to do its meaning
                              
 */

                             
                           }
                           
                       }

                   
 // Animation part. just scaling the selected image
                      
                       if(i<25 && i>2){
                           img.width+=2;
                           img.height+=2;
                       }
                       if(i<99 && i>76){
                           img.width-=2;
                           img.height-=2;
                          

                           prev = randomNum;
 // Finally assigning selected image number to the prev img when it about to over
                       }
                       });
                      

timer.start();
//First popup starts while declaring timer to start
                   
/*
    In order to loop the animation we add declare a function on stage
    when i=100 first pop up ends. for looping process of the popups we reset the timer and the set it again
    since selection of random number starts when i=1 we reset 1 = 0 ,so 1 will added to  i in function for   

    timer.
*/  

stage.addEventListener(Event.ENTER_FRAME, function (){
                       if(i==100){
                           i=0;
                           timer.reset();
                           timer.start();
                       }
                       });
</code>
Note : Detailed descriptions about functions used here, timer event and Math.random will be discussed in another post.

No comments:

Post a Comment