Adobe Animate | Lesson 1: Introduction to the Interface

Introduction:
flash cc interface screen grabThis lesson introduces the new user to the Animate interface. There are two learning tasks here that will help build a foundation for later lessons.

The Adobe Animate interface is similar in appearance to a lot of modern graphics /animation applications; if you've used video or audio editing software the "timeline" panel should look relatively familiar to you already.

It also shares the "layers" scenario with Photoshop whereby you can "stack" artwork on top of other artwork to deliver sophisticated effects.

The interface & the drawing tools

Understanding how to use the drawing tools and create vector artwork (what's vector artwork? Youtube, 6mins ) is a fundamental part of using Adobe Animate. Alternatively, you can use a program such as Adobe Illustrator or Photoshop to create artwork and import that into Adobe Animate, but for those not familiar with Illustrator, it would be useful to learn Adobe Animate's drawing tools first. In fact, many Adobe Animate developers prefer to use the drawing tools in Adobe Animate exclusively because they're so powerful and intuitive.

 

Video Tutorials for learning to draw in Adobe Animate

Draw with Jazza is a recommended resource well worth watching. It's comprehensive and demonstrates most of the toolset. It's lengthy however, at 1hr 40 mins.

Learning Task 1: Kitchen Disaster ( 4 - 6 hrs )

Introduction:
After you've watched the video you now have the opportunity to test your drawing skills in Adobe Animate.

We're not animating this scene, it's simply a static image for the moment.

We've all had kitchen disasters, the exploding microwave dinner, the flambe that set fire to the cupboards and the chef that drank too much.

This is your chance to show us your most memorable kitchen disaster and drawing in Adobe Animate is how you set the scene.

Method:
Set your stage to a widescreen format; 1280x720 @ 20 fps (fps = frames per second. Although the frame rate has no bearing here since we're not animating anything, we animate this later and 20fps is a wise choice for most web/ mobile formats.

...but I can't draw !
Don't worry, Adobe Animate has tools that can make drawing easier. We're not using crayons and butcher's paper here, we've got import photos, trace bitmap, custom brushes and strokes, layers, bitmap fills and gradient tools to play with.

 

Develop an idea.
Use your preferred design process to develop your ideas. A quick search online can do wonders if you're looking for inspiration.

Photo. as template.
You are encouraged to use the drawing tools in Adobe Animate. If you don't feel very confident yet, feel free to import a photo (Ctrl-R to import to Stage) and use that as a background layer and on another layer above, draw supporting artwork over it. You could even try the MODIFY/ Trace Bitmap trick to turn your photo into vector shapes.

Preparing artwork for importing into Adobe Animate.
To give you a "kick start" into this task, download and watch the soupcan.mp4 tutorial video available from our shared Google Drive account. It's mainly to support Lesson 3 but demonstrates the best way to edit artwork using Photoshop and save it optimised for Adobe Animate. See your teacher for access to this resource.

Details, details.
Your artwork needs to be relatively detailed. Use lots of layers, only one item on a layer, this makes it easier to animate later on. Name your layers (just like Photoshop).

 

Submission Guide
Once complete, save your Adobe Animate file (it should be a .fla file) somewhere safe then submit it for feedback via your preferred cloud storage service and share the link via email.

In addition, export your work as a .jpg (FILE / EXPORT / Export Image then select .jpg as the image format). Publish the .jpg to your blog with a supporting caption describing the process of creating your artwork and supply your blog URL via email.

winchelli monet kitchen artwork
Winchelli Monet 2016

Learning Task 2: Adobe Animate and its Interface | Self-Assessment

Here are some self-assessment questions to test your understanding so far and to encourage you to research more on Adobe Animate. Use a word processor and spell-check your answers and aim for one to two A4 pages to answer them. Submit your work using the Assignment Tool for feedback.

Do not publish to your blog.

  1. Name two tools you can use to change gradients in Adobe Animate.
  2. In Adobe Animate, to create a circle with a constant radius or a square with equal-length sides, you should hold down which key?
  3. How can you smooth-out the pen tool? (hint: watch Dan's Part 1 video)
  4. How can you change the size, colour and frame rate of the stage ?
  5. What's a "workspace" and how can you select the "Classic" workspace ?
  6. What's the easy way to select both the stroke & the fill of an object ?
  7. What's "Object Drawing Mode" ? Hint Lynda.com What's the point of it?
  8. What's the keyboard shortcut to test your movie?
  9. Adobe Animate saves files as .fla and exports as .swf, or HTML5 Canvas/JS which format goes on your web page?
  10. List five things that makes Adobe Animate a great animation tool. List three things that makes Adobe Animate less-than-great.
  11. There are other applications that could be used to produce interactive multimedia instead of Adobe Animate. List three.
  12. Adobe Animate can be used to make amazing interactive products. Find three examples (include their URLs and a screenshot for each) that you feel are outstanding examples of this and explain why you like them.
  13. What's the hardest thing you found in doing Learning Task 1 and why did you find it hard?
  14. From what you know about Adobe Animate so far, what is the thing you would most like to produce using Adobe Animate?

Summary:

Drawing in Adobe Animate is easy once you've learnt its tools. It pays to create your artwork in Adobe Animate because the file sizes are low thanks to the nature of vector artwork but you can still import artwork from other sources such as jpgs or pngs if you need transparent outlines or fills.

Just remember to use lots of layers and name the layers as you go. Someone else may need to work on your file so use appropriate names for layers.

You will use these skills for the next lesson which introduces basic keyframe animation and working with the timeline.