Adobe Animate CC for Web Designers
About
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.
- Import photo on new layer
- Insert keyframe
- Arrange layers so shape (mask) is on top of the image to be masked
- 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 × 200 | Small square |
240 × 400 | Vertical rectangle |
250 × 250 | Square |
250 × 360 | Triple widescreen |
300 × 250 | Inline rectangle |
336 × 280 | Large rectangle |
580 × 400 | Netboard |
Skyscraper | |
120 × 600 | Skyscraper |
160 × 600 | Wide skyscraper |
300 × 600 | Half-page ad |
300 × 1050 | Portrait |
Leaderboard | |
468 × 60 | Banner |
728 × 90 | Leaderboard |
930 × 180 | Top banner |
970 × 90 | Large leaderboard |
970 × 250 | Billboard |
980 × 120 | Panorama |
Mobile | |
300 × 50 | Mobile banner |
320 × 50 | Mobile banner |
320 × 100 | Large mobile banner |
Supported file size |
|