Monday, April 23, 2007

Web 2.0 != (does not equal) AJAX


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.

Thursday, April 19, 2007

Tutorial: Converting Motion to Code in Flash CS3


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.

Tuesday, April 17, 2007

First Look: Adobe CS3


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/

Monday, April 16, 2007

MySpace – Where the Kids Are


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


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)



Sunday, April 15, 2007

W+K Improves - Other Ad Agencies Still Lacking


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.

Saturday, April 14, 2007

Review: Designing Interactions



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.



Wednesday, April 11, 2007

Tutorial: Alpha Video in Flash







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.