Sea, Flex & Sun

Pour commencer il faut créer son composant PreLoader et un renderer pour la progress bar. J'utilise donc deux classes trouvées sur le net(je ne sais plus ou), que j'ai un peu modifiée pour obtenir ce que je souhaitais:

• DownLoadingPreloader.as qui est donc mon PreLoader
• CustomProgressBar.as qui est le renderer de la ProgressBar

Pour expliquer (très)rapidement le principe, le PreLoader écoute la progression du chargement de l'application et transmet à la ProgressBar l'état d'avancement.

La partie qui nous intéresse dans cet article est la customisation de la ProgressBar, donc nous allons nous penchez sur le code de la classe CustomProgressBar.as. Voici une version light de la classe:

[actionscript]
package loader
{	
	import ...
        ...

	public class CustomProgressBar extends Loader
	{

		// Constant to change to fit your own layout
		private static var ProgressWidth: int = 200; // Progress bar width
		private static var PictureWidth: int = 18;  // Logo picture width
		private static var LeftMargin: int = 1;      // Left Margin
		private static var RightMargin: int = 2;     // Right Margin
		private static var Spacing: int = 5;        // Spacing between logo and progress bar
		private static var TopMargin: int = 1;       // Top Margin
		private static var BottomMargin: int = 1;    // Bottom Margin
		private static var PictureHeight: int = 18; // Logo picture height
		private static var ProgressHeight: int = 18; // Progress bar height
		
		private static var ProgressBarBackground: uint = 0xFFFFFF;
		private static var progressBarOuterBorder: uint = 0x323232;
		private static var ProgressBarColor: uint = 0xff6600;
		private static var ProgressBarInnerColor: uint = 0xFFFFFF;
			
		public function getWidth(): Number{
			return LeftMargin + PictureWidth + Spacing + ProgressWidth + RightMargin;
		}
		public function getHeight(): Number{
			return TopMargin + PictureHeight + BottomMargin;
		}
		private function drawProgress(): BitmapData{
			// Create the bitmap class object
			var bitmapData: BitmapData = new BitmapData(getWidth(), getHeight(), true, 0);
			
			// Draw the Progress Bar
			var sprite: Sprite = new Sprite();
			var graph: Graphics = sprite.graphics;
			
			// Draw the progress bar background
			graph.beginFill(ProgressBarBackground);
			graph.lineStyle(1, progressBarOuterBorder, 1, true);
			var containerWidth: Number = ProgressWidth;
			var px: int = getWidth() - RightMargin - ProgressWidth;
			var py: int = (getHeight() - ProgressHeight) / 2;
			graph.drawRoundRect(px, py, containerWidth, ProgressHeight, 6);
			containerWidth -= 4;
			var progressWidth: Number = containerWidth * m_Progress / 100;
			graph.beginFill(ProgressBarColor);
			graph.lineStyle(1, ProgressBarInnerColor, 1, true);
			graph.drawRoundRect(px + 2, py + 2, progressWidth, ProgressHeight - 4, 6);
			
			//Construct the Text Field Object and put the progress value in it
			var textField: TextField = new TextField();
			textField.text = m_Progress.toFixed(0)+"%";
			//Create a BitmapData object and take the Width and height of the TextField text.
			var textBitmapData: BitmapData = new BitmapData(textField.textWidth + 5, textField.textHeight);
			//Set the BitmapData object background color to the background color of the progress bar
			textBitmapData.floodFill(0, 0, ProgressBarBackground);
			//Draw the TextFiel object in the BitmapData object
			textBitmapData.draw(textField);
			//Construct the matrix object
			//The matrix object is used to place the text			
			var textBitmapMatrix: Matrix = new Matrix();			
			textBitmapMatrix.translate((px + (containerWidth) / 2)-(textField.textWidth/2), py + (ProgressHeight - textBitmapData.height) / 2);
			
			//Draw the sprite object on the parent BitmapData
			bitmapData.draw(sprite);
			
			//Draw the text on the parent BitmapData 
			bitmapData.draw(textBitmapData, textBitmapMatrix, null, null, null, false);
			
			//Draw the Logo
			bitmapData.draw(Logo.bitmapData, null, null, null, null, true);
			return bitmapData;					
		}			
	}
}

La partie que nous allons observer est la méthode drawProgress(). Concrètement sur notre ProgressBar nous avons un rectangle qui se remplit(Sprite), un texte(TextField) qui affiche le taux de chargement, et un logo(Bitmap). Cette méthode s'occupe donc de tracer chaque élément de la ProgressBar. En analysnat le code vous devriez sans problème comprendre celui-ci( à défaut poster vos questions en commentaires).

Maintenant que nous avons un PreLoader et une ProgressBar, il faut indiquer à notre application qu'elle doit charger avec ces éléments. Pour cela, on utilise la propriété preloader de notre application qui pointe vers le package de notre PreLoader:

[xml]
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	backgroundColor="#62925E"
	viewSourceURL="srcview/index.html"
	creationComplete="init()"
	preloader="loader.DownloadingPreloader">

Voila tout y est! Je vous propose donc de visionner le résultat si le logo vert est affiché cliquez ICI pour recharger l'application (sur le texte "ICI" même si la main synonyme de lien n'apparait pas). Comme d'habitude, les sources sont disponible avec le click droit!