Test for Capabilities.screenDPI

January 6th, 2011 by Adrian

With all the interest in mobile development there come the issue of dynamically resizing UI elements based on the pixel density of the screen. For example, if a button is set to be 100 pixels wide, it will appear at different physical widths depending on the device being used. This is because your desktop monitor may have a pixel density (DPI or PPI) of 86dpi but you mobile phone may have a pixel density of 326dpi (as is the case with the retina display on the iPhone 4). This may meant that you nicely designed UI is unusable, with items being too small to click on with your finger!

An article regarding this was posted back in Jan 2010 on the Adobe Developer Connection by Christian Cantrell titled ‘Authoring mobile Flash content for multiple screen sizes‘, and more recently (Nov 2010) a whitepaper by Allen Ellison titled ‘Flash sizing Zen: Making Flash fit on mobile devices‘.

In Christian’s article he mentions using the AS3 Capabilities class and the method screenDPI, however as Renaun Erickson pointed out yesterday there is a problem with the returned value from this method when using AIR on devices.

Here is a little test SWF which shows you what Flash thinks your system is displaying (correctly or incorrectly).

Download a ZIP of the FLA source file here

An image of the various sample sizes can be viewed here

Confirming that 86 pixels equals 1 inch on my 19" (1280x1024) monitor

Here are some useful links regarding pixel density, DPI and PPI …

Posted in ActionScript 3.0, AIR, Android, Bug, Flash, iPhone, Mobile, Sample Code | 2 Comments »

Bug accessing FlashVars when using TLFTextField

November 30th, 2010 by Adrian

TLFTextField

I was recently working a project which used both TLFTextFields and FlashVars, and I came across a rather nasty bug. Basically, if you have at least one TLFTextField in your project access to FlashVars will stop working. So I posted the bug on the Adobe Forums – Text Layout Framework section and thankfully Alan Stearns got back to me very quickly with the answer.

The problem is down to the Text Layout Framework Runtime Shared Library preloading.

Take a look at the Forum Thread to see the solution.

My working code can be viewed on Snipplr here.

You can download a ZIP file containing a demo of this bug and workaround here.

To view the FlashVars (when running the SWF in a browser) I am using Arthropod. An AIR based debugger. Download it free from here.

Posted in ActionScript 3.0, Bug | 3 Comments »

stop(); Action Ignored on Nested Movieclip

December 24th, 2009 by Adrian

Recently I stumbled across this post by Ryan Creighton at Untold Entertainment from back in October 2008 titled ‘stop(); Action Ignored on Nested Movieclip‘. It basically demonstrates how (in AS3) a child movieclip does not stop on the first frame (even though you have put a stop(); action on it) when it’s parent/container is dynamically attached to the stage.

To me this does seem like a bug. Unless I am missing some subtle difference in this area between AS2 and AS3 that I am missing. If so, please can someone explain it to me?

I’ve knocked up a couple of examples to demonstrate …

Firstly, here is the AS2 version that attaches the container movieclip to the stage using the old attachMovie method. Sure enough, the child movieclip does as it is told and stays on frame 1.

And here is the AS3 version that instantiates the Contaner class and adds it to the display list using addChild. As you can see the child movieclip ignores the stop() command on frame 1 and goes to frame 2 instead. Why?

You can download a ZIP file containing the source files for these two examples here.

More discussion about this issue can be found on actionscript.org, but no-one really explains why this is happening. Any ideas?

Posted in ActionScript 3.0, Bug, Sample Code | 3 Comments »

Flash Player dispatches KEY_DOWN event when entering FullScreen mode (Bug)

September 17th, 2009 by Adrian

Have just built a video player that allowed the user to switch to FullScreen mode and toggle the play/pause state using the SPACE key on their keyboard. However, I found that everytime the Flash movie entered FullScreen mode the playing video would pause and visa-versa.

I then discovered that the Flash Player was dispatching a KEY_DOWN event when entering FullScreen mode. More specifically, the keyCode == 32, which corresponds to the spacebar on your keyboard.

My Flash Player version is WIN 10,0,32,18

See an example of it here …

Here is code for the above demo movie …

package
{
    import flash.display.MovieClip;
    import flash.ui.Keyboard;
    import flash.events.KeyboardEvent;
    import flash.events.MouseEvent;
    import flash.text.TextField;
    import flash.display.StageDisplayState;
   
    import fl.controls.Button;

    public class FullscreenSpaceBug extends MovieClip
    {
       
        public var tf:TextField;
        public var clearBtn:Button;
        public var goBtn:Button;
        public var exitBtn:Button;

        public function FullscreenSpaceBug():void
        {
            trace("FullscreenSpaceBug()");
            stage.addEventListener(KeyboardEvent.KEY_DOWN, onStage_KEY_DOWN);
            clearBtn.addEventListener(MouseEvent.CLICK, onClearBtn_CLICK);
            clearBtn.focusEnabled = false;
            clearBtn.useHandCursor = true;
            goBtn.addEventListener(MouseEvent.CLICK, onGoBtn_CLICK);
            goBtn.useHandCursor = true;
            exitBtn.addEventListener(MouseEvent.CLICK, onExitBtn_CLICK);
            exitBtn.useHandCursor = true;  
            tf.text = "";
        }
       
        private function onGoBtn_CLICK(event:MouseEvent):void
        {
            stage.displayState = StageDisplayState.FULL_SCREEN;
        }
       
        private function onExitBtn_CLICK(event:MouseEvent):void
        {
            stage.displayState = StageDisplayState.NORMAL;
        }
       
        private function onStage_KEY_DOWN(event:KeyboardEvent):void
        {
            if (event.keyCode == 32) {
                tf.appendText("event.keyCode = "+event.keyCode+"   (SPACE)\n");
            } else {
                tf.appendText("event.keyCode = "+event.keyCode+"\n");
            }
            tf.scrollV = tf.maxScrollV;
        }
       
        private function onClearBtn_CLICK(event:MouseEvent):void
        {
            tf.text = "";
        }

    }

}

I managed to find an entry for this bug in the Adobe Flash Player Bug and Issue Management System (JIRA Database). FP-814: Flash Player dispatches KEY_DOWN event when entering FullScreen Mode

I also found a very similar blog post by TyZ which was posted on 25th August 2009 titled ‘Flash bug when enter fullscreen keyboard events fired – Workaround‘.

The workaround is to temporarily remove the KEY_DOWN event listener, and add it again with a slight delay once the FULL_SCREEN event has been dispatched. You could create the delay by using either a Timer, an ENTER_FRAME event or the setTimeout method. In TyZ’s example he used an ENTER_FRAME event, in my example below I use an instance of the Timer class.

WORKAROUND EXAMPLE

Here is the code for the workaround …

package
{
    import flash.display.MovieClip;
    import flash.display.StageDisplayState;
    import flash.ui.Keyboard;
    import flash.events.KeyboardEvent;
    import flash.events.MouseEvent;
    import flash.events.FullScreenEvent;
    import flash.text.TextField;
    import flash.events.TimerEvent;
    import flash.utils.Timer;

   
    import fl.controls.Button;

    public class FullscreenSpaceWorkaround extends MovieClip
    {
       
        public var tf:TextField;
        public var clearBtn:Button;
        public var goBtn:Button;
        public var exitBtn:Button;

        public function FullscreenSpaceWorkaround():void
        {
            trace("FullscreenSpaceBug()");
            stage.addEventListener(KeyboardEvent.KEY_DOWN, onStage_KEY_DOWN);
            stage.addEventListener(FullScreenEvent.FULL_SCREEN, onStage_FULL_SCREEN);
            clearBtn.addEventListener(MouseEvent.CLICK, onClearBtn_CLICK);
            clearBtn.focusEnabled = false;
            clearBtn.useHandCursor = true;
            goBtn.addEventListener(MouseEvent.CLICK, onGoBtn_CLICK);
            goBtn.useHandCursor = true;
            exitBtn.addEventListener(MouseEvent.CLICK, onExitBtn_CLICK);
            exitBtn.useHandCursor = true;  
            tf.text = "";
        }
       
        private function onGoBtn_CLICK(event:MouseEvent):void
        {
            stage.removeEventListener(KeyboardEvent.KEY_DOWN, onStage_KEY_DOWN);
            stage.displayState = StageDisplayState.FULL_SCREEN;
        }
       
        private function onExitBtn_CLICK(event:MouseEvent):void
        {
            stage.displayState = StageDisplayState.NORMAL;
        }
       
        private function onStage_FULL_SCREEN(event:FullScreenEvent):void
        {
            if (event.fullScreen) {
                var timer:Timer = new Timer(200, 1);
                timer.addEventListener(TimerEvent.TIMER, onTimer);
                timer.start();

            }
        }
       
        private function onTimer(event:TimerEvent):void
        {
            stage.addEventListener(KeyboardEvent.KEY_DOWN, onStage_KEY_DOWN);
        }
       
        private function onStage_KEY_DOWN(event:KeyboardEvent):void
        {
            if (event.keyCode == 32) {
                tf.appendText("event.keyCode = "+event.keyCode+"   (SPACE)\n");
            } else {
                tf.appendText("event.keyCode = "+event.keyCode+"\n");
            }
            tf.scrollV = tf.maxScrollV;
        }
       
        private function onClearBtn_CLICK(event:MouseEvent):void
        {
            tf.text = "";
        }

    }

}

Download the source files for the workaround here

Posted in ActionScript 3.0, Bug | 11 Comments »

Flex app causing weird browser crash

April 16th, 2008 by Adrian

This afternoon I stumbled across Kaushik Datta‘s blog post ‘Toyota’s Model Selector in Flex‘ where he mentions a new Flex site for Toyota. So I thought I’d take a look.

Initially it looks very nice, but after a short play with the sliders my Firefox browser crashed and displayed a weird error message. It was not an error message I have ever seen before.

Windows XP, Firefox 2.0.0.13 Error Message: Illegal Operation in Plugin

Illegal Operation in Plugin

I restarted Firefox and tried it again, but the same thing happened. It is 100% repeatable.

So then I thought I’d give it give it a whirl in Internet Explorer (IE 7.0.5730.11) and, bingo, another new error message.

Windows XP, IE Error Message

Internet Explorer Error Message

The version of the Flash Player I have installed is WIN 9,0,115,0 (Debug player).

You can check your player version here.

And then finally the whole browser would die.

Toyota Model Selector

Take a look at the site and see if it crashes your browser too!

It also crashed Opera 9.24 on my Windows XP machine.

NOTE: It doesn’t crash in Firefox or Safari on my MacBook.

Posted in Bug, Flex | 3 Comments »

@ symbol bug with WMODE set, still outstanding!

April 1st, 2008 by Adrian

I can’t believe this is STILL a bug with the Flash Player/Firefox/UK keyboards. This has been an issue since 2005!

Surely it should have been fixed by someone by now. If you are not familiar with it, basically, when you embed a Flash movie in to an HTML page you have the option of setting the background of the Flash movie to ‘transparent’ so that the HTML page underneath can be seen through. This is useful for various reasons, for example, if you wanted the Flash movie to have rounded corners (not square ones) and you wanted the background colour of the HTML page to show through in those corners. This is achieved by setting the ‘wmode’ parameter to ‘transparent’. More information about this setting can be found on the following Adobe TechNote.

However, when this setting is applied, browsed using Firefox using a UK keyboard, the @ symbols in input textfields get converted to ” (quote marks). Basically, the Flash Player thinks you are using a US keyboard.

There are two reasons why I am blogging about this now. The first is that it came up the other week on a project a colegue was working on. They had noticed that it was happening, but had got so used to pressing Ctrl+2 to get the @ symbol, that they had forgotten that this was not normal, and would confuse the user. The second reason I am mentioning it is that even Adobe’s own PhotoShop Express (just released) suffers from the same problem. You can see it in action on the ‘Join Now’ screen and the ‘Sign In’ screen. The problem is usually most evident on form fields where you are required to enter your email address (which is quite often). See screengrab below …

PhotoShop Express Sign In

People have been blogging about this issue for the past three years. Here are a few examples …

The workaround in AS2 was to create a Key listener on a textfield that checks the CharCode to see if it is 34 and dynamically changes it to an @ symbol.

I have updated the workaround to work with AS3.0 using a CHANGE event listener on the textfield.

See it in action here

Download the source files here

import flash.events.Event;

input2_txt.addEventListener(Event.CHANGE, textChanged);

function textChanged(evt:Event):void {
    var typed:String = evt.target.text.slice(evt.target.text.length-1, evt.target.text.length);
    if (typed == "\"") {
        evt.target.text = evt.target.text.slice(0, evt.target.text.length-1)+"@";
    }
}

To be honest, I’m not sure if this is a problem with the Flash Player or Firefox. But I do know that it is about time Adobe and Mozilla got together and sorted it out.

Posted in ActionScript 3.0, Bug, Flash | 7 Comments »

Shape tween on dotted line bug

February 13th, 2008 by Adrian

Shape tween

Last week I one of the designers I was working with came across a bug in Flash CS3, well I presume it is a bug. Basically they were trying to do a shape tween on a line, bending from one place to another on the screen. Nothing strange there. But the line is question was dotted. When the shape tween was applied the line lost all dotted appearance and reverted back to a normal stroke, and then became dotted again on the last keyframe. The same thing happened when the line was dashed.

Obviously I would have expected it to remain dotted throughout the duration of the shape tween. See below.

We then tried converting the line to a fill (Modify > Shape > Convert lines to fills), which nearly worked, but the tweening got confused and random dots started swapping places, plus the filesize got bigger.

Surely this is a bug. I have reported it to Adobe using their Bug Report Form.

Posted in Bug, Flash | 7 Comments »