Quark Forums

Hi, all,

I was just wondering whether you have experienced with buttons at all, whether you like them or not or if you might need more help with this feature?

Interactive Buttons are a great way of spicing up your presentation and giving your users a better user experience, as they can light up when you hover the mouse over it and can look pressed in.

Thanks
Matthias

Ok, since 50% of all post participants do not know how to create buttons, let me do a small excursus:

The challenge:
I want to create a presentation where the user can use arrows to navigate through the button.
To make clearer that these DO something when clicked, I want them to glow when the user moves the mouse over them.
To make them visual appealing, I additionally want them to look pressed in when clicked on and then trigger the action when released (like DVD player buttons).

The traditional approach:
I could now create three arrows, one normal, one glowing one, one pressed in and start with events and actions to define how they react, e.g. hide initially the glow arrow and pressed-in arrow and show glow arrow when mouse over the normal arrow and so on... Nightmare!!!

What are buttons?
Buttons are self-contained elements, that means their appearance is always the same, I can use them in different projects. Buttons can have different states, in their simplest form the normal, mouse over and pressed state (exactly what we want /need here).

In Interactive Designer buttons are a sub-type of the interactive layout. There's different ways to achieve this, via right mouse click, via Interactive palette and via Layout/New.

The easy approach (using buttons):
Create button
Back to our challenge. Let's create a button. Let's assume you already have your interactive project/layout open. Let's create a new button, choose menu "Layout > New". If you use XPert Tools press the little QuarkXPress icon at the lower left hand corner.

In the "New Layout" dialog, first name it, maybe "Right Arrow button". Then make sure your "Layout Type" is set to "Interactive" and your "Interactive Type" to "Button".

Let's choose as "Button Type" simply "Simple". Now for the size, maybe 80x40 (or anything you like).

Design button
Now you have a layout with four pages. Note, that these are not really pages but states, the "Button how it looks when just sitting on the page", the "Changed look when being louse-overed" and "That's how button looks when clicked" state. The last page is the hit area, I will explain that later, let's design the three states first.

So on the first page, called "Up", create an arrow, let's keep it simple for this example, just a line with an arrow.

Copy the line, go to second page, called "Over". Paste in place. Give it a different color (or go wild by creating a glow shadow).

Copy the new line, go to third page, called "Down". Paste in place. Select the line, make it a bezier curve (menu "Item > Shape > Bezier curve (last menu)". Option-click the line about in the middle, add a new bezier knot, drag it down a bit (that's my simple looks pressed in effect).

Done with our design.

Define hit area

Now we have to define where the button reacts to the mouse. The line is pretty thin, so it migth be tedious for the user to try to hit it with the mouse cursor. So we want to enlarge the area, allowing the user to click on the whole 80x40 pixel area. That's the hit area.

Therefore on the last page, page 4, called "Hit", create a new picture box, x/y: 0/0, w/h 80/40. Just make sure it does NOT have the color "None" (any other color, e.g. white, will do).

Use the button in an interactive layout

Go back to your presentation layout by clicking on the tab below.

Again, there's different ways to use the button, a simple way is to open the "Shared Content" palette and just drag it into your layout. You are done.

Preview your layout (preview button on the lower edge of the document window).

You can see your button already behaves as designed, whenever you mouse over the (invisible) hit area, the button changes color, glows. When you click it, the button looks pressed in (third state you designed).

So it looks as-designed, but it doesn't do anything. Quit out of Adobe Flash Player.

The nice thing is, you can give this button now to anybody else using Interactive Designer, it will always behave as you designed it. Great way to build button libraries.

Last thing, let's assign an actions to the button, so it that is DOES trigger something.

Assign action to button

Open your Interactive palette. In the "Object" tab you already see your button. Select it (if it is not already selected). Here you can even give it a key alias.

Go to the "Event" tab. For the "Click up" event e.g. specify "Page > Display Next". Done.

Again, go further by assigning a click sound to the "Click down" event. Put it on your master page to make it appear on all pages. Etc.

Preview SWF, try it.

More
Find out more about buttons here:
http://euro.quark.com/en/service/desktop/training/lynda/

And as buttons are composition zones, you can easily share them between layouts, projects,even across machines. If you can't figure out how, let me know.

Enjoy!
Matthias