Archive for the ‘Flex 2’ Category.

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.

what the feck is AOO TLP ?

(Update: 28/10/2008 here)

Having been chastised for using these ‘unknown acronyms’ in my comment on jd’s weblog, I thought it worth writing a brief entry describing what these acronyms stand for and how they may be of interest for those purchasing or upgrading Adobe software.

Essentially this is all to do with volume licensing as an alternative to purchasing products through the Adobe store or other 3rd party suppliers. Volume licensing sounds like it is aimed at large organisations purchasing site-license. However the Transaction Licensing Programme facilitates as little as a single product license. The way the scheme works is to provide a transaction discount should you purchase multiple products in a single transaction based upon a point value for each product. TLP purchases may be made through 3rd party suppliers, but also through Adobe directly as in my case. There is no published price list so you need to request a quote.

The key point of interest to me was the Upgrade Plan which allows licenses to be purchased over 24 month subscriptions. Essentially this means I effectively have already paid to cover my CS4 upgrade. This is the point I was trying to make on jd’s weblog. He acknowledges that trial versions of CS3 products not being available until mid November is a ‘Pain point’ and he provides some explanation including the phrase “The big shipping versions get released first.”. Well I’m a AOO TLP upgrade licensee who’s just been told I may have to wait until the ‘end of November’ for it to physically ship to me. If it is painful for ‘users’ who haven’t paid for the software yet, imagine the pain for those who have paid for the software, but may have to wait until the end of November.

So while the Upgrade Plan offers some value, fulfilment seems less than ideal especially given this Key benefit documented on the Adobe site: “Get timely notifications of new upgrades, so you can stay on top of new product releases.”.

This is now my latest bug-bear. For Adobe to see how the customer experience could be improved in this regard, they need only look back to the now discontinued Macromedia DEVNET Pro subscription, where serial numbers and downloadable installers were immediately available to subscribers from day one of a new product shipping.

If this was fixed, I could now be blogging about cool new stuff in CS4 rather than  fuming over this and wondering if I would actually be better-off purchasing through conventional means.

UPDATE : 28/10/2008

Received my Adobe License Fulfilment email on 26th. Logged in and was able to request media for the upgrades, but at the time couldn’t see serial numbers or any way of downloading. However just checked again today, and the serials are there and I now have downloads in progress – and at a good bit-rate. So I’m feeling a lot happier now than when this post was originally published. While the process has not been entirely seamless, this time is far better than my previous experience with CS3 where I had to wait for physical media.

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!

A flurry of events : Adobe/Flash/Flex

A busy few weeks starting tonight:

  1. [Thurs 21-Feb-2008] LFPUG – Thermo Special presentation from Adobe
  2. [Mon 25-Feb-2008] Adobe sponsored Pokercoder Tournament II  – you need to be a professional user of Adobe products to join in
  3. [Thurs 28-Feb-2008] LFPUG – presentations on ‘Successful Flash Games’ and ‘Practical Particle Effects with Flint’
  4. [Wed 5th March] FLUG – Beer, presentations and chat about Flex

sensible(ish) code print from flex builder (on MacOS X)

Continuing the theme of occasional Flex Builder hints and tips…

Occasionally I need to see code printed on paper. Unfortunately the printing capabilities of Flex Builder, or more specifically in this case, Eclipse, are a bit messy…

  • the font is huge, and only 49 lines fit on an A4 page
  • if you have a background colour set to your code window, it gets printed – decimating your ink-tanks
  • printing is a two dialogue process – you have to go through Page Setup each and every time.

Of course in the actual Print dialogue, you have the standard Mac ability to change the page layout, paper handling etc, and save that detail in a pre-set. However…

The key things I want to achieve is to print 2up full duplex black and white, which gives me four pages of code per sheet of A4, and with a slightly smaller font size I get a more respectable 68 lines of code per ‘page’.

However I’ve found the following approach, once set-up, a little more convenient, and becomes a one-click print…

The Mac has a GNU enscript installed which converts text files to PostScript to send directly to CUPS. In my case I had to update the old Gimp-Print drivers to the current Guten-Print drivers in order to achieve duplex printing.

More information on Guten-Print and access to the drivers on SourceForge. The DMG contains good documentation and a simple package installer.

Once the new drivers are installed, and I’d recommend a new, additional, print queue be set up with appropriate defaults for your code printing, you need to set Eclipse to run an external script to print the currently active code window. From the menu: Run > External Tools > External Tools…

  • Name: enscript
  • Location: /usr/bin/enscript
  • Arguments: -2rT4v -DDuplex:true -diP5000 ${container_loc}/${resource_name}

Obviously you’ll need to tweak the arguments according to your personal print configuration.

External Tools Dialogue

option up and down

Kicking myself for not finding these sooner so, posting in line with the current trend of highlighting little Flex time-savers. Two ActionScript editor short-cuts (and probably apply to any Eclipse code editor?)…

1. Select some code in the ActionScript editor and press Option-Up or Option-Down, and the selected block of code gets moved accordingly. Or just place the cursor on a line if you only wish to move a single line. Saves a load of messing with Cut-Paste.

2. Need to duplicate a line? Place the cursor at the start of the line and press either CMD-Option-Up or CMD-Option-Down, and the current line (or selection if you have one) gets duped above or below the cursor respectively.

With either of the above, if you make a selection, you don’t need to be character accurate. The movement is applied either to the line touched by the cursor, or the lines touched by the selection. i.e. If you select part of a line, the whole of that line is included in the selection to be moved.

flex, mac, external browser

Ted Patrick has been quite prolific of late at publishing little productivity hints and tips. I think this one from a couple of weeks ago is worth echoing and noting the workaround for the problem it raises on a Mac.

We are setting up Builder to launch the help pages into an external browser. The key advantage of which being that the code samples can then be copy/pasted. On a Mac there is a recognised bug in eclipse that if you choose Firefox as the external browser, and it is NOT your normal system default browser. Basically Eclipse attempts to launch a second instance of Firefox which will generate the “Only one copy of Firefox can be open at a time” dialogue…

Firefox close dialogue

So to get around this, you have two options.

Option 1, if you have Firefox as your default browser for the entire system, simply choose “Default system Web browser” in the Eclipse preferences panel.

Option 2, if you want to keep something else set as your system default browser e.g. Safari, but would use Firefox for displaying Flex Builder help, you need to either edit or create a new external browser entry using a command structure as per comment 5 on the eclipse bug sheet. Essentially the following settings work…

  • Location: /usr/bin/open
  • Parameters: -a firefox %URL%

Flex Builder > General > Web Browser >Edit external browser

flash, flex and vice versa

I have a small AS3 project where I need to keep the SWF quite small. I really want to use the Flex Builder environment to do the coding, and ultimately produce a target or targets suitable for inclusion both in Flash and/or Flex projects.

Two very helpful posts of the last couple of days with respect to setting up a suitable environment:

essential actionscript 3 published today?

I don’t have my hands on it yet. I do have it on pre-order. Although at time of writing, Amazon is still showing it as ‘not yet published’, today is the official publish date. If it’s predecessors are anything to go by, this really will be the one book any ActionScript programmer should always have to hand. For more information and samples, check the author’s blog.

Update: Must be in high demand! Going to have to wait until at least 11th July 2007 for my copy.

Update (14 July 2007): my new “Estimated arrival date: 25/07/07 – 30/07/07″ from Amazon.

tile or repeat an image into a flex application background II

Back in November 2006, I made a step-by-step post of how to locate, copy and adapt the ApplicationBackground class from the Flex SDK, in order to tile an image across that background.

This is simply an update to that post, this time with source-code and the addition a sample of a tile image within a Canvas. You are free to take and re-use this code as you see fit.

The following examples use a programmatic skin approach, and rely on the image being embedded at compile time. This is a quick and dirty method. For more information on programmatic skins, please refer to Aral Balkin’s Quick-Start on the Adobe site.

You can get your hands on the source with a right-click (control-click on a Mac) on the following examples.

Application tile background

In this sample we have created our own ApplicationBackground class and and applied it within the Application tag. You can change the repeat policy by uncommenting the appropriate line within uk.co.creacog.skins.ApplicationBackground . Choose this link if you wish to view example 1 in a new window.

You need JavaScript and Flash plug-in 9 to view this sample.

Canvas tile background

The key thing to be aware of is that the component background is actually controled by the a decorator class primarily designed to control the component border. So in this example we are applying our uk.co.creacog.skins.CanvasBackground to the borderSkin of the Canvas component. I added a slider to control the corner radius to demonstrate that we can have both rounded corners and a tile background. Note: that the borderStyle of the the Canvas need to be set to “solid” in order for the borderSkin to be invoked. In addition the onus is upon us as the programmer of the skin to respond to the cornerRadius values. In this case by calling drawRoundRectComplex.

Should we need a drop-shadow, again the onus is upon us to implement it within our custom skin. I did not take the example that far. The information you need to do so is in Aral’s article.

Again, choose this link if you wish to view example 2 in a new window.

You need JavaScript and Flash plug-in 9 to view this sample.

Other ways

Other authors have documented approaches with variations which might suit you better. You may find the following useful…

If you know of better ways, please do add links to the comments.

I haven’t got my hands on the Flex 3 beta yet. I have my finger’s crossed that these approaches might become obsolete with the new framework?