Here's one for the maths demons out there!
I have an as3 app that loads SWF's with various movie clips inside with a size of 1280 width and 720 height. I would like to fit these SWFs into a content box of height 885 width by 500 height. The SWF must keep a ratio of 1.77. This would be easy if as3 recognised the SWF being 1280 height by 720 width. It doesn't however, and takes the size of the movie clips inside the swf which varies (as long as it's within the original size boundaries).
Does anyone know how I can make the SWF's fit into the content box even if the movie clip sizes and therefore the original SWF sizes vary?
Thanks
If you know the original size and it will always be the same then you can just set the scale manually based on the ratio between the original size and the target size.
885 / 1280 = .69140625
500 / 720 = .694444444
so you can just do:
mySwf.scaleX = mySwf.scaleY = .69;
And it should be scaled properly.
Related
I have my stage aligned to TOP_LEFT and scaled to StageScaleMode.NO_BORDER, the width and height of my SWF are : width = 1920 and height = 1080.
The thing is when my i change the SWF size to bigger (height/width) the movieClips on the stage scale up and that's a good thing for me, but when i reduce the size of my SWF to smaller values (smaller than the default size), the movieClips get reduced as well, aren't they supposed to stay the same, if not is there a way to make that happen ?
In fact the NO_BORDER scaleMode makes sure to not show the borders of the SWF and scale the center depending on the :
The ratios :
widthRatio = currentStageWidth/stageWidth
and
heightRatio = currentStageHeight/stageHeight.
The stageWidth and stageHeight are provided by AS3.
The currentStageWidth and currentStageHeight are supposed to be changing while resizing the browser window, the can be retrieved from the Flash Object (ie: $("#flashObjectId").width()).
Then we should compare the two ratios (widthRatio and heightRatio), the bigger one has the scale value for the stage and the other elements on the stage.
I want to decrease an 480 X 480 bitmap image size to 30 X 30 pixel size but keeping the whole height and width intact. (I do not want to scale or use height/width property! )
So if i divide 480/16 = 30. So i need to take average pixel values of 30 pixel elements and put it into new image.
How to take the average in actionscript 3.0? I looked at getpixels() method, is their any simple way/methods to achieve this?
Let me put in more simple way - I am trying to reduce pixels in an bitmap image from 480 X 480 to 30 X 30, the height and width remain same and i expect some amount of distortion after converting image to 30 X 30.
I did scaling but it reduces width and height, if i again increase width and height it just regains normal pixels. Thanks!
Why don't you simply then make a copy of the whole image in code, but use the simple scaling to scale the copy, and only present that to the user. Also look at this from Stack Overflow
How to resize dynamically loaded image into flash (as3)
Documentation for the stageWidth property of the stage object states that:
If the value of the Stage.scaleMode property is set to
StageScaleMode.NO_SCALE when the user resizes the window, the Stage
content maintains its defined size while the stageWidth property
changes to reflect the new width size of the screen area occupied by
the SWF file. (In the other scale modes, the stageWidth property
always reflects the original width of the SWF file.)
But is there any way to affect that original width of the stage, without recompiling swf?
The stageWidth and stageHeight can not be set. They are based on the stagescalemode and the html container.
Or lets say there is a limited huge artboard what is the displayable area in flash(not regarding stageWidth).
If your swf has StageScaleMode.NO_SCALE its stageWidth will tell you the width of its container.And it will always fit its parent html element by showing you more or less of this artboard. But this can not directly be set by as3. To do so you need js.
If you have any StageScaleMode that scales the swf. Then its getting messy because that limited huge artboard gets streched and distrorted to meet the fittings.One pixel in as3 doesnt mean a pixel on screen anymore. But the part of that artbord that is visible will always be the same.
Is it possible to set the width and height of a canvas element and have the existing content scale to fit these new dimensions?
Right now the user uploads an image and my page creates a canvas element containing this image and whose dimensions are the same size as the image. I want to limit the size that I'm working with, however, so here is an example of what I want to have happen:
The user uploads an image that is 1600 x 1200 pixels (Not saved to server)
The data goes right to an html5 canvas object
The canvas height and width are set to 800 x 600 and the image content scales appropriately and then is displayed.
Right now if I set the canvas width and height it just crops the image at those dimension, not resizing as I would like. Thanks!
There are many ways to call drawImage
One is:
ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
Where dx,dy,dw,dh are the destination x, y, width, and height.
If you make dw and dh always 800x600, the image will drawn will always automatically be scaled to 800x600.
Here's a tiny example that will always draw any size image to 800x600 http://jsfiddle.net/jAT8Y/
Another alternative is to use context.scale function. Your image quality will remain better if you use scale.
Having trouble scaling with . It seems to make sense to code up a drawing in canvas to a fixed size (ie 800x600) then scale it for specific locations - but sizing occurs in 4 places: 1) in the context definition (ie ctx.width = 800 2) with ctx.scale; 3) in html with
I can scale it with ctx.scale(0.25,0.25) and use but this doesn't appear right - it seems to want the scale to be proportional.
css sizing simply makes it fuzzy so not a good way to go. Any ideas?
Actually, you can resize a canvas using stylesheets. The results may vary across browsers as HTML5 is still in the process of being finalized.
There is no width or height property for a drawing context, only for canvas. A context's scale is used to resize the unit step size in x or y dimensions and it doesn't have to be proportional. For example,
context.scale(5, 1);
changes the x unit size to 5, and y's to 1. If we draw a 30x30 square now, it will actually come out to be 150x30 as x has been scaled 5 times while y remains the same. If you want the logo to be larger, increase the context scale before drawing your logo.
Mozilla has a good tutorial on scaling and transformations in general.
Edit: In response to your comment, the logo's size and canvas dimensions will determine what should be the scaling factor for enlarging the image. If the logo is 100x100 px in size and the canvas is 800x600, then you are limited by canvas height (600) as its smaller. So the maximum scaling that you can do without clipping part of the logo outside canvas will be 600/100 = 6
context.scale(6, 6)
These numbers will vary and you can do your own calculations to find the optimal size.
You could convert the logo to svg and let the browser do the scaling for you, with or without adding css mediaqueries.
Check out Andreas Bovens' presentation and examples.
You can resize the image when you draw it
imageobject=new Image();
imageobject.src="imagefile";
imageobject.onload=function(){
context.drawImage(imageobject,0,0,imageobject.width,imageobject.height,0,0,800,600);
}
The last 2 arguments are the width an height to resize the image
http://www.w3.org/TR/html5/the-canvas-element.html#dom-context-2d-drawimage
If you set the element.style.width and element.style.height attributes (assuming element is a canvas element) you are stretching the contents of the canvas. If you set the element.width and element.height you are resizing the canvas itself not the content. The ctx.scale is for dynamic resizing whenever you drawing something with javascript and gives you the same stretching effect as element.style.