Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Summary:

Invisible Buttons in Flash

    ●  Make an invisible clickable button in Flash!

    ●   Even if you already have a button object of some sort, you still need some way to start and stop your movie.


Learn About:

Actionscript 3 Invisible Buttons Frames

  •   This tutorial is part of the Aesop's Fables and the Drag and Drop Projects.

Other People's Work:

Here are examples of work inspired by this tutorial.


Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #1: Open YOUR PROJECT in Flash ~

Open YOUR PROJECT in Flash

 

 

… (Remember: all these tutorials are intended to be
applied to YOUR PROJECT) …

 

 

 

 

… go to your opening Scene - or WHEREVER you need a button …

… make a New Layer on top of your other layers & call it "Button."



Step#2: Draw the Button ~

Select the Rectangle or Oval Tool - whichever shape button you need.

Draw a shape the size of the button you want.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Or Drag a shape over the whole stage area - WHEREVER you need a button.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step#3: Convert the Shape into a Button ~

Get the Selection Tool or hit the keyboard shortcut letter (v) …

selection tool

… Double-Click the shape, hit (F8) & convert to a Button.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step#4: Double-Click the Shape again ~

Double-Click the button AGAIN …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… to open up a new view.

button inside


Step#5: Drag Frame 1 over to Hit ~

Click once on Frame 1

click

… then click and drag the frame over to the Hit.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step#6: Go Back to Scene 1 ~

GO BACK TO Scene 1 by clicking on in the menu bar.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step#7: Select the Button ONCE ~

Select the button by clicking ONCE on it.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

 

 

 

You know the Button is selected when it has the blue line around it.

 

Step#8: Name the Instance ~

With the button selected, go to Properties and find the Instance Name area …

instance name

Call it start_btn - spelled exactly correct!

my button


Step #9: Copy the Code ~

Click on your Actions and Labels keyframe where you'd like the pause):

Hit Alt (⌥)alt option key F9 - open the Actions panel and copy this code:

start_btn.addEventListener(MouseEvent.CLICK, go);
function go(event:MouseEvent):void {
nextScene();
}

Note: If you're using Frames, use: nextFrame( );


Step#10: Paste the Code ~

Then click in the Code area, clear some space, and Paste

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

It looks something like this:

Hit F9 again to close the Actions panel.


Last Step: Save and View your work ~

View your work by hitting the keyboard shortcut: Cmd(⌘)+Enter cmd enter

Save your work as - FIRST_NAME_LAST_NAME_PROJECT_NAME.fla]

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

•   ALWAYS save your projects using the following naming convention:
FIRST_NAME_LAST_NAME_PROJECT_NAME


  •   DO NOT name your project any other way - Improperly named projects will not receive credit and you will be sad.


  •   NEVER leave your work on the desktop or depend on a flash drive - instead, save your work in a folder you can find later - preferably on a virtual drive where it can be backed up.