Blog » Benjamin Scarola

Using Animations

Benjamin Scarola — Thu, 29 Mar 2012 06:00:49 +0000

When a component’s Visibility changes based on a state change, you may also specify an Animation effect to use when it shows or hides itself.

To configure Animation effects:

1. Select one or more components and open the component inspector.
Locate the Animations section, and expand it, revealing the On Show and On Hide settings, as in the picture below:

2. Choose an Animation effect
Choose an effect from the On Show or On Hide pop-menus. You may set only one, or both. The default setting is automatic, which means that it will do the opposite of any chosen effect. For example, if you choose to slide down when the component is shown, it will automatically slide up when the component is hidden.

Mobile Designs

Benjamin Scarola — Thu, 29 Mar 2012 05:35:43 +0000

Designing for mobile devices often requires specific viewport formatting, canvas dimensions, and the ability to interact with a prototype directly on the target device. To accommodate these needs ProtoShare provides several functions:

Format As Mobile:

When you create a new Design or inspect an existing Design using the Get Info action, you have the option to format the design for mobile development. Checking the Format as Mobile App checkbox ensures that your design will be rendered at 100% size on your mobile device and that the device’s browser will not be allowed to change the viewport scale. This ensures an app-like experience for your mobile app prototypes.

Screen guides:

Specifying screen guides for the editor allows you to place components at an appropriate location on the canvas, prior to viewing your Design on your mobile device. To choose screen guides use the View->Screen Guides sub-menu and choose the dimensions that best correspond to your device.

Once you have chosen your screen guides, red lines will be drawn on the canvas to identify the right and bottom edges. If you choose guide dimensions that correspond to a mobile device, you will be prompted to format the Design for mobile if you have not already done so. If your Design does not have any components yet, the blank-canvas message will be displayed in the center of the guide region, as in this picture:

View On Device:

Once you have begun adding components to a mobile Design, you can quickly preview it on the target device using the File->View on Device action. You will be presented with a dialog like this one:

1. Navigate to the provided URL
Navigating to the provided URL on your mobile device’s browser will load a page which prompts you for a PIN to authenticate and synchronize your session.

2. Enter the provided PIN
After entering the provided 4 digit PIN on your mobile device, your session will be automatically synchronized, and a link will be displayed that will load the active Design on your mobile device.

Note: For convenience, it is useful to bookmark this page on your mobile device. This page will be the same for all of your Projects.

Saving this page to your mobile device’s home screen provides quick way to link your Designs, and allows you to view them full-screen, with no browser controls ( on supported platforms ).

3. Test your Design
Once you are viewing the Design on your device, you can interact with, and navigate around the prototype as usual. If you need to refresh the Design on your mobile device after making a change in the editor, simply use the mobile browser’s refresh action.

If you want to view a different design on your mobile device, navigate back to the page you bookmarked in step 2, and click the View Design link. If your session has expired since the last time you viewed a Design on your mobile device, you will need to enter a new PIN.

Resolving Topics and Marking Decisions

Benjamin Scarola — Wed, 28 Mar 2012 21:43:40 +0000

Resolving Topics is a way for you to prevent further discussion on a Topic and signal to the other Subscribers that a decision has been reached. Only Owners may resolve Topics. Generally, prior to marking a Topic as resolved, one or more of the replies will be marked as a Decision, in order to indicate exactly what the resolution was.

To Mark Decisions:

1. Select the Topic
Select the Topic in the Topic Listing for which you want to mark decisions

2. Mark each reply that represents a decision
Hover the cursor over the reply to be marked as a decision. A Decision checkbox will appear. Select the Decision box.

To Resolve a Topic:

1. Select the Topic
Select the Topic in the Topic Listing which you want to resolve.

2. Mark Resolved
In the Topic detail pane, below the message body, click the Mark as Resolved button. Alternatively, you can use the Mark as Resolved action from the File or Context menus in the Topic Listing. Using the menu actions allows you to resolve multiple Topics at once.

Archiving Topics

Benjamin Scarola — Wed, 28 Mar 2012 21:28:03 +0000

Topics can be Archived when they are no longer relevant. Archiving Topics serves as a way of de-cluttering the Topic Listing, while simultaneously keeping information available for historical references purposes. When you Archive a Topic it will continue to show up as unread, along-side the Active Topics, for any Subscribers who have not seen the latest version of it. This ensures that Topic Subscribers maintain full visibility into the lifecycle of Topics they are tracking. Once an Archived topic has been marked as read, it can be viewed by switching the Topiic listing to display only Archived Topics, using the View->Show Archived Topics action.

To Archive a Topic:

1. Select the Topic
Select the Topic in the Topic Listing that you want to archive.

2. Archive the Topic
In the Topic detail pane, below the message body, click the Archive button. Alternatively, you can use the Archive action from the File or Context menus. Using the menu actions allows you to archive multiple Topics at once.

Link Mode

Benjamin Scarola — Wed, 28 Mar 2012 18:06:14 +0000

Link Mode allows you to quickly create interactive areas on the editor canvas by drawing boxes to create links, rather than repeatedly creating and resizing Hyperlink components. In addition, links drawn in Link Mode have a special display style such that their regions are clearly visible when editing, but become transparent in Test Mode or Review. The most common use-case for Link Mode is when you need to add interactivity to a static design comp image.

To enable link mode, click the Link Mode button in the toolbar.

As shown below, Link Mode provides a convenient way to overlay links on the canvas:

Annotate Mode

Benjamin Scarola — Wed, 28 Mar 2012 18:04:59 +0000

Annotate Mode is explained thoroughly in the Creating Annotations section.

State Radio Group

Benjamin Scarola — Tue, 27 Mar 2012 21:57:40 +0000

Purpose

The State Radio Group allows you to create a group of radio buttons, with one button for each value of the state.

Description

When a button is clicked, the value of the state is changed to that button’s value. The State Radio Group always reflects the active value of a state, so if other components change the same state, it will change its appearance accordingly.

Properties

The component-specific properties are described below. Refer to Common Properties for descriptions of the common properties.

Name	Description
State	Select an existing state or create a new state.
Hide Labels	Hide the value label for each radio button
# Columns	The number of horizontal columns to draw. This is useful for states that have many values, where you want the values to be drawn as a grid in order to save space. The default is one column, creating a vertical list. To create a horizontal list, specify as many columns as your state has values.

State Checkbox

Benjamin Scarola — Tue, 27 Mar 2012 21:55:41 +0000

Purpose

The State Checkbox allows you to create a checkbox that changes a State value.

Description

Checking and unchecking the State Checkbox causes its State’s value to be toggled between the first and second value. The State Checkbox always reflects the active value of a state, so if other components change the same state, it will change its appearance accordingly.

Properties

The component-specific properties are described below. Refer to Common Properties for descriptions of the common properties.

Name	Description
State	Select an existing state or create a new state.
Hide Label	Hides the state name label for this checkbox.
Custom Label	Overrides the state name label with a custom label. Useful when you want to give the box a label that is not the State’s name.

State Value Name

Benjamin Scarola — Tue, 27 Mar 2012 21:49:42 +0000

Purpose

Display the current value of a state in plain-text.

Description

The state value name component is used when the active value of state needs to be displayed to the user. The text of the state value name can be styled using the standard Appearance settings.

Properties

The component-specific properties are described below. Refer to Common Properties for descriptions of the common properties.

Name	Description
State	Select an existing state or create a new state.

Upload New Version

Benjamin Scarola — Tue, 27 Mar 2012 18:49:54 +0000

You can upload a new version of an Asset if you want to replace the contents of the Asset, but leave all references to it intact. For example, you may have an Asset representing your logo that is referenced by components on several designs in a project. It is much easier to upload a new version of the Asset ( thus replacing the logo image ), than to find and replace each component referencing the old logo.

To Upload a New Version of an Asset:

1. Open the Asset in an editor tab
Find the Asset in the Library and open it in an editor tab by double-clicking it, or using the Open action from the File or Context menus.

2. Upload the new version
Choose the Upload New Version action from the File menu within the Asset editor tab. Select the new file and wait for the upload to complete.

3. Verify your changes
Verify that any components that reference Asset are still be displayed properly.