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="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    • Recent Posts

      WordPress updates plugin directory

      New additions to the plugin directory include: favorites, incorporating support forums into it's own tab for each plugin as well as support stats being displayed! Great! I think we also need the ability to give plugins ratings and reviews (bonus points if it can be done from within a wordpress admin dashboard when installing plugins). [...]

      Short Head

      Use zipf's short head to tune your website rather than redesign the whole thing. To make a website successful it needs to meet the needs of the users. Find out what those needs are by using the short head philosophy to equate most searched things as the biggest needs of the users. Use personas to [...]

      Img Set?

      Great article at a list apart discusing the state of the industry regarding responsive images. This picks apart the set attribute of the img element from a surprisingly objective view coming from someone so close to the picture element. Insightful discussion about the principle behind the proposals than the actual solution too. If the working [...]

      Triudo

      A mesmerizing animated triangle-ish shape form. Embedded Link triduo triduo Tweet

      Git – the paradigm shift

      A great developer story about the differences on what Git is vs other version control and what Git is not. This is how we should learn it. I heard over and over that it was distributed, but never grasped what that meant, so here are a few links and explanations that will help unlearn version [...]

      Tweening Lib comes to Javascript!

      I'm very excited to share the news that the tween library from GreenSock (hands down the best tweening library I used in flash) is not ported for use in javascript! This will be great! I missed that simple syntax from as3 when animating javascript, and now I can have my cake and eat it too. [...]

      Responsive CSS Tricks

      Here are a few useful css tricks to remember when building responsive design sites from web designer wall Embedded Link 5 Useful CSS Tricks for Responsive Design Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on [...]

      Picture element of srcset attribute?

      Bruce details the reasons and story behind the srcset attribute which is now introduced as an alternative to the picture element. Some aspects of the attribute are nice (like the fact that it's an attribute and not a new element, so it's creating up new elements with for problems. It's adapting currently used elements to [...]

      SVG Preloader with Raphael JS

      Here's a very creative use of using a newly available technology. Using svg graphics which are very lightweight, for a website preloader. I like the animation used as well. Embedded Link Make a stylish preloader with SVG | Tutorial | .net magazine Many sites neglect users with slow connections. Ian Culshaw explains how to use [...]

      CSS3 Button/Icon set

      I've been secretly hoping to see a few of these pop up once the whole icon font idea spread through the nets. I really like this idea and it's a very nice implementation too! I only see some quality issues on a couple of the icons (such as youtube), but it's awesome and I hope [...]

    • Recent Comments

      Bruce Brownlee

      Bruce Brownlee

      Ah IE6. I'd have 2 more years of sleep without IE6. Margin doubling, no properties,...
      versaena

      versaena

      how to give color at runtime…… thank you
      Mobile Websites

      Mobile Websites

      I disagree, mobile websites are the future – desktop websites and mobile websites...
      Matt Fasick

      Matt Fasick

      That's cool. I like the ripple effect as well.
      Nico

      Nico

      hi! really great job guy! very impressive.. just a question… do u have a solution to do a refresh...
      Evan Mullins

      Evan Mullins

      Agreed! I've just seen some people get pretty heated about separating all functionality...