FlashDevelop 3.0 Beta

Yes this has been the weekend of Flash technology...

I've been messing with ActionScript 3 today as I read through Essential ActionScript 3.0 and Programming Flex 2. Being one to be easily distracted by shiny objects, I found a shiny object. FlashDevelop 3.0 is in beta and it works pretty nicely. I'd messed with FlashDevelop 2.0 but hadn't used it in quite a few months. I downloaded 3.0 tonight and it works great with Flash CS3! You can create a Flash IDE project from a template. It works better than the Flash code editor (so did the previous version). It makes coming up to speed on the new APIs much easier.

Flex 2 States

I've been learning a little about Flex 2 this weekend while working through O'Reilly's Programming Flex 2 by Chafic Kazoun and Joey Lott. There's always a big gap between working through a book and doing a real project when it comes to technology.

That said, one feature of Flex 2 that I think is implemented quite well is states. From my practice, it seems Adobe has implemented the concept in a straightforward manner. States relate to the view. You create different states for different modes your program is in. A program can only have one current state at a time. I'm impressed at how easy it is to set up a series of states and switch between them. When you do switch between states, the different controls on a state preserves its own state, i.e. a checked CheckBox remains checked whether it is part of the active state or not. I look forward to seeing whether I feel the same in actual practice.

Self-portrait in Flash

In the spirit of the Old Masters (who often did self-portraits for practice), I did this as an exercise to improve my Flash illustration skills. I initially did two self-portraits, one on each weekend, then last week I merged the best qualities of each.

This piece made it into the CartoonSmart.com student gallery. Click on my image above to see the Flash version on my website. The Flash version is under 15KB in size, smaller than the JPG above.

ActionScript 3.0

I'm finally able to begin getting into ActionScript 3.0 (AS3). As I do, I'm amazed at the Java influence (with some C#).

Funny thing. My first AS3 project started as a very simple click a MovieClip and go to the next frame. No surprises there, right? LOL!

My simple:

stop();
trading.onPress = function(){
 this.play();
};

Became:

stop();
function nextScreen(event:MouseEvent):void{
 this.play();
}
trading.addEventListener(MouseEvent.CLICK, nextScreen);
trading.buttonMode = true;

While not that much more syntactically, definitely different and a big jump towards the Java way. Having taught Java for two years, I don't mind it. But I am curious how other folks will like it.

This was enough of a change to make me pick up O'Reilly's Essential ActionScript 3.0 by Colin Moock. It's funny that the title says "Essential" and the subtitle is "ActionScript 3.0 Programming Fundamentals". Why is it funny? The book is around 900 pages, and it is not large print. Colin does his usual job of superb thoroughness in covering the topic. If you're working with AS3, it's a must have.

Tables, Attributes, and Document Types

I had an odd problem in HTML yesterday. In adding a column to a table, I found that I could not set the column widths. Things looked fine in Dreamweaver 8 but in IE 6 and Firefox 2 the specified widths were being ignored. After trying a variety of things in Dreamweaver I brought the code over to Visual Studio 2005, to see if it rendered the table like Dreamweaver or the browsers. It rendered the table like Dreamweaver. I play around with the column widths a bit in VS 2005 and then formatted the code (I like how VS 2005 formats code), then brought it back to Dreamweaver. When I previewed the code again it worked! I scanned it quickly to see what had changed. I saw that it was no longer using the width attribute, VS 2005 had changed it to the style attribute with the width property. After a quick test I confirmed that once I manipulated the table columns in VS 2005, it re-wrote the tags.

The width attribute for the IS valid for XHTML 1.0 Transitional, so it validates (that’s the default document type in Dreamweaver), even though IE and Firefox have intermittent problems dealing with the attribute.

Funny thing about Dreamweaver, the width attribute is NOT valid for XHTML 1.0 Strict nor is it valid for XHTML 1.1, yet if you create a table in a document set to one of those types, Dreamweaver still sticks in the width attribute when you resize the columns. When you run the validator, you are shown the table you inserted is using outdated attributes. VS 2005 will underline outdated attributes and show a tooltip explaining why. I’m surprised Dreamweaver doesn’t do that, but more surprised that it inserts code that won't validate.

Overflow

The overflow property is a neat feature of CSS2 I just started playing with. The default for overflow is "visible", meaning any content inside a div that goes outside the div boundaries is shown. For example, if the text runs long in a div, the text will still be shown in the browser. By setting overflow to "hidden" you can use the parent div tag to mask the contents, so text that runs long is clipped. This approach might feel more natural to a designer coming from the page layout world of Quark and InDesign.

The feature becomes more interesting when you are using more than text in the div. If you have other content, it will act like a mask clipping the content, which is not something you could do with a page layout program's text box. Take a look at the W3 site example here.

Sizing Flash

Sometimes you'll see Flash movies which fill the entire browser window. If you make the window larger or smaller, the Flash movie scales proportionately. Even though I use this feature, I always forget where you set it. For the record, it is set on the HTML tab when you chose File>Publish Settings... Set the Dimensions field to Percent and the Width and Height fields to 100 percent.