×
Namespaces

Variants
Actions

Archived:Simultaneously loading multiple images in Flash Lite

From Nokia Developer Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

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 ExampleArticle
Created: sangramp (16 Mar 2009)
Last edited: hamishwillee (14 May 2013)

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.

This page was last modified on 14 May 2013, at 09:02.
53 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×