Adobe Animate CC for Web Designers

Last modified by Justin Morgan on 2019/10/07 22:57

About


Course URL

Notes

Terms

Stage: the workspace

Keyboard shortcuts

Q - free transform tool

J - Allows resizing of objects (It's necessary to pin an end of the object though, otherwise resizing defaults to "from-center")

Ctrl+B - breaks text or objects apart

Ctrl+G - groups text or objects

Ctrl+Enter brings up the Control Test winodow to preview

Library & Symbols

Convert to symbol - Movie Clip - Gives more properties options like blend modes

Double-clicking on objects that have been converted into symbols (Movie Clip) isolates the object, allowing you to modify it. If multiple copies exist in the stage, all copies will be changed. However, outside the isolation mode, each copy can be manipulated independently. Diff blend modes, sizes, color, etc.

Graphic symbol

Button symbol - allows objects to have properties based on cursor states (up, over, down, hit)

To change cursor state properties, butoon symbol needs to be isolated (Double-click). Timeline changes to reveal cursor states. Right-click to insert keyframe for a particular state.

Menu option Control>Test allows you to preview so any interactive elements are usable as if you are the end user.

Keyframes in the app are very different from AfterEffects. In fact, it's almost like the piano roll for FL Studio. You can select multiple layers at a particular location in the timeline.

To make objects disappear you need to insert a BLANK keyframe at the timeline location where it needs to disappear.

In order to make an object move in the timeline you need to create both keyframes for where it starts and where it ends. Then you click between those two keyframes and select Insert Classic Tween.

You can import psd files and even retain the ability to edit them within Animate. Layers from the psd even appear in the Animate layers panel.

You can also move each psd layer independently at different speeds in order to create a parallax effect.

Easing of the tween can be adjusted in properties panel

Create shape tween allows you to morph one shape to another

You can also use shapes to mask things like images.

  1. Import photo on new layer
  2. Insert keyframe
  3. Arrange layers so shape (mask) is on top of the image to be masked
  4. Right-click on shape (mask) and select Mask option

Motion tween makes moving an object much easier then the classic tween. No keyframes to insert.

The path created can be adjusted to be curved

3D rotation tool gives you a 3 axis icon so objects can be animated in 3D space. Object setting can be minutely adjusted in the Transform panel.

When exporting to SVG it is necessary to break apart text so fonts are not subbed.

Commands>Export to other document formats

Exports as HTML5 and WebGL

WebGL does not support a lot of things though, like text.

Code Snippets are very handy too! That's how you create interactivity like button clicks and such.

File>New>Templates>Advertising - many sizes already there.

You can also resize any doc by going to Modify>Document. Can also scale objects automatically.

To make file sizes smaller, use tiled image, that way, only a small image is included in files and it is simply repeated.

Code Snippets has a timer so you can stop ads from looping after a period of time

Supported ad sizes (from Google)

Formats: ZIP containing HTML and optionally CSS, JS, GIF, PNG, JPG, JPEG, SVG

Square and rectangle 
200 × 200Small square
240 × 400Vertical rectangle
250 × 250Square
250 × 360Triple widescreen
300 × 250Inline rectangle
336 × 280Large rectangle
580 × 400Netboard
Skyscraper 
120 × 600Skyscraper
160 × 600Wide skyscraper
300 × 600Half-page ad
300 × 1050Portrait
Leaderboard 
468 × 60Banner
728 × 90Leaderboard
930 × 180Top banner
970 × 90Large leaderboard
970 × 250Billboard
980 × 120Panorama
Mobile 
300 × 50Mobile banner
320 × 50Mobile banner
320 × 100Large mobile banner
Supported file size
  • 150 KB or smaller