Manual
Preview
Video Classroom
Cool Stuff to Note
Buy It
Dan Shafer's quick tutorial
Thanks to Dan Shafer for pulling this documentation together so swiftly!
Preview
Video Classroom
Cool Stuff to Note
Buy It
Dan Shafer's quick tutorial
Thanks to Dan Shafer for pulling this documentation together so swiftly!
This document provides a brief introduction to Altuit's Interface Designer tool for Revolution. It is designed to get you started and to enable you to understand both the basic working approach ID takes and how to build rich user interfaces on your Revolution stacks and applications in minutes.There is much more depth to ID than this document covers. We assume in this document that you are comfortable with Revolution and its IDE. In other words, this document is not for newbies or for people who prefer their tools fully and properly documented. That will come in due course.
Setting Up Interface Designer
Interface Designer works with Altuit's altPlugin Toolbar, or as a configurable plugin for Rev. Or, you can just open it up and use it when you want to.
Once you have downloaded and installed ID in the altPlugs folder of your Revolution Plug-Ins folder, it will automatically appear as an icon on your altToolbar. Click its icon in the toolbar to open it.
The first thing you want to do is to be sure ID is displayed as a palette rather than as a normal application window. Look at the drag region at the top of the ID window. If it looks "pebbled" then the window is in palette mode and you need do nothing. If it is plain, then you should click on the small orange square in the upper left corner of the window, in the drag region. ID will disappear momentarily and reappear in palette form.
It is important that you always use ID as a palette so that working with your open stacks is more convenient.
Once you have downloaded and installed ID in the altPlugs folder of your Revolution Plug-Ins folder, it will automatically appear as an icon on your altToolbar. Click its icon in the toolbar to open it.
The first thing you want to do is to be sure ID is displayed as a palette rather than as a normal application window. Look at the drag region at the top of the ID window. If it looks "pebbled" then the window is in palette mode and you need do nothing. If it is plain, then you should click on the small orange square in the upper left corner of the window, in the drag region. ID will disappear momentarily and reappear in palette form.
It is important that you always use ID as a palette so that working with your open stacks is more convenient.
What You Can Do With ID
Using ID, you can add and change colors of your stacks, cards, and objects; drop in pre-packaged skins (user interface combinations) and custom components; add lighting and shading effects to the elements of your interface; and many other things that you'll find it useful to explore once you're comfortable with ID.
To work effectively with ID, you must understand how to determine its state. Very often, the effect of your actions in ID will depend on the state of the tool at the time. For the most part, ID is always poised to work on something in the current topStack, including the stack itself. If you find yourself in ID with nothing selected, there will be no text label to the right of the large arrow in the upper portion of the ID palette. With nothing selected, you can't take any actions in ID.
If you want to work first on the stack's interface, click on the "Stack" button in the left side of the main area. Similarly if you want to work on the card, click the "Card" button. If you want to operate on a control or object you've already placed on the stack or card, just click on the big arrow just above the "Image Library" text link and then click on the object in your stack that you wish to modify. The text next to the arrow changes as you select different objects in your stack or application.
To work effectively with ID, you must understand how to determine its state. Very often, the effect of your actions in ID will depend on the state of the tool at the time. For the most part, ID is always poised to work on something in the current topStack, including the stack itself. If you find yourself in ID with nothing selected, there will be no text label to the right of the large arrow in the upper portion of the ID palette. With nothing selected, you can't take any actions in ID.
If you want to work first on the stack's interface, click on the "Stack" button in the left side of the main area. Similarly if you want to work on the card, click the "Card" button. If you want to operate on a control or object you've already placed on the stack or card, just click on the big arrow just above the "Image Library" text link and then click on the object in your stack that you wish to modify. The text next to the arrow changes as you select different objects in your stack or application.
Quick Start
Let's take a whirlwind trip through Interface Designer just to get a feel for how it works.
Create a new mainStack in the usual way. If necessary, resize and position it so it's easy for you to see it and ID at the same time.
OK, let's give the stack a more interesting background color than dull white. We're kind of partial to the modern-looking shades-of-gray interfaces with spot color for variety, so that's what we'll build here.
In ID, select the Colors text link in the mini-toolbar across the top of the main working area.
Click on the Stack button on the left side of the main work area. Notice that the name of the stack appears in the area to the right of the selection arrow just above where the "Colors" link is located.
Click on the gray color chip right below the one labeled "Empty" in the scrolling color chip area and, while holding down the mouse button, drag it over the rectangle next to "backgroundColor" in the small pane to the right. Release it. Notice that the rectangle now has this medium gray color and, voila!, so does your stack. (See the adjacent Figure.)
Let's take a whirlwind trip through Interface Designer just to get a feel for how it works.Create a new mainStack in the usual way. If necessary, resize and position it so it's easy for you to see it and ID at the same time.
OK, let's give the stack a more interesting background color than dull white. We're kind of partial to the modern-looking shades-of-gray interfaces with spot color for variety, so that's what we'll build here.
In ID, select the Colors text link in the mini-toolbar across the top of the main working area.
Click on the Stack button on the left side of the main work area. Notice that the name of the stack appears in the area to the right of the selection arrow just above where the "Colors" link is located.
Click on the gray color chip right below the one labeled "Empty" in the scrolling color chip area and, while holding down the mouse button, drag it over the rectangle next to "backgroundColor" in the small pane to the right. Release it. Notice that the rectangle now has this medium gray color and, voila!, so does your stack. (See the adjacent Figure.)
Now let's create a box near the top of the window and give it an interesting texture as well as a subtle border.Click on the "Controls" link.
Scroll down the list of controls to the one called 'Graphic "gc BOX"' and click on it. Notice that the area to the right of the list fills up with a rectangle shape.
Click on the "copy to topstack" button in the upper right corner of the area where the rectangle is displayed. A dialog box appears asking you to give this object a name. Give it whatever name you like (it's OK for this walk-through to leave the name unchanged but in practice you generally won't want to do that to avoid creating objects with duplicate names). We named ours "box1". Click "OK" or press "Return" to accept the name. Notice that the graphic object appears near the upper left corner of your stack.
Now click on the selection arrow in the upper left portion of the main working area of ID. It turns orange to indicate it's selected and the cursor changes shape to a selection arrow.
Click anywhere inside the box you just created. Notice that selection handles appear around the edges of the box.Resize and reposition the box to your taste. The figure here shows how we did it but, hey, it's your design! Just be sure to leave room for a couple more things in the window.
Let's add a textured lighting effect to the box we just created and positioned. Be sure it stays selected through the following steps.Click on the "Image Library" link.
From the popup menu in the left portion of the main work area, choose "Lighting Effects."
In the scrolling list of lighting effects in the center of the area, click on "LE HiliteCtrBandHor" (for Lighting Effect, Highlighted Center Band Horizontal).
Click on the "Add Light Effect" button in the left portion of the main work area. Your window should now look something like this figure.
Let's add a cool component to the interface we're building. In ID, click on the "Controls" link. Then scroll down and find a control called 'image "spin.gif"'. Click on it, then on the "Copy to topstack" button. As usual, give the new control a meaningful name.
Click on the selection arrow in ID, grab the spin component and move it somewhere interesting. This figure shows what we did with it.
This is as good a time as any (some would say it's already late) to give the stack we're building a meaningful name and save it.Now let's add something just a bit more complex to the UI. How about a custom scrollbar control?
Click on "Controls" and find the one called 'group 'altScrollbarObject'". Click on it. This control is a Revolution group object.
Click on the "copy to topstack" button. Give the scrollbar a meaningful name.
Notice that the newly placed control is already selected. Drag it where you want it in your interface.
We want to make the scrollbar longer. Click on "Edit Group" in the Revolution toolbar. Now you can select the individual components of the group.
Click on the field where the numeric value is displayed and drag it to the right to give you room to expand the width of the scrollbar itself.
Now click on the scrollbar and try to drag its right selection handle to the right. Nothing happens. Why? Look in the ID window and you'll see that the LockLoc checkbox is on (solid orange). The location of the scrollbar has been locked in the group when it was created. Click on that checkbox and now you can resize the scrollbar. Drag it so it's next to the field showing the scrollbar object's value, then click the "LockLoc" button again.
Finally, click on "Edit Group" in the Revolution toolbar again. You should have something that looks like the figure here.
This slider is an example of a custom component that you can place with a single operation from ID, which allows you to define and create new custom components and add them to ID so they can be quickly and easily added to your applications.In this case, let's modify the operational range of the slider. If you select the execution cursor in Revolution and drag the scrollbar "thumb" around, you'll see that it ranges from a low of 1 to a high value of 20. (While you're at it, notice that the spinner control you placed earlier does a cool animation effect when you switch to run mode as well.) Since we've made the scrollbar longer, it seems like it would be good to extend the range of values it can represent.
Because the objects ID places in an interface are just standard Revolution objects, you can modify their behavior in the same way as you'd assembled them directly in the Revolution IDE.
Select the slider, click on "Edit Group" in the Revolution toolbar, then select the scrolling thumb by itself. In the Property Inspector, switch to "Custom Properties" view. It has two custom properties, altSliderMaxValue and altSliderMinValue. Select the maximum value and change it to 100. Apply the change by clicking away from the value in the inspector. Now go back and run the stack again. This time when you drag the scrollbar thumb, the values reflect a range of 1 to 100.
Let's do one last thing. Let's put a nice application title in the area where we have the graphic box and the spinner.Click on the "Controls" link and select the button called "darkButton" from the list. Copy it to your stack and when asked, give it a name that will also serve as its label. We used "IDidIt, Rod!" which, of course, will only be meaningful to people from the United States state of Alaska, while simultaneously plugging the tool itself. Ahem.
Select the newly placed button and position and size it where you want it.
Now switch to the Colors portion of ID and choose the orange color chip. Drag it onto the "foregroundColor" rectangle to the right of the scrolling list of color chips. Notice that the text on the button changes accordingly.
You can now go into Revolution and change the font, size, style and other text characteristics. When we did this, we ended up with something like this figure.
Technology by: Altuit, Inc. | top