Help - Resize External Image AS3

[Lusin]

I'm making a small joke flash and I need to know how to resize an external image, keep it's aspect ratio and make it centered in that red box in actionscript. I am able to load the image but that's all I've been able to do. I would love some help with this.

Here is a link to the thing I'm making: http://www.newgrounds.com/dump/item/9aee82f0e7265c197b658f184d415068

Here is the code:

import flash.display.Loader;
import flash.net.FileReference;
import flash.net.FileFilter;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.utils.ByteArray;

var loader:Loader=new Loader()
mc.addChild(loader)

var fr:FileReference=new FileReference()
fr.addEventListener(Event.SELECT,onselect)
fr.addEventListener(Event.COMPLETE,oncomplete)

BrowseButton.addEventListener(MouseEvent.CLICK,onloade);

function onloade(e:MouseEvent)
{
var filefilter:FileFilter=new FileFilter("Images (*.jpg, *.png)", "*.jpg;*.png");
fr.browse([filefilter])
}

function onselect(e:Event)
{
fr.load()
}

function oncomplete(e:Event)
{
var byteArray:ByteArray=e.currentTarget["data"]
loader.loadBytes(byteArray)
}

[Diki]

If you want to shrink an image that is too large to fit inside of the box you'll need to store the image data in a Bitmap so you can actually change its size, such as done in this example.

Simply compare the width and height to the width and height of your red box, and if either exceeds the bounds, change that dimension to fit inside of the box. To do this and maintain the aspect ratio, you simply multiply the new width or height by the height -to-width or width-to-height ratio, respectively. In other words, like this:

// Calculate the aspect ratio.
var widthToHeight:Number = bmp.width / bmp.height ;

// Make the image shorter.
bmp.height = 80;

// Adjust the width to maintain aspect ratio.
bmp.width = bmp.height * widthToHeight;

And to change the width, simply use the height-to-width ratio instead:

// Calculate the aspect ratio.
var heightToWidth:Number = bmp.height / bmp.width;

// Make the image narrower.
bmp.width = 145;

// Adjust the width to maintain aspect ratio.
bmp.height = bmp.width * heightToWidth;

An easy way to remember which ratio to use is to take whichever of the two dimensions you are changing and put that as the denominator. Changing the height? Divide by height. Changing the width? Divide by width.

Then to centre the image after resizing it to fit just translate the bitmap on the x-axis by half the red box's width and then translate negative half the image's width also on the x-axis. The bitmap will likely have a top-left registration point, so translating half the red box's width will put the top-left in the middle, so you need to move half of it to the left so it's centred the way you want.

You can achieve that by actually translating with the object's matrix or simply set the x property to half of the red box's width minus half of the image's width.

[Lusin]

Hey, Diki, thanks so much for helping me out! You are freaking badass, man. Dude, your code worked wonders and got rid of most of the issues, but I don't get what to do on having a large image or how to center it despite your explanation. I tried the actionscript you linked on Snipplr but it is not portable to my thing.

So sorry to bother you and needing to be babied the whole way. I'm really bad at coding but I want to get this done.

http://www.newgrounds.com/dump/item/37e3370287d9be2c7f445461df713e4a

[iXploit]

At 9/22/16 06:46 AM, Lusin wrote: I'm making a small joke flash and I need to know how to resize an external image, keep it's aspect ratio and make it centered in that red box in actionscript. I am able to load the image but that's all I've been able to do. I would love some help with this.

I Believe you can also use this.loader.scaleX , this.loader.scaleY , I Used scale yesterday to scale a game in a loader it worked fine..

[Diki]

At 9/23/16 09:42 PM, Lusin wrote: Hey, Diki, thanks so much for helping me out! You are freaking badass, man. Dude, your code worked wonders and got rid of most of the issues

No problem. Happy to help.

At 9/23/16 09:42 PM, Lusin wrote: but I don't get what to do on having a large image or how to center it despite your explanation. I tried the actionscript you linked on Snipplr but it is not portable to my thing.

What code did you try using to centre the image that isn't working?

At 9/27/16 08:01 AM, TheRealMuerte wrote: I Believe you can also use this.loader.scaleX , this.loader.scaleY , I Used scale yesterday to scale a game in a loader it worked fine..

The scaling properties wouldn't work too well in this instance because the images are being placed inside a fixed-size container, and given the images are of an arbitrary size, it's not immediately known how much the image would need to be scaled to fit inside of the container.

[Lusin]

At 9/23/16 09:42 PM, Lusin wrote: but I don't get what to do on having a large image or how to center it despite your explanation. I tried the actionscript you linked on Snipplr but it is not portable to my thing.

What code did you try using to centre the image that isn't working?

At 9/27/16 08:01 AM, TheRealMuerte wrote: I Believe you can also use this.loader.scaleX , this.loader.scaleY , I Used scale yesterday to scale a game in a loader it worked fine..

The scaling properties wouldn't work too well in this instance because the images are being placed inside a fixed-size container, and given the images are of an arbitrary size, it's not immediately known how much the image would need to be scaled to fit inside of the container.

I've put in more work into my project and it's more complete. Let me explain what it is now that my thing is looking to be actually finished. It's a joke app that is the computer version of the Death Note from the anime, Death Note. It is the kind of thing that anyone can upload a picture of whoever and "kill" them which is why I wanted to have any image uploaded be able to fit within the boundaries of that red box because everyone will use pictures of different resolutions and I want to accommodate that.

You code worked great for images 1000px tall and below, although I could've adjusted it for bigger images but that would have made the smaller ones too small. But when you get to more higher resolutions like a full 1080p pic, the picture goes out of the stage.

Having the picture be centered on top in the red box- I'll take it or leave it. It's first priority to code this to have any image be able to fit. I tried to centering my images using:

mc.x = 360;
mc.y = 65; (This one worked better)

or

mc.x = stage.width/2
mc.y = stage.width/2

But this doesn't work, of course.

Here is little joke project updated:
http://www.newgrounds.com/dump/item/213c891e93b1ef219f9b53a6f4998875

[Diki]

At 9/28/16 07:41 AM, Lusin wrote: But this doesn't work, of course.

Can you post the complete code that you're currently using?

[Lusin]

Can you post the complete code that you're currently using?

Sure, but it hasn't changed much from before.

import flash.display.Loader;
import flash.net.FileReference;
import flash.net.FileFilter;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.utils.ByteArray;

var loader:Loader=new Loader()
mc.addChild(loader)

var fr:FileReference=new FileReference()
fr.addEventListener(Event.SELECT,onselect)
fr.addEventListener(Event.COMPLETE,oncomplete)

BrowseButton.addEventListener(MouseEvent.CLICK,onloade);

function onloade(e:MouseEvent)
{
var filefilter:FileFilter=new FileFilter("Images (*.jpg, *.png)", "*.jpg;*.png");
fr.browse([filefilter])
}

function onselect(e:Event)
{
fr.load()
}

function oncomplete(e:Event)
{
var byteArray:ByteArray=e.currentTarget["data"]
loader.loadBytes(byteArray)
}

// Calculate the aspect ratio.
var widthToHeight:Number = mc.width / mc.height ;

// Make the image shorter.
mc.height = 160;

// Adjust the width to maintain aspect ratio.
mc.width = mc.height * widthToHeight;

// Calculate the aspect ratio.
var heightToWidth:Number = mc.height / mc.width;

// Make the image narrower.
mc.width = 90;

// Adjust the width to maintain aspect ratio.
mc.height = mc.width * heightToWidth;

KillButton.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndPlayAtFrame);

function fl_ClickToGoToAndPlayAtFrame(event:MouseEvent):void
{
gotoAndPlay(4);
}

BackButton.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_2);

function fl_ClickToGoToAndStopAtFrame_2(event:MouseEvent):void
{
gotoAndStop(2);