Archived:Simultaneously loading multiple images in Flash Lite
We do not recommend Flash Lite development on current Nokia devices, and all Flash Lite articles on this wiki have been archived. Flash Lite has been removed from all Nokia Asha and recent Series 40 devices and has limited support on Symbian. Specific information for Nokia Belle is available in Flash Lite on Nokia Browser for Symbian. Specific information for OLD Series 40 and Symbian devices is available in the Flash Lite Developers Library.
Article Metadata
Code Example
Article
Contents |
Introduction
From Flash Lite 2 onwards, loading of external data is supported. Flash Lite applications can load external data such as image/sound/video/XML file. Loading of external data is achieved using a URL request. But there is a limitation on number of URL calls executed with-in a frames time. Maximum number of URL calls executed within a frames time again vary from device to device.
Problem
Normally maximum of 5 URL calls can be made simultaneously. In case you try lo load more than 5 images simultaneously you get the following error message:
‘FTPS031: Too many instances of URL Request calls found, see device browser for maximum count allowed per frame’
So the URL requests after this count are not entertained and the images won’t be loaded.
Solution
We often come across requirement where we have to load more than 5 images simultaneously. But as Flash Lite does not support making simultaneous URL calls, we have to use a workaround for that. What we would be doing is, storing the info about the images to load, in an array and will load the images with an interval gap of around 500 milliseconds. A working example below will clarify the concept.
Source
Define Variables
Two arrays are created which hold the URLs of the images to be loaded and the Movieclip reference respectively. The array named ‘aImagesToLoad’ holds the URLs of the images and the array named ‘aImagesLoadBaseMC’ holds the references of movieclips to load the images. A variable named ‘nIntervalDuration’ is used to store the interval gap in milliseconds.
var aImagesToLoad:Array = new Array("Image_1.jpg", "Image_2.jpg", "Image_3.jpg", "Image_4.jpg", "Image_5.jpg", "Image_6.jpg", "Image_7.jpg", "Image_8.jpg", "Image_9.jpg");
var aImagesLoadBaseMC:Array = new Array("mcImagePreview_1.mcImagePreviewLoader", "mcImagePreview_2.mcImagePreviewLoader", "mcImagePreview_3.mcImagePreviewLoader", "mcImagePreview_4.mcImagePreviewLoader", "mcImagePreview_5.mcImagePreviewLoader", "mcImagePreview_6.mcImagePreviewLoader", "mcImagePreview_7.mcImagePreviewLoader", "mcImagePreview_8.mcImagePreviewLoader", "mcImagePreview_9.mcImagePreviewLoader");
var nIntervalDuration:Number = 0;
Define Loading Function
When the images are to be loaded, the function named ‘fnStartLoadingImges’ should be called. This function will reverse the arrays so that when we pop up the items, they will be in sequence required.
Rather than loading all the images simultaneously, we will call a function at some regular interval. The function in turn will iterate through the array and will load only one image at a time. This way the Flash Lite will not generate any error like ‘FTPS031’. The amount of time gap between two successive loadings can be changed by the variable named ‘nIntervalDuration’.
function fnStartLoadingImges() {
aImagesToLoad.reverse();
aImagesLoadBaseMC.reverse();
_root.nIntervalIDStartLoading = setInterval(fnLoadIndividualImage, nIntervalDuration);
}
Define Individual Loading
Get the Loading Information
As stated this function will load only one image at a time, and is being called after some time interval. This function will pop the item from the arrays and will get the URL of the image and the reference movieclip base.
var aImageURL = aImagesToLoad.pop();
var aImageLoadBase = aImagesLoadBaseMC.pop();
Use the Movieclip loader
Using the available MovieClip loader will ease the loading process. Using MovieClip loader facilitates defining the event handlers for completion of loading and error in loading.
var objClipLoader:MovieClipLoader = new MovieClipLoader();
objClipLoader.addListener(objLoader);
objClipLoader.loadClip(aImageURL,aImageLoadBase);
Resizing image maintaining Aspect ratio
The images loaded will have different sizes than the movieclip to load in. Before resizing the image it is necessary to get the aspect ratio of the original image. This will help to resize the image to fit in the allowed dimensions even maintaining the aspect ratio.
//Code To Maintain the ASPECT ratio
var nMaxWidth:Number = 50;
var nMaxHeight:Number = 50;
var NewWidth, NewHeight, WidthPer, HeightPer:Number;
if (target_mc._width>target_mc._height) {
NewWidth = nMaxWidth;
WidthPer = nMaxWidth/target_mc._width;
NewHeight = target_mc._height*WidthPer;
} else {
NewHeight = nMaxHeight;
HeightPer = nMaxHeight/target_mc._height;
NewWidth = target_mc._width*HeightPer;
}
target_mc._width = NewWidth;
target_mc._height = NewHeight;
target_mc._x = (nMaxWidth-target_mc._width)/2;
target_mc._y = (nMaxHeight-target_mc._height)/2;
//Code To Maintain the ASPECT ratio
Complete Function Defination
Putting together the substeps, the complete function will look like this one.
function fnLoadIndividualImage() {
if (aImagesToLoad.length>0) {
var aImageURL = aImagesToLoad.pop();
var aImageLoadBase = aImagesLoadBaseMC.pop();
var objLoader:Object = new Object();
objLoader.onLoadInit = function(target_mc:MovieClip) {
target_mc._parent.mcImagePreviewPreLoader._visible = false;
//Code To Maintain the ASPECT ratio
var nMaxWidth:Number = 50;
var nMaxHeight:Number = 50;
var NewWidth, NewHeight, WidthPer, HeightPer:Number;
if (target_mc._width>target_mc._height) {
NewWidth = nMaxWidth;
WidthPer = nMaxWidth/target_mc._width;
NewHeight = target_mc._height*WidthPer;
} else {
NewHeight = nMaxHeight;
HeightPer = nMaxHeight/target_mc._height;
NewWidth = target_mc._width*HeightPer;
}
target_mc._width = NewWidth;
target_mc._height = NewHeight;
target_mc._x = (nMaxWidth-target_mc._width)/2;
target_mc._y = (nMaxHeight-target_mc._height)/2;
//Code To Maintain the ASPECT ratio
};
objLoader.onLoadError = function(target_mc:MovieClip, errorCode:String) {
trace("errorCode:: "+errorCode);
target_mc._parent.mcImagePreviewPreLoader._visible = false;
};
var objClipLoader:MovieClipLoader = new MovieClipLoader();
objClipLoader.addListener(objLoader);
objClipLoader.loadClip(aImageURL,aImageLoadBase);
} else {
clearInterval(_root.nIntervalIDStartLoading);
}
}
Download
The complete source code is available here:Media:LoadingImagesFlashLite.zip
Please make sure to add the images with the names in the aImagesToLoad array at the same location.
the code to maintain aspect ratio should look like this (little)
... maxX=50; maxY=50; if(this._width/this._height>maxX/maxY)//// the > could be < , I dont know, to late to think about
else
this._width/=k; this._height/=k; ...