ActionScript 3 FullScreen Object Resize Class
The NpFSObjectResize Class is a fairly simple ActionScript 3 class for displaying any DisplayObject at fullScreen (fullBrowser) screen dimensions. The class gives you the options of resizing to full the entire screen, or to resize to either width or height. You are also able to align your objects anywhere within the stages dimensions. This allows for you control where your objects scale from (via positioning) them. So, you can center your objects, or align them bottom right and so on.
Updates 1 August 2008: Updated with new stage alignment properties, adjustments to constructor.
Class Features
- Min Stage Width – point at which scaling will turn off
- Min Stage Height – point at which scaling will turn off
- Use Stage Min – Controls whether or not objects scale or clip at a the MIN stage points
- Scale Modes – “full”, “height”, “width”
- Align Objects within stage dimensions
- Position Objects within stage dimensions
View Example
http://www.noponies.com/dev/as3_fsresize/
Source Files
Here is the relevant source file: FullScreen Resize Object Files (1705) - 348.14 KB
By downloading, you agree to the terms of use, outlined here: http://www.blog.noponies.com/terms-and-conditions
Dependencies
None
Updates
03 October, 2008: Updated main resize code, as there was a slight bug when resizing
Dependencies
None!
Beta Version
I’ve created a new version of this class, that includes mouse panning for objects along with a panning to a point method
You can get the beta from here. NpFsObjectResize Beta (51) - 482.74 KB
Please let me know of any errors, or issues with the code.
July 3rd, 2008 at 6:29 am
hey dale..ive been looking to use all of these light box applications in as 3 with no luck as of yet……and im not seeing how this can be used to create light box type effect in order to load swfs or images in as3…….am i missing something?
July 3rd, 2008 at 6:39 pm
Pete,
It wont do an exact lightBox clone, as it does not fluidly resize the objects, although I could add this.
I’ll whip a demo of what I meant though.
July 22nd, 2008 at 5:04 am
hey dale, i checked out the demo and it seems like exactly what i want.. as for the code, i have no problem when playing with Flash CS3, but when i use it with my project in Flex 3, i keep getting the Error(”Passed object is not part of any display list, so its stage property cannot be accessed!”);
Any suggestions?
July 22nd, 2008 at 2:23 pm
Sam,
Seems like its complaining about not be able to access the stage. I’m not really a Flex user, (only use it as an ActionScript Editor). So, how does Flex handle stage access?
July 22nd, 2008 at 8:56 pm
it works the same way, but for some strange reason, it was not added to the display list on the creation complete event.
I jus added the “Event.ADDED_TO_STAGE” to fix it.
..
..
public function CONSTRUCTOR()
{
super();
this.addEventListener(Event.ADDED_TO_STAGE, onAddToStage);
}
private function onAddToStage(e:Event):void
{
addChild(loader);
this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;
this.stage.addEventListener(Event.ACTIVATE, activateHandler);
}
private function activateHandler(event:Event):void
{
resizeTargetObj.addResizeTarget(this, “width”, .5);
resizeTargetObj.minStageScaleX = 320;
resizeTargetObj.minStageScaleY = 240;
resizeTargetObj.useStageScaleMin = true;
}
But this stretches the whole screen.. For my purpose i’ll edit it to fit the resizeable Canvas i add the sprite to. Thanks for the code..
July 24th, 2008 at 9:15 pm
Sam,
I assumed most people would want to only scale objects on the display list. I perhaps should include a check, where I first test for the objects stage, and if its null, add an ADDED_TO_STAGE event listener.
July 31st, 2008 at 8:00 pm
Sam,
I’ve added in a check in the classes init method that checks if the passed in DisplayObject is on the stage, if its not it adds a “ADDED_TO_STAGE” event to the object, and waits to its on the stage before doing anything.
August 1st, 2008 at 8:54 pm
thanks for this class; its very useful.
I’ve implemented resizing with some tweening.
we’d like to place the flash with an html page, div tag of 920 pixels wide. and an index element of 145px. We would like the flash bitmap to fill the area below and contained within the div tag.
the resize mode is set to ‘height’; minscale to 200.
when inside a div tag with specified width, initial rendering is ok; the image shifts below the index at 100% so some of the image is cut off. Resizing on the fly doesn’t work – you need to refresh / re render. full version flash renders and resizes beautifully.
so. i guess. my question is: Can we constrain the width of the element within a div tag and still maintain the resizing.
I may not have explained this too well.. I’m a bit tired..
thanks for the great class.. good work, bud..
Jack
August 20th, 2008 at 8:10 am
HI,
IS it possible to load a centered swf into this fullscreen
page?
What would be the code to load this external swf ?
March 5th, 2009 at 12:49 pm
Thanks, love this. Can you tell me why my image does not appear until I click within the browser window, then it fades in. Does not do this in Flash testing environment. Here is my code.
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
import noponies.display.NpFSObjectResize;
//Instantiate class first
var resizeTargetObj:NpFSObjectResize = new NpFSObjectResize();
resizeTargetObj.addResizeTarget(test, .5, .5, “full”);
March 5th, 2009 at 11:03 pm
The NpFSObject resize class does not handle any fading, so I’m not sure whats going on there.
March 10th, 2009 at 5:12 pm
Hey there,
I’m having a bit of an issue with centering swfs. If the main stage area of the swf is 400×400 ( and we would want this portion centered ) but the animation tweens leave that area, it is centering the object as if it were actually 700×400. I was able to figure out that it’s doing this because one of the tweens extends out to the 700px mark.
Any suggestions?
Thanks,
Ray
March 10th, 2009 at 9:21 pm
Hmm, not really, the class does not take into account for variable widths like that. Maybe try masking your animation and then try centering it.
May 16th, 2009 at 5:27 pm
Hey,
First off this class was a life savior, really sweet. I do have a question though, for some reason when the website i’m working on is in Internet Explorer, the image doesn’t load to the size of the web browser. It loads to the full size of the image with scroll bars. In Safari and Firefox it works great. Do you have any idea what may be causing this?
Thanks,
Felix
June 17th, 2009 at 4:18 am
thanks for the info!!! im new in action script and this helps me a lot!!!
thanks again!! hehehe