Add HTML5 Animation to Your Web Pages Using CreateJS

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.

Who is the target audience?

• Web Animators
• Actionscript Developers
• Web Developers

Requirements

• Code Editor
• Web Browser
• Basic Knowledge of Javascript
• Basic Knowledge of HTML
• Basic Knowledge of CSS

What Will I 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

Curriculum For This Course Expand All Collapse All 34 Lectures 03:21:34 + – Introduction and Setup 3 Lectures 09:30 This is a short overview of the CreateJS suite of libraries for the videos in Basic Animation in CreateJS Series.
Resources:

• CreateJS 
  
• CreateJS library download link 
  
• CreateJS GITHub link 
  

The Suite Of Libraries Preview 02:53 This lesson examines the base HTML, CSS and Javascript in the practice files for this series on basic animation using Create JS.  Download the Practice Files if you want to follow on your own computer and experiment with the examples.  HTML Practice File 02:25 This lesson examines the installation and bootstrapping of CreateJS libraries for use in this series. Javascript is configured to connect to the CreateJS CDN. You learn to verify the CreateJS library is working. 

Resource links:

• CreateJS library download

Download the Practice Files if you want to follow on your own computer and experiment with the examples.  Installation and Bootstrapping 04:12 + – Drawing Shapes and Tweening 101 4 Lectures 16:03 This lesson is background information for using Easel JS to draw on the HTML5 canvas element. Introducing The EaselJS Library Preview 03:41 This lesson uses Easel JS to draw a circle on the HTML5 canvas element. You learn about adjusting for the registration point of the Easel JS Shape object when added to a container and the impact of Graphics class has on positioning on the stage.  Download the Practice Files if you want to follow on your own computer and experiment with the examples.  How to Draw A Circle in EaselJS Preview 04:55 This lesson is background information for using the Tween JS library and the Easel JS Library Ticker class. Introducing TweenJS and Ticker 02:37 This lesson shows how to use the Tween JS library to animate a Shape on the HTML5 canvas. You use the "get" and the "to" methods animate the x and y properties to move the shape diagonally across the HTML5 canvas.  Download the Practice Files if you want to follow on your own computer and experiment with the examples.  How to Animate a Shape With TweenJS Preview 04:50 + – Tweening Beyond The Basics 5 Lectures 13:41 This lesson shows how to adjust the EaselJS Ticker class frame rates and to test animation performance. You compare the default animation rate of 20 times per second with a top rate of 60 times per second. Then you see how to determine what frame rate the web browser is performing.  Download the Practice Files if you want to follow on your own computer and experiment with the examples. 
How to Change and Test Frame Rates 03:39 In this lesson you modify a Tween to reverse the animation back to its starting point.  Download the Practice Files if you want to follow on your own computer and experiment with the examples.  How to Reverse a Tween Using Chaining 02:02 In this lesson you modify a Tween to include a delay during the animation. Download the Practice Files if you want to follow on your own computer and experiment with the examples. 
How To Add a Delay In A Tween 01:49 This lesson is background information for using the Ease class in the Tween JS library.

It covers the concept of tweening formulas and how they are applied to TweenJS animations.

The CreateJS testing web page is visited for learning how to understand an easing formula works frame by frame. Introducing Tween Easing Preview 03:16 In this lesson you apply TweenJS easing formulas to an animation.  Download the Practice Files if you want to follow on your own computer and experiment with the examples. 
How to Add Easing to a Tween 02:55 + – Drawing Shapes With Gradient Fills 3 Lectures 11:22 This lesson shows how to create a linear gradient fill as static background for an animation.

The EaselJS beginLinearGradientFill method arguments are explained and demonstrated.

You see how layering works in EaselJS Container classes. Download the Practice Files if you want to follow on your own computer and experiment with the examples.  How to Add a Linear Gradient Background 04:45 This lesson introduces the EaselJS Graphics class beginRadialGradientFill method.

The EaselJS beginRadialGradientFill method arguments are explained and demonstrated.

If you rather jump right into the code examples, skip to the "How to Add a Radial Gradient Fill" lesson in this course. Introducing Radial Gradients in EaselJS 03:09 In this video we are using a two color radial gradient fill on the animated circle to make it look more celestial.

The exercise replaces the beginFill method used for the circle with the beginRadialGradientFill method.

Various color combinations are used to get different solar effects.

Resource links:

• Ulex (Gorse Flower) https://en.wikipedia.org/wiki/Ulex

How to Add a Radial Gradient Fill 03:28 + – ABCs of Displaying Text 5 Lectures 26:58 This lesson gives you a background overview of ways to include text in EaselJS.

We specifically look at the EaselJS Text class and Shadow class that we will use in the exerise lessons coming up.
Introducing Text in EaselJS Preview 04:56 In this lesson we are adding text to the stage using the EaselJS Text class.

We will apply basic CSS styling and apply the EaselJS Shadow class.

And we will dynamically center text horizontally and vertically using the text size measuring methods.
Download the Practice Files if you want to follow on your own computer and experiment with the examples. How to Add Text and Shadow with EaselJS 05:23 This lesson applies TweenJS to animate EaselJS text with a focus on rotational tweening.

Various TweenJS easing methods are applied for effect.

We learn how to work with registration points to reposition rotational center points.

And dynamic positioning is revisited for the impact of changing a Display Object's registration point. Making a Rotational Tween for EaselJS Text Preview 05:26 In this lesson we examine a common animation build refered to in Powerpoint as fly in and fly out and in KeyNote as move in and move out.

Using TweenJS we will do a fly in of EaselJS Text from above the canvas to its center and apply some easing.

Similarly will do a fly in from the left to the center and coordinate timing with the animated sunShape.

Finally we will add a fly out also coordinated with the sunShape animation. Creating a Fly In Fly Out Tween for EaselJS Text 07:19 In this lesson you work with the EaselJS Text class's alpha, outline and shadow properties.

We will create an overlay effect with the text and the sun shape animation.

To follow along, download and uncompress the practice files found in the supplemental materials section.Open the start folder's index.html file and save it in the practice folder as index.html.

If you find any of the contents discussed the starting folder's practice file are unfamilar, you will find all the details covered in previous lessons.
Styling EaselJS Text Over Tweens 03:54 + – Using Strokes and Fills with Shape Drawing Methods 3 Lectures 31:48

Bonus: The practice files completed folder contains all the examples used in the video.

This lesson gives you an overview of using strokes in the EaselJS Graphics class predefined shape drawing methods.

These are the drawCircle, drawEllipse, drawRect, drawRoundedRect, drawRoundRectComplex and drawPolyStar.

You survey all the stroke drawing methods and divide the learning process between those that apply to predefined graphic shape drawing methods and those more useful for custom graphic drawing.

The concept of the drawing path is introduced and you see how to include a path when drawing predefined shapes.

You look examine the arguments for the beginStroke and setStrokeStyle methods for drawing strokes for the predefined graphic shape drawing methods.

You are also investigate the order of using the beginStroke, setStrokeStyle, beginFill, endFill and endStroke methods when used with the predefined graphic shape drawing methods.

This lesson prepares you for the other lessons in this section and future sections focused on strokes and fills.

Introducing Strokes In Shape Drawing Methods Preview 04:33

In this lesson you work with strokes using the EaselJS Graphics class shape drawing methods drawCircle and drawRect.

You use the Graphics class beginStroke, setStrokeStyle and endStroke methods to define when and how strokes are drawn.

You learn how to make the distinction between a stroke and a path when using the shape drawing methods.

You also see the impact that stroke thickness has on positioning EaselJS Shape objects when drawing methods are used to define their perimeter.

Finally we will establish some best practices for our course when using the beginStroke, setStrokeSyle and endStroke methods.

Adding Strokes to Shape Drawing Methods 12:59

In this lesson you will learn how strokes and fills work together when drawing and positioning EaselJS Shape objects that have stroke perimeters.

We will use the EaselJS Graphics shape drawing methods drawCircle and drawRect along with the beginStroke, setStrokeStyle and endStroke methods.

And the fill methods beginFill and endFill.

Finally we will add course best practices for using stroke and fill methods on adjacent lines.

Adding Fills to Stroke Perimeter Shapes 14:16 + – Stage Mouse Event Handling 4 Lectures 42:06

In this lesson you focus on using the stage object's stagemousedown, stagemouseup and stagemousemove events.

You investigate using the MouseEvent class properties type, stageX and stageY.

Using the addEventListener method you will build the stage mouse event handlers to display the event's

MouseEvent object data on stage and in the web browser console window.

And you will compare the generated MouseEvent data as the stage mouse events are fired.

How to Handle Stage Mouse Events Preview 08:16

In this lesson you experiment with stage mouse events to control a TweenJS rotation animation.

You will start and stop the rotation tween.

Reverse the rotation direction and change its speed in response to the Stage object's stagemousedown and stagemouseup events.

You use the addEventListener method along with the MouseEvent class's type and stageX properties.

You also work with the Tween get method's paused and override configuration properties.

Controlling a Rotation Tween Using Stage Mouse Events 12:36

CreateJS 12/12/2013 Release CDN issue has a bug in CreateJS for the stage.getObjectUnderPoint method is returning null. That is fixed in the 5/21/15 release. This files for this lecture are also updated to use the new release.

In this lesson you work with the stage mouse to drag and drop an EaselJS shape object.

You use the Stage object's stagemousedown, stagemouseup, and stagemousemove events along with addEventListener method and the MouseEvent class's type, stageX and stageY properties.

And you will use the Stage class's mouseMoveOutside property to track the mouse movements outside the stage boundaries.

You also use the getObjectUnderPoint method for detecting the top layer object under the mouse.

Drag and Drop Using Stage Mouse Events 11:01

CreateJS 12/12/2013 Release CDN issue has a bug in CreateJS for the stage.getObjectUnderPoint method is returning null. That is fixed in the 5/21/15 release. This files for this lecture are also updated to use the new release.

In this lesson we will extend the "Drag and Drop Using Stage Mouse Events" lesson to include a tween.

The tween will run when the circle is dropped.

You will add some logic to control when the tween can be started.

This will involve using the Tween class "call" method.

And you will add logic to create a variable speed based on mouse position.

We also look at a mouse trap that results in multiple versions of the same tween running undetected.

Drag and Drop Tween Using Stage Mouse Events 10:13 + – Using Ticker For Animation 3 Lectures 17:58

This lesson introduces you to building animations without the TweenJS library.

Instead you learn how to use the Ticker class tick event handler.

The example you build in this lesson animates a Shape's x property across the stage.

And you will use the Ticker class's getTicks and getTime static methods.

These methods give you useful timing information while your animation is playing.

Basics of Using Ticker For Animation Preview 07:45

This lesson expands the basic Ticker animation.

You will create a continuous animation loop like the TweenJS loop configuration property.

And during the loop the animation repeatedly reverses direction.

Adding a Reverse Loop to the Basic Ticker Animation 05:01

In this lesson you work through how to animate property changes computed based on a given duration.

You will compute the velocity needed to move a distance for a given duration.

This is similar to the duration property you use in the TweenJS "to" method.

Only we are emulating it in pure Javascript for our basic Ticker animation.

Adding a Duration to the Basic Ticker Animation 05:12 + – Positioning and Tweening with Shape Drawing Methods 2 Lectures 29:33

In this lesson you work on the relative positioning of EaselJS Shape objects that have stroke perimeters.

We build the stroke perimeters using the EaselJS Graphics shape drawing methods drawCircle and drawRect along with the beginStoke, setStrokeStyle and endStroke methods.

You learn how to use offsets for perimeter stroke thicknesses to relatively position multiple shape objects on stage.

You also are challenged to think about how variables can be used to describe shape object relative positioning expressions.

Relative Shape Positions and Stroke Perimeters 12:04

This lesson focuses on tweening EaselJS Shape objects that have stroke perimeters drawn by the EaselJS Graphics class shape drawing methods.

You learn how stroke perimeters and shape drawing method arguments impact tweening.

We use the drawCircle and drawRect shape drawing methods for building the stroke perimeters in combination with the beginStoke, setStrokeStyle and endStroke methods.

Then you will tween using the EaselJS Shape object alpha, rotation, x and y properties.

The tweens will emphasize the relative position offsets between shape objects as well as the stage container boundaries.

And you utilize the Pythagorean Theorem for handling rotated square rectangle positions.

Pythagoras' Theorem Additional Resources

1. Math is Fun
2. Wikipedia

Tweening Shapes with Stroke Perimeters 17:29 + – Final Section 2 Lectures 02:35

This section is for uploading additional examples that are helpful to answering your questions.

Additional Examples 00:04

A full summary of the topics we covered in the course.

I have produced a new course for web beginners if you want to also do some server side coding.

Learn Stripe PHP: Make Checkout Webpages
Start to accept credit cards on your PHP web site for single item orders and get introduced to the Stripe platform.

Here is a coupon link to the course if you are interested.
http://bit.ly/1WcJwBB

I have another in the works for release end of August 2015 Create a Subscription Service with Stripe and PHP

Wrap-Up Summary Preview 02:31