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

    bio

    An Event Apart Notes: Ethan Marcotte, Responsive Web Design

    Ethan Marcotte has become the father of Responsive Web Design and spent this whole day focused on principles, techniques, gotchas, examples, … all about building and how to build responsive sites. With a sprinkle of mobile first. For Ethan, it all started with this article: http://www.alistapart.com/articles/dao/ Think of architecture, the whole design phase is established [...]

    sammyj

    An Event Apart Notes: Ethan Marcotte, Rolling Up Our Responsive Sleeves

    Henry Adams (Descendant of 2 presidents: great-grandson to John Adams and grandson to John Quincy Adams). He lived between the civil war and world war 1. He witnessed the industrial revolution. Chaos was the law of nature, Order was the dream of man Samuel Johnson – funniest man in the 17th Century… Responsive Design: 1. [...]

    Webcomm_Montreal

    An Event Apart Notes: Jared Spool, The Curious Properties of Intuitive Web Pages

    Senseless waste of asterisks… Avis used an asterisk to denote optional fields. This means that there is a lot of baggage that comes with an asterixk. Somewhere this symbol got meaning, it’s not in the bible! We can control when something goes from unintuitive to intuitive. A design is intuitive (although technically and grammatically speaking [...]

    untitled-158-2

    An Event Apart Notes: Marco Arment, Bridging the App Gap

    The iPhone changed our industry in 2007: first mobile to have a desktop class web browser and it made people start using their mobile phones as computers! All apps other than apple provided ones were web browser apps. Most of the first apps were branded web browsers. No real difference between using mobile site or [...]

  • Recent Comments

    Lori Newman

    Lori Newman

    Just wanted to thank you for your presentation. It was extremely informative and just what I...
    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...