The Journey

CreateJS

To start on my journey I wanted to take the time to learning something about making interactive web pages. This brought me to CreateJS, So I decided to learn what CreateJS is After visiting the CreateJS site, and going through the getting started with CreateJS tutorials.

I took a course on Udemy called
Add HTML5 Animation to Your Web Pages Using CreateJS
From the course I learned all about the Capabilities, and Architecture of the CreateJS suite.

Finally I finished with code implementation that encompassed each of the core libraries. This was done in a game called Claws I made while taking a another course for CreateJS
HTML5 and CreateJS Tutorial - Learn Interactive Development. The game is object oriented and includes collision detection, for when the hero collides with the egg and nest.

If you'd like to see all the code I produced while learning CreateJS check it out on GitHub

Understanding EaselJS

Understanding TweenJS

Understanding SoundJS

Understanding PreloadJS

CreateJS

What is CreateJS?

CreateJS is a suite of modular libraries and tools which work together (independently or mixed and matched) to create interactive content on open source technologies via HTML5
CreateJS Official Site

In other words, basically it’s a 4 key libraries that work together to make some really cool things happen!

The Libraries

EaselJS

What is EaselJS?

A object oriented javascript library that makes working with the HTML5 Canvas element easy.
EaselJS Official Site

The 3 basic classes used to draw on HTML5 canvas are:

  • Stage
  • Shape
  • Graphics

TweenJS

What is TweenJS?

A simple powerful JavaScript library for tweening and animating HTML5 and JavaScript properties.
TweenJS Official Site

The library contains a tween class

  • This class is used to animate properties of display objects such as shapes created with EaselJS
  • Tween instances change properties over time duration when a stage updates these changes are shown

SoundJS

What is SoundJS?

A JavaScript library that provides a simple API, and powerful features to make working with audio a breeze.
SoundJS Official Site

SoundJS abstracts HTML5 sound implementation, making adding consistent cross-browser sounds to your games or rich experiences much easier.

PreloadJS

What is PreloadJS?

A JavaScript library that lets you manage and co-ordinate the loading of assets and data
PreloadJS Official Site

Screen Shots

My Recent Work

Here are some screen shots of code I produced while learning to use the CreateJS suite.

Image

EaselJS

Using the canvas

Image

EaselJS

Add AdobeAnimate HTML5 canvas to the stage

Image

TweenJS

Moving a ball

Image

TweenJS

Moving a character across the screen

Image

SoundJS

Listening to the thunder

Image

SoundJS

Egg splatting when not caught (very annoying :))

Image

PreloadJS

Preloading images

Image

PreloadJS

Loading multiple items to the manifest.

Image

Certificate

Add HTML5 Animation to Your Web Pages Using CreateJS

Image

Certificate

HTML5 and CreateJS Tutorial - Interactive Development