(Also see our tutorial on coding animated Movie Clip Buttons in ActionScript 3 that don't rely on timeline animations.)
Many Flash beginners stick with using button symbols when creating navigation links for their Flash websites. And why not! That's what button symbols are made for, right?
Well, you can also create buttons using movie clip symbols. Movie clip buttons are basically buttons on steroids. With movie clip buttons, you have much more control over how your button behaves.
For example, when you're dealing with your button symbol's timeline, there's only so much you can do on the button's "over" state. If you want, you can stick a movie clip symbol within your button symbol's "over" state in order to add a little bit of animation, but what if you wanted a different animation to occur when you moved your mouse away from the button? There's not really a whole lot you could do there if you were using a simple button symbol.
So, in this tutorial, I'm going to show you how to make rollover and rollout animations on a movie clip button. For the sake of simplicity, we're going to create buttons that expand out sideways on rollover and animate back to their original size on rollout. So let's get started:
1. Create your movie clip button. For this example, create a simple rectangle with a piece of text centered on top of it. Here's what the graphics look like for my button:
Easy enough, right? Now, select your graphics, hit F8 to convert to a symbol, select Movie Clip and call it whatever you want. Even though this graphic is going to look and act like a button, we want to make it into a movie clip in order to take advantages of all the benefits of using a movie clip symbol. Finally, select your new movie clip button, and enter in an instance name for it in the properties inspector. I'm giving my button an instance name of btn_mc.
2. Enter your movie clip button's timeline. Double-click on your movie clip to go into the movie clip's timeline. In the movie clip's timeline, you're going to create a few different states for your button and then use frame labels to label these states.
3. Insert new layers into your movie clip button's timeline. Create a new layer called "Labels" and another new layer called "Actions." Keep these two layers at the top of your layer stack for easy access. Also, we need to separate the background of the button and the button text into separate layers. An easy way to do this is to select the Selection Tool in your toolbar, click once outside of your artwork to deselect everything (don't double-click, or it will take you back to the main timeline), then right-click on the background rectangle (or ctrl+click with a one-button mouse on a Mac) and click on "Distribute to layers." This will send the background rectangle to a new layer just below the current layer. Here's what your layer stack should look like now:
4. Create the "states" for your button. For this tutorial, we're going to create an up state, an over state, and an out state. The up state will contain the button at its default size and position, the over state will contain an animation of the button's background expanding to the right, and in the out state, it will animate back to its original size.
The up state will consist of a single frame and will reside in frame one, which we've already created. With frame one selected for the "Labels" layer, go to the Properties Inspector and type up into the frame label text field. For the over state, click on frame 10 for the "Labels" layer, hit F6 to add a new keyframe, and with this new keyframe selected, enter over into the frame label text field in the Properties Inspector. This frame (frame 10) will be the beginning of the rollover animation. You're going to make this 10 frames long, so the animation will end in frame 20. So, to add a little breathing room, jump over to frame 30 on the Labels layer, add a new keyframe, and label this one out. This animation will also take up 10 frames, so it will end in frame 40. Click on frame 40 for the Labels layer and hit F5 to extend the frames out so that you can read the final label in the timeline.
Now we need to add our stop actions. By default, a movie clip symbol will start playing through its timeline, and that's not what we want. By default, we want our movie clip button to stay in frame one until we hover over it. We also need to add stop actions to the end of our over animation and our out animation. So click on frame one, hit Option+F9 (or just F9 on PC) to open up your actions, and type stop(); into your actions panel. Then, close your actions panel.
We can easily copy this stop action to frames 20 and 40 by doing the following:
- Click on the keyframe in frame one of the Actions layer (where you just entered your stop action).
- With this keyframe selected, hold onto Option (or Alt on PC), click on the keyframe again, and drag to the right.
- Release the mouse button at frame 20, and you should see a new keyframe copied to frame 20 with the stop action applied to it.
- Perform steps 1-3 again, this time for the end of the out animation in frame 40.
The timeline for your movie clip symbol should now look like this:
5. Create the over and out animations. Since the text of the button isn't going to change, go ahead and click on frame 40 for the text layer and hit F5 to stretch the frames across the entire animation. Then, before you create the animation for the background of the button, select the rectangular background and convert it to a movie clip symbol. Call it whatever you like. (This symbol does not need an instance name.)
With your background converted to a movie clip, add keyframes to frame 10 and frame 20 of the background layer. Frame 10 will contain the beginning keyframe of the animation, and frame 20 will contain the ending keyframe of the animation.
Leave frame 10 alone. Click on frame 20, switch to the Free Transform Tool (keyboard shortcut: Q), and stretch the shape out to the right about 10 or 20 pixels (or as far as you'd like). If the shape stretches out in both directions when you try to resize the width, simply hold onto Option (or Alt on PC) while you drag it out, and the left edge will stay in place.
Right-click anywhere between frames 10 and 20 on the background layer and click on Create Motion Tween. The over state is now complete.
Click on frame 30 for the background layer (the beginning of the out state) and add a new keyframe. This new keyframe will retain the expanded size of the button. In this state, we want the button to animate back to its original size. To create the ending keyframe for this animation (since it needs to be the exact same size as it's starting size), right-click on frame 1 for the background layer, click on Copy Frames, then right-click on frame 40 and click on Paste Frames. Then right click between frame 30 and 40 and select Create Motion Tween. Your animations are now complete, and your timeline should look like this:
6. Return to the main timeline. At this point, we're done editing the movie clip button's timeline. Click on Scene 1 on the edit bar (the bar right below the timeline) to return to the main timeline.
7. Code your movie clip button. Create a new layer on the top of the layer stack in the main timeline and call this new layer Actions. Lock this layer by clicking on the layer underneath the padlock icon, click on frame 1 for the Actions layer, and hit Opt+F9 (F9 on PC) to open up your actions panel. Enter the following code into your actions:
Line 1 sets the buttonMode property of the movie clip to true. Without this, your button would still work, but the user would not see the hand cursor when they hovered the mouse cursor over the movie clip.
Line 2 sets up the event listener for the rollover. When the user rolls the mouse cursor over the button, this event triggers a function called onButtonOver, which we created starting on line 5. Inside this function, we're simply telling our button movie clip to go to the frame labeled over and start playing. It will then play until it reaches a stop action.
Line 3 sets up the rollout event listener, which triggers the onButtonOut function, which tells the movie clip to go to the frame labeled out.
Notice that there's nothing in this code that explicitly returns our movie clip to the up state. This is because it's really not necessary. The end of the out state looks exactly like the up state, so it really doesn't make a difference. But if we wanted to, we could have just left out the final stop action at the end of the movie clip timeline, and instead of stopping at frame 40, it would simply loop back to frame 1 where it encounters the stop action there. Doing this would result in the exact same visual result.
8. Bump up the frame rate. One last thing... For a nice, smooth animation, bump the frame rate up to 24 frames per second. This will give you a quicker, smoother animation. To do this, simply double-click on the frame rate displayed at the bottom of the timeline and enter in a new value.
Your final file should look something like this (I've added a few more buttons for demonstrative purposes):
Source file: mcButtons.zip
(Also see our tutorial on coding animated Movie Clip Buttons in ActionScript 3 that don't rely on timeline animations.)
Craig
Cipriano: Are you using ActionScript 2 or 3? The code for this tutorial is in ActionScript 3.
Cipriano
Thanks Craig!
Yes I’m on AS2 which explains it.
For those on AS2 I used the following code to substitute the code in this tutorial and it seems to work fine:
this.btn_mc.onRollOver = function() {
about_but_mc.gotoAndPlay(“_over”);
};
this.btn_mc.onRollOut = function() {
about_but_mc.gotoAndPlay(“_out”);
};
Aloha to all!
Cipriano
Oops -correction. I used this code:
this.btn_mc.onRollOver = function() {
btn_mc.gotoAndPlay(“over”);
};
this.btn_mc.onRollOut = function() {
btn_mc.gotoAndPlay(“out”);
};
So Sorry
Andicska
hi Craig!
First of all Thanks for the great tutorials!
would you be so kind as you help me how to >>Stick movie clip buttons<< to different pages of the website?
here is my code, but somethingis wrong:
var btnArray:Array = [alapCircle.btnmagam , alapCircle.btngal, alapCircle.btnkapcs,alapCircle.btnlink];
for (var i:int = 0; i< btnArray.length; i++){
btnArray[i].mouseChildren = false;
btnArray[i].buttonMode=true;
btnArray[i].addEventListener(MouseEvent.ROLL_OVER, onrollover);
btnArray[i].addEventListener(MouseEvent.ROLL_OUT, onrollout);
btnArray[i].addEventListener(MouseEvent.CLICK, onclick);
}
function onrollover (event:MouseEvent):void {
if(currentPage != event.currentTarget){
event.currentTarget.gotoAndPlay(“_over”);
}
}
function onrollout (event:MouseEvent):void{
if(currentPage != event.currentTarget){
event.currentTarget.gotoAndPlay(“_out”);
}
}
function onclick(event:MouseEvent):void {
if (currentPage != event.currentTarget){
currentPage.gotoAndPlay(“_out”);
}
currentPage = event.currentTarget;
event.currentTarget.gotoAndStop(“_down”);
}
(all the buttons are in a main movie clip called alapCircle, and each one has 4 state)
Thanks in advance for any advice!
Andicska
Andicska
Hi again !
I just write to told you i fixed the problem
voltmar is a boolean variable, which is false, until i have visited a page.
function onclick(event:MouseEvent):void {
if (currentPage != event.currentTarget && voltmar){
currentPage.gotoAndPlay(“_out”);
//ez itt nem fut le úgy hogy null objeck reference van.
}
voltmar=true;
currentPage = MovieClip(event.currentTarget);
//trace(currentPage)
event.currentTarget.gotoAndStop(“_down”);
}
Have a nice day
Ewalach
Hi, i have a little problem. The button is working fine, but how can i do to go to another scene or a different frame on the same scene after pushing the button?
brian
Could the the technique described in this tutorial have been used to create the effect of the “portfolio” page of the following website?
http://ashleyannphotography.com/index2.php?v=v1
I really like the navigation on this site, but I can’t figure out how they did it…
E-jay
Thanks Craig for another helpful tutorial.
Also, thanks Cipriano for the Actionscript 2.0 code. I was receiveing that error message as well, and initially concluded it was a due to a conflict between PC and MAC.
The button works well…Now I have to figure out how to link it to a url and trigger pages/timeline…
Anyone have a clue (using AS2.0)?
wrench820
So how do you link these buttons to URLs?
Simplu78
same question like wrensch820
Simplu78
the answer? (it works)
add to the code:
btn1_mc.addEventListener(MouseEvent.CLICK,myClick1);
function myClick1(event:MouseEvent):void {
var request:URLRequest = new URLRequest(“http://www.google.de”);
navigateToURL(request);
}
btn2_mc.addEventListener(MouseEvent.CLICK,myClick2);
function myClick2(event:MouseEvent):void {
var request:URLRequest = new URLRequest(“http://www.google.de”);
navigateToURL(request);
}
btn3_mc.addEventListener(MouseEvent.CLICK,myClick3);
function myClick3(event:MouseEvent):void {
var request:URLRequest = new URLRequest(“http://www.google.de”);
navigateToURL(request);
}
btn4_mc.addEventListener(MouseEvent.CLICK,myClick4);
function myClick4(event:MouseEvent):void {
var request:URLRequest = new URLRequest(“http://www.google.de”);
navigateToURL(request);
}
btn5_mc.addEventListener(MouseEvent.CLICK,myClick5);
function myClick5(event:MouseEvent):void {
var request:URLRequest = new URLRequest(“http://www.google.de”);
navigateToURL(request);
}
btn6_mc.addEventListener(MouseEvent.CLICK,myClick6);
function myClick6(event:MouseEvent):void {
var request:URLRequest = new URLRequest(“http://www.google.de”);
navigateToURL(request);
}
Rampart
http://www.sullivanceter.com was not designed developed or touched by Richie. I know for sure, because we did it. Richie a suggestion, DONT TAKE CREDIT FOR SOMEONE ELSE’S WORK.
Rusty
These are really cool buttons.
But I was wondering, you could get each of those buttons to change color or shape when to click on it, and for that button to stay like that to show that button has been pressed.
The trouble is, how would it stay like that when you rollover?
Also, to create extra problems for yourself, when you click on one button, and glows (animated), and stays glowing to show thats the button you’ve pressed; How would you then say in the action script 3 when I press on another button, have the previous button play a de-select sequence, whilst the current button plays the selected sequence?
Help in this matter would be great
Rusty
Myra
Hi,
Once I bring my movie symbol containing the buttons.
I would like to link these buttons to the a frame in main stage in my fla file. Is it possible?
thanks and a quick respond will be appreciated.
lucas
Hi, i have just come accross this example, and i’m sorry but i must say that it’s not that good.. From an OOP point of view, puting the code logic of the button in the main timeline breaks the encapsulation, this code should be at least in the button frame 1 (or better in a separate class for a generic button). And this code will also have to be repeated for every button on the stage…
-lucas
vinn
hi sorry but this isn’t working for me I also use Flash CS3 and after I type in the code a little pop up thing came up and told me there is an error in line 5 and line 10 of the code but i’m pretty sure i typed in it right, please help! Thanks
sarah
hi im a newbie with flash cs3. and i cant make my movie clip clickable. what is the exact code for it?! im using activescript by the way..
thanks!
Howie
I am trying to have each button move to each a different scene when on click, but it is not working. Can someone please post the script for it? Thanks!
Curt
Fantastic tutorial- thank you for sharing your expertise with the world- combining this tutorial with others allowed me to exactly what I needed!
Craig- you rock!
RADO
-> Andicska Make sure that Actions Frames with stop(); cmd. lIne are not matching with those from the Labels line
James
Many Thanks, a nice simply tutorial that could be combined with other techniques to make some interesting animations.
Dan
Very useful tutorial (and subsequent helpful pointers), thanks all!
hi all
import fl.transitions.Tween;
import fl.transitions.easing.*;
function markerfollow(event:MouseEvent):void
{
var myTweenWidth:Tween = new Tween(btn, “width”, Strong.easeOut, btn.width, btn.width + 30, 3, true);
}
function markerfollow2(event:MouseEvent):void
{
var myTweenWidth2:Tween = new Tween(btn, “width”, Strong.easeOut, btn.width, btn.width – 30, 3, true);
}
btn.addEventListener(MouseEvent.ROLL_OVER, markerfollow);
btn.addEventListener(MouseEvent.ROLL_OUT, markerfollow2);
adam
Over a year ago MATT addressed my issue but I don’t understand his solution. I have small square button, On rollover an image flys out and holds on screen but now the whole area is active and I just want the small square to remain active. Hit area doesn’t help. I’ve tried making a hit area only button…doesn’t work, I’ve tried hitArea code, doesn’t work.
Funny Dummy
Thanks, Craig! From the sounds of it, this advice will save me lots of extra leg-work over the long term, plus allow me to do a lot more with the buttons. Cheers!
antoinette
evening….
my prob is that the button in the movie clip doesnt connect in the scene…
i mean i drag the movie clip in frame1 for example and the button in it suppose to trigger another frame to load (it will go to another frame) but it didnt. this is my code in the movie clip button:
on(press){
gotoAndStop(2);
}
what should i do??? plz reply asap…
Huzefa
Hi,
basically my problem is that, i have made all my buttons by movie clips, and all the different pages by movie clips, but i have movie clip buttons, inside those movie clip pages, and cannot figure out how to make these movie buttons inside the movie clip work to go to the next page.
can anybody help me please?!
Dennis Australia
I stumbled on this Button tutorial and it solved most of my problem, a really great tute. I’d like to take this button menu one step further so please if anyone can help I’d appreciate it. I’d like to know how to get the button to stick in the stretched position when you click it to go to a new web page. I have Craig Campbell’s tutorial Building a Website in Flash 8 that makes this work but I am now using Flash CS4 and Actionscript 3.0 so the code needs to be different. I think I need to add a new label “down” at frame 20 on the labels layer and add some new code with an “if” statement. Please Help.
Sunette South Africa
Hallo everyone..
I am wondering if any of you would be so kind to assist in extending this tutorial with guidance on how to do the following:
I have two buttons in frame one (Phase 1 and Phase 2)- these are movieclip buttons.
When the user clicks on any of the Phase buttons a submenu is displayed on the left. The user clicks on this to reveal information about the specific components of the course. What I need help with is the following:
The movie clip button should have 4 states:
Up, over, busy(down) and (up and over is no problem)
Each of these states has a different image. When the user clicks on for eg Phase 1 button, the busy (down) state image should stay visible on screen and does not return to the up state unless they exit the program.
When the user then clicks on the next button for eg Phase 2, the state of the Phase 1 button should change to the complete state image. The same applies for the buttons in submenus of each of the phases. A further challenge (for me in any case) is that they do not have to click on the buttons in a specific sequence.
Your help will be much appreciated. (I use Flash CS3.)
Sunette South Africa
With reference to my previous post – the fourth state of the button is complete. Sorry about that
MagineMe
Hi,
Am trying trying to get this code to work but can’t figure it out. I want the button to open a new URL / window, but am getting Syntax Errors.
Any help greatly appreciated.
CS4 – AS3
btn_i.buttonMode = true;
//btn_i.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
//btn_i.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
btn_i.addEventListener(MouseEvent.CLICK, myClick1);
function myClick1(e:MouseEvent):void
{
var url:String = “http://www.google.com”;
var request:URLRequest = new URLRequest(url);
try {
navigateToURL(request, ‘_blank’);
} catch (e:Error) {
trace(”Error occurred!”);
}
}
MagineMe
Hi,
Ok, got it to work.
FYI:
btn_i.buttonMode = true;
//btn_i.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
//btn_i.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
btn_i.addEventListener(MouseEvent.CLICK, myClick1);
btn_i.addEventListener(MouseEvent.CLICK, myClick1);
function myClick1(event:MouseEvent):void {
navigateToURL(new URLRequest(“http://www.google.com/”));
}
Norman deGare
Hi.
It’s a great tutorial you got here. I’m having a bit of trouble with my buttons. I used an imported PSD file for a button image, and everything is smooth. Is there any way I I duplicate the button properties(actionscript, states e.t.c.) but use a different image instead?
I’m still new at flash so any help at all is much appreciated. =P
senthil
hi its really good… but i have a problem in this script
that when i over the button and click..go to the page and play but when mouse come out side the button without click that page gone so i need when i come out button still i want click state image….
pls help me
btn1_mc.buttonMode = true;
btn2_mc.buttonMode = true;
btn3_mc.buttonMode = true;
btn4_mc.buttonMode = true;
btn1_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
btn1_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
btn1_mc.addEventListener(MouseEvent.CLICK, onClick);
btn2_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
btn2_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
btn2_mc.addEventListener(MouseEvent.CLICK, onClick);
btn3_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
btn3_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
btn3_mc.addEventListener(MouseEvent.CLICK, onClick);
btn4_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
btn4_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
btn4_mc.addEventListener(MouseEvent.CLICK, onClick);
btn5_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
btn5_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
btn5_mc.addEventListener(MouseEvent.CLICK, onClick);
btn6_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
btn6_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
btn6_mc.addEventListener(MouseEvent.CLICK, onClick);
btn7_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
btn7_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
btn7_mc.addEventListener(MouseEvent.CLICK, onClick);
function onButtonOver(e:MouseEvent):void
{
e.currentTarget.gotoAndPlay(“over”);
}
function onButtonOut(e:MouseEvent):void
{
e.currentTarget.gotoAndPlay(“out”);
}
function onClick(e:MouseEvent):void
{
e.currentTarget.gotoAndPlay(“Release”);
}
Marcus
Great tutorial…
My website http://www.8minutecreditapproval.com.php5-9.dfw1-1.websitetestlink.com/home-animated.html where each check box is a separate movie clip with button features as per the tutorial above…
Two questions:
One: How do I get the separate movie clips (Check Boxes with text) to only show once and not repeat the “up” and “over” sequences… I want to be able to select the check box and move onto the second check box then the third…
Two: How do I set the third movie clip check box so that when I click it goes to a new scene…
any help would be greatly appreciated…
Marcus
umair
hi its really good… but i have a problem in this script
that when i over the button and click, not open the page i want open url page..
please help me…
_root.link = _root.button;
_root.myMenu["but" + _root.link].gotoAndPlay(“s1″);
2nd code…
on (rollOver)
{
if (_root.link != num)
{
gotoAndPlay(“s1″);
} // end if
}
on (releaseOutside, rollOut)
{
if (_root.link != num)
{
gotoAndPlay(“s2″);
} // end if
}
on (release)
{
_root.butF(num);
}
TechIQ
You’ve written nice post, I am gonna bookmark this page, thanks for info.
becca7349
This is a great tutorial and my buttons work very well except for one thing. They link to other pages within my website, but will only open up in a new tab or window. Can someone help me figure out how to make the links open up in the same window? Thanks so much!!
Cheezen
Just wanted to thank you A LOT for this tutorial. I’m pretty new to AS3 and I’ve spent at least 3 hours of searching to find this. I’m not the type that posts comments to tutorials and such, so this will be my first =) Take it as a big compliment, thanks!
kathleen
I cannot get this code to work. I remade this button 4 times and keep getting an error. I’m working in Action 2.0. could that be the problem. VERY FRUSTRATING!
kathleen
Here.s my code. I put it on Frame 1 in Scene 1. The instance name was put in the nested movie clip.
Here’s my code.
What the heck did I do wrong?
btn_mc.buttonMode=true;
btn_mc.addEventListener(MouseEvent.ROLL_OVER,onButtonOver);
btn_mc.addEventListener(MouseEvent.ROLL_OUT,onButtonOut);
function onButtonOver(e:MouseEvent):void
{
e.currentTarget.gotoAndPlay(“over”);
}
function onButtonOut(e:MouseEvent):void
{
e.currentTarget.gotoAndPlay(“out”);
}
arthurus vasquez
how to do this in flash AS2.0? pls help.. thanks
gups
hi, im not very good with flash at all and i need to know whether it is possible to make a button appear halfway through the animation. when this button is pressed, it should take you to the last frame and play….if it is not pressed it should stop 3/4 of the way through and stop there…i dont know if that makes sense but is anything like this possible?
Sagar
hi…..The tutorial about a Movie clip button was awesome!I really needed that from since 2 years & now i got it.thanks again to share it. but I’ve a problem yet!the animation inside the movie clip is working perfectly.but now I want it to work like a button.My straight way problem is,”what is the script for the movie clip to make it work like a button?” I am getting the hand symbol while the mouse is on ‘over’ state but after clicking on it, it’s not working! I just want to use the scripts,”gotoAndPlay()” & “gotoAndStop()”.
Marwa
its realy good work but i have proble plz anyone help me…
i need to create like this menu but horizental menu, and this work with me, but i but below it images i read it from XML file at run time,so this menu when it open it open at the back of the images
my main idea is :
horizantal menu
thumbnial images click on it load big image
and this is the code of reading from xml
import flash.events.MouseEvent;
var xmlRequest:URLRequest = new URLRequest(“xml/images_en.xml”);
var XMLLoader:URLLoader = new URLLoader();
XMLLoader.load(xmlRequest);
var imgLoader:Loader;
var imgDesc:TextField=new TextField();
//Define el formating
var myFormat:TextFormat = new TextFormat();
myFormat.size = “25″;
myFormat.color= “666666″;
myFormat.font = “Eras Demi ITC”;
myFormat.align = TextFormatAlign.RIGHT;
myFormat.bold = “true”;
imgDesc.x = 850;
imgDesc.y = 15;
imgDesc.autoSize=TextFieldAutoSize.RIGHT;
//imgDesc.text= “Description of image 1.”;
imgDesc.setTextFormat(myFormat);
addChild(imgDesc);
XMLLoader.addEventListener(Event.COMPLETE,loadThumbs);
var myXML:XML;
var myList:XMLList;
var vURL :URLRequest;
function loadThumbs(e:Event):void {
myXML = XML(e.target.data);
myList = myXML.children();
for (var i:Number = 0; i<6; i++) {
imgLoader=new Loader();
imgLoader.load(new URLRequest(myList[i].attribute("thumb")));
imgLoader.x=310-60*i;
imgLoader.y= 52;
imgLoader.name = String(i);
imgLoader.addEventListener(MouseEvent.CLICK,loadImg);
//imgLoader.getRect(
addChild(imgLoader);
this.buttonMode = true;
if (i==0) {
imgLoader=new Loader();
imgLoader.load(new URLRequest(myList[i].attribute("source")));
vURL= new URLRequest(myList[i].attribute("url"));
effect_mc.addEventListener(MouseEvent.CLICK,loadURL);
function loadURL(e:MouseEvent):void {
navigateToURL(vURL, "_self");
}
addChild(imgLoader);
imgLoader.x = 375;
imgLoader.y = 300;
//Mask.addChild(imgLoader);
var TheMask = new Mask();
TheMask.x= 375;
imgLoader.mask = TheMask;
var Desc:String = myList[i];
addChild(effect_mc);
//trace(myList[i])
imgDesc.text= Desc;
imgDesc.setTextFormat(myFormat);
addChild(imgDesc);
}
}
LoadFirstImg();
}
function loadImg(e:Event) {
imgLoader=new Loader();
imgLoader.load(new URLRequest(myList[e.target.name].attribute("source")));
vURL= new URLRequest(myList[e.target.name].attribute("url"));
imgLoader.addEventListener(MouseEvent.CLICK,loadURL);
function loadURL(e:MouseEvent):void {
navigateToURL(vURL ,"_self");
}
imgLoader.x = 375;
imgLoader.y = 100;
addChild(imgLoader);
//imgLoader.mask=mask_mc;
var TheMask = new Mask();
TheMask.x= 381;
imgLoader.y = 45;
imgLoader.mask = TheMask;
addChild(effect_mc);
var Desc:String = myList[e.target.name];
imgDesc.text= Desc;
imgDesc.setTextFormat(myFormat);
addChild(imgDesc);
}
function LoadFirstImg() {
imgLoader=new Loader();
imgLoader.load(new URLRequest(myList[5].attribute("source")));
vURL= new URLRequest(myList[5].attribute("url"));
imgLoader.addEventListener(MouseEvent.CLICK,loadURL);
function loadURL(e:MouseEvent):void {
navigateToURL(vURL ,"_self");
}
imgLoader.x = 375;
imgLoader.y = 50;
addChild(imgLoader);
//imgLoader.mask=mask_mc;
var TheMask = new Mask();
TheMask.x= 381;
imgLoader.y = 50;
imgLoader.mask = TheMask;
addChild(effect_mc);
var Desc:String=myList[0];
imgDesc.text= Desc;
imgDesc.setTextFormat(myFormat);
addChild(imgDesc);
}
Conc:
hoe can i run the drop down menu above the image
Andrea
Great!!! Thanks so much
Arley
Hi,
I was hoping someone can help me with this one? I’ve been wanted to know how to do this for a long long time.
If I make a movie clip which say I call “About” for my menu, how do tell it to change its state once its been clicked?
I know the code for making the movie clip act as a button doing a rollover, rollout and release. But it then goes back to the way it was as If I didn’t click it.
but I actually want it to stay changed once it was clicked. So lets say it was yellow before it was clicked but turns grey once it was clicked. So you know that you are in that section of “about”.
dreamdezign
To add URL you can easily add the following code to the same action layer.
YOURINSTANCENAME.addEventListener(MouseEvent.CLICK, openURL1);
function openURL1(event) {
navigateToURL( new URLRequest(“http://yahoo.com”), “_parent” );
}
if you are adding multiple URL’s make sure change the openURL1 to openURL2 and so on and the YOURINSTANCENAME has to be change to yours.
Looser
Hello,
I’m having a problem with this script.
I’m not a Flash expert or anything, but I found this tutorial and applied it on my .fla
It works perfectly with the 4 buttons that come in the original document that you provide us, but if I try to duplicate the buttons and rename them the script wont work anymore.
Trying logic, i used this:
Duplicated buttons and named them
mcButton5
mcButton6
mcButton7
then added this to the code after what was already there
btn5_mc.buttonMode = true;
btn6_mc.buttonMode = true;
btn7_mc.buttonMode = true;
and
btn5_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
btn5_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
btn6_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
btn6_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
btn7_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
btn7_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
After this, when I preview in flash player, it’s like the animation doesn’t obey the stops.
What an I doing wrong? Can you help me?
Thanks,
Looser
michael stephan
thanks! I have been looking for ages for info showing how to make a more flexible button like this.