Adobe AIR - Fullscreen / Display - actionscript-3

Windows computer running AIR.
Every night the educational displays get turned off. The computers stay on.
On certain displays when they turn them on in the morning the screen resolution goes back and forth a few times starting at 1920 x 1080 then to 1024 x 768 then back to 1920 x 1080.
When this happens for some reason the AIR app freaks out and stays at 1024 x 768 which doesn't take up the fullscreen and you can see the desktop. We have to manually relaunch the AIR app.
Is there a way when this happens we can detect and go back to force Fullscreen?
Thanks in advance for any suggestions.

If you are using a maximized window, you can listen for Event.RESIZE on the stage (dispatched when the window get's resized), and or listen for the native windows displayStateChange or resize events.
If you are using the FULL_SCREEN (or FULL_SCREEN_INTERACTIVE) display state, you can listen for the FullScreenEvent.FULL_SCREEN event to know when that has changed.
Here is an example of a few things you can try:
//in your document class or main timeline, listen for the following events:
stage.nativeWindow.addEventListener(NativeWindowBoundsEvent.RESIZE, windowResized);
//the above will fire anytime the window size changes, Really this is all you need as this event will fire when the window display state changes as well.
stage.nativeWindow.addEventListener(NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGE, windowResized);
//the above will fire anytime the window state changes - eg. Maximized/Restore/Minimize. This likely won't trigger on a resolution change, but I've included it anyway
stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullscreenChange);
//the above will fire whenever you enter or leave fullscreen mode (stage.displayState)
private function windowResized(e:Event):void {
//re-maximize the window
stage.nativeWindow.maximize();
//OR Go to full screen mode
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
}
private function fullscreenChange(e:FullScreenEvent):void {
if (!e.fullScreen) {
//in half a second, go back to full screen
flash.utils.setTimeout(goFullScreen, 500);
}
}
private function goFullScreen():void {
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
}

Related

How to get when user change the screen resolution in Adobe AIR?

I can get screens resolution when my application starts, but can I know when the user has changed the resolution?
Something like a event (example):
Screen.mainScreen.addEventListener("CHANGE_RESOLUTION", ...)
I've tried using a setInterval to monitor the resolution, but is this the best way to do this?
var resolution:Rectangle = Screen.mainScreen.bounds;
setInterval(function():void {
if(!Screen.mainScreen.bounds.equals(resolution)) {
trace("changed!");
}
}, 1000);
As far as I know, polling (what you're currently doing) is the only way in AS3 to detect screen resolution changes.
However, if you are in a maximized or fullscreen window, the window (or stage if set to NO_SCALE) will fire a resize event on a resolution change. (see the answer from Diniden). Though I'd recommend listening on the stage.nativeWindow object instead of stage itself.
I'd say that you are doing it a perfectly acceptable way currently.
Keep in mind though, that if this is a desktop application, the user could have your program on a monitor that is not the primary one (Screen.mainScreen). To support that scenario, you'd want to do something like the following:
//a constant to use for a custom event
const RESOLUTION_CHANGE:String = "resolution_change";
var resolution:Rectangle = curScreen.bounds;
//Adobe recommends using timers instead of setInterval - using ENTER_FRAME may be too expensive for your needs, but would afford the quickest reaction time.
var resolutionTimer:Timer = new Timer(1000); //poll every second (adjust to optimum performance for your application)
resolutionTimer.addEventListener(TimerEvent.TIMER, pollScreenResolution);
resolutionTimer.start();
//get the screen that the window is on
function get curScreen():Screen {
//get the first screen [0] that the current window is on
return Screen.getScreensForRectangle(stage.nativeWindow.bounds)[0];
}
function pollScreenResolution(e:TimerEvent) {
if(!curScreen.bounds.equals(resolution)) {
trace("changed!");
//dispatch our custom event
stage.dispatchEvent(new Event(RESOLUTION_CHANGE));
resolution = curScreen.bounds; //set the resolution to the new resolution so the event only dispatches once.
}
}
Now you can listen for that event in other parts of your application.
stage.addEventListener(MovieClip(root).RESOLUTION_CHANGE, doSomething);
This is how I handle window resize events. You look at the stage of the given window for seeing how it's being resized. The other properties is to make it resize in a sensible way.
this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, stageResized);

How create fully responsive html5 game using Phaser library?

I'm using Phaser 2.5.0 (tried 2.4.8 also) and I'm trying to create fully responsive game using phaser library.
Everything is ok when I refresh page, here is image:
but when I change rotation to portrait dialog message is not ok, image:
When I refresh page using portrait mode I get ok dialog:
So problem is when I resize browser window.
Here is code for init phaser game:
var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO);
Tried also:
var game = new Phaser.Game("100%", "100%", Phaser.AUTO);
Here is create function located in main.js:
create: function(){
console.log('create');
this.game.antialias = true;
this.game.stage.smoothed = true;
this.input.maxPointers = 1;
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.minHeight = 0;
this.game.time.advancedTiming = true;
},
So to tell again problem is when I resize browser window but when I do refresh then it's not working ok. Game must support resize.
Here is one simple example which is giving almost same result, on refresh is ok but when doing resize is not ok: https://jsfiddle.net/CroDac/tv010u0t/
Thank you
There was/is an old, but apparently not fixed, bug in iOS that caused (causes?) this. There are several workarounds on the net, on of them is here:
https://github.com/scottjehl/iOS-Orientationchange-Fix
From the description:
This fix works by listening to the device's accelerometer to predict
when an orientation change is about to occur. When it deems an
orientation change imminent, the script disables user zooming,
allowing the orientation change to occur properly, with zooming
disabled. The script restores zoom again once the device is either
oriented close to upright, or after its orientation has changed. This
way, user zooming is never disabled while the page is in use.
Maybe this can help you....

How to solve webkitRequestAnimationFrame giving extremely high FPS

Today I've been trying to get myself acquainted with anything new HTML5 has to offer, in particular the canvas. I came upon the site www.html5canvastutorials.com and began following some of the tutorials and playing around with the code a bit in different browsers. When I got to the following example I noticed something odd in google chrome. http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/
The webkitRequestAnimationFrame function is supposed to help reduce FPS (and thus CPU costs) when not actively on the site, for example when you go to a different tab. However, when I tried the example, I noticed that this does not always appear to give pleasant results.
Google Chrome as active window, site on current tab: Get around 60
FPS, great!
Google Chrome as active window, on a different tab: Get
around 1 FPS, very good.
Google Chrome as active window, on my TV
(used as second monitor), 120 FPS, odd, but no complaints.
Google Chrome not as active window, but on a different tab, also around 1
FPS or so, perfect.
Then the bad part:
If my site is on the current tab, but I have another window completely covering the google chrome window (say a maximized window for example), the FPS shoots up to around 2500 (and consequently maxes one CPU core).
Everything works perfectly normal when I try the same site in Firefox.
This fiddle's an example where it shows the average FPS since the last refresh: http://jsfiddle.net/kmKZa/55/
(I pretty much copied the code from the tutorial site)
I would like to know how I can prevent these scary CPU spikes if anybody has any ideas. Thanks in advance for any advice!
One possible solution is to simply cancel the AnimationFrame loop when you blur the window, and request it again when you refocus it.
var isPaused = false,
animFrame;
loop();
$(window)
.on('focus', function() {
if( isPaused ) {
isPaused = false;
loop();
}
})
.on('blur', function() {
cancelRequestAnimationFrame( animFrame );
isPaused = true;
});
function loop() {
//your crazy loop code
animFrame = requestAnimationFrame( loop );
}
RAF automatically stop execution on "idle".
U don't need to stop RAF loop execution

FLVPlayBack not scaling to fullscreen

I'm trying to make an instance of FLVPlayBack run in fullscreen, without affecting the rest of the application.
According to stuff I've read, I have set the players scale mode so it will fit the window when its scaled up.
flvPlayer.scaleMode = "exactFit";
And in order to stop the stage from scaling up I've also set the stage's scale mode too.
stage.scaleMode = "noScale";
Then in order to try and control what the video player does when I click the fullscreen button, I also use the fullScreenTakeOver setting on the player.
If I set the code like to 'false'
flvPlayer.fullScreenTakeOver = false;
Then the whole interface becomes fullscreen, with the stage positioned in the centre of the window, I guess this is because I set the stage not to scale. The video stays its normal size and carries on doing what it was doing. Exiting fullscreen shrinks the stage back to normal.
If, on the other hand I set it to 'true'
flvPlayer.fullScreenTakeOver = true;
Then the video takes over the screen, but it doesn't scale up, instead it positions the video in the middle of the page, and the clickable areas of the controls move to where they would be if the video was full size, leaving my guessing where the buttons should be.
In both cases the video carries on running fine.
Can anyone help me with the right combination of settings? I want the application to stay its windowed size and the fly player to scale to fit fullscreen by itself.
Thanks.
There is a property in flvplayback named fullScreenTakeOver which is set by true by default. this will interfere with fullscreen really bad. if you want to apply fullscreen without changing logic of your stage you better set this as false after instantiation. this will decrease your troubles a lot
You'll want to set a few settings which some you've already done
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
flvPlayer.fullScreenTakeOver = false;
Now when you enter full screen your application stuff will positioned top left. You will want to make an event listener for full screen mode.
stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
In that event is where you will handle resizing and moving the video (Also hiding other objects on the stage if need be)
function fullScreenHandler(e:FullScreenEvent):void
{
if (stage.displayState == StageDisplayState.NORMAL)
{
// Setup NORMAL Layout
// resize and reposition the flvPlayer
}
else
{
// Setup FULL_SCREEN Layout
// move the flvPlayer to x:0 and y:0
// set the flvPlayer width and height to stage.stageWidth and stage.stageHeight
}
}

touchscreen: distinguish start of scroll from tap

I'm writing something for a touchscreen phone. I'd like the program to run a specified function when the user taps on the screen. I'd like to scroll the screen when the user drags a finger up or down the screen.
The OS has three relevant callback functions (1) detect when screen is touched, (2) detect when finger is dragged on screen and (3) detect when the finger leaves the screen. In each case, the callback function gets the screen coordinates where the relevant event happened.
The problem is that a drag obviously starts with a finger touching the screen and ends when the finger leaves the screen. Tapping is usually detected as a touch, very short drag and end touch. If I just call my specified function on a tap, I'll trigger on screen drag events rather than genuine taps.
The best I can think of is to mark the time or location when the user first touches. If we are in the drag callback function a short time or distance later, treat it as a scroll. Otherwise, if there's been a leave-the-screen callback, treat it as a tap. Issues include the cost of noting the time, deciding how much time or distance to use as a trigger and if there is a better general approach.
My app is in python for a symbian device. As that's not a very popular platform, any suggestions for the best way to implement would be appreciated.
The best approach I can think of is:
Touch callback: set action_location = drag_location = current_location (current_location reported by os)
Un-touch callback: if action_location within distance_threshold (e.g., 20 or 25 pixels) of current_location, execute action
Drag callback: if drag_location more than distance_threshold from current_location, scroll and set drag_location = current_location