AK-Worldwide Logo Animation

Software Flash icon
AK-Worldwide Logo Animation thumbnail

There's kind of a round-about way of how I came to do this for Alicia Keys' company AK-Worldwide which you can read more about here. For this post I'll just explain the basic process I went through to make this.

The original animation used images for all the assets. I've never liked using images for assets unless I absolutely have to. Personally I find it easier to update things when assets are in vector form. Plus the file size is usually a lot smaller.

I started off by drawing the logo in it's final form (in solid color). Then I copied the MC (movieclip) and created the transparent shaded version the encompasses the world. I knew that in order to get the effect of overlap it'd be easier in the long run to duplicate the shaded MC onto 3 layers. I then flushed out the timing for the masks that animate over the shaded logo. If I didn't get that correct I knew that it'd just be a waste of time. Once I was happy with that I drew the world icon and started making proper adjustments to really sell the overlap effect.

Now here's where things get a little tricky. I wanted to have full control of the timing of the rest of the animation in case I or AKW wanted to make adjustments to it later. So I set up the final logo and the animated logo along with the titles on the stage. Then there's some AS (actionscript) that sets the positioning and timing of those elements. Here's a simple tree that demonstrates the action.

  • Logo1 fade away
  • Logo2 fade in
  • Move logos
  • Start title fade in

The replay button isn't on the live version of course, and there's some extra functionality that was added in to make it function. All in all, for a couple hours work I'm quite happy with the results. So was AK-Worldwide considering they're using it as their landing page until the site gets built.

Here's the old animation

And here's the new