Reputation: 1
I am trying to make a prototype for the user interaction in a particular device screen in Flash Pro using ActionScript 3. It is require to test this user interaction prototype in the real dimensions of the device's screen. The test will be executed using regular pc's but not any in specific, so the problem is how to set the real dimension to the device screen in the prototype movie and how to control and keep its size for any possible monitor screen size and resolution (an exact replica of the real world screen dimension).
In other words: the screen size is 2 by 1 inches and I need to keep those dimensions in the prototype.
I was trying to use this method but I have not the skill lvel to apply it properly:
this.addEventListener(Event.ENTER_FRAME,loop)
function loop(e:Event):void
{
trace(stage.stageWidth)
}
thanks to all of you guys in advance!
Upvotes: 0
Views: 153
Reputation: 8149
I actually created a prototype application about a year ago for doing this on mobile devices. I used Flex, but you can figure out all the math through this. This was made for mobile devices, but I see no reason this shouldn't work on a desktop screen as well.
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<fx:Number id="spacing">5</fx:Number>
</fx:Declarations>
<s:Rect id="rectangle" width="{this.sliderWidth.value}" height="{this.sliderHeight.value}" x="{this.spacing}" y="{this.spacing}">
<s:fill>
<s:SolidColor color="#ff000f"/>
</s:fill>
</s:Rect>
<s:VGroup bottom="10" width="100%"
horizontalAlign="center" gap="20"
left="{this.spacing * 2}" right="{this.spacing * 2}"
maxWidth="{this.width - 4 * this.spacing}">
<s:Label id="measurements" opaqueBackground="#ffffff"
text="
Box: {(this.rectangle.width/Capabilities.screenDPI).toFixed(2)}in x {(this.rectangle.height/Capabilities.screenDPI).toFixed(2)}in —
{this.rectangle.width}px x {this.rectangle.height}px"
textAlign="center" />
<s:Label id="screenStats" opaqueBackground="#ffffff"
text="
Screen DPI: {Capabilities.screenDPI} —
Resolution: {Capabilities.screenResolutionX}x{Capabilities.screenResolutionY} —
Size: {(Capabilities.screenResolutionX / Capabilities.screenDPI).toFixed(2)}in x {(Capabilities.screenResolutionY / Capabilities.screenDPI).toFixed(2)}in"
maxWidth="{this.width - 4 * this.spacing}"/>
<s:HGroup width="100%" horizontalAlign="center" verticalAlign="middle">
<s:Label text="Width:" opaqueBackground="#ffffff"/>
<s:HSlider id="sliderWidth" width="100%" height="5%"
maximum="{this.width - 2 * this.spacing}" minimum="{this.spacing}"
value="50" />
</s:HGroup>
<s:HGroup width="100%" horizontalAlign="center" verticalAlign="middle">
<s:Label text="Height:" opaqueBackground="#ffffff"/>
<s:HSlider id="sliderHeight" width="100%" height="5%"
maximum="{this.height - 2 * this.spacing}" minimum="{this.spacing}"
value="50"/>
</s:HGroup>
</s:VGroup>
</s:Application>
I highly suggest throwing that into a quick Flex project and running it. Basically, it allows you to throw a red rectangle on the stage that you size to a pixel dimension and it outputs the real size, on screen. I haven't tested this since I built it, but it always worked great on my Nexus 7 and iPad 3 and was exactly accurate. The only possibility that this could be wrong is if the device reports an incorrect screenDPI
, which Flash will occasionally do (the iPad 3 had an incorrect DPI for a while. for example).
Upvotes: 0
Reputation: 6258
use:
stage.addEventListener(Event.RESIZE, onStageResized, false, 0, true);
//and handler
protected function onStageResized(e:Event=null):void
{
//here code to do something with size change
}
also worth noting is that you have to setup stage to not be resized e.g. by web page
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
Upvotes: 1