wiki:ITERATION_09/Release/UserDocumentation/AnIntroductionToSophie/ScriptForDemo

Version 35 (modified by danvisel, 16 years ago) (diff)

--

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

Script for Demo

Media for the demonstration

Media for the demonstration can be found here as a zip file; or you can take all the files that are in branches/danvisel/sophie2-platform/userdoc-images/DEMO_MATERIAL in Subversion. The .sjrb is included in unzipped & zipped formats because I'm not sure which will work best.

Page 1

Contains the title page to the book. Demonstrates making a new book, use of halos and HUDs, page HUD, frame HUD, basic interface, book preview.

  1. Create a new book (File > New Book). Set the title to "Demonstration Book", the width to 800, and the height to 600.
  2. Resize the book window (by pulling the lower right corner) so that the entire page is visible.
  3. Open the page border & fill HUD.
  4. Demonstrate changing the fill color: change the fill to blue.
  5. Set the margins on the page to 0 on all sides.
  6. Close the page border & fill HUD.
  7. Insert the title image. Choose Insert > Image and select "tutorial page 1.png". The image will be inserted on the page.
  8. Click on the image to bring up the frame halos.
  9. Click on the image's border & fill halo to open the image's border & fill HUD.
  10. Set the margins on all sides of the frame to 0.
  11. Close the image's border & fill HUD.
  12. Open the image's frame properties halo to open the frame properties HUD.
  13. Set the width of the frame to 800, the height to 600, the X to 0, and the Y to 0.
  14. Close the image's frame properties HUD.
  15. Click on the "Open Preview" button in the book's status bar.
  16. The book will open in preview mode: this is how your page will appear in Sophie Reader.
  17. Close the preview by clicking the "X" in its title bar.
  18. Press the >> button to create page 2 and to go to that page.

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_9/tutorialscreenshotp1.png

Page 2

Contains a text frame. Demonstrates: more fills, text, borders, fills, basic interface.

  1. Click on the page's border & fill halo.
  2. Set the margins on the frame to 0 on all sides.
  3. Click the square next to "image" in the "Background filling" section. Select tutorial page 2.png.
  4. Your page now has a background. Click on the page's border & fill halo again to close the HUD.
  5. Choose Insert > Text to insert a text frame.
  6. Start typing to insert text in the book. There's a weird bug in Sophie right now where the SHIFT key does not work while typing; if you want to include capital letters, press the caps lock key first.
  7. Click on the text halo to open the text HUD.
  8. Change the font and the font size to something else.
  9. Click on the text halo again to close the text HUD.
  10. Drag the drag handle to try moving the frame around; move the frame to the center of the page.
  11. Click on one of the rotate halos to rotate the frame.
  12. Click on the compass halo and enter "-10" to demonstrate rotating a frame manually.
  13. Click on the compass halo again to close the rotation HUD.
  14. Click on the margins & padding halo to open the margin & padding HUD.
  15. Set the padding values to 20 on all sides to demonstrate padding.
  16. Click on the margins & padding halo again to close the margin & padding HUD.
  17. Click on the >> button to go to the next page.

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_9/tutorialscreenshotp2.png

Page 3

Contains two images. Demonstrates: images, z-order, aligning, grouping.

  1. Click on the page's border & fill halo to open the page's border & fill HUD.
  2. Set the margins on the frame to 0 on all sides.
  3. Click the square next to "image" in the "Background filling" section. Select tutorial page 3.png.
  4. Click on the page's border & fill halo again to close the page's border & fill HUD.
  5. Select Insert > Image to insert an image on the page. Choose tutorial page 3 cat.jpg.
  6. Select Insert > Image to insert an image on the page. Choose tutorial page 3 dog.jpg.
  7. The dog image is in front of the cat. Move the cat in front of the dog by selecting the dog and pressing the Z- button to move him backwards.
  8. Now select the dog and press the Z+ button to move him forwards.
  9. Drag the drag handle on the dog image so that the dog is on the right side of the page.
  10. Click on the dog, then shift-click on the cat to select both images. New halos appear.
  11. Click the align halo to open the align HUD.
  12. Click the Align Top button to align the top of the two images.
  13. Click the align halo again to close the align HUD.
  14. Click the gr halo to group the two images.
  15. Click on the page so that the images are not selected.
  16. Now click on one of the images: both will be selected as a group.
  17. Drag the drag handle to move the grouped images together.
  18. Click on the >> button to go to the next page.

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_9/tutorialscreenshotp3.png

Page 4

Contains audio & video files, as well as audio recording. Demonstrates: audio & video in Sophie, preview mode.

  1. Click on the page's border & fill halo to open the page's border & fill HUD.
  2. Set the margins on the frame to 0 on all sides.
  3. Click the square next to "image" in the "Background filling" section. Select tutorial page 4.png.
  4. Click on the page's border & fill halo again to close the page's border & fill HUD.
  5. Select Insert > Audio to add an audio file to the book. Select demo audio.wav.
  6. Press the PLAY button to play the audio.
  7. Press the STOP button to stop the audio.
  8. Select the audio frame's border & fill icon to open the audio's border & fill HUD.
  9. Click the square next to "image" in the "Background filling" section. Select audio backdrop.jpg.
  10. Click on the border & fill halo to close the border & fill HUD.
  11. Select Insert > Video to add a video file to the book. Select demo video.avi.
  12. Click the video to bring up its halos, then drag its drag handle so the video is not on top of the audio.
  13. Open the video's frame properties halo to open the frame properties HUD.
  14. Set the video's size to 320 x 240 so that it appears properly.
  15. Click on the frame properties halo to close the frame properties HUD.
  16. Press the PLAY button to play the video.
  17. Press the STOP button to stop the video.
  18. Select Insert > Audio Record to record audio.
  19. Click the record button to start recording; say something.
  20. Click the stop button to stop recording.
  21. Select the frame of the recording and move it on the page by dragging the drag handle.
  22. Press the PLAY button to play your recording.
  23. Press the STOP button to stop your recording.
  24. Click "Open Preview" to see how the audio and video works in preview mode.
  25. Press the PLAY button to play the audio.
  26. Press the PLAY button to play the video.
  27. Close the preview window.
  28. Click on the >> button to go to the next page.

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_9/tutorialscreenshotp4.png

Page 5

Demonstrates how hide/show links works.

  1. Click on the page's border & fill halo to open the page's border & fill HUD.
  2. Set the margins on the frame to 0 on all sides.
  3. Click the square next to "image" in the "Background filling" section. Select tutorial page 5.png.
  4. Click on the page's border & fill halo again to close the page's border & fill HUD.
  5. Select Insert > Image to insert an image; choose open button.gif.
  6. Open the image's frame properties halo to open the frame properties HUD.
  7. Set the image's size to 100 x 50 so that it appears properly.
  8. Click on the frame properties halo to close the frame properties HUD.
  9. Select Insert > Image to insert an image; choose close button.gif.
  10. Open the image's frame properties halo to open the frame properties HUD.
  11. Set the image's size to 100 x 50 so that it appears properly; set the Y value to 200.
  12. Click on the frame properties halo to close the frame properties HUD.
  13. Select 'Insert > Image to insert an image; choose toggle button.gif.
  14. Open the image's frame properties halo to open the frame properties HUD.
  15. Set the image's size to 100 x 50 so that it appears properly; set the Y value to 325.
  16. Click on the frame properties halo to close the frame properties HUD.
  17. Click on the Open image, then shift-click on the Close and Toggle buttons.
  18. Click on the align halo to open the align HUD.
  19. Click on "align left".
  20. Click on the align halo again to close the align HUD.
  21. Select Insert > Image to insert an image; choose target button.gif.
  22. Open the image's frame properties halo to open the frame properties HUD.
  23. Set the image's size to 200 x 200 so that it appears properly.
  24. Click on the frame properties halo to close the frame properties HUD.
  25. Drag the target frame's drag handle to move it to the right side of the page.
  26. Select the open button.
  27. Click the link halo to open the link HUD.
  28. Press the + button to add a link.
  29. Choose link trigger FRAME_MOUSE_RELEASED.
  30. Choose link action Show frame.
  31. In the Select frame section, choose Frame D, the target frame.
  32. Click the link halo to close the link HUD.
  33. Select the close button.
  34. Click the link halo to open the link HUD.
  35. Press the + button to add a link.
  36. Choose link trigger FRAME_MOUSE_RELEASED.
  37. Choose link action Hide frame.
  38. In the Select frame section, choose Frame D, the target frame.
  39. Click the link halo to close the link HUD.
  40. Select the toggle button.
  41. Click the link halo to open the link HUD.
  42. Press the + button to add a link.
  43. Choose link trigger FRAME_MOUSE_RELEASED.
  44. Choose link action Toggle frame.
  45. In the Select frame section, choose Frame D, the target frame.
  46. Click the link halo to close the link HUD.
  47. Click on the Open Preview button to open a preview of the book.
  48. Click the close button to hide the target frame.
  49. Click the open button to show the target frame.
  50. Click the toggle button to hide the target frame.
  51. Click the toggle button again to show the target frame.
  52. Close the preview window.
  53. Click on the >> button to go to the next page.

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_9/tutorialscreenshotp5.png

Page 6

Demonstrate embedded books.

  1. Click on the page's border & fill halo to open the page's border & fill HUD.
  2. Set the margins on the frame to 0 on all sides.
  3. Click the square next to "image" in the "Background filling" section. Select tutorial page 6.png.
  4. Click on the page's border & fill halo again to close the page's border & fill HUD.
  5. Select Insert > Embedded Book to insert an embedded book. Choose FivePageBook.sjrb.
  6. Click on the embedded book to bring up the halos.
  7. Drag the embedded book's drag handle to center it on the page.
  8. Click the forward and back arrows in the lower left of the embedded book to turn the pages of the embedded book.
  9. Click the Open Preview button to open a preview of the current book.
  10. Click the forward and back arrows in the lower left of the embedded book to turn the pages of the embedded book.
  11. Close the preview window.
  12. Click on the >> button to go to the next page.

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_9/tutorialscreenshotp6.png

Page 7

Demonstrate exporting HTML/PDF/printing. Also demonstrates importing PDF.

  1. Click on the page's border & fill halo to open the page's border & fill HUD.
  2. Set the margins on the frame to 0 on all sides.
  3. Click the square next to "image" in the "Background filling" section. Select tutorial page 7.png.
  4. Click on the page's border & fill halo again to close the page's border & fill HUD.
  5. Select File > Export as > PDF. Give the exported PDF the filename exported pdf.pdf.
  6. Outside of Sophie, open the exported PDF in a PDF viewer.
  7. Back in Sophie, select File > Export as > HTML. Give the exported HTML the filename exported html.html.
  8. Outside of Sophie, open the exported HTML in a browser.
  9. Back in Sophie, select File > Print and select your printer.
  10. Select File > Print to File and give the exported PostScript the filename exported postscript.ps.
  11. Outside of Sophie, open the exported PostScript in a PostScript viewer, then print it if desired.
  12. Back in Sophie, select Insert > PDF and select exported pdf.pdf, the PDF you just output.
  13. Select the PDF frame on the page; using the drag handle, drag it to the center of the page.
  14. Click on the >> button to go to the next page.

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_9/tutorialscreenshotp7.png

Page 8

Demonstrate saving the book and opening it in Reader.

  1. Click on the page's border & fill halo to open the page's border & fill HUD.
  2. Set the margins on the frame to 0 on all sides.
  3. Click the square next to "image" in the "Background filling" section. Select tutorial page 7.png.
  4. Click on the page's border & fill halo again to close the page's border & fill HUD.
  5. Select File > Save. Give the book the name demonstration book.sjrb.
  6. Quit Sophie by pressing control-q.
  7. Open Sophie Reader.
  8. Select File > Open and choose demonstration book.sjrb.
  9. The book should open and work correctly.

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_9/tutorialscreenshotp8.png

Comments

Bugs that currently cause problems

  • Currently can't save a book that uses an image as a background.
  • Currently can't save a book that includes links.
  • The presence of grouped frames in a book causes a crash when exporting to PDF; this has been fixed since Alpha 2.

Interface tweaks

  • Turning off the 10-pixel red border that all frames and pages currently have would make it look better.
  • If there's any way to import images/video at actual size rather than 280 x 210 pixels, that would improve this.

Things to include in the demo that I have not figured out how to show

  • Sophie server functionality in Sophie (does this exist?)
  • browser frames (?)
  • running as an applet (?)