Manipulating Objects
Download Source
Description
In this tutorial you will learn how to dynamically perform the following:
Scale objects along the x and y-axis
Rotate objects
Alpha objects
Visibility of objects and
Moving objects along the x and y-axis
The example used in this tutorial covers the above using animated object.
Here is the final result:
ActionScript 2 Source Explained
[expand title=Complete Source Code]
background_mc._visible = false // Set the background to hide
stop(); // Stop on the first frame as all other frames are ready/in action
// SCALE the animation
// A function to increase the size of the animation once the mouse button is clicked
ctrls_mc.scale_up_btn.onPress = function () {
qwSign_mc._xscale += 10 // Increase the xscale by 10
qwSign_mc._yscale += 10 // Increase the yscale by 10
}
// A function to decrease the size of the animation once the mouse button is clicked
ctrls_mc.scale_down_btn.onPress = function () {
qwSign_mc._xscale -= 10 // Decrease the xscale by 10
qwSign_mc._yscale -= 10 // Decrease the yscale by 10
}
// ROTATE the animation
// A function to increase the rotation/angle of the animation once the mouse button is clicked
ctrls_mc.rotate_right_btn.onPress = function () {
qwSign_mc._rotation += 10 // Increase the rotation by 10
}
// A function to decrease the rotation/angle of the animation once the mouse button is clicked
ctrls_mc.rotate_left_btn.onPress = function () {
qwSign_mc._rotation -= 10 // Decrease the rotation by 10
}
// ALPHA the animation
// A function to increase the alpha/opacity of the animation once the mouse button is clicked
ctrls_mc.alpha_up_btn.onPress = function () {
qwSign_mc._alpha += 10 // Increase the alpha by 10
}
// A function to decrease the alpha/opacity of the animation once the mouse button is clicked
ctrls_mc.alpha_down_btn.onPress = function () {
qwSign_mc._alpha -= 10 // Decrease the alpha by 10
}
// XSCALE the animation
// A function to increase the xscale of the animation once the mouse button is clicked
ctrls_mc.xscale_up_btn.onPress = function () {
qwSign_mc._xscale += 10 // Increase the xscale by 10
}
// A function to decrease the xscale of the animation once the mouse button is clicked
ctrls_mc.xscale_down_btn.onPress = function () {
qwSign_mc._xscale -= 10 // Decrease the xscale by 10
}
// Add a background behind the animation
// A function to initialise an event with the background
ctrls_mc.bg_on_btn.onPress = function () {
background_mc._visible = true // Show the background
}
// A function to initialise an event with the background
ctrls_mc.bg_off_btn.onPress = function () {
background_mc._visible = false // Hide the background
}
// MOVE the animation
// Declare variables for movement as booleans
var upScroll:Boolean = false // Scrolling up
var downScroll:Boolean = false // Scrolling down
var leftScroll:Boolean = false // Scrolling left
var rightScroll:Boolean = false // Scrolling right
onEnterFrame = function() { // When the user enters the first frame of the movie
if (upScroll) { // Check if variable upScroll is in action
qwSign_mc._y -=1; // move the object up
if(qwSign_mc._y < 0){ // check height of sign is less than 0
qwSign_mc._y +=1; // if it goes more, move object down
}
}
if (downScroll) { // Check if variable downScroll is in action
qwSign_mc._y +=1; // move the object down
if(qwSign_mc._y > (Stage.height - qwSign_mc._height)){ // check height is more than the stage
qwSign_mc._y -=1; // if it goes more, move obejct up
}
}
if (leftScroll) { // Check if variable leftScroll is in action
qwSign_mc._x -=1; // move the object left
if(qwSign_mc._x < 0){ // check object is less than 0
qwSign_mc._x +=1; // if it goes more, move object right
}
}
if (rightScroll) { // Check if variable rightScroll is in action
qwSign_mc._x +=1; // move the object right
if(qwSign_mc._x > (Stage.width - qwSign_mc._width)){ // check object is less than stage
qwSign_mc._x -=1; // if it goes more, move object left
}
}
}
// UP
// A function to initialise an event moving the object on rolling over the up button
ctrls_mc.move_up.onRollOver = function () {
upScroll = true; // Move the object up
}
// A function to initialise an event moving the object on rolling out of the up button
ctrls_mc.move_up.onRollOut = function () {
upScroll = false; // Stop the object up
}
// DOWN
// A function to initialise an event moving the object on rolling over the down button
ctrls_mc.move_down.onRollOver = function () {
downScroll = true; // Move the object down
}
// A function to initialise an event moving the object on rolling out of the down button
ctrls_mc.move_down.onRollOut = function () {
downScroll = false; // Stop the object down
}
// LEFT
// A function to initialise an event moving the object on rolling over the left button
ctrls_mc.move_left.onRollOver = function () {
leftScroll = true; // Move the object left
}
// A function to initialise an event moving the object on rolling out of the left button
ctrls_mc.move_left.onRollOut = function () {
leftScroll = false; // Stop the object left
}
// RIGHT
// A function to initialise an event moving the object on rolling over the right button
ctrls_mc.move_right.onRollOver = function () {
rightScroll = true; // Move the object right
}
// A function to initialise an event moving the object on rolling out of the right button
ctrls_mc.move_right.onRollOut = function () {
rightScroll = false; // Stop the object right
}
// RESET the animation
// A function to reset the animation back to it's original form once the mouse button is clicked
ctrls_mc.reset_btn.onPress = function () {
qwSign_mc._xscale = 50 // Set the xscale to 50 (half the size of the original animation)
qwSign_mc._yscale = 50 // Set the yscale to 50 (half the size of the original animation)
qwSign_mc._rotation = 0 // Set the rotation/angle to 0
qwSign_mc._alpha = 100 // Set the alpha/opacity/transparency to 100 (visible)
background_mc._visible = false // Set the background to hide
qwSign_mc._x = 240 // Set the x position of the animation to 240
qwSign_mc._y = 120 // Set the y position of the animation to 120
}
[/expand]
[expand title=Scale – sizing the object using _xscale and _yscale]
// A function to increase the size of the animation once the mouse button is clicked
ctrls_mc.scale_up_mc.onPress = function () {
qwSign_mc._xscale += 10; // Increase the xscale by 10
qwSign_mc._yscale += 10; // Increase the yscale by 10
}
// A function to decrease the size of the animation once the mouse button is clicked
ctrls_mc.scale_down_mc.onPress = function () {
qwSign_mc._xscale -= 10; // Decrease the xscale by 10
qwSign_mc._yscale -= 10; // Decrease the yscale by 10
}
Note how the above is scaling the _xscale and _yscale with the same value. This means the object will retain it’s aspect-ratio and resize equally along both axis, i.e. 1:1.
If I were to change the _xscale value from 10 to 20, then the x-axis of the object will increase and decrease twice as much as the y-axis. Therefore the proportions of the object will be 2:1.
It is also important to note the significance of the += and the -=. A single = sign defaults the object to equal that specific size, i.e. qwSign_mc._xscale = 10; and qwSign_mc._yscale = 10; would size the object to 10px x 10px when the button is clicked.
However a += would increment the size of the _xscale or _yscale object from it’s previous state by 10px. Therefore as the button is continuously pressed, the object increases size. Similarly -= would decrement the size of the object.
[/expand]
[expand title=Rotate – changing the angle of an object using _rotation]
// A function to increase the rotation/angle of the animation once the mouse button is clicked
ctrls_mc.rotate_right_btn.onPress = function () {
qwSign_mc._rotation += 10 // Increase the rotation by 10
}
// A function to decrease the rotation/angle of the animation once the mouse button is clicked
ctrls_mc.rotate_left_btn.onPress = function () {
qwSign_mc._rotation -= 10 // Decrease the rotation by 10
}
Rotating the object using _rotation, follows a similar written technique to that of the scaling. Again, notice the incremental (+=) and the decremental (-=) being used to rotate the object 10 degrees clockwise or 10 degrees anti-clockwise, respectively.
The .onPress command initiates the action as soon as the mouse button has been clicked over the button. An alternative that could be used include .onRelease, yet as the name suggests, the action is performed only after the button that’s been pressed, is released.
[/expand]
[expand title=Alpha – determine how see-thru an object using _alpha]
// A function to increase the alpha/opacity of the animation once the mouse button is clicked
ctrls_mc.alpha_up_btn.onPress = function () {
qwSign_mc._alpha += 10 // Increase the alpha by 10
}
// A function to decrease the alpha/opacity of the animation once the mouse button is clicked
ctrls_mc.alpha_down_btn.onPress = function () {
qwSign_mc._alpha -= 10 // Decrease the alpha by 10
}
The _alpha command determines the opacity or how “see-thru” an object is. With a maximum value of 100 (fully opaque) to a minimum value of 0 (zero opaque), _alpha can perform some interesting graphical effects to allow other objects in the background to be come visible.
On a seperate note, realise how the button for the alpha_down_btn is located within a movieclip called ctrls_mc. Using meaningful names such as ctrls_mc (meaning controls_mc) – suggests that the button is located within this movieclip. Similarly, _rotation, _xscale and _yscale are also grouped into this movieclip.
This is to allow for organisation and flexibility in design.
[/expand]
[expand title=Visibility – show or hide an object using _visible]
// A function to initialise an action with the background
ctrls_mc.bg_on_btn.onPress = function () {
background_mc._visible = true // Show the background
}
// A function to initialise an action with the background
ctrls_mc.bg_off_btn.onPress = function () {
background_mc._visible = false // Hide the background
}
The visibility of an object proves to be very useful in Flash. The _visible command can be used to show and hide objects.
For example, imagine a situation where the main navigation contains various buttons to different areas of the Flash site. The user clicks one of those buttons and is taken to a new section of the Flash site. However, at the same time, that button may want to disappear and only reappear when they navigate back to the main menu navigation.
Given that there are only two options, show and hide, the equivalent are the boolean of true and false.
[/expand]
[expand title=Moving – move an object using _x and _y]
// Declare variables for movement as booleans
var upScroll:Boolean = false // Scrolling up
var downScroll:Boolean = false // Scrolling down
var leftScroll:Boolean = false // Scrolling left
var rightScroll:Boolean = false // Scrolling right
onEnterFrame = function() { // When the user enters the first frame of the movie
if (upScroll) { // Check if variable upScroll is in action
qwSign_mc._y -=1; // move the object up
if(qwSign_mc._y < 0){ // check height of sign is less than 0
qwSign_mc._y +=1; // if it goes more, move object down
}
}
if (downScroll) { // Check if variable downScroll is in action
qwSign_mc._y +=1; // move the object down
if(qwSign_mc._y > (Stage.height - qwSign_mc._height)){ // check height is more than the stage
qwSign_mc._y -=1; // if it goes more, move obejct up
}
}
if (leftScroll) { // Check if variable leftScroll is in action
qwSign_mc._x -=1; // move the object left
if(qwSign_mc._x < 0){ // check object is less than 0
qwSign_mc._x +=1; // if it goes more, move object right
}
}
if (rightScroll) { // Check if variable rightScroll is in action
qwSign_mc._x +=1; // move the object right
if(qwSign_mc._x > (Stage.width - qwSign_mc._width)){ // check object is less than stage
qwSign_mc._x -=1; // if it goes more, move object left
}
}
}
// UP
// A function to initialise an event moving the object on rolling over the up button
ctrls_mc.move_up.onRollOver = function () {
upScroll = true; // Move the object up
}
// A function to initialise an event moving the object on rolling out of the up button
ctrls_mc.move_up.onRollOut = function () {
upScroll = false; // Stop the object up
}
// DOWN
// A function to initialise an event moving the object on rolling over the down button
ctrls_mc.move_down.onRollOver = function () {
downScroll = true; // Move the object down
}
// A function to initialise an event moving the object on rolling out of the down button
ctrls_mc.move_down.onRollOut = function () {
downScroll = false; // Stop the object down
}
// LEFT
// A function to initialise an event moving the object on rolling over the left button
ctrls_mc.move_left.onRollOver = function () {
leftScroll = true; // Move the object left
}
// A function to initialise an event moving the object on rolling out of the left button
ctrls_mc.move_left.onRollOut = function () {
leftScroll = false; // Stop the object left
}
// RIGHT
// A function to initialise an event moving the object on rolling over the right button
ctrls_mc.move_right.onRollOver = function () {
rightScroll = true; // Move the object right
}
// A function to initialise an event moving the object on rolling out of the right button
ctrls_mc.move_right.onRollOut = function () {
rightScroll = false; // Stop the object right
}
The movement of an object is determined using true and false values. By following the above code, it is noticeable that a declaration of boolean values have been set.
For this, it allows us to check whether one of the values is true (move the object), depending if the mouse cursor hovers (or clicks) on one of the buttons, and when releases, to set the value back to false (stop the object).
A series of IF statements have been used to control the validity of each statement. Later on in the ActionScript, these IF statement fire off its action only when the mouse is hovered over one of the buttons.
The IF statements declare that, if the boolean value is true, then move the _x or the _y of the object by 1px (+= moves UP and RIGHT, -= moves DOWN and LEFT). And because the mouse continuously hovers over the button, the statement is always going to be true, until the mouse is taken off the object, for which it is set to false – stop the object.
A further validation included is to set boundaries for which the movement of the object can stay in. This check includes whether the object has passed 0px of the stage and whether it has passed either the width of the stage or the height of the stage. In other words, this check is made to keep the object on the screen at all times, by forcing the object to go in the opposite direction by 1px, once the boundary has been met. A +1px and a -1px = a 0px!
[/expand]
[expand title=Reset – reset the state of the Flash movie]
// A function to reset the animation back to it's original form once the mouse button is clicked
ctrls_mc.reset_btn.onPress = function () {
qwSign_mc._xscale = 50 // Set the xscale to 50 (half the size of the original animation)
qwSign_mc._yscale = 50 // Set the yscale to 50 (half the size of the original animation)
qwSign_mc._rotation = 0 // Set the rotation/angle to 0
qwSign_mc._alpha = 100 // Set the alpha/opacity/transparency to 100 (visible)
background_mc._visible = false // Set the background to hide
qwSign_mc._x = 240 // Set the x position of the animation to 240
qwSign_mc._y = 120 // Set the y position of the animation to 120
}
The reset command, uses all the commands mentioned above and are all given fixed values.
These fixed values are obtained by checking the status of each property on the Stage at the very start of the Flash creation.
[/expand]