home *** CD-ROM | disk | FTP | other *** search
/ The Fred Fish Collection 1.5 / ffcollection-1-5-1992-11.iso / ff_disks / 300-399 / ff372.lzh / Magnetic_Pages / Editor / Tutorial < prev    next >
Text File  |  1990-10-08  |  21KB  |  442 lines
  1.                   M A G N E T I C  P A G E S: Tutorial
  2.                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  3.  
  4. Introduction
  5. ~~~~~~~~~~~~
  6.     This document is designed to give the reader some practical experience
  7. in using the Editor. The Editor is used to create your magazine articles.
  8. This tutorial will provide step by step instructions for creating several
  9. different articles. The articles you will create are the same as those in
  10. the Examples section of the sample magazine. If you haven't already looked
  11. through the sample magazine, you should do this before going any further.
  12. The sample magazine is in the Displayer drawer and can be accessed by
  13. double-clicking on the Displayer icon in that drawer.
  14.  
  15. Overview
  16. ~~~~~~~~
  17.     You should be familiar with the sample magazine layout at this point.
  18. The sample magazine structure is as follows:
  19.  
  20.                                TitlePage
  21.                                   |
  22.                            ____Contents____
  23.                           /                \
  24.     _______________Examples               Tutorials_______________
  25.    /     /     /          \                /     \     \          \
  26. Text, Sound, Music, and Graphics Pages  Text, Sound, Music, and Graphics Pages
  27.  
  28.  
  29.     We will be creating the articles in the tutorial section as well as the
  30. tutorial page. The pages we are going to create are the same as those in the
  31. the examples section. So before you begin a page, have a look at the
  32. finished product in the examples section.
  33.  
  34. Before You Start
  35. ~~~~~~~~~~~~~~~~
  36.     If you are going to save the articles you create, make a copy of this
  37. disk first. I reccommend you save your articles so you can test them with
  38. the Displayer. There are five separate articles to create in this tutorial.
  39. You should create the 'Tutorials' page first. You may then work through the
  40. other pages in any order you like.
  41.  
  42. PAL Users - The tutorial examples have been designed so they may be created
  43.             on an NTSC machine. This means you will have an extra 56 pixels
  44.             at the bottom of each page. You can either leave this blank or
  45.             adjust the page layout to fill this space.
  46.  
  47.  
  48. 1) Tutorials Page
  49. ~~~~~~~~~~~~~~~~~
  50.     This page will contain a heading at the top and 4 icons that
  51. allow the reader to branch to the other articles in the tutorial section.
  52. It is very similar to the Examples page. Have a look at this page before
  53. you go any further.
  54.  
  55. 1) Load the Editor by double-clicking on its icon. You will be presented
  56.    with a 'New Page' requester. Clear the text in the 'Page Title' field
  57.    and click on OK.
  58.  
  59. 2) Choose 'Load IFF Pic' from the project menu. Enter the following string
  60.    (without the quotes). "Pictures/Tutorials". Click on OK. We now have a
  61.    picture to use as the page title.
  62.  
  63. 3) Create a new picture box by selecting 'New Pic' from the Box menu. A
  64.    large requester will be displayed. Don't change anything at this stage,
  65.    just click on OK. There should now be a large heading on the page with a
  66.    white border around it.
  67.  
  68. 4) We don't want the white border. An easy way to get rid of it is to use
  69.    the 'Resize' command in the box menu. When you resize a picture box the
  70.    only thing changed is the border. The actual picture size can never be
  71.    changed. To get rid of the border, select 'Resize', click on the heading,
  72.    not releasing the mouse button. There is now a box that changes size when
  73.    you move the mouse. Move the mouse up and to the left until the box
  74.    cannot be made smaller. Release the mouse button. The white border should
  75.    have disapeared. If it hasn't, repeat step four, correctly this time!
  76.  
  77. 5) Now centre the heading at the top of the page. Select 'Move' from the
  78.    Box menu, click on the heading and centre it horizontally.
  79.  
  80. 6) You may have noticed that the colours are wrong. Select Palette from
  81.    the Other menu. A Palette requester will be displayed. Click on the
  82.    'Picture Colours' gadget. This will use the picture's palette for the
  83.    page. Click on OK.
  84.  
  85. 7) The page colour is wrong now. Select 'Edit' from the Page menu. This will
  86.    display the standard page definition requester. Click twice on the Page
  87.    Colour '-' gadget. Select OK. The page colour should be the same as the
  88.    screen border.
  89.  
  90. 8) Now to load some more graphics. Using 'Load IFF Pic' load the following
  91.    four pictures.
  92.                   "Pictures/ArticleIcon.1", "Pictures/ArticleIcon.2",
  93.                   "Pictures/ArticleIcon.3", "Pictures/ArticleIcon.4".
  94.  
  95.    We will use these for a four frame animated icon.
  96.  
  97. 9) Select 'New Pic' from the Box menu. Set the Border Width and Height,
  98.    the Shadow Width, Height, XOff, and YOff all to 0.
  99.    Click on the icon under 'Special'. This should change from 'Standard' to
  100.    'Go To Page'. In the 'Go to Page ?' string gadget enter the text
  101.    "ExampleMag/MyTextPage".
  102.    Click on the icon under 'Animate'. This should change from
  103.    'PUSH' to 'FRAME'. Set the number of frames to 4. Click on the Picture
  104.    '+' gadget. The picture for frame 1 should now be 'ArticleIcon.1'.
  105.    Click on the 'Next Frame' gadget.
  106.    Set the picture for frame 2 to 'ArticleIcon.2'
  107.    Click on the 'Next Frame' gadget.
  108.    Set the picture for frame 3 to 'ArticleIcon.3'
  109.    Click on the 'Next Frame' gadget.
  110.    Set the picture for frame 4 to 'ArticleIcon.4'
  111.    Click on OK.
  112.  
  113. 10) You should now see a picture on top of the Tutorials heading. Using
  114.     'Move' from the Box menu, move it down to about the middle of the page
  115.     and then as far left as possible.
  116.  
  117. 11) As there are 4 different pages to branch to from this page we will need
  118.     3 more of these boxes. Use Copy from the Box menu to make 3 duplicates
  119.     of the existing box. Position these in 1 line across the page like so.
  120.  
  121.                 **            **             **            **
  122.                 **            **             **            **
  123.  
  124.     Make sure they don't overlap. That includes the background colour.
  125.  
  126. 12) We now need some text to distinguish between each one. Select 'Load Text'
  127.     from the Project menu. Enter "Text/PageNames". Click on OK.
  128.  
  129. 13) Select 'New Text' from the box menu. Set the Border Width and Height,
  130.     the Shadow Width, Height, XOff, and YOff all to 0. Set the Text Columns
  131.     to 13 and Text Rows to 1. Click on the Text Colour 1 '-' gadget once. It
  132.     should now be a Red colour. Click on the Text Colour 2 '-' gadget four
  133.     times. It should now be a Blue colour. Click on the '-' gadget under
  134.     Border once. The border colour should now be Blue. Click on OK.
  135.  
  136. 14) You should now see a text box with 'Text Page' in it up in the top left
  137.     of the screen. Using 'Move' from the Box menu, move it down and place
  138.     it under the leftmost icon.
  139.  
  140. 15) Use 'Copy' from the box menu to make a duplicate of the text box.
  141.     Position the duplicate under the second icon. The second text box should
  142.     contain the words "Sound Page" and be postioned under the second icon.
  143.     Make two more duplicates of the first text box and place them under
  144.     the third and fourth icons. Your icons should appear on the page as
  145.     follows.
  146.  
  147.               **              **               **              **
  148.               **              **               **              **
  149.            Text Page      Sound Page       Music Page     Graphics Page
  150.  
  151. 16) Finally we have to change the 'Go to Page ?' fields of the Sound Page,
  152.     Music Page and Graphics Page icons. Because we made 3 copies of the
  153.     first icon they will all contain the string "ExampleMag/MyTextPage".
  154.     This would mean they would all take the reader to the TextPage when
  155.     they were clicked on. We want each to take the reader to a different
  156.     page.
  157.  
  158. 17) Using 'Edit' from the Box menu change the strings to
  159.     "ExampleMag/MySoundPage", "ExampleMag/MyMusicPage", and
  160.     "ExampleMag/MyGraphicsPage" for the appropriate icon.
  161.  
  162. 18) You've finished. If you want to save your article, use the 'Save Article'
  163.     command from the Project menu. Save your article as
  164.  
  165.                           "/Displayer/ExampleMag/TutorialContents"
  166.  
  167.     Now you can load the Displayer and see how your page works.
  168.  
  169.  
  170.  
  171. 2) Text Page
  172. ~~~~~~~~~~~~
  173.     This page will contain two text boxes and two graphics boxes.
  174. It is the same as the Text page in the Examples section of the sample
  175. magazine. Have a look at this page before you go any further.
  176.  
  177. 1) Load the Editor by double-clicking on its icon. If you have already
  178.    loaded the Editor choose 'New Article' from the Project menu.
  179.    You will be presented with a 'New Page' requester. Clear the text in
  180.    the 'Page Title' field, enter the text "           A Typical Text Page."
  181.    and click on OK.
  182.  
  183. 2) Choose 'Load IFF Pic' from the project menu. Enter the following string
  184.    (without the quotes). "Pictures/Pic1". Click on OK.
  185.  
  186. 3) Create a new picture box by selecting 'New Pic' from the Box menu. A
  187.    large requester will be displayed. Set the Border Width and Height to
  188.    zero. Set Shadow XOff and Width to 6. Set Shadow YOff and Height to 3.
  189.    Set Picture Left to 43 and Picture Top to 2. Click on OK.
  190.  
  191. 4) You may have noticed that the colours are wrong. Select Palette from
  192.    the Other menu. A Palette requester will be displayed. Click on the
  193.    'Picture Colours' gadget. This will use the picture's palette for the
  194.    page. Click on OK.
  195.  
  196. 5) Select 'New Text' from the box menu. Set the Border Width to 4 and Border
  197.    Height to 1, Shadow Width and XOff to 6, Shadow Height and YOff to 3.
  198.    Set the Text Columns to 37 and Text Rows to 9. Click on the Text Colour 1
  199.    '-' gadget 4 times. It should now be Black. Click on the Text Colour 2 '+'
  200.    gadget once. It should now be White. Click on the '+' gadget under
  201.    Border once. The border colour should now be white. Click on OK.
  202.  
  203. 6) There should be a White text box covering the picture box. Use 'Move'
  204.    from the Box menu to move the text box down the page, and position it
  205.    under the picture.
  206.  
  207. 7) Select 'Copy' from the Box menu and make a copy of the text box. Move the
  208.    copy to the top right of the page.
  209.  
  210. 8) Select 'Edit' from the Box menu. Select the text box in the top right of
  211.    page. Change Text Rows from 9 to 10 and click on OK.
  212.  
  213. 9) Choose 'Load IFF Pic' from the project menu. Enter the following string
  214.    (without the quotes). "Pictures/Pic2". Click on OK.
  215.  
  216. 10) Create a new picture box by selecting 'New Pic' from the Box menu. A
  217.     large requester will be displayed. Set the Border Width and Height to
  218.     zero. Set Shadow XOff, YOff, Width and Height to 0. Set Picture Left to
  219.     417 and Picture Top to 95. Change the picture to 'pic2' by clicking once
  220.     on the Picture '+' gadget. Click on OK.
  221.  
  222. 11) Now to load some text. Choose 'Load Text' from the Project menu and
  223.     enter the following string. "Text/Sample"
  224.  
  225. 12) You will notice in the first text box that there are several lines that
  226.     are not completely full. To close up the spaces we can use the
  227.     'Re-format' command from the Text menu. Select 'Re-format', click on
  228.     the first text line and drag-select the whole box of text. When you
  229.     release the mouse button, the text will be re-formatted so it fills each
  230.     line completely.
  231.  
  232. 13) At this stage the text has a ragged right-hand margin. To right-justify
  233.     the text, we can use the 'Justify' Command from the Text menu. Select
  234.     'Justify', click on the first text line in the first box and drag-select
  235.     the whole box of text. You may also like to do this to the top 4 lines
  236.     and the second to last line in the second text box.
  237.  
  238. 14) You've finished. If you want to save your article, use the 'Save Article'
  239.     command from the Project menu. Save your article as
  240.  
  241.                           "/Displayer/ExampleMag/MyTextPage"
  242.  
  243.  
  244.  
  245. 3) Sound Page
  246. ~~~~~~~~~~~~~
  247.     This page will contain six graphics boxes. Three of these boxes will
  248. play a short piece of digitized sound when the reader clicks on them.
  249. It is the same as the Sound page in the Examples section of the sample
  250. magazine. Have a look at this page before you go any further.
  251.  
  252. 1) Load the Editor by double-clicking on its icon. If you have already
  253.    loaded the Editor choose 'New Article' from the Project menu.
  254.    You will be presented with a 'New Page' requester. Clear the text in
  255.    the 'Page Title' field and click on OK.
  256.  
  257. 2) Choose 'Load IFF Pic' from the project menu. Enter the following string
  258.    (without the quotes). "Pictures/SoundSamples". Click on OK.
  259.  
  260. 3) Create a new picture box by selecting 'New Pic' from the Box menu. A
  261.    large requester will be displayed. You will notice that Picture Left,
  262.    Border Width, Shadow XOff and Shadow Width have all been set to zero.
  263.    This is because the actual picture width is the full width of the page,
  264.    so there is no room for borders or shadows. Set the Border Height,
  265.    Shadow YOff and Shadow Height to zero. Click on OK.
  266.  
  267. 4) You may have noticed that the colours are wrong. Select Palette from
  268.    the Other menu. A Palette requester will be displayed. Click on the
  269.    'Picture Colours' gadget. This will use the picture's palette for the
  270.    page. Click on OK.
  271.  
  272. 5) The 'Sound Samples' heading is a bit far down the page. Select 'Move'
  273.    from the box menu and move the heading up until it is only a couple of
  274.    pixels from the top of the page.
  275.  
  276. 6) The page colour is also wrong. Select 'Edit' from the Page menu. This will
  277.    display the standard page definition requester. Click twice on the Page
  278.    Colour '-' gadget. Select OK. The page colour should be the same as the
  279.    screen border.
  280.  
  281. 7) Choose 'Load IFF Pic' from the project menu. Enter the following string
  282.    (without the quotes). "Pictures/Space". Click on OK.
  283.  
  284. 8) Create a new picture box by selecting 'New Pic' from the Box menu. A
  285.    large requester will be displayed. Set the Picture top to 50. Click
  286.    once on the Picture '+' gadget. This will select the 'space' picture to
  287.    be used for this box. Click on OK.
  288.  
  289. 9) We now want another band of stars at the bottom of the page. The
  290.    easiest way of doing this is to copy the last box and move it down to the
  291.    bottom of the page. Select 'Copy' from the Box menu, click on the band
  292.    of stars and drag it to the bottom of the page.
  293.  
  294. 10) Load the following pictures using 'Load IFF Pic' from the Project menu.
  295.     "Pictures/Enterprise",  "Pictures/Kirk", "Pictures/Badge".
  296.  
  297. 11) Create a new picture box by selecting 'New Pic' from the Box menu. A
  298.     large requester will be displayed. Click twice on the Picture '+' gadget.
  299.     This will select the 'Enterprise' picture to used for this box. Set the
  300.     Picture Left to 10. Set the Border Width to 6 and Border Height to 3.
  301.     Click three times on the Border Colour '-' gadget. It should now be
  302.     white. Set Shadow XOff and Width to 8. Set Shadow YOff and Height to 4.
  303.     Click four times on the Shadow Colour '-' gadget. It should now be black.
  304.     Click on OK.
  305.  
  306. 12) You will see that the new box is covering the page title and the top
  307.     band of stars. Use 'Move' from the Box menu to move it between the two
  308.     bands of stars and a couple of centimeters from the left edge of the
  309.     page.
  310.  
  311. 13) Load the following sounds using 'Load Sound' from the Project menu.
  312.     "Sounds/Kirk.1",  "Sounds/Kirk.2", "Sounds/Sulu.1".
  313.  
  314. 14) Choose 'Edit' from the Box menu and click on the picture of the
  315.     Enterprise. A large requester will be displayed. Click once on the
  316.     gadget below 'Special'. It should change from 'Standard' to 'Play Sound'.
  317.     You will also notice that the 'Sound' field will have changed from
  318.     'NONE' to 'Kirk.1'. This means that when the reader clicks on this box,
  319.     the sound sample 'Kirk.1' will be played. Click on OK.
  320.  
  321. 15) Make two copies of the Enterprise box. Use 'Copy' from the Box menu.
  322.     Position the boxes as shown below.
  323.  
  324.                  **                 **                 **
  325.                  **                 **                 **
  326.  
  327. 16) At this stage you should have three identical boxes spaced evenly across
  328.     the page. We want to change the two copies of the first so that they
  329.     have different pictures and play different sound. Choose 'Edit' from
  330.     the Box menu and click on the middle box. A large requester will be
  331.     displayed. Click once on the Picture '+' gadget. This will select the
  332.     'Kirk' picture to used for this box. Click once on the Sound '+' gadget.
  333.     This will select the 'Kirk.2' sound to be used for this box. Click on
  334.     OK.
  335.  
  336. 17) You will notice that the middle box now has a picture of Kirk displayed
  337.     in it. We now need to change the last box. Choose 'Edit' from
  338.     the Box menu and click on the rightmost box. A large requester will be
  339.     displayed. Click twice on the Picture '+' gadget. This will select the
  340.     'Badge' picture to used for this box. Click twice on the Sound '+' gadget.
  341.     This will select the 'Sulu.1' sound to be used for this box. Click on
  342.     OK.
  343.  
  344. 18) You've finished. If you want to save your article, use the 'Save Article'
  345.     command from the Project menu. Save your article as
  346.  
  347.                           "/Displayer/ExampleMag/MySoundPage"
  348.  
  349.  
  350.  
  351. 4) Music Page
  352. ~~~~~~~~~~~~~
  353.     This page will contain a text boxe and a graphics boxe. It will also
  354. play a piece of Soundtracker music when you turn to it. It is the same as
  355. the Music page in the Examples section of the sample magazine. Have a look
  356. at this page before you go any further.
  357.  
  358. 1) Load the Editor by double-clicking on its icon. If you have already
  359.    loaded the Editor choose 'New Article' from the Project menu.
  360.    You will be presented with a 'New Page' requester. Clear the text in
  361.    the 'Page Title' field and click on OK.
  362.  
  363. 2) Choose 'Load IFF Pic' from the project menu. Enter the following string
  364.    (without the quotes). "Pictures/Monster". Click on OK.
  365.  
  366. 3) Create a new picture box by selecting 'New Pic' from the Box menu. A
  367.    large requester will be displayed. Click three times on the Shadow Colour
  368.    '-' gadget. It should now be black. Click on OK.
  369.  
  370. 4) You may have noticed that the colours are wrong. Select Palette from
  371.    the Other menu. A Palette requester will be displayed. Click on the
  372.    'Picture Colours' gadget. This will use the picture's palette for the
  373.    page. Click on OK.
  374.  
  375. 5) We now want to centre the box horizontally. Select 'Move' from the Box
  376.    menu and drag the box to the top centre of the page.
  377.  
  378. 6) Select 'New Text' from the box menu. Set the Text Columns to 63 and Text
  379.    Rows to 3. Click on the Text Colour 1 '+' gadget three times. It should
  380.    now be a light tan. Click on the Text Colour 2 '-' gadget three times.
  381.    The word colour should have disappeared. Click on the Shadow '-+' gadget
  382.    three times. It should now be black. Click on OK.
  383.  
  384. 7) We now want to centre the text box horizontally below the picture. Select
  385.    'Move' from the Box menu and drag the text box to the desired postion.
  386.  
  387. 8) Now to load some text. Choose 'Load Text' from the Project menu and
  388.    enter the following string. "Text/MusicBlurb" Click on OK.
  389.  
  390. 9) Finally we need to load some music which will be played when the page
  391.    is first turned to. Choose 'Load Music' from the Project menu and
  392.    enter the following string. "Sounds/mod.Evolution" Click on OK.
  393.  
  394. 10) We now need to alter the number of times the music will be played.
  395.     Choose 'Play Music' from the Other menu. A Selecting requester will be
  396.     displayed. Click on 'Select'. A Edit/Play Music requester will be
  397.     displayed. Change 'Cycles' to zero. This will cause the music to loop
  398.     continuously. You can play the music at this stage by clicking on 'Play'.
  399.     Click on 'Exit' when you have finished.
  400.  
  401. 11) Now select 'Edit' from the Page menu. The normal requester will be
  402.     displayed. Click once on the Initial Music '+' gadget. This will cause
  403.     the music 'mod.Evolution' to be played when the reader first turns to
  404.     the page. Click on OK.
  405.  
  406. 12) You've finished. If you want to save your article, use the 'Save Article'
  407.     command from the Project menu. Save your article as
  408.  
  409.                       "/Displayer/ExampleMag/MyMusicPage"
  410.  
  411.  
  412.  
  413. 5) Graphics Page
  414. ~~~~~~~~~~~~~~~~
  415.     This page is simply used to display a custom graphics screen.
  416. It is the same as the graphics page in the Examples section of the sample
  417. magazine. Have a look at this page before you go any further.
  418.  
  419. 1) Load the Editor by double-clicking on its icon. If you have already
  420.    loaded the Editor choose 'New Article' from the Project menu.
  421.    You will be presented with a 'New Page' requester. Clear the text in
  422.    the 'Page Title' field. Click once on the Page Type gadget. This will
  423.    change from 'Text' to 'Graphic'. Click on OK.
  424.  
  425. 2) Choose 'Load IFF Pic' from the project menu. Enter the following string
  426.    (without the quotes). "Pictures/Fighter". Click on OK.
  427.  
  428. 3) The fighter picture is a 320*256 Extra Halfbrite picture. This is the
  429.    picture we want to use for our graphics page. Choose 'Edit' from the
  430.    Page menu. The 'New Page' requester will be displayed. Click once on
  431.    the 'IFF picture to display' '+' gadget. This will select the 'Fighter'
  432.    picture as the one to be displayed. Click on OK.
  433.  
  434. 4) That's it. A Graphics Page never has any boxes on it. All you need to do
  435.    is to change the page type to graphics, load a picture and select it as
  436.    the picture to be displayed.
  437.  
  438. 5) If you want to save your article, use the 'Save Article' command from the
  439.    Project menu. Save your article as
  440.  
  441.                           "/Displayer/ExampleMag/MyGraphicPage"
  442.