2014
Lynda
Chris Converse
5:08
English
Adobe Edge Animate offers a new way of creating rich and interactive animated content for web and mobile sites. In this course, discover how to use the complete Edge Animate toolset to lay out and animate motion graphics for your website, mobile devices, digital magazine, iBooks, and more. Author Chris Converse shows you how to build basic compositions with shapes, text, images, and SVG files; animate the different elements with Auto Keyframe and Auto Transition features; trigger actions based on the timeline position or your visitor's mouse clicks and movements; and incorporate custom HTML, audio, and video. Chris also shows how to make your content accessible to the broadest audience possible with responsive layouts, incorporate web fonts from various online services, and accommodate older browsers. The final chapters in the course show how to use content from other applications like Flash or After Effects and take it to the next level with Edge Animate.
Introduction
About this course
How do I get the software?
Using the exercise files
What does Edge Animate actually create?
What's new in Edge Animate 1.5?
What's new in Edge Animate CC (2.0)?
What's new in Edge Animate CC (3.0)?
What's new in Edge Animate CC (4.0)?
1. Understanding the Edge Animate Interface
The splash screen
Overview of the interface
Customizing Edge Animate
For those familiar with HTML and CSS
2. Creating Content in Edge Animate
Creating a new project
Using the Rectangle and Ellipse tools
Using the Transform tool vs. the Properties panel
Using the Text tool
Importing content into Edge Animate
Manipulating content in Edge Animate
Applying CSS filters to elements
Applying CSS shadows to elements and text
Creating CSS gradients
3. Preparing Content for Use in Edge Animate
Preparing content with Adobe Photoshop
Preparing content with Adobe Illustrator
Preparing content with Adobe Fireworks
Preparing content with other graphics tools
Preparing HTML5 audio with Adobe Audition
Encoding HTML5 video
4. Composing Layouts in Edge Animate
Creating a composition
Adding and arranging elements
Adding text to your composition
Creating templates
Adding audio to your composition
Adding video to your composition
5. Animating Elements
Activating properties to animate
Using Auto Keyframe and Auto Transition
Animating with the Toggle Pin
Setting easing options for animations
Animating clip and background position
Combining transformations
Working with sprite animations
Animating CSS filter and shadow properties
Animating CSS gradients
Animating elements along a path
Combining audio effects with animation
Animating audio properties
6. Making Adjustments to Animations
Adjusting animations
Moving entire animations
Reusing animation properties
Changing animated artwork
Setting an animation to loop
Editing and transforming motion paths
7. Working with Symbols
Using symbols
Creating animated symbols
Controlling symbol playback
8. Working with Actions
What is a trigger?
Assigning actions to objects
Targeting symbols with actions
Targeting labels with actions
Using touch start and end events
Using swipe gestures
Creating article links for Adobe DPS magazines
Creating your own custom code snippets
9. The Code Panel
The Code window interface
Adding stage and preload events
10. Creating Responsive Layouts
Grouping elements into symbols
Setting the stage measurements
Adjusting the measurements of objects
Using presets for responsive layout
Setting responsive stage properties
11. Using Web Fonts in Edge Animate
Using fonts from Adobe TypeKit
Using fonts from Google
Using fonts from Extensis WebINK
Using fonts from Edge Web Fonts
12. Considering Older Web Browsers
Creating a poster image
Creating a Down-Level Stage
Adding a preloader for your project
13. Working Between Edge Animate Projects
Working with multiple open documents
Exporting and importing symbols
14. Publish Settings
Publishing for the web
Publishing to an Animate Deployment Package (OAM)
Publishing for iBooks and OS X
15. Using Edge Animate on Existing HTML
Animating elements of a responsive web design
16. Going Beyond the Edge Animate Interface
Adding HTML into text boxes
Adding JavaScript to your composition
17. Using Edge Animate Projects in Other Authoring Applications
Using OAM files in Adobe InDesign CS6
Using OAM files in Adobe Dreamweaver CS6
Using OAM files in Adobe Muse
Using widgets in OS X Dashboard
Using widgets in iBooks Author
18. Coming to Edge Animate from Adobe Flash
Relating to a new interface
Creating animations
Assigning actions
Differences in publishing
19. Coming to Edge Animate from Adobe After Effects
Relating to a new interface
Creating animations
Differences in publishing
20. Coming to Edge Animate from Adobe Photoshop CS6 Extended
Creating animations
Differences in publishing
21. Coming to Edge Animate from Adobe Photoshop CS5 Extended
Creating animations
Differences in publishing
22. Coming to Edge Animate from Sencha Animator 1.3
Relating to a new interface
Creating animations
Differences in publishing
23. Coming to Edge Animate from Tumult Hype 1.5.2
Relating to a new interface
Creating animations
Differences in publishing
Conclusion
Conclusion
http://www.lynda.com/
Download File Size:934.65 MB
|
