Edge Animate 101 Yellow Belt

Adobe Edge Animate uses CSS, HTML, and JavaScript to create animated web content, which makes it feasible for search engine, indexing and screen readers.

This course is aimed at designers and developers (and anyone in between) who are new to Adobe Edge and want to get to grips with the user interface and create web standard animations and interactivity.

Objectives:

• The interface and tools
• Integrating text and other content
• How to animate
• Add interactivity
• Save and publish a project

Prerequisites:

As this course is aimed at beginners, all that is assumed is that the delegates are familiar with the web, its terminology and how Edge is used within this environment.

Benefits:

This course introduces Edge, an Adobe design tool that uses web standards for incorporating smooth animations and interactivity into projects. You will learn to create motion content in the application's timeline-based interface. This course also covers importing and keyframing web graphics and adding interactivity to projects.

Course Syllabus:

• Introduction
• What is Adobe Edge Animate
• Understand the role of HTML, CSS and Javascript used by Edge
• Understand animation basics and requirements
• Document Setup
• Control document size and colour
• Control and understand document overflow
• Explore the Interface
• Selection tools and methods
• Drawing tools and settings
• Text and settings
• The stage
• The Elements panel
• The Properties panel
• The timeline panel
• Workspaces; choose, create and reset
• Use the Timeline
• Discover the Timeline controls
• Hide and show contents
• Create movement
• Reverse movement
• Create transitions and fades
• Work with Keyframes/Auto-Keyframing
• Play your animation
• Learn playback controls
• Use and understand the Pin
• Use and understand Triggers
• Use Labels
• Animation
• Apply Easing for the professional look
• Create Smooth transitions
• Animate content on your existing web page
• Copying and pasting animation
• Control timing
• Control object transformations
• Move animated content
• Animate along a motion path
• Preview in a browser
• Projects and Interactivity
• Create an image gallery
• Create a parallax effect
• Create web adverts
• Creating hotspots
• Create hyperlinks/web links
• Add Events for mouse interactions
• Add Triggers
• Create Looping
• Create mask effects
• Create pop-ups
• Create navigation
• Save and publish
• Importing graphics
• Understand graphic types
• Import and use SVG, GIFs, JPGs and PNGs
• Understand the Adobe creation workflow
• Responsive projects
• Setup a responsive project
• Make items in the project responsive
• Set min and max document size!!Sound and videos
• Add sound files to a project
• Control sound using different methods
• Add video files to a project
• control videos using different methods
• Scripts
• Enhance a project using scripts
• How to make scripts work
• Export and publish
• For the web
• Integrating with other applications