Add HTML5 Animation to Your Web Pages Using CreateJS

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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