Animate drawing tools: 101

Remember, we are using the drawing tools for this project. Be creative!

Resources:

Animate Shape Tweening

Adobe Animate Drawing Tools

Adobe Animate Custom Brushes

Remember, you can work extensively within Photoshop to select certain areas of your artwork, place the selection on a new layer, etc. Once you import your files into Animate, these different layers can be animated separately.

How to use masking and Animating masks

Shape Tweening: 1. Start? 2. End? 3. Apply Shape Tween 4. Consider Shape Hints

 

Adding sound

https://helpx.adobe.com/animate/using/using-sounds.html

 

Supported sound file formats

You can import the following sound file formats into Animate:

  • Adobe Sound (.asnd). This is the native sound format of Adobe® Soundbooth™.
  • Wave (.wav)
  • AIFF (.aif, .aifc)
  • mp3
  • Sound Designer® II (.sd2)
  • Sun AU (.au, .snd)
  • FLAC (.flac)
  • Ogg Vorbis (.ogg, .oga)

 

Two great websites for free sound effects:

www.freesound.org

www.zapsplat.com

Creative Animation

The goal for this next project is to have fun in a different way than our commercial project. The commercial project was about selling, branding, etc. This project is about being playful and creative.

Find your favorite painting, drawing, photograph from your OWN portfolio and add brushes, effects, motion, etc. You must have a cohesive (at least) 200 – frame animation.

Project due: Nov. 5

Video/tutorials to watch/read to prepare for this project: 

Shape Tweening

Brushes within Animate

Adding audio

Learning objectives:

  1. Using the drawing tools (paintbrush, pencil, shape tools), 3D rotation
  2.  Onion skinning + filters
  3. Filters and masking

 

Examples online:

Classic paintings, animated

Van Gogh, animated

Gorgeous Japanese woodblock prints

Greek sculpture

“The world is spinning” (3D tool possibilities)

https://www.behance.net/gallery/11828499/Camping-in-the-fall

Please watch the above videos and bring two ideas to class for this project. I will do some technical demos as help you get your idea executed.

Easy easing

Easing allows you to control the speed of a tween to produce realistic motion with pleasing effects. Applying Eases on motion tweens allows you to manipulate the beginning and the end parts of an animation to cause a more natural movement of the object. For example, one of the many common uses of easing is to add realistic acceleration and deceleration at the ends of the motion path of an object. In a nut shell, Animate CC makes alters to the rate of change of the value of Property depending on the Ease applied to it.

What IS easing?

Adobe adding custom easing

Adobe – Easing with Motion Tweens

Adobe – Custom easing in Classic Tween

Tuesday, Oct. 1 – Lab Day + Begin Banner Ad

We made great progress on our logo animations last week. Today is a lab day to refine, and continue working on them.

If you get to a good place with your logo… begin your animated banner design. (See below for specs)

To keep up with the “industry standard” we are going to follow Yahoo Ad Specs for this portion of the project. You may choose any size within the “Standard” banners. Choose one that suits your needs for your particular company and vision for the ad.

Your banner should include your logo but show additional elements of text, image and information about your company. Try to incorporate an additional image (s) – think of this as an ad for your company. . . What are you “selling”?

Behance

Classic Banners

Timeframe: 24 fps approx 200-400 frames

Kinds of Banners: 1. Simple 2. Expandable 3. Take Over 4. “Blocked Ads”

Ads Best Practices 

  1. Clearly define goals (click or engage?)
  2. Stick to publisher requirements (technical specs, size, etc.)
  3. Keep optimization in mind (beautiful graphics vs. file size.)
  4. Have a clear and prominent call to action (“Click Here for more”) – higher chance of
  5. Call to Action should be in the beginning of animation
  6. Use a border to separate it from the website it is appearing on

Goal: provide content in simple ad design

In class demo:

Reminder: Watch this in class: CLASSIC Tween VS. MOTION tween (6 min) and Adobe

 

 

 

Tuesday, Sept. 24

Hello students,

Last week we spent a lot of time working on your logo in Photoshop/Illustrator and did a very basic Animate CC intro.

Today we are going to complete your logo file set up animation. Remember that this is an intro project to get you comfortable with the basic principles in Animate. Create logos that are showing simple animations that move, rotate, reflect, transform, scale, etc.

Key words to remember: 

Timeline: Where you designate what kind and for how long you want your animation to be. Divided into layers. Each animated object should be its own layer!

Keyframe: The place where you want something to happen

Motion Tween: Setting properties for an object for continuous motion animation or transformation of an object. Motion tweens appear in the Timeline as a continuous span of frames that can be selected as a single object by default. Motion tweens are powerful and simple to create. And here

Frame Rate: The speed the animation is played at, measured in number of frames per second. A frame rate that is too slow makes the animation appear to stop and start; a frame rate thats too fast blurs the details of the animation. A frame rate of 24 fps is the default for Flash, giving the best results on the web.

Great 20 min video on Animated Logo – Also great for illustrating “erasing” frame by frame by “breaking apart” text

Another on HTML5 Banner Ad

Frame by Frame vs. Motion Tween Animation

GENERAL HELP from Adobe.com 

Importing from Photoshop or Illustrator

Remember: Your Illustrator files are set up slightly differently by default. I will show you how to “Modify, Timeline, Distribute to Layers” within Flash.

Tweens: courtesy of Adobe.com

I will be demonstrating the following:

Additional Instructions from Adobe

1.Create new Animate CC document – HTML5

2.Importing .Ai or .PSD to Stage

3. (If Illustrator: Modify, Timeline, Distribute to Layers)

4. Select all Layers. Click on frame 100, Insert Keyframe.

5. Now your file is set up to start animating each layer separately within the 100 frame timeline for your animated logo. (Repeat this process for your banner as well)

6. I’ll also be showing you how to alter your created motion tweens in the Properties Panel (color effects, ease, orient to path, etc)

Keep in mind the general process of :

1. Making a Symbol 2. Inserting Keyframe 3. Creating Motion Tween

 

Dont do a lot of effects, glows, gradients in your Photoshop/Illustrator files – Animate tends to have trouble converting them and this effects how your layers will import.