Donnie Steele

Scion: Little Deviant website

noreply@blogger.com (donniesteele) — Tue, 10 Jul 2007 17:44:00 +0000

No time for love Dr. Jones... Been a little busy, but came across this today courtesy of adverblog and the section transitions are worth the price of admission alone.

Crisis in Darfur

noreply@blogger.com (donniesteele) — Wed, 27 Jun 2007 15:44:00 +0000

Having just wrapped up a project with the United States Holocaust Memorial Museum I got peek another project, which is now live - Crisis in Darfur. If you don't have Google Earth, you'll need to download it, which you can do for free here. Google Earth alone is worth the download, but the USHMM extremely rich presentation built into the foundation of the program is remarkable. Not to be preachy, but this isn't just a remarkable interactive piece it is also a cause - take action.

here

Crowdsourcing with the interweb

noreply@blogger.com (donniesteele) — Mon, 18 Jun 2007 16:20:00 +0000

With the ushering of Web 2.0 and giants like Flickr and YouTube, the hot thing in interactive advertising is user created/generated content. Merging entertainment with utility, the companies launching these sites have managed to create low-overhead by placing the onus of fresh, engaging material on their own user base. The fact that this even works in the first place is pretty impressive, considering cited malaise of internet users, and moreover is exciting in the fact that it demonstrates the millions of online users want something to do. No one has been more successful at converting this desire to "do something" into direct profits than Threadless. On the online t-shirt retailer solicits designs from their user base. Every single t-shirt Threadless produces was designed by a member of the site, who was rewarded with $1,500 in cash and another $500 in merch.

Today's Post, which can be woefully out-of-date in reporting the goings on in the interactive front, has a decent article chronicling Threadless' rise as well as tracking how other companies are trying to leverage the burgeoning internet work force into doing all of the work for them. For each company that achieves wide-spread success there are a dozen more that failed miserably attempting the same.

What separates one campaign from another?
Clearly, to achieve some kind of success with user-generated content your offering needs to fall into one of two categories:

1. pay money for winning submissions

2. provide content that is intrinsically desired by online users ~ which probably has a traditional market analog (video, imagery, video games)

The idea of paying for the material is becoming even more dominant as firms look to pay at least a small proceed to producers of ideas, video and imagery that contribute. By paying a premium for fresh content from your users, you in turn drive up traffic, which results in higher advertising returns. It's akin to banking loans. The bank pays you a small amount of interest to keep your money in the bank, which they are then able to loan out at higher rates. Banks are really profitable. An model that follows a bank's model is good. Ergo, paid user generated content is good.

Simple. As. That.

Incidentally, my buddy Eric designed a shirt that Threadless produced. It's almost out of print though, so better get it now.

Interview with Lee Clow

noreply@blogger.com (donniesteele) — Wed, 13 Jun 2007 12:43:00 +0000

It's pretty hard to not recognize Apple's 1984 Mac advertisement as a fundamental shift in advertising communications. It was (and still is) evocative, rich and even has a narrative. The man behind that ad was the legendary Lee Clow who at the time was working for Chiat/Day. Anywho, Ad Age interviewed Lee. And when Lee speaks you really might want to listen. Read the full article (.pdf).

BFI: Abolitionists of C-Clamp Websites

noreply@blogger.com (donniesteele) — Tue, 12 Jun 2007 11:58:00 +0000

You'd have to really dig to find out that Big Fat Institute is actually located in sunny Kentucky, which is probably a wise secret to keep, but these guys do a ton of things right. They coined the term "C-clamp" websites; C-clamp sites being those generic, two-column, way-to-pervasive sites that are locked in that all-to-familiar header, left nav, footer layout, which resemble a 'C', hence "C-clamp". The term not only captures the visual semblance, but also the utilitarian aspect - utilitarian, but no value added.

Question from audience: Isn't this a C-clamp site?
Answer: No. no. This is a C-clamp blog. Check out the site if you're looking for user experience.

The site itself plays out like a 50s instructional video, which is pretty well done, but also reminiscent of WDDG's site that uses a WWII-themed instructional video. Anywho, these guys currently hold the campaign for iRobot and a couple other national brands and are definitely doing justice by their clientele. More importantly, they're killing the enduring C-clamp sites one at a time.

"So you're in Kentucky?"

"Yeah! Have you heard about the burgeoning creative towns coming out of KY?"

"No."

"Hmm. me either."

* not an actual conversation. just assuming how each client meeting must start out.

"Sam was once a unicorn from outer space"

noreply@blogger.com (donniesteele) — Mon, 04 Jun 2007 13:45:00 +0000

When that's the opening line of one of the founder's bio you know this the site's gonna be unique. The site is a portfolio site for FriendsWithYou, which is collectively Samuel Borkson and Tury Sandoval. With a manga style of illustration the site is insanely sticky. It's pretty ease to burn 5 minutes just messing with the navigation header alone. For tech heads, it's a great mix of Flash and AJAX - again proving you can use both and not be flamed at the WWDC.

Cicatriz - Hipster Clothing that Moves

noreply@blogger.com (donniesteele) — Tue, 22 May 2007 15:00:00 +0000

I guess it's fair to say Hillman Curtis started the concept of shooting video of hipsters and other classes of vintage New Yorkers standing nearly still for visual effect, but Cicatriz actually applied the same concept to actually make money. The simplicity of the e-commerce function, with real-time product quantity availability is wicked cool and the music selection is perfect. Aww damnit. Guess this ended up being a fanboy posting. Oh well, the site is still really imaginative - especially the interplay between the models stuck in the cubes.

Captive Interactive Advertising

noreply@blogger.com (donniesteele) — Thu, 17 May 2007 20:21:00 +0000

I love me some Lost. Occasionally, I actually miss it. And because I don't own a DVR and refuse to pay for it on iTunes because it's free on abc.com, I watch it there. ABC's online distribution is top-notch. More importantly it generates advertising revenue. Even more importantly, some advertisers have gotten very smart how to capitalize on the 30" of time you are captive waiting for your streaming clip to start back up. The first that made me take notice was from Fidelity. Correct, the stodgy old Fidelity got smart with their rich media interstitials.

As you watch an episode of Grey's, Lost, Desperate Housewives, etc, ABC presents the episodes in a handful of blocks. In between said blocks, they break for 30 seconds of commercials. As a viewer, this is a pretty fair trade. You get to watch the videos on demand, and only have to suffer through three or four commercial breaks of 30 seconds instead of five or six at 3 or 4 minutes in length. With that comes a certain appreciation for the advertiser who is "presenting" the episode for your viewing entertainment. I find myself slightly (just slightly) more willing to pay attention to their ads to see what this is all about.

So. I'm watching a missed episode of Lost, which was presented by Fidelity and was shocked by their intelligent use of the interstitial. They know they have you for 30" and that you have little interest in launching a new window to view their ad. So they came up with the "Wheel of Easy". Requiring all of the intelligence mustered up from a Wheel of Fortune contestant you click "spin wheel" - you don't even have to spin the wheel yourself. Be lazy. Then you get a Ze Frank-ish video showing someone doing whatever totally easy, lazy task need be performed.

Once ABC's 30" countdown clock ended I proceeded immediately to the nearest "skip" button so I could finish watching my episode. However, the effect was achieved. For thirty seconds, not only did I watch a Fidelity ad - I engaged in it - the holy grail of advertising experiences. Not to mention I'm writing about it weeks later :/

The step Fidelity has taken is an important one, for them and for other companies trying to navigate the muddy online delivery model. Allow people to engage at a superficial manner in a captive environment and you'll grab their attention.

Michel Gondry's HP Commercial

noreply@blogger.com (donniesteele) — Wed, 16 May 2007 20:01:00 +0000

Nothing like ignoring your blog for a couple weeks, then dropping in with a totally thin link out to youtube. I'm a sucker for most anything Michel Gondry, save for the Kanye video that Plympton redid (better). Anywho, this commercial for HP's series of 'Personal Computing' ads is classically awesome Michel. It's okay to laugh because he has a girl's name... And because he's of the French persuasion.

Web 2.0 != (does not equal) AJAX

noreply@blogger.com (donniesteele) — Mon, 23 Apr 2007 21:12:00 +0000

As an agency moves into developing a new interactive marketing/advertising campaign or website the term thrown around with reckless abandon is "Web 2.0". To many firms, this simply means the incorporation of AJAX. The presence or absence of AJAX is not the salient distinguishing feature. It's the social networking aspect the site creates amongst its user. This is not a new complaint. Tim O'Reilly, who's smarter than your mom, has lamented this nexus as a requirement for a while now.

And not to be misunderstood, I'm a big proponent of AJAX, I use it in a lot of projects because the project demands it. However, AJAX was the missing piece of the puzzle that allows HTML to behave like Flash. The ability to read data, refresh the display in a light, quick manner without having to reload the entire page has been around since Flash could parse XML files. So, to say that only an AJAX-driven site can be 2.0, is to also have your eyes closed to the available technology.

The point is simply to remember that Web 2.0 is a concept. One that involves people interacting with each other - that have been empowered to engage in the process of transactional conversations with the user base and with the site itself. A hallmark of a 2.0 site is the ability to *give* content to the site. It's about content assemblage and ownership. Google, Flickr, YouTube, WuFoo, etc - they all provide great, free services, but in turn they are all collecting massive amounts of data.

So what does this mean for companies seeking creative services? Forget about the tools - AJAX, Ruby, whatever. Spend more time finding the creative firm that has a history of developing campaigns with effective response rates. They're in a better position to determine what the right tool is to bring the concepts of Web 2.0 to your campaign.

For developers/designers - remember AJAX is only half of the equation. Granted it's the half that is the user experience. However, AJAX can't write or modify data. You're going to need a programming language (at a minimum) to manipulate the XML files. Oh and yeah, while you're at it, remember your application is going to need to do something useful and can't be dog shit ugly. Inserting AJAX doesn't immediately unscrew a horrendously designed site that serves no purpose.

Now go out and build something with AJAX, because it's a hot shit tool.

Tutorial: Converting Motion to Code in Flash CS3

noreply@blogger.com (donniesteele) — Thu, 19 Apr 2007 14:13:00 +0000

Adobe's latest incarnation of Flash, the first version from Adobe since acquiring Macromedia offers a slick new feature to allow the conversion of "hand-tweened" motion/animation into ActionScript. While its necessity in one developer teams may not be great, its utility with large Flash teams is huge. After the jump, read a real quick (because it's just that easy) tutorial on how to convert frame animation into ActionScript animation.

Flash has always offered two options when it comes to deigning animations and interactions within the interface. The first follows a traditional animation frame sequence style, wherein you start with an object in a key frame followed by subsequent key frames where the object has moved and then it is tweened (aka in-between frames animation). This method is usually preferred by designers as it's easy to visualize an objects path.

The second method is to replicate the objects animation with code. This is usually the preferred method amongst programmers and senior Flash developers as it's easier to adjust a line of code than pair down through tiers of layers.

However, in single developer teams each can generally produce the same end results. However a disconnect arises in team environments when a designer starts a Flash project and a developer finishes up the back end.

Of course this tutorial is on the latest CS3 version of Flash, so you will need either the full version or beta to proceed with the tutorial.

Step 1: Download/Assess Assets
Take our very simplistic Flash file (download tutorial_unfinished.zip). What we have is a simple square bouncing along through four keyframes. The animation has keyframes on the first, fifth, tenth and fifteenth frames. The first and fifteenth frames are identical to create the illusion of the animation looping.

Step 2: Copy the motion and create AS code
Adobe as made the job of converting this simple animation into a nice clean block of code remarkably well. With your mouse, highlight all of the animation frames on the layer and control+click (left click on 2-button mouses) to reveal the timeline contextual menu. Select the option towards the bottom to "Copy motion as ActionScript 3.0...".

Step 3: Provide an instance name for AS code
This brings up a prompt requesting the "Instance name to use in the ActionScript". For the purpose of the tutorial I've used "squareD". Of course you can use whatever naming convention is preferential to you. Click okay and on the fly, Flash has now converted the keyframe and tween information into a nice clean XML format to the clipboard.

Step 4: Create a new layer and paste in the code
Create a new layer and name it 'actions'. Click into the first frame of your newly created layer and open the Actions palette (Window -> Actions). Paste in the code from the clipboard and you know how the code base from Flash in your file.

Let's take a moment to examine Flash's new XML-based ActionScript 3.0. In our pasted code you see a couple primary nodes: 'Source' and 'Keyframe' nested in the parent 'Motion' node. The 'Source' node lays out all of the parameters and definitions for the animation and the object having motion applied to it.

The 'Keyframe' blocks real at what frame the animation will occur, it's position, it's easing effects, and any filters or transformations applied.

With the XML foundation the code becomes a lot easier to understand and dissect. In turn this allows us to adjust our animation quickly, directly into the code block.

Step 5: Create/Drop a movie clip on the stage and provide it with the entered instance name
We're almost done. Remember when we were asked to define an instance name in the prompt? Well we set the name, but we haven't placed an object on the stage with that instance name. To ensure we don't mistake our hand-tweened animation for the new animation, let's make that layer a guide and hide it. This should clear the stage of any objects so that we have a fresh slate.

Create a new layer and label it 'new instance'. Because our code base is defined by an instance name rather than an exported clip, we can drop in any movie clip shape, size, color we want, label it 'squareD' and our code will be applied to that instance. This is convenient when you have changes to your movie clip, or you want to reuse the animation for other objects.

For the purpose of testing this out select the oval drawing tool and draw an oval on the stage. Select the newly created shape and convert it to a symbol.

With the shape selected, provide it with the instance name 'squareD'. Hit publish and see our new movie in action. Our old hand-tweened code has been converted into a reusable function to apply to any movie clip we desire. Not too shabby. Here's the finished FLA (tutorial_finished.zip) for reference.

First Look: Adobe CS3

noreply@blogger.com (donniesteele) — Tue, 17 Apr 2007 19:34:00 +0000

Having been an early adopter of Apple's Intel (mostly because my PPC Apple burned its processor), I've been eager for Adobe's Creative Suite release, if for no other reason than the applications I use most would run natively. I downloaded the Photoshop CS3 Beta in the winter and have had time to put it to use and the performance on Mactels is great. And with the full suite up and running, everything is much faster - although oddly the start-up screens take a while to kick in. Oh and if you downloaded the Photoshop CS3 Beta, it's presence caused problems with the install of the full suite (solution to uninstall the Photoshop CS3 Beta after the jump).

The major breakthroughs on this release, and there aren't as many as you'd think, are the ability to import layers directly from Photoshop and Illustrator directly into Flash and Dreamweaver (works reasonably well too) and Flash's addition of converting "hand"-tweened animation into code blocks. I'll get a tutorial up on that this week, but the long short is this: you can highlight the animation from a layer that has multiple keypoints and effects/transitions at those keypoints. Control + click and you'll see an option to Copy to ActionScript 3.0 and voila you now have a code block to paste into the Action window that mirrors the effects that were developed by hand. This is absolutely sweet on team projects, where the mean comfort level of ActionScript may not be that high.

Installing Problematic CS3
I was surprised to find out after calling Adobe technical support literally hours after CS3 was released they were already getting a barrage of complaints because the software wasn't installing over the Photoshop CS3 beta properly. So here's what they told me and I can confirm works...

You *should NOT* drag the beta into the trash the way Mac users have been accustomed to for years. Inside of your utilities folder, you should have an Adobe Installers folder. Run the CS3 Beta Installer and have it uninstall Photoshop. If like me you found this out AFTER dragging the app to the trash and deleting you need to delete the following files by hand, after which, you'll be ready to install Creative Suite.

* Users/[User Name]/Library/Preferences [any files and folders with CS3 in the name]
* Applications/Adobe Bridge CS3
* Applications/Adobe Device Central CS3
* Applications/Adobe Help Viewer 1.1
* Applications/Adobe Photoshop CS3
* Applications/Adobe Stock Photos CS3
* Applications/Utilities/Adobe Installers
* Library/Application Support/Adobe [any files and folders with CS3 in the name]
* Library/Application Support/Adobe/Adobe PCD
* Library/Application Support/Adobe/backup/
* Library/Application Support/Adobe/caps
* Library/Application Support/Adobe/Installers
* Library/Application Support/Adobe/Uninstall
* Library/Preferences/FLEXnet Publisher/

MySpace – Where the Kids Are

noreply@blogger.com (donniesteele) — Mon, 16 Apr 2007 11:50:00 +0000

Modern advertising says if you’re releasing a movie or launching a new TV show to saturate your audience, with a ton of TV commercials. If the movie/show’s parent studio also owns a TV station – better still. You can advertise the commodity for less on your own airwaves (e.g. 300 and Fox). But recently I’ve developed a flurry of MySpace pages for burgeoning network shows, and began to wonder about the efficacy of this new marketing avenue. With the exception of the Aqua Teen Hunger Force flick, it seems advertisers are steering away from guerilla marketing campaigns in favor of a presence on MySpace.

From a ground-level designer/advertiser perspective, the deal is you design the look of the MySpace creative as well as produce any/all of the Flash and video assets that are to reside on the page. Hand over the layered Photoshop files, Flash files and videos to MySpace with $250,000 and they put the custom page together and give you some preferential ad space.

Let’s back up the truck… a $250,000 media buy. You can argue that the ad space inside of MySpace is almost worthless, so that full media buy price is really going to just seaming the page together. For a large-scale movie release, $250k represents a small fraction of what they spend for on-air. However, for network shows that comes close to being their entire advertising budget – dumped right onto MySpace. This is like going to Vegas and laying down your entire life’s savings on the roulette table and proclaiming ‘black’… only without the ensuing ‘Vegas Wife’ that your kids refer to as such, so as not to confuse her with ‘Weekday Mommy’. The consequences are just as dramatic too. If your MySpace creative fails to capture the audience, you haven’t been able to hedge your proverbial bets advertising in any other medium. So, is it worth it? In a word, absolutely.

MySpace has roughly 80 million profiles, and it’s pretty much 1-to-1 relationship on profiles to people, so you’re talking about 80 million people in a captive environment. On TV’s best-rated program, American Idol, you’re looking at 30 million viewers. Thirty second spots on Idol are running around a million dollars per 30 seconds. Overly simplistic analysis: For one fourth the price, you’re nearly tripling your potential audience, and your presence will run a lot longer than 30 seconds (often weeks). Suddenly, it’s easier to understand why advertisers are flocking to MySpace.

Back to ground-level regional advertising… You have a client, an up-and-coming musician, a young actor, whatever. Basically, we’re talking about a client who needs the MySpace exposure, but needs something slick (not MySpace templates) and oh yeah, doesn’t have $250k. What do you do? The answer is simple. Same thing you do on any of your other projects – hire a good graphic designer to design a custom page and hire a really good programmer who can break MySpace’s layout. MySpace is built with old school HTML tables, which by definition keep content locked into little squares, which in turn keeps your pages looking like generic low-brow MySpace profiles. However, as I have discovered with a little persistence you can break free of the MySpace layout by breaking the tables. Insert false table-close arguments at the top of the page and all of a sudden you’re free to go to town with < DIV > boxes required to really make a custom look flourish... or you can hire this happy little firm to do it for you.

Cactus

noreply@blogger.com (donniesteele) — Mon, 16 Apr 2007 11:37:00 +0000

Great new site from Cactus in Denver. This is why the ad firms in yesterday's rant are on notice. Here you have a smallish shop in Colorado that cover the full gambit of tv, radio, print and radio advertising, does it well and probably for a lot less than their Madison Ave counterparts. (Link courtesy of Design is Kinky)

W+K Improves - Other Ad Agencies Still Lacking

noreply@blogger.com (donniesteele) — Sun, 15 Apr 2007 18:38:00 +0000

This month Wieden + Kennedy, who have an obscene amount of hot shit clientele ranging from ESPN to Nike to Starbucks to Coke launched a redesigned Flash-based site. Don't ask me how to navigate it, because I still haven't quite figured out how to winnow down to view a particular project summary. The site is a sharp improvement on the user experience from their old site, and also reminds me how I continually disappointed I am in other large ad firms for their lack of sharp, internal advertising in their own websites. Companies like McKinney Silver (currently hold Sony and Audi's accounts), Razorfish (Disney, Carnival, Mercedes), Mullen (Wachovia, Monster, XM), Arnold (ESPN, McDonald's), Crispin Porter + Bogusky (VW, Burger King, Miller Lite), and many others lack the minimum flair required of wait staff and ad agency websites.

This isn't at all meant to be a critique against the talent at those agencies, because they definitely have talented folks if you look at their work. Ostensibly, the problem stems from the directors not allocating human resources to the development of these sites. Most of these firms have upwards of 100 creatives (at least) on staff, so why aren't they being allocated to redesign the sites? The work for their clients inspires a lot of us who operate in our smaller shops. I'm sure their current and potential clients want to be inspired too. Who wants to fork over a multi-million dollar advertising budget for interactive marketing to someone who hasn't created their own online presence to be an engaging piece? Apparently, lots because it's not like any of the aforementioned are struggling. All the same... McKinney Silver, Mullen, Razorfish, Arnold - you're on notice.

Review: Designing Interactions

noreply@blogger.com (donniesteele) — Sat, 14 Apr 2007 11:51:00 +0000

Okay disregard the fact that a book purportedly about interactions has such a lame text book layout. And not in the sophomorically cool way John Stewart's America book is. Oh and it's 766 pages long. After you suck up those two facts you are left with Bill Moggridge's really rich, scholarly study of how interaction designers seek to reduce the distance between what a piece of technology is doing and the feedback provided to the user. Most of the projects are from Moggridge's own IDEO, but considering their clients list that ain't a bad thing. With case studies on the first mouse, which was made of wood (not joking), to the first laptop - which if you could carry you'd be as strong as Aleksey Vayner, to our beloved iPods. It's a smart read and the inclusion of John Maeda's Laws of Simplicity at the end is an inspired selection.

Really - the mouse was made out of wood.

Tutorial: Alpha Video in Flash

noreply@blogger.com (donniesteele) — Wed, 11 Apr 2007 15:23:00 +0000

Somewhat quietly delivered in Flash 8, was the ability to support alpha masks created in After Effects, Motion, etc in the FLV video file. This is wicked cool if you need to incorporate a video element to lay atop dynamic animation inside of Flash and a flattened square video won't suffice. Reading about it when Macrodobe when released it I was stoked to incorporate it. Tutorial and crap anecdotal project story about alpha video after the jump. Check that. Crap Story. Great Project.

There's always been some way of shoe-horning video into Flash. Hillman's now six year old book detailed a real simple method to export frames from an NLE, clean them up in Photoshop, import into Flash, vectorize and animate. The goal then was the same as it is now. Create the illusion of elements animated to appear to exist in the same space.

A typical video window (4:3) looks just like that... a video window. You can't shake a visitor's perception that they're just looking at a video. Alpha video in Flash blurs that in a cool way to create a unique experience by deleting the square borders of traditional video.

I finally got an opportunity to do some alpha video work with Flash when I was brought on by the outstanding gang at Gastronaut Studios to develop the website for their latest Xbox 360 game, Small Arms.

They had all these great, high-def characters for the game and offered to provide me 3D renders of most anything I could think of. I really wanted a quasi-bio piece on each character and weapon in the game. But I wanted more than just an image, and I didn't want a stupid square of video. So I collaborated with the guys - three of whom made the ENTIRE game - and they provided me sequential frame renders for each character and weapon. About a 100 frames for each, which on my 20fps timeline came out to 5 seconds of animation.

Anywho, here's how you do it...

Step 1: Compiling the Source Material
The first component you obviously need is a keyed video or frame sequence that has transparency applied to it. If you want to work with a test piece, you can download the frames I was given for Small Arms. If you already have a video clip that has the transparency properly encoded you can skip step 2, or would prefer to deal with just the sample video clip and go to step 3.

Step 2: Exporting for Flash Video Exporting
I'm an Apple Motion guy and apologize for a lack of instruction for After Effects, but I suspect that user base can translate the concepts we talk about in Motion for their use...

Now that you have your keyed movie or image sequence together, crack open Motion. Select 'Start with a New Project', the select 'Custom...' from the preset menu in the resulting pop-up menu. Set the height and width to 512. Because we're not dealing with NTSB interlacing, set the Field Order to none (i.e. progressive). The frame rate for FLV video is independent of the Flash (.fla) you create, so you don't need to match the two. For this we'll just go with 15 fps, because that's what they were created at. We have 84 PNG frames, which means our duration should be in turn set to 84. Note that the background is automatically set to black at 0%, thus a transparent background. We want to keep that. Hit 'Okay'.

In the timeline we have an empty stage, so let's import some frames. Go to File - Import... (CMD + i). Select all of the frames in the animation. Fortunately in motion there's a nifty check box to tell it that we're importing sequential images. Check 'Image Sequence' hit 'Import', and Motion will seam the frames in order for us.

Once our flaming shithead friend (hey - they made him having a flaming bag of poop for a head) is loaded up, we're actually ready to export him right out. Go to File - 'Export...' and select the 'Options...' chicklet.

The preset is for DV Video, which is interlaced, heavily compressed, looks like shit, and is oh-yeah, not lossless. So in the 'Kind' pull-down menu select 'Quicktime Movie'. For 'Compressor' select 'Animation' with quality set at 100%.

Click the 'Advanced...' chicklet. Make sure the Depth pull-down is set to 'Millions of Colors+'. It's the default when you open the box, but before that it's just 'Millions of Colors' (no '+'). Hit okay out of the advanced options. And hit 'Export' on the main pop-up. You'll see motion compressing out our video. If you play you're video in Quicktime you'll still see a black background. Don't worry, it's soon good. Now we're ready to take this to the Flash Video Exporter.

Step 3: Using the Flash 8 Video Encoder
Using either the video you just created from motion or the sample .mov you downloaded, open the Flash 8 Video Encoder. Select 'Add...' to add a new clip to the queue and select our alpha Quicktime clip. By default it will set the FLV quality to medium. We want to change that.

Select the .mov clip in the queue then hit 'Settings...' so we can change it's parameters. Right off the bat you should see our guy, Von Brown, sitting all smokey transparent like on the window.

Click 'Show Advanced Settings' so we can make sure he keeps that transparency. Under 'Encode Video', make sure 'Video codec' is set to 'On2 VP6' (Sorenson Squeeze can't do transparency) and be sure to CHECK 'Encode alpha channel'. As for quality that's up to you. 'Medium' does a surprisingly serviceable job, even 'Low' isn't awful. Obviously, high is perfect-o if you can afford the bandwidth. With those settings in place, select 'OK', which will bring you back to the main queue. From there hit 'Start Queue' and our video will process. With our rendered .FLV we are finally ready to take the piece into Flash.

Step 4: Placing the Alpha-Masked FLV in Flash
Payoff time.

Crack open Flash and create a new movie. For a quick and dirty, create a new movie 512px by 512px with a 30fps timeline. At this point you can either drag in FLVPlayback from the components palette and set the parameters manually or use the 'Video Wizard'. We'll be lazy and let Flash figure it out for us today.

Go to File - Import (CMD+r) and select the FLV. When the 'Import Video' pop-up comes up, confirm the path you just selected and select 'Continue'. On the next screen, we're just going to do a simple progressive download, so select the first radio option for 'Progressive download from a web server', then select continue. Now the whole point of this was to make our video not look like some square video player, so select 'None' from the Skin pull down menu, so we don't end up with video controls and click 'continue'. Click 'Finish' and you've now imported your video into Flash. Publish and watch our flaming guy, well, flame.

Going farther
Using Von Brown from Small Arms is a really intense application of the Flash video. His flaming head adds a tremendous amount of mask detail. But the point is it works and Flash supports it. With a little optimization and smarts you can pull off some great alpha video mask movies AND still keep the file sizes in check.