Flash Platform

5 days of Flash 5

Flash 5 User manuals As we look forward to the release of CS5 before long, I had an unusual 5 days producing a new SWF based on a publish-to Flash Player 5 predecessor. So time to put on my Macromedia cap and dig out the old Flash 5 manuals.

This version pre-dates my working with Flash and dates back to when I quite frankly hated Flash. Ironically a number of designer types look on these as the good old days when Flash was very much a designer tool. I have to admit when I first saw Flash V1 further back in 1996 I didn’t rate it. I’d been using programming Director since 1993 and Flash didn’t have Lingo so it had seemed a step backwards to me.

Back to the current project, since most of flash 5 was easily described in two skinny manuals, there wasn’t really that much to have to read up on. The main issues encountered:

  • The original designer seemed to have no discernible logic to the placement of graphics and their anchor points.
  • Static text didn’t render particularly well — over-anti-aliased.
  • Initially had problems with artwork imported from Illustrator

As regards the Illustrator problem, I had imported an .ai document to library and used on stage. Then while publishing I received an error alert :

This movie uses features that are not supported in Flash Player 5. View the Output Panel for details.

In the Output Panel, the message:

Enhanced stroke is not supported in this player

Simply solved by opening the .ai document in Illustrator then exporting a SWF. At which point it is possible to specify the Flash Player version. So saving off a Flash Player 5 SWF and importing that the Flash library rather than the .ai document avoids the problem.

As regards the text problem, this proved to be the motivation enough for the client to agree to updating the target player version from version 5 to version 8 in order to take advantage of ‘anti-alias for readability’.

Sometimes I wish Adobe would obsolete old versions — much like the current pressure to remove support for explorer 6 from the web. On the other hand I have to admire the facilities across Adobe tools that continue support output to legacy flash player versions for when it is impossible to persuade clients to be more current.

Posted by creacog in Flash Platform, 0 comments

flash in the pan

So, Flash player 10.1 is available in beta and includes mobile device oriented new features such as multi-touch gestures. Smart! Makes sense with Adobe strategy of delivering to emerging mobile devices. However there are a few million of us already using desktops and laptops with track pads, mouse wheels and mouse trac-balls who are feeling a bit ‘inhibited’. Flash is being used more and more to deliver applications either via browser or the AIR runtime. Such applications immediately feel somewhat inferior when a user cannot scroll or pan a view as they normally would native applications. Arguably ‘Rubbish’ rather than ‘Rich’ RIA in such cases.

For a long time the MOUSE_WHEEL event has been part of the Flash API but only officially supported on the Windows platform (in browser). Original reasoning for not implementing support for the Mac platform can no-longer be argued as all Macs for a number of years have been shipped with the Mighty Mouse (2005) and now Magic Mouse or Trackpads. All of which facilitate mousewheel style interactions. All of which go further and support horizontal as well as vertical scrolling interactions or ‘panning‘. There are JavaScript workarounds for in-browser Flash on a Mac such as this solution on hasseg.org or this SWFObject based pixelbreaker solution. Fortunately Flash applications delivered via the AIR runtime can respond to MOUSE_WHEEL events without any such workarounds. However MOUSE_WHEEL currently only facilitates vertical scrolling in any case.

We need to facilitate horizontal as well as vertical scrolling (panning) of content in response to events from ubiquitous input devices.

A few prominent applications I use often, which suffer:

  • TweetDeck : AIR based. High discoverability of lack of horizontal scrolling support
  • Adobe online store UK : In browser Flex application – Flash being used in an attempt to emulate HTML – no vertical scroll wheel support for Mac users
  • Adobe Flash builder : Design view (Java application with Flash based view)
  • Adobe Catalyst : Art-board view (Java application with Flash based view)

Adobe actively invite comment and suggestions on their products. More widely/easily through the Feature request/bug report form. They have opened up the bug tracking system for a number of products. Flash player being one of them. There is an active bug report with regard to this issue and I would encourage anyone with an opinion to contribute to the discussion and/or add weight by voting. Just sign up and access FP-1262. There is an active drive from within Adobe to help from the community to improve the quality of Flash Player and AIR.

As for the solution I think I’d like to see something along the lines of… Extending the flash.display.InteractiveObject with a ‘panEnabled‘ boolean property defaulted to false which, when true, allows the object’s Panning behaviour/event broadcasting (akin to doubleClickEnabled mechanism). So, when panEnabled is true, if the mouse pointer is over the InteractiveObject, and the user makes a ‘pan’ gesture, the frontmost panEnabled InteractiveObject broadcasts flash.events.MouseEvent.MOUSE_PAN events containing with the additional properties : offsetX and offsetY. Text based InteractiveObjects should default to panEnabled = true. Further, I’d quite like to see mechanisms to facilitate behaviours of nested pan-able objects. E.g. on a Mac, the front-most display object gets scrolled until it can scroll no further, then if the user continues the scroll input, the containing display object then scrolls.

In rounding up, the best place to contribute your opinions on this subject and have them heard by Adobe is here : FP-1262.

Posted by creacog in Adobe, AIR, Flash Platform, Flex, Mac OS, 0 comments

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
Posted by creacog in ActionScript, Apple, Flex, Mac OS, 0 comments

overlaying VideoDisplay with constrained fluid layout

UPDATE 28 April 2010 : This subject is revisited in relation to Flex 4 spark components, here.

The problem: In Flex, how to overlay the video with something (e.g. a logo or caption) and keep the overlay relative to a corner of the actual video rectangle. Sounds like it should be a simple matter of creating a container and layering in the VideoDisplay instance and the over lay instance ? But…

In each of the following samples:

Video Display overlay Sample 1

In our first sample we simply place our overlay image using attributes ‘top’ and ‘right’ to keep the overlay’s top-right corner to 10px in from the VideoDisplay top-right corner.

code-snippet

It basically looks fine until you hit the play button and start resizing the panel.




As you can see the actual video within the VideoDisplay is constrained by its rectangle and depending on the differing aspect ratios, there will either be black space at the sides or the top, and our overlay is faithfully anchored to top right corner of the VideoDisplay and looks odd unless the aspect ratios are equal.

So how to solve this?

Looking at the documentation for VideoDisplay, there are many width and height properties to play with, however none of these relate to the current width and height or position of the contained video rectangle. You might think while looking at the documentation that the videoWidth and videoHeight properties might give the values we are after, but not so. They only return the ‘original’ width and height of the loaded video.

Fortunately the OpenSource nature of the Flex SDK and the magic of, holding the command key on a Mac (control key on a PC) with the cursor over  the <mx:VideoDisplay> opening tag, then clicking it as it underlines,  (using in Flash Builder  or Flex Builder) will open the source for the VideoDisplay component within a new editor. Browsing through the code you will see at line 198:
mx_internal var videoPlayer:VideoPlayer = null;

It is this videoPlayer instance who’s properties we need to monitor to calculate our overlay’s position. The instance is not generally exposed through the VideoDisplay component’s api. Nor is it documented. However since it has been placed in the mx_internal name space, we can actually access it with namespace notation…

videoDisplay.mx_internal::videoPlayer.attribute

Where we replace ‘attribute’ with the property name we are after, so the following would be of use to us…

videoDisplay.mx_internal::videoPlayer.x
videoDisplay.mx_internal::videoPlayer.y
videoDisplay.mx_internal::videoPlayer.width
videoDisplay.mx_internal::videoPlayer.height

Video Display overlay Sample 2

In this second sample, we create a positionOverlay method and call it from the resize event of the VideoDisplay component. Within positionOverlay we use the name space notation to get the videoPlayer properties and use some basic maths to reposition our overlay based on the top-right corner of the videoPlayer instance rather than the videoDisplay instance.

code-snippet

Additionally we call positionOverlay from our applicationComplete handler to set the initial position.




This basically seems ok, but play with it for a while and it is clear that something is wrong…

  • Resizing slowly, seems ok
  • Resizing quickly, and there seems to be some lag in the position of the overlay
  • Release the resize handle while resizing quickly and the overlay can be left behind in completely the wrong place

Having traced the videoPlayer instance properties from within the positionOverlay handler, it is apparent that while the videoDisplay properties are correct, the videoPlayer properties are as they were previously. i.e. as they were rather than as they shall be.

Video Display overlay Sample 3 – This one works properly!

This is where Player version 10 comes in. It added Event.EXIT_FRAME. (If your project targets a player older than 10, you will not see this event in your code assist.) If we use the exit frame event to defer the call to overlayPosition, we can then get measured values from videoPlayer and correctly position the overlay.

To do this I have created a new method positionOverlayOnExitFrame who’s job is to add an EXIT_FRAME listener who’s handler will be overlayPosition. The first job of which is to remove the listener, so that it only gets called once. By using a listener we need to change the interface of overlayPosition to accept an Event argument. But we are not interested in the event information and we still wish to call positionOverlay directly, so we have allowed the argument to have a null default.

code-snippet

Playing with the resize handle now, no-matter how quickly it is moved, shows no lag, and always drops in the correct place.




Finally, just to re-iterate, source code zip for these examples is here.

Note: These samples were built against Flex SDK version 3.4.

Note: I haven’t found any official documentation relating to when Event.EXIT_FRAME arrived in the player runtime. The Flash CS4 documentation for Event.EXIT_FRAME indicates player 9. However unless you target player 10 in Flex/Flash Builder, you will get compile errors. If anyone has accurate references, please post to the comments – thanks.

Note: When you look at the source view, it appears ragged. This is because in creating the HTML, Flash builder simply converts tab characters to four space characters. Clearly not every tab in my code actually represents 4 characters and therefore what should look like neat columns becomes ragged. I have filed a bug/enhancement request. If you too would like this fixed, feel free to add your vote to FB-23060.

Posted by creacog in Adobe, Flex, Flex 2, Flex 3, Flex Components, 1 comment

No CMD-SPACE in Flash Builder since Snow Leopard

Ok so CMD-SPACE is the default short cut to launch Spotlight. But I wanted that combo for ‘content assist’ with Flex/Flash Builder. Until installing Snow Leopard, that is what I had for a few years, and Spotlight relegated to CTRL-SPACE. However since SnowLeopard, the CMD-SPACE combo is not transmitted to Flash Builder. I assume this is down to Snow Leopard somehow reserving the combination. So begrudgingly I have returned to defaults…

Spotlight : CMD-SPACE
Flash Builder content assist : CTRL-SPACE

Posted by creacog in Flash Builder, Flex Builder, Mac OS, 3 comments

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.

Posted by creacog in ActionScript, Flex 3, Flex Components, 0 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

Posted by creacog in ActionScript, Flex, Flex Builder, Flex Components, OpenSource, Projects, 0 comments

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 );

Posted by creacog in ActionScript, AIR, Flash Platform, Flex, Flex 3, Mac OS, 0 comments

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.

Posted by creacog in ActionScript, Flex, Flex Builder, Flex Components, OpenSource, Projects, 1 comment

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.

Posted by creacog in ActionScript, AIR, Flex, Projects, 0 comments