ProtoShare

10 Time-Saving Editor Tips

Posted: August 2, 2010 by Dave DeAngelis, Director of Education and Professional Services

If you build prototypes using ProtoShare, then you probably spend a lot of time in the Editor. And regardless of whether you’re working on a mission-critical project for your important client, or a personal project to share with your colleagues, finding ways to minimize the effort required to get the job done is a good thing.

Here are 10 time-saving tips to keep in mind the next time you use the Editor. Try them out. I’m sure they’ll improve your prototyping experience.

1. Opening Recently Edited Items

   You can load only one item in the Editor at a time. And if you’re doing a lot of work in a project, you’re most likely editing lots of designs as well as templates and clippings. To open a design, template, or clipping in the Editor you must start from the Prototype screen or the Library.

   If you’re like me, you find yourself jumping around from item to item as ideas pop into your head. Fortunately, once an item has been edited during your current session, it’s listed in the File menu and the item can be quickly opened again by selecting its name. As a convenience, ProtoShare labels each item as a page design, template, or clipping so you can quickly scan the list and choose the correct item.

   

2. Using Keyboard Shortcuts

   Keyboard shortcuts are available for many Editor actions. Some shortcuts are associated with showing parts of Editor interface such as the Component Listing and the Properties tab. Other shortcuts are associated with toolbar functions such as aligning and grouping components. There are still other shortcuts associated with actions that don’t have a corresponding interface element such as duplicating components.

   You can learn about the available shortcuts using tooltips in the interface or the online help. If a shortcut is provided for a specific interface element such as a tab or a toolbar button, then it’s included in the associated tooltip. To display the tooltip, mouse-over the element. For example, to show or hide the Component Listing, press Ctrl + 9. All keyboard shortcuts are available in the online help. To quickly access the relevant help page, click the Keyboard Shortcuts item in the Help menu.

   

3. Duplicating Components

   There’s a particular keyboard shortcut that deserves its own description because its associated function is so useful. The function is duplicating components and the keyboard shortcut is Alt (Option) + click and drag.

   This shortcut is particularly useful when you want to reuse components that are already configured. For example, suppose you’re prototyping a product category page for an ecommerce site. The page uses multiple instances of a product item that consists of grouped components configured a particular way. Rather than recreate this item for each instance and configure the same properties, you can just duplicate the group.

   

4. Selecting Multiple Components

   To perform any action on a component such as repositioning, configuring, and deleting it, you must first select it. To select a single component, you simply click it in the canvas. To select multiple components, you can use Shift + click or the rubberband feature. To use the rubberband feature, click in a region of the canvas that contains no components (or a component that’s locked) and that’s close to the components you want to select, and then drag. A gray selection region is created.

   You can combine the two multiple selection options to quickly select components that are not contiguous in the canvas. Selecting multiple components is a fast way to configure the properties that are common to all components.

   

5. Preventing Components from Being Selected

   Locking a component fixes its position and size, and prevents the component from being selected in the canvas. A common example is locking a background image to prevent it from being selected while selecting other components placed on top.

   To lock a component, select it and click the Lock Position button in the Editor toolbar. A locked component is indicated by an italicized name in the Component Listing, and by the red selection handles in the canvas.

   

6. Positioning Components

   When positioning a component, you have three options: mouse, keyboard arrows, and component properties. The option you choose depends on the granularity of the move, and, to a large extent, your personal preference.

   To position a component with your mouse, select the component and drag. By default the component moves in five-pixel increments. To move it in one-pixel increments, press Ctrl while dragging. To position a component using the keyboard, select the component and press any of the arrow keys. By default, the component moves in one-pixel increments. To move it in five-pixel increments, press the Ctrl key. To move it in ten-pixel increments, press the Shift key. Finally, you can use the X and Y properties in the Position + Size group to specify a position for the selected component.

   

7. Organizing Components with Containers

   The Container component “contains” other components in a parent/child relationship.

   You add components to the Container by dragging them inside its borders. In the Component Listing, the added components appear as children of the parent Container. Because of this parent/child relationship, Container properties such as Visibility, X, and Y are automatically applied to its children. Also, when you use the alignment tools with a single child component, the alignment is performed relative to the Container border instead of the Canvas border.

   The Container component is particularly useful when configuring states. For example, suppose you want a collection of components to appear as a pop-up when clicking a button. You have two options: you can configure the visibility for each component in the collection, or you can place the components in a Container and configure just the Container visibility.

   

8. Changing the Component Stack Order

   Components are stacked as they are added to the Editor canvas. The default stacking order is given by the order in which components are added, with the most recently added component on top. The component on top of the stack appears on top of (overlays) other components in the design. The exceptions are the navigation components, which always display drop-downs and fly-outs on top so they are not obscured. The stacking order is displayed in the Component Listing, with the most recently added component at the bottom of the list.

   To change the stacking order of a component, click the Send Backward button or the Bring Forward button in the Editor toolbar. The component’s position in the Component Listing changes accordingly. For example, suppose you want to include a background image for an existing design. When you add the Image component, it overlays all other components because it’s the most recent addition to the design. In this case, you want to send the component backward so the image appears in the background.

   

9. Interacting with Component Functionality

   When you add components to the Editor canvas, by default you cannot interact with their functionality as you would in the Prototype screen or when viewing the design in a browser. Instead, you interact with components by selecting them, dragging them to a new location, configuring properties, and so on.

   To interact with component functionality in the Editor, click the Interactive Mode button in the toolbar. This mode provides an easy way to test the functionality of your components. For example, you can display navigation subpages, select radio buttons, and verify state behavior. While in interactive mode, a yellow border is displayed around the Editor canvas.

   

10. Correcting Mistakes

    Suppose you add lots of components to a Container by mistake, or duplicate the wrong clipping, or reduce the size of an Image component to 0-by-0 pixels. You can quickly correct these mistakes by using undo and redo. Undo reverses an action, while redo reverses the last undo. ProtoShare stores an unlimited number of actions related to using components such as adding, deleting, and configuring. Note that the action history is deleted when the Editor is refreshed. The Editor is automatically refreshed when you add certain components such as Grid View and any of the page navigation components, and when you assign a template. You can also manually refresh the Editor by clicking the Refresh button.

    To undo an action, click the Undo button in the Editor toolbar. To redo an action, click the Redo button in the Editor toolbar.