1h 28m – Beginner
EaselJS is a free JavaScript library that makes creating interactive web content for HTML5 more straightforward and intuitive. This course transitions web designers, animators, and content creators who may be used to working with Adobe Flash and ActionScript to this new open web standard. Author Ray Villalobos first explains the capabilities of the EaselJS framework and the HTML5 Canvas element, and what they mean for web design. The rest of the course shows how to use EaselJS’s helper classes and hierarchal display list to load images, draw, animate, and handle mouse input from visitors.
Topics include:
Installing EaselJS
Understanding how Canvas draws and animates
Drawing lines and strokes
Drawing with graphic primitives
Using the chaining and compacting commands
Animating shapes
Working with text
Importing bitmaps and vector graphics
Working with sprite sheets
Handling mouse events
Introduction – 3m 37s
Welcome – 55s
What you should know – 1m 26s
Using the exercise files – 1m 16s
1. Setting Up – 9m 45s
Getting to know EaselJS and CreateJS – 2m 46s
Understanding browser support – 1m 15s
Creating a template – 3m 7s
Installing EaselJS – 2m 37s
2. Drawing Graphics – 36m 35s
Reviewing how Canvas draws and animates – 6m 3s
Comparing Canvas vs. EaselJS – 5m 26s
Understanding basic fills and colors – 7m 57s
Defining lines and strokes – 6m 59s
Drawing with other graphic primitives – 7m 14s
Chaining and compacting drawing commands – 2m 56s
3. Using Display Objects – 28m 40s
Transforming and animating shapes – 8m 24s
Working with text – 3m 0s
Importing bitmaps and vector graphics – 4m 16s
Animating bitmaps with math – 4m 58s
Using sprite sheets for animation – 8m 2s
4. Handling Input – 8m 45s
Tracking mouse movement – 3m 55s
Handling mouse events – 4m 50s
Conclusion – 1m 35s
Next steps – 1m 35s