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.
4.4 (8 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
298 students enrolled
$19
$95
80% off
Take This Course
  • Lectures 34
  • Length 3.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2013 English

Course 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.

What are the requirements?

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

What am I going to get from this course?

  • 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

What is the target audience?

  • Web Animators
  • Actionscript Developers
  • Web Developers

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction and Setup
02:53
This is a short overview of the CreateJS suite of libraries for the videos in Basic Animation in CreateJS Series.

Resources:
02: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. 
04: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. 
Download the Practice Files if you want to follow on your own computer and experiment with the examples. 
Section 2: Drawing Shapes and Tweening 101
03:41
This lesson is background information for using Easel JS to draw on the HTML5 canvas element.
04: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. 
02:37
This lesson is background information for using the Tween JS library and the Easel JS Library Ticker class.
04: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. 
Section 3: Tweening Beyond The Basics
03: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. 
02: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. 
01: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. 
03: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.
02: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. 
Section 4: Drawing Shapes With Gradient Fills
04: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. 
03: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.
03: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:
Section 5: ABCs of Displaying Text
04: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.
05: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.
05: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.
07: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.
03: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.
Section 6: Using Strokes and Fills with Shape Drawing Methods
04: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.

12: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.

14: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.

Section 7: Stage Mouse Event Handling
08: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.

12: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.

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 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.

10: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.

Section 8: Using Ticker For Animation
07: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.

05: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.

05: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.

Section 9: Positioning and Tweening with Shape Drawing Methods
12: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.

17: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

  1. Math is Fun
  2. Wikipedia
Section 10: Final Section
Article

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

02: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






Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Lon Hosford, Web Developer Coach and Web Site Consultant

Independent software developer with practical engineering project experience for clients such as AT&T, Avis, Bristol Myers Squibb, Ortho BioTech, Chanel, Avaya, Green Birdie Video, Aztec Learning Systems and Verizon Wireless. Lon is well known for translating client needs into useful applications.

An interesting aspect of Lon's consulting work was the creation of industry jobs that did not exist before. That lead to hiring and training college students who were taught dead technologies at a time academia was woefully behind on the paradigm shifts in personal computing, the internet and today the distributed device environment often called mobile.

Lon has taught thousands of students internet web development, animation and programming topics over two decades both privately and academically. He developed Multimedia Associated Degree program and courses for Raritan Valley Community College in the 1990s at a time when Macromedia Authorware and Director were tools. He is the founder, developer and educator for Raritan Valley Community College Web Developer Certification program also having its roots in the 1990s at the dawn of the internet. He also was a key curriculum developer and instructor for one of the Nation's first Web Developer Certification program offered through New Jersey Institute of Technology. Lon was also a technology instructor at the University of Phoenix Online.

Lon over the years has produced educational video for topics including Paradox, Cobol, Java, Jasmine, C, C++, Linux, Flash, Cocos 2d and HTML. These courses were distributed and taught in Universities internationally when global was an emerging term.

Ready to start learning?
Take This Course