Create an Animated Star Field with Edge Animate

Lynda

Course Summary

Create a randomized animation with just a few lines of JavaScript and Edge Animate.

+

Course Description

Learn how to create a randomized animation with just a few lines of JavaScript and Edge Animate. This course focuses on creating an animated star symbol in Edge, dynamically generating instances on the stage, then setting each one to randomly position itself and play at random times. Author Chris Converse teaches you how to build randomized animations to create an effect that is always fresh and enticing.

This course was created and produced by Chris Converse. We are honored to host this content in the lynda.com library.
Topics include:

Creating web graphics

Adding artwork to an Edge composition

Setting measurements to ensure a responsive design

Creating nested symbols

Animating the rotation and opacity of an object

Creating a simple star from an ellipse

Randomizing start times and positions

Setting stage properties with JavaScript

Dynamically generating symbols with JavaScript

+

Course Description

Learn how to create a randomized animation with just a few lines of JavaScript and Edge Animate. This course focuses on creating an animated star symbol in Edge, dynamically generating instances on the stage, then setting each one to randomly position itself and play at random times. Author Chris Converse teaches you how to build randomized animations to create an effect that is always fresh and enticing.

This course was created and produced by Chris Converse. We are honored to host this content in the lynda.com library.
Topics include:

Creating web graphics

Adding artwork to an Edge composition

Setting measurements to ensure a responsive design

Creating nested symbols

Animating the rotation and opacity of an object

Creating a simple star from an ellipse

Randomizing start times and positions

Setting stage properties with JavaScript

Dynamically generating symbols with JavaScript

+

Course Syllabus

Introduction
Previewing the final project
About the exercise files
Setting up the project folders
1. Creating Web Graphics
Creating the web graphic for the graphical star
Creating the sky artwork in Photoshop
Creating the mountain in Fireworks
2. Setting Up an Edge Animate Project
Creating a new Edge Animate project
Adding artwork to your composition
Setting measurements for responsive design
3. Creating and Animating the Graphical Star
Creating nested symbols
Animating the opacity for the graphical star
Animating the rotation for the graphical star
4. Creating and Animating the Simple Star
Creating a simple star with an ellipse
Converting the simple star animation to a symbol
5. Randomizing the Animated Stars
Randomizing the start time of each animated symbol
Randomizing the position of each animated symbol
Copying the timeline trigger to the simple star symbol
6. Generating Multiple Stars with JavaScript
Setting properties for the starfield stage
Generating the star symbols dynamically
Conclusion
Where to go from here