Adobe Animate

Finding inspiration

When I started playing with Illustrator, a few weeks ago, I saw the kind of amazing art work that could be created, but wasn't inspired enough to produce something beautiful and colourful. Instead, like many designers, I found inspiration in something that already existed... existed in a form that I think lacked function.

I really don't like the icon/symbol that represents disability - the wheelchair icon. It's technically a black line icon but what I see is a grey NHS wheelchair with big rubber wheels and casters, that is terribly heavy. So that inspired me to create new disability icons, that represent a different view of disability. I wanted my icons to represent capability and activity in a wheelchair... for the wheelchair to be a positive symbol, rather than a symbol of pity.

And so, you may remember, I created this...

Connections

Of course, even though the current wheelchair icon doesn't actually look like a real wheelchair, we see it as one, because we make that connection. The problem with my new icon is that hardly anyone knows what a mountain trike is, so most people see it as a penny farthing, which is really funny! I wonder whether the mountain trike inventor intended to create an extension of the penny farthing???

So at some point, I intended to make a new wheelchair icon, based on my normal day chair.

Animate

We had a team away day at work, where the learning design team were exploring new software and tools for creating animations and video. There are several rapid authoring tools out there but they all had limitations, so at the end of the exercise, I agreed to go away and find out how Adobe Animate works.

I thought I'd start with my mountain trike and see if I could animate it. It came as no surprise to find out that the whole image had to broken down into its component parts, with each part on its own layer. You then animate each layer separately. Some of these were easy, such as the wheels. The 'shape tweening' facility accurately worked out that the wheels had to rotate and move forward, but stay completely circular.

Challenges

The first challenge came with the body, but was quickly repeated with other similar shapes. I wanted the body, arms and lever to both move and rotate a small amount (not spin) to create a realistic movement. I now regret not exporting the failed attempts, as they were quite funny. However, I discovered the shape hints, which allow you to identify parts of the shape which need to stay the same shape, and using several shape hints, I got there in the end.

The biggest challenge by far, was the lever. I ended up having to animate it by hand, frame-by-frame, which was quite time consuming. Although it was frustrating not being able to animate it automatically, I was quite pleased with the final result, which I looped and exported as a GIF.

Refining and progressing

Having made my first animation (which was embarrassingly short) I pressed on and decided to go back to my day chair idea. Initially, I went for a normal chair with spokes in the wheels, as I hadn't got a clue how to create and animate my loopwheels. I created the spokes with three straight lines (diameter of circle) and animated each one separately. The software did this with relative ease, except that sometimes, instead of the spoke spinning, it rotated outwards and detached itself from the wheel. Eventually I fixed that (mostly) and here is the result...

I liked the general idea but the propelling movement didn't look very realistic and I really wanted my loopwheels. So I kept going. I decided to create the loops and the centre of the wheel as one item (on one layer) and convert it into a symbol. Miraculously that worked straightaway and they rotated as planned. 

Then I worked on the 'easing' of the movement, to try to put some acceleration and deceleration into it. I ended up overdoing it a bit, so might need to adjust it. I'll be honest, it was a bit faffy having to adjust each section of each layer individually. I wonder whether there is a way of selecting all tweens and adjusting the easing for all at the same time. But anyway, here is the final result...

What next?

Now that I know how to create and animate basic shapes, there are three things I want to move on to... 

1. Adding in backgrounds - possibly have the background moving to simulate motion, but with the object staying in one place.
2. Create an animation that tells a story - introduce some scene changes and text.
3. Move away from black icons and create some actual images.