Making Waves: how the HA logo was animated

Having created a logo to represent the Hydrographic Academy (HA), we thought it would be rather good to create one that is animated. This would not only provide the HA with a more professional and consistent identity but also enhance video based learning materials. After having a chat with Becki Vickerstaff sharing her ideas, we went for simply animating the waves behind the HA, thanks Becki. Granted it's a simple idea, but we both thought it would give some impact to the coursework materials.

I decided to create this with a combination of software. Using both Adobe Photoshop and Flash Professional. Flash Professional proved to be the more worthwhile application, as I found that some of the transfer from Photoshop was not seamless as I hoped, having to rebuild nearly all of the elements in Flash. However Photoshop was useful in getting the details.

So how did I do it? Firstly I wanted to introduce waves behind the scene. I had originally created them as curves on a strip, so they were already open for manipulation, it was just a matter of lengthening them. Flash allows users to construct frame by frame animations, with many different way of approaching the same solution. I thought the fun way of achieving this would be to create it as if I was pulling a blue paper cut out of a wave through a piece of card (I also thought it maybe fun to actually show this later in future logos, but lets see). I digress, I joined together several dips and troughs to create a set of four clean waves, I then used motion tweening to pull the image through from one side to the other and a little script to stop after it completed its maneuver. To keep the waves behind the 'HA' I simply used a mask for the font lettering applied to an object to let the wave show through. No point complicated these things.

I had experimented with a few formats, leaving the logo with rounded corners on a black background, but decided to go for all black. Titling on video productions these days tend to lean towards this approach. However, I of course kept the rounded edge version, this could be useful elsewhere.