Animate all the things

As you may have noticed, I’m on a quest to animate all the things. I decided to take a break from the course to practice a little. So I made the proper logo animation for the BrainBomb.

I wanted to convey the concept of a live fuse. So the idea came to me. Take a look at the animation on the right and read on for how I did it. This is how it took me 16 hours to animate 20 seconds of animation.

The BrainBomb logo animation.
LiveFuse Logo @x2

So many frames

The logo was only ever designed to be linework. So I had to draw some dimension into the logo in Photoshop and them vector trace it. I was going to go with brain colours but decided to rather stick with metallic colours to stay with the bomb theme.

I also created all of the spark and explosion graphics in Illustrator.

An animation timeline from Adobe Animate
The timeline for the animation

This is a pretty simple animation as animations go but still pretty complex. Especially for a second try. I’m sure I’ll learn better methods as I go.
The bomb itself wasn’t too difficult. I just moved it around and created tweens to smooth the movement. The trickiest part was keeping the focus part of the fuse in the centre. And then keeping it scaling as I wanted through all the frames.

The worst part was the mask. I like to work non-destructively so I couldn’t erase the fuse as the sparks moved. So I had to paint in a mask and because the fuse moves so much I had to do it 80 times. That was pretty tedious.

The sparks and explosion were easy. I just created frames for the 4 different sparks and 4 different explosions and copy/pasted those through the timeline. The explosions I varied and added a frame gap for the end as it shrinks.

Adobe Animate doesn’t let you animate text like I wanted to I had to create the word “LiveFuse” on a path in illustrator, slide it down the path and save the version. Then I had to bring each of those in and place them on frames to make it look like it was flowing.

Putting it together

Camtasia Timeline
Putting it together in Camtasia. A much simpler timeline.

I haven’t gotten to adding audio in Animate and since I was adding some post production I did that in Camtasia.

I added a hiss sound effect in to the fuse. I left a slight gap after the fuse for the explosions. It just sounded more natural.

There wasn’t really an explosion sound that I like so I grabbed 3 and layered them. Slowing one a little. The sound for the word LiveFuse to flow in is a slowed down fireworks scream.

Then I faded in the code background and started the music. Finished with our details, social media info and a few of our services.

This my second attempt at animation so I’m sure it could be much better. Even so, I’m quite proud of my effort.
I’ll be using this as an outro for future videos and animations. At least until I decide to revisit it when I’m much better.

Follow Us

Leave a Comment

Check This Out

A green alien on a rocky planet

Learning animation
[Part 3]

There are a lot of little details to animation. Today I learnt how to use envelope distort to give the alien and almost gelatinous feel as he bounces in.

Read More »

Say No To Sliders

When it comes to web design the most important consideration is the user. It doesn’t matter how cool you or the designer thinks something is if the user doesn’t like it. Huge companies sometimes spend millions developing products that people ultimately hate. One such thing is sliders. Something you see on the majority of sites

Read More »

Lock It Down

It seems that every month there’s a report of a new security breach. We’re not talking small websites here. We’ve seen some huge companies breached and millions of user’s information leaked. The fact is that if you’re online, you’re vulnerable. For most people, the risk comes from phishing and social media hacks. Even the more

Read More »

Talk to us! We'd love to hear from you

We work remotely from Johannesburg. Drop us a message using the form.

You can reach us using:
Call | WhatsApp | Telegram | Email

Leaving so soon...

but we're just getting to know you.

Still deciding if LiveFuse is right for you?

We’d love to work with you on your next website or help you with an existing one.

Send us a message and we’ll get back to you to discuss your needs.

We use cookies to ensure the best user experience. Our privacy policy can be viewed here.