MILG7 Animated banner for Motionworks.com.au

Posted by & filed under Articles, Portfolio.

I’ve been following John from Motionworks for quite some time now and he’s one of the people that is doing great things for the motion graphics community online.

His site (www.motionworks.com.au) offers a wealth of information & great tutorials for After Effects and Cinema 4D. He also has as a great business based series called ‘The Business of Design’ and a fabulous interview show called ‘Unplugged’. So when he mentioned that he was looking for someone to help him out with creating an animated Flash banner for his ‘Making it look great 7‘ product I jumped at the chance to help.

John gave me free reign over the initial concepts and as we got closer to the end product we worked collaboratively with John giving me some great animation tips along the way. He has a keen eye for detail and a solid sense of design and was also open to any suggestions that I had. So working with him was very refreshing for me.

Initial concept

My initial concept for the banner consisted of 3 scenes. An intro, a small clip from one of the teasers for his product and a call to action scene. Here is the original design below.

Making it look great 7‘ features 6 individual workshops and because I wanted to use a few seconds of video from each of the teasers I decided that maybe the best way to approach this would be to make 6 individual banners with a different video in each and just rotate them around on page load otherwise the file size would become too large to include video from each into a single banner. No-one wants to download or serve a 500k banner with each page visit.

I mocked up a couple of these concepts, but in the end it just didn’t come together as I had hoped. The video had to be no more an 2 or 3 seconds at the most and that just didn’t really give the viewer enough time to get the message. It was more a “what the heck was that” experience rather than an “ahhhhh that’s what I want to know how to build” experience. Plus the video compression was pretty intense to keep the file size down to around 100kb and that degraded the overall look of the banner.

Final concept

Instead of creating 6 individual banners with a few seconds of video in each we turned things around and went with 1 banner that contained 6 stills (1 from each of the workshops). Each still had it’s own title and each stayed onscreen from around 3 seconds and was animated off with a simple slide transition. The text was changed from oblique to regular to aid readability and after a few tweaks with different alias settings we were sorted.

Here’s the final banner (the image is slightly reduced to fit my layout). Click to see the animated version.

Final banner – click to play

It wasn’t all plain sailing though … here are a couple of ‘gotchas’

I have been spending more time using Adobe After Effects of late and I much prefer the animation tools inside of AE. I have always found Flash’s animation tools to be a little clunky and it seems all to easy to make an edit on something which inadvertently screws something else up. So for this project I really wanted to use After Effect’s export as XFL option for flash. The idea behind this was that I could use After Effects to lay down the  grunt work of the animation and then export that animation data over to flash and hook in my desired graphic elements. Also, John is an advocate for Adobe After Effects so I thought it would be great to keep things in the family so to speak.

I spent a few hours on this as I really wanted to be able to use this technique for projects in the future, but try as I might, I couldn’t get a good result from it. It seemed that AE and Flash use different anchor point positions and that was proving problematic. I also had issues with the canvas size that was being created in Flash as well as the general placement of the elements. Things that lined up in AE just didn’t line up in Flash and the timing of the animation was off ever so slightly.

I went over the little documentation that I could find and looked over examples on the net I couldn’t find an answer to the problem. So I ditched that option and went back over to using the motion time line in Flash to pull the animation together.

If you have managed to use AE to drive a flash animation via XFL then I would love to hear how you found it. It looks like something I could really use if I could get it to work reliably.

One of the other oddball things is that flash refused to render the regular version of the font that we were using. No matter what I selected it kept rendering out the oblique version. So in the end all the text was put together in Adobe Fireworks and rendered out as 32bit png files.

The end result?

The end result was very satisfying and working with John was fantastic. I feel very privileged to have had the opportunity and I look forward to working with him again.

If you’re not already a Motionworks subscriber then head on over to www.motionworks.com.au and hook into his RSS feed.

PS. Don’t forget to checkout his Making it look great 7 product while you’re there.

5 Comments

  1. John Stanowski

    That’s good. I like how the “7” reveals.
    Did you guys solve the problem of John’s shadow boxes appearing below your banners?

  2. Markos

    Hi John, Thanks for the feedback.
    Would you be able to send me a link to the page that is having the problem with the shadow box. I’m pretty sure I know what you mean and if I can check it out then I’ll send a fix through to JD.
    Cheers

  3. John Stanowski

    Hmm. I can’t find it now. A week or so ago he had a “Watch Tutorial” link right in the intro near the top of the page. When I watched it, the banner had a higher z-index or something. (Probably the fault of the shadow box script he’s using though.) Anyway, I can’t reproduce it now.

  4. Markos

    Ahh ok. I have the shadowbox appearing but it doesn’t seem to be interfering with flash (or vice-versa) .. there is a switch that we’ll add to the flash code which should help that sort of thing. Thanks for letting me know 🙂

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>