Add HTML5 Animation to Your Web Pages Using CreateJS

Master HTML5 canvas animations with CreateJS and JavaScript. No complex CSS needed. Ideal for beginners looking to learn interactive web graphics.

  • Overview
  • Curriculum
  • Instructor
  • Review

Brief Summary

This course teaches you how to create fun animations on the HTML5 canvas using Javascript and the CreateJS library. You don’t need to be a tech genius—just some basic coding know-how will do the trick!

Key Points

  • Learn to animate graphics & text on HTML5 canvas.
  • Get familiar with CreateJS and its features.
  • Understand EaselJS for display list architecture.
  • Use TweenJS for easy HTML5 animations.
  • No advanced programming skills needed.

Learning Outcomes

  • Know how to use the CreateJS library for animations.
  • Create graphics directly on the HTML5 canvas.
  • Implement mouse interactions in your animations.
  • Understand performance assessment for animations.
  • Feel confident with basic Javascript in web projects.

About This Course

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

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.

  • 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

Course Curriculum

2 Lectures

Instructor

Profile photo of Lon Hosford
Lon Hosford

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

Review
4.9 course rating
4K ratings
ui-avatar of Kent Lavallie
Kent L.
5.0
3 years ago

I have to port a ton of as3 flash. this may be the way

  • Helpful
  • Not helpful
ui-avatar of Kyle Van Vleck
Kyle V. V.
4.0
8 years ago

Overall good! Teaches all the canvas/createjs basics and the instructor explains each topic thoroughly. You will be able to start making your own creations after finishing this course and have the fundamental knowledge to continue to explore other components using the great documentation on the createjs site.

My only big complaint is the lack of any mention or coverage of key concepts like bitmaps, sprite sheets, sound, and other advanced topics. Petty gripes include the long intro on every single video. Most viewers are watching each video back to back. The intro should be limited to the first vid of the section. Also, there are way too many videos and time devoted to the simple concept of positioning shapes with outlines.

Otherwise, great course. Make sure you download the practice files and code along with the instructor to really absorb the material.

  • Helpful
  • Not helpful
ui-avatar of Topher Reynolds
Topher R.
3.5
9 years ago

As far as content goes, excellent! As for performance, only okay, here's why:

The content is great, and straight to the point... or at least it's almost straight to the point.

I feel the start and end of the videos are (especially the end) is completely not needed... if you want to thank people for watching your course, then you should add a final "thank you" outro video at the end of the course... not at the end of each video.
As for the start of the videos, you keep repeating the same thing to watch previous videos for previous content instead of hopping straight into what the video is about.
People are smart these days, they're going to understand that, since they're watching a "course" and not a "single video", that they'll need to refer to previous content/videos if needing an explanation of what happened before.
I'm afraid that the instructor is focusing alot on a template for creating a tutorial video, instead of realizing this is a course full of tutorial, step-by-step videos. Alot of the "templatized tutorial video" approach can be cut out to skim this course down to exactly what it needs and by doing so, I think a lot more can be covered in a shorter amount of time.
Now, I'm no tutorial master, what you're doing is great... but if you sit down to watch the course (and not a single video, which I believe is going to be the majority of people... at least on their first watch-through of the course), you'll notice that it's very repetitive and longer than it needs to be. Being repetitive and long isn't a "bad thing", but I think there's a time and place for that... such as repeating valuable information that you want the students to remember (such as "again, make sure to add this child to the stage" each time you create a new shape or object).

Other than that, I recommend this course :) Great Job!

  • Helpful
  • Not helpful
ui-avatar of Alonso Ramos
Alonso R.
5.0
11 years ago

The instructor does not assume you know or understand everything. On the contrary, he explains the reasons behind every single step.

  • Helpful
  • Not helpful
Leave A Reply

Your email address will not be published. Required fields are marked *

Ratings

Courses You May Like

Lorem ipsum dolor sit amet elit
Show More Courses