Project Canvas Manual
Our manual is always expanding! While we strongly believe our products as so intuitive you shouldn't need a manual, there are exceptions now and then. If you feel there is something missing from the documentation, please contact us.
Table of Contents
Actions are various tasks that Project Canvas can perform when certain events happen. This includes buttons being clicked, or cards being arrived at or left.
Card arrival/departure actions are specified by selecting "Card Details" from the "Card" menu. Button actions are located under the "Stack" or "Card" menu, by choosing "Buttons," selecting the desired button in the list, and then pressing the "Edit" button.
There are numerous different action types.
This is the default action type. It does nothing.
This action type will display a window to the user, with the ability to show up to three buttons. If a button is clicked, actions can be performed in response. Click the "Set Actions" button next to the button name you wish to create actions for. Leaving a button name blank will prevent the button from being shown. If no button names are entered, a single button named "OK" will be shown.
The name of the button that was pressed can be stored into a variable (later discussed in this documentation) as well. To enable this feature, check the option entitled "Save to variable named:" and specify a variable name to store the button name into.
All three button names and the "message" can contain variables. To use variables in these fields, put them in brackets like so: Hello [username], I noticed that you were [age] years old, would you like to invest in RESPs?
This action type will display a window to the user, with the ability for the user to type in a response. The "Preset Response" will automatically fill in this text field with that value when the window is shown.
After the user clicks OK, the list of "Conditions" are cycled through to see if the user's response matches any of them. If it does, any actions specified for that condition are executed. If there is no match, the actions (if any) for the "Else" condition are executed.
The user's response can be stored into a variable (later discussed in this documentation) as well. To enable this feature, check the option entitled "Save to variable named:" and specify a variable name to store the button name into.
All condition values, the preset response and the question can contain variables. To use variables in these fields, put them in brackets like so: Hello [username], what is your brother's name?
Execute Shell Command
This action will run a system shell command. Both the result and last error code (if any) can be stored in a variable for later checking. The command to execute is performed as the currently logged in user.
The command text can contain variables. To use variables in these fields, put them in brackets like so: mkdir ~/Desktop/[Chosen Folder Name]
This action will open a URL in the default handler (or web browser) on the system. The URL can be any protocol handled by the system such as http, ftp, ssh and so on.
The URL text can contain variables. To use variables in the URL, put them in brackets like so: http://www.apple.com/login/username=[my variable name]
This action will quit the Project Canvas application or the run-only stack that is currently executing.
This action will reset the stack to a fresh state, as if it was just opened. This performs such tasks as destroying all text fields, clearing all variables, destroying all sprites, going back to the first card, and stopping all movies, music, and sounds.
This action will speak the text entered, and can interrupt any other current speak actions. The speech text may be dynamic and contain variables from the stack. Do this by putting the variable name in brackets like so: Welcome to my project, [nameOfFriend]!
Go to Card
This action allows you to change the card that is currently being displayed, by selecting a new one by name or number. Additionally, it is possible to go to a card relative to the stack or current card, such as the first card, last card, next card, and so forth.
A transition may also be applied between moving between the current card and the card about to be shown. Select one from the "Transition Effect" popup menu, input a frame rate and duration of the effect, and click "Preview" to see how it will look.
When a card is about to be left, its Close Card actions are executed, and when the new card is shown, the Open Card actions for it execute. Open Card actions do not execute until the transition is over.
Show Multiple Cards
This action will show a number of cards in succession one after another ‚Äî ideal for creating frame by frame animation. It is important to note that card open and close actions will fire for each card during the operation, and any actions specified after this one will execute as soon as this action begins ‚Äî not when it completes.
It is not possible to change the show speed while the operation is in progress. Instead, we recommend only showing the specific number of cards that should all be shown at same speed initially, and at the final card, set a new action in the Open Card event to show the next succession of cards at the new rate.
If another Show Multiple Cards event executes while this one is in progress, this one will be cancelled, and the next one will take over. Additionally, if more cards are asked to be shown than exist in the stack, it will loop back to card 1 and begin again.
Stop Showing Cards
When this action executes, it will check to see if a Show Multiple Cards action is currently showing cards, and if it is, it will cancel it and leave you at the current card.
Clear Movie Queue
This action will cancel any movies that will be played after the current movie completes (if any). If there are no movies currently playing, this action will do nothing.
Clear Music Queue
This action will cancel any music tracks that will be played after the current music track completes (if any). If there are no music tracks currently playing, this action will do nothing.
Clear Sound Effects Queue
This action will cancel any sound effects that will be played after the current sound effect completes (if any). If there are no sound effects currently playing, this action will do nothing.
This action will play the movie file with the name specified in the center of the stack window. If another movie is playing, this movie will be added to the queue and played afterwards. However, if the Interrupt option is enabled, the queue will be emptied, the current movie (if playing) will be stopped, and then this one will be played.
Movie files must be QuickTime compatible, and stored in a folder called "Movies" inside "Resources" next to the saved stack file on the hard drive.
This action will play the music file with the name specified. The music will play in the background, and no visible controller for the audio will be shown. If another music track is playing, this music track will be added to the queue and played afterwards. However, if the Interrupt option is enabled, the queue will be emptied, the current music track (if playing) will be stopped, and then this one will be played.
Music files must be QuickTime compatible, and stored in a folder called "Music" inside "Resources" next to the saved stack file on the hard drive.
This action will play the sound file with the name specified. The sound effect will play in the background, and no visible controller for the audio will be shown. If another sound effect is playing, this sound effect will be added to the queue and played afterwards. However, if the Interrupt option is enabled, the queue will be emptied, the current sound effect (if playing) will be stopped, and then this one will be played.
Sound files must be QuickTime compatible, and stored in a folder called "Sounds" inside "Resources" next to the saved stack file on the hard drive.
This action will stop, if there is one, the currently playing movie. If there are more movies in the queue, the next one will be played.
This action will stop, if there is one, the currently playing music track. If there are more music tracks in the queue, the next one will be played.
Stop Sound Effects
This action will stop, if there is one, the currently playing sound effect. If there are more sound effects in the queue, the next one will be played.
Create Dynamic Sprite
Sprites are images that are overlayed onto the stack. They will appear on every card, and can also perform various actions if clicked. The sprite image, and sprite mouse down image, must reside in the Resources/Sprites/ folder relative to the project.
The X and Y position are the location of where the top-left corner of where the sprite is drawn is specified in pixels from the top-left corner of the current card. To obtain exact pixel coordinates of where you wish to place the sprite, edit the card image and hover the mouse over where you would like the sprite to be created. In the lower left-hand corner of this paint window, the current X,Y coordinates are displayed.
Dynamic sprites are different than normal card or stack sprites as they can be created and destroyed at runtime, as well as have their position and images changed on the fly. Additionally, their state is saved when saving the stack whereas static sprites will revert to their original position.
The sprite name is important, as it can be later used to specifically remove that sprite.
Destroy All Dynamic Sprites
Destroy Dynamic Sprite
Modify Dynamic Sprite
Timers can perform actions on a predetermined interval. There are three "modes" for timers. First is "Off" which means the timer will not execute its events. The second option "Single" means the timer will execute once and then disable, whereas the third "Multiple" will repeat forever.
The timer name is important, as it can be later used to specifically remove that timer.
Destroy All Timers
Create Text Field
This action will draw text on the top of every card, until it is destroyed. The field will be as high as necessary to accommodate its content, but only as wide as the specified width in pixels.
The location of where the top-left corner of where the text field is drawn is specified in pixels from the top-left corner of the current card. To obtain exact pixel coordinates of where you wish to place the field, edit the card image and hover the mouse over where you would like the text field to be created. In the lower left hand corner of this paint window, the current top-left coordinates are displayed.
The text field name is important, as it can be later used to specifically remove that field.
Destroy All Text Fields
This action will remove any and all visible text fields that were created by actions.
Destroy Text Field
This action will remove a text field from display, based on the name specified.
Set Text Field Text
This action will look for a text field with the name specified, and if it exists, change the text of it to the new value entered.
This action allows you to check if a variable is set to a specific value, and if it is, perform an action in response. If there are no matches, then any actions specified for the "Else" condition are executed.
When using any variable-supported text in Project Canvas, it is also possible to use simple math. Example: "Two times five is: [math:2,*,5]" will yield a result of 10. Math is performed in the operation written and values must be separated by commas: number1,mathoperation,number2. The math operators available are: * - + ^ and /.
There are a few variables which are ALWAYS available, even if you have not set one in your project yet:
Returns "true" or "false" if a music track is currently playing.
Returns "true" or "false" if a sound effect is currently playing.
Returns "true" or "false" if a movie is currently playing.
Returns the current card number.
Returns the current card name.
Returns the name of the last card visited.
Returns the number of the last card visited. If the card is no longer in the stack, then the current card number is returned.
Returns "true" or "false" if a Show Multiple Cards action is currently showing cards.
There are also two sprite functions: "dynamicsprite" (which refers to dynamically creates sprites) and "staticsprite" (which refers only to sprites attached to the current card). They are used to retrieve information about sprites. The syntax is as follows: [functionname:spritename.propertyname]. The possible properties are:
The name of the sprite.
A boolean value (true/false) if the sprite exists or not.
The file name for the current sprite image.
The file name for the mouse down image of the current sprite.
The current X-axis position of the sprite (offset of pixels from left window edge).
The current Y-axis position of the sprite (offset of pixels from top window edge).
A boolean value (true/false) if the sprite is currently visible.
The file name for the original sprite image.
The file name for the mouse down image of the original sprite.
The original X-axis position of the sprite (offset of pixels from left window edge).
The original Y-axis position of the sprite (offset of pixels from top window edge).
A boolean value (true/false) if the sprite was originally visible when created.
An example of an "Answer" action to review sprite information would look like this:
Sprite Name: [staticsprite:testsprite.Name] Sprite X: [staticsprite:testsprite.Current_X] Sprite Y: [staticsprite:testsprite.Current_Y] Sprite Image: [staticsprite:testsprite.Current_SpriteFileName] Sprite MD Image: [staticsprite:testsprite.Current_MouseDownFileName]
Clear All Variables
Erases all variables that were set.
Set a stack variable to a specific value. This value itself can also be a variable, but if it is, it must be put in brackets like: [CardNumber]. Colons are a reserved character and attempting to set a variable name with a colon in it will fail.
Save Stack State
Use this action to save the current stack state to a file for later loading. Information that is saved is the current set of stack variables, the current card number, the last card visited, and any dynamic sprites or text fields which have been created.
Any currently playing audio or video content is not remembered. If a static sprite has had its image, location, or visibility changed, it will not be saved; however, the mentioned properties will be saved for dynamic sprites.
Load Stack State
This action restores the stack to a state previously saved. You will be taken to the appropriate card, all text fields and sprites will be restored, and all stack variables will be reinstated.
There are two types of buttons in Project Canvas: Card buttons and Stack buttons. Card buttons are buttons which are only on the current card, whereas Stack buttons, as you may have guessed, apply to every card in the stack. Buttons can be assigned names, however this is optional. The correlation between where you click on the card and what button's actions execute is the card mask.
The card mask is laid invisibly under the card image, and is a color map of clickable areas. Each button has a color assigned to it as well. When the user clicks a part of the card image where the mask behind it has a corresponding button color, that button has its Actions execute.
Creating a Card Button
- After navigating to the card of your choice, go into "Picture" menu and choose "Edit".
- By default, the card image will be shown. If you haven't drawn anything yet, draw something on it now.
- Choose "Show Mask" from the View menu and the card image will be hidden, and the mask brought forward.
- To see the card image overlayed onto the mask, choose "Show Image Overlay" from the "View" menu. This will make it easier for the next step.
- Click a color on the swatch, and use the drawing tools on the side of the window to color in the area you want to be clickable with the button we are about to create.
- When complete, close the window and save changes.
- Choose "Buttons" from the "Card" menu.
- Click the plus (+) button at the bottom of the list to create a new button.
- Set the "Match Color" to exactly the same color as the color you drew in the mask with.
- Click the plus (+) button under the "Actions" list to create a new action for this button to perform when clicked.
- After specifying an action (described elsewhere in this documentation), click the "Create Button" button.
- The area of the card image that has the colored bit of the mask behind it is now clickable, and will perform the actions that you just specified.
- Card overview with thumbnails.
- In Picture > Edit, add an option to the Import menu allowing the user to change the exact location of imported pictures on the card - "123,123" instead of "0,0", for example.
- New action to detect keyboard input.
- Add "Show URL" action to buttons.
- Add support for Applescript to allow users to execute their scripts with buttons/actions in Project Canvas.
- Add the ability to hold shift and draw straight lines or 90 or 45' lines.
- Feature to check which version of PC you're running.
- Ability to print a card's image using the entire current representation of how it looks including active sprites, etc.
- Monitor for key press.
Some users may prefer to use their own paint program, instead of the solution provided within Project Canvas. Importing images created in other software is easy .
Replacing a Card Image from a File
- Save out the image in your favourite paint program to JPEG, PNG, or any other standard format desired.
- Choose "Edit" from the "Picture" menu when on the card you wish to change.
- When the paint window opens, choose "Import" from the "Picture" menu and select the recently saved image. The image will be automatically cropped or expanded if required.
Project Canvas is a versatile presentation tool that allows you to create multimedia presentations, adventure games, tutorials, and much more. Projects (also known as "Stacks") are comprised of a set of cards.
Each card has an image, mask, and buttons. Buttons perform various actions when they are clicked, such ask asking a question, speaking text, saving the stack state, playing movies, and playing music.
The card image is the visual representation of the card, while the mask works directly with the buttons. Unlike a traditional presentation tool which limits you to rectangular or polygonal buttons, buttons in Project Canvas are aligned to colors in the card mask. The mask is hidden behind the card image, and when an area of the mask is clicked that corresponds with a button, it will execute that button's actions.
The default stack size is 640x480 pixels; however, we understand this may not accommodate everyone and have provided the feature to change the dimensions to anything desired.
If a stack's dimensions are changed, all card images and masks will be cropped or expanded to fit the new size.
Change Stack Dimensions
- Choose "Stack Details" from the "Stack" menu.
- Enter the new width and height in pixels and click Done.
Not all users who wish to use your stacks need a copy of Project Canvas! It is possible to export a "stand-alone" copy of your stack. This will create an executable that will run your stack on the current platform you are exporting from.
In a Stand Alone project, only the project window is presented. It is not possible to edit or view stack details, card details, buttons, or view card masks. The Stack, Card and Picture menus are also removed.
In addition, you can specify special settings to make your project run full screen or hide the menubar.
Export as a Stand Alone Application
- Choose "Export as Stand Alone Application..." from "Stack" menu.
- Specify the desired export settings, and click the "Build..." button.
- "Reset Stack" action causes crash on first card: 1. Create a new Stack. 2. Add the "Reset Stack" action to the first card in Card > Card Details > Show Card Actions. 3. Add a new card to the stack, then return to the first one. Make sure "Allow Open/Close Card Actions" is enabled in the Card menu. 4. Project Canvas will immediately crash upon returning to the first card.
- Static sprites should be closed before transition begins. Sprites will currently remain on screen until transition ends.
(Windows) The Edit Picture window is missing its menu bar in all Windows versions, thus rendering the Import/Export and Mask controls inaccessible.
- Transitions no longer work since moving to Cocoa. We're working on a fix.