A Bloody Good Halloween

For last year’s All Hallows’, Intersect partnered with Cramer-Krasselt Chicago to build a frighteningly rich homepage takeover experience for Cedar Fair. The experience dumped literally buckets of blood and guts onto a site of a user’s choice. Check out a demonstration on our work page.

The main ingredient for this creative was mixing up some realistic-looking blood. We used an old Hollywood secret of adding karo syrup to the classic red dye solution, and chocolate syrup for that deep arterial look.

Here’s the recipe:

  • 1cup karo syrup (for consistency)
  • 1/2 cup chocolate syrup (for darker coloring)
  • 1 tbsp red food dye

The next big push was getting some gory severed parts in the pool. CK’s art team took multi-angle shots of their arms and heads, complete with zombie-style makeup, and we interpolated between the frames to build an image sequence a smooth, bobbing motion.

Finally the fun part, we shot video of us pouring 8 gallons of our custom blood mixture into a fish tank. We gathered footage of different rates of flow and compiled them together for the final clip so the blood didn’t seem one-dimensional. The streams, drips, and overall downpour of blood layered together made this Halloween takeover a client and user favorite.

Now check out the final product.

Share this link: Share on Facebook Share on Reddit Share on Twitter Share on LinkedIn

A Shape Tween Adventure

For almost 3 decades, Flash animators have struggled their way through shape-driven animations using the built-in “Shape Tweens.” But in 2012, two developers here at Intersect decided enough is enough: a new approach must be created to improve the capabilities of Flash. This is their story.

It started with a common request we get: do the impossible. At Intersect, being told to attempt some crazy concepts is just something we’ve become accustomed to. Plus, we just enjoy the challenge of pulling off the “impossible”.  With this project, the concept was actually not beyond reason, but the constraints set by traffickers and the media plan weighed heavily on the possibility of success. The unit was to be a typical 40k banner served through MediaMind, with some not so typical (for 40k) shape morphing, 3D rotations, and particle effects. This combination of characteristics stacked up against the limited size of the banner. The MediaMind API in its simplest form adds 6k. Since the media specs required a Flash Player 9 build, 3D capabilities were not native and required the addition of 3rd-Party APIs to achieve the 3D rotations. Particle systems require heavy coding. But worst of all, the creative required the use of shape tweens for morphing animations.

The banner started the same as any other unit would. We went through the motions of creating what the client asked for and optimized it with all tricks we had up our sleeves. The result was a hefty 70k SWF that looked good, but clearly not ready for delivery. We knew that we needed a new approach, and it wasn’t gonna be simple.

The biggest obstacle was those massive shape tweens. They were contributing a majority of the file size. Our best option was to not use them at all, which meant creating a code-driven approach to animating shapes and a more efficient structure for storing that animation data. It was a pretty big undertaking, but we accomplished it and in three parts.

The Animation Platform

In order to begin creating a new type of animation, we needed an interface that would help us create them. We immediately got to work on a desktop application, and after a couple days (and nights) of heavy coding, we had a functional prototype that could draw and animate shapes on a vertex level, independent of framerate. We then polished up the interface and added tools for object instancing, shape rotation, and keyframe easing. Lastly, we added a background guide that synced the snap shots of the original banner animation within our new environment so we could match the old shape tweens with our new system.

The Data

With the tool ready to build the animation, we set out to create a way to get the animation from the development environment to the final Flash banner. We chose to store all the whole animation as JSON. Initially our JSON data was just too big to fit in our banner. So we decided that the only way to get file size down was to simplifying all our JSON into multidimensional Arrays rather than Objects. The structure resulted in 6-arrays-deep of values. To further optimize the data, we rounded values to even numbers and removed any redundant information. Finally, when completed, the data was added directly into an FLA so we could take advantage Flash’s SWF compression.

The Renderer

At Intersect, we’re huge fans of Greensock’s TweenLite and TweenNano. So it only made sense that our animation renderer would make use of it’s awesome features. The only problem was that one of Greensock’s classes, TimeLineLite, was just a bit too heavy for our 40k banner. So we gutted the features we didn’t need and made our own, very limited, TimeLineNano. Then we parsed our heavily optimized animation data, and turned that into timeline tweens that would play alongside all the other animations that took place in the banner.

So after a long battle with K-size, we packed up our animation data, our tiny 3d API, our particle system and the rest of the assets. We finally ran the banner and there it was, a unit that was 70k just days earlier in a petite package of 40k.

To showcase just how crazy default Flash shape tweens look, we made 2 similar animations of a rounded square widening and rotating. So here are 2 GIFs. On the top is how our animation system handles the animation. On the bottom is how Flash handles that same animation.

Share this link: Share on Facebook Share on Reddit Share on Twitter Share on LinkedIn

Flash objects on translate3d divs

We’ve been working on our new website during downtime for months now, but it can finally be unveiled; See the new Intersect Digital site for yourself! Our technological priority was building an html site that looks equally beautiful on desktop and iOS.

Thus, we used CSS3 for the animation of the slider components.

The setup is easy, just add the -webkit-transform property to the moving div so it automatically animates, and then adjust its -webkit-transform:translate3d position to make it slide to a new spot.

With CSS like so:

.translate3d .slider {
-webkit-transform:translate3d(0 ,0 ,0);
-webkit-transition: -webkit-transform 0.8s ease-out;

And JavaScript along this line:

Slider.slider.css('-webkit-transform','translate3d('+(expectedX)+'px,0 ,0)');

On iOS where our work examples are displayed as html5 video, this runs perfectly.

But the problem is, on Chrome and Safari desktop, which should support CSS3, Flash objects fail inside an element with translate3d set. On Chrome, .swf embeds unpredictably disappear at load time, and in Safari, the .swf’s don’t catch mouse events sporadically. After figuring this out, we had to revert the slider animation to a margin-left tween using jQuery, which still runs decently on desktop.

So if you’re building a CSS3-enhanced site, keep your .swf’s off 3d-accelerated divs or prepare yourself for QA feedback like, “Flash doesn’t load. Please advise.”

Share this link: Share on Facebook Share on Reddit Share on Twitter Share on LinkedIn

Problem with DoubleClick Studio API v2?

Anyone else seeing unlikely compile errors when running DoubleClick’s API version 2 for the first time? Namely this error, originating from one of the Studio classes:
5007: An ActionScript file must have at least one externally visible definition.

If so, our developer Jamie and Paul Feneht from Google discovered that a folder of extraneous classes must be deleted first before version 2 will compile correctly.

The folder path is:
\Users\[you]\AppData\Local\Adobe\Flash CS5\en_US\Configuration\Classes\com\google

Remove it completely and the new Studio API classes should work. Though this issue isn’t documented yet, the DoubleClick Studio version 2 API documentation is otherwise very thorough, at http://studio.doubleclick.net/docs/sdk/flash/as3/en/.

Share this link: Share on Facebook Share on Reddit Share on Twitter Share on LinkedIn

“Flash” is a Four Letter Word

There was a day when Macromedia’s Shockwave Player made all kinds of sense for anyone trying to make an impression online. (or a Star Wars podracer game for their middle school computer class)

But today it’s true, Flash, we don’t need you. With Adobe Edge rearing to take its place, and thanks to the hipster arms race between Chrome and Safari, modern browsers can run enough script to support Angry Birds and Gmail with impressive responsiveness.Glo Worm

Still, that doesn’t mean we have to cast away the Flash banner like a childhood plaything. Sure, the .swf shows its 10 years of wear. His label fell off when Harry Potter was still cute, he’s covered in patches, and the fur is all worn off the cheek from clicking. But his charm remains strong, for those of us still willing to harbor it.

Without going so far as to say It Takes a Userbase, I think we all need at least some will to maintain the quality of our waning placement. Don’t we all prefer a community not punctured by funky dancing santas selling us life insurance?

The standard banner has still some interesting potential. Consolidated and specific, it is the internet’s answer to the haiku. A 30k, 15-second story told through a mirage of fades and skews that we ought not abandon too hastily.

So here’s to you, .swf, and may you live as long as my Glo Worm did. Sweet Glo Worm, rest his cuddly rubber soul. *Tear*

Share this link: Share on Facebook Share on Reddit Share on Twitter Share on LinkedIn

Something wicked-bad this way comes

Dwarf RangerPhoto: Paizo PublishingAs a celebration of playing my first real game of D&D (I’ve been under a rock since the mid 70′s), I want to present a jQuery plugin we’re making with some Dwarven style.

The plugin makes use of HTML5-enabled browsers’ canvas support (Safari, FF, Chrome) to detect how much whitespace is around the subject of an image, and then cuts it up into rows to allow dynamic text ragging, like you might see in a magazine. Thus, for an example I thought perfect this image of a Dwarf Ranger, with his countless deadly protrusions.

More to come soon, as we complete testing and create some reasonable documentation.

Or, just view the source of this page if you want to see the code as-is.

Share this link: Share on Facebook Share on Reddit Share on Twitter Share on LinkedIn

Why AS3 gives me the warm fuzzies

rest in peace, 2.0In June of 2006 a code angel dropped a little piece of heaven called Action Script 3.0 down to earth, bringing end users around the world a smoother, faster, more feature-filled Flash experience, while at the same time providing developers with more stable, cleaner, faster, easier to debug development. Action Script 2.0 was useful for its time, but now that 99.9% of all computers have Flash Player 9 or higher, and that sites like YouTube have already been requiring Flash 10 for some time, I think the moment has come to let the old timer go and stamp the RIP2.0 marker above its resting place.

Sometimes we get media specs that stipulate Flash Player 8, AS2, and this makes me think there is much work to be done spreading the word about why it is time to switch to AS3. It is time to update the strategy. Since AS3 now has 99.9% penetration and better speed, specs requiring AS2 are more likely hindering performance on old computers. When I view the demo on Adobe’s site comparing AS3 to AS2 the difference in the smoothness of movement is huge!

Behold! Reasons to move on to to AS3

  • According to Adobe, Flash Player 9 AS3 is 10 times faster than Flash 8 AS2. This means smoother animations, less chance of lag, and an overall better user experience, especially for people using older systems.
  • AS3 provides more comprehensive debugging output when publishing, which greatly decreases the chance that errors will go by unnoticed until after trafficking a banner.
  • Flash Player 9 has been around since the Pussycat Dolls. It was released in June 2006.
  • 99.9% of users in the US/Canada have Flash Player 9 or higher.
  • Users’ browser versions are independant of their Flash Player version. Even users on IE6 have the same capacity to upgrade to the latest.
  • Many popular sites such as YouTube already require Flash Player 10, meaning users that use YouTube have already updated.
  • Overall, Flash Player 9, Action Script 3 saves time and money because it is a better environment for developers to work in.

Save your company time and money.  Save your developers from coding stresses and functionality roadblocks.  Bring your end user an overall better experience and crank up your media specs to this decade’s standards. In other words…Go AS3!

Share this link: Share on Facebook Share on Reddit Share on Twitter Share on LinkedIn

CS5 Becomes Self-Aware

If you’re using the latest release of Photoshop and haven’t found the Content-Aware Fill, you will now start. Resizing background assets to fit the tower and landscape banner sizes had been an extra hour or so of rubber stamping and smoothing out lighting. Then CS4 brought us Content-Aware Scale and now CS5 has basically robbed this task of its value. See irrefutable data below.

The Cloud Test

The algorithm seems to be at its finest in already repetitive environments. Highlighted in pink is a dark cloud to be removed for want of a clearer sky. This would have been easily done in 5 minutes or so, but a tool that can do it in 10 seconds is still better right?

Cloud Test

The City Test

Geometrically repetitive but with rigid boundaries, the Content-Aware Fill can still cinch up modified architecture in many situations. The fill creates some confusing space if analyzed directly, but in a background this is already usable. If the city is the focus, at least the fill got us 90% of the way toward believable.

City Test

The Katy Perry Test

Though it won’t recreate human features, it can apparently cover them up. The curiously conservative Content-Aware Fill math gives the California Gurl a makeover so reformative that Elmo can finally stop making “Tickle Me” jokes.

Katy Perry Test

Like the other tests, this fix was done in one fill with no further editing. OMGod.

Share this link: Share on Facebook Share on Reddit Share on Twitter Share on LinkedIn

A framework for those still alive

To much of the development community, 2011 will be the year a companion replaces our companion cube, as co-opt-enabled Portal 2 drops later this spring.  But for those of us who’ve bored-quit the World previously known as Warcraft, and began to fill a much needed gap with friends and family, we long for something sufficiently nerdy to occupy the next 3 months.  Much as GLaDOS has taught us to appreciate the delicacy of pastry, we can as well spend some time appreciating the application framework CakePHP.

CakePHP logoCakePHP is designed upon a Model-View-Controller architecture, which, if you’re not familiar with nominally, you might be with the concept of separating an application’s data, business, and interface.  Coming from a background of Flash and creative, the idea might even be new, but a definite lifesaver when the requirements of an application become larger than a simple banner ad.

CakePHP is also, naturally, written in PHP, which is nice for newcomers from javascript and ActionScript who, myself included, can be daunted by the dissimilar syntax of Ruby on Rails, or the rigidity of programming in .Net.  Plus, with the notorious Facebook API now a commonplace dealing for ad agencies, spending time boning up on PHP isn’t going to hurt anyone’s paycheck.

After winding through the tutorials and getting used to the varyingly useful helpers and pre-built code, you stumble on CakePHP’s most useful tool, a batch script called “bake” that lets you crank out test applications in minutes.  Its beauty is that it relies on naming conventions in your database to build out the framework of your application automatically.

The blog tutorial, for instance, requires two database tables posts and comments, and because a comment will always be tied to a post, you also need to add the field post_id to the comments table.  Then, when running the “bake” tool, it recognizes that relationship and builds the files needed to add, view, edit, and delete comments and posts, with many comments belonging to each post.

RoR sample codeThe ideas of relying on naming conventions and building an application directly off of logical data structure are concepts not new to CakePHP.  Its developers are making a clear effort to mimic the workflow popularized by Ruby on Rails.  But getting the efficiencies of Rails in a familiar language doesn’t sound like a downside to me.

Even downloading and installing a web server has become immediately accessible.  WAMPServer, for instance, is an out-of-the-box packaging of Apache web server for Windows, PHP 5, MYSQL 5, and even PhpMyadmin for an easy web interface to MYSQL. After setting up your own test server, make sure to watch Andrew Perkins’s tutorials, which the CakePHP help docs’ creation of an example blog.

Share this link: Share on Facebook Share on Reddit Share on Twitter Share on LinkedIn