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

    pears-circlecube-com-welcome

    LESS and syntax highlighting for Pea.rs

    Pears is an open source WordPress theme by Dan Cederholm (simplebits), enabling people like us to get your own pattern library up and running quickly. Collect, test, and experiment with interface pattern pairings of CSS & HTML. I’ve customized pears. I’ve forked it, adding support for coding in LESS as well as code highlighting! The [...]

    2012-02-10-19-27_IMAG0181

    An Event Apart Atlanta 2012 Notes

    Here is my collection of notes from attending An Event Apart Atlanta 2012. As I took notes, I had the thought that I’d be sharing them with co-workers and that it’d be easiest to just publish them here. I hope they are useful to someone else out there who didn’t take notes on something or [...]

    Developing for old browsers is (almost) a thing of the past – (37signals)

    Basecamp announces that it’s new version will not support old browsers! They will of course continue to support them in their “classic” version. But this is good news and as more implement this type of policy the internet will be happy. It used to be one of the biggest pains of web development. Juggling different [...]

    Screen shot 2012-02-10 at 12.59.33 PM

    Vendor Prefixes – about to go south

    What are “standards” coming to? Who’s guilty? Apple and Chrome: They’re supporting vendor prefixed properties like they’re a standard part of development. Firefox, Opera and Internet Explorer: They should have been on the ball more. Need to push their evangelism further. Teach developers that it’s not exclusively -webkit to style elements. All the browsers: experimental [...]

    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 [...]

    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 [...]

    lukew_space

    An Event Apart Notes: Luke Wroblewski, Mobile to the Future

    MASS MEDIA (in waves) Print, Recordings, Cinema, Radio, Television, Internet, Mobile Mobile is the new Mass Media It certainly is mass and massive. More mobile devices (by far) every day than babies born on the planet. Mobile devices are eating into our personal computing shares. New waves of mobile media eat all previous media waves. [...]

    IMG_4500

    An Event Apart Notes: Josh Clark, Buttons are a Hack

    Mobile and touch should be revolutionizing design and user experience. We don’t want to touch a tiny link or button. Back button is just stupid. Fitz’s Law, make things fat proximal targets for easy touching. People are lazy, let’s as designers LET people be lazy! Maybe even use the whole screen as your control. Eliminate [...]

    nicole_pink_bkg_2012

    An Event Apart Notes: Nicole Sullivan, Our Best Practices are Killing Us

    Grep to for analyze css. CSS duplication is a web-wide problem. Started helping facebook optimize thier site and they had 1.9MB of css loading. The same color showing up hundreds of times. Many many color statements and declarations. !important declarations get dangerous. Sites found to have over 500 !important declarations! float is a serious problem [...]

  • Recent Comments

    Evan Mullins

    Evan Mullins

    @Mikael – I believe this would do it. It just fired the toggle event on the...
    Mikael

    Mikael

    Hey great post!! can i by any chance make the toggle function start as hidden? So when i reload...
    Ori

    Ori

    you saved me man :) !!!! thank you
    me-gamer

    me-gamer

    this is really nice. this made many of my task simple.
    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...