Question

I’m new to ActionScript 3.0 and I am trying to work my way around Object Orientated Programming.

I’ve designed an application where there are 3 buttons on the stage and a logo. What I want to happen is when a button is clicked, the logo will fade out. Now I understand I need to manipulate the alpha properties of the logo but not sure how I would run the code once the button is clicked. I have my Main.as file loading the properties of the application. So once the FLA file runs, Main.as sets up the buttons and the logo. Now the buttons are put into a display holder and run from menuHolder.as which in turn gets the design of the buttons from button.as – so far with me?

To keep my code clean I have seperated my code into their own files (the design of the buttons into its own .as file, the arrangement of the menu buttons into its own .as file, the logo creation into its own .as file) so that the Main.as file just acts as a loader for placing everything into location on the stage.

So my question is that I want to create an animation for the logo (a fade out animation) where the code would be stored in say animationFade.as for example. Then when a button is clicked, the animation plays and the corresponding page is navigated to.

Here is my code for the setup of the menuBottons.as:

package 
{
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.events.MouseEvent;
    import flash.text.TextFormat;

    public class menuButtons extends Sprite
    {
        private var aboutMeBtn:button;
        private var galleryBtn:button;
        private var contactMeBtn:button;

        public function menuButtons()
        {
            aboutMeBtn = new button();
            aboutMeBtn.y = 0;
            aboutMeBtn.label = "About Me";
            addChild(aboutMeBtn);
            aboutMeBtn.addEventListener(MouseEvent.CLICK, onButtonClick);

            galleryBtn = new button();
            galleryBtn.y = 75;
            galleryBtn.label = "Gallery";
            addChild(galleryBtn);
            galleryBtn.addEventListener(MouseEvent.CLICK, onButtonClick);

            contactMeBtn = new button();
            contactMeBtn.y = 150;
            contactMeBtn.label = "Contact Me";
            addChild(contactMeBtn);
            contactMeBtn.addEventListener(MouseEvent.CLICK, onButtonClick);
        }
        public function onButtonClick(event:MouseEvent):void
        {
            //code to initiate the animationFade.as file
        }

    }
}

it’s this //code to initiate the animationFade.as file that i cannot grasp. It may be something very simple but my head seems to be spinning!

Hopefully I have provided enough information. Like I say I am just learning at the minute and trying to build up slowly.

Thank you

Answer 1

The best way to do this would be to dispatch an event from your button click function. Then, create a listener in your Main.as file that handles the event and tells the logo to fade out.
Maybe something like:

From menuButtons.as

public function onButtonClick(event:MouseEvent):void
{
    dispatchEvent(new Event("hide_logo", true));
}

You can read up on the Event Class documentation to learn more about the parameters.

From Main.as (after you create your menuButtons instance)

menuButtonsInstance.addEventListener("hide_logo", hideLogoHandler);

function hideLogoHandler(e:Event):void {
    // Fade out logo
    TweenLite.to(logo, 1, {alpha:0}); // requires TweenLite
}

This example requires TweenLite from Greensock.

On a side note, for best practice your class names should start with an uppercase character. So “menuButtons” class would be “MenuButtons”. Then, instance names would start with a lowercase character. Makes it easier to read if you do something like:

var menuButtons:MenuButtons = new MenuButtons();