An Introduction to Sophie

The current release of Sophie is missing much of the functionality that will be in the final release version of Sophie, but it can still do many things. This tutorial will walk you through starting Sophie and making a simple book.

To get started with Sophie, you need to download it from the download page. You'll end up with a .zip file; you'll need to unzip that. If you're running on Windows, double-click the file build_run.bat to start Sophie. If you're running Linux, execute build_run.sh. If you're running Mac, things are a bit more complicated: see the installation instructions here for instructions on how to get Sophie running on a Mac.

Part 1: The Basics of the Sophie Interface

When you start up Sophie, it will look something like this:

That red rectangle in the middle of the Sophie window is the book desktop. The book desktop appears behind all books that are open in Sophie; it works just like a normal book and it can be used as a scratchpad to try things out or to keep media that you're going to use later.

To the left, right, and below the book desktop are Sophie's flaps, tabs, and palettes. There are top, bottom, and right flaps; inside each flap are different tabs, and inside each tab are palettes. These contain different parts of Sophie's functionality; we'll go into specific things that the palettes do as this tutorial progresses, but for now you should just know that they're there.

The bottom flap is a little different from the other flaps, in that it is only used for working with timelines. Right now, Sophie starts up with this flap open. With this book, we're not going to work with timelines, so let's close that flap. At the bottom of the Sophie window, you'll see a little tab marked "1:Bottom Flap". Click that and the flap will be hidden:

The tab isn't gone forever - if you want, you can get the flap back by clicking that tab again. You can click on the tab of any flap, tab, or palette in Sophie to hide it.

A major part of Sophie's interface is in its use of halos and HUDs. Halos are the little icons that appear on the Sophie workspace. You can see three of them around the edges of the book desktop: a little paint bucket and a "plus" sign in the upper left corner and a two-headed arrow in the bottom right corner. If you move your mouse over them, a tooltip will appear to tell you what they do.

There are two basic kinds of halos in Sophie. The first kind can be used directly - by clicking or dragging. The second kind opens a HUD (short for head's up display) which offers you more controls. The idea of halos is to have as much functionality as possible close to where you are in Sophie, so you have to work less. This interface takes a little bit of time to get used to, but once you figure out the basics of it, you'll be able to do complicated things very quickly.

Here's a quick example. The halo in the bottom right corner of the book desktop - the one with the arrows - is the book resize halo, which is a halo you use directly. If you move your mouse over this halo, it says "Drag to resize the page", which is what it does. Drag this halo so the short wide rectangle becomes a tall, thin rectangle, like this:

Not so hard. Now let's try the second kind of halo: one that opens a HUD. If you move your mouse over the halo in the top left corner - the one with the paint bucket - it says "Change the border and background". Click on this halo. What you'll see is the border and background HUD, which looks like this:

This HUD contains controls for the borders and backgrounds of pages. You can make it go away by clicking the paint bucket halo, which is right above it. Try that. Then open it again, and look at what's in it. The top half of the HUD contains information about the page's border: the top, bottom, left, and right borders are all set to "10". "Border color" has a red square next to it. These are, in fact, the settings of the border of the book desktop: it's a red border that's 10 pixels thick.

The HUD not only tells us this, it also lets us change these settings. If you put another value into the fields for the border width - say "1" or "0" - you'll see the border instantly shrink or disappear. (You might not notice it for the top border because the HUD is hiding it, but these changes are instantaneous.) You can also change the color of the border: to do this, click on the red square to open the color picker, which looks like this:

If you choose another color and click OK, the color will be changed. You can keep making these changes as long as you have the HUD open. When you're done, just click the paint bucket halo to close the HUD. HUDs aren't quite like regular windows: you can leave them open while you do other things and come back to them.

Part 2: Making a New Book

Next, let's make a new book. To make a new book, choose File > New Book. Now your Sophie will look something like this:

Now let's import an image. Right-click this Sophie logo to download it to your desktop - or you might just be able to drag it from your browser to your desktop:

You should have a image on your desktop named SophieLogo.jpg. Go back to Sophie and choose Insert > Image from the menu bars. You'll be asked to find an image; navigate to your desktop and select SophieLogo.jpg. Click OK to import it. You'll have something like this:

One thing you'll immediately notice is that the image is the wrong size: this release of Sophie imports all resources in a frame 280 pixels wide by 210 pixels high. But we can change this. To do this, you need to select the image by clicking on it. The halos will appear above the frame. Halos are an important part of the Sophie interface: they provide access to more complicated functionality right by the object that's being manipulated. There are a lot of halos - you can find out about them in the documentatino? - but the one we want is the frame size and position halo, which is the second halo from the left, the red square being cross by a diagonal arrow. Click on that to open the frame size and position HUD, which looks like this:

Now we're going to change the width and height of the image back to what it should be, which is 137 pixels wide by 62 pixels high. Move your cursor into the field that's labeled Width and change it to 137. Put your cursor in the field labeled Height and change it to 62. The size of the image's frame will instantly change - but you probably won't be able to see it until you click the frame size & position halo again, which will close the frame size & position HUD. What you'll see is something like this:

What you'll notice now is that the image has a bright red border around it. Right now, all frames in Sophie automatically start with a bright red border. This can be changed via halo as well. To do this, click the borders and margins halo, which is the first halo on the left - the one with a paint bucket. Clicking that will open the borders and margins HUD, which looks like this:

This HUD controls the borders and fills of frames. If you look at it, you'll see that this frame has a 10 pixel margin on all sides. Let's change all of those values to 0, so that there's no border at all. The border will disappear; click the border and fill halo again to close the HUD. Things are looking better now - there's no red border.

Now let's move the Sophie logo into the upper right corner of the page. To do this, you need to find the drag handle on the frame. The drag handle is the little cross-shaped halo above the middle of the frame:

This halo works a little bit differently: it's a handle, which means you need to drag it. Click on it and drag the frame in the direction you want it to move, until you have something like this:

Great. Now: let's change the background of the page. To do this, click on the page itself, so the page halos in the upper left corner appear:

These halos work a lot like the frame halos. Choose the page border and fill halo; it's the first one on the left, the little paint bucket. Click it to open the page border and fill HUD, which looks just like the frame border and fill HUD. This time, let's change the page's fill to a gradient. To do this, click on the black square labeled gradient. This will bring up the gradient control window, which looks something like this:

Play around with the gradient controls until you've made something that you like - try clicking on the little squares if you're confused - then click OK to close the gradient control window. Then click on the page border and fill halo to close it. Your book should now look very different:

You've now learned the basics of working with halos and HUDs in Sophie. Keep playing around - if you choose Insert > Text from the menu bars, you can insert an empty text frame in your book which has halos just like an image frame. Text support in this release of Sophie is limited, but if you double-click in an empty text frame, you can enter text in it. See if you can make this:

It's not very hard. More tutorials will be on the way with new release of Sophie - stay tuned!

For More Help

You might look at the Sophie documentation, which goes through the functioning parts of Sophie.