Add Html5 Animation To Your Web Pages Using Createjs

Learn how to animate graphics & text on the HTML5 canvas element with basic Javascript & no complicated CSS or HTML.

What you'll learn
Know How to Install, Bootstrap and Test the CreateJS CDN
Learn How To Assess Animation Performance Issues
Understand the Capabilities in the Suite of CreateJS Libraries
Learn to EaselJS Library to Draw on the HTML5 Canvas
Learn to TweenJS Library to Animate on the HTML5 Canvas
Understand Animation Easing Formulas
Know How to Draw and Animate EaselJS Text
Learn How User Mouse Interactions Work
Requirements
Code Editor
Web Browser
Basic Knowledge of Javascript
Basic Knowledge of HTML
Basic Knowledge of CSS
Description
What is this Course About? This course gets you up to speed basic features of the CreateJS library to create HTML5 canvas animations, graphic drawing and user mouse interactions. CreateJS is a popular well supported Javascript library used for web advertising, education, gaming and cartooning. It does not require complicated HTML or CSS to implement. What you create is easily added to other web pages without changes. What is Covered? This is a basic course where you can get a grounding on the CreateJS resources available and the software API architecture. You use a simple learning framework so you can try the API with examples that are easy to follow and grasp. You will learn about the hierarchical display list architecture built into the EaselJS library component of CreateJS. And you will apply the EaselJS mouse interaction model so you can get up and running quickly to control animations with user input. You also work with the HTML5 graphics drawing library found in EaselJS. You will learn how simple and easy to create HTML5 animations with the CreateJS tweening library component called TweenJS. Who Can Take this Course? This course is for those who know Javascript basics and are beginning to learn about the CreateJS suite of libraries. This course does not require advanced programming skills. Any programming is explained and supported so you can succeed. If you have Actionscript 3 background, you will find comfort in seeing that API finding a new home in these libraries. But Actionscript experience is not necessary for the course. What Materials Are Included? The course includes step by step video presentations along with starting and completed practice files used in the videos. Getting Help I enjoy helping so make use of the Udemy question area. "The instructor does not assume you know or understand everything. On the contrary, he explains the reasons behind every single step." – Alonso Ramos I am behind you succeeding so use me. No question too simple. No question too complicated. Challenge me! Often questions result in new examples and demos which are posted in the Additional Examples Lesson for everyone to see. Hope you enjoy the course and please let me know anything I can help you do.

Overview

Section 1: Introduction and Setup

Lecture 1 The Suite Of Libraries

Lecture 2 HTML Practice File

Lecture 3 Installation and Bootstrapping

Section 2: Drawing Shapes and Tweening 101

Lecture 4 Introducing The EaselJS Library

Lecture 5 How to Draw A Circle in EaselJS

Lecture 6 Introducing TweenJS and Ticker

Lecture 7 How to Animate a Shape With TweenJS

Section 3: Tweening Beyond The Basics

Lecture 8 How to Change and Test Frame Rates

Lecture 9 How to Reverse a Tween Using Chaining

Lecture 10 How To Add a Delay In A Tween

Lecture 11 Introducing Tween Easing

Lecture 12 How to Add Easing to a Tween

Section 4: Drawing Shapes With Gradient Fills

Lecture 13 How to Add a Linear Gradient Background

Lecture 14 Introducing Radial Gradients in EaselJS

Lecture 15 How to Add a Radial Gradient Fill

Section 5: ABCs of Displaying Text

Lecture 16 Introducing Text in EaselJS

Lecture 17 How to Add Text and Shadow with EaselJS

Lecture 18 Making a Rotational Tween for EaselJS Text

Lecture 19 Creating a Fly In Fly Out Tween for EaselJS Text

Lecture 20 Styling EaselJS Text Over Tweens

Section 6: Using Strokes and Fills with Shape Drawing Methods

Lecture 21 Introducing Strokes In Shape Drawing Methods

Lecture 22 Adding Strokes to Shape Drawing Methods

Lecture 23 Adding Fills to Stroke Perimeter Shapes

Section 7: Stage Mouse Event Handling

Lecture 24 How to Handle Stage Mouse Events

Lecture 25 Controlling a Rotation Tween Using Stage Mouse Events

Lecture 26 Drag and Drop Using Stage Mouse Events

Lecture 27 Drag and Drop Tween Using Stage Mouse Events

Section 8: Using Ticker For Animation

Lecture 28 Basics of Using Ticker For Animation

Lecture 29 Adding a Reverse Loop to the Basic Ticker Animation

Lecture 30 Adding a Duration to the Basic Ticker Animation

Section 9: Positioning and Tweening with Shape Drawing Methods

Lecture 31 Relative Shape Positions and Stroke Perimeters

Lecture 32 Tweening Shapes with Stroke Perimeters

Section 10: Final Section

Lecture 33 Additional Examples

Lecture 34 Wrap-Up Summary

Web Animators,Actionscript Developers,Web Developers