Category: Flash

Inside a ScrollPane I created a series of input TextFields and gave each an instance name, a unique tabIndex and set tabEnabled to true. The end result was supposed to be a list of input TextFields you could easily tab through. No such luck, seems the cursor just gets stuck in the first TextField. Found a handy forum post where someone states you have to set tabEnabled and tabChildren for the TextFields immediate parent as shown in the following code, note that “this” should be the path to the TextFields immediate parent:

this.tabEnabled = false;
this.tabChildren = true;

I’ve never really had much use for the Flash DataGrid until a recent project. One of the tasks involved updating a field of a certain row. I was doing it like:

this.datagrid_clinicians.dataProvider[clinician_index].total_presentations–;

Essentially, there is an array of objects. One of the object properties is called “total_presentations”. The above line tell a specific DataGrid row to decrement it’s total_presentations property by one. That works as expected except that the actual field doesn’t change visually until you roll over/off the updated row which looks rather bad. Calling invalidate or redraw on the DataGrid didn’t help. Turns out I’d simply overlooked a DataGrid method called editField. The above line can be rewritten:

this.datagrid_clinicians.editField(clinician_index, “total_presentations”, this.datagrid_clinicians.dataProvider[clinician_index].total_presentations – 1);

A bit long winded compared to the first option but it seems to redraw the cell instantly. I just totally missed this method when reading the docs. Luckily I only had to change it in a few places, later on it would of been alot more trouble.

Everyone knows that to update your browsers Flash player you just need to visit the Adobe site and follow the “Get Flash” links. Pretty simple stuff, however doing this does not update the Player that the IDE uses, which is the same one used when you open a swf on its own off your HDD. It’s a wee bit more fiddly to update that one and I didn’t find anything directly relating to how to do this so I thought I’d cover it here for future Flashers¬†ūüė¨

The first step is to head over here and find the relevant version of Flash for yourself. In my case it’s CS3.

Currently for CS3 the top most update is the “Adobe AIR 1.1 Update”. Just under that is the “Adobe Flash Player Update for Flash CS3 Professional”, that’s the one we’re after. Download that zip, it’s around 42MB.

Once downloaded, unzip it and you’ll have 3 directories and 2 files.

Make sure the Flash IDE is closed and then head to your Flash IDE directory:

// XP
C:Program FilesAdobeAdobe Flash CS3Players
// Vista
C:Program Files (x86)AdobeAdobe Flash CS3Players

You can check your current Flash Player version by running the FlashPlayer.exe file, choosing Help->About and then looking at the version number there. For me it was 9,0,115.

You’ll notice that it has the same 3 directories and 2 files. Delete all of those and then copy the ones you unzipped into there so it ends up looking the same although with the newer files.

You’re all done. Your IDE player has now been updated.

I’m not sure if you can copy the Flash Player 10 files into there, it might have unexpected consequences. For now I’d just say switch to CS4 if you really want that.

Just had to desaturate a clip and then return it to normal. Code wise it’s rather simple, the following turns a MovieClip with an instance name of test to grey:

// Make Grey
var r:Number=0.212671;
var g:Number=0.715160;
var b:Number=0.072169;

var matrix:Array = [];
matrix = matrix.concat([r, g, b, 0, 0]);// red
matrix = matrix.concat([r, g, b, 0, 0]);// green
matrix = matrix.concat([r, g, b, 0, 0]);// blue
matrix = matrix.concat([0, 0, 0, 1, 0]);// alpha
test.filters = [new ColorMatrixFilter(matrix)];

To return it to the default state just clear the color matrix:

// Return to normal
test.filters = [new ColorMatrixFilter()];

One of the sites I’ve been working on recently introduced a couple of Flash elements to the layout. I’ve been using SWFObject 2 to write out the HTML to the page for these. Works fine in IE7, FF2, FF3 and Opera 9 but IE6 refuses to load the page. I viewed source on the page and noticed that Joomla had been outputting a HTML base tag. Experience told me that was a big no-no in terms of SWFObject. I thought I could just edit the base tag inside the template. Nope. Turns out it is added automatically by Joomla as part of its Header object. The fix is pretty simple and once done will apply to all the templates, this site uses 11.

Navigate to: /libraries/joomla/document/html/renderer/head.php
Find this line (line # 67 for me):

$strHtml .= $tab.'<base href="'.$document->getBase().'" >'.$lnEnd;

Change it to this:

$strHtml .= $tab.'<base href="'.$document->getBase().'"></base>'.$lnEnd;

That’s it. Still works across all the previously mentioned browsers as well as IE6 and as a nice bonus it still validates under the XHTML 1.0 doctype.

Edit: I’ve written an updated version for the latest Joomla release, read about it here.

Recently a few people have asked me how to prevent that flicker of a white box just prior to the swf file being loaded in a browser. It’s quite noticable against a dark HTML/CSS background color. The simple fix is to set the bgcolor property via HTML. If you’re using the old skool Flash generated HTML then you should add this param to the others. Also remember to set the value on the embed line.

<param name="bgcolor" value="000000" />

Here’s how to do it with swfobject:

swfobject.embedSWF("your-file.swf", "div_id_to_replace", "1024", "768", "9.0.0", "expressInstall.swf", {}, {bgcolor:"000000"});

It works best on a flat color background. A recent project I was on involved a solid black (0x000000) background. Even though the background for the Flash document was set to black via the IDE it still flickered white slightly prior the swf data being read. The fix for me was to add the parameter to the swfobject call.

The same easy fix doesn’t really work on a textured background since it would just set it to be a solid block. My advice for here is to just pick a color that ties in nicely with your theme. The point here would be that it doesn’t have to be the default white.

Quick note on how to get FlashDevelop to provide auto-completion and the other tweaks for the Flash CS3 fl classes including the Tween class. Inside FlashDevelop tap into the menu:

Tools->Global Classpaths (CTRL-F9)

Pick AS3 from the dropdown box and then choose Add Classpath. Navigate to:

C:Program Files (x86)AdobeAdobe Flash CS3enConfigurationActionScript 3.0Classes

Then repeat for the Air classes here:

C:Program Files (x86)AdobeAdobe Flash CS3enConfigurationActionScript 3.0 AIR 1.0Classes

Those are my Vista 64 paths, you probably have to change them to start with C:Program FilesAdobe under 32bit Vista or XP. Once those two paths show up in the box you can click OK. You should now have instant access to the code-completion system with these classes.

Edit: I’ve found 3 more paths that are useful to include in the global classpath:

C:Program Files (x86)AdobeAdobe Flash CS3enConfigurationComponent SourceActionScript 3.0FLVPlaybackfl
C:Program Files (x86)AdobeAdobe Flash CS3enConfigurationComponent SourceActionScript 3.0FLVPlaybackCaptioningfl
C:Program Files (x86)AdobeAdobe Flash CS3enConfigurationComponent SourceActionScript 3.0User Interfacefl

These are used for various component classes such as the VideoPlayer and FLVPlayback components. You still have to drag and drop the component to you library for Flash to successfully publish your file. The purpose of including them in the FlashDevelop global classpath is simply to enable code completion and syntax highlighting when using those classes.

Edit 2: I’ve updated to FlashDevelop 3.0.0 beta 9 and Flash CS4. In CS4 the class paths are quite different, so far I’ve only setup the basic Flash classes, component classes and the FL libs which include the Tween class. The three paths I use are:

C:Program Files (x86)AdobeAdobe Flash CS4CommonFirst RunClasses
C:Program Files (x86)AdobeAdobe Flash CS4CommonConfigurationActionScript 3.0projectsFlashsrcfl
C:Program Files (x86)AdobeAdobe Flash CS4CommonConfigurationComponent SourceActionScript 3.0

I’ve been using the following method of instantiating classes for a few years now. It’s never proven a problem until recently. I’ll start off by detailing the circumstances that lead to me using this setup. I write about 95% of my code in external .as files. I store all of these in a directory called Source within each projects main directory. Inside Source I’ll create sub directories which lets me package the various classes. For the classes that require actual drawing on Stage I create an empty MovieClip in the library and give it an instance name of classClip. Each time I want to instantiate one of my MovieClip based classes I associate that clip with the class and then create an instance of it on Stage.

Continue reading “ActionScript 2 Class Caching Problem”

Over the years I’ve had numerous clients who have wanted Flash solutions that adjust their layout based on the current browser dimensions. This can take many forms such as resizing a background image proportionally through to re-configuring a menus structure. This quick tutorial will show you how to use Flashes onResize event to control the positioning of your components as the screen is resized whilst at the same time showing you how to handle this on the HTML/CSS side of things with a forced minimum width and height.

The first step is to setup your Flash file. We want to disable the automatic scaling Flash uses and glue the movie to the top left corner of it’s parent HTML container. That is achieved with these two lines:

Stage.scaleMode = "noScale";
Stage.align = "TL";

Now we need to handle when the screen is resized. We create a function that will re-position our components based on the updated Stage.width and Stage.height properties. For the sake of keeping this tutorial simple that function is stored on the first keyframe of the main stage. We then add the main stage as a listener of the Stage object so that it will get called automatically when the screen is resized. You can associate several objects to listen for this event although for now we’ll just use the one:

function onResize():Void
{
// Right box
this.box_right._height = Stage.height;
this.box_right._x = Stage.width-10;
// Bottom box
this.box_bottom._width = Stage.width;
this.box_bottom._y = Stage.height-10;
// Centered Arrows
this.arrow_centered._x = Stage.width*0.5;
this.arrow_centered._y = Stage.height*0.5;
}
Stage.addListener(this);
this.onResize();

We call onResize at the start to re-position everything initially since without doing that it would mean they would all just sit where they were placed during design time. In this example we dropped two boxes and a four point arrow on the stage. One box gets scaled to the height of the movie and stuck to the right hand edge. The other box gets scaled to the width of the movie and stuck to the bottom edge. The four point arrow is positioned centrally. That’s all there is to the Flash side of things. The really tricky part is the HTML/CSS handling.

A lot of people will just give the Flash object a width and height of 100% when they add it to the HTML. This does not work in all browsers and can result in it not being shown at all. Another pitfall is that you get around the issue I just mentioned but then realise you want to force a minimum width and height. In Flash this is simply a matter of sticking a conditional in there:

if(Stage.width > 400 && Stage.height > 200)
{
// resize
}

It gets a whole lot trickier with CSS. The way I’ve chosen to use is simply to wrap the whole thing in a single table. You create two columns inside two rows (so really that’s four columns). In the first column we stick the Flash object. The next column holds a transparent 1×1 image that has it’s height set to my desired min-height. The first column on the second row holds another instance of that image but this time with its width set to my designed min-width.

The end result should be that if your screen width, height or both are greater than the specified minimums then the Flash object will stretch to fill the extra space. The actual components within the file will not get stretched but instead repositioned. If either the width or height of the browser is less than the minimum value it stops shrinking the Flash object and shows scrollbars for the relevant axis.

Some people might do some minor CSS tweaks and be happy but I wanted to make sure it works in all of my test browsers. I’m not going to get into explaining it too deeply as there’s a lot of code in there. Let’s just say that most of the CSS file is needed for this to work. The HTML structure shouldn’t really be changed although there’s nothing stopping you moving the table into another container. Just be sure to set the width and height attributes for all the parents in it’s tree. The key thing with my setup is to set your min-width in the CSS files “table” class and your min-height at the bottom. In the HTML you have to set the min-height for the div that surrounds the Flash object. You have to set the min-width and min-height for both of the image tags as well as the their containing columns. In total there are 7 places to set the width/height to enforce the minimum values.

The CSS and HTML pass the W3C validators, quirks mode is not enabled and it uses the XHTML 1.0 Transitional doctype. I’ve tested it on both Windows XP SP2 and Vista 64 using Internet Explorer 6, Internet Explorer 7, Firefox 2 and Opera 9.

I do confess to using a single CSS hack; the star html one. That’s right at the end of the CSS file and is used to force the height of the Flash content to the min-height value in IE6. Without doing that it would roll upwards and leave a big block of empty space at the bottom. Opera 9 is somewhat glitchy when vertically resizing the window. If you start with the window not maximised but larger than the min height, then resize it upwards so it’s less than the min-height. Now resize it back above the min-height. Occasionally this will make it stick at the min-height. The way to pop it back to normal is to either (a) refresh the page or (b) resize it horizontally or diagonally. It happens randomly enough that I’m happy to say it’s an Opera specific glitch and that it doesn’t directly affect usability since the min-height is still available.