Edge Animate 101 Yellow Belt

Who is this course for?

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.

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