Flex 3

21
Sep
2009

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
21
May
2009

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
13
Mar
2009

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
21
Jun
2008

AIR update Framework (beta), locating config file

When using the Adobe AIR Update Framework for the first time, you will be stepping through the associated documentation. You will probably initially decide to use a configuration XML file to govern the update process. The documentation presents the following line to inform the framework of the location of your config file:

Point the configurationFile property to the location of that file: as in the following ActionScript:
appUpdater.configurationFile = new File("cfg/updateConfig.xml");

If you are familiar with the File class, you will see that this is likely to generate a run-time-error, especially when testing in adl…

ArgumentError: Error #2004: One of the parameters is invalid.
at Error$/throwError()
at flash.filesystem::File/set nativePath()
at flash.filesystem::File()

If you are like me, you’ll probably want to place the updateConfig.xml file within the application directory next to the *-app.xml file. If so, the line of code you need can be written:

appUpdater.configurationFile = new File( File.applicationDirectory.resolvePath( "updateConfig.xml" ).nativePath );

or more compactly, using the “app:/” url scheme:

appUpdater.configurationFile = new File( "app:/updateConfig.xml" );

Posted by creacog in AIR, Flex, Flex 3, 0 comments
19
Jun
2008

more mvc with lfpug

Over the past few months I’ve been getting my head around the likes of Cairngorm, PureMVC and better use of design patterns in general. So looking forward to tonight’s LFPUG to see what the Slide Framework For Flex adds to the mix. The other stuff on large datasets looks pretty good too!

Posted by creacog in ActionScript, Adobe, AIR, Flex, Flex 2, Flex 3, Flex Builder, User Groups, 0 comments
18
Jun
2008

Flex and AIR updates

A little while ago I got around to building my version of an alert tool sampler, using it as an exercise to learn Cairngorm. (The documentation for which I have found particularly poor with the exception of a few gems such as David Tucker’s excellent Cairngorm ‘Getting started’ tutorials.)

Typically AIR developers will all want to take advantage of the Update capability, but in it’s original form requires some work. Rich Tretola’s UpdateManager did the job, but I wanted more programmatic control, interception of events and a slightly different UI work-flow, and set about creating my own.  Just as that phase of the work is completed, I find Adobe’s Update Framework on labs which although beta, does a much better job. I wish it was there a week ago.

Also, I just took the opportunity to update to AIR 1.1. Unfortunately updating Flex to use the new AIR is a little messy (in that it requires manually copying some files rather than running an installer) and means moving to the 3.0.2 stable build of the Flex SDK. However it is not difficult and the instructions to follow are here.

Posted by creacog in Adobe, AIR, Flex 3, Flex Builder, 1 comment
16
Apr
2008

Flex / AIR / DataGrid / itemEditor bug?

If you are using DataGrid in a Flex/AIR application, the chances are you will at some stage hit the following RunTime error…

TypeError: Error #1010: A term is undefined and has no properties.

.. with a traceback indicating the error occurred within DataGrid.as. At which point you will stare at your own code for a while and wonder why.

In my circumstance I pinned this down to clearing the contents of the data provider and repopulating when there is an item renderer active on the DataGrid. A use-case that probably doesn’t come up that often in web-based Flex apps, since if the user clicks another control to trigger an update, the item renderer is exited at that point and the edit committed prior to the dataprovider changing.

In an AIR app, we have native menus available to us. When the user employs native menu selection, the item editor remains active. If that menu option triggers a repolpulation of the data provider (use-case example File>Open), we then get the error.

The workaround is pretty simple. A call needs to be made to destroyItemEditor() on the DataGrid instance before repopulating it’s data. In a simple application this is no great problem. But if you’ve gone to the effort of using something like the PureMVC framework to separate Data Object from View Components, the data object isn’t supposed to have any knowledge of the view. So in my case thefix is quite crude – when issuing the open command, a notification to destory item editors will be issued so any view component that uses them may destroy their editor prior to the repopulation.

My contention is that it should be the responsibilty of the DataGrid to destroy the item editor if the dataprovider updates.

I have this logged as a bug with Adobe (SDK-15280), along with sample code demonstrating the issue. Feel free to review and vote for the bug if you are in agreement with my point and comment further therein if you disagree or have better suggestions to offer.

Posted by creacog in AIR, Bug, Flex 3, Flex Builder, 0 comments
20
Mar
2008

finding documentation on implementing native menus in Flex/AIR applications

When you come to build your first Flex/AIR application that needs a native menu (Application menu on a Mac, or Window menu on a Windows PC), you’ll probably find your way to the “Windows, menus, and taskbars” section within the documentation. From there you’ll navigate to “Working with native menus” and spend some time studying “Creating native menus” before going on to view the example code. At this point you’ll probably have a shock at how much AS3 code needs to be written to implement such a simple menu. Not at all what you are used to in Flex.

If you are thinking there must be a way to do this using a component. You’d be right, but it is documented in the “Using the Flex AIR components” “About the FlexNativeMenu control“section not the “Windows, menus and taskbars” section.

Posted by creacog in AIR, Flex, Flex 3, 0 comments
25
Feb
2008

DragManager workaround in final Flex3/AIR1

With today’s availability of release versions of Flex 3 and AIR 1, I’ve finally had a chance to apply the DragManager workaround that I had a moan about last month.

The flex documentation presents three configuration options for DragManager in AIR projects…

[Extract]

  1. Your main application file uses the <mx:Application> tag. In this scenario, you use the Flex drag-and-drop manager, and cannot drag and drop items from outside of AIR.
  2. Your main application file uses the <mx:WindowedApplication> tag. In this scenario, you use the AIR drag-and-drop manager, and can drag and drop items from outside of AIR.
  3. Your main application file uses the <mx:Application> tag, but loads the AIR drag-and-drop manager as represented by the mx.managers.NativeDragManagerImpl class. In this scenario, you use the AIR drag-and-drop manager, and can drag and drop items from outside of AIR.

Sounds all well and good. Except to use <mx:Application> within AIR, you lose functionality. For instance in my case while the window was re-sizeable, the content remained at the default size. What I really need is to use <mx:WindowedApplication>, but with the Flex DragDrop manager. A scenario not represented in the documentation.

Fortunately the workaround with files described in bug SDK-13983 so-far appears to work. However it is worth noting that in using it, a number of mxml tags change their namespace from mx to comps. In my case this affects

  • <mx:states>
  • <mx:transitions>

which then become

  • <comps:states>
  • <comps:transitions>

Possibly my reliance on this approach is due to the now legacy nature of the project – it was written in advance of the Apollo 1 alpha. However apart from this issue, very little has had to be re-written through the beta cycle of AIR.

Posted by creacog in ActionScript, Adobe, AIR, Flex, Flex 3, Flex Builder, 2 comments