Step-By-Step Graphics Expression article appendix

Opening comments
As usual, my satisfaction at having completed an article of this depth is tempered by the knowledge of all that I didn't include.

Skewed and sheared paths never appeared once. I made no mention of anchored strokes. Patterns, the perspective tool and hatching never cropped up. These types of article are always an exercise in editing... even at the writing stage, what to skip, what to include. That editing is always guided by one main objective: To provide the reader with sufficient inspiration that they might try doing something different. To suggest an alternative that they may not have thought of in finding solutions to their visual problems. Years later, isn't it always the different things that you did that you remember?

For the first time I am able to reduce some of that disappointment as to what didn't make it by uploading additional material prepared for the article here on the web site. I still don't have copy covering the above-mentioned omissions but I can include stuff that was deleted from the article because it would not have been of interest to all the readers. There are other reasons too. For example, the current version of Expression is a bit buggy. Why am I mentioning this now rather than in the article? The article is intended to last long after this first version of the application has slipped into the pages of history, why waste ink on stuff that is probably going to be fixed in the next revision anyway. This is a more appropriate spot to cover some of the more time-sensitive information. The following items are in no particular order. They are just notes in which you might be interested after having read the piece in Step-By-Step.

Sidebar: Speeding up redraw...
Expression is currently incapable of filling a large monitor with a full window -- and perhaps it's best that it doesn't. Even on a speedy computer, you have to wait for everything to redraw when you're working in Preview mode, and redraw is so slow that it might be unbearably painful on a large image area. Drawing in any mode other than Preview is inconvenient at best, but here are a few ways you can speed things up:

System 8 problems...
There appear to be some significant problems relating to use of this program and System 8 on the Mac. I haven't really used the program under the new operating system much (except to create the screen shots for the article) so I can't really say what the problems might be... still, I had a larger number of freezes, crashes and inexplicable behavior within the program once I had installed System 8. You can still do stuff, it's just that some loopy things seem to happen, particularly when you have other applications running (which, of course, might mean this has nothing to do with Expression). Keep system 7.5.3 handy until the next update to the program. One thing that might help (It certainly helps to keep SuperCard from crashing) is to ensure that all desktop windows viewed in list mode are closed while running the application.

Wildly different colours
As I said in the article, I have been unable to get reliable colour out of this program... compare the two images that follow and you'll see what I mean. (Fig01)
RGB vs CMYK colour

The New Layer Crash
While I was preparing the artwork for this piece the program would consistently crash immediately after I had created and named a new layer. As soon as I hit the next tool it would crash.

Tip #1
Save before you create a new layer... just in case it happens to you.
Tip #2
If it does hang (it invokes the Mac alert sound repetitively as though it were a printer that had run out of paper) then do a force quit... that's Command-Option-Escape. Then, open the Expression folder and open the document named RESCU000-RCU or something similar. Just drag it to the Expression icon. It will complain, telling you that it is not the right kind of document etc... ignore its cranky messages and just press on. The Untitled document that will appear on the screen should be the same artwork in the same state it was just before the crash.
Tip #3
One thing that seemed to work a lot for me was to go to Path Quality view just before invoking the new layer and setting it up, then I would switch back to Preview Quality when I was ready to draw again.

Path Operations
Warning! If you are going to do the Path operations (like Front minus back etc) just remember that the order of them is reversed to the way you would expect. Front minus Back is really Back minus Front... or at least, it was in all my tests. Secondly, unlike FreeHand and Illustrator, this application creates an entirely new path after the operation, sometimes with plenty of new nodes so, if you want to keep your nodes, edit your existing paths or do the operation in Freehand or Illustrator.

Brush names
In the article I mentioned the "Edit Brush Definition" command trick to find out the name of a brush you have used. First you choose the anonymous path, then select "Edit Brush Definition" there, at the top of the edit window's title bar is the name of the brush you used for that path.

Here's another, perhaps more obscure trick if you are having problems finding out what the name of a brush is. Open your Expression file in a word processor that will open any text file (like BBEdit, TexEdit Plus, Microsoft Word) and search for the following string...

SkStroke: {

The name of your brush will immediately follow the braceleft (the curly bracket). You may need to search through all the occurrences of that particular string until you find it. If that is going to be too much hassle in a 400k document, try copying and pasting the brush stroke into a new document. Opening the new document with the word processor and do your search. The curious will also notice that sometimes the program seems to redefine the brush shape every single time the brush is called... no wonder the files can get big quickly.

File diddling
The files are actually ASCII text files so you can open them in a word processor (provided you force the word processor to ignore the file type and creator notation) They look similar to object-oriented PostScript files. I'm sure they can be edited but I think you would be doing it at your own risk. Edit only on a copy of the original file.

Multi-stage blending
This isn't really a tip... this is just plain cool. Create a path and duplicate it off down the page say, three times, make each shape slightly different. Now select all the paths and choose Objects:Blend Paths. Key in a number of steps and BOOM! The process of advanced multi-stage blending has just been made a whole lot simpler. I often avoid doing multistage blends because they take a while to set up and subsequently engineer with the blend tool in FreeHand or Illustrator. Unfortunately, here in Expression they are not live blends (as in FreeHand) but they are a whole lot better than the laborious, bound-to-be-a-mistake-in-there-somewhere, manual multi-stage blends in Illustrator.

Animation issues
For the type of animation we do at RoboShop, there are some interesting possibilities with this program. Essentially in using this application to generate animated sequences we are using two key features of the program.

  1. The Graphic Stroke. By being able to define the shape of our stroked object we are relinquishing the redrawing of the object... leaving it up to Expression.
  2. The multi-stage blend. I briefly alluded to this just now. This program will let you select several paths and it will blend between them. I know it sounds easy but you do have to do some prep work.
Obviously we are not talking about animating Tweety Bird here but much more simple things. Perhaps components of a larger piece of animation to be assembled in After Effects. Anything that prevents you from actually drawing frames by hand is naturally of tremendous benefit.

Let's look at an example: I would like to create a sequence that will show grass blades blowing in the wind. Unless it was destined for network TV or some big budget feature no one in their right mind would animate this by hand. I once animated an eye blink... I had 60 eyelashes, each a different shape, that were active in each of 60 frames. Simple math told me I was orchestrating the shapes and positions of well over three thousand little eyelashes. There too I used the computer to generate the animation. If I had been required to do it by hand it would have been considerably simpler, less effective and MUCH more expensive. The same goes for this sequence. Here though, we have Expression to help us which will allow us to create an even more elaborate sequence for even less effort. For the purpose of the demonstration I will simplify it, you can project just how it could be done in real project.

First I define the document to be the size of my animated sequence. I then create two items, one is a blade of grass and the other is a bullrush. (For the more advanced animator it should be noted that at this point one would also duplicate these two brushes and fill the dupes with black. This would enable us to create a duplicate sequence to be used as an alpha channel for the colour image)

Now I draw six blades of grass and 3 bullrushes using the bézier drawing tool. Two points per blade maximum for simplicity. I'll keep them well spaced apart, however they are all sort of leaning in the same direction. (Fig 02)
initial frame

All the grass blades have a width of 2.0 pts and the bullrushes a thickness of 14.0 pts. I then duplicate these blades, line them up with the originals and then reshape them so that they are all now leaning in roughly the opposite direction. (Fig 03)
modified frame

Now select the two versions of blade 1 and blend between them in 5 intervening steps. Do the same for all the other pairs. (On a real job you may want to define a Quick Key or a Tempo key sequence command to automate this part of the process as it is mind-numbingly boring.) (Fig04)
all frames present

Now we have all the blades of grass in the entire sequence and all the bullrushes visible. Time to build the sequence. Save the file (maybe save a backup too), then select the first blade in each sequence. Choose Invert Selection and hit the Delete Key. Render out to a bitmap file #1. Revert to saved, select all and deselect the second blade in each sequence... and so on until you have 7 bitmap files. Such a sequence can be masked and repeated several times to create much more grass. That's what I did here in Adobe After Effects. The original sequence of 7 frames was followed by a reverse of the same 7 frames. This double sequence was duplicated 3 times. I then superimposed 4 other copies of this sequence over the top of the original sequence, slightly offset in terms of position and timing. That's a lot of animation for just an hour's work. Mind you, in a real job it would be set up to be much more complicated than this.

Click here to view the "Waving Grass"
(939 Kbyte QuickTime movie)
If the link above doesn't work, try clicking this link...

Continuing a path
This was kind of embarrassing and it is a testament to the importance of reading and re-reading a manual. I read the manual shortly after doing the tutorial for the application. Somewhere in there I must have read (and immediately forgotten) how you can allow the continuation of paths.

To continue a path you must first check the "Drawing Tools: Append to Path" checkbox in the File:Preferences dialogue box. Then, with any drawing tool except the freehand tool selected, float the cursor over an end point of the path you want to continue. A tilde sign will appear next to it and you can continue drawing at this point. (To continue using the freehand tool depress the shift key when your cursor is over the path endpoint.)

Well, that's how it appears in the article now, but it wasn't always the way. For most of the production period it stated...

Paths are impossible to continue once released. If you stop drawing after the third point in a path for some reason and come back to it later you cannot continue it (except to insert other points in the path). It drives me bananas!
This, and a whole pile of assumptions and assertions were part of a final fact checking email I sent to Terry Hemphill, the Expression Product Manager at MetaCreations. He very kindly and patiently took the time to remind me how you continue paths once you have allowed the option in the Preferences dialogue. It was at this point, while I was still wiping the egg off my face, that I realized why you need to depress the shift key when you want to continue freehand paths.

Think of it. If you're sketching up some grass with a whole pile of closely spaced strokes, the very last thing you want is for them to be spontaneously joining up whenever you get close to the endpoint of an existing path.

Hairstyles
I received some interesting email recently from Dan Hassini who had read the article. Here's how he is using Expression...

I've been using Expression for over a year now and this is the FIRST article I've seen on it. I'm always scouring every publication for articles on it. I think it's a great program although its color management is pretty lame. I don't know why, since it's a vector program, you can't specify a CMYK palette and then use that in your document.

I use it under Windows 95. I illustrate hairstyles and haircutting diagrams with it for a company that sells large point of purchase hairstyle posters to salons. The illustrations come on a "how-to" sheet. I'll put the photos under my Wacom and draw the faces and hair. Then import it into Draw 7 and add lines, numbers, measurements, etc. (Fig05)

all frames present
I usually trace over the photographs under my Wacom tablet, since you can't import bitmaps into Expression. Then I'll export the drawings as .ai's and import them into Corel Draw and add other diagram info like lines and measurements. I've really got it down to a science and it takes me about 2 hours to produce 4 drawings.

Graphic Design and Illustration is a freelance gig I do. I cut hair full-time. The company that produces these haircut instruction sheets is always looking for this combo hairstylist/illustrator, so it works out really well.

Well, the fact that Dan has a day job in no way detracts from the graphic work that he does. He and his brother have put together a web site that is impressive in its simplicity and organization. Check it out at http://www.PaternoGroup.com

In closing
That's it. Feel free to send me email if you have any comments or questions, my address is there at the bottom. In all the years I have been writing for Step-By-Step I have received two letters and about four telephone calls concerning the material I have written. So please don't feel that you will be bothering me if you send along your thoughts! It's quite nice to hear from people who read this stuff (yep, even those folks that didn't like it or don't agree) because oftentimes I feel as though I am writing just for Talitha (the editor) and I.

Simon Tuckett via email: simon@roboshop.com


Home   Background   Portfolio    Graphic of the Month   Articles

Last update: January 13, 1998.