Archive for the ‘ActionScript’ Category.

Which width? (AIR on devices)

Within the Flash APIs is there there are many similarly named properties which provide subtly different results based on their spec and the state of the application. Width and height are such properties.

Having just read of Mike Jones’ recent article: 10 Tips When Developing For Multiple Devices, and tip #1: Check screen dimension on initialisation, it includes a couple of lines of code to get the landscape height and width of the device screen using a boolean expression to determine the longest dimension. For me this begs the question, why can’t I simply get the right values directly from the API? Especially if my app.xml properties state the app should only display landscape, full screen.

The properties examined here:

Although accurately described in the reference, it isn’t necessarily easy to visualise the differences in behaviour for these properties from the documentation alone. So herewith, a simple HelloWidthHeight app to trace out the values upon initialisation. Included in that app is a class implementing logic based on Mike’s as static methods. The results of debug sessions executed on my HTC Desire are detailed for comparison in the table below.

Key app.xml <initialWindow> properties used were:

  • <visible>true</visible>
  • <aspectRatio>landscape</aspectRatio>
  • <autoOrients>false</autoOrients>
  • <fullScreen>true</fullScreen>
A B C D
stage.orientation default rotatedRight rotatedRight rotatedRight
stage.width 0 0 0 0
stage.height 0 0 0 0
stage.stageWidth 480 800 800 800
stage.stageHeight 800 480 480 480
stage.fullScreenWidth 480 480 800 480
stage.fullScreenHeight 800 800 480 800
Oriented.landscapeScreenWidth 800 800 800 800
Oriented.landscapeScreenHeight 480 480 480 480
Oriented.portraitScreenWidth 480 480 480 480
Oriented.portraitScreenHeight 800 800 800 800
  1. Screen inactive, phone held in any orientation
  2. Screen active, phone lying flat on the desk
  3. Screen active, phone held landscape, mic to the right (this is the intended orientation for the app)
  4. Screen active, phone held portrait, mic to the bottom

In conclusion, unless the application is only ever launched while the screen is active (though that would be the norm), the safe way of determining an oriented width and height is to use a boolean expression along with the fullScreenWidth and fullScreenHeight properties.

UPDATE (20-July-2011): The following table runs the same code in the BlackBerry PlayBook Simulator:

A B
stage.orientation default default
stage.width 0 0
stage.height 0 0
stage.stageWidth 1024 1024
stage.stageHeight 600 600
stage.fullScreenWidth 1024 1024
stage.fullScreenHeight 600 600
Oriented.landscapeScreenWidth 1024 1024
Oriented.landscapeScreenHeight 600 600
Oriented.portraitScreenWidth 600 600
Oriented.portraitScreenHeight 1024 1024
  1. Simulator initially landscape
  2. Simulator initially portrait

Note: Behaviour is slightly different on the PlayBook simulator in that the orientation of the application is set before the initialisation code runs. Therefore unlike on the HTC Desire, fullScreenWidth and fullScreenHeight are correctly returned as the orientation of the application expects.

If anyone else cares to run the code, I’d be interested to hear how variable other devices are in their results, or if this is showing a bug when run on HTC Desire. Running AIR 2.7 here.

Editor bug in Mac OS X 10.6.1

UPDATE 22 June 2010 : Further to my even earlier bug report (FB-9398FlashApe has posted a work around by changing a Snow Leopard system preference.

UPDATE 10-Dec-2009: I’m pretty convinced now that this is an editor bug, not a Mac OS X bug. Essentially the editors are using default OS behaviour which I think is tailored for natural language editing rather than programme-code editing. Original post follows…

I’m currently finding in some applications that “word1.word2.word3” is being treated as a single word as far as the Option-Left Arrow and Option-Right Arrow is concerned on my Mac. This keyboard shortcut should hop word by word. But currently hops from one end to the other. Not an issue for most users, but pretty serious for a programmer working with dot-notation syntax.

I first experienced this working with ActionScript in Adobe’s Flash Builder Beta 2 and logged a bug report, but further investigation reveals that some unrelated applications show the same behaviour. I have now logged a bug with Apple, but in the meantime I would be interested to know if others are experiencing the same? Or if you are running 10.6.1 and not seeing this issue? Please add a comment – I’m still trying to work out if it is something installed on my system. I don’t think it is basic user preferences as I am seeing the same in another user-account on this system.

Editors incorrectly treating “word1.word2.word3” as a single word re opt-left and opt-right:

FlexBuilder 3 MXML and AS editors
FlashBuilder 4 Beta2 MXML and AS editors
Apple Mail
Apple OS textfields including:
Spotlight
Finder window findfield
Safari: form-textfields + google search field
editors with *correct* opt-left opt-right behaviour
TextWrangler
Adobe Flash CS4 IDE ActionScript Editor
Adobe DreamWeaver CS4 editor
Apple XCode editor
Apple Finder – filename clicked and editable when renaming
Firefox form-textfields and goodle search field
  • FlexBuilder 3 MXML and AS editors
  • FlashBuilder 4 Beta2 MXML and AS editors
  • Apple Mail
  • Apple OS TextFields including:
  • Spotlight
  • Finder window find-file
  • Safari: form-textfields & google search field

Editors showing correct opt-left opt-right behaviour:

  • TextWrangler
  • Adobe Flash CS4 IDE ActionScript Editor
  • Adobe DreamWeaver CS4 editor
  • Apple XCode editor
  • Apple Finder – filename clicked and editable when renaming
  • Firefox form-textfields and goodle search field

finding information on Flex 3 component lifecycle

Quickly creating re-usable components based on others, augmented with additional ActionScript behaviour using MXML is as simple as can be. However, to create a component from scratch using ActionScript requires a lot of detailed knowledge of how the Flex framework works and the component life-cycle in particular.

The Flex documentation attempts to describe the lifecycle, but can leave the developer with lots of unanswered questions. When I got more involved in developing components I found chapter 19 of Programming Flex 3 good for filling in the gaps.

This week a new and free paper has been published by DevelopmentArc that also explores the component life-cycle and the application life-cycle. A very well worth while read….

Understanding the Adobe Flex® 3 Component and Framework Lifecycle

Feel free to post links to other compent lifecycle resrouces in the comments.

SimpleOscilloscope : filter update

My SimpleOscilloscope component described in an earlier post has now been updated to include a few filters controllable through setting styles. Of course like any other Flex component, it can have additional filtering applied in the normal way. I just felt like including these : alphaDecay, redMultiplier, greenMultiplier, blueMultiplier, blurX, blurY, scrollX, scrollY.

As ever, the project is on google code, and the test bed is here.

SimpleOscilloscope snapshot - with filters

flash.display.BitmapData gotcha – well gotme for a while

The documentation is correct, so i have no excuse, but I didn’t initially read much beyond the signature of the constructor…

public function BitmapData(width:int, height:int, transparent:Boolean = true, fillColor:uint = 0xFFFFFFFF)

I needed a transparent bitmap. Reading the default “transparent:Boolean = true”, I assumed by simply supplying width and height, a transparent bitmap is what I would get. Not so! I got a white rectangle. The reason being, that the default fill colour is 100% white. (The first pair of FFs representing the alpha in ARGB).

At first it would seem slightly unintuitive for the second default to conflict with the first, until one realises that the ‘transparent’ flag is there to indicate whether the object will support transparency or not. Not to state that it should be initially created transparent. Supporting transparency increases data size from 24 bits per pixel to 32 bits per pixel.

So what i should have done :

bmd = new BitmapData( width, height, true, 0 );

SimpleOscilloscope : my first opensource Flex component

In the majority of my projects to-date, I am the sole developer on the project team. I was feeling the need to get into writing Flex components to a level that they could be distributed. Essentially making sure I use meta tags correctly and adding appropriate asdoc comments allowing other Flex developers to easily include the component as they would any other from the Flex SDK.

SimpleOscilloscope snapshot

So, ccglib is an MIT license OpenSource project hosted on google code through which i plan to release a number of components. The first component released is SimpleOscilloscope, which plots the currently playing sound-wave. Designed to be easily sized, coloured and positioned through application of styles.

coach tool in flex / air

Coach Tool snippet Finally got around to adding a case-study to my corporate site including a screen-cast of some of the features of my longest running project, a Flex/AIR application for communicating football moves and plays. Essentially a digital, animated version of a football tactic board.

More details and the screen-cast are on the creative-cognition case-study page.

going to see what haXe is all about…

… at the London Flash Platform User Group… tomorrow (29 Jan 2009).

AS3 reference docs on iPhone / iPodTouch

Really handy! … ActionScript 3, Air and Flex documentaion distributed as an application on iPhone and iPodTouch – by Mike Chambers.

Downloaded it, had a play, simple and effective. A ‘back’ button would be nice though in future versions 🙂

Peddling Tour de Flex

New Tour De Flex application looking like a very cool and a very useful resource. More information…

http://flex.org/tour

Basically it’s a Flex Component explorer as an AIR application and Eclipse plugin.

Just thinking I’d have preferred that the System Chrome was used in the AIR app to provide the min/max/close buttons rather than those alien windows style icons on the wrong side of the window. Mac user me! 😉