Wednesday, 20 January 2010

Hiding movie clips in AS3

In Actionscript 3 there are two ways of hiding movie clips using inherited properties from the movie clip class. The two properties are visible and alpha. If you were using Actionscript 2 you would need an underscore before the property name, but in AS3 the properties would look like below.

//Hides movie clip using the alpha property.
myMoveclip.alpha = 0;

//Hides movie clip using the visible property.
myMovieclip.visible = false;

This is a simple example of hiding a movie clip using a button component, and a horse image which has been converted into a movie clip. When the movie clip is hidden it gets temporally removed will from the stage,so will be unclickable to the user.

//Adds an event listener to the button component with the mouse click event.
horse_mc.addEventListener(MouseEvent.CLICK, hideObject);

//This function hide the horse movie clip.
function hideObject (event:MouseEvent):void {
horse_mc.visible = false;
}




To show the hidden movie clip, we need to add another button component and add some additional code.

//Initially disable the show button.
show_btn.enabled = false;

//Adds an event listener to the button component with the mouse click event.
hide_btn.addEventListener(MouseEvent.CLICK, hideObject);
show_btn.addEventListener(MouseEvent.CLICK, showObject);

//This function hide the horse movie clip, and disables the hide button.
function hideObject (event:MouseEvent):void {
horse_mc.visible = false;
show_btn.enabled = true;
hide_btn.enabled = false;
}

//This function show the horse movie clip, and disables the show button.
function showObject(event:MouseEvent):void {
horse_mc.visible = true;
show_btn.enabled = false;
hide_btn.enabled = true;
}




Notes that the alpha and visible properties are not the same. The alpha property deals with the transparency of an object, so setting the alpha value to 0 will set the transparency to invisible. The invisible object will still be on the display list, but won't be visible to the user.

Whereas the visible property deals with the actual visibility of an object. If you set the visible to false. The object gets temporally removed from the display list, so frees up system resources. If you set the visible to true, the object return visible. Since, the visible property temporally removed an object from the display list. A visible = false object cannot accept any mouse events, but a alpha = 0 object can. This is because the object is transparent but still exist on the display list therefore will be able to accept mouse events.

To clarify, the alpha property handles the transparency of a display object. And the visible property handles whether a display object is visible or not.

4 comments:

Bell 29 June 2010 08:11  

i'm using macromedia flash 8
how to hide movie clip?
i was tried this one, but FAIL
could you help me?
sorry poor english

iliketo 30 June 2010 11:44  

@Bell

Flash 8 uses Actionscript 2, this tutorial is created using Actionscript 3.

You have to use the _alpha and _visible properties in Actionscript 2.

Andrew Ross 2 February 2011 19:07  

nice tutorial, but there is a bracket missing from this line that causes an error; "function hideObject event:MouseEvent):void {"

should be "function hideObject (event:MouseEvent):void {

iliketo 6 February 2011 11:21  

@Andrew Ross

Code updated.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP