Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Add HTML5 Animation to Your Web Pages Using CreateJS

Name: Add HTML5 Animation to Your Web Pages Using CreateJS
Rating: 4.4 (36 reviews)

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

Created byLon Hosford

Last updated 3/2017

English

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

Course content

10 sections • 34 lectures • 3h 21m total length

The Suite Of Libraries2:53
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
HTML Practice File2:25

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.
Installation and Bootstrapping4:12
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.

Introducing The EaselJS Library3:41

This lesson is background information for using Easel JS to draw on the HTML5 canvas element.
How to Draw A Circle in EaselJS4:55

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.
Introducing TweenJS and Ticker2:37

This lesson is background information for using the Tween JS library and the Easel JS Library Ticker class.
How to Animate a Shape With TweenJS4:50

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 Change and Test Frame Rates3:39

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 Reverse a Tween Using Chaining2:02

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 Add a Delay In A Tween1:49

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.
Introducing Tween Easing3:16

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.
How to Add Easing to a Tween2:55

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 a Linear Gradient Background4:45

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.
Introducing Radial Gradients in EaselJS3:09

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.
How to Add a Radial Gradient Fill3:28
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

Introducing Text in EaselJS4:56
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.
How to Add Text and Shadow with EaselJS5:23
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.
Making a Rotational Tween for EaselJS Text5:26
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.
Creating a Fly In Fly Out Tween for EaselJS Text7:19
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.
Styling EaselJS Text Over Tweens3:54
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.

Introducing Strokes In Shape Drawing Methods4:33
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.
Adding Strokes to Shape Drawing Methods12:59
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 Fills to Stroke Perimeter Shapes14:16
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.

How to Handle Stage Mouse Events8:16
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.
Controlling a Rotation Tween Using Stage Mouse Events12:36
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.
Drag and Drop Using Stage Mouse Events11: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 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 Tween Using Stage Mouse Events10:13
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.

Basics of Using Ticker For Animation7:45
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.
Adding a Reverse Loop to the Basic Ticker Animation5:01
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 Duration to the Basic Ticker Animation5:12
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.

Relative Shape Positions and Stroke Perimeters12:04
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.
Tweening Shapes with Stroke Perimeters17:29
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

Math is Fun

Wikipedia

Additional Examples0:04

This section is for uploading additional examples that are helpful to answering your questions.
Wrap-Up Summary2:31
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

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.

Who this course is for:

Web Animators
Actionscript Developers
Web Developers

Add HTML5 Animation to Your Web Pages Using CreateJS

What you'll learn

Explore related topics

Course content

Introduction and Setup3 lectures • 10min

Drawing Shapes and Tweening 1014 lectures • 16min

Tweening Beyond The Basics5 lectures • 14min

Drawing Shapes With Gradient Fills3 lectures • 11min

ABCs of Displaying Text5 lectures • 27min

Using Strokes and Fills with Shape Drawing Methods3 lectures • 32min

Stage Mouse Event Handling4 lectures • 42min

Using Ticker For Animation3 lectures • 18min

Positioning and Tweening with Shape Drawing Methods2 lectures • 30min

Final Section2 lectures • 3min

Requirements

Description

Who this course is for: