TL on PL

Goodbye, Blogger.com

2009-06-24T06:45:00.000-07:00

Due to the amount of spam this blog is collecting, and the lack of tools to mitigate it effectively, I'm shutting this sucker down. I have migrated everything to a new Wordpress blog at http://blog.nthsense.net. I've updated Feedburner to point to the new blog, so hopefully my subscribers won't be inconvenienced.

It has been a long time since I posted anything here. My focus on this blog has been to share fringe development techniques and hard-to-find workarounds for odd behavior in Flash, JavaScript, and CSS. My interests have evolved somewhat - I'm now working with almost 100% Flex at my job, so I have less to talk about on the HTML/CSS/JavaScript side of things. There are plenty of workarounds I could be sharing on the Flex side, but Adobe evolves the framework quickly enough that my workarounds are obsolete in a fairly short time.

Also, I'm focusing a lot more on iPhone development, which is a totally new area for me. It is going to take some time to build expertise in XCode/Objective C, so I won't have much to share apart from the basics, which there are plenty of resources for.

All that said, big things are coming... so stay tuned.

SWF Scale-Nine Skin Sizing Issue

2009-02-04T06:00:00.000-08:00

I beat my brains out over this one for 3 hours the other day. I was skinning a Flex component with a SWF library asset (a MovieClip) that used nine slice scaling. There was a visual gap between the right and bottom sides of the skinned component and its parent. For a while, I thought that this was due to some padding or something being applied to the parent.

To resolve this issue, I did two things in Flash:

1) I converted my border from lines to fills, by going to Modify > Shape > Convert Lines to Fills
2) I made sure to register the upper-left corner of the shape at 0,0.

Easy, but yet so difficult.

Awesome - Flash IDE video

2008-07-17T06:12:00.000-07:00

Don't know how I missed this, but here it is:

http://www.youtube.com/watch?v=vqMI480D668

Demoing live video, inverse kinematics, and a new tweening model in the upcoming version of the Flash IDE. Enjoy.

AJAX in ASP .Net - Missing Sys.WebForms.*

2008-06-16T12:11:00.000-07:00

So - don't ask me why, but I've been dabbling with AJAX & .Net 2.0. Oh, the shame of it. I just spent two days trying to figure out why my UpdatePanel controls were doing a full refresh of the page instead of only updating the area they encapsulate. It turns out that the required script libraries (.axd files) were not all being rendered into the page. In particular, I was missing Sys.WebForms.PageRequestManager. It took a further two hours to find the following (seemingly irrelevant) blog post:

http://blogs.technet.com/stefan_gossner/archive/2006/01/24/418005.aspx

In a fit of desperation, I tried his suggestion for fixing a completely unrelated problem, and lo, it worketh. Just comment the following out of your web.config:

<xhtmlConformance mode="Legacy" />

Enjoy.

Everything that's new in the Flash Player 10 beta docs

2008-05-21T14:41:00.000-07:00

Adobe has released the docs for the Player 10 beta. I went through and made a list that shows you the classes, properties, methods, events, and constants that are new to Flash Player 10.

Enjoy.

adobe.utils.package: MMEndCommand()

Top-Level:
Vector

flash.utils.ByteArray: inflate(), deflate()
flash.ui.MouseCursor
flash.ui.ContextMenuClipboardItems
flash.ui.ContextMenu: clipboardItems, clipboardMenu, link
flash.text.engine.*
flash.system.Capabilities: hasColorCorrection
flash.system.Capabilities: domainMemory, MIN_DOMAIN_MEMORY_LENGTH
flash.net.NetStreamPlayTransitions
flash.net.NetStreamPlayOptions
flash.net.NetStreamInfo
flash.net.NetConnection: farID, farNonce, maxPeerConnections, nearID, nearNonce, protocol, unconnectedPeerStreams
flash.net.FileReference: data, load(), save()
flash.media.SoundCodec
flash.media.Sound: extract(), sampleData
flash.media.Microphone: codec, encodeQuality, framesPerPacket
flash.geom.Vector3D
flash.geom.Utils3D
flash.geom.Transform: matrix3D, perspectiveProjection, getRelativeMatrix3D()
flash.geom.PerspectiveProjection
flash.geom.Orientation3D
flash.geom.Matrix3D
flash.filters.ShaderFilter
flash.events.ShaderEvent
flash.events.Event: CLEAR, COPY, CUT, PASTE, SAMPLE_DATA, SELECT_ALL
flash.display.Stage: enableColorCorrection
flash.display.ShaderPrecision
flash.display.ShaderParameterType
flash.display.ShaderParameter
flash.display.ShaderJob
flash.display.ShaderInput
flash.display.ShaderData
flash.display.Shader
flash.display.MovieClip: currentFrameLabel
flash.display.InteractiveObject: clear (event), copy (event), cut (event), paste (event), selectAll (event)
flash.display.Graphics: beginShaderFill()
flash.display.DisplayObject: blendShader, rotationX, rotationY, rotationZ, z, globalToLocal3D(), local3DToGlobal()
flash.display.BlendMode: SHADER
flash.display.BitmapData: histogram
flash.desktop.ClipboardTransferMode
flash.desktop.ClipboardFormats
flash.desktop.Clipboard

Here's a New One

2008-04-17T16:25:00.000-07:00

This was emitted from a Flex swf I was working on today:

Error: The SystemManager constructor was called when the currentFrame was at 2 Please add this SWF to bug 129782.
at mx.managers::SystemManager()
at _EmbeddingImagesScale9_mx_managers_SystemManager()

Never seen that before. Good times.

Adobe's Coding Conventions Leave Me Asking "Why??"

2008-04-16T07:25:00.000-07:00

I just took a quick first pass through Adobe's newly-published Flex Coding Conventions, and while I agree with much of what is in there, a few items leave me scratching my head. I think it would have been useful for them to offer some sort of rationale behind the recommendations, not just "do this, not that" mandates. By way of a few examples:

Use Array literals rather than new Array().

Isn't "new Array()" more consistent with the way every other kind of object is instantiated? "[]" is a shorthand syntax - I have found shorthand generally to be something to be avoided, because it requires a deeper familiarity with a language than a generalist programmer would possess. I raise the same objection to the recommendations for using Object literals, RegExp literals, and so forth. Consistency is key.

Don't use unnecessary parentheses with common operators such as +, -, *, /, &&, ||, <, <=, >, >=, ==, and !=.

I favor explicit groups, not implicit ones. In my opinion, this: var e:Number = (a * b) / (c + d); is better than this: var e:Number = a * b / (c + d); because it removes ambiguity over whether b is divided by (c + d) or a * b is divided by (c + d).

If the various branches of an if/else statement involve single statements, don't make them into blocks.

This just makes your code less readable, and introduces an inconsistency in the way the syntax is written. Why have a special case for branches that contain a single statement? This feels more like the personal preference of an experienced developer than a bona fide "best practice" for teams. Indeed, the recommendation for "while" statements is exactly the opposite.

Use int for integers, even if they can't be negative. Use uint only for RGB colors, bit masks, and other non-numeric values.

Why???? What's the point in having a uint if you're only going to use it for things other than unsigned integers?

These are just a few that jumped out at me, because they seemed arbitrary exceptions to the norm. "Best practices" should promote a coding standard that favors minimal variation in syntax over quick coding time, easy understanding over minor performance gains, etc. Overall, I think they're on the right track - but if they're going to create all kinds of exceptions to their own rules, they should provide more explanation.

One more - this is just whack:

var a:Array /* of String */ = [];

The language does not support typed arrays. If you need a typed array, extend ArrayCollection and add your own type-checking. Cluttering up your code with comments like this doesn't offer any compile-time type-checking, and is much less readable than var a:MovieClipArray = new MovieClipArray();

wmode="opaque" + Firefox + position:fixed = AAAAGGGHH!!!!

2008-03-25T13:23:00.000-07:00

I just spent the last 4 hours or so tracking down this bug. I needed to use wmode="opaque" on my Flex app, due to a dynamic menu overlay issue. However, in Firefox this seemed to mean that none of the buttons in the Flex app would be clickable. Ok, Tom, break the problem down...

I embed the swf in a plain-jane web page, and it works fine (wmode="opaque"). I add in my style sheets, and it stops working. Turns out that setting position:fixed on the body tag was the cause - changing to position:static was the cure.

May you waste less time than I did.

A Regular Expression for Stripping HTML Tags

2008-01-18T09:39:00.000-08:00

Here's a regex I wrote yesterday for stripping specific html tags from a string:

<[^>]*(table|tr|td|th)[^<]*>

Here's an example in AS3 that removes and tags:

var testString:String = "Hello world!";
var regEx:RegExp = new RegExp("<[^>]*(p|b)[^<]*>","gi")
trace(testString.replace(regEx,""));

Enjoy.

Switched from Google Checkout to PayPal for donations

2008-01-18T09:28:00.000-08:00

I've switched to PayPal from Google Checkout for donations, in order to allow people to donate a custom amount. The fees are higher, but it allows for more flexible configuration - in the end, I think that's better. What do you think?

What's the right approach for blog monetization?

2008-01-18T08:03:00.000-08:00

Lately I've been experimenting with this blog a little bit to learn more about how AdSense works, so you've no doubt noticed the ads. I personally dislike ads, but they do have the potential to be a money-maker under the right circumstances. The nice thing about them is that the money doesn't come from the pocket of the viewer, it comes from the people who advertise. For this blog, however, I don't think they're a good fit. Here are a few reasons why:

The content of this blog doesn't lend itself to pulling quality ads. I've been seeing ads for "Fix Flash Player Errors" - I sincerely hope no one clicked on that thing. It takes you to a registry scanner of some sort, and strikes me as being a bit nefarious. Also, the ads are only pulling in (at most) a few cents per click. For over 2700 visits, I made a whopping total of 73 cents.

The people who view this blog are not given to clicking on ads. Clearly, whatever my blog is advertising, you're not interested in. For over 2700 visits, my ads were clicked around 10 times.

In terms of a money-making proposition, I think it's safe to say ads are not a good fit. I have removed most of the ads on the site. I still want to watch how Google AdSense analyzes my content though, so I'm leaving one small ad in the footer. Instead of the ads, I'm going to try a donation model. I'm going with 3 donation levels: $1.23, $5.33, and $10.63. I started with $1, $5, and $10, and then added a few cents to offset Google Checkout fees. These donations will help me write more useful content, and will allow me to devote more time to finishing up some of those lingering projects that people have expressed interest in.

I really want your feedback on this. Do you think the donations are appropriate? Is the Buy button unobtrusive enough? Are the amounts right? I'm looking forward to your input.

What browsers do you test against?

2008-01-17T08:11:00.000-08:00

I'm in the final testing phase of a new website, and I'm wondering what browsers folks commonly test against these days. Since it's new, I have no user agent data to go by. I'm presently testing against the following:

Windows

IE: 6, 7
Firefox: Newest

Mac

Safari:Newest
Firefox:Newest

This is a pretty small matrix, but has been pretty successful in the past. I give priority to fixes on the Windows platform, and Safari on the Mac. I'll probably test in IE 5.5 as well, even though IE 5.x users make up only about 1% overall (according to some stats I'm seeing). Are there any particular browsers & versions that you pay special attention to?

IE Standalone Installations

2008-01-17T08:07:00.000-08:00

I always have to look this up when I need it, so I'm posting here for my own reference and yours.

Get standalone IE installations (for testing purposes) here:

http://browsers.evolt.org/?ie/32bit/standalone

Some things will cause these browsers to crash - I vaguely recall a problem with the address bar, and cookies were also problematic.

See the following article for solutions to some issues:

http://www.positioniseverything.net/articles/multiIE.html

The best web page development tool there is.

2008-01-16T11:21:00.000-08:00

If you create web pages and you haven't heard about this tool yet, you need to get it ASAP. It will make your life so much easier. How I went this long without hearing about this is a mystery to me, but I guess you can't know everything. The tool is called Firebug (http://www.getfirebug.com), and it's a toolbar for Firefox that allows you to make live modifications to CSS and see the changes instantly in the browser. Also, the JavaScript debugging is spectacular (by JavaScript standards). Inspect mode has been a life-saver for me - it lets you click on an element in the web page, and takes you to the relevant HTML. Other tools, like the IE Developer Toolbar, have some of the features - but nothing else has them all.

Sorry if this is old news to you, but if you haven't tried it yet, you should. I wouldn't want to be without it.

Macworld 2008 - What am I buying?

2008-01-16T06:23:00.000-08:00

No doubt this has already been covered to death elsewhere on the interwebs, but I thought I'd chime in with my takeaways on Macworld '08.

You can't announce an industry-changer like the iPhone every year. So it's no surprise that this year's Macworld left many with an empty place inside where their anticipation once lived. But if the new Apple product lineup didn't live up to the hype, it's not Apple's fault. Although the blogosphere was abuzz with conjecture months in advance, I didn't hear Apple saying they were going to change the world. And they didn't. What they did was announce solid upgrades to their product line

The much-needed refresh for the Apple TV set-top box with the major overhaul of movies on iTunes is a powerful combination, and may prove formidable competition for the existing players in the online movie rental space. Those who don't wish to shell out $230 for the set-top box will still end up renting a few movies for mobile viewing on their iPods. For those who do buy the Apple TV, keeping a Netflix subscription around looks less appealing (although in many cases, it's still cheaper) and ordering pay-per-view on cable and satellite would just make no sense at all.

The iPhone 1.1.3 software update was the single thing that I looked forward to the most, and so it was also the most disappointing. It could have been so much more, particularly given my low expectations. I want a few basic things from my iPhone that it doesn't do now:

A way to edit my notes on my Mac
Select, copy and paste text
A few simple games. I'll even pay for them.
Flash. Preferably Flash Player 9.

Ok, so the last one isn't so basic. But the first 3 are no-brainers.

The 1.1.3 iPhone update does have some cool stuff though. The location finder in Google Maps is pretty cool, at least in theory. It triangulates your position based on the location of nearby cell towers and wifi hotspots. A really clever idea - but accuracy varies wildly. In Alexandria, VA it found my location to within a mile - in my office in DC, it found my exact building.

Since I'm a UI designer (among other things) and this blog is supposed to be focused on the presentation layer (although it often deviates), I'd be remiss not to talk about the new interaction the iPhone has for re-arranging icons. This is one area where I think they nailed it. Here's how it works: just press and hold an icon until it starts to wiggle. When the icons are wiggling, you can drag them around the screen. How great is that? The 'wiggle' effect is a perfect gut-level visual cue that the icons are in a fluid state. It's the kind of simple, intuitive design that people who create UIs should strive for. I think when it's all said and done, Apple is going to get the credit for defining how multi-touch interfaces behave (even if Jeff Han and others did the homework).

Apple also announce the Time Capsule, an Airport Extreme with a 1 terabyte hard drive inside, meant for performing wireless backups with Time Machine in Leopard. This is a real kick in the crotch for anyone who recently (6 months ago) purchased an Airport Extreme with the intent of using it with a USB drive. It turns out, you actually can't use a USB drive attached to last year's Airport Extreme for your Time Machine backups. Until Apple releases firmware to resolve that issue, I'm going to assume that this was their plan all along. Jerks.

Finally, there was the MacBook Air. I think this will be very popular for the airborne businessperson. It will fit nicely into that little pouch on the back of the seat that holds the Skymall catalog. Also, for the fashion-minded student. But, not for me. I have thick, manly arms that can withstand the weight of 5.4 lbs of computing power. I'll bet I could even handle 6.8 lbs.

Flexlib updates, Bi-Di in Flash Player, and a Love-Fest

2007-05-25T08:01:00.000-07:00

Long time, no post. Really, I haven't had much to write about, since I've been knee-deep in some CSS, HTML, & .Net work. Finally, I'm getting to spend some time in Flex again, so I'll probably turn up the volume again, so to speak.

I got some good news last night - my text highlighter component has been added to Flexlib!! Here's the full component list, and here's a link to the example itself. If you find any bugs, feel free to post them in the comments here. No matter how many times something I create goes out into the world, it's still exciting. Big thanks to Doug and Darron for making this happen!

Then, when I came in to work this morning, I saw Emmy's post about bi-directional text support in Flash Player 10. Awesome - sounds like they're planning to not only add bi-directional text support, but generally just beef up text in general. This is great news. Although it improved substantially in FP8, text handling is still not perfect. Things like styling HTML text can still be a little dicey. And I would love for things like my text highlighter component to be completely unnecessary!! Maybe they could add in some highlight-and-find functionality in there.

As a side note, I wonder how long they'll stick with numeric versioning for the Flash Player. Most software doesn't make it much beyond 10 before a change in naming convention, like Photoshop CS3, etc. I could imagine a Flash Player 11, but Flash Player 17? 13? Maybe Adobe Acropollash? Flappollobat? Blinding Ray of Transcending Glory? (I think M$ considered that one, at least momentarily). I personally would go with Flappollobat - it has a certain ring to it, don't you think?

Finally, I sometimes use this blog as a place to vent my frustrations with poor customer service and other things gone awry in the Adobe world. However, I feel that if you chose to voice your opinions in public, you should take care to present the totality of your views. In other words, if you have a concern or complaint, voice it - but if you have positive things to say, say those too. It occurs to me that I have let many of those positive things go unsaid, while I have given more energy to my irritations - this seems to me to be a special form of hypocrisy.

That said, I have worked with CS3 and Flex Builder on the Mac for some time now, and I think they're amazing. Very solid, very enabling technologies. Flash Player 9 continues to astonish me from a performance perspective, and I can develop applications using Flex so quickly that I can spend more time on the design of them, and even have time to actually implement the "nice-to-have" features that normally get pushed off to version 2 of a project. And I also happen to love the new icons. Don't change them, please? So elegant, so well thought out.

It would be ridiculous for me to itemize everything I love about CS3 and Flex - it would be a long list, and probably take up most of my available blogging time. So maybe the solution is to simply give less time to my gripes, and try to focus more on the mission of this blog, which is to publicize information useful to RIA developers. Wish me luck. :)

Happy Mac

2007-03-09T19:38:00.000-08:00

I just completed a RAM upgrade in my Mac Mini, per the instructions at http://www.methodshop.com/gadgets/tutorials/macmini-ram and am happily multi-tasking away... Listening to Frank Black & the Catholics on iTunes, blogging in Camino, NeoOffice and Flash both open in the background. Life is good with 2GB.

It took about 45 minutes to install at a careful pace, saved me over $150... and I didn't even scratch my case. Whoops... Here comes the new Pete Yorn... Gotta go rock out.

Adobe: Bad Customer Service

2007-02-13T12:05:00.000-08:00

I just held for 2 hours with Adobe tech support to get an unlock code for CS2 upgrade. (For background, that's what you need to do to validate an upgrade installation that won't recognize the original media you're upgrading from.) I was incorrectly transferred at least twice, waiting for 20-30 minutes at each transfer. When I finally got the unlock code, it didn't work and there wasn't a thing that they could do about it. When I offered that I was using Windows Vista (they never asked) customer service literally said "Ah-HAH! That must be the problem", blamed the whole thing on Vista compatibility, and helpfully suggested that I wait for CS3 or roll back to Windows XP.

I asked to be transferred to a supervisor, who told me that Microsoft wouldn't give Adobe the necessary components to test their software until just recently. I explained that I have personally tested software on the beta versions of Vista for two years, and that the final bits have been available for months.

What was worse than waiting for two hours or listening to made-up excuses is just that no remedy, not even a symbolic gesture, was ever offered. I suggested that it would be helpful if Adobe could contact me when an update is released, rather than expecting me to visit the website every day. She said "That's not possible, we have a lot of customers." Not possible? Hardly. Not practical? Maybe. Not willing? Bingo.

The thing that makes this all even crazier is that I was able to install CS1 without issue, and upgrade on top of that (on *gasp* Vista!) - solving my own problem. It's a shame that the people who I talked to today lacked the imagination (or, seemingly, the energy) to suggest it.

There are a couple of takeaways from all this that I intend to relay to my customer service people:

1) Don't make your customers wait interminably.
2) If your customer paid you and can't use your software, "tough noogies" doesn't cut it.
3) If you can't answer your customer's question, have someone get back to them who can answer it.
4) Throw me a frickin' bone, here. If there is no solution to be had, give the customer something - anything - to show that they're not just another $1000 to you. Maybe a reduced-price upgrade when it finally does arrive, maybe just a follow-up email to say "sorry we couldn't help you".
5) Don't try to throw something technical-sounding at your customer in the hopes that they won't understand it and just go away.

I know what it's like to not have an answer for someone who deserves one. I understand that everybody has a somewhat different capacity for problem-solving. I understand that customer service people are usually the people in an organization who are the least empowered to offer resolution. But PLEASE give the impression that you're trying.

I'm a Mac... and HEY!!! LOOK AT ME!!!

2007-02-13T09:25:00.000-08:00

I just got a new Vista box at work and I'm getting it all set up, trying to get used to the new locations of everything. My particular pain point is that the VPN client my company uses hasn't yet been updated for Vista. But I digress...

The thing I really want to talk about is just how much bling they added with Aero. It's like they had a big meeting and someone said "Look, we all know that people love Macs because they're purty. We have to make Windows cool-looking too. How can we do that?" "I know!!" someone else pipes up. "We can make the windows semi-transparent!!" "Yeah, that'd be awesome!" says someone else. "We should also put some gleam on them, like a glassy reflection." "And dropshadows!!", chimes in another. "Yaaay!! Isn't designing things fun?? No longer will Windows be known as 'the ugly OS'."

Seriously, Vista is way over the top in terms of aesthetics. Pick two of the added design touches and it would have been enough. But dropshadows, transparency, glows, white strokes, bevels, reflections and blur all at once? That's called "trying too hard".

I don't consider myself a fan-boy, but I couldn't help but to be inspired to propose a new Mac vs PC commercial.

Mac: Hello, I'm a Mac.
PC: Wassup dawg, I'm a PC. (he's wearing MC Hammer pants)
Mac: Hey, PC, nice pants. What's that around your neck, a huge analog clock?
PC: Yeah, isn't it cool? They gave me a bunch of new fashion accessories this time. Yup... I finally got my wardrobe up to date.
Mac: Umm.. Yeah. Isn't that thing a little slow?

With apologies to my boss, who came up with the Flava Flav clock gag.

WPF/E = JavaScript + Windows Media Player?

2007-02-05T07:25:00.000-08:00

So, I just checked out the Microsoft Community Technology preview of Windows Presentation Framework Everywhere, the supposed "Flash Killer". After seeing this, I'm under the impression that WPF/E and the Flash Player are not really in the same conceptual sphere.

WPF/E seems to boil down to some JavaScript libraries and Windows Media Player (and maybe a little SVG) so far. It's unclear to me how much of the animation is controlled by JavaScript and how much is handled by the WPF/E ActiveX control: some of the examples have more animation-oriented JavaScript than others. All of the interactivity appears to be handled by JavaScript. In the network-aware examples, there is an Ajax library that looks to be responsible for communication.

So, in concept, WPF/E seems to leverage existing web technologies and tries to handle their varying implementations. Flash Player, on the other hand, provides its own implementation for those technologies.

I have a lot of questions about how WPF/E works. Does it leave the JavaScript interpretation up to the browser, or have they implemented another JS interpreter in the ActiveX control? Does WPF/E handle image display, or is that left to the browser as well? Basically, all of my questions boil down to this: is WPF/E merely coordinate the various technologies it uses, or does it actually provide its own implementations of those technologies?

If WPF/E is just coordinating a variety of implementations, it will always be limited by the browser, and Flash will always be a jump ahead.

Flex Data Model Architecture

2007-01-31T12:05:00.000-08:00

So, I'm chin-deep in Joe Berkovitz's Architectural Blueprint for Flex Applications... That is to say, this is about the 5th time I've read it. I think it's a great article, as architectural blueprints go... It really helps to make the abstract principles of MVCS more concrete for me.

I think I'm a little slow on the uptake when it comes to architecture. Old habits die hard, and years of working on small, underfunded projects have molded my thought patterns accordingly - I always seek the most direct approach that works. Even though this is not my first exposure to MVCS by a long shot, I still find myself getting a bit lost in the translation between the idea of MVCS and the details of how you implement it in a real world project.

The code examples that are shown in Joe's article are only moderately helpful to me - it wasn't until I opened the source code itself and could see the import statements that some of it became clear.

For example, the Model portion of the app. After reading the article several times (and also referencing Aral Balkan's article "Defining Data Models"), I was still unsure of the appropriate place to instantiate the model classes, and I also thought that there should be a single Model class that encapsulated the other model classes. I was visualizing the model as a single respository for all the data needed by the application, which would have bindable properties (sort of like a model defined by mxml Model tags). After reviewing the source code, I see that the model is really implemented as a set of Value objects that are instantiated in both the Controller and the Services, and are passed around the application.

I'm not used to thinking in this way. When someone says "this architecture is made up of 4 parts" I am thinking of 4 discreet parts. When someone refers to "the Model" I naively think "there's a single model object somewhere". So I'm trying to adjust my brain to the concept of a nebulous model that consists of several Value Objects being tossed around the app.

But I'm also (maybe naively) wondering if it wouldn't be better to have a single Model that encapsulates all the data. That would have a couple main benefits, in my estimation:

1) It would be easier to serialize the model and save it in a local shared object for later restoration (the purpose of the model is to handle state, correct?)
2) It would be easier to store revisions of the model for undo/redo purposes
3) It would be easier for the view to bind to it

This is what the mx:Model tag has going for it, but the problem there is you can't have strongly typed data.

I'm pretty sure there are architectures that work this way - it sounds kind of like what Aral describes in the "Using Class-Based Models" section of his article. But maybe I'm reading Joe Berkovitz's code wrong... Pretty sure I'm missing quite a lot here - hopefully I haven't said anything that is obscenely stupid.

Hopefully some of my readers can help me fill in the blanks!

Update - Flex Text Highlighter Class

2007-01-22T07:47:00.000-08:00

Last night I updated my demo of tl.text.Highlighter, my TextField highlighting class for Flex. You point it at a TextField object, and then use one of its methods to highlight the word or words of your choosing. Here's the demo (right-click it to view source).

In this revision, I added some performance optimizations to reduce the number of calls to TextField.getCharBoundaries, which it turns out was the most expensive call I was making. In the last version, I highlighted each character individually, regardless of whether it was part of a word or not, because it was easier to handle word wrapping that way. This meant making a separate call to TextField.getCharBoundaries for each letter in a word. The performance was pretty good, but could get a little slow when highlighting a whole paragraph. Now, I make two calls per word: one for the first character, and one for the last character and combine them into a single Rectangle object that spans the whole word (a la Keith Peters). It's a bit trickier to manage when words or phrases wrap into multiple lines, but I was able to write some logic to handle those scenarios.

Anyway, this results in much better performance when highlighting many sequential characters in a TextField. To pull this off, I created a StringBoundaries class which returns an array of Rectangles that define the boundaries of the character range. The array has a length of 1 if the character range fits on one line.

Also, I moved the search logic into a separate class called Finder, where it will be easier to work with. I intend to add some features such as Match Whole Words Only and Case Sensitive/Insensitive options.

Keep those suggestions coming!

A TextField Highlighter Class for Flex

2007-01-19T12:36:00.000-08:00

One of the features I've always felt was missing from Flash TextFields is the ability to highlight a range of characters with a color. What I did in the past was highlight words by changing their color, which is not nearly as satisifying. So, I was really happy to learn that TextFields in Flash 9 have a new method, getCharBoundaries, which returns the bounding rectangle of the specified character. With this method, we can create a rectangle of color to place behind the TextField, highlighting the specified character or characters.

Keith Peters of BIT-101 and Betaruce both have released demos of this exact functionality. However, their demos lack support for word wrapping, or resizing and scrolling of the TextField. Since text highlighting is on the wishlist for an app I'm developing, I figured I'd Flex it up a bit.

My Highlighter class supports word wrapping, resizing, scrolling, and more. You can highlight all instances of a string, or highlight the next and previous instances of the string. You can also use multiple Highlighters on the same TextField for combinations of colors and functionality.

Try out the demo. You may have to wait a few seconds for the sample text and fonts to load. I'm using embedded fonts and a StyleSheet here just to test that it will handle them, but TextFields in general seem to perform better without them. Oh, and you can right-click and view source too (love that about Flex!).

Here's how it works: when you pass the Highlighter a string to highlight, it finds the instances of that string in the TextField and stores the indexes of each character separately in an array. When the TextField is scrolled or resized, the Highlighter determines which of those characters are visible on the screen and draws a Bitmap rectangle behind them. On every SCROLL or RESIZE event, the Bitmap is cleared and highlights are calculated and redrawn.

This could get to be a pretty processor-intensive system, especially when you have a lot of characters being highlighted. This is where I was really pleasantly surprised by Flash Player 9. When I first started the project, I thought "this will never work - it'll be too slow". But Player 9 handles it like a champ. Unbelievably fast.

There are some things that can screw up TextField.getCharBoundaries, such as newline, carriage return, and other whitespace characters (see my last post). Using condenseWhite on your TextField will take care of that. In my case, I have to preserve whitespace, so some pre-processing of the text is necessary to strip out the offending characters.

Also, in my demo I have padding on my TextArea. This throws off getCharBoundaries, and I compensate by passing an xOffset and yOffset value into the Highlighter class.

Speaking of TextAreas... In the Flex components that use a TextField, there is a property called textField, which would be ideal for my Highlighter class to make use of. But, no. It is protected. Am I really going to extend every component in the Flex framework that I want to use my Highlighter class with? Please. For now, I iterate through the children of the TextArea until I find a TextField. It seems to work fine, but I'd prefer to not resort to such hackery. Anyone else got an alternative?

I'm really happy with the Highlighter class so far, but I'm no architect. I could really use some feedback on what should be public, private, protected, etc... and just architectural advice in general, I guess. How can I make this thing fit in better with the Flex framework? Are there changes I could make that would simplify things, or improve performance? Looking forward to your comments.

Flash/Flex TextField Bug - Dancing FlashType Characters

2007-01-16T19:51:00.000-08:00

I just discovered this TextField bug today and wanted to get a demo of it out there. Basically, there are certain whitespace characters which are not properly handled by Flash TextFields. If you're not aware of them, they can really leave you scratching your head. One thing they can do is throw off the text metrics returned by methods such as getCharBoundaries, making them wildly unpredictable. A more visible symptom of these characters is text that expands, wiggles and reflows every time you make a selection or click within the TextField.

Check out the demo, and the mxml used to make it. To replicate the issue in the top TextArea, click in the white space to the left of a line of text, and then drag right to select. You should see the text wriggle and jump around like me after a six pack. Notice the bottom TextArea doesn't have the problem, because it doesn't use FlashType.

The character codes that can cause the anomolous behavior are:
11,12,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,30,31, & 160.

Most of these characters will never be a problem, because they're seldom encountered in the wild. However, 160 is frequently seen in its other form: - the non-breaking space.

To work around this issue, I'll be pre-processing all HTML that comes into Flash by stripping out all those characters and replacing them with regular old spaces, which don't have the problem.

SIFR 3 Beta Announced - Should I Finish Mine?

2007-01-04T12:01:00.000-08:00

Mark Wubben of novemberborn.net has recently announced SIFR 3 Beta 1, which he has been diligently working on for quite some time. It's looking very good, and I'm really glad to see that he is still on the case - it's a pretty complicated task, especially for one guy, and if anyone's up to the challenge, he is.

I attempted my own Flash heading replacement solution (TL.FlashHeaders) some months ago, and ran out of steam at the alpha stage when I suddenly got really busy with other work. Now, I'm slowly beginning to get some more free time, but since SIFR 3 is so close to being done, I'm debating whether it's worth finishing TL.FlashHeaders.

There are a couple of areas where TL.FlashHeaders differs from SIFR in concept. For one, TL.FlashHeaders requires almost no JavaScript configuration. Fonts are specified in CSS, rather than in JavaScript. I really wanted deployment to be as easy including the JS library in the head of your document, and specifying the fonts in CSS as you normally would. There are no special style sheets to include. Everything should just take care of itself.

The second main difference is in the way that TL.FlashHeaders handles fonts. It uses a standard Flash shared font library, so it can be reused in other Flash applications. This approach allows support for multiple fonts within the same heading.

Third, I wanted to provide support for inline headings. This may be the most problematic feature to implement cross-platform, due to box model differences, and may be the least useful.

One of the compromises I had to make in order to achieve those goals was dropping support for Opera. I did, however, keep support for IE 5.x and Netscape 7.2.

Here's the current test page. I haven't touched the code in months, and I know it's got some issues at the moment. Try resizing the page to see how things scale. Even the floats at the top of the page should scale as they normally would. To compare, here's the same page without TL.FlashHeaders.

Even if I don't finish it, it was totally worth starting. One thing that was really awesome about developing my own solution in parallel to SIFR 3 was that I was able to contribute to Mark's efforts a little bit, and it always feels good when someone else finds your work helpful. Also, I learned a ton of stuff that has already been useful in other projects.

Early on, there were a few people who expressed interest in the project. So, what do you think? Should I finish what I started, or move on to other things? It's sooo close....

Photoshop CS3 Beta - First impressions

2006-12-15T09:58:00.000-08:00

Got my hands on the Photoshop CS3 beta, and I gotta say I'm impressed. Smart Filters are going to revolutionize the way I work in Photoshop. Non-destructive editing has been a long time coming in Photoshop (it's been the standard paradigm for ages in some less-popular apps), but I'm happy to see that we're getting there by stages. This brings us one step closer to the day that "Undo" is just an unnecessary extra. But even without the new features, I'd still love it for the native MacTel support!

Rather than do a full writeup, I'll simply point you to somebody else that has already done a pretty good job.

Also, the beta doesn't seem to be posted on Adobe Labs yet, so if you wanna get the bits yourself, just poke around on Digg.

IE CSS Rollovers - Revisited

2006-09-12T14:25:00.000-07:00

Haven't had much to say lately, as I have been busy trying to wrap a project. However, I felt like this was worth taking some time to share it.

Basically, the IE Rollover Cache Bug came back to bite me today. Now, there are many documented solutions to avoiding that annoying flicker in IE when you change the background image of a hyperlink. My personal favorite is this one. But what about the browser activity indicators that are stopped and reset when you mouse out of the button? I see far less discussion of that issue, and know of no solution expect for the one I'm about to document.

Let me describe this in a little more detail. If you click a hyperlink that has a background image, all of Internet Explorer's browser activity indicators will be stopped and reset when you move your mouse off of that hyperlink. By 'browser activity indicators' I mean the 'spinner' (wavy window animation) in the upper right corner of the browser, as well as the status bar at the bottom of the browser (in WinXP, this is green & segmented). This gives the impression that the page load is complete when in fact it is not - the requested page will be displayed eventually. This happens regardless of whether you are changing the background-image property. If you change ANYTHING about that hyperlink (border-colors, sizes, text-decoration) the activity indicators will be interrupted. I can readily confirm this on IE 6, and I'm pretty sure it happens in IE 5.5. IE 5 seems to be immune. I hope to god it's fixed in IE 7.

Typically, this is not a problem because page loads happen pretty quickly these days. But if your link is submitting a form and the server takes some time responding, this can get to be quite a problem. Thinking the form submission has quietly failed, the user will click the button repeatedly, badgering your server with extra requests. Bad for the user, bad for you.

Onward to the solution. I was almost ready to give up and ban image rollovers entirely, when it occured to me that there was one last trick I hadn't tried yet. All you have to do is display the image using Microsoft's proprietary DirectX filters instead of the normal browser pipeline. Here's what you do:

/* Set up your rollover as normal */
a.MyButton{

background:url('Images/MyButton.gif');
}

a.MyButton:hover{
background:url('Images/MyButtonOver.gif');
}

/* Now hack for IE (using star hack for brevity here)*/

* html a.MyButton{
background:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Images/MyButton.gif',
sizingMethod='image');
position:relative;
cursor:hand;
}

* html a.MyButton:hover{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Images/MyButtonOver.gif', sizingMethod='image');
}

That's basically it. Since the problem only occurs in IE, I'm fine with using a Microsoft proprietary solution. Now, AlphaImageLoader comes with its own set of caveats and gotchas, not the least of which is that you can't position the image at all. Sometimes I need to. As a workaround for that, I put an empty div in my hyperlink to which I apply the image instead, and then position the div with absolute positioning. Another point to be aware of is that sometimes hyperlinks will not function if they have an image applied in this way. However, position:relative should cure that.

I hope this helps some poor frustrated soul. As always, please post any questions or comments, and I'll do my best to find the answers.

Could AJAX Security Vulnerabilities Mean Good News for Flex?

2006-08-04T13:05:00.000-07:00

Recent news coming out of the Black Hat conference has it that security specialists SPI Dynamics and WhiteHat have found a way to profile networks from behind the firewall using client-side JavaScript. Additionally, RSS and Atom feeds can be used as the delivery mechanism, which opens up myriad possibilities for cross-site exploits. In many cases, JavaScript delivered through an RSS or Atom feed will execute on the client-side. You can get more detailed information on the vulnerabilities here:
http://news.com.com/JavaScript+opens+doors+to+browser-based+attacks/2100-7349_3-6099891.html?tag=nl

and here:

http://news.com.com/Blog+feeds+may+carry+security+risk/2100-1002_3-6102171.html?tag=nl

What interests me the most about these newly exposed vulnerabilities is the potential Flex has to step in as a safer alternative. Although Adobe has thus far been reluctant to market Flex against AJAX (instead, promoting a somewhat Frankensteinian blend of the two), one could imagine that vulnerabilities in AJAX could yield increased market share for Flex apps.

One criticism of the Flash Platform I have heard is that it's considered unsafe by many firewall administrators. The conventional wisdom among security professionals can sometimes be skewed by not understanding the format. Who would take the time to configure the Flash Player security settings across all machines on their network when they can simply block SWF at the firewall level? If they understood that the Flash Platform is safer than another technology they already commonly allow across the firewall, the decision would be made in a different context.

Unfortunately, even if Adobe did wish to make the case that Flex is safer than AJAX, they couldn't (or they would be foolish to try). Because the Flash Player has an ExternalInterface API (which uses JavaScript for serialization/deserialization), it could be used as a delivery mechanism (possibly even a more effective one than RSS) for the very exploits that are being exposed in AJAX.

I don't know if there's an answer for this. I wouldn't want to part with ExternalInterface, despite its problems. My gut feel is that the AJAX vulnerabilities will amount to no big deal. After all, the same principles apply to these 'new' issues as apply to others: don't go poking about the shady back alleys of the web, scrub all data that comes into your system, etc. But I'm interested to see how all this will play out, and I'm interested to hear other people's thoughts on the subject. So, please comment!!!

Mac FlexWeaver: Building Flex in Dreamweaver

2006-08-01T07:43:00.000-07:00

Late last night, I posted my Mac method for editing and compiling Flex apps from Dreamweaver. Reading over the post this morning, I realized afresh how blogging late at night can be a bad idea. So, I've made a few minor changes to the original post for clarity's sake. Hope it helps, and if you have any ideas for streamlining the workflow, let me know!!

Mac FlexWeaver: Edit & Compile Flex Apps in Dreamweaver

2006-07-31T18:39:00.000-07:00

Last Monday, I wrote about how you can configure Dreamweaver to edit and compile MXML. However, that method only works in Windows, since it uses some Windows-only (and undocumented) methods of the Dreamweaver Extensibility API.

It is a week later, and I have been busy brewing up a solution for us Mac users. One caveat at the outset: I'm on an Intel-based Mac, and so I haven't tested any of this on the Power PC architecture. This procedure requires Dreamweaver 8, and assumes that you have installed the Flex 2 SDK.

For your convenience, I have packaged the necessary files into a handy zip archive. You can download them here: http://labs.tom-lee.com/FlexWeaver/FlexWeaver.zip.

Installation

Opening the package, you'll see several folders. This section will tell you what they are, and where to put them.

Commands - Contains the necessary files for two new Dreamweaver command extensions. Place the contents of this folder in Dreamweaver's "Commands" directory. (Dreamweaver 8:Configuration:Commands)

DocumentTypes - This contains a copy of the file MMDocumentTypes.xml, which has been modified to allow Dreamweaver to treat MXML files like XML files instead of plain text. Place this in Dreamweaver 8:Configuration:DocumentTypes. Note: if you have already modified your MMDocumentTypes file for another purpose, don't overwrite it - instead, manually edit line 150 like so: <documenttype id="XML" writebyteordermark="false" file="Default.xml" macfileextension="xml,xsd,rss,rdf,dtd,vtm,vtml,csn,config,mxi,mxml" winfileextension="xml,xsd,rss,rdf,dtd,vtm,vtml,csn,config,mxi,mxml" internaltype="XML">

Helper - Contains an AppleScript application called FlexCompileHelper.app. This bridges the gap between Dreamweaver and the Flex compiler, as I'll explain later. You can put this file anywhere you like.

mxmlc - Contains a copy of the mxmlc shell script from the Flex 2 SDK which has been modified to allow support for spaces in filenames. Place this in flex_sdk_2:bin. Feel free to name this file something else if you don't wish to overwrite the one in the SDK.

Configuration

After you have copied the files to their proper locations, launch Dreamweaver. In the "Commands" menu, you should now see two new commands: Flex Compile, and Flex Preferences. Flex Preferences allows you to specify the location of the Flex compiler, the FlexCompileHelper app, and the output path for your SWF file, as well as any command line options you wish to use.

As you can (hopefully) see from the screen-shot, I have left the SWF Output Directory field blank. Since it is blank, SWFs will be placed in the same directory as their corresponding MXML files. Also, I have typed "-incremental=true" in the Additional Compiler Options field, to enable incremental compiling. When you click the "Save" button, a file called "FlexCompilerPreferences.txt" is created in your Dreamweaver configuration folder. This file merely stores all the values you enter into the Flex Compiler Preferences dialog.

Before we continue on, it would be a good idea to set MXML files to open in Dreamweaver. To do so, select an mxml file (you can find one in flex_sdk_2:samples) and go to File > Get Info in the Finder. Find where it says "Open With", select "Other" from the drop-down menu, and then browse to your Dreamweaver installation. Once you have Dreamweaver selected, you can click the "Change All" button to make all MXML files open in Dreamweaver.

Now it's time to compile something. Just open an MXML file in Dreamweaver, and select Commands > Flex Compile. This does a number of things:

The Flex Compile command reads the Flex Compiler Preferences and creates a file on your hard drive called "FlexCompileJob.txt" in the same directory as the Flex Compile Helper application. This file contains 4 items: the path to the mxmlc shell script in the Flex 2 SDK, the path to the MXML file being compiled, the output path for the SWF, and any additional command-line options. Then, it launches the Flex Compile Helper application.

The Flex Compile Helper application reads FlexCompileJob.txt, creates a command-line for the job, and passes it to the mxmlc shell script.

When the mxmlc script returns its output, the Flex Compile Helper writes that output to a text file (FlexCompileOutput.txt) and instructs Dreamweaver to open that file.

Flex Compile Helper instructs the Standalone Flash Player (located in the Flex 2 SDK) to open the SWF, and makes that window topmost.

This gives us the basic functionality to edit and preview a Flex 2 application from within Dreamweaver.

Error Checking

If the Flex Compile Preferences have not been set correctly, or an MXML file is not the active file in Dreamweaver, the Flex Compile command will not be available. Here is a list of the conditions under which Flex Compile will be grayed out:

FlexCompilerPreferences.txt does not exist or is empty

No compiler is specified, or the specified compiler does not exist

No Flex Compile Helper app is specified, or the specified one does not exist

No document is open

The active document is not an MXML document

Further Explanation

This may seem like a lot of moving parts to achieve what should be a simple task. It was easier on Windows, thanks to the MM.createProcess command, which allowed me to call mxmlc directly from Dreamweaver and also catch its output. Unfortunately, this command does not work on the Mac. So, I had to create the AppleScript application which I could call with the more standard dreamweaver.openWithApp command. Since that command does not facilitate passing data to the application it's launching, I had to first write the necessary parameters into a text file which the application could then read.

I also spent a fair amount of time fighting with the mxmlc shell script, which choked on spaces in filenames. By default, it treats a space as an argument separator. If you open mxmlc in a text editor, and look at the last line, you will see this:

java $VMARGS -jar $FLEX_HOME/lib/mxmlc.jar $*

To fix it, I changed it to this:

java $VMARGS -jar $FLEX_HOME/lib/mxmlc.jar "$@"

For the exact reasons why, check out this page on bash scripting. I don't want to get into it right now, it kind of gives me a headache. With that line of code in there, you can escape any spaces in your filename by surrounding the filename in single quotes. FlexCompileHelper takes care of that for you, but if you put any file paths in the Additional Compiler Options field, you'll need to take that into account.

By the way, if you want to see what's in FlexCompileHelper.app, feel free to open it up. I have not protected the contents from being decompiled, so you should be able to see it in Script Editor.

Conclusion

Well, that's it for now. Can this be improved upon? You betcha. This meets my needs for now though, so I probably won't spend too much more time on it. If you have a suggestion on how to streamline this puppy, I'm all ears. I'm kind of intrigued by the fact that even Dreamweaver's code hinting is extensible. I may take on the challenge of adding code hinting to FlexWeaver, but if I do, it won't be for a while. Enjoy, and let me know if you have questions or comments.

JD on Blog Transparency

2006-07-31T10:57:00.000-07:00

I was midway through a comment on John Dowdell's post regarding Ryans Stewart's post regarding Steve Rubel's post regarding the "Underground Blogosphere".... when I realized I was going a bit long, and should probably just blog it myself.

After reading Ryan's article on Friday, I gave the topic a "background process" in my brain, and I must confess it hasn't returned much. What I've got is this: who cares if bloggers email each other to pitch their stories, and why? I care, for the reason that I wish the most popular, easy to find blog posts were the ones with the most valuable content - as opposed to the ones with the best promotion. But what's to be done? The reality is, blogs get popular for lots of reasons - the author holds a position of prominence or is well-connected, the posts are inflammatory or invite controversy, the author advertises their blog like crazy, the content is of a high value to its audience, etc. Not to mention that if you are blogging, you probably want people to read it, and so you will no doubt take steps to increase your readership. It stands to reason that those who have popular blogs have made an effort to achieve that popularity (sorta like how the more powerful a politician is, the more power-hungry they likely had to be to achieve their position).

Now, if you rely on blogs to be accurate, then you probably care a lot more deeply about this issue than I do, and you really need to understand what a blogger's motivations might be. I personally don't rely on anything to be accurate: not the mainstream press, not the alternative press, and CERTAINLY not the blogosphere.

I guess I'm ultimately just stating the obvious: no matter where your information comes from, how it was promoted, or who authored it, you must make your own judgement as to its validity. Does the fact that an article was promoted via social connections (or even begging for a link) make it less valid for you? If it's something you really care deeply about, believe only your own senses.

As for the RIA bit - I suspect that if RIA-related blog posts aren't getting picked up outside of MXNA and the Goog, it's because the blogosphere at large just isn't as interested in RIAs as the MXNA crowd. I'm always a little surprised when I brag to one of my web developer cohorts about something I'm working on and I get that blank stare... I'm lucky enough to have some very honest friends who have on occasion come out and said "Ok, that's cool and all, but why would you ever want to do that?". I do think there will come a time when rich UI is expected and even demanded, and then those people will get it. But for now, people who are into Flex and so forth may be a but ahead of the curve.

Edit and Compile Flex Apps in Dreamweaver

2006-07-24T12:22:00.000-07:00

In what I think is a brilliant move by Adobe, the Flex 2 SDK and Flex 2 Framework are available for FREE. This is nothing new, but it's worth restating (it seems that a lot of people don't know it yet). I intend to make take full advantage of that fact until such time as I can afford Flex Builder. That's not to say that Flex Builder is unaffordable: quite the contrary. However, I also have to have licenses for Flash, Dreamweaver, Photoshop, and Illustrator. So for me, an extra $500 is substantial.

I actually see not having access to Flex Builder as an opportunity to learn. Like many, I learned HTML by hand-coding in Notepad, and it made me REALLY learn HTML. I think that not using Flex Builder will force me to learn the behind-the-scenes stuff, and therefore will end up being a positive thing. When I do buy the Builder license, I'll have a strong understanding of what's going on under the hood, as well as the conveniences of the Design view and robust code hinting.

Configuring Dreamweaver

Since I already have Dreamweaver, I'll use that as my XML editor. It's really easy to associate MXML files with Dreamweaver, and with a little configuration, you can take advantage of Dreamweaver's XML syntax highlighting. Here's how to do it in Windows:

1) Download the Flex 2 SDK from http://www.adobe.com/products/flex (the link is at the bottom of the page). Install the SDK by unzipping it to the directory of your choice. I put mine in the root of my C drive.

2) Associate MXML files with Dreamweaver. To do so, right-click a file with a .mxml extension, and click Properties. In the Properties dialog, find where it says "Opens with:" and click the "Change" button. Select "Dreamweaver" from the resulting menu. If you don't have any .mxml files yet, you can find one in C:\flex_2_sdk\Samples.

3) Enable XML syntax highlighting for .mxml files. For this, you need to edit one of Dreamweaver's configuration files. The specific file is called MMDocumentTypes.xml, and is located at C:\Program Files\Macromedia\Dreamweaver 8\Configuration\DocumentTypes. You can edit this with Dreamweaver. Find the tag and add "mxml" to the list of extensions in the "winfileextension" parameter. Save the file, and restart Dreamweaver.

At this point, you should be able to double-click an MXML file and have it open in Dreamweaver, complete with syntax highlighting. Now that's all well and good, but how do we compile it? The command-line compiler that comes with the SDK is fine, but typing commands over and over again when I want to build is not my idea of a good time. Wouldn't it be swell if you could compile from Dreamweaver?

Creating a Command to Compile MXML

Yup! Thanks to Dreamweaver's robust extensibility API, it's pretty easy to write a command that will compile the active MXML document and launch the resulting SWF in the stand-alone player. Here's how it's done:

1) Create a new JS file and put the following code in it:


// Compile mxml file from Dreamweaver

function flexCompile(){

 var currentDocURL = dreamweaver.getDocumentPath("document");
 var i = currentDocURL.lastIndexOf("/");

 var parentDirectoryURL = currentDocURL.substring(0,i+1);
 var fileNameURL = currentDocURL.substring(0,currentDocURL.lastIndexOf("."));

 var parentDirectory = MMNotes.localURLToFilePath(parentDirectoryURL);
 var fileName = MMNotes.localURLToFilePath(fileNameURL);

 var currentDocFile = MMNotes.localURLToFilePath(currentDocURL);
 if(!currentDocFile){
  alert("You must have an mxml document open to compile.");
 }else{
  MM.createProcess('', 'C:\\flex_sdk_2\\bin\\mxmlc.exe "'+currentDocFile+'" -output "'+fileName+'.swf"', -1, true, parentDirectory ,parentDirectory+'flex-compiler-output.txt');
  dreamweaver.openWithApp(fileNameURL+'.swf','file:///C:/flex_sdk_2/player/debug/SAFlashPlayer.exe');
 }
}

function canAcceptCommand(){
 return dreamweaver.getDocumentPath("document").indexOf(".mxml") != -1;
}

2) Create a new HTML file, and put the following code in it:


<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//
dialog">
<HTML>
<HEAD>
<Title>Flex Compile</Title>
<SCRIPT SRC="Flex Compile.js"></SCRIPT>

</HEAD>
<body onLoad="flexCompile()">
</body>
</HTML>

3) Save these to Dreamweaver's "Commands" folder (C:\Program Files\Macromedia\Dreamweaver 8\Configuration\Commands) as Flex Compile.js and Flex Compile.htm, respectively.

4) Restart Dreamweaver. You should now have a new item in the "Commands" menu called "Flex Compile" which will compile the active MXML document with the Flex 2 compiler, launch it in the standalone player, and save a text file of the compiler output.

How It Works

When you click the Flex Compile menu option, Flex Compile.htm is loaded, and its body.onload function is called, which is our flexCompile function. First, a few useful variables are set. We get the file path of the active document using dreamweaver.getDocumentPath("document"), which returns the location of the active document as a URL. Then we can get the URL of the parent directory by taking a substring of the currentDocURL - everything before and including the last "/" character. Now for these to be useful to us, we must convert them to file paths. To do this, we call MMNotes.localURLToFilePath(), which is part of the Design Notes API. This function changes the syntax of the file path from URL syntax ('file:///C:/directory/filename.xxx') to file path syntax ('C:\directory\filename.xxx') .

Next comes the real magic, an undocumented command called MM.createProcess(), which I found at http://www.communitymx.com/blog/index.cfm?newsid=179&blogger=35. This allows us to send a command to the compiler without opening it in a command-line window, and it can also be configured to make Dreamweaver wait while the compiling takes place. Note that in my command, I have hard-coded the path to the compiler. If you want to keep the Flex 2 SDK anywhere other than C:\flex_2_sdk, you will have to update the JS file. Also note that in MM.createProcess, the backslashes have to be escaped.

I have configured this command to put the SWF output in the same directory as the mxml file. MM.createProcess also optionally sends the output of the process to a text file, which I have opted for in this command. It will create a text file called 'flex-compiler-output.txt' in the same directory as your mxml file.

Next, I call dreamweaver.openWithApp to launch the SWF in the standalone player. Again, I have hard-coded the path to the Flex 2 SDK.

The function canAcceptCommand() simply ensures that the command is grayed out unless an MXML document is the active document in Dreamweaver.

Conclusion

I believe this setup has a great deal of potential as a basic Flex 2 workflow. One could easily imagine a more configurable version of the Flex Compile command where you could specify the path for the SWF output, or the path to the Flex 2 SDK. What I was going for with this command was to mimic the functionality of Preview in the Flash IDE, so that as I make edits to the MXML I can easily see the results of my changes. Ultimately, this makes up for the lack of a design view, which is one of the great benefits of Flex Builder.

Since I would prefer to work on my Mac, I am creating a Mac version of this command. It will probably have to rely on a shell script or AppleScript to achieve similar functionality since MM.createProcess (and its friends) do not work on the Mac. There is some promise with the undocumented dw.runAppleScript() command, but it does not appear to work on my MacTel.

On the XML-editing side of things, I will probably explore creating an MXML file template for Dreamweaver, as well as rudimentary code-completion. Thanks to Dreamweaver's robust extensibility, I will be able to efficiently create Flex applications without buying Builder, and learning a lot in the process.

Flex 2 Compiler (mxmlc) on OS X - No Spaces in Filenames

2006-07-23T17:04:00.000-07:00

The Mac version of mxmlc that ships with the Flex 2 SDK does not support spaces in filenames, or so it seems. This is inconvenient to say the least, since the default name of your hard drive on OS X systems is "Macintosh HD". If you have a space in your filename, mxmlc can't find the file - it thinks that the full path to the file is the part after the last space. I'm presently seeking a workaround, but no amount of escape sequences or quotes seems to help.

IE CSS Rollover Cache Bug

2006-07-17T10:25:00.000-07:00

Basically, the bug is that if you use CSS for image rollovers (by giving a hyperlink a background-image and changing it with the :hover selector), Internet Explorer will (in most circumstances) check the server for a newer version of the image every time a user mouses over your hyperlink. This can merely look bad (it causes the image to flicker) or it can present real usability problems. The seldom-mentioned side effect is that when a user clicks the hyperlink, the IE 'loading' animation (or 'spinner' as some like to call it - that wavy window animation in the upper right corner) will stop as soon as the user mouses off of the hyperlink, making it seem as though the page load has completed. If you are using the hyperlink to submit a form, the user may click the button multiple times.

Seems like every time I run into this bug, I've forgotten where to find the relevant discussion, so....

Here's a solution on Css-Discuss that involves manipulating Vary headers server-side. Also, a discussion on Mezzoblue that seems to be a good general doorway into the topic. If you use Pixy's No-Preload rollovers, check out the bottom of this page for a client-side solution which may involve extra markup. This article at www.fivesevensix.com seems to be the most comprehensive write-up on the subject. Got any others?

Using Subversion w/ Eclipse

2006-07-16T18:38:00.000-07:00

Another 'saving this link for later' post. IBM has a great article on using Subversion with Eclipse, complete with pictures:
http://www-128.ibm.com/developerworks/opensource/library/os-ecl-subversion/?ca=dgr-jw22EclipseSubversion

Getting up to speed on Subversion is on my to-do list. This will no doubt come in handy when the tiime comes.

Things Never Taught In Design School

2006-07-15T19:52:00.000-07:00

Michael McDonough’s Top Ten Things They Never Taught Me in Design School - Design Observer article by way of John Dowdell. I really like this one and don't want to lose it, so am posting it here.

My particular favorite: show me the output! It's not enough to have an idea, you must also make it manifest (working on that as a bit of self-development, actually). Many people have ideas, few actually make something of them.

All FOUCed Up

2006-07-15T09:55:00.000-07:00

I recently ran across a problem with CSS where IE would momentarily display unstyled content until the external stylesheets loaded. This bug is called "Flash of Unstyled Content" or "FOUC", and is documented here:

http://www.bluerobot.com/web/css/fouc.asp

This can happen if you reference your external stylesheets using @import. The fix is to use at least one link element or one script element in the head of your document. An interesting wrinkle: the link element or script element can be completely empty.

The reason I'd never encountered it before is that I never had created a page which did not use either a link element or a script element in the head element. You see, I developed a habit over the years where I specify a print media stylesheet using a link element and then include other stylesheets with the @import statement, which prevents them from being loaded by IE 3 and NS 3.

JamJar, Flex 2 - A Little Worried

2006-07-14T15:13:00.000-07:00

So Flash Player 9 and Flex 2 are both available now, and I finally have the chance to show off what they can do. I've been bragging up Flex 2 to all of my colleagues, many of whom simply don't get the Flash Platform at all. I'm hearing great things about the JamJar demo, and it sound like a perfect app to show off the power of Flex. Except that when I run it, I get this:

ReferenceError: Error #1069: Property hasDefinition not found on
flash.system.ApplicationDomain and there is no default value. at
mx.managers::SystemManager/getDefinitionByName() at
mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::addingChild() at
mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::rawChildren_addChildAt() at
mx.managers::SystemChildrenList/addChild() at
mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::initialize() at
mx.managers::SystemManager/::initHandler()

I have a "Dismiss All" button and a "Continue" button, both of which yield the same result: a lovely blue-green screen with a nice gradient (you know, the standard Flex background). That's it.

I updated my Flash Player, but that's all I can think of to do... I've been a Flash developer for years, and I am at a total loss. Imagine when the average user comes up against one of these error boxes!

I knew AS3 would not fail silently, and I've always had a feeling that was a bad idea. But, I guess I just figured I'd get my code 100% right. But if the Flex team can't get it right, what chance do I have?

I've got a feeling there's more going on than buggy code. Maybe my Flash player didn't update itself correctly - that would be a bad thing too. I really want the Flex platform to succeed (I want to make a living at it!), but if this kind of user experience becomes common, it will only give ammunition to the anti-Flash crowd and make it a tougher sell.

ExternalInterface Out Of Memory Error

2006-07-11T10:40:00.000-07:00

With the release of Flash Player 9, one of the web sites for which I am responsible began throwing "out of memory" errors in Internet Explorer. This happened when a user would navigate away from the page. Stepping into the debugger revealed the following problematic code:

function __flash_unloadHandler() {
mySwf.style.display = 'none';
for (var prop in mySwf) {
if (typeof(mySwf[prop]) == "function") {
mySwf[prop]=null;
}
}
if (__flash_savedUnloadHandler != null) {
__flash_savedUnloadHandler();
}
}

function __flash_setupUnloadHandler() {
if (window.onunload != __flash_unloadHandler) {
__flash_savedUnloadHandler = window.onunload;
window.onunload = __flash_unloadHandler;
}
}

__flash_setupUnloadHandler();

My first reaction was "Whaa? I didn't write any of that code", but then I remembered this neat little article by Brad Neuberg showing how the Flash Player uses JavaScript methods for serializing incoming ExternalInterface calls. So, my problem was related to ExternalInterface.

A quick search for "ExternalInterface out of memory error" yielded the following Flashcoders discussion: http://chattyfig.figleaf.com/pipermail/flashcoders/2006-July/168998.html. So I was not alone, and it seems the issue is related to having multiple swfs using ExternalInterface on one page.

(The same search also turned up this page, where Geoff Stearns talks about fixing problems with audio streams and SWFObject. The code which fixes Geoff's issue looks mighty familiar when I look at my debugger.)

The part where IE gets stuck is in executing __flash_savedUnloadHandler(); At first glance it looks to me like __flash_savedUnloadHandler() would be executed for every swf you have embedded in your page. In the Flashcoders thread I referred to earlier, Alexis Glass suggests the problem may be related to the fact that the unload handler is saved in a global variable:

...it saves the previous unload handler in a global variable so that if
ExternalInterface is initialized twice on one page it recursively calls the
__flash_savedUnloadHandler until IE complains about no memory.

It may be possible to override the faulty JavaScript, but I don't want to go down that road for fear it will break with a future release. So, I will have to revert back to good ol' FSCommand and getURL for the time being. Yuk. Anybody got something better for me?

As an aside, in my research I also came across John Dowdell's response to Brad Neuberg's original article. I know it's a bit dated now, but the ensuing comments are interesting, because John seems to be focused on the context of Brad's usage of ExternalInterface, whereas Brad seems to be offering the exact points of failure. It seems that John is saying "You're out of scope, the point is moot" while Brad is saying "My personal scope of use is not important, here are in-scope examples of how ExternalInterface is broken". I encountered the same "perspective gap" when dealing with Macromedia's customer support folks a few years ago. They seem to be trained to focus on the context in which you are using the functionality, so they can offer alternate means to your particular end. But that can be frustrating when you are trying to present a unit test which is failing for no particular reason, and they are preoccupied with the question of why you want to do it in the first place.

Flash Player 7 String Parsing Performance

2006-07-10T11:58:00.000-07:00

I just came across the following in my notes from last year, thought it was worth saving:

When performing String parse operations, the presence of characters above the ASCII 128 character range can slow the parsing significantly. In my case, I was applying String.toLowerCase on a 45000 character string, and it was taking 2.5 seconds. Removing the characters above character code 128 reduced the execution time to just 2 milliseconds.

I have no idea if this applies to Flash Player 8 or 9, but I have a feeling I'll be checking into it soon.

IE 5 currentStyle.display bug

2006-07-01T08:56:00.000-07:00

In IE 5, Element.currentStyle.display will return "inline" for block elements that do not have a display property explicitly set. This was corrected in IE5.5. There is no known workaround.

Test page here.

ExternalInterface Slower Than getURL

2006-06-25T09:43:00.000-07:00

The test page speaks for itself. Basically, I wanted to see whether it was worth using ExternalInterface for Flash-to-JavaScript communication when the JavaScript function doesn't return anything.

It turns out getURL still has its advantages. My results from this test show the following:

10000 ExternalInterface calls: 1593ms.
10000 getURL calls: 83ms.

That's pretty significant. My theory for the difference in execution speed is that ExternalInterface is waiting for the JavaScript function to finish executing before it allows the next call to take place. With getURL, I believe it is leaving it to the browser to queue up those JS calls, and doesn't bother waiting for a return value.

In my test case, all the JavaScript function does is assign a variable, so it executes pretty quickly. However, in real life, a slow JavaScript function could have your ExternalInterface calls waiting for a return value that never comes.

Flash RIA Testing Effort

2006-06-20T07:38:00.000-07:00

Yesterday, in my post "Why a Flash vs Ajax Debate?" I talked about how targeting an older version of the Flash player in the development of RIAs can yield a multiplication in testing effort as compared to their Ajax counterparts. See the original post for more detail, but basically this is because you have to test every minor Flash Player version back to the targeted version, on every browser, in order to make a cross-platform compatibility promise.

This prompted some great comments regarding QA methodologies for Flash, and I would like to hear more.

I'll start:

When developing solo, I test heavily on all major revisions of the Flash
player back to the targeted version. If I am targeting Player 6, I also
pay special attention to 6 r47. I spot-check a few minor revisions between
each major version.

My testing for browsers mirrors typical user
agent statistics: 85% IE PC, 10% Firefox, 5% everything else.
In other words, I test heavily on IE PC and spot-check virtually everything
else, with a little extra attention paid to Firefox.

This ends up being a manageable testing effort for solo development, and very few bugs have ever made it through. With JavaScript, the testing is usually similar, except that the Flash player is not a factor at all. I pay a little more attention to IE 5.x and Safari because of differences in their JavaScript implementation, but usually those differences are handled by a framework and don't present much of a problem.

Though my thoughts so far have been focused on the code behind the scenes, I would be remiss not to point out that one place where Flash can unquestionably reduce the QA effort is in the UI. Rendering differences between Flash player versions are almost nonexistent. In fact, this is one area in which I have come to take Flash for granted - you forget about the UI if it's not causing you problems. Getting complex components to work identically everywhere is not always a sure thing, but you can be guaranteed that they'll LOOK the same. Compare/contrast with HTML/CSS, and Flash clearly comes out the victor on that score.

So, what Flash player/browser combinations do you test in? What known issues do you specifically look out for? If you're an Ajax developer, what frameworks do you use, and which browsers do you test in? This promises to be a great discussion and one well worth having.

Why a Flash vs Ajax Debate?

2006-06-19T16:09:00.000-07:00

I've been wondering for a while why Ajax has become so popular recently, when Flash has had the same capabilities and more for several years. I've been working with both JavaScript and Flash since 1999, and for me, there's never been a debate over which was the superior technology. I avoided JavaScript when possible, mostly because cross-platform compatibility was my prime directive, and because it was possible to do things in Flash that JavaScript was incapable of. For a long time, the Flash Player was more ubiquitous than the presence of advanced JavaScript capability.

Today it seems to me that the Flash Player and advanced JavaScript capability are almost on an even footing in terms of ubiquity (I say this based on user agent stats I've seen from a few different market segments). When you consider that MSIE 6 can make up 90% of the traffic to a consumer-oriented site, that's a pretty good chunk of it. Then, you've got the IE 5.x's, the Firefox's and the occasional Safari. Really, the browser that can't do Ajax is increasingly rare.

I still believe Flash is superior, in many ways. But ironically, the things that used to be its main strengths are becoming liabilities.

I used to rely on Flash because it reduced my testing effort. With Flash, I could be basically assured that what worked on PC IE would work on Mac IE (no small feat, by JavaScript standards). Unfortunately, over the last several versions of the Flash Player, many obscure bugs have come and gone, bugs that existed for perhaps only one minor version of the Player on one browser. I recall one particularly egregious bug in Player 6-dot-something for Mac IE, where you could not cancel a loadMovie request once it was made (hogging up bandwidth to an unusable degree, in my case).

Fortunately, Macromedia was great about fixing those bugs. Unfortunately, the public was not so great about updating their players. These days, if you want to reach that 97% audience that Adobe advertises, you have to target Player 6. I recently came across a scenario where the company-wide IT policy was Player 6, no hope of upgrade (in some companies, shockwave is just completely blocked at the firewall level).

[As a long-time Flash devotee, I cringe while writing the following]

The upshot of all this is that Flash represents a multiplication in testing effort for every back-version you target. Even some of the simplest tasks, such as Local Shared Object read and write, can not in my experience be relied upon to work identically across all minor player versions back to 6.0. If you want to make a compatibility promise, the only way to do so is to test every feature of your application in every version of every targeted browser, in every minor version of the Flash player going back to the targeted version.

To put that in perspective, there are 6 releases in the Player 6 archive, and Player 7 had 7. Let's ignore Player 8 for now. Let's suppose we want to target MSIE 5 and greater, Firefox 1 and greater, and Safari 2 and greater. That's at least 3 versions of IE, at least 3 of Firefox, and probably 2 of Safari (I'm speaking loosely here, I'm sure there are more). That makes 8 browsers to test on, and 13 versions of the player - a total of 104 test configurations.

Yikes.

No development team in their right mind would take on such a testing effort, even for a mildly involved project. (Now, I'm not suggesting that you have to - you can definitely achieve high quality products in Flash without all that. But to be precise, you can't make a cross-platform compatibility promise without actually testing on all targeted configurations.) Compare this to JavaScript, where you have only the browsers themselves to concern yourself with.

Now, I have never tested a complex application in every minor version of the Player, and more often than not, the cross-platform compatibility promise of Flash does hold true. But I have also had situations where bugs didn't present themselves until the product was launched and customers complained. Those situations have made me very cautious, and even though I don't test all the minor versions, I do end up with longer QA cycles on my Flash projects than the JavaScript ones.

Not that testing JavaScript-based apps is easier: there tend to be more unanticipated bugs than in Flash, so I probably end up with more QA cycles.

Ultimately, Flash can still do way more than JavaScript, and I firmly believe it remains a better solution for RIA. But I don't think Adobe can rightfully trumpet cross-platform compatibility and player ubiquity in the same breath. If you want all the considerable advantages that the Flash Player has to offer, you have to sacrifice some market penetration. If you want 97% reach, you have to author for Player 6 and test like mad.

One thing Adobe could do to help the situation would be to publicize the bug databases from old releases of the player. That would at least allow us to know what we're dealing with when developing for older player versions. A lot of the bugs that have given me the most grief in the past were only documented in the Flashcoders archives, and only in the ad hoc format of a discussion thread.

I have had a hard time understanding why so many developers were so keen to jump on the Ajax bandwagon when Flash has been around so much longer. Maybe this testing effort thing has something to do with it. Am I onto something here?

Flash Bug - Contents of TextField w/autoSize = true Scroll When Selected

2006-06-19T15:37:00.000-07:00

This one's for Mark Wubben of SIFR fame -

When you create a multiline TextField and set its autoSize = true, the TextField should expand to accomodate its contents, and the contents should not scroll when selected by clicking and dragging within the text field. However, sometimes when you select the text, it scrolls and the top gets chopped off. This seems to happen most frequently when the mouse exits the TextField at the bottom edge, rather than the right edge.

The best solution I have found for this is not to use the autoSize property at all, but rather to simulate it, and add a little extra height:

myTextField._height = myTextField.textHeight + 7;

7 seems to be the magic number. This is just enough extra padding to prevent the scrolling, and is only a pixel or two taller than the autoSize = true version. 7 seems pretty aribitrary, and the difference between the autoSized TextField and the non-autoSized TextField varys with font face and font size. So, I use 10px to be on the safe side. I've tested this with a lot of different font faces and sizes, and it hasn't failed me yet. To maintain an accurate visual representation, I subtract 10px from the height of the containing object (in the case of SWF Headings, its the ActiveX object or plugin, but it could also be a masked movieclip).

Here's a test case, and the source as well.

[Edit: in the test case, the TextField on the left is autoSize = true, the one on the right has the workaround applied ]

More About Failing Eolas Patent Workarounds

2006-06-14T19:45:00.000-07:00

I happen to be one of those lucky people for whom the Eolas workarounds do not always work. The issue for me is that if I clear IE's cache and then visit an Eolas-remediated site, the workarounds fail. If I restart the browser after clearing the cache, the workarounds are fine. Not all of my PCs exhibit this behavior.

I found the following article which says essentially that the problem may be due to a faulty installation of the Eolas patch:

http://blog.metawrap.com/blog/MicrosoftsEolasActiveXPatchForIESometimesBreaksJavaScriptWorkaround.aspx

Awesome article. Too bad I can't uninstall the patch to prove the theory. Windows gives me Access Denied errors, and won't even let me do System Restore to a date prior to the Eolas patch. I feel a rant coming on...

But I'll spare you my feelings on Mac v. Windows. I think I'll instead keep an eye out for a JavaScript tweak to fix the issue, although at the moment I'm feeling very doubtful that such a critter exists.

A Sad Day on Flashcoders - Update

2006-06-14T07:00:00.000-07:00

As of about 6 PM yesterday, Flashcoders is offline. Maybe it began loathing what it had become and decided to end it all? Start casting your votes - if Flashcoders was standing on a ledge, would you

a) Talk it down - it has so much to live for

or

b) Give it a nudge?

A Sad Day on Flashcoders

2006-06-13T15:08:00.000-07:00

Today was a dark day in Flashcoders history. I counted no fewer than 45 posts on the topic of "Flash coders content degrading" today, and this was a carry over from yesterday. Many of these posts were multi-paragraph rants regarding noobs, RTFM & Googable questions, the place of newbies in the mailing list ecosystem, elitists, etc. The tone of the posts ranged from irate to juvenile to jovial to concerned. The vitriol spilled into other threads as well, with accusations being hurled as to who did and did not Google or read the Help manual before posting. Scorn was heaped, soap-boxes were stood upon, and real questions went unanswered.

I resisted the temptation to voice my own opinion, except to defend one hapless soul who happened across Micael Stuhr's inbox at the wrong time. But my hackles are up, and this blog is the correct forum to voice my opinion, and so here it is:

The only people degrading the content on Flashcoders are the ones who post messages about people degrading the content on Flashcoders, and the occasional "joke of the day". What about the noobs and all their silly questions, you say? I believe there is no such thing as a stupid question, as long as it is sincere. I have learned more from answering "newbie" questions, and from reading answers to "newbie" questions than I have learned from almost any other source. Anybody who thinks they're above "newbie" questions simply doesn't see the benefit they can gain from a review of the basics.

Like many others, I love Flashcoders for its potential to provide answers to really difficult questions. But I recognize that some of the very people who today are asking "simple" questions are the same ones who will be answering hard questions in the future. Over the years, I have watched some great minds at work on Flashcoders, many of whom no longer post to the list. Today, those guys are legends in the Flash world, and probably busier than hell.

Who has taken their place? From today's conversation, it looks like their places are empty.

So, what can be done? Stacey Mulcahey issued a call to save Flashcoders, but then promptly disappeared from the scene. (I don't mean that as a personal attack on Stacey... it's just that 1) I love her blog and have been looking for an excuse to link to it, and 2) I was right there with her and a little disappointed not to see her on Flashcoders anymore). She's not the only one who complained and then dropped out of site. But if you want to save Flashcoders, you can't abandon it.

Here's what can be done: do not respond to off-topic messages. There are those who will... Ignore them. With regard to newbies and RTFM questions: either answer the question, or do not answer the question. It seriously does not take long to determine if a question is of interest to you.

The key thing to remember is this: it is not your civic duty to reprimand anyone for OT, RTFM, or anything else. You are not the OT Police. Dave Watts is pretty much the only person who can be attributed that title, and he seems disinterested in the job.

I know this is an idealistic approach, and not likely to reduce the amount of OT. But it WILL cut the amount of OT about OT, and that actually seems to be more of a problem these days.

Shared Libraries - Branden Hall's Original Solution

2006-06-12T20:47:00.000-07:00

I was researching shared fonts for my SWF Headings library, and I kept coming across references to a post on Branden Hall's blog where he found a slick way to allow dynamic creation of elements from shared libraries. Alas, the post no longer seems to exist anywhere on his blog.

Finally, I found this post on Flashcoders which contains a sizable excerpt:

http://chattyfig.figleaf.com/pipermail/flashcoders/2002-August/045588.html

Interesting technique. Not sure I'll be able to use it, but good to have in the arsenal just the same.

[Edit] Found a more complete writeup elsewhere on Flashcoders: http://chattyfig.figleaf.com/pipermail/flashcoders/2004-June/115662.html

[Edit] Naturally, the Wayback Machine is the first place I should have thought to look:
http://web.archive.org/web/20021206180401/http://www.waxpraxis.org/archives/000062.html

Flash 8 ColorMatrix Explained

2006-06-09T20:17:00.000-07:00

Here are a couple sources I found really useful in understanding the ColorMatrix class:

http://www.adobe.com/devnet/flash/articles/matrix_transformations_04.html

http://chattyfig.figleaf.com/pipermail/flashcoders/2005-September/150592.html

These were simple and straightforward, unlike many of the articles on ColorMatrix that assume you have prior knowledge of matrices in general. Also, much better than the help docs on this topic.

JavaScript - Concatenating NodeLists

2006-06-08T07:56:00.001-07:00

In JavaScript, you cannot concatenate two nodeLists using Array.concat(). This is because nodeLists are not true Arrays, they are more like Objects that happen to have a length property. Here's an example scenario:

var pElements = document.body.getElementsByTagName("p");
var divElements = document.body.getElementsByTagName("div");

// This results in a new array where the last element is the entire
divElements nodeList
var pAndDivElements = pElements.concat(divElements);

As a workaround, I wrote a quick method that will join two nodelists:

joinNodeLists: function(list1,list2){
var i = list2.length - 1;
do{ list1[list1.length] = list2[i];
}
while(i--);
return list1;
}

Note that I use list1[list1.length] = list2[i] instead of list1.push(list2[i]). This is for compatibility with IE 5.

To Do: Make a function that accepts an unlimited number of nodeLists and joins them all.

Great Info on Closures in JavaScript

2006-06-06T10:35:00.000-07:00

If you ever want to know more than you ever wanted to know about closures in ECMA Script, here's the place to go:
http://jibbering.com/faq/faq_notes/closures.html

SIFR Alternative - Update

2006-06-05T15:01:00.000-07:00

I have posted the latest build of my heading replacement library at http://labs.tom-lee.com/HeadingReplacement/. This build includes numerous performance tweaks, a couple of bug fixes, and a major change to the element selection methodology.

First off, I fixed Ian's bug, where some headings scrolled when highlighted by dragging the mouse. Secondly, I have greatly refined the process by which you specify which heading elements will be replaced, and in the process provided support for multiple fonts. Here's how it works:

1) Specify the path to your fonts in a css font or font-family declaration. Paths must be in double or single quotes:

h1{
font-family:"Swf/FranklinGothicBook.swf", Helvetica, sans-serif;
}

Note that the font lists still work: if you don't include the JS library, the CSS selector behaves as you'd expect it to, and you'd get Helvetica. Also, inheritance works the way you'd expect it to, and you can override the declaration later in the style sheet or in an inline style.

I really like this approach because it allows me to specify fonts where style information should be specified (in STYLE sheets), and it does not require a lot of JavaScript overhead for the purpose of parsing CSS selectors. The swf path is merely passed along in the computed style of the element. Sadly, there is no way I know of to make this approach work in Opera, as it does not support document.styleSheets and it does not pass along the swf path from the font declaration. So, I'm making a decision at this point that I will not make any further efforts to be compatible with Opera. I think it's a safe bet that the few people who do use Opera will not miss the smooth fonts, since the pages will gracefully degrade to normal web text anyway.

My next steps will include tweaking the swf path stuff. Presently, you specify FontName.swf and the parser changes that to FontNameV6.swf and FontNameV8.swf, both of which must be on your server. I'd like to come up with something cleaner, more of a single font package that would work for both version 6 and 8. Also, I have some performance tuning to do in terms of decreasing the number of function calls that are made between the swf files and the JavaScript. I may try to create some kind of automatic switching between a high-performance and low-performance mode.

As always, let me know what you think of the demo!

Flash 8 ExternalInterface Crash Bug

2006-06-04T21:55:00.000-07:00

This is one of those things that you can stay up until 1 AM trying unsuccessfully to debug, and then the next morning you spot the trouble immediately.

If a swf uses ExternalInterface to call a JavaScript function that removes the swf from the document, the browser will crash. PC Firefox gives the dubiously helpful error "The plugin performed an illegal operation. You are strongly advised to restart Firefox."

Simply delay the removing call using setTimout, and all is well.

SIFR Alternative - Update

2006-06-02T20:24:00.000-07:00

As suggested by Scott Moore of nonsponsored.com, I've got dynamic font resizing for Safari 2.0 working. Hey, nothing better to do on a Friday night! It may work in earlier versions of Safari as well, but I have not tested it. As before, the test page is at http://labs.tom-lee.com/HeadingReplacement/. I'll be addressing some other issues soon.

Thanks to everyone who has offered their comments so far. I plan to put some sort of bug-tracking system in place for this project in the near future. Hopefully it will be public so that everyone can be included in the process.

I'm also thinking about giving it an official name... I don't really like calling it "SIFR Alternative", although that does say exactly what it is. Any suggestions?

Eolas Workaround Fails If Triggered From Deferred Script

2006-06-02T12:06:00.000-07:00

As a workaround to the gruesome IE Eolas patch, you must write your SWFs into the DOM from an external JavaScript library or other external source. This can happen via a function call within the body of your document, or can be triggered by an onload event.

These two triggers have their downsides. It is often not desirable to put a JS function call within the body of your HTML document, as this makes your code more difficult to maintain. If you have a large site, you probably want a single library that you can snap in and out at will. A lot of function calls sprinkled throughout your site can make it difficult to remove the functionality if you need to.

As far as the onload event goes, it is better to do any DOM manipulation BEFORE document.body.onload, so that if you are replacing images and so forth, they don't need to be completely loaded before they are replaced. It's about bandwidth savings.

So, I thought I'd be clever and trigger my SWF injection script when the DOM is ready, but before the page load completes by using Dean Edwards IE onload solution. Basically, any script that you include with "defer" in the script tag will execute when the DOM has loaded, but before document.body.onload.

Unfortunately, though the swf is injected into the page properly, the Eolas patch is in full effect complete with the "Click to Activate And Use This Control" message. Check out this test page to see it for yourself.

I've tried a bunch of ways around this. It turns out that if the SWF file is already cached, the Eolas garbage goes away, so I could possibly work out some kind of prefetch scheme. If anyone else has come across this and has a solution, let me know!

Protecting SWFs

2006-06-02T11:44:00.000-07:00

This is by far the most informative article I've found to date on SWF obfuscation and protection techniques. http://www.gotoandplay.it/_articles/2004/04/swfProtection.php - I've been referencing this for years.

Posting it so I never lose it - it wasn't easy to find.

SIFR Alternative - Demo Page

2006-06-01T15:36:00.000-07:00

As promised, I have been working to clean up my codebase and post a working demo of my SWF Headings library. This is really a proof of concept: it has a few known issues, and is not feature-complete. At the moment, it only supports one font for all heading elements, and the methods for specifying which headings get replaced are not done. But what it does have is dynamic font resizing and dynamic text reflow.

The demo is a liquid layout, so by resizing your browser window, you should see it in action! Also, be sure to do View > Text Size and play with that a bit.

Let me know if you have any problems, and I'll be working in the meantime to iron out the remaining issues.

Without further adieu, the demo.

SIFR3 - An Alternative

2006-05-24T15:35:00.000-07:00

SIFR is an awesome concept. I hate sacrificing the visual quality of my web sites in favor of accessibility and search engine compatibility, and so when I learned about SIFR I immediately fell in love with the idea. Its not great that we have to resort to these kinds of things to achieve our web design goals, but if it works well, then why not?

As I started using SIFR 2, I became more aware of its limitations. SIFR doesn't allow for dynamic text re-flow (which is vital to liquid layouts). Also, if you modify the text size of your page using View > Text Size (or equivalent), SIFR doesn't resize the text for you. These are not deal breakers, since SIFR is still better than using images. But these limitations are nonetheless a "stone in my shoe", as it were. People (my clients and end users alike) don't care if you're using Flash to display the headers, as long as they don't notice it. But as soon as they try to change font sizes and it doesn't work, they begin to become dissatisfied with the work.

Also, I found SIFR 2 difficult to configure. It was quite a chore to get it to work in my layouts, and the process of updating a special SIFR stylesheet was not intuitive. Also, I had to explain to the other developers why we had to include this whacky css file in the first place.

As SIFR 3 did not seem to be on the horizon, I began developing my own version. My goal was to create a SWF header replacement solution that supported dynamic text reflow, on-the-fly text resizing, and did not require special stylesheets. Ideally, it would get all same style information as the headers it would replace, and be a truly seamless integration. Also, it would be compatible with Flash Player 6 and higher, take advantage of Flash 8 font technology where available, and be compatible with as wide a range of browsers as possible.

I borrowed some ideas from the SIFR 2 libraries (standing on the shoulders of giants), and discarded others. Things like browser detection and cross-platform compatibility were abstracted into other parts of my overall JS framework. And I tested, tested, and tested some more.

And in the end, I was successful. I met every objective I set out to achieve. So now I'm considering releasing the source code into the public domain. I've seen the feature list for SIFR 3, which is currently in Alpha, and I've seen the Alpha page too, and I'm not sure whether SIFR 3 will support text reflow as my library does. Also not sure whether it will allow you to set the size of the text using your browser. So, I think there's a possibility my library will be useful to some people.

I don't consider my work to be competing with SIFR at all. I have no intention of matching SIFR feature-for-feature, since I'd rather just use SIFR than do all that development and testing myself. But I do think my work is pretty good, and I'd like to see it help someone other than me. So, in the near future I'll be scrubbing the code, writing a little documentation, and posting a demo page where you can see it in action.

Let me know if you think you would find a SIFR alternative useful, and I'll work to deliver a high-quality product.

within in Mozilla

2006-05-23T14:02:00.000-07:00

Another arcane css issue... Sometimes I like to use a definition list within a cite element to display the name and title of a person I am quoting, like this:

<blockquote>I am not a crook.</blockquote>
<cite>
<dl>
<dt>Richard Nixon</dt>
<dd>President, USA</dt>
</dd></dl>
</cite>

To me, this makes semantic sense. The cite tag is used to show that the information within it is the citation for what's in the blockquote, and the definition "President, USA" defines the term "Richard Nixon". The advantage to all this markup is that now I have style hooks to work with.

The problem is that in Mozilla browsers, if you make "cite" a block element, it will not contain the definition list within it. In fact, it doesn't seem to matter what you put in it. If, for example, you want to give the cite a border, the child element will appear outside the border.

Adding a span tag around the child element fixes the problem:

<blockquote>I am not a crook.</blockquote>
<cite>

<dl>
<dt>Richard Nixon</dt>
<dd>President, USA</dt>
</dd></dl>

</cite>

This is cruft, and I hate it. But it's the best fix I've found so far. Anyone else got a solution?

Select Blocks (Not Rows) of Text

2006-05-10T13:07:00.000-07:00

I always forget how to do this, so I figured I'd post it here.

To select a block of text in some applications, hold ALT + SHIFT while dragging. Try it, you'll like it!

I'm not sure what programs this works in, although it seems to work in most Microsoft apps.

Sadly, this trick doesn't seem to work in Dreamweaver or Flash.

Playing with Flex 2 Beta 3

2006-05-08T20:09:00.000-07:00

Had to download and install Flex 2 Beta 3 as soon as I heard about it. I like the new welcome screen, although I doubt I'll look at it any more than the last one. I thought it was interesting that they actually performed usability testing on this, and discovered that most people skipped it. That's what people DO with welcome screens, after all: skip them, and never return.

I quickly migrated some of my test projects over to the new beta, and compiled them. After a bit of fiddling, and referencing this page heavily, I was able to get them to work.

Some thoughts regarding the changes:

1) The StringBuilder class is gone, the reason given being that the performance gain it achieved was not enough to justify having two string manipulation classes. Now, I'm all for having a clean API. But I think I'd rather have the (mildly confusing) choice between two similar classes if it means I can have even slightly better performance.

2) Trace is back out of flash.utils, so now you can call it without importing the package. I think I liked it better in flash.utils. The point of putting it there in the first place was (I think) to put control in the hands of the developer. If I don't need it, why load it? Again, convenience be damned if it makes for even SLIGHTLY poorer performance. Plus, it just seemed at home in flash.utils, rather than floating about the ether as a global method.

Anyway, that's my first quick look at things. I will no doubt be posting more on the subject as I delve more deeply.

Best Flash Blog Ever?

2006-05-08T15:23:00.000-07:00

In my book, the title might go to this man, who is an engineer at Macrome... er... Adobe and works on the Flash Player. Every time he posts, I learn something new about the internals of the Player, or how decisions are made on the Player team.

Today's post on frame rates was typical Tinic quality. I had always wondered about why frame rates can be so imprecise, and now I know... in detail.

Also, he always seems to convey a healthy irreverence for the Player as a piece of software. He's not afraid to point out flaws or room for improvement. Now, if we can just get him to post more frequently!!

Dynamically Inserting FSCommand-Capable Flash Objects With innerHTML

2006-04-25T15:20:00.000-07:00

Let me preface this post by saying that if you've never tried to dynamically write a bunch of FSCommand-enabled swfs into an HTML page, you'll probably be really confused by what follows. In point of fact, there's a good likelihood you'll be confused anyway, since my writing is not particulary lucid. But glean what you can. Forging ahead...

Suppose you have a series of SWF files to dynamically insert into a page (maybe, just maybe, as a result of the infernal Eolas patch) and these SWF files need to communicate via FSCommand. You must also add a script block for each swf, to capture the FSCommand calls. Typically, this would be a block of VB Script, like the one Flash puts into the HTML files it publishes with your SWF.

Now suppose we have the filenames of the swfs in an array, and we want to loop through the array and write each swf into the document. We need to dynamically create an ID for each one, create a VBScript for it, and then insert them into the document. Since you can't use innerHTML to insert VB Script, you have to use the DOM:

for(var i=0; i < swfArray.length; i++){
var mySwfId = "swf"+i;

var myVB = document.createElement("script");
myVB.language = "VBScript";
myVB.text = "Sub "+mySwfId+"_FSCommand(ByVal command, ByVal args) \n call "+mySwfId+"_DoFSCommand(command, args) \n end sub ";
// Insert the VBScript into the Head element
document.getElementsByTagName("head")[0].appendChild(myVB);

// Insert the swf into the target element
var mySwf = '< object id='+mySwfId+' ... swf code omitted ... < / object>';
targetElement.innerHTML = mySwf;
}

This method works pretty well as long as the VBScript is inserted before the swf is, and as long as you're doing this before the page load completes. For some reason, the VBScript doesn't seem to work if it is written into the page after loading completes. I fooled around with some techniques for simulating onDomReady in IE, but while some of them worked locally, none of them worked under live network conditions. This meant that I had to put my init() call before the closing body tag, which I hate to do because it makes my code less maintainable.

Happily, it turns out that you can use JavaScript instead of VBScript if you prefer, and JavaScript is much more forgiving in this matter. You can also insert the JavaScript via the innerHTML property:

for(var i=0; i < swfArray.length; i++){
var mySwfId = "swf"+i;

var myJS = '< script event=FSCommand(command,args) for='+mySwfId+'>\n '+mySwfId+'_DoFSCommand <\ /script>';

var mySwf = '< object id='+mySwfId+' ... swf code omitted ... < / object>';

// Insert the swf and the JavaScript into the target element.
targetElement.innerHTML = mySwf+myJS;
}

The order here is important: the JS must be inserted AFTER the swf for it to work if the swf is inserted after page load. If you insert the swf onDomReady, it seems to work in either order. I always add the JS after the swf just to be on the safe side.

Here's where I found out about using JavaScript instead of VBScript to catch the FSCommand calls.

I know this post is a bit confusing, since the code is pseudo-code and out of context. But I'll do my best to answer any questions you might have. At any rate, maybe this will help someone who, like me, was Googling for hours trying to find the answer to this obscure question.

IE bug: background-image and :hover kills page load status

2006-04-24T10:52:00.000-07:00

This bug relates to anchor tags with a background-image defined on the hover pseudo-class, as follows:

a:hover{
background-image:url("yourimage.gif");
}

When the user clicks this link and then moves their mouse off of the link, Internet Explorer's page load status indicators (the wavy Windows animation in the upper right corner of the browser, as well as the status-bar at the bottom of the browser) will revert to their default states, seemingly indicating that nothing is loading. However, the requested page actually IS loading, and will appear when the process is complete.

This is most noticeable when submitting a form, or with high-latency network conditions.

There is a workaround, although it is imperfect:

a:active{
background-image:none;
}

This works well, although if the user clicks anywhere on the screen, the link will revert to its default state, and the load status indicators will go to their default states as well, showing no page load activity.

See http://www.nabu-beraterteam.de/dev/ie6-bg-img-link/ for more information. This bug may be related to the IE background-image caching flicker bug, although applying the IIS fixes did not resolve the problem for me.

Flash Minutia: getURL("javascript:function();") fails on Mac Opera 8.0

2006-04-19T12:53:00.000-07:00

Using the getUrl command to call a javascript function from a swf fails on Opera 8.0 for the Mac. For example, the following code:

getURL("javascript:alert('Hello World');");

should cause a dialog box to appear. However, in Opera 8.0 for the Mac, it does not.

The fix, as described by Alex at Linecraft Blog is to ensure that the AllowScriptAccess parameter of your embed or object statement is set to "always", or to simply omit the AllowScriptAccess parameter altogether, which has the same effect.

More IE Fieldset Wackiness

2006-04-13T15:32:00.000-07:00

If you have a legend element styled position: relative; within a fieldset, the top border of the fieldset will be pushed down the page. The amount the top border of the fieldset is pushed down the page is equal to the height of the content preceding the fieldset.

This is true only for the first fieldset on the page. Subsequent fieldsets will display normally, regardless of whether their legend elements use position:relative. See the test page for a demonstration.

The good news is, there is a fix: simply applying position:relative to the fieldset element in addition to the legend element will fix the bug.

Fieldset Border Bug in IE

2006-04-13T13:47:00.000-07:00

There are many problems with the way that fieldsets are rendered across virtually all browsers. This is yet another for the IE pile, and it only happens in obscure circumstances, so I'm not too surprised I haven't seen it posted elsewhere.

If you apply a negative margin to the top or bottom of an input or select element in a fieldset that has a legend, the top border of the fieldset will be repeated at the position of each input or select element. Sound a little murky? Check out the test page.

The test page has a strict doctype, but the bug also occurs with transitional doctypes. I've confirmed the bug in IE 5, IE 5.5, and IE 6. Let me know if you have a workaround!

Flash Quirk: ExternalInterface IE "Expected ;" Bug

2006-04-12T08:07:00.000-07:00

This information applies to Flash Player 8,5,0,246 and may also apply to other versions.

If you use an integer for the id of your swf object element, ExternalInterface.call will fail and IE will report a script error:

Expected: ';'

The solution is to not use integers for element ids.

Open Source CSS Helper Library - What features would you like to see included?

2006-04-10T15:23:00.000-07:00

I plan on releasing a library of JS functions designed to provide functionality for CSS properties that Internet Explorer does not support. It will work in conjunction with the IE-only expression operator. This will be an open source effort, so it will be free to use, but it will adhere to the strict standards of quality I follow in my professional work.

I intend to do the usual min-width, max-width, min-height, max-height, etc. Which CSS properties would you like to see support for? Let me know, and I'll do my best to include them.

Windows XP Service Pack 1 with Apple Bootcamp - DON'T TRY IT

2006-04-09T09:15:00.000-07:00

I wasn't able to immediately get my hands on a Win XP disc with Service Pack 2 included, so I decided I'd try a Service Pack 1 installation. Everything went normally, until the very last step when Windows reboots your computer, which it failed to do. I manually rebooted the system, and was able to bring up Windows, but the Mac drivers would not install on SP1.

Now, this is a bad thing, because that includes the ethernet drivers. They wouldn't install either. No internet, no upgrade to Service Pack 2.

I downloaded SP2 on another machine, burned it to CD, and tried to update the SP1 installation. This failed as well.

Ultimately, I had to remove the partition I had made with Bootcamp and start the whole process over again, this time with a WinXP Sp2 disc in hand. This time, everything went smoothly. The whole ordeal makes for a long and boring Saturday night, so I recommend against making the attempt with Service Pack 1.

Installing Windows on My New Mac Mini

2006-04-08T17:59:00.000-07:00

Well, I took the leap and bought my dual-core Mac Mini today... Everything about the experience has been awesome so far, except installing Windows on it. That is to say, Bootcamp is working perfectly, and the installation is working perfectly, but I am reminded anew of just how much Windows installations suck. Tonight I will probably have "Setup will complete in approximately: 36 minutes" stamped across all my dreams.

Windows on a Mac, or The Final Nail in the Wintel Coffin

2006-04-05T08:12:00.000-07:00

As an art student, I was educated on Macs, but I never could understand why all my colleagues were so in love with them. Yes, the colors on the display were more natural. Theoretically, they could crunch graphics faster than Wintel machines, but the Wintel machines had faster processors, so they seemed about equal to me. When the G2s in the lab broke (which they frequently did) you couldn't really fix them. When they became outdated, you couldn't go down to Staples and snag some new hardware for them.

Fast-forward to Christmas 2005. I have 16 hours of digital footage of my son that I need to edit down to a 45-minute DVD. The import process on my 3GHZ 1GB RAM Wintel box is going poorly. Video is coming in with huge green blocky artifacts, and Windows Movie Maker (or whatever it's called) is unusably slow. Even the mighty Adobe Premiere has been brought to its knees. Hours of trying to tweak out performance bottlenecks have proven fruitless. The Mac Mini on my desk (that I only use for cross-platform compatibility checks) is giving me a shy little wink.

"This thing has firewire? Ok, let's give it a whirl", I think to myself. Within minutes, I've got iMovie importing my footage flawlessly. Editing is a breeze with no signs of sluggishness in the UI. It just works. Granted, it took 14 hours to export a disc image from iDVD (a known issue), but I was asleep for most of it, so I didn't really care.

Fast-forward again to the present. I have a workstation at home that needs to be replaced (433 MHz PII with a fan that sounds like a llama giving birth), and the dual-core Macs are looking mighty sexy. That slick OSX interface is calling to me. The comparitively garish color pallete of my Wintel machine is beginning to finally destroy my retinas. Windows Vista will likely not ship until 2007. But I have all this Windows software... I can't afford to run out and buy Mac versions of Studio MX and Creative Suite (especially since CS2 will probably never be a Universal Binary).

Enter Apple Bootcamp. This has finalized my decision to buy a Mac. With Bootcamp, Apple is releasing an officially supported means of dual-booting your Intel-based Mac with Windows and OSX. This will allow me to continue to use my legacy Windows apps, while slowly migrating over to a total Mac environment. My wallet likes slow transitions.

I wonder how many other Windows users are in the same situation? The move to Intel chipsets and dual-booting with Windows seems like a smart strategy for Apple. With the ubiquity of Apple stores in major cities, it's now easier than ever to get supplies and support for Macs. The popularity of the iPod has done awesome things for the Apple brand.

It seems like a lot of pieces are coming together in Apple's favor. I, for one, am finally convinced.

Comma operator in ECMA script

2006-04-04T18:45:00.000-07:00

From this page:

Enter a technique I discovered out of necessity, which I call "one-time use expression()". It relies upon the rarely used comma operator in ECMAScript. The expression expr1, expr2 evaluates both expressions, but returns only the value of the second. So we do 2 things inside expression() using this. The first being our dirty deed, secretly inserting markup into the header. The second removes the mechanism we utilized itself! We simply set the value of the property to "none", overriding the current expression() value. It goes away, but leaves the inserted markup. This hack effectively allows "CSS" (I'll use the term loosely) content-generation in IE4+ in Windows! The limitation being, of course, that one must have scripting enabled. Some have told me that expression() works with scripting disabled (that would be a serious security issue in IE, which wouldn't be surprising in the least), however my tests seem to indicate otherwise.

I had seen this done in IE expressions before, but had never seen an explanation of how/why it worked. Firing up Flash to see if the comma operator works in ActionScript...

...and it does!! Really cool! I can see the uses for the comma operator as a shortcut syntax, and perhaps as a weak-strength obfuscation technique, but aside from IE expressions, I can think of no other practical use for it. Everything you can do with it can already be done with other, more maintainable techniques. Am I missing something??

IE CSS Expressions - Javascript Disabled

2006-03-30T09:16:00.000-08:00

On my test machine, I have found that IE's proprietary CSS expressions do not work with JavaScript disabled. This is in conflict with a number of postings on the subject, including this one at Position Is Everything. Midway down the page, it says:

The upper limit is enforced by a max-width on #sizer, and IEwin is included
via an "expression" hidden in a Conditional Comment in the head. While this is a
script, the user cannot disable this type of CSS expression when disabling
JavaScript.

I'm thinking that this probably USED to be true, and has since been changed by a security patch. Does anyone know for sure?

Differences between Element.offsetWidth and CSS width property

2006-03-29T18:37:00.000-08:00

I'm sure most CSS jockeys are probably already aware of this, but I'll make a note of it for posterity.

This information is specifically for IE6 in Strict mode. Other browsers differ in their implementation of the box model.

The width property in CSS and the offsetWidth property in JavaScript are two very different things. For example, if you set an element's width to 500px in CSS, the element's offsetWidth may not be 500, depending on the margins, borders, and padding you have applied to the element. Here's how it breaks down:

Element.offsetWidth = CSS width + total horizontal padding width + total horizontal border width

Example:

width:300px, border:5px solid green, padding:5px, margin:5px

In IE6 strict mode, the offsetWidth will return 320, rather than 300 as you might expect. Also, offsetWidth does not include the margin, so to get the actual width that the element takes up on the screen, you have to add the total horizontal margin to the offsetWidth.

Max-width in IE Using a CSS Expression

2006-03-28T18:19:00.000-08:00

This post is a continuation of the "How Many Pixels in an EM?" series I have been working on, although now that I know exactly how to calculate the number of pixels in an em, I've moved on to refining other aspects of the expression itself, and so I've decided to move away from that title.

I contacted Svend Tofte himself regarding this work, and he took time away from his very busy schedule to give me some very valuable feedback (many thanks to Svend!). He pointed out to me that expressions that may work well in quirks mode can cause the browser to crash in strict mode, due to differences in the box model than can trigger infinite loops.

As I am no stranger to danger, I slapped a strict doctype on my test page and... voila... brought my mighty workstation to its knees. CTRL-ALT-DELETE did nothing. I actually had to manually switch off the box for the first time ever.

As soon as I could power back up, I removed all margins, padding, and borders from my test elements, loaded the page, and started resizing my browser like a madman. The divs scaled perfectly this time... No locked-up IE, no smoke coming off my CPU, just good old-fashioned max-width joy.

To make this long story short (or at least a reasonable length) I did some investigating and found that you have to factor in the total width of your margins, padding, and borders in order to use the expression safely in strict mode. Since you're testing the offsetWidth and then setting the CSS width property, you have to compensate for the differences between the two. Otherwise, it is possible for the expression to enter an infinite loop where setting the width of the element causes the parent element to change its size, which again fires the expression, and so on.

Without further adieu, here is the expression in all its hairy glory:

width:expression((this.parentElement.offsetWidth - (parseInt(this.parentElement.currentStyle.paddingLeft)+parseInt(this.parentElement.currentStyle.paddingRight)+parseInt(this.parentElement.currentStyle.borderLeftWidth)+parseInt(this.parentElement.currentStyle.borderRightWidth)))
> ( Math.round((30*(screen.deviceXDPI?screen.deviceXDPI:96)/72)*parseInt(document.body.currentStyle.fontSize)) + (parseInt(this.currentStyle.marginLeft)+parseInt(this.currentStyle.marginRight)+parseInt(this.currentStyle.paddingLeft)+parseInt(this.currentStyle.paddingRight)+parseInt(this.currentStyle.borderLeftWidth)+parseInt(this.currentStyle.borderRightWidth)))
? "30em":"auto");

Quite a beast, no? Pretty it's not, but it works really well in strict mode, in IE 5, 5.5, and 6. With any combination of margins, borders, and padding you care to throw at it, and at any screen resolution. Don't believe me? Take a look at my test page.

There are two places where you have to specify the desired max-width. Just replace the number 30 with the number of your choosing. You can also replace "auto" with another value, but I would be very careful when doing so. If that value should somehow evaluate to greater than your max-width value, I would expect to start seeing flames shooting out of your USB ports. ;) (ok, so maybe I'm being dramatic).

I'll be testing variations on this expression in the near future, so stop back and check out my progress. Also, please check out the test page and let me know how it works for you!

Bump Mapping in Flash 8

2006-03-28T11:54:00.000-08:00

This is just awesome. Ralph Hauwert at http://www.unitzeroone.com/ is doing some great stuff in the "you mean you can do that in Flash?!!" department. I'm curious to see how these techniques become utilized in real-world artwork, as opposed to the laboratory.

Technique: Google Analytics for Dynamic Pages

2006-03-28T11:29:00.000-08:00

I'm evaluating Google Analytics, and I'm fairly impressed so far. Not bad, for free stuff!

The first question that I had after reading the installation notes was "How do I track different states of a dynamic page?". For example, it is quite common to use Panel controls in ASP.Net to show different steps in a multi-step form, rather than having a separate page for each step. Since the Analytics urchinTracker Javascript is embedded once on each unique page, I was concerned that different states of a dynamic page would be untrackable.

Fortunately, this is not the case. You can call the urchinTracker JavaScript call from each state of your dynamic page, and simply pass it a made-up page name:

urchinTracker("checkout.html")
urchinTracker("confirm.html")
urchinTracker("success.html")

These "virtual" pages can be used by Analytics the same purposes as a real page. See the Google Analytics help info for more. Pretty cool!

Transferring large files the easy way....?

2006-03-27T19:29:00.000-08:00

I used to use Dropload, and I still hear it being recommended all the time. However, I can't remember my account info, so I can't log in. I have hit the "I forgot my password" link several times and never had my account info emailed to me. I have tried to sign up for a new account several times and never succeeded. Their FAQ's failed me, and the trouble ticket I opened was never responded to by their customer service people.

So now, I am a satisfied user of www.yousendit.com. It says what it does, it does what it says. No account necessary, which I think is a smart move on the part of their IT people. No account management means less work for them, and no login hassle for me.

Lessons learned? If you have a service that requires customer support, be prepared to provide it, or you'll drop your customers like some kind of... well... load.

Flash Player 8: Right features, wrong time?

2006-03-27T15:30:00.000-08:00

There was a time, not so long ago, when I used to frequently think things like "If only Flash had blur built in!!" and "Oh, for a Flash Player with Photoshop-style blend modes!". I personally requested the latter feature for 3 major versions of the Flash Player. I spent hours trying to discover ways of achieving those effects through other means, beating my head against the keyboard until F, G, H, and J were imprinted permanently on my forehead. I stayed up until 4 A.M. far too often. And, I figured out some cool stuff... all of which is, since the release of Flash Player 8, completely and utterly irrelevant.

We all got used to being a bit confined. An entire aesthetic developed around the constraints of the Flash Player, typified by 2D design, heavy strokes, flat colors, simple gradients. This aesthetic hit the big-time with the iPod ads, and a slew of others. I didn't like the style at first, but it grew on me, or I grew with it, and it eventually took over. Now everything that I used to think was awesome looks dated and trite. This is a natural part of evolving as an artist, but when I realize a shift has taken place in the design world, I begin to wonder what's next.

Flash 8 promised such a shift. I anticipated its arrival with a great deal of panting and salivation... But now that it has arrived, I am unexpectedly at a loss for inspiration. Now that I can easily layer alpha-channeled video over my whirling, swirling "vortex of infinity" background, why would I bother? It was so much cooler when it was hard to do.

I came across an article last evening that I think explains part of the let-down. In it, Cecelia Holland writes about her experience teaching inmates at a maximum security prison. She describes how one imate would spend hours building beautifully detailed sculptures out of foil gum wrappers, the only viable medium he had available. Another inmate was an amazing novelist: until he was released from prison, from which point he was never again able to write with the same passion or skill.

The point of it all is that old adage: necessity is the mother of invention. The inmates in Pelican Bay State Prison made beautiful art, but only because it was their only means of expression. Now that I am out of the prison of old Flash, what will I do with new Flash? Maybe I can violate my parole and get sentenced to life developing for Flash Lite.

Or maybe I can take these new tools and apply them to my craft as a mature artist rather than as someone who is merely pushing the limits of their medium. I used to try to discover every cool new trick I could so that my designs would be unique, or so that I could feel like I was at the top of my game. I'm still going to do that, but now I think it will be less of an end unto itself. Flash 8 has levelled the playing field. Now, we all have pretty much the same toolset, regardless of our ability to hack the Flash Player. So, what's next? I think the future of Flash design is less about gimmicks and more about plain old artistic merit. And that's a life sentence I can live with.

How Many Pixels in an EM? Part 2

2006-03-17T07:36:00.000-08:00

Yesterday, I blogged about a formula I came up with for determining the number of pixels in an em. Jan commented that perhaps this approach isn't such a good idea, because it might break when someone changes the font-size of their OS. This is actually not the case: changing the font-size in your OS doesn't change the pixel size of a point or an em.

However, Jan's comment prompted me to dig a little deeper. Can the size of an em change based on the screen resolution? Turns out, it does. At least according to this article, which I can only assume is correct given my lack of different displays to test it on. About mid-way down the page, in a lovely yellow block, is the following critical information:

Pixels per em is a crucial concept. As much as any other single factor
(such as ex-height), it determines the legibility of characters on screen at a nominal point size. The higher the ppem, the better defined are the characters' features, and the more and larger decrements are possible before hitting the legibility floor. If the ppem of the base size is low, fewer and smaller steps are
possible.

Pixels-per-em refers to the number of screen pixels required to render the em of a font at a size given in points.

A point is 1/72". On a system displaying 72 pixels per logical inch (Mac OS standard ppi), 1 point equals 1 pixel. On a system displaying 96 or 120 ppi (standard Windows settings), 1 point equals 1.333 or 1.667 pixels, respectively. The formula for ppem is a(b/72), where a is the font size, and b is the logical resolution figure.

For example, 12 points at 72 ppi (the legacy Mac OS browser default) or 9 points at 96ppi have a ppem value of 12. Twelve points at 96ppi (the legacy Windows browser default), or 16 points at 72ppi both have a ppem of 16. Twelve points at 90ppi have 15ppem, and 12 points at 120 ppi (Windows "large fonts") have 20ppem.

Nice. This both proves my formula, and puts a monkey wrench in it. If someone has changed their display resolution from the Windows default 96ppi, the formula is no longer accurate.

All is not lost. Since we're dealing with an IE-only expression to begin with, we can take advantage of an IE-only JavaScript property, screen.deviceXDPI. Our expression becomes:

width:expression( document.body.clientWidth >
(30*(screen.deviceXDPI/72))* parseInt(document.body.currentStyle.fontSize)?
"30em": "auto" );

This expression would yield a max-width of 30em. Naturally, it couldn't be this easy... Now, the expression no longer works in IE 5 or IE 5.5 because they don't support our new best friend, the deviceXDPI property. Well, I don't have too much of a problem with that. Out of the 5% or so of my visitors who have IE5 or IE5.5, how many of those would also have changed their display DPI? I think not many. But, just so the expression degrades well, let's test for the existence of the deviceXDPI property and adjust accordingly:

width:expression(document.body.clientWidth >
(30*((screen.deviceXDPI?screen.deviceXDPI:96)/72))*
parseInt(document.body.currentStyle.fontSize)? "30em": "auto" );

In this (increasingly long) expression, if screen.deviceXDPI is undefined, the default value of 96ppi is used. That oughtta do it. Comments?

How Many Pixels in an EM?

2006-03-16T12:29:00.000-08:00

In the interest of creating CSS-only layouts, it often makes sense to emulate CSS properties that IE doesn't support by using IE-only expressions. An example is the work of Svend Tofte in emulating max-width, which I reference quite often even though it is now 2 years old. I recently created a min-width expression based on this. Here is Svend's expression for max-width:

width:expression( document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)? "30em": "auto" );

Quite nice, but requires a bit of experimentation to get it to work right. In Svend's words:

Basically, with document.body.clientWidth, we get how wide the browser
window is. Using parseInt(document.body.currentStyle.fontSize), we get the font
size in pt's, that the user has currently set. I experimented, and at 12pts (the
normal size), the browser window gets wider then 30em's, at more or less 500
pixels. Of course, it's then a small matter, of calculating backwards, in the
scale, and see, if that if the default font size is 14pt (larger), then 30em's
will be exceeded at 583 pixels (roughly). The sad thing is, that you will need
to find the magic number, for whatever width you want for your letters. For
30ems, 500 pixels is the magic number.

Just as a reference for myself, I began tabulating the width of a 1em-wide div at various font sizes. In other words, I took screen captures and measured them in Photoshop.

body{
font-size: 500pt;
}

div{
background-color:black;
width:1em;
}

This yields a div that is 667 pixels wide.

Then I realized that if I graphed the pixel width of the div versus the font size in ems, a nice curve emerged, which meant to me that there must be a common factor. So, I took the pixel width of the largest measurement and divided it by the pt size of the font:

667px/500pt = 1.334

A little bit of algebra yields the formulae:

px per em = 1.334 * pts
and
px = ems*1.334*pts

I tested this out in IE and Firefox with serif, sans-serif, and monospaced font families, and it holds true regardless of font size. Applying it to Svend's original expression gives me the following max-width expression (where the desired max-width = 30em):

width:expression( document.body.clientWidth > (30*1.334)*
parseInt(document.body.currentStyle.fontSize)? "30em": "auto" );

Hope you like it... Please comment if you find it doesn't work for you!

My First Time

2006-03-16T11:46:00.000-08:00

This is the inaugural post for my first-ever blog, TL on PL. PL stands for "presentation layer" technologies, specifically Flash, CSS & HTML. I'm sure I'll also write occasionally about Photoshop, Illustrator and other graphics and animation tools. I do a ton of research on these subjects in my career as a web designer/developer and I needed a permanent place to log my discoveries. As I come across useful tidbits of information, I'll post them here where they won't become casualties of my numerous Windows reinstallations.

I would also like to compile a comprehensive list of Flash Player quirks: stuff that you only find out about by chance, bugs that maybe only exist in specific minor versions. The kind that keep you up until 4 AM before you figure out that you weren't doing anything wrong. Until I can get Macr/Adobe to give me a copy of their bug database (hint hint) I'll have to do this a very little bit at a time.

Naturally, I'll also be creating a custom template for this blog... I just know I won't be able to handle using someone else's design for very long. So, look for that to change fairly soon.

Hopefully, this blog will be helpful to someone else looking for answers, and not bore them to death in the process.