Stencils App Modeller - Manual

StencilsApp.com

Version 1.2.0

Table of Contents

• Introduction
• Getting started
• User Interface
• Objects
  • Shapes & Lines
  • Widgets
• Configuration
• Sharing
• Frequently Asked Questions
• Credits

Introduction

You can use it to demonstrate your future apps to potential users, clients or developers and to get their feedback or requirements even before development has started.

Features

• Simulation of complete, multi-screen applications.
• Capture the work-flow of an app through screen transitions and annotations.
• Support for all standard iPhone/iPod touch widgets.
• Powerful 2D drawing capabilities.
• Gesture configuration and detection.
• Advanced object customization:
  • Automatic generation of default values
  • 32bit colors with alpha
  • Fonts
  • Content "scripting"
• Includes a library of reusable sketch samples and screen templates.
• Includes a large library of free icons.
• Additional images can be imported from the devices's library.
• Undo and redo history for all operations.
• Automatic portrait and landscape orientation support.
• Context-sensitive help.
• Sharing of app sketches over email, Facebook or Twitter.
• Downloading and playing of sketches shared online.
• Share app sketches using Bump™.

Every project that you work on will be represented by a sketch.
This is is a collection of screens that can link to each other.
You can easily share them online or download sketches shared by someone else.
Stencils includes a few app samples accessible through the Sketches menu.
They are a great way for starting with the app and for learning some advanced tricks.
You should definitely check the "Stencils" sample which is a detailed sketch with lots of info and notes about the tool itself.

A screen can contain multiple objects, images, text and drawings that describe what the user sees.
Besides the hundreds of possible screens that you can design yourself, Stencils comes with a few templates to get you started. These are available from the Screens menu.

There are 2 available types of objects:

• Widgets
These include all the native UI components that the iPhone supports
• Lines and shapes
You draw these yourself using your fingers.

The app will manage all saving for you automatically.
As you switch between screens, sketches and even other apps on your device, your data will be stored on the disk and restored to the exact state where you left it.

If you are running the Basic version you'll be able to store only one sketch at a time.
The Professional version has no such limitations.

There are two different modes in which you can use the app.

The design mode is the one that is started when Stencils opens. It lets you create and configure sketches, screens and objects and gives you access to the "Configuration" menus.

The play mode (started by pressing the button) lets you test the workflow of your design by tapping the different objects or performing one of the supported gestures and following the resulting notes and screen transitions.
To switch back to design mode, double tap the screen.

The "Instruments Bar" is a vertical strip of buttons on the left side of the screen. It is the most important part of the user interface and gives you access to all functions supported by the app.
To hide or show it in design mode double tap on the screen.

The Play button switches the app to "play" mode and starts the current sketch using the current screen as a starting point*. *You can also setup a main screen for Play mode from the Configuration menu.

The Undo button cancels the last operation and restores the current screen to its state before the canceled action.
You can undo and redo the creation, positioning, resizing and any other manipulation or change in the properties of your objects.
It works with the drawing tools too, letting you safely experiment on the screen.
*Stencils manages a history of up to 20 consecutive operations that can be undone.

Redoes the last undone operations (up to a maximum of 20).

The "Object Properties" menu lets you customize and manipulate the object selected on the screen.
It is split in 2 parts - a list of editable, object-specific properties and a collection of buttons for general object manipulations:

• and Raise or lower the object.
The objects on the screen are sorted by the time of their creation, with newer objects being on top of older.
Use the 2 buttons to change this order.
• and Rotate the object left or right by 90 degrees.
• and Flip the object horizontally or vertically.
• Clone i.e. create an identical copy of the object.
• Delete the object.

The "Widget" menu lets you create one of the native iPhone/iPod Touch UI components and put it on the screen.
You can also configure some of the properties of an object like font type, font color and background color.*
These can be changed later from the "Object Properties" menu.
* Not all properties are supported by all widgets.

The "Shape or Line" menu lets you draw arbitrary 2D shapes and lines on the screen. Each drawing then becomes a new object that you can position, customize and manipulate further.
You can also configure some of the properties of the drawing like stroke (line) width, stroke color and fill color*.
* These can be changed later from the "Object Properties" menu.

The "Configuration" menu gives you access to the app settings and sharing menus.

Opens a menu for managing the screens in the current sketch.
It gives you access to 3 options: New, for starting a new blank screen, Open, for selecting a previously created screen and Start from template, for creating a new screen using one of the prebuild templates as a base*.
* All changes to the current screen are saved and the Undo/Redo history is cleared!

Opens a menu for managing the sketches in the app.
It gives you access to the following options:

• New

Starts a new blank sketch

• Open

Opens a dialog for selecting a previously created sketch

• Open sample sketch

Lets you open one of the the prebuild sample sketches of complete iPhone apps (check Stencils as a sketch itself).

• Download History

Opens a list of the 8 most recently used online downloads and 8 most recently used Bump™ downloads.

• Download

Opens a dialog for downloading an app sketch from the Stencils servers.

• Download with Bump™

Lets you get a sketch from someone nearby.

The "Tools" menu contains the following miscellaneous functions:

Upgrade from Basic to Professional Version

When you buy Stencils from the App Store you get the Basic version, which has all the features of the tool and lets you design any app you like.
The only difference between the Basic and the Professional versions is the number of sketches that you can keep on your device.
The Basic version saves one app sketch only and if you want to create a new one or edit a sample or downloaded sketch you'll have to discard the existing data.
There are no such limitations in the Professional version. You can keep and switch between as many app sketches as you want.

As a bonus the Professional version lets you sync your sketches with our servers and share them for free, while the Basic version will require an one-off, per-sketch fee.

Upgrading from Basic to Professional is done through your iTunes account with a standard in-app purchase, so you won't even have to close Stencils.
If you've already purchased an upgrade (through the same iTunes account), choosing this option will verify your purchase and upgrade you without further charges.
*Restoring a full version upgrade is not a backup replacement and won't restore any saved data!

Lets you send a link for downloading Stencils to someone running the Bump™ app. After lightly bumping your phones they'll be able to install it without having to search or type anything.

Lets you put the current screen in the clipboard for later use.

If you copied a screen* this lets you paste it into the same or different sketch as many times as you like.
*Only one screen can be kept in the clipboard at any given moment

Puts the selected object in the clipboard.

If you copied an object* this lets you paste it into the same or different screen in the same or different sketch as many times as you like. *Only one object can be kept in the clipboard at any given moment.

The "Help" button opens this manual.
It is context sensitive, meaning that if you have selected an object or a menu "Help" will go to the relevant page directly.

The "Objects List" is a scrollable horizontal strip on the bottom of the screen that lets you quickly select any of the existing objects.
* Opening the list clears the current object selection.

Objects

• Name
Any non-empty text used to distinguish the object.
• Position
The coordinates of the top, left corner of the object in the form of 2 numbers separated by a comma.
Example: 50,100
• Target
Another screen in the sketch that will be opened when tapping on the object in play mode.
* Optional.
• Note
A text message that will be popped when tapping on the object in play mode.
* Optional.

• Settings
For 2D shapes and lines opens a dialog for changing the stroke color and width and the fill color used to draw the object.
For widgets opens a dialog for changing the font type and color and the background color of the widget.
• Data
Allows content "scripting" for selected widget types. This means that the textual data represented by the widget can also be changed.
The expected formats are described in the sections for all supported objects below, while the special value "@auto" fills back the default data.

Stencils detects the orientation of your device and creates all new objects in the appropriate orientation.
To manually change the orientation of an object use the rotation buttons in the "Object Properties" menu.

Object Types

There are two main types of objects in Stencils.
2D shapes and lines created with the application's drawing tools and native iPhone/iPod Touch UI components.

Objects of type Shapes & Lines:

• Freehand Drawing

  Lets you draw a line (potentially filled if using a fill color) by dragging the blue circle representing the end point.

• Curves & Lines

Use it to construct a line as a collection of connected sections. Each section can be either a straight line or a (Bezier) curve.
Drag the blue circle to change the end of the current section.
Tap the dotted gray circle to start a new section.
Tap the green circle to turn the last section to a curve and then drag the resulting 2 green circles to change how it looks.

• Rectangle

Lets you draw a resizable rectangle.

• Round Rectangle

Lets you draw a resizable rectangle with rounded corners.

• Ellipse

Lets you draw an ellipse (or circle).

Objects of type Widgets:

• Text

Lets you create a rectangle containing several lines of text.
The text supports 6 different fonts, 32-bit font color and 32-bit background color.
By default the area is automatically filled with "Lorem ipsum" text, but the Data property could be used to enter arbitrary content.
*No specific format is required for entering custom text.

• Image

Lets you add a rectangular area from an image and scale it to a desired size.
The object supports two additional properties:

• Image
Use it to select any image from the device's Photo Library.
• Crop
Defines which part of the image to use as 4 numbers separated by commas. These represent the coordinates of the top, left corner of the area relative to the image's top, left corner and the width and height of the used area (in pixels).
Example: 10,10,100,200
• Icon

Stencils includes the complete free icon collection Tango Icon Library (http://tango.freedesktop.org).
To change the image select the Icon property.

• Text Field

Use it to add a text field widget.
The Data property defines the text inside the field (its Name by default) and can be empty.
You can customize its font and background color through the Settings property.

• Web Page

Contains a rectangular area filled with parsed web content.
You can show any web page by setting the Data property to the address of the page (like http://www.stencilsapp.com).

• Table

Lets you add a table widget which contains one or more groups of rows.
Use the Data property to change the default content.
The property supports the following format:


• Each row, group header or footer starts on a new line.
• Text inside parentheses starts a new group and defines the group's header title. Example: (header name)
• Text inside square brackets ends a group and defines its footer title. Example: [footer name]
• Any other line of text defines a row in the current group.
• Typing * in the start of a row adds a small icon in the beginning, randomly chosen from the large icon library included with Stencils.
• Typing > as the last symbol in a row adds a >-like button at the end. It's called "disclosure indicator".
• Typing @ as the last symbol in a row adds a blue button, with a white >-like image. It is called a "detail disclosure button".
• Typing ' as the last symbol in a row adds a check mark in the end.
Example:
(Europe)
UK
*France
Germany>
(Asia)
*China'
*India>
*Japan@
[3 more...]

• Grouped Table

The same Data format applies as for Table above, but it looks slightly different on the screen with every group being visually separated from the others.

• Map

Use it to add a rectangular area containing a map.

• Button

Lets you add a button with a rounded rectangle border. It supports setting the font's type and color and the color of the button itself.
Use the Data property to set its label to any text you like.

• Segments

Adds a number of buttons combined together.
Use the Data property to add as many buttons as necessary by giving the desired labels as a list of texts separated with commas.
Example:
Red,Green,Blue,Alpha

• Switch

Lets you add a component that switches between an on and an off state.

• Slider

Use it to add a component that lets the user pick a value in a given interval.

• Progress Bar

Adds a component that shows the progress of a process with a known duration.

• Activity

Adds a component that shows the progress of a process with an unknown duration.

• Page Control

Use it to add a control that shows the current page in a multi-paged content and lets the user navigate through the other pages.

• Picker

Lets you create a spinning wheel-like control that lets the user make a choice from a list of predefined values for a set of columns.
Use the Data property to change the default content using the following format:


• A line with N texts separated by commas defines a row of values for the first N columns of the picker
• Putting a value in parentheses makes it selected in its column.
Example:
Red,(Toyota),Petrol
(Black),Ford,Diesel
Silver,Fiat,(Hybrid)
,BMW,
• Date Picker

Adds a special Picker used for selecting dates and times.

• Navigation Bar

Adds a bar on top of the screen containing a title and an optional back button.
Use the Data property to change the default values by setting two comma-separated texts. The first would be the label of the back button and the other the title of the screen.
Example:
Home, Settings

• Search Bar

Adds a bar on top of the screen with a field for making search queries.
Use the Data property to change the text inside the field, including clearing it empty.

• Tab Bar

Creates a bar split in several "tabs" that let the user switch between different screens.
Use the Data property to add as many tabs as necessary by entering their labels separated by commas.
Example:Home,Search,Settings,Help

• Tool Bar

Lets you add a bar that contains a few buttons.
Use the Data property to add as many buttons as necessary by entering their labels separated by commas.
Example:Copy,Cut,Paste,Delete

Pressing the button opens the Configuration menu that lets you manage the current sketch and screen.
It also lets you Bump™, publish or manage online the current sketch.

Through the Settings option you can change the name of the sketch and the default background color used for new screens.
You can also configure the Play mode behaviour by picking a Main screen, which will be the starting point regardless of what you were editing, and by enabling a confirmation for exiting Play mode to avoid accidental double clicks when demonstrating to users or clients.
The Clone option creates and opens an exact duplicate of the sketch (saving all pending changes first).
The Delete option removes the sketch from the disk and opens the last used sketch or starts a new blank one if there are no more sketches left.
The Publish Online option enables the sketch data to be uploaded to our servers and downloaded by anyone running Stencils. In the Basic version you'll have to complete an In App purchase the first time you publish a sketch, while in the Professional version that will be free.
Once the publishing is completed the option is changed to Manage Online Copy which gives you access to the online management menu.
The Bump™ It option let's you send the sketch to someone else running Stencils (version 1.2.0 and above) by just slightly bumping each others hands holding your iPhones.

Through the Settings option you can change the name of the screen, its background color and show or hide the iPhone statusbar and keyboard.
You can also set screen transitions and notes for a selection of gestures that can be performed on the screen in play mode.
The Clone option creates and opens an exact duplicate of the screen (saving all pending changes first).
The Delete option removes the screen from the disk and opens the last used screen or starts a new blank one if there are no more left.
The Take a Screenshot option saves an image of how the scren looks in the user's Photo Library.

Sharing work with other users

Stencils includes 2 different ways for sharing your work:

• Bump™ integration

This lets you send and download app sketches from people nearby by slightly bumping hands while holding your iPhones

• Online sharing

Allows you to publish your work to our servers and let other Stencils users download it from there anywhere in the world.

Whenever you download an app sketch, either from our servers or using Bump™, Stencils saves a copy that lets you modify and experiment with the downloaded sketches without loosing their originals.*
To access the history open the Sketches menu.
*Up to a maximum of 8 most recently used online and 8 most recently used Bump™ sketches.

To send a sketch open the Configuration menu and choose Bump™ It.
To get a sketch from someone else open the Sketches menu and select Download with Bump™.

Downloading a sketch is always free.
Publishing a sketch in the Professional version is also free, while in the Basic version we charge a small, one-off fee per sketch (done through an In App purchase).
Publishing for the current sketch is started by the Publish Online menu option.

Once a sketch has been published it will be kept on our servers until you explicitly delete it from inside the Stencils*.
Any further downloads and management operations will be free of charge.
*Publishing is not transferable.
It is only valid for the particular sketch on the particular device.
Downloading the same sketch on the same or another device creates a completely new, offline version that will require a separate purchase if you want to share it!

Sketch Online Management

• Sketch ID and Password
Every published sketch has an unique online ID that can be used to download and view it on any iPhone or iPod Touch running Stencils.
Optionally you can set a password that will limit the download access to only people who know it.
*Although we send all data over a secure channel and the password should provide a reasonable protection for your sketch, no encryption is currently implemented on the device or our servers.
You should never share sensitive information online!
• Sync
Uploads the latest changes in a sketch to the Stencils servers.
It also updates the password if you've changed it.
When you publish a sketch it is in an offline mode and you will have to perform a sync to send its data and enable it for sharing.

• Take offline
Any published sketch can be removed (temporarily) from our servers without deleting it from the device.
Performing a sync brings the sketch back online (free of charge).

Download Instructions

The Settings menu under Download Instructions lets you configure some details for the Author used by default in instructions emails.
You can also provide your Twitter login details if you want to send instructions through Twitter or delete any saved Facebook login details if you've logged in to publish instructions on your wall.
*No personal data is ever sent to our servers. All these details are only stored on the device using standard storage and libraries.

Tapping the Sketch Id row copies the ID to your clipboard so you can share it with friends and clients.
If you'd rather have Stencils do most of the work for you, pick one of the following options:
Email requires your device to be configured for sending emails and gives you a complete control over the recipients, the subject and the message body itself.
The default text contains all necessary details to help someone install Stencils and download your sketch.

Facebook posts a standard story to your wall with all necessary details. You can add a personal comment, but you can't edit the instructions text.
The first time you use Facebook, you'll be asked to login and could choose to have your login details remembered on the device.

The Twitter option sends the following tweet to your feed (replacing 1234abcd with the sketch ID):
Shared an #iphone #app #sketch with Stencils App Modeller(@stencilsapp, http://www.stencilsapp.com).ID to download: 1234abcd
 
You will have to first enter your Twitter Account's user name and password in the Settings menu.

1. How to design a screen in landscape mode?

Just rotate the device to landscape mode and all new objects will be automatically rotated.
You can also manually rotate any object from the Object Properties menu.

2. Will you steal my personal details? How about my ideas if I publish them on your servers?

No personal data is ever send to our servers. Any details entered in the app like your name, email and Twitter or Facebook logins are only stored locally using standard device functionality.

We won't look at your ideas. All communications with our servers are over a secure channel and sketch downloads can be protected with a password.
However no data encription is done either on the device or the servers, so avoid putting any sensitive information in a published sketch and use replacement names, descriptions and art where possible!

3. How to set targets or notes for smaller parts of objects like tables or tab bars?

While Stencils only supports one target and one note per object, you can always use 2D shapes as overlays to split bigger objects into separate pieces.
By reducing the alpha component of their background color you can make them practically invisible, but still keep them touchable by the user.

4. How to select an object behind the instruments bar? Double tapping deselects my objects.

Double tapping inside a selected object will keep it selected and hide or show the Instruments Bar.

5. How to make animations and play movies or sounds?

Stencils is a simple sketching tool designed with quick prototyping in mind.
At the stage when your app or user interface is still being designed, animations or media would normally be an overkill.
The closest you can get is using the "Web Page" object to load dynamic content from the web, but if you really need something like this to demo your idea, you should consider getting a developer on board.

6. I don't like the icon in a table row. How to pick my own?

Adding a * in the start of a row in the Data property for a Table picks a random icon from the included library.
If you really have to replace it with a specific image, create an Icon or Image object, set its background color to the color of the table and position it on top of the image you didn't like.

7. Do you support the iPad?

At the time when version 1.2.0 was submitted to the iTunes App Store, the iPad was not available for purchase outside of US (we are based in Europe). This means that Stencils hasn't been fully tested on the real device.
However we've fixed any issues we can find using the official emulator from Apple so version 1.2.0 should work without problems. Please let us know if you experience any bugs at our support email.
*This is still the version designed for the iPhone. An update designed to use all new features and screens space of the iPad will be released in the next few months.

8. Can you change something? I found a problem. I love/hate you!

We hope that Stencils makes your life easier and helps you be more creative and productive. We'd love to hear what you like or hate, what works and what you'd like to see fixed or improved.
Please feel free to email any thoughts or feedback to info@stencilsapp.com.

Special thanks to everyone whose work was used in our app:
Bump Bump Technologies Inc. Copyright (c) 2010
ASIHTTPRequest Copyright (c) 2007-2009, All-Seeing Interactive
Reachability Copyright (C) 2009 Apple Inc
Facebook Connect for iPhone Copyright (C) 2009 Facebook
ziparchive for Cocoa Copyright (C) 2008, acsolu@gmail.com
Tango Icon Library Thanks to the Tango Desktop Project