wiki:ITERATION_08/Release/UserDocumentation/AnIntroductionToSophie/02MakingANewBook
Last modified 16 years ago Last modified on 06/05/09 23:09:13

Error: Macro BackLinksMenu(None) failed
compressed data is corrupt

Part 2: Making a New Book

For this tutorial, let's make a new book. To make a new book, go to the menu bars choose File > New Book. (You could also press control-N.) Your Sophie will look something like this:

source:/trunk/sophie2-platform/doc/userdoc-images/RELEASE_8/SophieTutorial7.png

(I've hidden the right flap so that there's more room for the book's window and it doesn't grow scroll bars; if your Sophie window is bigger than mine, you won't need to do this.)

One thing to notice now that you have a book open is that the book's name appears in the tab bar at the top of the interface next to the icon for the book desktop. If you click on the desktop icon, you'll see your desktop; if you click back on New Book B, you'll return to looking at your new book.

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:

source:/trunk/sophie2-platform/doc/userdoc-images/RELEASE_6/SophieLogo.jpg

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:

source:/trunk/sophie2-platform/doc/userdoc-images/RELEASE_6/SophieTutorial3.png

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 documentation - 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:

source:/trunk/sophie2-platform/doc/userdoc-images/RELEASE_6/SophieTutorial4.png

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:

source:/trunk/sophie2-platform/doc/userdoc-images/RELEASE_6/SophieTutorial5.png

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:

source:/trunk/sophie2-platform/doc/userdoc-images/RELEASE_6/SophieTutorial6.png

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:

source:/trunk/sophie2-platform/doc/userdoc-images/RELEASE_6/SophieTutorial7.png

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:

source:/trunk/sophie2-platform/doc/userdoc-images/RELEASE_6/SophieTutorial8.png

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:

source:/trunk/sophie2-platform/doc/userdoc-images/RELEASE_6/SophieTutorial9.png

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:

source:/trunk/sophie2-platform/doc/userdoc-images/RELEASE_6/SophieTutorial10.png

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:

source:/trunk/sophie2-platform/doc/userdoc-images/RELEASE_6/SophieTutorial11.png

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:

source:/trunk/sophie2-platform/doc/userdoc-images/RELEASE_6/SophieTutorial12.png