Of course our slide show still needs a lot of improvements and one of them is dynamic resizing. We should be able to re size the pictures we load in while still keeping a good resolution quality. We should also be able to do this no matter what the size of the swf is. So let’s get started on this. We’ll create first a simple resizing function that will re size and position our pictures according to the stage dimensions.

This new function takes our picture, the stage width and height as argument and then returns the picture resized and repositioned correctly.

[as]private function resize_picture(target:DisplayObject, Width:Number, Height:Number):DisplayObject{ var ratio:Number = target.width/target.height;//get the ratio, if width is bigger than height //then ratio is greater than 1, else ratio is smaller than 1 target.height = Height;//set the picture height to the stage height directly target.width = target.height*ratio;//apply the ratio so we keep the proportion (multiply) if(target.width>Width){//now we resized according to the height but is our picture width to large? target.width = Width;//if yes then resize it now according to the width target.height = target.width/ratio;//apply the ratio to the height (divide) } target.x = Width/2-target.width/2;//position according to left top corner target.y = Height/2-target.height/2;//position according to left top corner return target;//return the picture }[/as]

Quite straight forward, now we just need to add a line in our document class. We create a local variable and pass it the resized picture, then we add that to the display list:

[as]var target:DisplayObject = resize_picture(time_manager.picture, stage.stageWidth, stage.stageHeight); picture_holder.addChild(target); [/as] That works perfectly, you can even set the stage size to anything you want and the pictures will still be re sized and positioned correctly.

can the swf resizes itself?

Sure it can, we are actually all set already for that, all we need is set the stage scale mode to “noscale” and we will be able to set our slide show to any size with still the pictures resizing correctly. Let’s do just that now, add this to our constructor:

[as]stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT;[/as]

Now open your html file where the slide show is embedded and set different size for the slide show, you’ll see the pictures always fit as much as they can the display size!

When we re size our pictures, we expand or squeeze the pixels depending on the picture size and this might result sometimes on a loss of quality, what we really need to do is create a re sized copy of the picture we load with the right amount of pixels in it. Also the BitmapData class (this is what we’ll use) allows use to smooth the result improving even more the final result quality. So let’s modify our re size function so instead of just resizing it will create a re sized copy of the picture:

[as]private function resize_picture(target:DisplayObject, Width:Number, Height:Number):DisplayObject{ if(Width/Height == Infinity){//if you set the slide show to 0 width and //0 height then instead of crashing the swf it will just return the //picture as it is return target; } var ratio:Number = target.width/target.height; var targetHeight:Number = Height;//now instead of setting the picture //size we calculate what the size should be with two new variables. var targetWidth:Number = targetHeight*ratio; if(targetWidth>Width){ targetWidth = Width; targetHeight = targetWidth/ratio; } var bmp:BitmapData = new BitmapData(targetWidth, targetHeight); //create a bitmapData and pass it the size that the picture should be var matrix:Matrix = new Matrix();//create a matrix that we'll use to scale the picture matrix.scale((targetWidth/target.width), (targetHeight/target.height));//set the scale for the matrix bmp.draw(target,matrix,null,null,null,true); //draw our bitmapData //using our matrix and see at the end "true" used to smooth the picture var bitmap:Bitmap = new Bitmap(bmp);//create a bitmap and pass it our resized bitmapData bitmap.x = Width/2-bitmap.width/2;//set the bitmap position bitmap.y = Height/2-bitmap.height/2;//set the bitmap position return bitmap;//return the bitmap } [/as]
Perfect now not only the pictures are perfectly re sized but they will also keep a good resolution quality. So now the user can use pictures with any size for the slide show and the picture will be automatically re sized to fit as much as possible the screen no matter what the screen size is. We can now just add this function into our TimeManager class. Next time we will explore adding options for the user!