Archive for the ‘ActionScript’ Category.

a shout to my corporate site

creative-cognition

After a number of years of content-neglect, and problems of client confidentiality, I’ve finally got around to posting up a case-study covering some simple Flash based work samples. (Note: work samples, not code samples). Flash platform case-studies will be being posted more regularly here on in. But kicking off now with three bespoke user-interface elements : A special accordion, a minimal bouncing menu and a HTMLtext text builder.

The user-interface elements presented may not set the artistic Flash world on fire, but each represent very specific design solutions. They were also interesting and fun to programme.

Bespoke user-interface elements.

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.

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?

good stuff coming in the form of Flex 3

It was pretty good to see some of the new stuff coming in Flex 3 during the developer day this week at Adobe Live London. We were a tough audience and didn’t give much of a WOW feedback – sorry! Largely I think because much of the new stuff demonstrated I think we might have claimed a right to expect – such as re-factoring support and improved work-flow with the rest of CS3.

Not covered on the day, but would have got a WOW from me is ‘Framework caching’, described by Ted on Flex today.

To me this was not expected, however I tend to think it has been a long-time coming and is one of the most significant improvements within Flash Platform in a long time. I came to Flash very late (MX2004) and primarily worked with components. (I came to Flex even later – V2.) It always struck me as a little odd that Adobe/Macromedia placed such great emphasis on keeping the plugin download small which then had the knock-on of vast quatities of band-width wasted as the same component code is transmitted time after time and where you least desire it -hitting the load time of your SWF. However now being able to cache the framework now means only the code specific to the application need be transmitted. Much more net-friendly. I can’t wait!

adobe visit lfpug

Adobe Special – 17th April 2007

Presenters from Adobe: Mike Downey and Steve Burnard.

One not to miss!

LFPUG looking good yet again…

Accessibility was always one of my chief concerns back when my work was XHTML/CSS. Since moving more into ActionScript development it has I’m afraid to say slipped somewhat, relying on the usual approach of Flash site with HTML backup. Niqui’s presentation I hope will help me get back into the habit of integrating accessibility into the process and maybe get away from needing a HTML backup?

The LFPUG presentations 29th March 2007

  • A Usability Approach to Accessible Flash (19:00 – 20:00) – Niqui Merret
  • Lighten up: Rediscovering Fun ( 20:15 – 21:15 ) – Aral Balkan

keeping Flex documentation up-to-date

Just a quick post of a blog feed that should be on any Flex developer’s feed reader:

The current article lists all the locations for the official documentation. A recent posting of an update to the Data Binding documentation is IMO an essential read.

as3cb errata

Don’t get me wrong, ActionScript 3.0 CookBook is damn good, and one of the few AS3 books published to-date. However it is a first edition and does contain errata – probably due to having been written against an alpha or early beta version of Flex2 / AS3. I reported those I had found to O’Reilly some weeks ago, but at time of writing this article they have yet to be published to the errata page.

In future any significant errata I beleive I have found in any book (where the publisher has yet to make them available) I will report on this blog under the tag errata so anyone wondering why certain things don’t work, stands a chance of finding them with a Google.

1. Incorrect description of graphics.lineStyle()

This error is present throughout chapter 7. On page 182 the thickness parameter is described as having a default value of 1. Throughout chapter 7 code samples use the line:
sampleSprite.graphics.lineStyle()

I believe this line should read:
sampleSprite.graphics.lineStyle( 1 )

As from the Adobe documentation:

thickness:Number — An integer that indicates the thickness of the line in points; valid values are 0 to 255. If a number is not specified, or if the parameter is undefined, a line is not drawn.

Therefore using lineStyle as presented in as3cb will result in no line being drawn where a line of 1px thickness was intended.

2. doubleClick description

Not really errata, but the following would have benefited from one crucial extra piece of information:

Page 169, the description of doubleClick.

Generated when the user presses and releases the mouse button twice in rapid succession over the interactive display object

The above quote is true, as long as the developer has previously set the doubleClickEnabled property of the interactive display object to true. If not, no doubleClick event is fired. Considering the target audience of this book – quite an important point to mention.

3. ColorTransform

Pages 76 and 77

With regards to the ColorTransform instances, the code samples make reference to an ‘rgb’ property. No such property exists. The property the author is intending is ‘color’ which returns an rgb value represented in type uint.

tile or repeat an image into a flex application background

UPDATE: There is a revised version of this post here, which you might find more accessible. It also includes a tile into the background of a Canvas.

I’ve only been using Flex for a few weeks via the Flex Builder Beta for the Mac. While I am really impressed with the ease of use of the framework, and now something of a convert, I was suprised by the apparent inability to tile (or repeat) an image over the background of the Application.

I tried a number of approaches which I now look back on as naive. I haven’t at this point managed to find a documented solution by googling. Though as responses to this post show (update: source now published), there seems to be interest in finding a solution.

So here is one solution. I don’t claim this to be ‘best practice’. Far from it. But it works, and will suffice for me until I am more familiar with Flex.

  1. Locate your flex installation, then Flex SDK 2/frameworks/source
  2. From here navigate the package structure to mx.skins.halo
  3. Duplicate file “ApplicationBackground.as” to a suitable location within your project file structure. In my case saved to ‘{projectroot}/com/ct/skins”
  4. Edit your local copy as per the following notes

Adjust the package detail

In my case the package line now reads:

package com.ct.skins

Add some imports

We need the following import lines to access the bitmap data:

import flash.display.Bitmap;
import flash.display.BitmapData;

Remove the version include

Because we are working outside the structure of the halo skin collection, we no-longer need or want the following line:
include "../../core/Version.as";

Embed the image and declare some variables

In this case I am embedding the image at compile time:

[ Embed( source='/assets/BackgroundLines.png' ) ]
private var backgroundImageClass :Class;
private var backgroundImage :Bitmap;
private var backgroundBitmapData :BitmapData;

Modify the constructor

In our constructor, after the call to ‘super()’ we need to get the bitmap data of the image into the backgroundBitmapData variable, we do this by first creating a Bitmap instance of the embedded image in backgroundImage, then drawing the data into backgroundBitmapData:

backgroundImage = new backgroundImageClass();
backgroundBitmapData
= new BitmapData( backgroundImage.width, backgroundImage.height );
backgroundBitmapData.draw( backgroundImage );

Clear out and replace the content of updateDisplayList

The only line we need keep is the super call. Everything else can be replaced with the following 4 lines:

var g:Graphics = graphics;
g.clear();
g.beginBitmapFill( backgroundBitmapData );
g.drawRect(0,0,w,h);

Now we just need to apply it.

All we need to do is point the borderSkin attribute of the mx:Application tag to this new skin. In my case the attributes of mx:Application look like this:

xmlns:mx ="http://www.adobe.com/2006/mxml"
frameRate ="36"
layout ="absolute"
borderSkin ="com.ct.skins.ApplicationBackground"

Bob’s your uncle!

I’d appreciate comments on a better practice approach.

Further reading: