10 Minutes with Flash: Creating a Custom Panel
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Flash MX 2004 has a lot of panels, but sometimes I wish there was one for accessing online resources such as the Macromedia Flash Exchange and FlashKit. That way, I could just jump to those sites from within Flash. It's just too much work to open a browser window and type in a URL. So I decided to make my own panel and add it to my custom panel set. Then it occurred to me that this would make a good topic for an article.
This panel won't be some elaborate panel that serves up search results from FlashKit because I have only 10 minutes to show you how to build it, but this tutorial will reveal how to get started if you decide to make some custom panels of your own.
Just Another Flash Movie
The secret to making a custom panel is to know that a panel is really just another Flash movie. In other words, you'll make a simple movie with a couple of buttons in it and save it to a specific folder in the Flash install directory.
To create the movie:
Create a new Flash document and save it as Resources_panel.fla. You can save it wherever you want.
Change the stage dimensions to 210x150. This is somewhat arbitrary because the panels built into Flash have varying sizes, but when panels are docked, they are typically about 210 pixels wide (give or take, depending on your particular panel layout).
Rename Layer 1 to buttons.
Add a new layer to the timeline named actions.
On the buttons layer, use the Text tool to type Flash Exchange on the stage.
Convert the text to a Button symbol named exchange button. You can edit the button's Over, Down, and Hit states if you like, but it's not necessary.
Next, as with any other button in any other movie, you need to write some ActionScript that tells the button what to do. In this case, you want the button to launch your browser and open the Macromedia Flash Exchange (an online resource for Flash extensions and components). First, however, you should to set a few properties for the movie so the panel acts like a panel instead of a Flash movie. To make this happen:
Select frame 1 of the actions layer and open the Actions panel.
In the Actions panel, add a stop() command:
Next, add the following code:
stop();
Stage.align = "LT"; Stage.scaleMode = "noScale"; Stage.showMenu = false;
This script tells Flash to align everything in the movie to the left side of the stage, prevent scaling, and hide the contextual menu. Why add this code? We do this because a panel can be scaled within Flash, and we want to keep things organized. Without the preceding code, the contents of the panel would shift positions.
Next, you need to finish setting up your buttons. To do this, you can write the script that tells the exchange button instance what to do; then create a second button that opens the FlashKit web site.
Select the exchange button instance and assign it the instance name exchange_btn via the Properties panel. We need the instance name to target the button through ActionScript.
To use the button to launch the Flash Exchange, add the following script to frame 1 of the actions layer:
Create the FlashKit button by typing FlashKit on the stage and converting the text to a Button symbol.
Assign the new button the instance name flashkit_btn.
Add the following code to frame 1 of the actions layer to make the button launch FlashKit.com in a web browser:
exchange_btn.onRelease = function() {
getURL("http://www.macromedia.com/exchange/flash");
};
flashkit_btn.onRelease = function() {
getURL("http://www.flashkit.com");
};
Your completed ActionScript should match Figure 1.
)
Figure
1 The completed script for the Resources panel.
If you want to add more buttons to this panel later on, just follow the preceding steps. For now, though, we'll move on to publishing the movie as a panel.