Friday, January 2, 2009

Create a simple ImageViewer Class in AS3.0



Step1
Check your class requirement. It should load a given URL image and add a self preloader for that image. Basically we these have two tasks here.

Step2
we will start with our first task. We will need a loader object to load the image. so

public function ImageViewer(myURL:String)
{
imageLoader = new Loader();
imageLoader.load(new URLRequest(myURL));
}

Most probably the above method takes a parameter URL and loads it in a Loader Object. We can see it is a constructor function having the same name as class. Since the image size may vary to large size so we should add it to stage only when it is loaded. We need to addEventListener to track if the image has completly loaded.

imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);

Above code provides us with the image loaded status. Similiarly we can also add a PROGRESS event to create our preloader along with loaded image. To add both the loaded image and a preloader display text we will need a container which can have both these objects. So we can create an instance of the MovieClip class and then add the loaded image and preloader together in it. Finally our class will look as below.

File name : ImageViewer

package com.gen{
import flash.display.Loader;
import flash.display.MovieClip;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.text.TextField;
public class ImageViewer extends MovieClip{
private var imageLoader:Loader;
private var progressText:TextField;
private var containerMC:MovieClip;
public function ImageViewer(myURL:String)
{
imageLoader = new Loader();
containerMC = new MovieClip();
progressText = new TextField();
addChild(containerMC);
containerMC.addChild(progressText);
imageLoader.load(new URLRequest(myURL));
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
}
public function imageLoaded(e:Event)
{
containerMC.removeChild(progressText);
containerMC.addChild(imageLoader)
}
public function progressHandler(e:ProgressEvent)
{
var loadP = (imageLoader.contentLoaderInfo.bytesLoaded/imageLoader.contentLoaderInfo.bytesTotal)*100;
progressText.text = "Loaded "+Math.floor(loadP) + "%";
}
}
}

You can change the package name to whatever you like. Now in your flash file u just need to create the instance of this class and pass the URL. Finally add it to stage as below.

import com.gen.*;
var viewer:ImageViewer = new ImageViewer("chat.jpg");
addChild(viewer);

You need to import the class to let the flash compiler know about your class declaration. When you run the file you get your imahe dispayed on stage.

Link to Class

No comments:

Using FormBuilder, Validators & FormGroup in Angular 2 to post data to Node server (node.js)

This blog explains usage of  FormBuilder , Validators , FormGroup classes in Angular 2 projects. In this post we will create HTML form a...