I had a great time working with John from www.motionworks.com.au on his last banner and was really flattered when he asked me to put together a new banner for his first Business of Design product; Success with Twitter.

John supplied the bulk of the imagery and I put the design and animation together. The whole thing came together really quickly and looks great.

View the finished banner here.

I found another picture of my young lad on my phone. This time he was holding a toy windmill up to a fan (He loves fans).

I needed a break from cutting html and css so decided to open up photoshop and see what I could put together.

This isn’t complete as yet … but overall I was pretty pleased with the look so thought I would share

View the large image here.

I have a good friend who is an amazing guitarist and he recently recorded a stunning instrumental version of Eric Claptons ‘Tears in Heaven’ for his YouTube channel. I took the opportunity to tidy up the video and make something quite cool at the same time.

With this project the first thing to do was see if I could tame the video a bit and shift the focus onto Baz (our guitarist) and tone down some of the background noise. I used some vignettes, blurs and general colour correction tools as well as overlaying some brighter colours to create a bit of visual interest and faux lighting.

I then duplicated the video clip, masked out the background and inserted a few layers of gently drifting particles. The particles only appear in places where there is light so they kind of resemble some magical looking dust gently floating toward the sky.

I added some video footage of children playing onto the wall behind Baz and gave it a home movie projector look as well as ramping up the colour intensity as the track intensifies toward the end.

The final video is viewable here (Baz would love a comment on the video or a click of the ‘Like’ button so don’t be shy).

Here are a couple of stills from the video showing the before and after.

Before

After

The rain was coming down today and I thought I’d try out a few techniques that I had seen in some After Effects tutorials recently. These aren’t high quality renders or finished animations. Just enough for me to try some new techniques.

Displacement Maps & Sky Replacement

Original photo

For this photo I added some movement to the water with a displacements map. I also masked out the sky using the very cool Refine Mask option in Photoshop CS5 trial. It can certainly help when working with more complex masks. The Sky was animated in 3d space and then used as a reflection in the river.

I also added a light leak to the right side and experimented with some interesting colour options. There is a lens grime layer in there too.

Liquify and Particles

Original photo

In a nod to Andrew Kramer’s recent ‘Animating a Still’ tutorial I thought I’d try something a little similar  by animating an eruption of Mt Ruapehu.

I found a suitable photo and sliced it up into various layers which I arranged in 3D space. I added a camera and a really basic move that was supposed to resemble someone running (I should have got hold of some actual footage with someone running and motion tracked it .. but I was being lazy).

I Used the liquify tools to animate the mountain smoke and After Effects built in CC Particle World plugin to create some basic dust floating around.

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.

Original concept

‘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.

Sticking with my theme of actually doing tutorials (and not just watching along) I wanted to experiment with a very cool lighting technique demonstrated by photoshop legend, Russell Brown, in this fantastic tutorial.
http://tv.adobe.com/watch/the-russell-brown-show/samurai-poster-part-2/

We had a nice afternoon out at a local park when something caught my little one’s attention. We took a quick photo (as you do when you have kids) and when we returned and looked through the photos I realised that this was the perfect pic to try out the technique.

I wont go into all the details here unless some really wants me to break it down. Suffice to say that I sourced an image of something that looked like butterflies and composited it into the the original photo. I then made some color adjustments, added some noise and integrated the awesome relighting technique from the tutorial above. Click the image below for a comparison and be sure to click through to Russell Browns great tutorial.

Click here to play the game. (1MB)

Sometimes you get a Flash interactive project that is just great fun to work on … this was one of them.

While working at Martian Design I had the opportunity to develop a series of Flash based games for the mintshot.co.nz website. This was one of my favourites. The goal of the game was to disarm a bomb and save your prize from exploding. If you saved it, you won it.

I worked closely with Tony from Martian Design and we conceptualised the game, the sequences and the Flash interaction that was required. We came up with a look for the game and then Tony got to work on the majority of the artwork and  I got to spend some time in Adobe After Effects creating the inevitable explosion sequence.

Tony used a combination of Adobe Illustrator, Adobe Photoshop and Maxon Cinema 4D in creating the bomb casing and internals. I used Adobe Photoshop, Illustrator and Adobe After Effects to create the explosion sequence and I then put the entire project together in Adobe Flash.

I really enjoy using Adobe After Effects and being able to integrate After Effects with Flash interactive is something that I’m looking to do a lot more of in the future.

Click here to play the game. (1MB)

(Note the load screen is pre-release and the server interaction for winning prizes is disabled).

Sometimes you want to be able to show an object in 3d on the web. If you are looking for a high quality render then the best way that I know is to use pre-rendered footage and import that into flash. Sure it’s not a true 3d environment but the end result is very convincing. Let me show you how I made the example here.

I chose a local company here in Tauranga that are known for making great sleep systems (that’s ‘beds’ to you and I). They put a lot of work into the design of their products so for this example I have chosen one of their beds. I also chose one to sleep on … but that’s beside the point.

Cinema 4D

To start with I found a couple of source photos on the web and used those as a basis for creating a model in Cinema 4d. I wont go into all the details of creating the model as there are people around that know far more about it than I do. (Check out Pariah Studios for some handy tips when it comes to modeling in Cinema 4d. )

Once I was happy with the model, I added a camera and animated it around the model over 90 frames. I used a technique demonstrated by Robert Leger in the breakdown of his winning entry to the Motionworks unplugged title challenge. A clever technique where you add a spline to your scene, attach a targeted camera to the spline and then keyframe the camera’s position along the spline. Very simple and effective.

I added some object buffers to the various elements in the model so I could isolate them later and then rendered out the animation for After Effects.

After Effects

Once I had the animation I took it into after effects and tweaked some colours (object buffers are very handy for isolating and color correcting specific parts of your scene), added a vignette (which I could have done later in the flash stage come to think of it) and generally got the clip looking how I wanted it to look.

Then it was time to render out an FLV from After Effects for the import to Flash.

TIP. I specified to create a Keyframe at every frame during the export process. It does add considerably to the file size of the FLV .. but for this type of scene, with a lot of sharp lines, I found that anything less caused an unacceptable loss in quality.

Flash CS4

Once you have your FLV rendered out, you can import it into flash using the Import Video command. Import your video into the timeline as a MovieClip .. don’t stream it or import it as a video object. If it’s imported as a MovieClip it becomes very simple to scrub the movie back and forth.

Once your import has completed and you have the MovieClip on the stage, give it an instance name so it can be targeted easily with Actionscript. I called mine:

flvMC

Then, double click on the MovieClip and add a stop action to the very first frame. This will stop the movie from playing automatically once the swf loads. The actionsctip for this is simply:

stop();

Now we need to create something to let people interact with the MovieClip. For this I chose the Slider Component (which I think is only available in ActionScript 3).

Drag a Slider Component out of the components panel and onto a new layer in your timeline then give it an instance name. I called mine:

sliderCOMP

Now we just need to hook the Slider Component to the MovieClip and the job is virtually done. To do this we need a few things.

Component Inspector

Firstly, click on the Slider Component in your timeline and open the Component Inspector window.

1. We need to make sure that ‘liveDragging’ is set to true.

2. Remember back in Cinema 4D I rendered this animation out over 90 frames? Well in the ‘maximum’ setting set this to the same number as the total frames in your animation. So for me this is 90.

Now the last thing that we need to do is tell the slider to talk to the MovieClip. Again we need a tiny bit of Actionscript for this. Here is mine and you can adapt as required.

sliderCOMP.width = 690;

import fl.controls.Slider;
import fl.events.SliderEvent;
import fl.controls.Label;

sliderCOMP.addEventListener(SliderEvent.CHANGE, changeHandler);

function changeHandler(event:SliderEvent):void {
 flvMC.gotoAndStop(event.value);
}

So what’s happening here?  Firstly I’m setting the width of my slider so that it takes up more of the canvas.

Next, we’re importing the classes that deal with the Slider Control.

Then we’re adding an Event Listener to the Slider Control .. this means that we can run another piece of code (a custom function called “changeHandler”) every time something happens with the Slider.

Lastly, we are creating the ‘changeHandler’ function. What this function is doing is simply telling the MovieClip to ‘goto and stop’ on a specific Frame number. It gets that frame number from the sliders position.

Because we set the maximum value of the slider to be the same as the number of frames that are in the MovieClip then all we are really saying is ‘if the slider moves to position 10, move the MovieClip to frame 10 and stop’.

Round up

This process may look fairly complex but in truth it’s actually pretty straight forward. What we are doing is enabling the user to scrub their way back and forth through some movie footage. The movie footage just happens to be a 3d render of an object. Therefore the end result is the effect that the user is rotating the object in a 3d environment.

Have fun.

Snowberry Beauty is a fantastic looking site and it’s made all the more impressive by adding animation to key components with jQuery.

Snowberry Beauty originally had their website designed and built entirely in flash. The only problem was that it was horrendously difficult to manage and their original flash developer was no longer available.

They were in a bit of a bind so I suggested that they rebuild their website with HTML, that way any web developer worth his salt should be able to maintain it. It would also be more searchable and quite simple to develop an administration interface so that they could add new items and articles as required.

They were very particular about the look of the site, and rightfully so as I am guessing they paid a fair amount for it originally, so what about all the gorgeous animation that was done in flash? Well … We can do that in HTML these days. Enter jQuery.

I was the sole developer on this project it presented a number of challenges. I like challenges and two of them I will mention here were the animation and the custom typeface.

Animation with jQuery

The Snowberry Beauty website has panels that slide open and fade in. Galleries with scrolling thumbnails. Opacity changes and lots more. Traditionally this has been why people would use flash. But many of these effects can be accomplished with javascript. The only tricky part with javascript is getting it to work properly across multiple browsers and that’s why we use a library like jQuery.

jQuery has numerous effects and options built right in so it makes it relatively simple for us to animate objects.

Lets say we want to animate the opacity of an object called ‘panel’. We can just use the instruction:

$('#panel').fadeIn(500, 1);

This tells the object called panel to fade in to 100% opacity over 500 milliseconds.

You use a very similar syntax for slideUp, slideDown etc.

It’s pretty straight forward stuff once you get the hang of it and if you haven’t used jQuery yet then you would certainly do well to invest some time into it.

Note: there is still some flash animation in Snowberrybeauty.com .. just the introduction animation and the background for each page. All the rest is jQuery.

Custom typeface

There are only a handful of typefaces available to web browsers and more often than not, the client uses a particular font in their branding that isn’t supported by the browser. Such was the case in this situation.

The common solution to this problem is to render the font as an image. And while that works its really not a very good option. You don’t want to have to make images of your type if you can avoid it as it leads to huge problems when one day you decide to change the colour or style. It’s also not easily searchable.

The answer is to use some font replacement technology until css3 is fully supported. There are a number of options out there but for this website I chose to use cufon.

Cufon is extremely hassle free to get up and running and it works very well indeed. It basically looks at an html tag and renders the contents of that tag into the typeface that you desire. I’m not sure about all the nuts and bolts of it .. all I know is that it works really well and is dead simple to integrate.

It supports css, hover states and pretty much all the usual things that regular text supports.

End result

I am very happy with the way the snowberrybeauty.com website looks and works.

It presented a number of challenges to me which required that I learn a few new techniques and, most importantly, the client has a website which is virtually identical in look, feel and action to their original … except they can now manage it themselves and are no longer reliant on a high end flash specialist.

To view the Snowberrybeauty website click here.

Most businesses could really benefit from a solid email marketing solution. It’s an extremely handy tool to have in your arsenal and its so effective and affordable that you just can’t ignore it.

I’ve talked to a lot of people who agree that email marketing should be really beneficial to their business. Many of them have given it a go by trying to use Outlook to handle their email marketing. While you can technically send a stack load of email to people with Outlook let me tell you why it’s a very bad idea and complete waste of time and money.

1. Its a huge hassle and takes much much longer than using a dedicated email marketing service like Mailcall. I don’t know how many of you enjoy sitting down and swearing at your computer but attempting email marketing via outlook will give you some practice at it.
2. You have the problem of managing a list of subscribers, remembering who has unsubscribed (that’s a legal requirement these days), what email addresses bounced and more. Outlook doesn’t do those things. You have to do them manually. Got a pen & paper handy?
3. You don’t really have any idea at all how successful your email marketing campaign has been.
   If you use Mailcall it will tell you who opened your email, who clicked on a link, who unsubscribed, who forwarded it onto a friend and much more. It will track all of this in real time so you know exactly how things are going.

Now I know people that fully understand these 3 points yet still insist that they can do it themselves. This leads me to one of two conclusions.

1. Either these people are dead scared about using a new system .. or
2. They’re cheap. Really properly stupidly cheap.

So … what can we do?

Problem 1. I’m scared.

Being scared about a new system is fair enough. Let’s face it, most of you probably use Outlook everyday so are somewhat familiar with it. I also guess that you probably think Outlook IS email .. so therefore all email related activity goes through Outlook. Again, that’s a fair enough assumption even if it’s wrong.

Good news though; we can fix the being scared issue with some training, some practice and by having someone that can help. Someone like me. Very simple stuff really and Mailcall is very simple email marketing tool to use.

Problem 2. I’m really cheap.

The issue that we can’t fix easily is the one of you being too cheap to realise when you’re onto a good thing but let me try anyway with a simple example.

Lets say you want to send a message to your customers and lets say you have an active customer list of just 500 people.

It will cost you just $40 NZD to use Mailcall to send that email.

Now I can hear whats going through your head.  “Bloody hell, $40, that’s a half a tank of gas in my Holden .. I’ll send it with Outlook’

Here’s the thing though .. It’s going to take outlook a good hour or two at least to actually send the email. It’s going to take you much longer to format a nice email. Then you have to figure out who you are sending it to. You have to darn well make sure you’re not sending it to anyone that doesn’t want to receive email from you because if that happens you are actually breaking the law.  Then, if it actually sends your email and your ISP doesn’t close your account for thinking that you’re a spammer, you still have no idea of what has happened with your email. Who got it? Who opened it? Who visited your website as a result. You just have no idea.

If you can see the logic in this and how much more you could potentially make by being able to easily and effectively market to your customers, give them relevant content, keep on the right side of the law and track the success of your campaign then why aren’t you doing it?

Stop being so darn cheap.

Want to know how much it would cost to use Mailcall to email all your subscribers?

Follow this link to the Mailcall pricing page.