Animate: Robot Cat

Today we learnt how to use Animate. This software is primarily used to create animations, using vector images. They have very small file sizes.

We first started by setting up a document, the one we used was the 'Web High' which was 960x640 (A standard landscape phone screen size), 24fps and HTML5Canvas (This setting is important because the other option does not work on all devices). 

Animate is somewhat similar to indesign in the fact that file and asset organisation is very important. 

To start making an animation we first had to add a symbol (Insert>NewSymbol:Movie clip), this creates a place for you to create an asset which can be added (multiple times) to the scene and edited (it will be updated in the scene when you edit it). It is important to name the symbol. You can edit the symbol by clicking on library and then double clicking the sun icon next to the desired symbol.

You can add shapes like in other adobe softwares, you can use the 'Free transfrom tool' to scale or rotate the shape. You can also sometimes use ctrl to free transform. You can align shapes through Modify>Align.

When adding additional shapes it is helpful to draw them in an empty space because they can sometimes attach to other shapes within the layer. There is two selection tools like in illustrator, an ordinary one and a subselection tool (which allows you to edit points/nodes). When selecting things sometimes parts can be missed (like outlines- also if you want to have outlines it is important to add them before drawing the shape by changing the colour on the left toolbar), therefore it is sometimes easier to select by drawing a box (click and dragging over the shapes). You can also double click lines to select the whole line. 

Primative rectangles allow you to make rectangles with rounded edges.

Top start creating the robot, we drew a head in a layer called head. We then went on to add other parts like body and legs. I created a cat robot so I made it have pointy ears and whiskers, I looked at images on google to inspire the design. I used a mixture of shapes and the pen tool (I created the triangle for the nose using the polygon shape and changing the number of sides to 3). Overall I was happy with how the robot cat turned out. 

Once all the parts were made I could then start animating it. The timeline/keyframes were a bit fidily and were a bit different to other programs, however once you get used to them they are quite easy to use. I could then make changes to my robot at different keyframes.

The animations I added to the cat, were the ears changing to cyan and back to grey, the eyes sparkling?, the tail and collar? alternating grey shades, the cyan bell/dial moving and the paws going up and down.I did try some other animations but they were too much/didn't really work, I am happy with the animations I did add. 

To create a web version of the animation you can go to the stage, add the symbol (the animation will not show in the stage until you publish it.

We could then add 'Tweens' to make the robot move around the screen, there are two types of tweens Motion and Classic. To create a tween you need two keyframes (With the symbol in a different location in the second keyframe) and to select the frames and click the tween button which is two squares with an arrow. Here you can select the type of tween. Both tweens will move the Symbol between the two keyframes (Classic will turn the frames purple, Motion will change them yellow) The main difference is that Motion Tween creates a motion line which you can edit. 

We were also given a brief for our animate project, which is to create an interactive poster for a theoretical Design Museum exihibition called 'Visions of the Future' Which will be showing a range of innovative designs alongside some groundbreaking designs from the past. We get to choose what will be shown in the poster. We will have to do some research to help aid in the design process and to decide what we will choose to display.

As part of this we were tasked with finding 3 examples of futuristic innovations and some facts (And personal comments) about them. 

This website shares a few:

10 Futuristic Tech Innovations That Will Change the World - The Daily Iowan

Including:

-Heart monitering clothes which would moniter your heartrate and be able to detect irregualrities. 

-Advancements of phones including better graphics, holographic screens and ablity to interact with your phone anywhere in your house. 

-Smart toothbrushes which will be able to scan for things like tooth decay.

-3D printed food and organs.

This website shares ones that already exist:

Futuristic Things That Actually Already Exist | Reader's Digest (rd.com)

Like:

Self driving cars, Fridges with screens, VR, Cashier-less stores, Bendable screens and Flying suits to name a few. 

I think some of these things could be a bit unnecessary and not really accessable to everyone due to their prices.