Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Transforming and animating shapes

From: EaselJS First Look

Video: Transforming and animating shapes

Transforming shapes with EaselJS is done through a class called the DisplayObject. However, you don't actually access that class directly. Instead, you work with DisplayObject subclasses, like Text, Bitmap, and Shape. When you use one of these subclasses, you have access to a variety of traditional transformations, like Rotation, Scaling, et cetera. So let's take a look. So I'm starting off with a basic HTML template. If you haven't already, make sure you watch the video on Creating a Template and Installing EaselJS.

Transforming and animating shapes

Transforming shapes with EaselJS is done through a class called the DisplayObject. However, you don't actually access that class directly. Instead, you work with DisplayObject subclasses, like Text, Bitmap, and Shape. When you use one of these subclasses, you have access to a variety of traditional transformations, like Rotation, Scaling, et cetera. So let's take a look. So I'm starting off with a basic HTML template. If you haven't already, make sure you watch the video on Creating a Template and Installing EaselJS.

If we go to our script file, we notice that I have a canvas object, as well as a stage and a shape. There's already a shape in the canvas, so if you need to review how to draw graphics, make sure you check out the chapter on Drawing Graphics. So after you have a shape, you can apply some additional transformations to that shape by just calling the different DisplayObject methods. So I can do shape.rotation=, and I can use degrees for rotations, so let me type in 30, and I'll Refresh, and you can see that it's rotated; however, it may not be what you expected.

Like with canvas, rotation is done against a registration point, and that registration point is always by default at the top left of the stage. Now we can easily move that registration point with the regX and regY properties of DisplayObjects. Before I do that, though, transformations are more easily seen in an animation, so I'm going to add an animation. If you want to review how that's done, make sure you check out the video on Comparing Canvas versus EaselJS. So I'm going to rotate this object eight times through each tick, and then I'm going to update the stage.

So I don't need this stage.update right here, because the stage is going to be updated 30 times per second. I also don't need this rotation anymore, because I'm changing the rotation in every tick. So I'm going to Save and then Refresh, and you can more clearly see that, that rectangle is rotated around this point of origin right here, or this registration point. By making the origin of this object when we drew it, 50 and 50, we've actually moved the object 50 pixels from the left and 50 pixels from the top. So that object is already down a little bit into the stage.

So in order to fix this animation so that it happens around the center, we need to move the registration point of this object. So we're going to move the registration point to 100x100. So let me go ahead and Save. Now it is rotating around the center of the object. Let's go ahead and move this to another position in the stage. So you can see that we can reposition this object wherever we want just by changing the X and Y property. Now why was the registration set to 100x100? When we drew this object, we drew it at a position that was 50 pixels from the left and 50 pixels from the top, and then we told EaselJS that we wanted this object to be 100 pixels by 100 pixels.

Because we had already moved it, to make the registration point in the center of the object, we have to go 50 pixels in, plus half of the width of the object, so that's 50, plus another 50, so that's 100x100. Sometimes this notation can be a little confusing, so you've got a couple of options. Number one, you could set the original position of the object at the top left of the stage. If you do this, we'll Refresh, now the object is rotating around this point, because we've told it to go in 100x100 pixels.

You can come over here and change that to 50, 50, and this is half of the width of the object, the width and height are 100 right now, and if we Save that, then that works really well. If you don't want to use registration at all, you can just delete these two registration points, then automatically position the object so that it's centered already at the 00 point. That means the object will be at -50, -50, and be 100 pixels wide by 100 pixels tall. If I Save that, now the object rotates around the center and we don't need to use the registration commands.

So that's pretty cool! You can actually animate all the different kinds of properties of the DisplayObject, so make sure you check this documentation right here for some of the other options. You see that you have alpha; you also have stuff like regX and regY, the rotation is right here, plus you have a scale factor that you can adjust, as well as skewing and other things. So if you're used to using something like Adobe Flash, these properties will be very familiar to you. Let's go ahead and try some of them. So let's go ahead and move this object horizontally by 1 pixel every grain.

So I'll Save this and Refresh, you can see now the object is moving very slowly. So plus plus in programming languages means that you're going to increment this by 1 every time. So this is the same thing as writing shape.x = shape.x + 1. If you want to do more than one, then you can use +=, just like rotation, do += 5 pixels every time you would do that, so that's moving a lot faster. And the same thing for the Y. So just adjust the Y position by 5 pixels and rotate, and now you could see it moving diagonally.

Now you can also scale things in the X and Y direction by using scaleX and scaleY. A scale of .5 is half the size of the original object and a scale of 2 times is twice the size. So watch how you scale these. Let's go ahead and try some of those. I'll get rid of the position adjustment, so that's in the same place. Then I can come over here and say shape.scaleX = 2. Let's see what that does, and now the object is twice the width.

And I can do the same thing for Y with scaleY, and now the object is twice as big in every dimension. You can also do .5 to make it half as big, and you can tell that everything that EaselJS draws is in vectors, so it doesn't matter what size we make that object, it scales very nicely. You can animate that if you want to. So we could do something like multiply this by 1.1, and I'm going to Refresh, and you could see that it's growing a little bit through every frame of the ticker.

So another useful transformation is alpha. Let me go ahead and get rid of this, Save this, and Refresh. You can set the alpha of a shape by typing in the alpha property and sending it to a number from 0-1. So if we say .5, then the alpha will be 50% of whatever the color of the object was before. If we say 0, then the object will be completely invisible; and 1, completely opaque. So of course you can animate the alpha just like you can any other property. We can do something like times =.8, refresh that, and you can see the object kind of disappear.

So let's get rid of that so we can see our object. You can also skew a shape, and skewing is really an amount you want to skew an object by. So it's not a number from 1-0, like scale and alpha. You usually have to skew by a significant amount. So let's do shape.skewX = 200, and we could see that, that object is kind of skewed over to the side by 200 pixels. Let's go ahead and stop the rotation here, let's comment that out. And you can do the same thing in the Y direction. So if I wanted to animate that, I would do something like I will go ahead and keep the rotation and we'll Save that and we'll Refresh, and you can kind of get an interesting look and effect by skewing object. It's almost like a 3D effect when you combine skewing with the rotation.

You can also set the visible property of an object. Visible is sort of like alpha, so let's go ahead and set the shape.visible = 0. That means that the object is completely invisible. This is different than completely transparent. A transparent object will still be there and will still be drawn and you can click on it, whereas a visible object is not drawn at all, it's not there and you can't click on it, so that's an important difference between the two. Let's go ahead and turn that off.

So there's a few more options, and you should definitely check out the documentation on the DisplayObject to find out more information about this. So placing your graphics into shapes gives you the ability to access the properties of the DisplayObject. This is a powerful class that lets you perform all different kinds of transformations. Shapes are the EaselJS version of vector graphics. Unlike canvas, once you draw a shape, you can continue to animate it and transform it. This is one of the coolest features of EaselJS!

Show transcript

This video is part of

Image for EaselJS First Look
EaselJS First Look

21 video lessons · 4889 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed EaselJS First Look.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.