M A G N E T I C P A G E S: Tutorial ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Introduction ~~~~~~~~~~~~ This document is designed to give the reader some practical experience in using the Editor. The Editor is used to create your magazine articles. This tutorial will provide step by step instructions for creating several different articles. The articles you will create are the same as those in the Examples section of the sample magazine. If you haven't already looked through the sample magazine, you should do this before going any further. The sample magazine is in the Displayer drawer and can be accessed by double-clicking on the Displayer icon in that drawer. Overview ~~~~~~~~ You should be familiar with the sample magazine layout at this point. The sample magazine structure is as follows: TitlePage | ____Contents____ / \ _______________Examples Tutorials_______________ / / / \ / \ \ \ Text, Sound, Music, and Graphics Pages Text, Sound, Music, and Graphics Pages We will be creating the articles in the tutorial section as well as the tutorial page. The pages we are going to create are the same as those in the the examples section. So before you begin a page, have a look at the finished product in the examples section. Before You Start ~~~~~~~~~~~~~~~~ If you are going to save the articles you create, make a copy of this disk first. I reccommend you save your articles so you can test them with the Displayer. There are five separate articles to create in this tutorial. You should create the 'Tutorials' page first. You may then work through the other pages in any order you like. PAL Users - The tutorial examples have been designed so they may be created on an NTSC machine. This means you will have an extra 56 pixels at the bottom of each page. You can either leave this blank or adjust the page layout to fill this space. 1) Tutorials Page ~~~~~~~~~~~~~~~~~ This page will contain a heading at the top and 4 icons that allow the reader to branch to the other articles in the tutorial section. It is very similar to the Examples page. Have a look at this page before you go any further. 1) Load the Editor by double-clicking on its icon. You will be presented with a 'New Page' requester. Clear the text in the 'Page Title' field and click on OK. 2) Choose 'Load IFF Pic' from the project menu. Enter the following string (without the quotes). "Pictures/Tutorials". Click on OK. We now have a picture to use as the page title. 3) Create a new picture box by selecting 'New Pic' from the Box menu. A large requester will be displayed. Don't change anything at this stage, just click on OK. There should now be a large heading on the page with a white border around it. 4) We don't want the white border. An easy way to get rid of it is to use the 'Resize' command in the box menu. When you resize a picture box the only thing changed is the border. The actual picture size can never be changed. To get rid of the border, select 'Resize', click on the heading, not releasing the mouse button. There is now a box that changes size when you move the mouse. Move the mouse up and to the left until the box cannot be made smaller. Release the mouse button. The white border should have disapeared. If it hasn't, repeat step four, correctly this time! 5) Now centre the heading at the top of the page. Select 'Move' from the Box menu, click on the heading and centre it horizontally. 6) You may have noticed that the colours are wrong. Select Palette from the Other menu. A Palette requester will be displayed. Click on the 'Picture Colours' gadget. This will use the picture's palette for the page. Click on OK. 7) The page colour is wrong now. Select 'Edit' from the Page menu. This will display the standard page definition requester. Click twice on the Page Colour '-' gadget. Select OK. The page colour should be the same as the screen border. 8) Now to load some more graphics. Using 'Load IFF Pic' load the following four pictures. "Pictures/ArticleIcon.1", "Pictures/ArticleIcon.2", "Pictures/ArticleIcon.3", "Pictures/ArticleIcon.4". We will use these for a four frame animated icon. 9) Select 'New Pic' from the Box menu. Set the Border Width and Height, the Shadow Width, Height, XOff, and YOff all to 0. Click on the icon under 'Special'. This should change from 'Standard' to 'Go To Page'. In the 'Go to Page ?' string gadget enter the text "ExampleMag/MyTextPage". Click on the icon under 'Animate'. This should change from 'PUSH' to 'FRAME'. Set the number of frames to 4. Click on the Picture '+' gadget. The picture for frame 1 should now be 'ArticleIcon.1'. Click on the 'Next Frame' gadget. Set the picture for frame 2 to 'ArticleIcon.2' Click on the 'Next Frame' gadget. Set the picture for frame 3 to 'ArticleIcon.3' Click on the 'Next Frame' gadget. Set the picture for frame 4 to 'ArticleIcon.4' Click on OK. 10) You should now see a picture on top of the Tutorials heading. Using 'Move' from the Box menu, move it down to about the middle of the page and then as far left as possible. 11) As there are 4 different pages to branch to from this page we will need 3 more of these boxes. Use Copy from the Box menu to make 3 duplicates of the existing box. Position these in 1 line across the page like so. ** ** ** ** ** ** ** ** Make sure they don't overlap. That includes the background colour. 12) We now need some text to distinguish between each one. Select 'Load Text' from the Project menu. Enter "Text/PageNames". Click on OK. 13) Select 'New Text' from the box menu. Set the Border Width and Height, the Shadow Width, Height, XOff, and YOff all to 0. Set the Text Columns to 13 and Text Rows to 1. Click on the Text Colour 1 '-' gadget once. It should now be a Red colour. Click on the Text Colour 2 '-' gadget four times. It should now be a Blue colour. Click on the '-' gadget under Border once. The border colour should now be Blue. Click on OK. 14) You should now see a text box with 'Text Page' in it up in the top left of the screen. Using 'Move' from the Box menu, move it down and place it under the leftmost icon. 15) Use 'Copy' from the box menu to make a duplicate of the text box. Position the duplicate under the second icon. The second text box should contain the words "Sound Page" and be postioned under the second icon. Make two more duplicates of the first text box and place them under the third and fourth icons. Your icons should appear on the page as follows. ** ** ** ** ** ** ** ** Text Page Sound Page Music Page Graphics Page 16) Finally we have to change the 'Go to Page ?' fields of the Sound Page, Music Page and Graphics Page icons. Because we made 3 copies of the first icon they will all contain the string "ExampleMag/MyTextPage". This would mean they would all take the reader to the TextPage when they were clicked on. We want each to take the reader to a different page. 17) Using 'Edit' from the Box menu change the strings to "ExampleMag/MySoundPage", "ExampleMag/MyMusicPage", and "ExampleMag/MyGraphicsPage" for the appropriate icon. 18) You've finished. If you want to save your article, use the 'Save Article' command from the Project menu. Save your article as "/Displayer/ExampleMag/TutorialContents" Now you can load the Displayer and see how your page works. 2) Text Page ~~~~~~~~~~~~ This page will contain two text boxes and two graphics boxes. It is the same as the Text page in the Examples section of the sample magazine. Have a look at this page before you go any further. 1) Load the Editor by double-clicking on its icon. If you have already loaded the Editor choose 'New Article' from the Project menu. You will be presented with a 'New Page' requester. Clear the text in the 'Page Title' field, enter the text " A Typical Text Page." and click on OK. 2) Choose 'Load IFF Pic' from the project menu. Enter the following string (without the quotes). "Pictures/Pic1". Click on OK. 3) Create a new picture box by selecting 'New Pic' from the Box menu. A large requester will be displayed. Set the Border Width and Height to zero. Set Shadow XOff and Width to 6. Set Shadow YOff and Height to 3. Set Picture Left to 43 and Picture Top to 2. Click on OK. 4) You may have noticed that the colours are wrong. Select Palette from the Other menu. A Palette requester will be displayed. Click on the 'Picture Colours' gadget. This will use the picture's palette for the page. Click on OK. 5) Select 'New Text' from the box menu. Set the Border Width to 4 and Border Height to 1, Shadow Width and XOff to 6, Shadow Height and YOff to 3. Set the Text Columns to 37 and Text Rows to 9. Click on the Text Colour 1 '-' gadget 4 times. It should now be Black. Click on the Text Colour 2 '+' gadget once. It should now be White. Click on the '+' gadget under Border once. The border colour should now be white. Click on OK. 6) There should be a White text box covering the picture box. Use 'Move' from the Box menu to move the text box down the page, and position it under the picture. 7) Select 'Copy' from the Box menu and make a copy of the text box. Move the copy to the top right of the page. 8) Select 'Edit' from the Box menu. Select the text box in the top right of page. Change Text Rows from 9 to 10 and click on OK. 9) Choose 'Load IFF Pic' from the project menu. Enter the following string (without the quotes). "Pictures/Pic2". Click on OK. 10) Create a new picture box by selecting 'New Pic' from the Box menu. A large requester will be displayed. Set the Border Width and Height to zero. Set Shadow XOff, YOff, Width and Height to 0. Set Picture Left to 417 and Picture Top to 95. Change the picture to 'pic2' by clicking once on the Picture '+' gadget. Click on OK. 11) Now to load some text. Choose 'Load Text' from the Project menu and enter the following string. "Text/Sample" 12) You will notice in the first text box that there are several lines that are not completely full. To close up the spaces we can use the 'Re-format' command from the Text menu. Select 'Re-format', click on the first text line and drag-select the whole box of text. When you release the mouse button, the text will be re-formatted so it fills each line completely. 13) At this stage the text has a ragged right-hand margin. To right-justify the text, we can use the 'Justify' Command from the Text menu. Select 'Justify', click on the first text line in the first box and drag-select the whole box of text. You may also like to do this to the top 4 lines and the second to last line in the second text box. 14) You've finished. If you want to save your article, use the 'Save Article' command from the Project menu. Save your article as "/Displayer/ExampleMag/MyTextPage" 3) Sound Page ~~~~~~~~~~~~~ This page will contain six graphics boxes. Three of these boxes will play a short piece of digitized sound when the reader clicks on them. It is the same as the Sound page in the Examples section of the sample magazine. Have a look at this page before you go any further. 1) Load the Editor by double-clicking on its icon. If you have already loaded the Editor choose 'New Article' from the Project menu. You will be presented with a 'New Page' requester. Clear the text in the 'Page Title' field and click on OK. 2) Choose 'Load IFF Pic' from the project menu. Enter the following string (without the quotes). "Pictures/SoundSamples". Click on OK. 3) Create a new picture box by selecting 'New Pic' from the Box menu. A large requester will be displayed. You will notice that Picture Left, Border Width, Shadow XOff and Shadow Width have all been set to zero. This is because the actual picture width is the full width of the page, so there is no room for borders or shadows. Set the Border Height, Shadow YOff and Shadow Height to zero. Click on OK. 4) You may have noticed that the colours are wrong. Select Palette from the Other menu. A Palette requester will be displayed. Click on the 'Picture Colours' gadget. This will use the picture's palette for the page. Click on OK. 5) The 'Sound Samples' heading is a bit far down the page. Select 'Move' from the box menu and move the heading up until it is only a couple of pixels from the top of the page. 6) The page colour is also wrong. Select 'Edit' from the Page menu. This will display the standard page definition requester. Click twice on the Page Colour '-' gadget. Select OK. The page colour should be the same as the screen border. 7) Choose 'Load IFF Pic' from the project menu. Enter the following string (without the quotes). "Pictures/Space". Click on OK. 8) Create a new picture box by selecting 'New Pic' from the Box menu. A large requester will be displayed. Set the Picture top to 50. Click once on the Picture '+' gadget. This will select the 'space' picture to be used for this box. Click on OK. 9) We now want another band of stars at the bottom of the page. The easiest way of doing this is to copy the last box and move it down to the bottom of the page. Select 'Copy' from the Box menu, click on the band of stars and drag it to the bottom of the page. 10) Load the following pictures using 'Load IFF Pic' from the Project menu. "Pictures/Enterprise", "Pictures/Kirk", "Pictures/Badge". 11) Create a new picture box by selecting 'New Pic' from the Box menu. A large requester will be displayed. Click twice on the Picture '+' gadget. This will select the 'Enterprise' picture to used for this box. Set the Picture Left to 10. Set the Border Width to 6 and Border Height to 3. Click three times on the Border Colour '-' gadget. It should now be white. Set Shadow XOff and Width to 8. Set Shadow YOff and Height to 4. Click four times on the Shadow Colour '-' gadget. It should now be black. Click on OK. 12) You will see that the new box is covering the page title and the top band of stars. Use 'Move' from the Box menu to move it between the two bands of stars and a couple of centimeters from the left edge of the page. 13) Load the following sounds using 'Load Sound' from the Project menu. "Sounds/Kirk.1", "Sounds/Kirk.2", "Sounds/Sulu.1". 14) Choose 'Edit' from the Box menu and click on the picture of the Enterprise. A large requester will be displayed. Click once on the gadget below 'Special'. It should change from 'Standard' to 'Play Sound'. You will also notice that the 'Sound' field will have changed from 'NONE' to 'Kirk.1'. This means that when the reader clicks on this box, the sound sample 'Kirk.1' will be played. Click on OK. 15) Make two copies of the Enterprise box. Use 'Copy' from the Box menu. Position the boxes as shown below. ** ** ** ** ** ** 16) At this stage you should have three identical boxes spaced evenly across the page. We want to change the two copies of the first so that they have different pictures and play different sound. Choose 'Edit' from the Box menu and click on the middle box. A large requester will be displayed. Click once on the Picture '+' gadget. This will select the 'Kirk' picture to used for this box. Click once on the Sound '+' gadget. This will select the 'Kirk.2' sound to be used for this box. Click on OK. 17) You will notice that the middle box now has a picture of Kirk displayed in it. We now need to change the last box. Choose 'Edit' from the Box menu and click on the rightmost box. A large requester will be displayed. Click twice on the Picture '+' gadget. This will select the 'Badge' picture to used for this box. Click twice on the Sound '+' gadget. This will select the 'Sulu.1' sound to be used for this box. Click on OK. 18) You've finished. If you want to save your article, use the 'Save Article' command from the Project menu. Save your article as "/Displayer/ExampleMag/MySoundPage" 4) Music Page ~~~~~~~~~~~~~ This page will contain a text boxe and a graphics boxe. It will also play a piece of Soundtracker music when you turn to it. It is the same as the Music page in the Examples section of the sample magazine. Have a look at this page before you go any further. 1) Load the Editor by double-clicking on its icon. If you have already loaded the Editor choose 'New Article' from the Project menu. You will be presented with a 'New Page' requester. Clear the text in the 'Page Title' field and click on OK. 2) Choose 'Load IFF Pic' from the project menu. Enter the following string (without the quotes). "Pictures/Monster". Click on OK. 3) Create a new picture box by selecting 'New Pic' from the Box menu. A large requester will be displayed. Click three times on the Shadow Colour '-' gadget. It should now be black. Click on OK. 4) You may have noticed that the colours are wrong. Select Palette from the Other menu. A Palette requester will be displayed. Click on the 'Picture Colours' gadget. This will use the picture's palette for the page. Click on OK. 5) We now want to centre the box horizontally. Select 'Move' from the Box menu and drag the box to the top centre of the page. 6) Select 'New Text' from the box menu. Set the Text Columns to 63 and Text Rows to 3. Click on the Text Colour 1 '+' gadget three times. It should now be a light tan. Click on the Text Colour 2 '-' gadget three times. The word colour should have disappeared. Click on the Shadow '-+' gadget three times. It should now be black. Click on OK. 7) We now want to centre the text box horizontally below the picture. Select 'Move' from the Box menu and drag the text box to the desired postion. 8) Now to load some text. Choose 'Load Text' from the Project menu and enter the following string. "Text/MusicBlurb" Click on OK. 9) Finally we need to load some music which will be played when the page is first turned to. Choose 'Load Music' from the Project menu and enter the following string. "Sounds/mod.Evolution" Click on OK. 10) We now need to alter the number of times the music will be played. Choose 'Play Music' from the Other menu. A Selecting requester will be displayed. Click on 'Select'. A Edit/Play Music requester will be displayed. Change 'Cycles' to zero. This will cause the music to loop continuously. You can play the music at this stage by clicking on 'Play'. Click on 'Exit' when you have finished. 11) Now select 'Edit' from the Page menu. The normal requester will be displayed. Click once on the Initial Music '+' gadget. This will cause the music 'mod.Evolution' to be played when the reader first turns to the page. Click on OK. 12) You've finished. If you want to save your article, use the 'Save Article' command from the Project menu. Save your article as "/Displayer/ExampleMag/MyMusicPage" 5) Graphics Page ~~~~~~~~~~~~~~~~ This page is simply used to display a custom graphics screen. It is the same as the graphics page in the Examples section of the sample magazine. Have a look at this page before you go any further. 1) Load the Editor by double-clicking on its icon. If you have already loaded the Editor choose 'New Article' from the Project menu. You will be presented with a 'New Page' requester. Clear the text in the 'Page Title' field. Click once on the Page Type gadget. This will change from 'Text' to 'Graphic'. Click on OK. 2) Choose 'Load IFF Pic' from the project menu. Enter the following string (without the quotes). "Pictures/Fighter". Click on OK. 3) The fighter picture is a 320*256 Extra Halfbrite picture. This is the picture we want to use for our graphics page. Choose 'Edit' from the Page menu. The 'New Page' requester will be displayed. Click once on the 'IFF picture to display' '+' gadget. This will select the 'Fighter' picture as the one to be displayed. Click on OK. 4) That's it. A Graphics Page never has any boxes on it. All you need to do is to change the page type to graphics, load a picture and select it as the picture to be displayed. 5) If you want to save your article, use the 'Save Article' command from the Project menu. Save your article as "/Displayer/ExampleMag/MyGraphicPage"