Full lifecycle Madness (Part 2)

In part 1 of this post we were given a project, we defined it, scoped it, allocated resources, talked to the client, planned the work and created a simple development environment. Now we start hacking.

Here we go, part 2, and on time still, development directory locally and on server, version 1 of the swf is up and functioning in a centred deployment. Next, we are going to do a load from local file server to the web browser, this means using a button to browse for images which activates a filereference.load. The result (data) of the load is going to be a byteArray (Note: This is a localised operation, nothing is on the server at this point, we haven’t uploaded anything) containing the image data.

var ImageRef:FileReference;

function StartImageLoad() {

ub.addEventListener(MouseEvent.CLICK, ImbrowseHandler);

ImageRef = new FileReference();
ImageRef.addEventListener(Event.SELECT, IMselectHandler);
ImageRef.addEventListener(ProgressEvent.PROGRESS,IMprogressHandler);
ImageRef.addEventListener(Event.COMPLETE, ImcompleteHandler);
}
function ImbrowseHandler(event:MouseEvent):void {
ub.removeEventListener(MouseEvent.CLICK, ImbrowseHandler);
ImageRef.browse(ImgetTypes());
}

function ImgetTypes():Array {
var allTypes:Array=new Array(getImageTypeFilter());
return allTypes;
}
function getImageTypeFilter():FileFilter {
return new FileFilter("Images", "*.jpg;*.gif;*.png");
}

var newImageEnd:String;

function IMselectHandler(event:Event):void {
ImageRef.load();
}

function IMprogressHandler(event:ProgressEvent):void {
var up1:int=int(Math.floor(event.bytesLoaded/1024));
var up2:int=int(Math.floor(event.bytesTotal/1024));
trace("file uploading - "+up1+" / "+up2+" KB");

}

function ImcompleteHandler(event:Event):void {
trace("File was successfully loaded.");
doneLoad();
}

Next, we need a loader to convert the image data into a bitmapData object and then to a bitmap and to the screen inside a holder. Actually, lets make that a holder in a holder in a holder. One holder for the lot (tip: this is really useful when you want to add a component movieclip to another project, or if you want to make the layout liquid, never ever code UI to the root, always encase.) So, we will have a main holder for everything, then a holder for the final image, inside which we have a holder for the loaded image (more on this later, but basically we will want options inside the top holder like texts, background colour etc) and a button of course. We are going to use the loadBytes method of the loader to bring in the byteArray, and set an event listener to tell us when this has completed.

Now the content of the loader is in reality a bitmapdata object, it just doesnt know that yet, so we create one and pass the information into it. Finally, we have our bitmap, remember that this is still all working locally and we have the original size of the picture, so we now need to resize this and position it on the screen inside our holder.

var my_loader:Loader = new Loader();

function doneLoad():void {
my_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, getBitmapData);
my_loader.loadBytes(ImageRef.data);
}

var image:Bitmap;
var BMPData:BitmapData;

function getBitmapData(ee:Event) {
var Lcontent:* =my_loader.content;
BMPData=new BitmapData(Lcontent.width,Lcontent.height);
BMPData.draw(Lcontent);
trace(Lcontent.width+" "+Lcontent.height);
image=new Bitmap(BMPData);
resizeandPlace();
}

Resizing a picture to fit a space can be done in two ways, either you decide to stretch to fit or you will have to max either the height or width to fit (and optionally centre) Stretch only works if you know the aspect ratio will be the same or very close. If this isn’t the case, we have to re-scale the image and that means finding the optimal scaling factor. To do this we need to first look at the aspect ratio of the image versus the frame, which just means is it longer in the height or the width. In your mind visualise the space the image will be going into then the image and now slowly reduce the scale of the image until it fits either exactly to the height or exactly to the width.

function resizeandPlace() {

var mcW:Number=image.width;
var mcH:Number=image.height;

var basex:Number=0;
var basey:Number=0;

var basewid:Number=pt.width-2;
var basehgt:Number=pt.height-2;

var f1:Number=Math.floor(100*mcH/basehgt)/100;
var f2:Number=Math.floor(100*mcW/basewid)/100;

var f3:Number;
var f41:Number;
var f42:Number;

var tNx:Number;
var tNy:Number;

var newScale:Number=1;

if (f1>=f2) {
f3=1/f1;
image.scaleY=image.scaleX=f3/1;
f41 =(basehgt-(f3*mcH))/2;
f42 =(basewid-(f3*mcW))/2;

} else {

f3=1/f2;
image.scaleY=image.scaleX=f3/1;
f41 =(basehgt-(f3*mcH))/2;
f42 =(basewid-(f3*mcW))/2;

}

image.y=basey+f41+1;
image.x=basex+f42+1;

this.pt.pp.addChild(image);
}

This code does the biz. If you want to understand it, try it on paper and figure out what it’s doing. So, we now have about 50% of the functionality, so we will stop part 2 here. In the next section I will add the functionality to resize and move the image about and also add background colour. After that we need to work out how to make an actual image from flash data with PHP.

This entry was posted in AS3, Flash and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>