 Contents |
|
 Updated: 10/27/2003 |
|
| |
|
|
|
|
Manual Docs
|
You can download this manual in PDF format here
|
|
|
|
|
|
Getting Started
First, if you haven't yet, check out the ButtonGadget Tour .
There's also an online tutorial to learn how to build your own ButtonSets from scratch.
|
|
|
|
|
|
About ButtonGadget 3 minute tutorial
Welcome to the About ButtonGadget section of the manual. After installing ButtonGadget, open it to the main screen.
Before we discuss the interface controls, let's quickly build some buttons and see how easy it is! Just click on the Load Button Set button and choose the Brushed Metal button from the scrolling list. Note the button named Online Buttons at the lower left of the button library screen. This will open a browser and take you to a constantly updated online library where more buttons are available including user contributions.
Click the Select button and the various button states will automatically load with the text Brushed Metal on them. First, Let's change the brushed metal button to say Hello World. So, highlight the text Brushed Metal in the Button Text field and type Hello, press return and type World. Press tab to render the text to the selected button (indicated by the blue vertical line next to it). Press the Apply Text to All button and watch as all buttons are rendered to their respective positions.
Next, let's change the background color. Select the Button Image tab and click the Background Color button and choose a medium blue color. The active button will now display the newly rendered background. Notice the transparent shadow is now blue and not grey. This is a feature called alpha masking which allows you to create higher quality images with more subtle effects! Click the Set Color for All button to apply the background color settings to all the buttons.
Let's say we only want to use the Normal, Mouse Over, and Mouse Down states for this button. Uncheck the Disabled checkbox to hide the Disabled button. Now, the Disabled button will not be rendered or exported.
To render the button, select the View Button tab and press the button, Build Button. The screen will refresh as the various button states are composited. After a few seconds, the button is built. You can now interact with the button. Roll your mouse over it and press down on it.
Let's now save the buttons as JPG's. Click on the Export Images button and choose a folder to put the images in. You will be prompted if you would like to create javascript to go with the buttons you are exporting. Select Yes.
That's all there is to it. You've just built custom professional looking buttons in only a few seconds! There are more powerful and advanced features in ButtonGadget, such as the ability to make your own ButtonSets from scratch. To learn more about these and the ButtonGadget interface, please refer to the manual on the ButtonGadget website.
Button thoughts
So, what are buttons and how do you use them? ButtonGadget renders various button states. This includes: Normal, Mouse Over, Mouse Down and Disabled. A ButtonSet is a file, which contains one or more of the button states. Some ButtonSets contain all four button states, others contain one or two- it depends on the who authored them and their intended use. Most people designing webs will use only two button states, Normal and Mouse Over. Why then four states? In some instances (the top navigation bar of www.buttongadget.com) the Mouse Down state is also used. Application interface designers often need a fourth Disabled state for buttons.
So, how does one use them? Well, a web designer would render Normal and Mouse Over button states as two separate images, then upload to a server and use javascript to swap the images when the cursor rolled over it. In any case, it is beyond the scope of this manual to describe all situations and techniques for using custom rendered buttons. It is sufficient to say that ButtonGadget can solve most all button rendering tasks.
|
|
|
|
|
|
Using ButtonGadget with the Hemingway Content Management System
To create up/down buttons for Hemingway:
Open ButtonGadget and load a buttonset. Turn off the MouseDown and Disabled (these aren't used for exporting with javascript).
If you want, you can 'switch' the MouseDown and MouseOver buttons -- Do the following:
Turn off all the buttons except for the ones you want to swap images. So, if you wanted to switch the MouseDown with the MouseOver, turn off the Normal and Disabled views. Then hilight the MouseDown state by clicking on it (the blue vertical bar will now be next to the MouseDown state). Then click the 'Copy Image to All' button. This will put the image which was in the MouseDown Position to the MouseOver position.
Next, finish building your button as you would normally. Type in the text and copy it to the other button states and position it.
Then under the View Button Tab, Alt-Click on the * (asterik) button. You will get the message: File Naming set for Hemingway -- which means it will add an _x to the name of the button. We generally up the JPG quality to 90%. Click Export Images button and give it a name like fred. Answer Yes to the Do you wish to create javascript prompt. In the next dialog box, enter in the name of link you wish to go to. If you are linking to a file, then just put the name of the file there. Example: fred.iwz (MagicItem file which has already been uploaded as an item) or fred_x.iwz (MagicItem file which will be uploaded using HemUtils File Manager).
This will create a set of files: fred_x.jpg, fred_over_x.jpg, and fred.htm. Open the fred.htm file in Notepad and copy all the text from it and put it into a Hemingway Item -- *make sure and check the use HTML box!*
Now, open up HemUtils, launch File Manager, and upload the images fred_x.jpg and fred_over_x.jpg (and the MagicItem file if you're using one). Now build the website and everything should work just fine! BTW, this only works for ONE button per page. If you wish to put multiple buttons on a page, then you'll need to edit the javascript code per the instructions on this faq:
How can I modify the Javascript so muliple buttons on a page will work?
at
http://www.buttongadget.com/buttongadget/FAQs.htm
|
|
 |
|
Getting Started 