11/07/2017 Help

Online Help Document

Table of Contents
Introduction to the layout
Project Panel components
Controls library panel
Create your first Mockup - in 3 minutes or less
Lumzy Main Menu bar
Actions Toolbar
KeyBoard Shortcuts summary:
Working with Text and Labels
Changing an Object's Size
Master Pages
Simulation - Events and Actions
Events
Actions
Working with Controls
Non-container Controls
Container Controls
Icons and Images
Adding Your Own Images
Projects
New Project Dialog
Existing Projects
Versions
Clone a Project
Collaboration - Share & Chat
Share
Chat

Introduction to the layout [feedback]

This section will provide a brief overview of the layout of the Lumzy mockup tool, showing you where general functions are located. If you're anxious to create a
mockup, feel free to give it a try, or jump ahead to Create your first Mockup - it's very easy and you can always come back here to learn more later.

We'll briefly cover each major section of the Lumzy application screen, but will save more detailed explanations of each of the options for later sections. For right
now, we just want you to understand where things are located, in general.

The interface can be split up into four major components:

Lumzy Main Menu bar This is the main menu bar that sits at the very top of the Lumzy application's screen, and contains functions for
global actions related to your mockup projects and application settings.

http://www.lumzy.com/help/help.html 1/20
11/07/2017 Help
Actions toolbar Contains all the actions that relate to working within the pages of your mockup projects, and related to working
with the various controls you place on your mockup pages.

Controls panel (also referred to
as the "Controls library")
Project panel
This is the library of all the base or foundation controls that you'll use in building your mockups. We're use the
term "foundation" controls here to differentiate from other controls that have been pre-built to save you time -
these pre-built controls are called "templates" or "template controls" (more on these later).
This panel makes up the majority of the screen real estate and is where your project pages can be created and
edited, and where you'll spend the majority of your time.

Project Panel components [feedback]

Digging in just a little deeper within the Project panel itself, there are just a few actions that live on the header of this particular panel, the most interesting is the
SIMULATE function.

SIMULATE Clicking the SIMULATE icon will instantly switch your view of your pages from 'design view' and put you into 'simulation
mode' where your mockups will function and simulate the actual screens and interactions. (see the Events and Actions
section for more information on creating powerful simulations)

Change This simply changes the color scheme to a darker skin so that only the mockup pages themselves stand out.
Skin

Expand This removes all the menus and panels so that you have a larger page area to work with. This can be useful once
you've placed all your controls onto your page. To return the page to the normal view, click on the "Shrink" button in
the upper right of this displayed view.

Your mockup pages themselves show up within the Project panel using a tabbed interface, so can easily and quickly switch between your mockup pages.

At the very bottom of the Project panel is the Project toolbar which contains functions that relate to the particular page that you're currently viewing. Settings such
as page size, background color, adding a new page, and editing the page name are all examples of the types of functions that live on this toolbar

http://www.lumzy.com/help/help.html 2/20
11/07/2017 Help

Controls library panel [feedback]

The last panel we'll explore in this brief introduction is the Controls panel (also referred to as the "Controls library"). This panel is where all the foundation controls
live, and from where you'll drag controls to drop onto your mockup pages. This panel uses an accordion interface to organize the various controls into categories.
The topmost category (titled 'Common') is a where the most commonly used objects have been organized for quicker access. The controls in this 'Common' category
still also live within their appropriate categories based on their functions, this is merely a convenient shortcut to get access to those more common controls.

Another way to quickly locate a control is via the Quick Search. This is a dynamic search, so as soon as you begin typing in your search criteria, the list of
matching controls will instantly begin filtering out all controls that do not match. From the example screen shots below, you can see that entering in "tex" quickly
limited down the list of controls to just the text related controls. I'd recommend using the quick search whenever you know what you want, as opposed to just
browsing through the library to see what is available - it's a very fast method.

Create your first Mockup - in 3 minutes or less [feedback]

This section assumes you've already registered and created a login, so if you haven't you'll want to and want to do that now.

Here are the steps we're going to cover and what we're going to create. It's pretty simple, so feel free to use the image (below the steps) to go ahead and try to
create a mockup on your own, and then refer back here if you get stuck:

1. Login
2. Create a new project, giving it a name as well as a name for the first page of our mockup
3. Create the mockup by dragging controls onto the page. Our mockup with be a very simple mail list sign-up page (see picture below)
4. Save our work
5. View the simulation

Let's get started...

http://www.lumzy.com/help/help.html 3/20
11/07/2017 Help
Step 1 - Login

Log in using the email address and password you used to register with. Also, notice the checkbox at the bottom of the loging dialog for clearing your login from the
computer - you'll want to make sure this is checked if the computer you're using is a shared machine. Enter your login information, then click Login.

Step 2 - Create a New Project

After logging in you'll be presented with the Create a New Project... dialog. Enter in a name for your project, or you can leave it as "New Project", and then also
enter in a name for your first page. Leave the default of "Blank Page" selected on the radio buttons, and click the Create Project button.

Step 3 - Create the mockup

In this tutorial we're going to build a simple email sign-up page that will look like the screen below. Nothing fancy, but this will take you through the steps. Note the
various controls that we'll be using to build this mockup - this will help you in locating these controls in the Controls panel or "library". You'll see the terms
"controls" and "objects" used interchangeably to refer to things you place on your mockup page, so don't assume there's any actual difference between the two
terms.

Start by locating the container control that we'll use as parent to place all the other control objects inside. This is not something required, and we could simply drag
the other controls onto our blank page, but using a container will provide a nice frame around our small set of controls for this demonstration. All controls that can
"contain" other controls in this manner are grouped under the category labeled "Containers & Layout" in the Controls panel. So click on the "Containers & Layout"
category and find the control labeled as a "Dialog Window". Additionally, you could have simple entered in some text in the quick search box and after typing in just
"dial" the library display would've narrowed the controls to select from to just the Dialog Window control.

http://www.lumzy.com/help/help.html 4/20
11/07/2017 Help

Grab the Dialog Window control by clicking on it with your mouse and continue holding down the mouse button to drag the control onto your currently blank page in
the Project panel area. When you've placed the Dialog Window control into the boundaries of your page, let go of the mouse button to drop the object onto the
page. When you do this, you'll see a floating Properties dialog pop up. The title of this dialog shows that it is for the currently active object by displaying the name
of the active object in the header of the dialog. We're not going to do anything to change the font or label alignment properties, so we'll ignore this Properties
dialog for now. We do, however, want to change the label of our Dialog Window to say something like "Mail List Signup".

To edit the label of our control, or any control that has a label, you simply double-click near the label text. This tells the object you want to edit the text, and you'll
find yourself in the text edit mode, where you simply enter in the new text. When you're done entering in the new label, hit the Enter or Return key.

The other visual point to note is the frame (the slight outline) and the frame handles (the heavy dots spaced around the frame), that showed up after we placed this
control onto our page. These follow the standard user interface for changing the dimensions of the control. The frame and the frame handles indicate this control is
the current object that has focus. This means that any Properties dialog that is sitting open on your screen will be showing information applicable to this current
object.

Now that we have our parent container ready, let's drag in the rest of the controls we want for our simple mail list sign-up example. On your own, locate and drag in
the following controls and perform the indicated tasks:

Drag in a Text Label control and change the label to "Salutation:"

Drag in a Combobox control and place it to the right of the "Salutation" text label. Edit the values of this combobox control to include: "Mr.", "Miss", "Mrs.", "Ms.",
and "Dr.". Press the Enter or Return key after each value, these should all appears as a vertical listing of values.
Try using the Search box in the Controls panel, and type in "tex" to filter down the controls.
Drag in the Text Label controls for the Lastname and the Email Address and give them the appropriate labels.
Drag in the Text Field controls for lastname and email address and place these to the right of each of the appropriate labels.
Now clear the Search box by clicking on the arrows button just to the right of the Search box.
Last control we need is a Button, so locate a Button and drag it to your page, and change its label to read "Submit"

If you want to align your controls, use the standard method of holding down the mouse key and then drag the mouse to select all the items you want to align. To
align all the labels, use this method to select all the labels together, then click on one of the alignment functions in the Actions toolbar - in this case let's select the
align-left button. Repeat these steps for the salutation combobox and the two text field controls. You're done! Click the SIMULATE button if you want to see your
page in action. Save your work.

Lumzy Main Menu bar [feedback]

http://www.lumzy.com/help/help.html 5/20
11/07/2017 Help
This is the main menu bar that sits at the very top of the Lumzy application's screen, and contains functions for global actions related to your mockup projects and
application settings.

Use this to start or create a new project. This will

New display the Create a New Project dialog, from which
you can enter in a new project title and a name for the
first page in your project, and then click the Create
Project button to get a new design screen. NOTE: the
Create a New Project dialog also allows you the
option to instead open an existing project.

This function takes you directly to the Open Project

Open dialog, which lists all your current projects you have in
the system, as well as some data regarding when each
project was created and last updated. Click on the
project you want to open, then click on the Open button
in the lower right of this dialog. This is also where you
can "clone" a project to make a backup or to make a
copy and use it as a starting point for another project.

Saves the current project that your are working on. NOTE: By default the system is setup to perform a periodic automatic save
Save as a safeguard against losing any data, but you should always make sure to save your work after any important changes. You
can also turn off this auto-save capability (via the checkbox on the Project Properties dialog - see next item below) in case you
Keyboard shortcut:
just want to play with some changes but don't want to overwrite your existing project file.
Ctrl + S

These properties refer to your Project Properties. You

Properties can use the Properties function to change the
name/title of your project, or to re-arrange the ordering
of the pages. Alternatively, you can also rearrange the
page ordering by simply dragging the page tabs around
from directly within your project in the design mode.

You can create "versions" of your project in order to

Versions save copies of your project at a certain point, and then
you can revert back to that version if needed. Creating a
version is useful if you're about to make significant
changes to a project and you may want to be able to
essentially undo all your changes. see more info

If you need to produce static images of your mockup,

Export the Export function will provide you the option of
exporting as JPG files, or as a PDF. For the JPG format,
you can choose just a single page, or all the pages. For
a PDF format, this is only offered for all the pages.

This feature is not yet available - but here's a preview of the functionality soon to be released:
Templates Templates provide you access to time-saving pre-built mockup objects for common interfaces. Instead of building these
commonly needed interfaces yourself, you can simply select from the Templates and instantly insert them into your project. You
http://www.lumzy.com/help/help.html 6/20
11/07/2017 Help
can also contribute to this library to help others and to grow the community of objects to enable you and others to build more
robust mockups even quicker than before. Use the Search to filter down the display of templates based on keywords associated
with the objects. Click on a template to view a larger display of the template object. Click on the "Add Template to Project"
button to insert the template. The new template will appear as a new page in your project (or as new pages if the template
happens to be multiple pages and not just a single object).

The most powerful aspect of a mockup is being able to

Share click and use the mockup as you would the actual final
product, but you need to be able to share this with
customers or colleagues. The Share function is where
you can do just that. The simplest way to share access
to the simulation is to click on the "Activate" button, and
then send the exposed URL to whoever you want to view
the simulation of the mocku. see the Share section for
more information.

For those projects where collaboration is needed, Lumzy

Logs & provides a built in chat feature. see the Collaboration
Chat section for more information

This pops up a feedback form for you to provide us with some feedback, identify a bug, request a feature, whatever you'd like to
Feedback hit us with. Make sure you first specify the type of message, as this will format the message and provide you with some specific
items we may need (such as specifics when reporting a bug).

Gets you to this documentation

Help

Keyboard shortcut:
F1

This shows up when you are logged in and provides access to information where you can change your password, for example.
My Account

Use this to logout of the system. This button will change to display "Login" if no one is currently logged in on the machine.
Logout

Actions Toolbar [feedback]

The Actions toolbar contains all the actions that relate to working within the pages of your mockup project, and related to working with
the various controls you place on your mockup pages. In the discussion covering the Lumzy main menu bar, we talk about functions
related to more global settings and about functions that relate to your projects, whereas with the Actions toolbar we're now dealing at the
page level within a project. Each of the functions is described in detail in the section below

Undo and Redo You can undo or redo the latest changes. You can also use the standard keyboard shortcuts for these
(Ctrl+Z or Command+Z for Undo, and Ctrl+Y or Command+Y for Redo). The Undo and Redo functions
Keyboard shortcuts:

http://www.lumzy.com/help/help.html 7/20
11/07/2017 Help
Ctrl + Z : Undo Last Action only support the changes made since you last saved your project, so be aware, especially if the auto save
Ctrl + Y : Redo Previous capability is turned on.

Duplicate This handy feature is a one button click alternative to performing a Copy and then a Paste within the
same page. Click to select the object(s) you want to duplicate, then click the Duplicate button to instantly
get copies of the the object(s).

Cut, Copy, Paste These are your standard Cut, Copy, and Paste functions. Cut will remove the selected object(s) from the
page and place a copy of the object(s) on the system clipboard. Copy places a copy of the selected
Keyboard shortcuts: object(s) on the system clipboard. Paste places the contents of the system clipboard onto the active
Ctrl + X : Cut page. The standard keyboard shortcuts also apply to these functions (Ctrl+X for Cut, Ctrl+C for Copy,
Ctrl + C : Copy and Ctrl+V for Paste - use Command instead of Ctrl for Mac users).
Ctrl + V : Paste

Lock Use this to lock an object in place and prevent it from accidentally being moved. The small lock icon will
show up on any locked objects. To unlock an object, simply click on the lock icon located on the object
Keyboard shortcut: itself. You can lock multiple objects at once by selecting all the objects and then clicking on the lock
Ctrl + L button, but you cannot unlock a group, as the lock prevents selecting multiple locked objects.

Delete This will delete the currently selected object(s).

Keyboard shortcut:
Delete key

Move forward one layer These are your standard layering functions that allow you to arrange objects or controls on your page
Move backward one layer either towards the background of your page, or towards the foreground. Looking at the icons we've

Move to the front chosen for these functions, just remember that the shaded object represents your object, so when it
appears in front of a single page, then this indicates this function moves your object a single layer
Move to the back
forward. Similarly, if the shaded object appears in front of multiple pages, then this indicates this function
moves your object to the very front. The reverse then applies for the shaded object appearing behind a
single page and then behind multiple pages.

Align left, Align right These are your alignment functions that can help you to quickly line up your controls and images to they
Align top, Align bottom look nice and clean. Select the group of objects you want to line up, then click the appropriate alignment
button. The left, right, top, and bottom buttons should be clear, they simply align the selected objects all
Align middle
the same selected edge. The middle and center options are a little different, in that they align the select
Align center
objects based on the calculated middle (looking vertically) or the center (looking horizontally). For
example, if you had a column of buttons of various lengths, and instead of having them all lining up on
Keyboard shortcuts:
either the leftmost or rightmost edge of all the members of the group, you wanted them all to be
L : Align Items to Left
centered - you'd click the Align center button. Similarly, let's say you have a row of icons that are of
R : Align Items to Right
various sizes and instead of having them all lining up on either the topmost or bottommost edger of all
T : Align Items to Top
the members of the group, you wanted them to all be centered - you'd click the Align middle button.
M : Align Items to Middle
C : Align Items to Center

Show Control Properties
This is your safety net in case you move the Properties dialog popup window too far off the page to
where you can no longer grab it to pull it back. This can happen when you're working quickly and slide
the Properties dialog out of your way - sometimes pushing it completely off the visible page. If this
happens, just click this new Show Control Properties button and the Properties dialog popup will be
pushed back into the visible pare area.

KeyBoard Shortcuts summary:

Ctrl + Z : Undo Last Action
Ctrl + Y : Redo Previous
Ctrl + A : Select All Objects
Ctrl + S : Save Current Project
Ctrl + P : Print Project
F1 : Help
Ctrl + X : Cut
Ctrl + C : Copy
Ctrl + V : Paste
Ctrl + L : Lock Object
L : Align Items to Left
R : Align Items to Right
T : Align Items to Top
M : Align Items to Middle
C : Align Items to Center
Delete : Delete Selected Item

Working with Text and Labels

http://www.lumzy.com/help/help.html [feedback] 8/20
11/07/2017 Help

Working with Text and Labels [feedback]

To change the label of any control, you simply double-click near the current label to get into edit mode. You can do this for any of the controls for either the labels
or for those where you specify the content (such as for a ComboBox or a Menu List). Editing any of these is a double-click. For specifics on any particular control we
have a separate detailed section - simply search the page to locate the control, or go to the Working with Controls ssection.

There are a couple controls that operate slightly different - these are any of the "Rich Text" controls (Rich Format Text and the Bullet List). For these two
controls, the editing of the text takes places directly on their associated Properties dialogs.

Changing an Object's Size [feedback]

Lumzy uses the standard interface for indicating a control object has the current focus by displaying an outline frame around the object, along with the frame
handles (the darker dots) around the selected object.

The frame handles are how you change the dimensions of the control. Grab one of the corner frame handles and drag horizontally and vertically out away from the
control in order to make it larger and taller, or drag the handle in closer to the middle of the control to make the control smaller. Similarly, if you just want to grow
the control in width, just grab one of the side frame handles and drag the handle out (for larger) or in (for smaller). Likewise, if the width is good and you just want
to make the control taller, grab one of the frame handles that is located in the middle of the top or bottom frame edge and drag it away from the object (for larger),
or towards the middle of the object (to make it smaller).

Master Pages [feedback]

Defining a page as a "master" means you can create a single page and have this page's layout and controls be applied to all the other pages that you want to use
this master. The master page functions are all active on the pages using the master page. If, for example, there is a menu item on the master, that menu item is
active and available on all the pages that reference that master page. In addition, the master page cannot be modified from within any of the pages using the
master - any modifications to the master page can only be made on the master page itself, and any changes to the master are automatically reflected in the other
pages (this follows the same standard as many well-known presentation applications).

You can define multiple master pages. If your project has several different sections where a single master doesn't do the trick, then create more master pages -
there's no restrictions here. Create a bunch of masters, and on the individual pages you can simply specify which master you want that particular page to use.

Note: master pages do not themselves display during simulation, only the non-master pages display. So if you have a two page mockup, with one page as a
master, and the other page using that master, when you run the simulation, your simulation will only show one page. This is because the master page is itself not a
mockup page that a user would interact with - it is strictly a source page used by other pages.

To define a page as a master, go to that page in your project, then click on the Edit Page Properties button located on the Page Properties toolbar at the
bottom of your screen (the icon with the pencil). This will pop up the Page Properties dialog.

Within the Page Properties dialog, simply check the "This is a Master Page" box, then click Submit to save your setting. This page is now a master page that can
be used by any other page in your current project.

http://www.lumzy.com/help/help.html 9/20
11/07/2017 Help

To then use this as a master for a particular page, go to that particular page, and then back down at the bottom of your screen to the Page Properties toolbar, the
Page Master dropdown should now list the page you just defined as a master. You can see the page I named as "my master page", which I previously defined as a
master page is now listed in the dropdown. Simply select "my master page" from the dropdown to use this as the master for the current page. If you decide you
don't want to use this as the master, change the dropdown to either select "No Master" or select any other master page that you've defined.

Simulation - Events and Actions [feedback]

The power of a mockup (also referred to as a prototype) is in the simulation - that's why we say "don't just illustrate.....simulate!". You really can't get the feel from
a static wireframe, and while many tools that provide simulation also require a lot more work to get there, Lumzy is extremely simple. In fact you can even put
together a mockup using only the steps you'd use in putting together a static wireframe, and you'll still end up with something that will provide a significant level of
simulation - it's that easy!!

In this section we're going to cover using Events and Actions to take advantage of the power of simulation. Events define the trigger, whereas Actions define
the result or the "action" to perform when the event is triggered. Not all controls support events, and the events may differ among the controls as appropriate. For
example a Button control supports an action of "when clicked", whereas a Checkbox supports an action of "when selected" and "when unselected" - makes
sense.

A couple important points to note:

Even if a control doesn't support the Events and Actions through its associated Properties dialog, that doesn't necessarily mean it is just a static object.
For example, take a look at the Menu Bar control. You'll see the Events tab isn't available in its properties dialog, however it still provides the ability to go
to a page or an external URL.
ANY control or object on the page can be given access to the Events and Actions through the use of the Hot Spot control. A Hot Spot is simply a
transparent control you can size and place anywhere on your pages and then using the "when clicked" event that's available with the Hot Spot, you can select
any of the available Actions to be performed. This is a very powerful feature!

Events
Below is a table of the controls that support events and actions through their respective properties dialogs, along with identification of the specific events that each
control supports.

Control Events Additional

Accordion when selected child changed Specify different actions based on which
item is selected

Button when clicked

CheckBox when selected, when deselected

Combo Box when item changed Specify different actions based on which
item is selected

Datagrid when item clicked Specify different actions based on which

item is selected

Hot Spot when clicked

List when item clicked Specify different actions based on which

item is selected

Multiline Button when clicked

Radio Button when checked, when unchecked

Tab Navigator when selected tab changed Specify different actions based on which
tab is selected

Specifying an event trigger is a simple mouse click. The screen shot below is the properties dialog for a Button control. The specify an event, for this button, simply
select the "When clicked" value from the Event dropdown. You've now specified that when the button is clicked, you want an action to be performed, so next you
need to define what that action is. To do this, simply click on the Add Action button; select the action you want performed; then click the Save button. See the

http://www.lumzy.com/help/help.html 10/20
11/07/2017 Help
next section below for a details on the various actions.

Events tab in the Properties dialog Actions tab in the Properties dialog

Actions [feedback]

While the Events may differ slightly among the various controls, the available Actions are consistent across these controls. Some controls have more granular
definitions, such as a List control, which allows different actions depending on which value is selected by the user, but actions themselves are consistent. Here's a
listing and description of each of the available Actions that can be assigned in the design of your mockups and then experienced during simulation mode:
Go to Another Page This action simply takes the user to another page within the current mockup project.

Show a Message Alert This action will popup an alert box, with the title, message text, and alert box type that you
specify. The alert box types basically display different icons as appropriate.

The icons for the other alert types are:

Okay | Cancel | Help | File

Warning | Next | Previous

Show a Page as a Popup This particular action let's you specify any of your mockup pages to show up and act as a popup.
To define a page as a popup, we recommend you define the page size of the popup page to be
smaller than the page in which you will be having the popup appear. Other than that, go crazy
and create a complex dialog that you can use as a popup an any page.

NOTE: make sure to check out the "Remove current Popup Window" - you'll likely want to include
a button on your popup page and assign this as the action to have the popup close, otherwise it
will remain on the page.

Open a URL By specifying this option, when the user clicks the control, a new browser tab or page will open up
to the specified URL. The user can either switch back to the original tab or window to continue
with the mockup simulation, or closing the tab or window will do the same.

Remove current Popup Window
This action is basically to go hand in hand with the "Show a Page as a Popup" action. When you
specify a page to show up as a popup on another page, the popup will sit there until it's told to do
otherwise. Use this "remove" action on your popup page, by assigning it to a button, or some
other appropriate control that makes sense, so that the popup disappears and reflects the desired
user experience.

Working with Controls [feedback]

In this section we will cover the details for some of the controls that offer additional functionality or that differ slightly from the general population of controls. If
you've skipped to this section and are looking for how to define Events or Actions, or how to work with labels, please see the linked sections for information on those
subjects. If you feel we are missing some information or explanation, please let us know so we can continue to beef up our documentation and videos to help
support the Lumzy product.

The majority of the controls operate in a similar manner to one another, so once you understand one control, especially within a category, you'll readily understand

http://www.lumzy.com/help/help.html 11/20
11/07/2017 Help
the others. We've broken out the information on Controls into two sections: Containers and Non-containers. The first section is a table where we'll cover a majority
of the non-container controls, though not all of them. Instead of covering every single control (which would be a massive list - most of it repetitive) we've chosen to
discuss those controls that may be a little tricky or offer something unique as compared to the bulk of controls. So dive in - remember to use your browser's built in
search capability to search through this document to find the information you're looking for.

Non-container Controls

The Hot Spot control, is a special control in that it can be used to enable ANY control or object on the screen (or
Hot Spot really any location - doesn't have to have an underlying object) a clickable spot that can perform actions. Just
drag the Hot Spot control onto your mockup page and position and size it where you want the user to be able to
hotspot
click in order to perform some action. You can enter enter in a label for the Hot Spot, or you can delete out the
default label text so the control appears as just a transparent element on the screen. Follow the instructions for
enabling events and actions, and now you've made this location on your screen an actionable clickable object -
very powerful!!

The Button control supports the use of an icon - this is accessed via the Button's properties dialog, but you can
Add Icon/Image also add an icon or image anywhere in your mockup pages through the use of the Icon/Picture control. Drag this
control on to your mockup page, then select the icon or image from the stock images, or from your own uploaded
add set of images. See the Icons and Images section for more details, and for information on how to upload your
icon own images.
image

The Button control is a straight forward control, but I'm including it here because I do want to point out the ability
Button to use icons with your button labels, or in place of your labels altogether (such as you'd use in a menu bar for an
application or a keyboard for a wireless device). Take a look at the properties dialog for the button, and check
button out the icon button at the bottom, along with the convenient sizing slider to help make sizing the icon simpler.

Specifying values in your dropdown is to simply edit the labels. Double-click to get into edit mode for this control,
Dropdown or Combobox and then enter in the different values you want to appear when the user selects this object during simulation
mode. Each value needs to appear on a new line.
combobox

Note the properties dialog for this control also allows you to specify which of the values you want the control to
display when simulation is started.

These two controls are somewhat unique in that, while they don't offer the ability to define Events or Actions from
Menu bar and Link bar within their properties dialog, they can still by themselves perform the simple action of taking the user to another
page within your mockup, or to an external URL location. In addition, you can define the text that will show up as
menu bar the tool tip text when the user hovers the mouse over the link in the Menu Bar or Link Bar.
link bar
Let's take the following Menu Bar as an example. This screen shot shows the menu as it appears in the
simulation, and the user's mouse is hovering over the Home link (our screen shot just doesn't show the mouse
pointer)

To specify the information in your Menu Bar or Link Bar, you simply edit the labels. Double-click to get into edit
mode for this control, and then enter in the label you want to display, followed by a comma, then location you
want the user to be taken to, followed by a comma, and then the tooltip text. Let's take a look at the text used to
specify our example Menu Bar:

Now let's break down the details for a specific line from our definition:

http://www.lumzy.com/help/help.html 12/20
11/07/2017 Help

Only caution here is that to reference a mockup page within your project, you need to make sure you enter in the
page's name exactly as it's listed in your mockup.

TIP: instead of using the Breadcrumb control, use a Link Bar menu and use the ">" character as the separator -
now you have a breadcrumb that you can actually use to take the user to the appropriate pages.

The Menu control is really a static visual control - meaning it does not support any events or actions itself, so it
Menu would be one of those controls that is a good candidate for use with some Hot Spot controls. This control does,
however, provide a lot of visual elements that are interesting, and all the visual cues (like the keyboard shortcuts,
menu
the selected radio button, and checkmark next to a selection) are all based on specific values you enter in the
labels for this control. So let's take the stock Menu control shown to the left and open it up in edit mode to see
what this looks like.

As you compare between the image and the text, you'll see you can specify various menu options:

keyboard shortcut or submenu indicator - enter in a comma after the menu item and then enter in the
basically anything you want to show lined text you want to show up as the shortcut or submenu
up to the far right of the menu indicator.

New Page, Ctrl+N

Recent Files, >
Exit, Ctrl+Q
preselected radio button use a lowercase "o" in front of the menu item

oOption One
toggled settings that use a checkmark use a lowercase "x" in front of the menu item

xWordwrap
horizontal line divider use the "=" sign where you want a horizontal divider line

The Tree Pane control is very similar to the Menu control, in that is a static visual control - meaning
Tree Pane
it does not support any events or actions itself, so it would be one of those controls that is a good
candidate for use with some Hot Spot controls. This control does, however, provide a lot of visual
elements that are interesting, and all the visual cues (like the hierarchy, open folder vs. closed
folders, and file icons) are all based on specific values you enter in the labels for this control. So
let's take a look at a custom Tree Pane control shown to the left and open it up in edit mode to see
what this looks like.

As you compare between the image and the text, you'll see you can specify various visual elements
http://www.lumzy.com/help/help.html 13/20
11/07/2017 Help

as follows:

Closed use a lowercase "c" at the beginning of the line to display a closed folder
folder
c Home Stuff
c Holidays
Open use a lowercase "o" at the beginning of the line to display an open folder
folder
oMy Documents
o Images
o Financials
File use a lowercase "f" in at the beginning of the line to display a file

f house budget
hierarchy after the icon display indicator (i.e. the "o", ""c", or "f"), enter a space for
each hierarchical level. The hierarchical levels are absolute levels and not
relative to the prior elements.

c Home Stuff (one space after the "c" indents this folder one level)
o Financials (one space after the "o" indents this folder one level)
f house budget (two spaces after the "f" indents this folder two levels so
that it appears to be one level below, and contained within, the Financials
folder above it)

The Datagrid Table control is a set of columns and rows of data that you specify. You have complete control over
Datagrid Table the column headings, and the content that is displayed. The column widths can be defined, and will automatically
adjust relative to each other as you change the shape of the control as you build your mockup.
datagrid
To define the headings row, enter in the column labels separated by the "|" separator character. This will define
all the columns to be of equal width. The specify a width, enter in a comma after the column heading and then
enter in the pixel value. For example (using the default control, which comes prepopulated with sample data), the
header row is specified as follows:

Name|Sex,70|Age,60|Country,120|Paid,50

Since the "Name" column doesn't specify a size, it will use up all remaining space (assuming the control is
stretched larger than is required by all the other column widths), or this column will be squeezed down first before
the other columns (assuming the control's width is shrunk down).

To define the data for the rest of the Datagrid Table, just enter in data for each column, separated by the "|"
separator character. Here's the data that appears in the default control:

John Paul|Male|23|USA|Y
Chin Juan|Female|28|China|N
Klin Edwards|Male|34|USA|N
Sandra Wilcox|Female|31|UK|N

This control does support Events and Actions, and is one of the controls that has additional granularity related to
the Events/Actions so you can specify different Actions based on which row is selected by the user.

This simply applies some randomness to whatever text is entered. There is no way to control which tags appear
Tag Cloud larger or bold, and each time you edit the contents, the display will be generated differently.

tag cloud

The Modal Screen is simply a semi-transparent rectangle shape you can use to simulate a modal screen - that's it.
Modal Screen Just place this control on a page and layer it in front of the controls on your page to have it look like a modal view
of the page.
modal screen

http://www.lumzy.com/help/help.html 14/20
11/07/2017 Help

The charts are all pretty straight forward. All but the pie chart simply uses a label followed by a comma and the
Column Chart value for the chart. The pie chart only uses the values to produce the image (i.e. no labels).

Bar Chart

Line Chart

column chart Sample for the Column, Line, and Bar chart controls

Sample for the Pie chart control

The charts work well for up to six different entries, displaying each entry in a bright color (after six entries the
colors go dark). Again, note how the column chart supports column labels (as do the Bar and Line charts)
whereas the Pie chart is simply the different slices.

There are four "Draw" controls that you can use to draw simple shapes (triangle, circle, rectangle), or to free
Draw Circle, Triangle, hand. These all support specifying the color and weight (thickness) of the lines. The Triangle, Circle, and
Rectangle, Line Rectangle also support a fill color selection, as well as the ability to set the alpha value to produce transparent or
semi-transparent objects. The Rectangle supports one more function - a "corner radius" value that lets you round
circle
the corners of the rectangle. A corner radius of "0" will provide sharp corners, while a corner radius of "100" will
virtually turn the rectangle into a circle. Below is a display of a rectangle control with various corner radius
settings.

Container Controls [feedback]

What is a container?

Containers are covered separately from all the other controls because they have a unique function - basically they can "contain" other controls,. The controls
that live inside another container are referred to as "children" of the container. Some of these container controls support Events and Actions, but for the
most part, these are used for grouping child objects together and keeping them together as the container control gets moved around the mockup page during
the design process. Placing controls and objects within a container can be a visual design preference, as well as a functional necessity in certain cases.

Example 1: Needed for a simulated action to perform as expected:

A good example is where you wanted two different groups of radio buttons to act independently. The expected behavior with radio buttons is that within a
group of radio buttons, only one button can be selected. In Lumzy, when you place some radio button controls on a page, these will all be considered as part
of the same group. In order to get your mockup to recognize different sets of radio buttons during the simulation mode, the radio buttons need to be
grouped within a container control. Having the buttons in a container control is not itself a requirement for a single group to simulate as you'd expect, this is
only needed when there is more than one group and is needed to segregate the two groups.

Example 2: Needed or desired for keeping a group of controls together:

If you absolutely want to make sure that a group of objects are always moved around as a group during your design process, then the use of a container
control is very useful. Lumzy supports the standard of selecting a group of objects and then moving them around together, but this is not a permanent
grouping.

Using a Container

To use a container, drag the container control onto your mockup page, then using the frame handles, size your container to the appropriate size. To place
objects inside the container, just drag them from the Controls panel and drop them within the boundaries of the container.

NOTE: an object that already exists on your page cannot be directly dragged into a container object to become a child of the container. A child object can

http://www.lumzy.com/help/help.html 15/20
11/07/2017 Help
only be dragged in from the Controls panel. If you have have objects already on your page and you want them to instead be in a container, you will have to
use the copy & paste method. Copy the object(s) to the clipboard; then click somewhere inside the container; and then click the paste button.

That's it, so go fill up some containers!

There is one container control that we'll look at specifically - the Accordion. The Accordion doesn't look like the rest of the container types of controls, though
it actually operates very much like the containers. To define the labels for the Accordion's panels, you double-click the control to get into edit mode, just like
everywhere else. Enter the labels for each of the panels, with each panel's label on a different line. When you're done, hit the Enter or Return key and then
get ready to start dragging in whatever children controls you want. In the example below, I've created an Accordion with the panels of "My Buttons", "My
Pics", and "My Other".

This produces an Accordion that looks like this when it is empty.

I then opened up the "My Buttons" panel of the Accordion and dragged in a bunch of Button controls that I modified. You can see below the buttons I have
in the "My Buttons" section of my Accordion are slightly larger than the current visible space, so the Accordion automatically adds scrollbars to the control. I
can continue adding buttons, or move on to the next section of my accordion and drag in other objects that I want. That's the Accordion

If there are specifics that you don't understand regarding any of the other container controls (or any controls for that matter), please don't hesitate to ask us,
or to make suggestions on how we can improve our documentation.

Icons and Images [feedback]

There are a number of places where you can use icons and image within your mockup. For example, with the Button control, you can specify an icon and using the
handy sizing slider on the Button's properties dialog, easily size the icon appropriate to the button. For any of the controls, or even simply adding an icon or image to
a page, via the "Icon/Picture" control itself, you'll use the Image dialog (labeled "Pick an image..."), which will display the moment you select to work with an icon.

http://www.lumzy.com/help/help.html 16/20
11/07/2017 Help

There are lots images available in this continually expanding library, and grouped into several different categories. The default category that is displayed is the
"Hand-Drawn Icon Stock", which are simple black & white sketch styles images. There are also many colored icons available in the "Color Icon Stock" category (the
above screenshot displays a couple rows of them). If none of these fit your needs, then you have the option to add your own images, which will be stored under the
"My Pictures and Sample Images" category.

Adding Your Own Images

To add your own images for use in your mockups, you use the Image dialog, which you can get to by either adding a Icon/Picture control to your mockup, or by
clicking to use an icon within one of the controls that supports icons (such as the Button control) . From within the Image dialog, click the "Add New Image" button
at the bottom (see prior screen shot), and you'll be presented with a new dialog titled "Edit your image here...". From within this new dialog you can select an image
from your desktop, and then you can modify the image as to the brightness, the contrast, the saturation, the hue, and the rotation.

NOTE: there is a size limitation of images that can be uploaded of 600 pixels wide by 360 pixels tall, so make sure your image fits within these dimensions.

Once you're satisfied with the look of your image, click the "I'm Finished" button to save this image to your own personal images library. If during the editing of the
image properties, you want to return the image to its original look and feel, click the "Reset Image" button to start your editing all over. To use this image, locate
your newly added image in the "My Pictures and Sample Images" category and click on the image.

Projects [feedback]
A mockup "project" is a complete mockup, which could be a single page or, as is more common, multiple pages. You create a new project, then you add and design
your individual pages. Projects can be "cloned" in order to either save a backup copy or to use one project as a start for another different project. You can also save
"versions" of a particular project so that you can revert back to an earlier copy of your project. Both "cloning" and "versions" are covered in more detail below.

New Project Dialog

http://www.lumzy.com/help/help.html 17/20
11/07/2017 Help
To create a new project, click the "New" button on the main menu bar. From the "Create a New Project" dialog, you can conveniently enter in a title for your new
project, along with a name for the first page, or you can accept the default values - either way, when you're ready, click on the "Create Project" button. I You'll
then be ready to begin designing the first page of your new mockup project.

NOTE: If you had clicked on the New button in the main menu bar, but you really meant to open an existing project, you can still do that from the "Create a New
Project" dialog, just click on the "Open an Existing Project" button instead of clicking the "Create Project".

Existing Projects
After using the Lumzy mockup tool for a while, you may find that you have lots of different projects. You can have active projects, closed projects, and projects that
are shared, and the "Open Project" dialog is your dashboard view as to which projects are in what state, plus it's also the place where you can do some house
cleaning of your projects. To get to the "Open Project" dialog, click on the "Open" button in the main menu bar. We'll introduce each of the tabs and functions
available in the next few sections.

My Projects

The first tab titled "My Projects", lists information related to all your active projects - i.e. projects you can access right now by simply clicking on the project and
then clicking the "Open" button. In this display you can see all your active projects; the project titles; which version is currently the "live" version; who last edited
the project; when the project was last edited; and the date the project was originally created. To open a project, click on the project you want to open, then click
the "Open" button in the "Open Project" dialog.

If you look at the bottom of the My Projects tab, you'll also see several other buttons available, in addition to the "Open" button.

You can delete a project by clicking on the project and then click the Delete button. This will permanently remove this project and
you will not be able to get it back.

Use the Refresh button to force the project list to refresh. This may not be as useful on this tab as with the Shared listing, but in
any case, this will force the display of projects to be refreshed.

If you are done with a project, and you don't want to delete it, but you want to get it out of your active project list, you can "close"
it. Closing a project merely removes it from your "active" listing and moves it to the listing of projects on your "Closed Projects"
tab. If you ever want to open a project you've closed, all you have to do is to "re-activate" the project (from the Closed Projects
tab), and then open the project as you normally would from your active project list here on the My Projects tab.

If you want to make a duplicate copy of your entire project, like maybe you want a separate backup copy (you may want to check
out versioning for your project). Or maybe you have a great project starter you created that has all the standard pages you want
to use for all your other projects. Cloning simply creates a copy of the entire project, and let's you give it a new title. Click on the
project you want to clone; click on the Clone button; enter a new title for the resulting copy; and there you go.

Shared Projects

Projects that are shared with you are all listed in this tab. This is a read-only display of the projects - you still must access the projects through the URL and special
code provided to you by the project's owner (improving this user experience is on our "to do" list).

Closed Projects

http://www.lumzy.com/help/help.html 18/20
11/07/2017 Help
Projects that you've closed are removed from your active list of projects (the ones on the My Projects tab) and show up here on the Closed Projects tab. If you
want to open a closed project, you first need to re-activate the project, then go to the My Projects tab to open the project.

Versions [feedback]

Within Lumzy you can save different copies of your project in case you need to revert back to an earlier version. Only one version can be active at a time, and the
current active version is referred to as the "live" version. As you continue to work on a project and save your changes, you continue to update the current "live"
version of the project. If you want to make changes, but want to be able to revert back to an earlier copy of your project, then you'll want to "create a version".
When you "create a version" what you are really doing is saving a copy of your project, and then moving forward to continue to make changes to the "live" project.

To create a version of a project, you must first open the project. To open a project, click on the "Open" button from the main menu, then select the project you
want to open, then the "Open" button from the "Open Project" dialog. Once you have the project open, click on the "Version" button on the main menu to get the
"Project Versions" dialog, then click the button to "Create a Version of Live Project".

Clone a Project
To clone a project means to make a copy of the complete project. This may be useful where you want to create a copy to maybe experiment or markup, without
actually touching the original (though you may want to checkout "versioning" as an alternative to this). Another, and very powerful, use for cloning is to create a
project starter - pages that you tend to use in a majority of your projects. With the Clone feature, you can re-use your starter each time you begin a new mockup
project. To clone a project, you need to access the "Open Project" dialog by clicking on the "Open" button on the main menu. From the "Open Project" dialog, click
on the project you want to clone, then click on the Clone button. Note that you can only clone the current active version of a project, so if there's a specific older
version you want to clone, you'll need to make the older version the current active version prior to using the cloning featur.

Collaboration - Share & Chat [feedback]

Share
Lumzy has collaboration features built into it that allow you to work online with colleagues, as well as with customers. Customers can view your mockups in both
design mode and simulation mode, and make annotations to note issues or changes.

In order to be able to share a project, click the Activate button to enable the display of the URL. You can then send this URL to a customer or colleague to enable
them to view your mockup. If, however, you need others to be able to edit your mockup, then you'll need to add them as Participants. Click on the Participants tab
and enter the information, then click the Invite button, and an email will be send to them with the URL and a special access code for them to use to gain access to
your mockup. At this point you will also be able to establish Chat sessions with these participants through Lumzy as well.

http://www.lumzy.com/help/help.html 19/20
11/07/2017 Help

Chat
Lumzy has a built in chat capability for realtime chats with your colleagues during your mockup development. To establish a chat session, you have to already have
individuals defined as Participants (see the section on Share for adding participants). As soon as you add a participant you'll see a new icon button added to the
Lumzy Main Menu bar.

This new button will allow you to establish a connection to the system for the purpose of chatting. Click the button to connect and you'll see the icon change to
indicate you are now connected.

Not yet connected.

Connected

Once connected you use the Chat tab as you would a typical chat window, entering your messages in the text area at the bottom and clicking the Send button to
send your message.

Help document version: OCT-29-2010

About Lumzy | Terms of Use | Privacy Policy | Support | FAQs

Copyright 2010. All Rights Reserved, Crunch Frog, LLC

http://www.lumzy.com/help/help.html 20/20