Understanding the UI of Adobe Animate and character design

Adobe Animate is the updated version of previous Adobe Flash Software. If we take a look back during its premier time, Adobe Flash has been firing a lot of applications and even games were also made by using Adobe Flash.

Today, we would like to share on how to use Adobe Animate software and how to design your character with it.

The first thing you have to do is to open your Adobe Animate software. If you do not know how to get the software, you might want to refer here.

1. Click File
2. Click New ( Shortcut Ctrl+N)

This time we will just use the default template provided by the software

1. Click HD
2. Set Platform Type as ActionScript 3.0
3. Click Create

Once the project is on, you will have this interface as your default view. At the bottom of the window, you will find a tab called “Timeline“

The function of this tab is to display the layer of your object, animation, background, scene and many more. Technically The timeline in Adobe Animate organizes and controls a document’s content over time in layers and frames.

Next, we would like to create an object or character. Here is how you can do it.

1. Right click on the icon above
2. Choose your shape, in this case we choose Rectangle Tool
3. Click and Drag in the artboard to make a rectangle shape

In order to make a perfect square, while dragging your mouse, you have to press shift on your keyboard. You can also use Line Tool or Pen Tool or any other tools that can create something on your artboard.

Once your shape/object is created, to play around with the setting, you might use the step below

1. Right click on the icon above
2. Choose Selection Tool
3. Click inside the shape

Selection Tool is used to make selection and please take note that when you make a selection, a part of the object will be shaded just like in the picture above.

1. Click and Drag using Selection Tool like the example above
2. Select Properties Tab on your top right hand side.

1. All part/elements of your object/character is selected, as you can see the shaded region
2. This is the fill color of your object (Blue Color)
3. This is the stroke color of your object (Black Color)
4. You can change the fill color by clicking here and choose another color
5. You can change the stroke color by clicking here and choose another color

This is the demonstration on how you can change the fill color of your object. Currently we select red as our Fill Color.

To change your stroke color, Use Selection Tool and select the edge of your object and select properties tab

This is the demonstration on how you can change the stroke color of your object. Currently we select green as our Stroke Color.

Now you are done. This is the fundamental of creating any object/characters by using Shape and colors.

Below is the explanation for the timeline behavior as you might come across this later in your project.

Take a look clearly, right after we open the software, you will see that the Playhead (blue color) is currently at frame number 1 and inside it there is a circle inside. The circle will change to bold if you have an object/character in the frame.

Below is the major component of the timeline.

If your workspace does not have any object, the circle inside the frame is empty like the illustration below. But when you fill your workspace with any object or character, the circle will be bold. This will help you to track whether your frame is empty or not.

That is all for today, the next posting we will share with you guys on how to make an animation with Adobe Animate and also using the technique of “tweening”.

Stay tuned!