InfiniteCanvas Version 1.3.1 - Documentation
Content
1. Introduction
2. Adding Panels To The Canvas
3. Working With Trails
4. Adding A Convenient Navigation
5. Publish Your Comic
1. Introduction
1.1 The User Interface
The program window consists of two main components. The canvas occupies the largest part of the screen. This is where you will add and manipulate Panels, create Trails and add navigation objects. Next to the canvas is the main tab-view. The "Info" tab displays the attributes of the current selected object(s). If there is no object selected, the tab shows the attributes of the canvas.
1.2 The Info-Canvas Tab
Color: the color of the canvas.
Grid - Show Grid: toggle Grid on/off.
Grid - Snap to Grid: toggle "Snap to Grid" on/off.
Grid - Grid Size: You can use the text-field or the slider to select a grid size.
Show Navigation: show navigation objects.
The second tab, labeled "Panels" is used for importing and adding Panels to the canvas. You can find more information about this tab and about Panels in Adding Panels To The Canvas.
1.3 The Display-Mode-Button
In the lower-left corner of the screen you can find the display-mode-button. There are three modes:
Canvas: In this mode you can edit Panels and Trails.
Navigation: This mode is used to add Navigation Frames and Navigation Trails.
Preview: In Preview-Mode you can preview and test-drive your Comic using the Flash Viewer.
1.4 The Tools-Button
With the tool-button you can select four different tools (from left to right):
Select-Tool: This tool is used to select and manipulate objects. If you hold the Command-Key (the one with the Apple-logo) you can select more than one object.
Trail-Tool: With this tool you can create Trails (Canvas-Mode) or Navigation Trails (Navigation-Mode). This tool will snap back to the Select-Tool automatically. If you want to create more than one Trail, double-click when selecting the tool. You can find more information about the usage in Working With Trails or Adding A Convenient Navigation.
Frame-Tool: The Frame-Tool is only available in Navigation-Mode. It allows the creation of Navigation Frames. As with the Trail-Tool, this tool will snap back to the Select-Tool automatically. If you want to create more than one frame, you have to double-click when selecting the tool. You can find more information about the usage in Adding A Convenient Navigation.
Hand-Tool: This tool let you move the canvas.
2. Adding Panels To The Canvas
2.1 Import Panels
To add panels to the canvas you first have to import your panels into the application. To do so select the "Panels"-tab from the tab view. Press the "Import..."-button and select the desired panels from the file-dialog. Currently you can import JPEG's, GIF's and PNG's.
After importing you can select any panel from the list and drag-and-drop it onto the canvas. If you want to add more than one panel you can use the Command-key (the one with the Apple-logo) to create a selection. Then just grab a panel from the selection and drop it onto the canvas.
2.2 Manipulate Panels
To move or resize a panel just drag the panel or one of the knobs to the new position. You can also influence the drag-behavior by pressing on of the following modifier keys while dragging a knob:
Shift: resize and constrain proportions
Alt: even resize
Ctrl: rotate
Ctrl + Shift: rotate in 15 degree steps
2.3 The "Info-Panel" Tab
This tab provides access to the panels properties. If you manipulate one of the properties, the change will be immediately visible on the canvas.
X: The x-position of the panel (upper-left corner).
Y: The y-position of the panel (upper-left corner).
Width: The width of the panel.
Height: The height of the panel.
Lock Position: Lock the Panel so you don't move or resize it unintentionally.
Original Size: Change the current width and height to the original values.
Rotation: The rotation of the panel.
Transparency: Use the slider to set the transparency of the panel.
Top: Position the panel at the top.
Up: Move the panel up.
Down: Move the panel down.
Bottom: Position the panel at the bottom.
3. Working With Trails
3.1 Creating Trails
To create a new trail select the Trail-Tool (the second tool). Now select the position where you want to start the trail. You can either set the start-point on a panel - the start-point will be set at the center of the panel and will be clipped automatically - or anywhere else on the canvas. If you like you can set a way-point. Just move the trail to the desired point and press the mouse button once. To finish the trail either press the mouse button once if you want to set the end-point on a panel or press the mouse button twice (double-click) if you want to set the end-point at any other point.
3.2 Manipulate Trails
To move the trail just drag it around (don't grapple it on a knob). To manipulate a trail select it and drag on of its knobs. You can also change straight trail-segments to curves by double-clicking the desired segments. Two new knobs will appear (curve-control-point 1 and curve-control-point 2). Drag them to change the orientation of the curve. You can easily reverse this step by double-clicking.
3.3 The Info-Trail Tab
Lock Position: Lock the trail so you don't move or resize it unintentionally.
Color: Set the trails color.
Thickness: Use the text-field or the slider to set the trails thickness.
Top: Position the trail at the top.
Up: Move the trail up.
Down: Move the trail down.
Bottom: Position the trail at the bottom.
4. Adding A Convenient Navigation
4.1 General
One major drawback of html-based comics is that their navigation can be very annoying. With "Free Navigation" Infinite Canvas provides an improved way to let users freely explore your comic. But the real innovation is the use of Navigation Frames.
4.2 The Info-"Navigation" Tab
Grid - Show Grid: toggle Grid on/off.
Grid - Snap to Grid: toggle "Snap to Grid" on/off.
Grid - Grid Size: You can use the text-field or the slider to select a grid size.
Navigation Tools: Use "Free Navigation" or "Navigation Frames" (Please note that Free Navigation is not available in Infinite Canvas Version 1.3 and later!).
Navigation Tools - Use Navigation Frames - Hot Spot Hint: Draw a black rectangle around the hot spot to indicate it. The hint is only shown when the mouse is moved.
Navigation Tools - Use Navigation Frames - Scale Canvas: If checked the canvas will be scaled to fit the current frame. Otherwise the frames width and height will be ignored and the view point positioned at the frames center.
4.3 Navigation Frames
If you want to restrict the way users navigate your comic, the use of Navigation Frames should be your choice. Navigation Frames are quadratic areas of the canvas. They can have any size or rotation and specify the part of the canvas, which is seen on screen.
4.4 Creating Navigation Frames
To create a Navigation Frame select the Frame-Tool (the third tool) from the tool-button. This tool will automatically snap back to the Select-Tool. If you want to create more then one frame, double-click when selecting the tool. Now place the curser on the canvas and drag it to create the frame.
4.5 Manipulate Navigation Frames
Moving and resizing the Navigation Frame is similar to panels. Just drag a frame or a knob around. You can also rotate a frame by dragging a knob and pressing Ctrl or dragging a knob and pressing Ctrl + Shift to rotate in 15 degree steps.
4.6 The Info-"Navigation Frame" Tab
X: The x-position of the frame (upper-left corner).
Y: The y-position of the frame (upper-left corner).
Width: The width of the frame.
Height: The height of the frame.
Rotation: The rotation of the frame.
Force 1:1 Aspect Ratio: If checked the frame will retain an aspect ratio of 1:1.
Lock Position: Lock the frame so you don't move or resize it unintentionally.
Is Start Frame: Make this frame the start-frame.
Wait For User Input: Continue with the next transition or wait for user input.
URL: You can add a link to a frame. I recommend using absolute path with a preceding 'http://'. The link will be opened in the current browser window on mouse down.
Create Hot Spot: Create an Hot Spot in the upper-left corner of the frame. You can resize and reposition the Hot Spot with the mouse
Top: Position the frame at the top.
Up: Move the frame up.
Down: Move the frame down.
Bottom: Position the frame at the bottom.
4.7 Navigation Trails
Navigation Trails are the missing link between your numerous Navigation Frames. They are like directed edges in a graph and connect one frame with an other.
Creating and manipulating a Navigation Trail works like creating a "normal" trail. To work properly, a Navigation Trail has to start on a Navigation Frame or on an Hot Spot and has to end on a Navigation Frame. You are able to create "invalid" Navigation Trails, but they are ignored when publishing the comic. It is not possible to create curved Navigation Trails.
4.8 The Info-"Navigation Trail" Tab
Lock Position: Lock the Navigation Trail so you don't move or resize it unintentionally.
Transition Type: Set the type of the transition. You can select: None, Movement, Fade Through Color.
Transition Speed: You can define the length of the transition in seconds.
Transition Color: This color well defines the color which is used during the Fade Trough Color transition.
Top: Position the trail at the top.
Up: Move the trail up.
Down: Move the trail down.
Bottom: Position the Trail at the bottom.
4.9 Hot Spots
Hot Spots (they were called Active Components in previous versions) are rectangular areas of a frame, which let you bring in some interactivity. Let me give you an example. Imagine you have a panel with a telephone and an Hot Spot positioned above this object. If you click anywhere on the screen the comic follows the Navigation Trail associated with the current frame. But if you click on the telephone your comic will follow the Navigation Trail associated with the Hot Spot.
To create an Hot Spot just select a Navigation Frame and click the "Create Hot Spot"-Button. Now you can resize the Hot Spot inside the bounds of its frame. Adding a Navigation Trail works like Navigation Frames.
5. Publish Your Comic
Publish
Publishing you comic is as easy as creating it. Just select the main-menu item "File > Publish". A new sheet will appear at the top of the window.
If you like you can customize some attributes of the resulting website. To continue press the Publish button. The Application will place your comic, the Flash Viewer and a sample website in the selected directory.
The Infinite Canvas Flash Viewer
Integrating the Flash Viewer into a existing website is pretty easy. Just copy the OBJECT-section of content.html into you website. I'm using the object and the embed tag to achieve broad compatibility. If you change a parameter, please make sure that you change the parameter in the object AND the embed tag!!!
<HTML>
<HEAD>
<TITLE>My first Comic</TITLE>
</HEAD>
<BODY BGCOLOR=#ffffff TEXT=#666666>
<CENTER>
<br><h1>My first Comic</h1><br>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="400" height="440" id="ICViewer" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="ICViewer.swf" />
<param name="FlashVars" value="comic=ressources&navigationbar=true" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="ICViewer.swf" FlashVars="comic=ressources&navigationbar=true" quality="high" bgcolor="#ffffff" width="400" height="440" name="ICViewer" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</CENTER>
</BODY>
</HTML>