Some time back I wrote a tutorial about doing proportional image scaling in full broswer flash. This post is, by far, the most popular single post on the Frye / Wiles blog, and we have gotten a lot of great feedback about it. Since that time, we have started migrating over to Actionscript 3, and after a recent comment on the original post I decided it was time to update that tutorial. Because the other post ranks really well and seems to be pretty popular, it seems like it would make more sense to update the original tutorial to cover both versions of the language.
Anyway, to see the Proportional Image Scaling tutorial, now in for both AS2 and AS3, click here!
8 comments so far.
Sweet tutorial, was the only one I could find in AS3 and it worked a charm. Cheeeeers.
Allan
… with a Sunny 14 degrees in Auckland, NZ.
Glad you like it! I think I’d take 14 degrees in NZ over California summer…
Hey Rob,
Hope all is well, Ive been away for the last couple of weeks so I just thought i’d write to say thanks again for the input and help you gave me… I managed to tweek a couple of things and all is working perfectly…sort of!
Again, your sript is powering my bg_mc to resize on stage resize, and on top of this I have a content_mc which as it sounds holds all of my content sections. The mc itself holds movie clips (each section) placed along the x axis off stage and simply slides into place when the relative section is called. The content_mc has a central registration point and my stage is alligned to top left. My problem is that i need to get my fixed pixel content clips to tween into the centre of the stage…yup sounds easy enough but when i rescale my browser, the content mc snaps back to the its original position for my home page.
Hope all this makes sense, but what seems to be happening is that the code is working fine until the browser is resized then the position code kicks in and reverts the content_mc to the home section. Is it a conditional statement that is needed? or a listener of some kind in each section..
below is a stipped copy of my code.. thanks a million in advance.
stage.align=StageAlign.TOP_LEFT;
stage.scaleMode=StageScaleMode.NO_SCALE;
//define dynamic aspect ratios
var picHeight:Number=bkgd_mc.height/bkgd_mc.width;
var picWidth:Number=bkgd_mc.width/bkgd_mc.height;
// add the resize listener
stage.addEventListener(Event.RESIZE, onStageResize);
// call the resize function manually to do the initial settings, rather than having duplicate code
onStageResize();
// make listener change picture size and center picture on browser resize
function onStageResize(e:Event = null):void {
if ((stage.stageHeight / stage.stageWidth) < picHeight) {
bkgd_mc.width=stage.stageWidth;
bkgd_mc.height=picHeight*bkgd_mc.width;
} else {
bkgd_mc.height=stage.stageHeight;
bkgd_mc.width=picWidth*bkgd_mc.height;
}
; ;
bkgd_mc.x=stage.stageWidth/2;
bkgd_mc.y=stage.stageHeight/2;
content_mc.x=stage.stageWidth/2;
content_mc.y=stage.stageHeight/2;
//Flash - go get code that’s going to make the tween work…
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
import flash.display.Sprite;
import flash.filters.BitmapFilterQuality;
import flash.filters.BlurFilter;
//content_mc animation - animate in..
var homeTween:Tween=new Tween(content_mc,”x”,Regular.easeOut,content_mc.x,4000,1,true);
// and the as that goes in the frame lable for the next section to scroll in the timeline is
var aboutTween:Tween = new Tween(content_mc,”x”,Regular.easeOut,content_mc.x,2000,1,true);
p.s…this is my last question..honest
Hi Alan,
From the code you gave me, it seems like you are missing a closing bracket on the onStageResize function
Hey Rob, thanks again for getting back in touch,
yup, my bad, I think the code was simply a copy and paste error.
In truth I’m at a bit of a loss as to how to proceed. I’ve been trying to solve it in forums and alike but I’m still in the dark.
I didn’t want to post my full code as it would take up all your page so I have uploaded my fla so you could get a better idea of what im trying to achive.
http://www.dreamstormdesign.co.uk/temp/temp.fla
Again, i know your very busy and the last thing want to do is take advantage of your good nature but if you do get a chance to have a look I would really appreciate any thoughts you had.
Warmest regards
Hey Alan,
Try putting your content_mc inside of another movie clip called (content_container) or something like that. Then use the resize script to center the container on the stage (content_container.x), and use the buttons to move the content_mc inside of the container (content_container.content_mc.x)
Hello Rob,
ME AGAIN!!!! listen just to say a massive thank you for all your help and efforts on my project.
I’ve managed to get it all sorted and can now move forward. I’m forcing myself to do as much dynamically as i can these days so I couldn’t see the woods for the trees as I was trying to solve in AS.
Again, thanks so much for your help and i wish you and your company the very best.
Great article, thank you for the link