Carousel image viewer - inside view

This page reveals the implementation secrets of the image carousel application in Flash Lite 2.0.  

How to create dynamically place holders for pictures your are going to load flash?

      
       for (i=1; i<=num; i++) {      
           // Create place holders on the stage from library component "square" 
           attachMovie("square", "sq"+i+"_mc",-i);         
           ... 
           // Code below will position newly created placeholders into the correct
           // screen locations
           ...
      }

How to load images in placeholde r?

Problem: there is code in the place holder that is responsible for the movement of the piece. In case if we use a call to loadMovie of the MovieClip object then graphics and action script are overwritten and object loses ability to move by itself.

Here is one possible solution, but it does not work in our case:

		  _root["sq"+i+"_mc"].loadMovie("http://www.diamondesign.net/flash/images/"+itemimage[i]);

To keep the Action Script save even after loading of new graphics we have to use a middle man that is taking care of loading the image and preserving the associated scripts. It is object MovieClipLoader. Images are loaded using the following code in the sample.

c_mc = _root["sq"+currentPicture+"_mc"].sqi;
mcLoader = new MovieClipLoader();
mcLoader.loadClip("http://www.diamondesign.net/flash/images/"+itemimage[currentPicture-1], c_mc);

How to load many images?

Current development version of the Flash Lite 2.0 engine (March, 2006) does not al low to load more than 5 images at the same time. It has limited amount of simultaneously allowed network connections to 5. Please do not start multiple simultaneous download. Do it one by one. Downloading one image at a time allows to overcome limitation flash lite 2.0 player and improve user experience since images appear faster (bandwidth is not divided between sever al downloads)

//
// Load one (current) image and activate next download on completion
// 
function loadOnePicture() 
{    
	c_mc = _root["sq"+currentPicture+"_mc"].sqi; //         Placeholder 
	mcLoader = new MovieClipLoader(); 
	// Initiate download 
	mcLoader.loadClip("http://www.diamondesign.net/flash/images/"+itemimage[currentPicture-1], c_mc); 
	mcLoader.onLoadComplete = function() // On current DL completion start next download 
	{ 
       currentPicture++; // index in the array with names of images 
       if( currentPicture <= num ) 
	   { 
       		loadOnePicture(); 
    	} 
    } 
} 

This is the way to start downloading of all pictures:

loadAll(); // call that starts downloading
function loadAll()
{
	// set the current picture index to 1 and initiate download chain
	currentPicture = 1;
	loadOnePicture();
}

How to rotate carousel?

In the loop I move current piece into the position of the previous. That is x and y coordinates of the current piece are assigned the values of x and y of previous piece. Of course we have to save position of the current piece so that we can assign that later to the next piece.

How to calculate positions of the picture frames?

Well... some math knowledge required. Picture frames are distributed evenly along the circle. That is the angle between nearby picture frames is al ways the same - alfa.

_root["sq"+i+"_mc"]._y = (-60*Math.sin((Math.PI*3/2)+((Math.PI/(180/ alfa))*(i-1))))+61;

_root["sq"+i+"_mc"]._x = (60*Math.cos((Math.PI*3/2)+((Math.PI/(180/ al fa))*(i-1))))+90-(_root["sq"+i+"_mc"]._width/2);