HyperActive Software

Home What's New Who We Are What We Do Solutions Resources

We make software for humans. Custom Mac, Windows, iOS and Android solutions in HyperCard, MetaCard, and RunRev LiveCode


Converting a HyperCard stack to LiveCode

It's Done! Except...

Congratulations! The converted stack is ready to run now on any OS that LiveCode supports, which is most of them. Without any changes, you can copy the stack to any computer and it will work as long as that computer has the platform-specific version of LiveCode installed. The stack will take on the look and feel of the current OS without any additional work on your part.

There are some optional additions over and above those provided in the original stack which you may want to make though. The primary enhancement for many will be the addition of LiveCode's integrated color capabilities.

We will leave color choices up to your own creative talents, and offer only a few guidelines on how LiveCode's color works.

Please remember: Jim Stephenson has been kind enough to allow HyperActive Software to use his Tech Support TimeSaver stack as the basis for this tutorial. He owns the copyright and retains the right to distribute the stack and all its derivatives. The changes you make to Tech Support TimeSaver while working through this conversion tutorial are yours to use as you like, but you may not distribute your derivative stack to anyone else. You do have the right to send others the original, unaltered HyperCard stack and a link to this tutorial, so that they can create their own LiveCode derivatives.

Accessing color

The easiest way to color objects is to use the Color Palette, which is accessed by clicking the Colors button in the tool bar while any object is selected. The easiest way to determine which color setting does what is just to experiment.

Alternately, color can be scripted. This is most useful for stacks that need to change object colors dynamically via scripts in response to user actions, but it is also possible to assign colors during stack development by typing color commands into the message box. See LiveCode's documentation for more information on scripting color commands.

LiveCode's color and pattern inheritance

LiveCode's color and pattern assignments follow a hierarchy of inheritance very similar to the message hierarchy. If an object has a color assignment, then that is the color it will display. (Actually, objects can have up to 8 different color assignments. Each one is inherited independently.) If there is no color assignment for an object, it inherits color from the next object up the hierarchy. If that object has no color assignment, it inherits from the object two steps up, and so forth, all the way up to the Home stack level. If the Home stack has no color assignment, then some colors (such as hilite color) are pulled from the operating system preferences.

For example, say we have a button in a group, which is placed on a card. If the button has its backgroundColor set to blue and its foregroundColor set to gray50, then the button will have gray text on a blue background. If the button has no color properties set, then LiveCode will look at the group that contains the button to see if the group has any color properties set. If so, the button will take on the group's color settings. If there is no group color assigned, LiveCode looks at the card, then the stack, and then the Home stack to see if any of those have color assignments. The first place it finds a color assignment, that will be the colors the button assumes.

Patterns are inherited in the same way. You can set a group's background pattern, and every object in the group will use the same background pattern unless they have their own assignment. This is especially handy in OS X, where dialogs contain background patterns rather than colors.

This is convenient if you decide to change a color scheme in the middle of designing a stack. If you set the the foregroundColor of a group to gray50, then every text element in the group (this includes field text and button labels) will use that color for text. No colors at all need to be assigned to individual buttons or objects unless you want those objects to use different colors than the group's. If you later decide you don't want gray50, just set the group's foregroundColor to something else and every text element in the group, except those which have been set individually, will take on the new color. It is possible to change every text element in an entire stack with a single command, just by setting a stack's foregroundColor property. Not that you probably would -- but you can.

Moving HyperCard color into LiveCode

If you are porting a HyperCard stack that uses AddColor, much of the original color will have to be reassigned manually, especially if you have assigned color to buttons and fields individually. This is one of the more tedious tasks in porting a HyperCard stack, but fortunately it only needs to be done once.

If you have many objects that use the same colors, you can often write a short, temporary stack script that responds to a keystroke or some other trigger and then sets all the color properties for the selected object at once. HyperActive Software has used this method with fair success in the stack ports we've done.

If your stack employs color PICT resources for use with HyperCard's AddColor or Picture commands, you can bring them into LiveCode and display them with LiveCode's syntax.

One of the easiest ways to pull all the PICT resources out of your HyperCard stack is with the shareware program GraphicConverter from Lemke Software. This program can scan the resource fork of a file and save every PICT, icon, and other image to files on disk. It can also batch-convert those files to jpg or gif format, which are not only efficient graphic formats, but ones which all operating systems understand. LiveCode will allow you to place images in PICT format, but they will only display on Macintoshes. It's better to just convert them right off the bat before bringing them into LiveCode. LiveCode supports gif transparency, so that's the format you should use for any images where white space should be transparent.

Once you have converted the PICTs to jpg or gif, use the Import As Control menu item under LiveCode's File menu. This will bring the image into LiveCode as an physical object integrated into the stack's file on disk.

Note: If you prefer that only a reference to the image on disk is placed in the stack, use the "New Referenced Control" menu item in the File menu instead. Remember that if the stack is run on another computer without the referenced image on disk, the picture will disappear from the card. Images which are physically imported (i.e., not merely referenced) become part of the stack's file structure, and the original image on disk is no longer needed. In order to keep stack loading times short and memory requirements lower, it is often preferable to merely reference large images or movie objects. You will have to remember to copy the referenced files along with the stack if you decide to move your stack to another computer.

In LiveCode, images are objects. You can give them scripts, move them around, have them respond to mouse events, double-click them with the edit tool to edit their properties, and so on.

Up to top | Converting Stacks to LiveCode - TOC | Next Page