Reusable Action Script 3 Button072010
Jul


This is rehash for most people, but creating a button script in Action script 3 isn't too hard. Its a little more code than would have been used in AS2. The script used in this example is for a button to jump around the time-line, like for a website in flash.

I should note, that in the flash file I've set up, I have labeled different sections of the time-line. This is so I have something to jump to when the button is clicked.

The first thing that needs to be done with this script, is to add a listener to the button that is on the stage. After setting the listener we also have to define what it is that we are listening for, in this case a the click of the mouse.

home.addEventListener(MouseEvent.CLICK, clickHome);

You can see this in the example above where I have a button with an instance name of home that has an event listener attached. I'm listening for a mouse click, and the last part is the function to call when the button is clicked.

The next part is to define the function we referenced so that our button actually does something when clicked.

function clickHome(evtObj:MouseEvent) {

	// Trace shows what's happening.. in the output window
	trace ("The home button was clicked!")

	// Go to the section clicked on...
	gotoAndStop('home');

}

You can see here I've defined a function called clickHome, and I'm also defining that a mouse event is part of the function. I put a trace in there first to at least show that the function was called and worked. The second part of the script goes to a frame on the time-line labeled "home". This could be the frame number though if the number changes I'd have to update my script. The label works better since it does not matter what frame the label is on, it will jump to it.

The problem with a script like this is that for every button, we would need an a separate script which means A LOT of code. What we need is a reusable script that could be used for any button. Again this is a button to jump around and control the timeline.

home.addEventListener(MouseEvent.CLICK, clickSection);
about.addEventListener(MouseEvent.CLICK, clickSection);
portfolio.addEventListener(MouseEvent.CLICK, clickSection);

function clickSection(evtObj:MouseEvent) {

	// Trace shows what's happening.. in the output window
	trace ("The "+evtObj.target.name+" button was clicked!")

	// Go to the section clicked on...
	gotoAndStop(evtObj.target.name);

}

In this script, I changed the function name to be a little more generic. I also changed the trace to show which button was clicked, it will put the instance name of the button. The important change in the script came in at the gotoAndStop, where evtObj.target.name comes into play and makes this button re-usable. Since this is to move around the timeline, I should make sure that my button instance names, and my labels are the same. Otherwise this button won't work. You can also see that I'm calling this function for more than one button.

This is a script that can be edited to jump to a url as well, though won't be reusable.

link1.addEventListener(MouseEvent.CLICK, clickLink1);

function clickLink1(evtObj:MouseEvent) {
     var url:String = "http://google.com";
     var request:URLRequest = new URLRequest(url);
     navigateToURL(new URLRequest(request),'_blank');

}

This function could also be edited to return an error message if the function could not navigate to the url. Though, you'd probably be able to figure that out with the trace.

link1.addEventListener(MouseEvent.CLICK, clickLink1);

function clickLink1(evtObj:MouseEvent) {

     var url:String = "http://site";
     var request:URLRequest = new URLRequest(url);

try {
     navigateToURL(request, '_blank'); // second argument is target
}
catch (e:Error) {
     trace("Error occurred!");
}

Notice the '_blank' used to define the target window the link will open in that was included.

That's it for creating a button script in AS3, and several variations on how it could be used.


9 Responses to “Reusable Action Script 3 Button”

  1. Hello, Neat post. There is an issue along with your site in internet explorer, may check this… IE nonetheless is the market leader and a large component to other folks will omit your great writing because of this problem.

  2. Hey there! Do you use Twitter? I’d like to follow you if that would be ok. I’m definitely enjoying your blog and look forward to new posts.

  3. The heading of your post – Trovis-Designs · Reusable Action Script 3 Button – caught my eye, so I came by to check it out. Glad I did. FYI – I also shared this page – http://trovis-designs.com/archives/actionscript/reusable-action-script-3-button – on StumbleUpon so others can find it too.

  4. Your place is valueble for me. Thanks!…

  5. Flash Web Site Design States It’s An Excellent Post Cool…

    [...] Top news reckoned we would like to back-link to this dont stop… [...]…

  6. Best Website Content I’ve Ever before Come across :-)

  7. Most important Blog Write-up I had Ever Encountered : d

  8. anonymous:

    Most significant Web site Article Ive Ever before Encountered . . .

  9. Another key facet besides writing valuable, helpful, and engaging content is making sure that this information is linked to other related articles on your blog. Which means when someone visits your blog he could have any number of additional content linked from the one read at first. This way, if a viewer likes your blog he could stay to read the actual archive. This would assist people like me to be aware of this topic greater.

Add Your Comment

You must be logged in to post a comment.