HowTo: Create a new story from multiple separate .readcom files

Suppose you either created and saved some scenes of your story as separate StoryItems one-by-one, or used the Save button from the Options popup (which is for the currently Active StoryItem) to save just them from a bigger story into separate .readcom files.

Note: To save everything (that is save the Root StoryItem [the one showed at the top in the StructureView sidebar]), you can first select it at the StructureView and then Save it from the options popup (the Gear button from the right sidebar in Edit mode )

Or more easily you can use the Load/Save buttons at the left sidebar which load/save the whole Story (practically that means they save the RootStoryItem, independent of which StoryItem is the ActiveStoryItem at that moment)

Here's how one can reconnect individually saved StoryItems into a bigger Story:

1. Launch the app

   

2. Enter Edit mode with the yellow Edit button on the left sidebar

   

3. Clear the contents of the current Story with the “Cut” (scissors) button on the right sidebar (that is the Edit sidebar) and press “Yes” to confirm the action (will probably change this to a visual prompt with a recycle bin for YES).

   If the RootStoryItem is not currently active (but a deeper child of it instead), then it won’t ask for confirmation and just remove that child, activating its ParentStoryItem. In that case keep on cutting till you see that prompt and press Yes when it appears to remove the RootStoryItem too

   

4. You will get a new empty RootStoryItem that has the size of the current window.

   If the window is small (e.g. if you don’t have it maximized or if your screen resolution is low), then you’ll see its dashed border being very coarse with big dashes.

   

   This means the new RootStoryItem has low resolution so any vector-based (SVG) images you place in it may appear pixelated (this may be resolved in the future). To avoid such issue you can increase the resolution (size) of the RootStoryIteam.

   To increase the size of a StoryItem (in this case the RootStoryItem) please use ALT+mousewheel over an empty area of it in small steps (note that if you do this over a direct ChildStoryItem of the ActiveStoryItem [those are shown in solid line border], you resize the child StoryItem instead). It is planned to add some more ways to resize (possibly with a slider or by entering a size in width and height explicitly)

   As you rotate the mousewheel (with ALT key held pressed) You’ll see the dashed border (that signifies the ActiveStoryItem in Edit mode) become more dense with smaller dashes (if it becomes more coarse with bigger dashes then rotate the mouse wheel the other way).

   Don’t overdue it though (can rotate the mousewheel in the other direction while holding ALT to undo it), since this increases memory used when there are background vector images (plan to optimize this in the future) and also because the AreaSelector controls (the 4 knobs it shows at its corners) appear smaller when you do that (again planned to be fixed to make the AreaSelector resolution independent).

   Note how the dashed border became more dense with smaller dashes below:

   

5. To insert your .readcom StoryItems (the “pages” you sent) into the ActiveStoryItem (which is currently the RootStoryItem since this is a new Story which contains just one StoryItem), there are various ways (assuming you’re in Edit mode)

   • One is to open them in another instance of the application and then copy (with CTRL+C or with the Copy button from the Edit sidebar on the right) the item. Then switch to the other instance of the app where you were making the new story and paste (either from the paste button on the Edit sidebar or with CTRL+V). Repeat to place each one into this new Story.

   

   If you don’t define (with click and drag in Edit mode) and area to paste into then they will be pasted to the center of the ActiveStoryItem (the RootStoryItem in our case). If the appear too big can size them down using the ALT+mousewheel action after moving the mouse cursor over each direct child (they show in solid line boxes)

   

   • Another way is to use the “+” button at the top-right, at the Edit sidebar.

   At the file dialog shown you can select multiple files (on Windows can use SHIFT+drag or CTRL+click on each one to select multiple files) to place into the ActiveStoryItem.

   

   If there’s an AreaSelection defined in the ActiveStoryItem, the inserted items will take that size. If not they will be placed to the center of the ActiveStoryItem (if they appear too big you can size them down with ALT+mousewheel by first placing the mouse pointer over them).

   • A third way of inserting multiple items is to drag-drop them onto the ActiveStoryItem in Edit mode. You can drag-drop any file (e.g. PNG, JPEG bitmaps and SVG vector images) the app supports (including .readcom ones to insert stories/templates inside other stories)

   

   e.g. here I’m dropping Autumn.readcom from Gallery/Assets/Images/Seasons into a story/activity found at Gallery/el/3-6/Seasons.el.readcom

   If you place multiple items then they will be shown one above the other, you can select each one and resize / move them around to not overlap (note that currently the top one is moved, not the one you clicked – clicking just makes the AreaSelector take the same bounds as the clicked control – plan to fix this soon).

6. Arrange the items as you wish by selecting them and moving them around (noting that currently the top one is moved if the selection fully contains more than one items)

   

   Since the top child StoryITem in an area selection is resized / moved around when you move/resize the AreaSelector, if you want to move other item, you can first do a quick double-click (sometimes needs triple-click) to send clicked item to the back - if it is at the back of the Z-order in its parent, then will bring the child item to the top. You can also change which item is on top by opening the StrucureView from the “diagram-like” button at the left sidebar and if Edit mode has been enabled then you can drag a child item in the structure tree (also known as a scene graph) onto its parent to make it go to the top of the Z-order in its parent (appear over the other children).

   Note that in Edit mode the child items appear translucent, so if you’re not sure which one is on top you can exit Edit mode at anytime with the yellow Edit button on the left sidebar to see how they’ll appear. Note that when exiting Edit mode if the ActiveStoryItem is not a StoryPoint, then its closest ancestor (parent/grandparent item in the structure tree/graph) that is a StoryPoint will be Active. That is because in non-Edit mode the user only navigates among StoryPoints, not among every StoryItem (e.g. a Turtle is usually not a StoryPoint, whereas a background image of a story’s page will usually have been set to be a StoryPoint)

7. Ideally use enough gap between "pages” (StoryItems that will be set to be StoryPoints), esp. if you don’t want parts of them to appear at the side of the current page when the orientation of the user’s screen (landscape/portrait) is different from the orientation of the “page” they view. There is a prompt shown in such case when the Home StoryItem of a Story opened has different orientation that the screen. It goes away by clicking it or rotating your device (if possible and if the device notifies the app regarding screen rotation event)

   

8. To set a StoryItem as a StoryPoint select it first (either using the StructureView on the left or doing CTRL or RIGHT click (note that with that action you can only move among currently ActiveStoryItem and its parent, direct children and siblings). When a StoryItem that is a StoryPoint becomes active the container zooms to it. If it’s not a StoryPoint it zooms to its closest ancestor that is a StoryPoint.

   Note that at the StructureView you can use the small triangular arrows at the left of the item thumbnails to collapse their structure so that you don’t see their children. That makes easier to understand the top-level structure of your story.

   

   Once the appropriate StoryItem that you want to make a StoryPoint (a page in your story) is activated (you see its thumbnail selected in the StructureView and a dashed border around it in the story), then either right click its empty area (but not inside a direct child of it – those are the items shown in single line border), or press the Gear button at the bottom of the Edit sidebar on the right of the screen

   A popup menu (the StoryItemOptions) appears, centered at that StoryItem:

   

   Then toggle (click to stay pressed if it’s not) the StoryPoint button (2nd from the left)

   

   This will mark the StoryItem as a StoryPoint so that when in non-Edit mode the user can navigate to it using the Previous/Next buttons at the bottom of the screen

   Note: If all buttons are hidden by the user when reading a story / doing an activity, then please tell them to use the sandwitch [the three horizontal lines one] button at the top-left of the screen – it shows/hides all buttons (this is a user interface [UI] provision for adding a gesture-based only navigation mode and also for use with the timer/autoplay mode that is activated with the handwatch icon on the left sidebar and progresses to next StoryPoint every 8sec till the story loops back to its start)

9. There is also a Home toggle button on the StoryItemOptions popup. That can set a StoryItem to be the HomeStoryItem (there can be only one so that action deselects the Home of whichever StoryItem was alredy such). The HomeStoryItem doesn’t need to be a StoryPoint. In that case it will appear just once at the loading of a Story (.readcom file) and user won’t loop back to it if they press Next button multiple times. Also, if no HomeStoryItem is defined, then the RootStoryItem is set as the HomeStoryItem upon loading of a story.

10. Exit Edit mode (depress the yellow Edit mode toggle button on the left sidebar) and test your story

11. Use the Save button from the left sidebar to save your story to a .readcom file (this saves the RootStoryItem with all its children)

12. Use the Load button from the left sidebar to load your saved story and see if all look as expected (it should navigate to the HomeStoryItem fist).

13. Then press the Next button at the bottom right of the screen to test/navigate in your story (pressing it multiple times will loop back to the start of the story – if the HomeStoryItem is also a StoryPoint it will go eventually back to it).

14. There are also interactivity options for each StoryItem in non-Edit mode activated via the toggle buttons on its StoryItemOptions popup. This will be described at a separate guide.