(17 votes, average: 3.94 out of 5) 
Loading ...Having a good grasp of the basic properties of display objects is extremely important for anyone interested in intermediate level ActionScript. This post assumes that you've taken the time to read through Chapter 3. If you're new to ActionScript, it will likely help with this post if you read up to Chapter 7.
This post contains a few short exercises that will put your knowledge of properties to the test.
As a guide, here are the properties that you will need to be familiar with:
x y scaleX scaleY height width rotation
For each example you'll need to use the properties in conjunction with an enterFrame event:
addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);
function onLoop(evt:Event):void {
// change properties over time
}
Exercises
To prepare for the exercises, watch each of the following demos as many times as needed using the "Show Example" button, and think about how you would accomplish the same task with ActionScript 3.0. Once you've viewed each example, attempt to recreate it using your current knowledge. Your solutions need not include buttons that control the final animation. The focus here is on problem solving and manipulating properties using the enterFrame event. For example, for the first demo you need only create something that looks like this.
You can download the answers to these exercises at the end of the post, but try to recreate them on your own, first.
Let's get started with Exercise 1:
Exercise 2:
Exercise 3:
Exercise 4:
Download Answers
It's important to note that your answers may differ slightly from the solutions included in the below zip. You may have chosen to move a clip at a different speed or you may have used different graphics. It's only important that you were able to recreate the fundamental aspects of each exercise.
Download Property Practice (simple motion) Answers (24 KB, 1,737 hits)
Print This Post
Congratulations, very good exercises, so easy to understand.
Great book.
I struggle to learn AS to update my small print shop's online design element.
Your book may put that goal in reach.
Can you advise me on how to make an input text box drag-drop as well as scaleable by handles or font size adjustable but only for the text box that has been selected?
That element, although common to large sites, is nowhere to be found.
Thank you
This is awesome, Thanks Sooo Much!!!
wow, pretty simple, thanks!
Hi there,
I think I tumbling on some simple error, but can't see any way around it. I've set up my own file with the Event Listener and Function described above(trying to move a symbol's instance called "ball1"), but wherever I test the Movie I get the following error:
"1046: Type was not found or was not a compile-time constant: ball1."
Do you have any idea of what I'm doing wrong?
Many thanks for the tutorials, by the way.
@Rodrigo, that error usually means you're trying to use an instance name as a type, but I can't see how you might be doing that based on these examples. They use instances defined on the stage, but if you forget to give an object an instance name, the error is usually "access of undefined property" or "variable not defined." If you declare a variable in your timeline code, the error is usually "conflict in namespace internal."
The only thing I can think of is that you've adapted the examples to bring ball1 in from the library? Something like var mc:ball1 = new ball1();. If that's the case, make sure the class name you gave the symbol in the library is the same as used in your script, including case-sensitivity.
@Dennis, what you're asking for is a tall order. You can make something draggable by using the startDrag() and stopDrag() methods, which are explained in the Help system. But you have to write a custom class to add control handles to a dispaly object. Senocular has a few related classes you can look into. This is one, so you should poke around to make sure you get all dependencies. TransformTool
In exercise three, I am drawing the circles dynamically. However, when I scale them they are also changing position. What am I doing wrong?
import flash.display.Graphics; import flash.display.Shape; var circle:Shape = new Shape(); circle.graphics.beginFill(0x009900); circle.graphics.drawCircle(200, 100, 20); var circle2:Shape = new Shape(); circle2.graphics.beginFill(0x990000); circle2.graphics.drawCircle(200, 100, 40); var circle3:Shape = new Shape(); circle3.graphics.beginFill(0x000066); circle3.graphics.drawCircle(200, 100, 60); addChild(circle3); addChild(circle2); addChild(circle); addEventListener(Event.ENTER_FRAME, scaleCircle, false, 0, true); function scaleCircle(evt:Event):void { circle.scaleX += .03; circle.scaleY += .03; circle2.scaleX += .02; circle2.scaleY += .02; circle3.scaleX += .01; circle3.scaleY += .01; }@Leslie, the circles are moving because they don't share a common registration point. You are adjusting their position using the X and Y parameters of the drawCircle() method. It is usually better to draw the circle around the (0,0) point (which occurs by default) and set the location of the display object itself. Note both the change to the drawCircle() method and the addition of the positioning of the display object in the setup below. With these changes, it should work the way you want it to work.
Aha! Thank you, Rich. You are awesome.
Hi Rich,
Thank you for writing such a great book and providing these exercises. I have learned a lot from you. Would you be able to show us the code to have a functioning play button for these exercises? I suspect the play() methods will not work since the motions are not timeline based. My guess is the ENTER_FRAME in the addEventListener will need to be replaced with a MouseEvent. If this is the case then I am at a lost as to how to get the function to loop. Am I even in the right hemisphere with this?
@Ben, thanks. Zevan was the man behind these exercises. Great for learning, right?
The most straightforward way of doing what you're referring to is to place a conditional in the enter frame listener and set a variable with mouse events. Declare a var called something like "run" at the top of the script. The contents of the enter frame listener are within if (run) { } (or you can just put this at the first line of the listener if (!run) { return; }). Then a mouse listener sets the run var to true when you want to play the exercise, and, perhaps, a timeline script a the end of the exercise sets the var to false.
Hi
fantastic exercises. But how do i make the balls on exe1 stop when they reach the end of the screen?
thanks!