Fullscreen in AS3 Tutorial | Plus Firefox Flash bug when enter fullscreen keyboard events fired

To view the full fullscreen tutorial go here: How to use fullscreen in AS3 | Stage Display State Tutorial

fullscreen_keyboard_bug_thumbnail
Sucks when you seem to have a bug in your code somewhere so you dissect your code over and over and are convinced that according to your code, everything should be fine, so you come back later thinking fresher eyes will see it, and still can’t find the cause, and then resort to debugging with various trace statements…

I’ve been developing a custom flash player in as3. Fullscreen and all those bells and whistles… I could test locally and eveything was beautiful… but then upload and test in the browser and when I would go into fullscreen mode, the video would pause. Pretty annoying bug! So I’d go through my code and examine anywhere a call to pause the video (there are only two): pressing the play/pause button and pressing the spacebar (keyboard shortcut). I couldn’t find any correalation. I was thinking adobe must be doing some crazy security things when going into fullscreen… but no, no other video player I’ve seen does this!
After commenting out my keyboard events, the bug is fixed! But I still can’t use the spacebar to pause/play. I love this functionality for usability. Isn’t that pretty standard for video? space to pause, it’s like second nature to me.

Does entering fullscreen really trigger a keyboard event equivalent to pressing my spacebar!? Sure enough. how much sense does that make, but it gets better! I had a friend test this swf and it worked fine for him. No pause on fullscreen! Wha!? Using good ole IE7… So yes, it’s a browser specific actionscript bug, firefox even! That was one of the things I liked about flash initially, not too much to mess with as far as cross browser issues once you get the swf embedded in the html, or so I thought.

So after playing with booleans to try to control when the keyboard events will be working.

Has anyone experienced this or another issue that just left you baffled, even after you figured out the bug?!

Well, I’ve done the right thing, I’ve posted about it to hopefully help anyone else having this issue. I created a test case file to rule out anything else in my code and make sure I’m not crazy.

Get Adobe Flash player

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

fsb.addEventListener(MouseEvent.CLICK, fullscreenToggle);
ssb.addEventListener(MouseEvent.CLICK, fullscreenToggle);
stage.addEventListener(FullScreenEvent.FULL_SCREEN, onFullscreenChange);
fsb.buttonMode = true;
ssb.buttonMode = true;
onFullscreenChange();

function fullscreenToggle(e:MouseEvent = null):void {
    //normal mode, enter fullscreen mode
    if (stage.displayState == StageDisplayState.NORMAL){
        //set stage display state
        stage.displayState = StageDisplayState.FULL_SCREEN;
    }
    //fullscreen mode, enter normal mode
    else if (stage.displayState == StageDisplayState.FULL_SCREEN){
        //set stage display state
        stage.displayState = StageDisplayState.NORMAL;
    }
    onFullscreenChange();
}
function onFullscreenChange(e:FullScreenEvent = null):void {
    if (stage.displayState == StageDisplayState.FULL_SCREEN) {
        tracer("full screen");
        fsb.visible = false;
        ssb.visible = true;
    }
    else {
        tracer("small screen");
        fsb.visible = true;
        ssb.visible = false;
    }
    tracer("toggle to "+stage.displayState);
}
stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownListener);

function keyDownListener(e:KeyboardEvent) {
    tracer("keyboard: keyCode: "+ e.keyCode.toString());
}
var tracerwindow:TextField;
function tracer( ...args){
        if (tracerwindow == null){
            tracerwindow = new TextField();
            tracerwindow.width = stage.stageWidth/2;
            tracerwindow.height = stage.stageHeight;
            tracerwindow.multiline = true;
            addChild(tracerwindow);
        }

        for (var i:uint = 0; i < args.length; i++) {
            tracerwindow.appendText(args[i].toString() + " ");
        }
        tracerwindow.appendText("\n");
        trace(args);
}

other places that I’ve found this mentioned that helped me understand what was going on:

http://dreamweaverforum.info/actionscript-3/123202-keyboard-event-full-screen.html

http://bugs.adobe.com/jira/browse/FP-814

This entry was posted in tutorial and tagged , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

14 Comments

  1. Posted April 2, 2009 at 8:51 pm | Permalink

    I’ve seen this bug and worked around it by removing the spacebar key eventlistener before going fullscreen and then created a timer to add the eventlistener back in half a second. A horrible horrible hack, but it works…

  2. Posted April 13, 2009 at 10:47 pm | Permalink

    hey i’m having a weird problem with firefox.. if you try my website, and click around a bit, you’ll see that for some reason the buttons stop working… it happens very rarely in IE8, but ALOT in firefox 3.. any ideas?..

  3. Posted April 24, 2009 at 9:31 am | Permalink

    @Brian – Thanks! I did think if that, but was hoping to find a non-hack way to solve it. But as you say, it works… and sometimes that’s what we have to do, just make it work.

    @Scott – I clicked around in ff3, but the buttons seemed to work fine for me. Isn’t it horrible dealing with browser specific bugs in flash… Good luck!

  4. Posted July 2, 2009 at 10:38 am | Permalink

    Hi Scott, I'm also experiencing the same quite irritating problem so I was wondering whether you've found out how to prevent it from happening..

  5. Saurabh
    Posted August 19, 2009 at 7:29 am | Permalink

    Yup. Been smashing my head on the desk (keyboard is expensive) for the last few days trying to figure out why my “spaceBar” listeners were running off everytime it went into fullscreen. But just as all AS coders know – if it doesn’t make sense, google it. Its probably a known flash bug. And looks like it is. I haven’t begun thinking of a workaround yet, but i think brian’s should work for me too.

    Thanks Evan!

  6. Posted August 25, 2009 at 9:39 am | Permalink
  7. Posted August 25, 2009 at 4:07 pm | Permalink

    I believe that keyboard entry is limited for security reasons. The reason keyboard input was blocked was to help prevent phishing attacks using Flash, where full-screen is used to simulate a log-in screen, someone else’s website, etc. So there are limits to what you can do in full screen with a keyboard so that the end user is protected from phishers.

  8. Posted August 26, 2009 at 3:24 pm | Permalink

    @Joshua – Right, keyboard entry is limited in fullscreen, but that’s not the issue with this but. This bug is that in firefox going fullscreen actually fires an event equal to that of the space bar being pressed.

  9. Posted January 14, 2010 at 6:05 am | Permalink

    Thanks, this is very helpful.

  10. Posted June 7, 2010 at 4:06 pm | Permalink

    excelent tutorial, thanks a lot,

    • Tim Leslie
      Posted June 11, 2010 at 12:07 pm | Permalink

      I’ve got the opposite happening. I have a button which adds a child. The child has keyDown and keyUp listeners with switch case statements to find the Keyboard.SPACE event.

      Against all logic, pressing space after the child has been added runs the click function of the origional button and adds another child. That is unless I put a break point in the click function, in which case it works like it should. Release build has the bug so I need to solve it.

      I haven’t spent time boiling it down but it is clearly Adobe’s bug, not mine (why else would adding a break point solve it?). Has anyone heard of this bug or know of any work arounds?

  11. Posted July 12, 2010 at 10:37 am | Permalink

    Hello !
    just tried the code, but KeyboardEvent is ok in flash & ie but not firefox (3.6)
    i’m smashing my head too on the desk trying to find why an “old” site wich used to work does not work anymore since i change my os, cs4- > cs5 & updated flash plugin to ver.10 …
    AAAAAAAaaa
    http://airspindesign.com/test_fullscreen.html
    this is your code i put online .. are you able to see any keydown trace on firefox ?
    thanks for the code though i learnt something :)
    have a nice day
    niko

  12. Posted July 12, 2010 at 10:46 am | Permalink

    hop ..
    by importing flash.ui.Keyboard
    it seems to work :)

    • Posted July 12, 2010 at 11:53 am | Permalink

      @Niko – I’m able to see keycodes listed, had to select the flash element initially of course. nice going.

2 Trackbacks

  1. [...] Fullscreen in AS3 Tutorial | Plus Firefox Flash bug when enter fullscreen keyboard events fired | ci… [...]

  2. [...] así que me dí a la tarea de averiguar la mejor forma para hacerlo. Googleando encontré este tutorial de Evan Mullins el cual decidí modificar, restando algunas cosas que no eran útiles para [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Recent Posts

    WordCamp Presentation Slides: From Photoshop PSD to WordPress Theme

    Here are my slides for my WordCamp Atlanta presentation, From PSD to WordPress Theme: Under the skin: PSD to WP on Prezi Tweet

    wordpress_wordcamp_atlanta_2012_feb_2_3

    Speaker at WordCamp Atlanta 2012

    I’m proud to announce that I’ve been asked to speak at WordCamp Atlanta this year! WordCamp will be held this weekend and hosted at SCAD Atlanta! My session is titled: From PSD to WordPress Theme: Under the skin. Obviously, I’ll be focusing on themes. We’ll look at what they are, what they can do, how [...]

    Adobe-like Arrow Headers | CSS-Tricks

    Zero images is something that always gets me excited, I really like these arrow button styles! I like the css used more and the hover/active states too, nice css3 transitions. via Adobe-like Arrow Headers | CSS-Tricks. Tweet

    snow

    Snow via Javascript & Canvas – Tis the Season

    After playing with the settings in my experiments I found a few settings I liked and wanted to develop further. The first was snow! An added bonus I was able to work on a project just for the holidays and used much of this code in it! I looked around the web and saw a [...]

  • Recent Shares

    Link: Responsive Images: How they Almost Worked and What We Need

    Mat discusses the options for getting responsive images along with responsive designs. We can use various means (server-side, client-side, mobile-first, html5 data attributes, cookies…), but none are fully satisfactory, especially with new browsers prefetching images before cookies can be set or html is even fully read and parsed. He states that bandwidth sniffing is… a [...]

    Screen shot 2012-01-26 at 2.46.59 PM

    Yiibu – About the site…

    Here’s a great article about the process of responsive design & mobile first design and how to practically use them both in a project. This site is a proof of concept for many of the ideas described in Rethinking the Mobile Web or (Mobile First Responsive Design). via Yiibu – About this site…. Tweet

    gridpak

    Link: Introducing Gridpak | Erskine Labs

    Here’s a great tool to make responsive grid layouts. Thanks to Erskine Labs! Introducing Gridpak | Erskine Labs. Tweet

    css-multiply

    Link: HTML5 multiply filter with canvas | Alberto Gasparin

    Here’s a great little script I found useful today as I was working on having dynamic effects applied to javascript via canvas. “The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.” Thanks to the canvas APIs I was [...]

  • Recent Comments

    Karl

    Karl

    I have been using for some time this nice Banner, from developer FX. They have a really nice Live...
    Karl

    Karl

    Thank you for this wonderful link… recommend it! Fast, simple, easy… :-)
    Gabriel

    Gabriel

    Hi Valerie, I don’t know if you are still following this post, but I tried seeing if it is...
    avinash

    avinash

    Hi Evan, I am using the same code and trying it on chrome/firefox it is not working on neither...
    Matt

    Matt

    I needed to store url variables from advertising tracking servers – this method works like a...
    Evan Mullins

    Evan Mullins

    @Saket – you may want to look into swfaddress. I believe it will be more what...