Chris Grover

Centering an Animation on the Web Page

Slide Duration:

Table of Contents

Section 1: Introduction to Adobe Edge Animate

Exploring Animate

12m 30s

Workspace

5m 14s

Examine Files

7m 40s

Building an Animation

6m 53s

Section 2: Creating & Animating Artwork

Creating Elements with Rectangle, Rounded Rectangle an Ellipse Tools

10m 46s

Changing Position and Size Properties

5m 24s

Choosing Colors and Gradients

8m 1s

Applying Shadows and Filters to Elements

4m 49s

Changing Properties over Time with Keyframes

4m 56s

Moving and Transforming Elements

5m 19s

Using the Ruler and Guidelines on the Stage

3m 23s

Arranging, Aligning and Distributing Elements on the Stage

3m 49s

Importing Elements from Photoshop, Illustrator and Fireworks

15m 8s

Using Keyframes to Build an Automated Slideshow

11m 54s

Section 3: Working with Text

Adding Text with the IME Box

4m 13s

Changing Text Properties: font-family, font-size, font-style, color

4m 10s

Using Web Fonts

4m 57s

Moving and Transforming a Headline

14m 11s

Add Easing for Realistic Motion

6m 22s

Adding Links to Text

4m 48s

Section 4: Using Animate's Timeline

Exploring the Timeline, Elements, Properties, Playhead and Transitions

10m 23s

Timeline Controls: Setting the Playhead and Pin

9m 47s

Using Timeline Labels to Animate a Filmstrip

6m 25s

Keyboard Shortcuts for the Timeline

2m 43s

Section 5: Adding Trigger & Actions

Actions Panel: Creating a Trigger and Action

7m 43s

Inserting Timeline Triggers

3m 4s

Adding Triggers for Smart Phones and Tablets

9m 59s

Section 6: Working with Motion Options

Understanding X,Y Motion

8m 21s

Using and Modifying a Motion Path

6m 22s

Swapping Images in a Transition

2m 55s

Auto-Orienting Elements to the Motion Path

1m 11s

Section 7: Creating & Using Symbols

Why Do You Use Animate Symbols?

10m 4s

Controlling a Symbol's Independent Timeline

8m 18s

Nesting One Symbols inside of Another

7m 34s

Building Buttons with Symbols

9m 48s

Building a Drop-Down Menu with Symbols

4m 49s

Moving Symbols between Animate Projects

2m 3s

Creating a Text Callout for a Symbol

5m 1s

Section 8: Templates

Saving a Project as a Template

4m 14s

Opening a Project from a Template

4m 51s

Section 9: Digging into the Code Animate Creates

How HTML, CSS and JavaScript/jQuery Build Web Pages

7m 34s

Working in the Code Window

6m 37s

Selecting Elements with jQuery

11m 30s

Showing and Hiding with jQuery

7m 17s

Using jQuery to Swap Images

4m 40s

Controlling the Timeline Inside of a Symbol

6m 58s

Using an if() Conditional

8m 44s

Using Switch to Handle Multiple Conditions

5m 29s

Section 10: Publishing Your Animations

Publishing Your Animation

6m 56s

Creating a Poster Image for Your Composition

3m 7s

Creating a Preloader

5m 27s

Using Dreamweaver to Add Animate Compositions

10m 24s

Centering an Animation on the Web Page

3m 31s

Adding More than One Animate Composition to a Page

4m 11s

Creating Responsive Designs

7m 35s

This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Edge Animate CC

Next Lecture

Previous Lecture

Discussion
Table of Contents

Please login to ask a question and view discussion.

Start Learning Now

Our free lessons will get you started (Adobe Flash^® required).
Get immediate access to our entire library.

Membership Overview

Unlimited access to our entire library of courses.
Search and jump to exactly what you want to learn.
*Ask questions and get answers from the community and our teachers!
Practice questions with step-by-step solutions.
Download lesson files for programming and software training practice.
Track your course viewing progress.
Download lecture slides for taking notes.
Learn at your own pace... anytime, anywhere!

Software Training: Edge Animate CC

Section 1: Introduction to Adobe Edge Animate
	Exploring Animate	12:30
	Workspace	5:14
	Examine Files	7:40
	Building an Animation	6:53
Section 2: Creating & Animating Artwork
	Creating Elements with Rectangle, Rounded Rectangle an Ellipse Tools	10:46
	Changing Position and Size Properties	5:24
	Choosing Colors and Gradients	8:01
	Applying Shadows and Filters to Elements	4:49
	Changing Properties over Time with Keyframes	4:56
	Moving and Transforming Elements	5:19
	Using the Ruler and Guidelines on the Stage	3:23
	Arranging, Aligning and Distributing Elements on the Stage	3:49
	Importing Elements from Photoshop, Illustrator and Fireworks	15:08
	Using Keyframes to Build an Automated Slideshow	11:54
Section 3: Working with Text
	Adding Text with the IME Box	4:13
	Changing Text Properties: font-family, font-size, font-style, color	4:10
	Using Web Fonts	4:57
	Moving and Transforming a Headline	14:11
	Add Easing for Realistic Motion	6:22
	Adding Links to Text	4:48
Section 4: Using Animate's Timeline
	Exploring the Timeline, Elements, Properties, Playhead and Transitions	10:23
	Timeline Controls: Setting the Playhead and Pin	9:47
	Using Timeline Labels to Animate a Filmstrip	6:25
	Keyboard Shortcuts for the Timeline	2:43
Section 5: Adding Trigger & Actions
	Actions Panel: Creating a Trigger and Action	7:43
	Inserting Timeline Triggers	3:04
	Adding Triggers for Smart Phones and Tablets	9:59
Section 6: Working with Motion Options
	Understanding X,Y Motion	8:21
	Using and Modifying a Motion Path	6:22
	Swapping Images in a Transition	2:55
	Auto-Orienting Elements to the Motion Path	1:11
Section 7: Creating & Using Symbols
	Why Do You Use Animate Symbols?	10:04
	Controlling a Symbol's Independent Timeline	8:18
	Nesting One Symbols inside of Another	7:34
	Building Buttons with Symbols	9:48
	Building a Drop-Down Menu with Symbols	4:49
	Moving Symbols between Animate Projects	2:03
	Creating a Text Callout for a Symbol	5:01
Section 8: Templates
	Saving a Project as a Template	4:14
	Opening a Project from a Template	4:51
Section 9: Digging into the Code Animate Creates
	How HTML, CSS and JavaScript/jQuery Build Web Pages	7:34
	Working in the Code Window	6:37
	Selecting Elements with jQuery	11:30
	Showing and Hiding with jQuery	7:17
	Using jQuery to Swap Images	4:40
	Controlling the Timeline Inside of a Symbol	6:58
	Using an if() Conditional	8:44
	Using Switch to Handle Multiple Conditions	5:29
Section 10: Publishing Your Animations
	Publishing Your Animation	6:56
	Creating a Poster Image for Your Composition	3:07
	Creating a Preloader	5:27
	Using Dreamweaver to Add Animate Compositions	10:24
	Centering an Animation on the Web Page	3:31
	Adding More than One Animate Composition to a Page	4:11
	Creating Responsive Designs	7:35

Edge Animate CC Centering an Animation on the Web Page

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Discussion

Table of Contents

Start Learning Now

Membership Overview

Software Training: Edge Animate CC

Start Learning Now

Membership Overview

Edge Animate CC Centering an Animation on the Web Page

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Discussion

Table of Contents

Start Learning Now

Membership Overview

Software Training: Edge Animate CC

Available 24/7. Unlimited Access to Our Entire Library.

Searchable Lessons

Get Answers & Community Support

Downloadable Lecture Notes

Study Guides, Worksheets and Extra Example Lessons

Start Learning Now

Membership Overview