5ml User's Guide

mGage Messaging Administration User’s Guide 

5ml User's Guide 

© 2010-2011 Velti - All rights reserved 1


This material is proprietary to Velti ® . It contains trade secrets and confidential information which is solely the 

property of Velti ® 5ml. This material shall not be used, reproduced, copied, disclosed, and transmitted, in 

whole or in part, without the express consent of Velti ® . 

© Velti ® 2011 All rights reserved. 

- 2 -

About This Guide 

About This Guide 

This guide is designed to familiarize new users with Velti ® 5ml, and to serve as a reference for more experienced users. 

This guide is organized as follows: 

• Chapter 1: Introduction to 5ml — introduces the product and provides an overview of its user interface. 

• Chapter 2: About Administering Accounts—describes how to manage brands and user accounts for your organization. 

• Chapter 3: 5ml Tutorial — provides an overview of designing a mobile project using 5ml. 

• Chapter 4: Organizing Projects — introduces the My Projects page and describes how to organize projects. 

• Chapter 5: Optimizing Projects — describes how to optimize your project using progressive loading settings that 

improve the mobile user experience. 

• Chapter 6: Importing and Managing Assets — shows how to import your creative assets and use them in multiple 

projects. 

• Chapter 7: Working in the Project Editor — describes how to use the Project Editor and the Canvas, where you edit 

your pages. 

• Chapter 8: Customizing Page Elements — describes how to customize page elements by changing their properties 

in the Properties pane. 

• Chapter 9: Using Common Widgets — shows how to use the Text, Label, and Button widgets, and other form widgets, 

for example, Text Input, Checkbox, and List Menu. 

• Chapter 10: Using Shape Widgets — shows how to use the Rectangle, Ellipsis, and Triangle widgets. 

• Chapter 11: Using Media Widgets — shows how to use the Image, Gallery, Audio, Video, and YouTube widgets. 

• Chapter 12: Using Effects and Animation Widgets — shows how to use the 360, Frameset, and Particles widgets. 

• Chapter 13: Using Layout and Navigation Widgets — shows how to use the Container, HBox, VBox, Scroll View, 

Tab Set and View Set widgets. 

• Chapter 14: Using Social Media Widgets — shows how to use the Google +1, Facebook Like, Tweet Button, and 

Twitter Follow widgets. 

• Chapter 15: Using Map View Widget — shows how to use the Map View widget. 

• Chapter 16: Using Web View, HTML, and HTML5 Widgets — shows how to use the Web View, HTML, and HTML5 

widgets. 

• Chapter 17: Enabling Native Device Functionality — describes how to enable native device functionality, for example, 

accelerometer, shake, device orientation, geolocation, and vibration, using events and actions. 

• Chapter 18: Adding Site Tracking — shows how to add the capability to track pages and page elements in order to 

measure site traffic and user behavior on the site. 

- 3 -


• Chapter 19: Deploying Your Project — describes how to deploy your project by exporting its files so that you can 

transfer them to an external web server or by publishing the project within the 5ml environment. 

- 4 -

Table of Contents 


About This Guide 3 

Table of Contents 5 

CHAPTER 1: Introduction to 5ml 9 

About 5ml 10 

How 5ml Works 11 

First Look at 5ml 12 

CHAPTER 2: About Administering Accounts 15 

About Brands 15 

About User Accounts 15 

Adding a Brand 16 

Editing a Brand 17 

Disabling a Brand 18 

Adding a User Account 19 

Editing a User Account 21 

Changing a User Account Password 23 

Disabling a User Account 26 

Deleting a User Account 27 

CHAPTER 3: 5ml Tutorial 28 

Getting Started 29 

Creating a New Project 30 

Organizing Your Assets 32 

Adding a Tracing Image 37 

Changing the Page Background 40 

Adding Text to the Page 43 

Adding a 360-degree View 47 

Adding and Modifying Images 53 

Adding Shapes and Layout Elements 60 

Saving the Page 69 

Creating a Second Page 70 

Creating a Form 71 

Adding a Gallery with Captions 75 

Adding a Video 80 

Adding a Social Media Widget 83 

Adding Navigation Links and Transitions 85 

Previewing the Page 90 

CHAPTER 4: Organizing Projects 91 

About the My Projects Page 92 

Adding a New Project 94 

Importing a Project 97 

- 5 -


Duplicating a Project 100 

Changing Project Settings 102 

Showing Pages in a Project 111 

Opening a Project 112 

Adding a Page to a Project 113 

Duplicating a Page in a Project 114 

Setting a Project's Home Page 116 

Deleting a Page From a Project 118 

Deleting a Project 119 

Previewing a Project 120 

Publishing a Project 123 

Exporting a Project 126 

Backing Up a Project 127 

Restoring a Project 129 

CHAPTER 5: Optimizing Projects 132 

About Optimizing Projects 133 

Optimizing at the Project Level 134 

Optimizing at the Page Level 138 

Optimizing at the View or Tab Level 141 

CHAPTER 6: Importing and Managing Assets 143 

Accessing the Library Pane 144 

Creating Folders 146 

Importing Images 149 

Importing Audio 151 

Importing Video 152 

Deleting Assets 153 

CHAPTER 7: Working in the Project Editor 154 

About the Project Editor 155 

Adding a Page in the Project Editor 157 

Using a Tracing Image 158 

Changing Page Properties 160 

Placing Elements on a Page 168 

Resizing Page Elements 171 

Aligning Page Elements 175 

Arranging and Overlapping Page Elements 181 

Showing and Hiding Page Elements 184 

Locking and Unlocking Page Elements 185 

Rotating Page Elements 186 

Copying, Pasting, and Deleting Page Elements 187 

Opening and Closing Pages in the Canvas 189 

Saving Pages 190 

Previewing Pages From the Canvas 191 

- 6 -


Canvas Viewing Options 192 

CHAPTER 8: Customizing Page Elements 194 

Using the Properties Pane 195 

Changing General Properties 197 

Changing Appearance Properties 198 

Changing Text Properties 208 

Changing Layout Properties 214 

Changing 3D Transformations Properties 216 

Changing Behavior Properties 223 

Using the Advanced Properties Pane 232 

CHAPTER 9: Using Common Widgets 234 

About Common Widgets 235 

Using the Text Widget 237 

Using the Label Widget 239 

Using the Button Widget 241 

Using the Text Input Widget 243 

Using the Text Area Widget 245 

Using the Checkbox Widget 247 

Using the Radio Button Widget 249 

Using the List Menu Widget 251 

Using the Password Input Widget 253 

CHAPTER 10: Using Shape Widgets 255 

About Shape Widgets 256 

Using the Rectangle Widget 257 

Using the Ellipsis Widget 258 

Using the Triangle Widget 259 

CHAPTER 11: Using Media Widgets 260 

About Media Widgets 261 

Using the Image Widget 263 

Using the Gallery Widget 265 

Using the Audio Widget 278 

Using the Video Widget 281 

Using the YouTube Widget 285 

CHAPTER 12: Using Effects and Animation Widgets 287 

About Effects and Animation Widgets 288 

Using the 360 Widget 289 

Using the Frameset Widget 297 

Using the Particles Widget 304 

CHAPTER 13: Using Layout and Navigation Widgets 310 

About Layout and Navigation Widgets 311 

Using the Container Widget 312 

- 7 -


Using the 3D Stage Widget 314 

Using the HBox Widget 320 

Using the VBox Widget 323 

Using the Scroll View Widget 325 

Using the Tab Set Widget 327 

Using the View Set Widget 335 

CHAPTER 14: Using Social Media Widgets 345 

About Social Media Widgets 346 

Using the Google +1 Widget 348 

Using the Facebook Like Widget 350 

Using the Tweet Button Widget 352 

Using the Twitter Follow Widget 354 

CHAPTER 15: Using the Map View Widget 356 

About the Map View Widget 357 

Using the Map View Widget 358 

CHAPTER 16: Using Web View, HTML, and HTML5 Widgets 362 

About the Web View, HTML, and HTML5 Widgets 363 

Using the Web View Widget 364 

Using the HTML Widget 366 

Using the HTML5 Widget 369 

CHAPTER 17: Enabling Native Device Functionality 372 

Enabling Native Device Functionality for a Page 373 

CHAPTER 18: Adding Site Tracking 374 

About Tracking 375 

Enabling Google Analytics 376 

Tracking Pages 378 

Tracking Page Elements 379 

CHAPTER 19: Deploying Your Project 381 

Publishing a Project 382 

Exporting a Project 385 

- 8 -

CHAPTER 1: Introduction to 5ml 


This chapter introduces 5ml and covers the following topics: 

• "About 5ml" on page 10 

• "How 5ml Works" on page 11 

• "First Look at 5ml" on page 12 

- 9 -


About 5ml 

5ml makes it easy for you to design and assemble high-impact, highly-interactive rich media content for smartphones, 

tablets, and standard web platforms. 5ml automatically manages the HTML5, CSS3 and JavaScript behind your rich 

media content to make the creation of content as easy as point and click. 

5ml is a software-as-a-service (SaaS) solution you access from your browser to build rich media content such as ads and 

web sites, incorporating key HTML5 capabilities such as offline support, smarter mobile forms, and advanced device 

features. You can build content projects once to run on any HTML5-compatible device without the time and expense of 

coding. 

With 5ml, you can combine images, video clips, interactive galleries, 360-degree views, social media elements, 

animation, transition effects, and navigation styles into a rich interactive content experience — all without using thirdparty 

browser plug-ins. You can enhance your user's experience with CSS3 specifications such as rounded edges and 

borders, text wrapping, gradients, text shadows, background enhancements, and animations. You can also take full 

advantage of advanced device features such as the device's camera, accelerometer, gyroscope, and location services. 

5ml projects can be exported to any web server or published within the 5ml environment. You can get your mobile 

projects up and running quickly with an easy, out-of-the-box self-service solution, or have Velti run all your mobile 

projects with our full-service program. 

- 10 -


How 5ml Works 

5ml helps advertisers, agencies, and publishers harness the full power of HTML5 to engage consumers with highly 

interactive rich media content -- without the need for coding. 

HTML5 is already transforming the mobile device landscape by making it possible to enhance mobile ads, web pages, 

and rich browser-based applications with new levels of functionality, advanced features, and a streamlined appearance 

for an optimal viewing experience. As the newest standard for mobile site design and creation, HTML5 is already 

supported on next-generation mobile browsers and platforms. 

5mlgives you a powerful visual editing canvas to edit the individual pages and share content among them. 5ml manages 

all of your visual assets in a convenient asset library to use with multiple content projects and pages. You can drag and 

drop assets onto the free-form canvas and directly manipulate them with real-time viewing-- all from the comfort of your 

web browser. 

You can preview your rich media content with full interactive control in your browser, in an HTML5-compatible mobile 

device's browser, and in a tester app available from your device's app store or marketplace. 

- 11 -


First Look at 5ml 

5ml is a software-as-a-service (SaaS) solution you access from your browser at http://www.fiveml.com. You can use 

any HTML5-compatible browser, such as Apple Safari, Google Chrome, Mozilla FireFox, or Microsoft Internet Explorer 

(version 10). However, some features are disabled on browsers that don't fully support HTML5; Safari and Chrome are 

recommended. 

To start using 5ml, enter your account's email address and password, and click the Sign In button, as shown in Figure 1-1 

on page 12. 

Figure 1-1: Accessing 5ml from your browser. 

The My Projects page appears in your browser's window. You use the My Projects page to: 

• Create a new project 

• Open a project 

• Delete a project 

• Preview a project 

• Enable tracking for a project 

• Add a new page to an existing project 

• Import or Export a project 

• Back up and Restore a project 

• Publish a project 

- 12 -


You learn how to create a project in "Adding a New Project" on page 94. The projects you create appear in a list 

underneath the Add New button. Each project can include multiple pages. 

Figure 1-2: Organizing your projects on the My Projects page. 

After clicking on a project name, you can see the project's pages to the right. Clicking the pencil icon at the bottom of a 

page (or double-clicking the page) opens the page in the Project Editor, as shown in Figure 1-3 on page 14. 

The Project Editor is comprised of the following: 

• The Canvas (center), in which you edit your pages 

• The Library pane (top left side), which contains the widgets and your project assets 

• The Page Outline pane (bottom left side), which shows the hierarchy of page elements 

• The Properties pane (right side), which shows properties you can modify for the selected element on the Canvas 

• The menu bar (along the top) with the New button, the Open and Save menus, and the Preview button 

To learn how to use the Project Editor and Canvas, see "Working in the Project Editor" on page 154. 

- 13 -


Figure 1-3: Selecting, adding, and editing page elements and changing properties in the Project Editor. 

- 14 -

CHAPTER 2: About Administering Accounts 


As the administrator of an organization, you can manage brands and user accounts for your organization. 

About Brands 

5ml allows you to segregate you projects by adding brands to your organization. You can then associate one or more 

user accounts to each of your organization's brands. 

Administering Brands 

• "Adding a Brand" on page 16 

• "Editing a Brand" on page 17 

• "Disabling a Brand" on page 18 

About User Accounts 

5ml allows you to add user accounts to your organization and brands so that you can manage who has access to your 

projects. When you add a user account you can assign the user account one of two types of roles. 

• Org Admin–The Org Admin user role can add, edit, and disable brands. This user role can also add, edit, disable, 

and delete a user account. In addition, it can work on projects associated with any of the organization's brands. 

• Author–The Author user role enables users to work on their brand's projects. 

Note: Which functionality a user can access depends on the type of 5ml account that they have access to; regular or 

premium. 

Administering User Accounts 

• "Adding a User Account" on page 19 

• "Editing a User Account" on page 21 

• "Changing a User Account Password" on page 23 

• "Disabling a User Account" on page 26 

• "Deleting a User Account" on page 27 

- 15 -


Adding a Brand 

You can add a brand to an organization from the Administration page. You can add one or more brands to an 

organization. 

To add a brand: 

1. On the Administration page, click Brands, and then Add New. 

Figure 2-1: Adding a new brand 

The Create New Brand dialog appears. 

2. In the Brand Name field, enter a name for the new brand, and click Create. 

Figure 2-2: Entering a brand name. 

The new brand appears in the Brands list. 

- 16 -


Editing a Brand 

You can edit an existing brand from the Administration page. 

To edit a brand: 

1. On the Administration page, click Brands. 

2. In the Brands list, select the brand to edit, and click Edit. 

Figure 2-1: Editing a brand. 

The Edit Brand dialog appears. 

3. In the Brand Name field, edit the brand name, and click Apply. 

Figure 2-2: Editing the brand name. 

The edited brand appears in the Brands list. 

- 17 -


Disabling a Brand 

You can disable a brand from the Administration page. User account's with the Author role will not be able to use a 

disabled brand. 

To disable a brand: 

1. On the Administration page, click Brands. 

2. In the Brands list, select the brand to disable, and click Disable. 

Figure 2-1: Disabling a brand. 

The brand appears disabled in the Brands list. 

- 18 -


Adding a User Account 

You can add a user account to a brand from the Administration page. 

To add a user account: 

1. On the Administration page, click Users, and then Add New. 

Figure 2-1: Adding a new user 

The Create User dialog appears. 

2. In the Create User dialog, enter the information for the new user. 

a. In the Full Name field, enter the user's first and last name. 

b. In the Email field, enter the user's email address. This email address will act at the user's log in account 

name. 

c. In the Password field, enter a password for the account. 

d. In the Verify Password field, enter the password again. 

e. From the Role dropdown menu, select a user role. The user role options are Org Admin or Author. 

• Org Admin–Use when you want the user to access all brands for the organization and create new 

users for the organization. 

• Author–Use when you want the user to only author projects. 

f. The Organization field displays the name of the organization the new user will belong to. 

g. From the Assign To Brands list, select the checkbox for each brand that you want to give the new user 

access to. 

- 19 -


Figure 2-2: Entering the user account information. 

3. Click Create. 

The new user appears in the Users list. 

- 20 -


Editing a User Account 

You can edit user account information from the Administration page, including changing the user account password. 

To edit a user account: 

1. On the Administration page, select the user to edit, and click Edit. 

Figure 2-1: Editing a user account. 

The Edit User dialog appears. 

2. In the Edit User dialog, you can edit the following user account information. 

• Full Name 

• Password 

• Role 

• Assign To Brands 

- 21 -


Figure 2-2: Entering the user account information. 

3. Click Apply. 

The updated user appears in the Users list. 

- 22 -


Changing a User Account Password 

You can change a user account password from the Administration page. 

To change a user account password: 

1. On the Administration page, select the user to edit, and click Edit. 

Figure 2-1: Editing a user account. 

The Edit User dialog appears. 

- 23 -


2. In the Edit User dialog, click Change Password. 

Figure 2-2: Clicking the Change Password link. 

The change password fields appear. 

3. In the Password field, enter a new password, and in the Verify Password field re-enter the password. 

- 24 -


Figure 2-3: Entering the new password. 

4. Click Apply. 

The updated user account appears in the Users list. 

- 25 -


Disabling a User Account 

You can disable a user account from the Administration page. 

To disable a user account: 

1. On the Administration page, click Users. 

2. In the Users list, select the user account to disable, and click Disable. 

Figure 2-1: Disabling a user account. 

The user account appears disabled in the Users list. 

- 26 -


Deleting a User Account 

You can delete a user account from the Administration page. 

To delete a user account: 

1. On the Administration page, click Users. 

2. In the Users list, select the user account to delete, and click Delete. 

Figure 2-1: Deleting a user account. 

3. When the confirmation dialog appears, click Delete. 

The user account is deleted from the Users list. 

- 27 -

CHAPTER 3: 5ml Tutorial 


This chapter provides an overview of designing a mobile project using 5ml. This chapter covers the following topics: 

• "Getting Started" on page 29 

• "Creating a New Project" on page 30 

• "Organizing Your Assets" on page 32 

• "Adding a Tracing Image" on page 37 

• "Changing the Page Background" on page 40 

• "Adding Text to the Page" on page 43 

• "Adding a 360-degree View" on page 47 

• "Adding and Modifying Images" on page 53 

• "Adding Shapes and Layout Elements" on page 60 

• "Saving the Page" on page 69 

• "Creating a Second Page" on page 70 

• "Creating a Form" on page 71 

• "Adding a Gallery with Captions" on page 75 

• "Adding a Video" on page 80 

• "Adding a Social Media Widget" on page 83 

• "Adding Navigation Links and Transitions" on page 85 

• "Previewing the Page" on page 90 

- 28 -


Getting Started 

Web pages and advertisements need to be attractive and interesting, with rich media elements that keep customers on 

the page, and social media elements that encourage sharing and interaction. Web pages and ads must also have a 

streamlined appearance for an optimal viewing experience on mobile devices as well as on computers. 

With 5ml, you can quickly create interactive rich media pages and ads for mobile devices and computers without the need 

for coding. 5ml helps you harness the full power of HTML5 and manage your creative assets to produce pages and ads 

with stunning images, animation, layout options, navigation, and video. You can also utilize powerful mobile-specific 

features, such as tap-to-call and location-based services, which offer not only more convenience, but also more 

relevance to mobile users. 

This tutorial shows you how to use 5ml to create a set of web pages designed for a mobile device that include video clips, 

an image gallery, navigation and layout elements, animated transitions, and an interactive 360-degree view. You can 

drag and drop assets onto the free-form canvas and directly manipulate them with real-time viewing — all from the 

comfort of your web browser. 

What You'll Learn 

In this tutorial you start a new project with multiple pages, and learn how to use the powerful visual editing canvas with 

its drag-and-drop interface to edit the individual pages and share content among them. You also learn how to manage all 

of your visual assets in a convenient asset library to use with multiple content projects and pages. 

The tutorial shows you how to use a page mockup image as a tracing image for placing elements on pages, and how to 

add rich media elements to pages, including text, images, video, an image gallery, and a 360-degree view. You also learn 

how to create text input forms, how to include navigation buttons and links, and how to preview your pages with full 

interactive control in your browser, in an HTML5-compatible mobile device's browser, and in a tester app available from 

your device's app store or marketplace. 

What You Need 

Before you begin, be sure to create an account on the 5ml site and log into your account, as described in "First Look at 

5ml" on page 12. You can use any HTML5-compatible browser, such as Apple Safari, Google Chrome, Mozilla FireFox, or 

Microsoft Internet Explorer (version 10). However, some features are disabled on browsers that don't fully support 

HTML5; Safari and Chrome are recommended. 

To complete this tutorial, you need at least a few images and a video clip. You can use any images for the 360-degree 

view, but for best results use a set of images that show different perspectives of an object or product (such as a car). You 

also need a full-page image to use as a background image for a page. You can use any images as tracing images for the 

pages, but for best results use images that are page mockups. You may want to prepare text captions in advance for 

images in the image gallery. 

- 29 -


Creating a New Project 

To create a new project, first decide the type of project and the name of the project, see "Adding a New Project" on page 

94. 

Figure 3-1: Adding a new project. 

The new project appears in the list of projects on the My Projects page. To show the details of the project, click the 

project name. You can see that the first page has been added to the project. 

To open the first page, double-click the page icon, or click the pencil icon in the bottom left corner of the page icon. The 

Project Editor appears, as shown in Figure 3-2 on page 31, with the Canvas in the center, the Widgets/Assets pane on the 

top left side of the Canvas, the Page Outline on the bottom left side of the Canvas, and the Properties pane on the right 

side of the Canvas. The ID field in the Properties pane is set to "Page 1" to identify the page. 

- 30 -


Figure 3-2: The Project Editor screen. 

- 31 -


Organizing Your Assets 

To create a successful mobile ad or web page, you need to use high-quality creative assets. These assets typically 

include graphics, icons, images, and video clips. 5ml helps you organize your creative assets and use them in multiple 

projects and pages. You can use up to 100 MB of storage for storing assets; however, each asset file you import must be 

under 10 MB. 

To organize and import creative assets, click the Assets tab of the Library pane in the upper left corner of the Project 

Editor window, as shown in Figure 3-3 on page 32. 

Figure 3-3: Click the Assets tab of the Library pane to show the Assets pane. 

Before importing assets, you may want to create folders in the Assets pane first, so that you can import assets directly 

into the folders, thereby organizing the assets and making them easier to find. 

To create a folder in the Assets pane: 

1. Click the create folder button (the folder icon with a plus sign in its center) in the bottom left corner of the Assets 

pane, as shown in Figure 3-4 on page 33. 

The Folder Name dialog appears with a blank field for entering the folder's name. 

- 32 -


Figure 3-4: Add a folder to the Assets pane of the Library. 

2. Enter the folder's name in the field, and then click the Create button (or click Cancel to cancel the operation). 

For example, you might name the folder "people photos", as shown in Figure 3-5 on page 33, if you are going to 

upload photos of people. 

Figure 3-5: Create the folder and give it a name. 

- 33 -


3. The folder appears in the Assets pane, along with the Home icon in the upper left corner, as shown in Figure 3-6 

on page 34. 

Figure 3-6: Selecting the folder in the Assets pane. 

4. Repeat steps 1-3 for each folder you want to add. 

To import assets directly into a folder: 

1. Double-click the folder in the Assets pane (refer to Figure 3-6 on page 34). 

2. Choose Images or Videos from the drop-down menu at the top of the Assets pane (under the Assets tab) depending 

on which type of asset you are importing — image files or video clips. 

3. Click the upload assets button (the document icon with a plus sign on its right side), as shown in Figure 3-7 on page 

35. 

After clicking the upload assets button, the Select Files to Upload dialog appears, as shown in Figure 3-8 on page 

35. 

- 34 -


Figure 3-7: Add asset files to the Assets pane. 

4. Select one or more files, and click the Open button in the bottom right corner of the dialog. 

The assets you select are imported directly into the folder you selected in step 1. 

Tip: You can import one or more files at once. To select a contiguous range of files to import, click the first file in the 

range, and hold down the Shift key while clicking the last file in the range. To select multiple files in a non-contiguous 

range, click the first file, and then hold down the Cmd key on a Mac, or the Ctrl key on a Windows PC, while clicking other 

files to include them in the range. 

Figure 3-8: Select images to import. 

- 35 -


After importing image and video assets to use in your projects (including any mockup images you may have of your 

pages), you can start arranging the assets on your pages. (To learn more about importing and managing assets in the 

Assets pane, see "Importing and Managing Assets" on page 143.) 

- 36 -


Adding a Tracing Image 

You may already have mockup images of one or more pages. If so, you can add them as guides for placing assets on 

your pages. Similar to using tracing paper to trace over an image, you can place a mockup image on the page and control 

its opacity, so that you can see the mockup as a tracing image behind the actual page. 

To assign the mockup image as a tracing image: 

1. Click the blank page in the Canvas to select it, or select Page in the Page Outline pane on the lower left side of the 

Project Editor. 

After selecting the page, the page properties appear in the Properties pane on the right side of the Project Editor. 

2. Drag the mockup image from the Assets pane to the tracing image well in the Properties pane (as shown in Figure 

3-9 on page 37, with a mockup image titled "Home.png"). 

Figure 3-9: Dragging a mockup image to use as a tracing image on the page. 

3. Click the Tracing Image option above the tracing image well to turn it on. 

After clicking this option, the tracing image appears on the page. 

4. Drag the Opacity slider, which is beneath the tracing image well, to the left in order to decrease the tracing image 

opacity so that it fades out, as shown in Figure 3-10 on page 38, making the page and the elements you add to the 

page more visible. 

- 37 -


Figure 3-10: Dragging the Opacity slider to decrease the tracing image's opacity. 

(For more details on using a mockup image as a tracing image, see "Using a Tracing Image" on page 158.) 

The tracing image shows a dark gray page with text and graphic elements. In order to set the background for the page so 

that it matches the dark gray background of the tracing image, start by increasing the opacity of the tracing image to see 

the actual background color: 

1. Click on the page in the Canvas (if it is not already selected). 


2. Drag the Opacity slider to the right in order to increase the tracking image opacity so that you can see the mockup 

image as a normal image, as shown in Figure 3-11 on page 39. 

- 38 -


Figure 3-11: Increasing the opacity of the tracing image. 

After increasing the tracing image's opacity, it is now easier to change the background color of the page to match the 

background color of the mockup. 

- 39 -


Changing the Page Background 

The mockup for the page, which is used as a tracing image, shows a dark gray page with text and graphic elements. To 

change the page background so that it has the same dark gray color as the mockup's background: 

1. Click on the page in the Canvas (if it is not already selected). 


2. Click on the Properties pane's Appearance tab. 

3. Choose Color for the Background drop-down menu, as shown in Figure 3-12 on page 40. 

The color picker appears in the Properties pane. 

Figure 3-12: Choosing Color from the Background menu. 

4. Click inside the HTML color code box underneath the Background drop-down menu to show the color picker. 

5. Click inside the color picker to pick the color. 

6. Drag the slider on the right side of the color picker to adjust the value of the color component to a dark gray, as 

shown in Figure 3-13 on page 41. 

- 40 -


Figure 3-13: Picking a color and adjusting its value to dark gray. 

7. Click on the Properties pane's General tab. 

8. Drag the Opacity slider, which is beneath the tracing image well, to the left in order to reduce the tracing image 

opacity so that it fades out. 

You can now see the page background set to dark gray, as shown in Figure 3-14 on page 42. (For more details on 

changing the page properties, including the page's background and border, see "Changing Page Properties" on page 

160.) 

- 41 -


Figure 3-14: Dragging the Opacity slider for the tracing image to the left to set it to zero in order to see the ad page 

background. 

- 42 -


Adding Text to the Page 

Before adding elements to the page, you can increase the opacity of the tracing image for guidance. Drag the Opacity 

slider, beneath the tracing image well, to the right to increase its opacity. 

The mockup for the page shows a text headline and page title. To add this text to the ad page you can use either the Text 

tab or the General tab's HTML Editor. The following procedure shows how to add text using the Text tab: 

1. Click the Widgets tab in the Library pane to show the Widgets pane, as shown in Figure 3-15 on page 43. 

Figure 3-15: Selecting the Widgets pane. 

2. Drag the Text widget from the Widgets pane to the page over the text headline and title in the tracing image, as 


Figure 3-16: Dragging the Text widget to the page. 

- 43 -


3. Drag the Text widget to create a Text element that covers the headline "2010 Deus." 

4. Drag the handles on the element's corners and edges to resize it to fit over the headline. 

Tip: When placing an element on the page, you can drag it freely to any position, and also use the arrow keys on your 

keyboard to move an element precisely in one direction, such as up, down, left, or right (for details on placing elements, 

see "Placing Elements on a Page" on page 168). To resize an element, drag one of the handles along the edges or at the 

corner of the element (for details, see "Resizing Page Elements" on page 171). 

5. Double-click the Text element to add text to it, and type "2010 Deus". 

6. Select the text in the Text element, as shown in Figure 3-17 on page 44. 

Figure 3-17: Selecting the text in the Text element. 

7. Click on the Properties pane's Text tab, and change the Text element's font family and size, and set the text to 

bold, as shown in Figure 3-18 on page 45, so that it matches the text in the tracing image. 

- 44 -


Figure 3-18: Changing the Text element's font family and size, and setting it to bold. 

8. Click inside the HTML color code box underneath the Font Family menu (refer to Figure 3-18 on page 45). 

9. Select a color in the color picker, and drag the slider to white, as shown in Figure 3-19 on page 45. 

Figure 3-19: Setting the text color to white. 

- 45 -


10. Repeat steps 2-9 for the text "Built for Speed." 

11. Repeat steps 2-9 for the text "385 HP @7200 rpm." 

(For more details on editing and changing Text element properties, see "Changing Text Properties" on page 208). 

- 46 -


Adding a 360-degree View 

The mockup for the Deus project's first page also shows the image of a car, which should actually be a 360-degree view 

that shows the car as if it were rotating on a pedestal. You use a set of images to simulate this 360-degree view. 

The 360 widget creates an element that can show all the images of a 360-degree view. You can set up the 360 element to 

cycle through the images automatically, or to enable users to navigate through the cycle of images by swiping with a 

finger or dragging with a mouse. 

To add the 360-degree view: 

1. Click the Widgets tab in the Library pane to show the Widgets pane. 

2. Choose Effects & Animation from the drop-down menu at the top of the Widgets pane. 

3. Drag the 360 widget from the Widgets pane to the Canvas and position it over the car image in the tracing image, 

as shown in Figure 3-20 on page 47. 

Figure 3-20: Dragging the 360 widget to the page. 

4. Prepare to align the 360 element to the side of the page by clicking the Snap to Parent button to turn it on, as 


- 47 -


Figure 3-21: Clicking Snap to Parent to prepare to align the 360 element to the parent (the page). 

5. Click the Align Left button, as shown in Figure 3-22 on page 48, to align the element to the left side of the page. 

(To learn more about aligning page elements, see "Aligning Page Elements" on page 175.) 

Figure 3-22: Clicking Align Left to align the element to the left side of the page. 

- 48 -


6. Resize the element by dragging one of the handles on its edges or corners, as shown in Figure 3-23 on page 49. 

(To learn more about resizing elements on the page, see "Resizing Page Elements" on page 171.) 

Figure 3-23: Resizing the element by dragging a corner handle. 

7. To find the images for the 360-degree view, click the Assets tab at the top of the Library pane. 

8. Double-click the folder that contains the images (if you organized your images into folders, as described in "Organizing 

Your Assets" on page 32). 

9. Choose Images from the Assets drop-down menu to see your image assets. 

10. Select the first image of the 360-degree view, and drag it to the 360 element as shown in Figure 3-24 on page 50. 

- 49 -


Figure 3-24: Dragging the first image of the 360-degree view to the 360 element. 

11. Select the second image of the 360-degree view in the Assets pane, and hold down Shift while selecting the last 

image in order to select the entire range (from the second image to the last), as shown in Figure 3-25 on page 50. 

Figure 3-25: Selecting the rest of the images at once for the 360 element. 

12. Drag the selected images from the Assets pane to the Photos list in the Properties pane, as shown in Figure 3-26 

on page 51. 

- 50 -


Figure 3-26: Dragging the rest of the images into the Photos list for the 360 element. 

The images are now listed in the Photos list, as shown in Figure 3-27 on page 52. You can click the arrow buttons 

underneath the images in the 360 element to see each one. You can also click the add (+) or delete (-) buttons to add 

another image or delete an image. (You can even reorder the images in the Photos list as described in "Using the 360 

Widget" on page 289.) 

- 51 -


Figure 3-27: Showing the next image in the 360 element. 

By default, the Playback drop-down menu under the Photos list is set to On Swipe. This playback mode enables the user 

to swipe with a finger or drag with a mouse through the 360-degree view manually. (For more details on using the 360 

widget, see "Using the 360 Widget" on page 289.) 

- 52 -


Adding and Modifying Images 

You can drag images directly to the page and then modify them as needed to match the layout of your page mockup. 5ml 

creates an Image element for each image you drag to the page. 

For example, to add the "GALLERY" image: 

1. Click the Assets tab at the top of the Library pane. 

2. Double-click the folder that contains the image (if you organized your images into folders, as described in "Organizing 


3. Select Images from the Assets drop-down menu to see your image assets. 

4. Drag the image from the Assets pane to the page, as shown in Figure 3-28 on page 53. 

Figure 3-28: Dragging the "GALLERY" image directly to the page. 

5. Drag the newly created Image element into position using the tracing image as a guide. 

6. Resize the element if necessary by dragging one of the handles along the edges or at the corner of the element. 

7. To add the "TEASER" image, repeat steps 4-6 (refer to Figure 3-29 on page 54). 

Tip: When placing an element on the page, you can drag it freely to any position, and also use the arrow keys on your 

keyboard to move an element precisely in one direction, such as up, down, left, or right (for details on placing elements, 

see "Placing Elements on a Page" on page 168 and for details on aligning elements, see "Aligning Page Elements" on page 

- 53 -


175. To resize an element, drag one of the handles along the edges or at the corner of the element (for details, see 

"Resizing Page Elements" on page 171). 

Figure 3-29: Dragging the "TEASER" image to the page and moving it into position. 

If your image assets are ready to use, you can drag them to the page, and 5ml creates the Image elements for you. 

However, if your image assets are not yet ready to use, you can drag an Image widget as a placeholder, and then add 

the image to it later. 

For example, to add an Image widget for the logo behind the "GALLERY" and "TEASER" images: 


2. Choose Media from the drop-down menu at the top of the Widgets pane. 

3. Drag the Image widget from the Widgets pane to the page, as shown in Figure 3-30 on page 55, over the logo 

image in the bottom half of the tracing image. 

- 54 -


Figure 3-30 : Dragging an Image widget to the page. 

Later, when the image asset is ready to use, you can drag it to the Image element to fill the element with the image, as 


- 55 -


Figure 3-31: Dragging an image asset to the Image element. 

After adding the image to the Image element, drag the Image element into position to cover the logo in the tracing image, 


- 56 -


Figure 3-32: Dragging the Image element (with its image) into position. 

The image of the logo is in position, but it needs to appear behind the other images, and it needs to be transparent. To 

modify the Image element: 

1. Click on the Image element to select it (if it is not already selected). 

2. Click the Send to Back button at the top of the Canvas, as shown in Figure 3-33 on page 58. 

Send to Back places the Image element behind all other elements on the page. An overlapping element can 

appear either in front of or behind another element depending on its position in the hierarchy of elements in the 

Page Outline pane on the lower left side of the Project Editor. The Page Outline pane shows that the Image 

element is now below the other elements in the hierarchy, which means it appears behind the other elements. You 

can click the Move Forward, Move Backward, Bring to Front, and Send to Back buttons at the top of the Canvas (to 

the left of the alignment buttons) to arrange the elements in the hierarchy. (For details on arranging elements, see 

"Arranging and Overlapping Page Elements" on page 181 

- 57 -


Figure 3-33: Clicking Send to Back to arrange the Image element to be behind all of the other elements on the page. 

3. Drag the Opacity slider in the Appearance tab of the Properties pane to the left in order to reduce the opacity of the 

element, as shown in Figure 3-34 on page 59. 

- 58 -


Figure 3-34: Reducing the opacity of the image by dragging the Opacity slider. 

- 59 -


Adding Shapes and Layout Elements 

5ml offers shape and layout widgets you can use to lay out sections of the page. The Rectangle widget lets you create a 

rectangle, which you can also use to create a horizontal or vertical line. The Container widget lets you create a 

rectangular area on the page that can hold other elements. 

To add a light gray line at the bottom of the page (as it appears in the tracing image), use the Rectangle widget: 

1. Click the Widgets tab at the top of the Library pane to show the Widgets pane. 

2. Choose Shapes in the drop-down menu to see the Rectangle widget. 

3. Drag the Rectangle widget from the Widgets pane to the page in the Canvas, as shown in Figure 3-35 on page 60. 

Figure 3-35: Dragging the Rectangle widget to the Canvas. 

4. Resize and position the Rectangle element by entering its size and coordinates in the Layout tab of the Properties 


Tip: Although you can resize the element by dragging one of the handles on the element's edges or corners, you 

can also enter exact pixel dimensions in the Width and Height fields next to the Size heading in the Layout tab of 

the Properties pane. (To learn more about resizing page elements, see "Resizing Page Elements" on page 171.) 

Tip: Although you can move an element into position on the page by dragging it, you can also enter the X (width) 

and Y (height) coordinates in pixels in the X and Y fields next to the Position heading in the Layout tab of the 

- 60 -


Properties pane. (To learn more about positioning elements on the page, see "Placing Elements on a Page" on 

page 168.) 

Figure 3-36: Resizing and positioning the Rectangle element by entering pixel values in the Layout tab of the Properties 

pane. 

5. Choose Color for the Background drop-down menu in the Appearance tab of the Properties pane. 


7. Click inside the color picker to pick a color. 

8. Drag the slider on the right side of the color picker to adjust the value of the color component to a light gray to 

match the gray line in the tracing image, as shown in Figure 3-37 on page 62. 

- 61 -


Figure 3-37: Changing the background color of the Rectangle element. 

To create a navigation bar with buttons at the bottom of the page that matches the tracing image, use a Container widget, 

which can hold other elements, such as images for navigation buttons. After dragging the Container widget to create the 

Container element, you can drag other widgets or assets into the Container element. If you need the Container element 

with its assets or elements on another page, you can simply copy and paste the entire Container element to the other 

page without having to copy each individual asset or element within the Container element. 

To create the navigation bar with the Container widget: 


2. Choose Layout in the drop-down menu to see the layout widgets, including the Container widget. 

3. Drag the Container widget from the Widgets pane to the page in the Canvas, as shown in Figure 3-38 on page 63. 

- 62 -


Figure 3-38: Dragging the Container widget to the page to create a navigation bar. 

Resize and position the Container widget element by entering its size and coordinates in the Layout tab of the Properties 


Figure 3-39: Resizing and positioning the Container element by entering pixel values in the Layout tab of the Properties 

pane. 

- 63 -


To add an image and a text label to the Container element: 




3. Select Images from the Assets drop-down menu to see your image assets. 

4. Drag the image from the Assets pane to the Container element, as shown in Figure 3-40 on page 64. 

Figure 3-40: Dragging an image into the Container element. 


6. Choose Common in the drop-down menu to see the common widgets, including the Label widget. 

7. Drag the Label widget from the Widgets pane to the Container element, as shown in Figure 3-41 on page 65. 

- 64 -


Figure 3-41: Adding a Label widget to the Container element. 

8. In the General tab of the Properties pane, change the the Label element's Text field (refer to Figure 3-41 on page 

65) to the appropriate text ("Visit Deus Online"). 

9. In the Text tab of the Properties pane, change the Label element's font family and size in the Font Family and Size 

drop-down menus to match the text in the tracing image. 

10. Click inside the HTML color code box underneath the Font Family menu to change the text color for the Label element. 

11. Select a color in the color picker, and drag the slider on the right side of the color picker to a shade of gray, as 


- 65 -


Figure 3-42: Changing the text color of the Label element. 

To add the final element to the Container and change the Container element's background color to white (as it appears in 

the tracing image): 

1. Select the Container element by clicking Container in the Page Outline pane in the lower left side of the Project 

Editor window. 

Tip: To select the Container element, you can click it on the page; however, if there are too many elements in the 

way, it may be easier to click Container in the Page Outline pane to select the element. 




4. Choose Images from the Assets drop-down menu. 

5. Drag the image to the Container element, as shown in Figure 3-43 on page 67 (the external link icon). 

- 66 -


Figure 3-43: Adding an image to the Container element. 

6. Select the Container element again (see step 1). 

7. Choose Color from the Background drop-down menu in the Appearance tab of the Properties pane. 


9. Click inside the color picker to select a color. 

10. Drag the slider on the right side of the color picker to adjust the value of the color component to white, as shown in 

Figure 3-44 on page 68. 

- 67 -


Figure 3-44: Changing the background color of the Container element. 

- 68 -


Saving the Page 

You must save the page in order to preserve the changes you made. To save the page, click the Save menu at the top of 

the Project Editor window, and choose Save, as shown in Figure 3-45 on page 69. 

Figure 3-45: Saving the page. 

Tip: To see the finished page with all of its elements, select Page in the Page Outline pane, and click the Tracing Image 

option in the General tab of the Properties pane to turn the option off, so that the tracing image is no longer visible. Note 

that the tracing image (whether on or off) is not shown on the actual page. 

- 69 -


Creating a Second Page 

To create the next page in the Project Editor, click the New button in the top row of menus and buttons in the Project 

Editor window. 

The new page appears in the Canvas, and a new tab also appears above the Canvas with the page number. You can 

switch from one page to another by clicking the tab for the page above the Canvas. 

To assign a mockup image as a tracing image for the new page: 

1. Select the blank page in the Canvas by clicking on it. 

2. Drag the mockup image from the Assets pane to the tracing image well in the Properties pane. 


4. Drag the Opacity slider next to the tracing image well to the left, as shown in Figure 3-46 on page 70, to lower the 

tracing image opacity. 

Figure 3-46: Adding a tracing image to the new page. 

- 70 -


Creating a Form 

You can use many of the Common widgets to create forms that enable you to request and gather information about 

users. For example, you can request users to enter their email address or mobile number, which you can use later to 

contact them. 

In this example, you will create a form using Text Input, Radio Button, and Button widgets. To add other form widgets, 

for example, Text Area, Checkboxes, Password Input, see "Using Common Widgets" on page 234. 

To create a new page for the form, click the New button in the top row of menus and buttons in the Project Editor 

window. The new page appears in the Canvas. 

To create a form using Common widgets: 


2. Choose Common from the drop-down menu at the top of the Widgets pane. 

3. Add text input fields: 

a. Drag the Text Input widget from the Widgets pane to the Canvas. 

b. Resize and position the Text Input element. 

c. In the Properties pane to the right, in the Prompt Text field, enter prompt text for the new Text Input element. 

For example, enter Name. 

d. In the Max Chars field, enter the maximum number of characters for the Name text input field. For example, 

enter 25. 

e. Drag an additional Text Input widget from the Widgets pane to the Canvas for each of the remaining text 

input fields that you will use in this example; Mobile, Subject, and Email. For each Text Input element enter 

prompt text and its maximum number of characters. 

Figure 3-47: Adding Text Input elements to the form 

- 71 -


4. Add a Radio Button group: 

a. Drag the Radio Button widget from the Widgets pane to the Canvas. 

b. Resize and position the Radio Button element. 

c. In the Properties pane to the right, in the Value field, enter a value for the new Radio Button element. For 

example, enter 1. 

d. In the Text field, enter a label for the Radio Button element. For example, enter TV. 

e. Drag an additional two Radio Button widgets from the Widgets pane to the Canvas. For each Radio Button 

element, enter a unique Value and Text label. For example, 2 and Radio, and 3 and Other. 

Note: Within a group of Radio Button elements, each Radio Button element's Value field must contain a 

unique value. 

f. Edit the second and third Radio Button element's ID field to match the first Radio Button element's ID value. 

Note: To create a group of Radio Button elements, each Radio Button element's ID field must contain the 

exact same value. 

g. Now that each Radio Button element has the same ID and each has a unique Value, you can select which 

Radio Button element will be set as the default Radio Button element. On the Canvas select the default 

Radio Button element, and in the Properties pane, select the Checked check box. 

Figure 3-48: Adding JavaScript code to create the Custom Function sendForm 

5. Add a submit button and JavaScript code: 

In order to gather the user entered data, you need to write custom JavaScript code to capture the data from the 

specific fields in your form. You also need to provide a way to execute the JavaScript code. To do this you can add 

a Button element to the page and on the Button element's Behavior tab, you can select an event and action. For 

example, on clicking (onclick) the button the JavaScript code (Custom Function) executes. 

- 72 -


a. Drag the Button widget from the Widgets pane to the Canvas. 

b. Resize and position the Button element. 

c. In the Properties pane to the right, on the General tab, in the Text field, enter a label for the submit Button 

element. For example, enter Sign Up Now! 

d. In the Properties pane to the right, click on the Behavior tab, and then click Edit Script. Copy and paste your 

custom JavaScript code into the Script Editor. For example, Figure 3-47 on page 71 shows example 

JavaScript code for the sendForm custom function. 

Figure 3-49: Adding JavaScript code to create the Custom Function sendForm 

e. Click Done. 

f. In the Properties pane to the right, on the Behavior tab, click the add Behavior button ( ). 

g. From the Event drop-down menu, select an event. For example, select onclick. 

h. From the Action drop-down menu, select Custom Function. 

i. From the Function drop-down menu, select the name of the Custom Function that you added to the Script 

Editor. For example, select sendForm. 

j. Click Add. 

6. Click Save. 

The Behavior field displays the Custom Function that submits the form's data. 

Figure 3-50: Associating the sendForm Custom Function with the submit Button element 

on page 71 

- 73 -

- 74 - 

CHAPTER 3: 5ml Tutorial


Adding a Gallery with Captions 

The Gallery widget creates an interactive gallery of images with captions for each image, and includes controls for users 

to navigate back and forth through the images. An interactive gallery can be entertaining as well as informative, and it 

provides a way to show multiple images with captions on a single page. 

To add the Gallery widget: 



3. Drag the Gallery widget from the Widgets pane to the Canvas. 

4. Resize and position the new Gallery element using the tracing image as a guide, as shown in Figure 3-51 on page 

75, so that the caption ("") aligns with the caption in the tracing image. 

Figure 3-51: Placing a Gallery widget and resizing it (using the tracing image as a guide). 

To add the first image to the Gallery element: 

1. Click the Assets tab in the Library pane. 

2. Double-click the folder that contains the images (if you organized your images into folders, as described in "Organizing 


3. Choose Images from the Assets drop-down menu to see your image assets. 

4. Drag the first image from the Assets pane to the Gallery element, as shown in Figure 3-52 on page 76. 

- 75 -


Figure 3-52: Dragging the first image into the Gallery element. 

The images in the Gallery element are listed in the Photos list in the General tab of the Photo Gallery Properties pane as 

you add them. You can add the rest of the images to the Gallery element by selecting them in the Assets pane and 

dragging them directly to the Photos list, as shown in Figure 3-53 on page 76. 

Figure 3-53: Dragging several images to the Photos list to add them at once to the Gallery element. 

- 76 -


You can reorder the images in the Gallery element by selecting an image in the Photos list and clicking the up or down 

arrows at the bottom right corner of the Photos list, as shown in Figure 3-54 on page 77. 

Figure 3-54: Moving the selected image up in the order of images in the Gallery element. 

To place captions at the bottom of the Gallery element: 

1. Choose Bottom in the Captions drop-down menu under the Photos list in the Photo Gallery Properties pane (if it is 

not already selected). 

2. Click inside the caption area of an image in the Gallery element. 

The Label (caption) properties appear in the Properties pane, as shown in Figure 3-55 on page 78. 

- 77 -


Figure 3-55: Selecting the caption area to show the Label properties in the Properties pane. 

3. Enter the caption text in the Text field in the General tab at the top of the Label properties. 

The caption text appears in the caption area on the page, and is also listed in the Photos section of the Photo 

Gallery Properties pane. 

4. To switch to another image and add another caption, select the full Gallery element again, and click the Show Next 

or Show Previous button on the right side of the gallery controls, as shown in Figure 3-56 on page 78. 

5. Repeat steps 2-4 to add captions to the other images in the Gallery element. 

Figure 3-56: Clicking the Show Next button to show the next image in the Gallery element. 

- 78 -


You can change the size of the caption area, place captions at the bottom or top of the images, or overlay the captions 

over the images, as well as change the appearance, text, and layout properties for the captions. For details, see "Using 

the Gallery Widget" on page 265. 

To save the page before adding more elements or creating another page, click the Save menu at the top of the Project 

Editor window, and choose Save. 

- 79 -


Adding a Video 

You can use the Video widget to place a video element on the page with controls for users to play or pause the video, and 

rewind, scrub through, or fast-forward through the video. 

To create a new page for the video, click the New button in the top row of menus and buttons in the Project Editor 

window. The new page appears in the Canvas. To assign a mockup image as a tracing image for the new page, see 

"Adding a Tracing Image" on page 37. 

To add the Video widget: 



3. Drag the Video widget from the Widgets pane to the Canvas. 

4. Resize and position the Video element using the tracing image as a guide, as shown in Figure 3-57 on page 80. 

Figure 3-57: Placing a Video element and resizing it (using the tracing image as a guide) 

To add a video to the Video widget element: 

1. Click the Assets tab in the Library pane. 

2. Double-click the folder that contains the video files (if you organized your assets into folders, as described in 

"Organizing Your Assets" on page 32). 

- 80 -


3. Select Videos from the Assets drop-down menu to see your video assets. 

4. Drag the video file from the Assets pane, and drop it into the Video element, as shown in Figure 3-58 on page 81. 

Figure 3-58: Dragging a video from the Assets pane into the Video element. 

You can set the Preview frame of the video, which is the frame that appears before the video loads and when the video is 

not playing. You can also set the video controls to be visible or hidden: 

1. Click the video on the page to select it, or select Video in the Page Outline pane. 

2. Drag the Preview Frame slider in the General tab of the Video Properties pane to the right until you see the frame 

you want, as shown in Figure 3-59 on page 82. 

You can move backward and forward through all the video frames by dragging the slider left and right. 

3. Choose Visible or Hidden from the Controls drop-down menu. 

- 81 -


Figure 3-59: Setting the Preview Frame for the video. 

- 82 -


Adding a Social Media Widget 

5ml includes several Social Media widget elements you can place on a page so that the user can share the page on the 

Facebook and Twitter social media sites. For example, you can place on the page a Facebook "Like" button with the faces 

of other Facebook friends who "like" your page. 

To place a Facebook "Like" button: 


2. Choose Social Media from the drop-down menu at the top of the Widgets pane. 

3. Drag the Facebook Like widget from the Widgets pane to the Canvas, as shown in Figure 3-60 on page 83. 

Figure 3-60: Placing a Facebook Like widget on the page. 

4. In the URL to Like field underneath the ID field in the General tab of the Properties pane (on the right side of the 

Project Editor), enter the URL of the page to share on Facebook. 

5. Click the Show Faces option to turn on the display of faces of the user's Facebook friends who have also liked this 

URL. 

The Show Faces option appears for the standard layout. You can choose a different layout style in the Layout Style 

drop-down menu. See "Using the Facebook Like Widget" on page 350 for details. 

6. Choose a color scheme for the Facebook Like widget element (either Light or Dark) in the Color Scheme dropdown 

menu underneath the Layout Style menu. 

7. Choose the font for the button and "Sign up" link in the Font drop-down menu. 

8. Choose the verb to use (either "Like" or "Recommend") in the Verb To Display drop-down menu. 

- 83 -


To learn more about using the Social Media widgets, see "Using Social Media Widgets" on page 345. 

- 84 -


Adding Navigation Links and Transitions 

To create a navigation link, you can associate an event/action with an Image element to be performed when the user 

taps or clicks the image. For example, you can turn the "GALLERY" icon image on Page 1 into a link to Page 2, which 

contains the gallery. 

Tip: You can associate an event/action with many types of elements; see "Changing Behavior Properties" on page 223. 

To use an image element as a navigation link to another page in your project: 

1. Click the Image element on the page, or select it in the Page Outline pane. 

2. Choose onclick from the Event menu on the Behavior tab of the Properties pane. 

3. Choose Show Page from the Action drop-down menu . 

4. Select the page (for example, Page 2, Page 3, etc.) from the menu that appears underneath the Action menu, as 

shown in Figure 3-61 on page 85 

Figure 3-61: Choosing Show Page as the action for an Image element, and selecting the page number in the project. 

5. Add a page transition effect by choosing Slide or Fade In from the Effect drop-down menu, as shown in Figure 3-62 

on page 86. 

Tip: Transition effects are available only when linking to an internal page in your project. 

- 85 -


Figure 3-62: Adding a transition effect for the Show Page link. 

6. Change the duration of the transition by clicking the up or down arrows for the Duration control, as shown in Figure 

3-63 on page 87, or enter the number of seconds (you can use a decimal point to enter fractions of a second). 

- 86 -


Figure 3-63: Changing the duration of the transition. 

To set the "TEASER" image as a navigation link to Page 3 in your project (which contains the teaser video clip), click the 

image and repeat steps 1-5, choosing Page 3 in step 3. 

If you choose the Slide transition, you can change the direction of the slide transition, as shown in Figure 3-64 on page 88, 

by choosing one of the following options from the Direction drop-down menu: 

• Right to Left: The image slides into view from the right side. 

• Left to Right: The image slides into view from the left side. 

• Bottom to Top: The image slides into view from the bottom. 

• Top to Bottom: The image slides into view from the top. 

- 87 -


Figure 3-64: Setting the direction of the slide transition. 

If you choose the Fade-in transition, you can specify the way the fade-in transition accelerates from start to finish by 

choosing one of the following options from the Acceleration drop-down menu: 

• Ease: The image fade-in accelerates slowly and builds up to normal speed. 

• Ease In: The image fade-in accelerates from slower at the start to normal speed at the end. 

• Ease Out: The image fade-in plays at normal speed at the start and then decelerates (from faster to slower) at the 

end. 

• Ease In Out: The image fade-in accelerates from slower at the start to faster in the middle, and then decelerates 

(from faster to slower) at the end. 

• Linear: The image fade-in occurs at the same speed throughout. 

- 88 -


Figure 3-65: Setting the acceleration of the fade-in transition. 

- 89 -


Previewing the Page 

You can preview any page in the project from the Canvas: 

1. Save each modified page of the project first -- see "Saving the Page" on page 69 

2. Click the Preview button in the Project Editor menu bar above the Canvas. 

If you have a page in your project that is not yet saved, 5ml displays a warning that pages contain unsaved 

modifications. The warning dialog asks if you want to continue with the preview, and provides the Cancel and OK 

buttons. Click Cancel to cancel the preview, or OK to continue with the preview (your unsaved modifications may 

be lost if you continue). 

If your pages have already been saved, or if you click OK to the warning, the Preview dialog appears, as shown in 


3. Click the Preview Now button to see the page in your browser. 

Figure 3-66: Previewing the page. 

For a detailed description of previewing the project in a mobile browser or using the 5ml tester app, see "Previewing a 

Project" on page 120 

- 90 -

CHAPTER 4: Organizing Projects 


5ml provides the My Projects page to help you organize your projects. This chapter covers the following topics: 

• "About the My Projects Page" on page 92 

• "Adding a New Project" on page 94 

• "Importing a Project" on page 97 

• "Duplicating a Project" on page 100 

• "Changing Project Settings" on page 102 

• "Showing Pages in a Project" on page 111 

• "Opening a Project" on page 112 

• "Adding a Page to a Project" on page 113 

• "Duplicating a Page in a Project" on page 114 

• "Setting a Project's Home Page" on page 116 

• "Deleting a Page From a Project" on page 118 

• "Previewing a Project" on page 120 

• "Publishing a Project" on page 382 

• "Deleting a Project" on page 119 

• "Backing Up a Project" on page 127 

• "Restoring a Project" on page 129 

• "Exporting a Project" on page 385 

- 91 -


About the My Projects Page 

After signing in to your 5ml account, the My Projects Home page appears in your browser's window (see Figure 4-1 on 

page 92), and to the left appears the Project Navigation panel. Your projects are listed in alphabetical order in the Project 

Navigation panel. Each project can hold multiple pages that constitute your mobile site or mobile ad. Above the projects 

list appears a search box and beneath the projects list appears the project list filter. You can find a project by searching 

for it by name in the search box and/or by filtering the project list by brand and/or project type, and then sorting the 

projects list. 

• To add a new project, click the Add New button. See "Adding a New Project" on page 94 to learn how to add a new 

project. 

• To import a project, and its set of files, click the Add New button. See "Importing a Project" on page 97 to learn 

how to import a project. 

• To open an existing project, see "Opening a Project" on page 112. 

• To find an existing project, "Finding, Filtering, and Sorting Projects" on page 1. 

Figure 4-1: The My Projects Home page. 

The Preview, Duplicate, Backup/Restore, Export, Delete, and Settings menu items appear when you click on the Project 

Menu ( ) icon (refer to Figure 4-1 on page 92): 

• Use Preview to preview your project, see "Previewing a Project" on page 120. 

• Use Duplicate to create a new project from a copy of an existing project, see "Duplicating a Project" on page 100. 

• Use Backup/Restore to perform project back ups (and save versions), and use the project backup file to restore a 

project or import the project into another workspace. For more information, see "Backing Up a Project" on page 

127 and "Restoring a Project" on page 129. 

- 92 -


• Use Export to export a project, see "Exporting a Project" on page 385. 

• Use Delete to delete a project, see "Deleting a Project" on page 119. 

• Use Settings to set up and customize project-level configuration options, for example, add project metadata tags, 

customize runtime behavior, enable a splash screen, enable project level optimizing, enable tracking, or enable 

offline caching of assets, see "Changing Project Settings" on page 102. 

- 93 -


Adding a New Project 

When adding a project, you can create a project from scratch or import a project. You can choose whether to create a 

micro website or an ad unit. Each new project starts with a blank Page 1 (the starting page or home page). 

To add a new project: 

1. On the My Projects page, above the projects list, click the Add New button, as shown in Figure 4-2 on page 94. 

Figure 4-2: Adding a new project. 

The first page of the New Project Setup wizard appears, as shown in Figure 4-3 on page 94. 

2. Select the Create From Scratch option, and then click Continue. 

Figure 4-3: Selecting the Create From Scratch option. 

- 94 -


The second page of the New Project Setup wizard appears. 

3. In the Project Name field, enter a unique name for the project that best describes its purpose. 

Figure 4-4: Selecting the mobile website option. 

4. Choose whether the new project is a website or an ad project. 

5. Click Finish. 

• If the new project is an website, select the Blank Website option. 

• If the new project is an ad, select the Full Page Interstitial option. (Currently, 5ml supports only Full Page 

Interstitial ads for Mobclix in-app ads.) 

The project appears in the list of projects on the My Projects page, and the project's first page is created. 

Figure 4-5: New project with the first page set as the home page. 

- 95 -


Note: You can change the default project settings now or later. See "Changing Project Settings" on page 102. 

- 96 -


Importing a Project 

Using a backed up project file, you can import an entire project from the My Projects page and save it with a project 

name of your choosing. The project is imported as a compressed "pkg" file (with the ".pkg" filename extension) and then 

unpackaged into a project folder. For more information about creating a backup file, see "Backing Up a Project" on page 

127. 

To import a project: 

1. On the My Projects page, above the projects list, click the Add New button, as shown in Figure 4-6 on page 97. 

Figure 4-6: Adding (importing) a new project. 

The first page of the New Project Setup wizard appears, as shown in Figure 4-7 on page 98. 

2. Select the Import Project option, and then click Continue. 

- 97 -


Figure 4-7: Importing a project. 

The next page of the New Project Setup wizard appears. 

3. Click the File to import, Browse button to locate the pkg file that contains the project's files to import, as shown in 

Figure 4-8 on page 98.Figure 4-6 on page 97 

Figure 4-8: Selecting the project file to import. 

4. From the Brand dropdown menu, select the brand account for which you want to import the project. 

5. In the Import As field, enter a unique name for the imported project that best describes its purpose. 

6. Click Import. 

- 98 -


• You might see a dialog notifying you that some asset files were not imported because they already exist in 

your account, as shown in Figure 4-9 on page 99. This ensures that you do not erroneously replace an 

asset, for example, an image, that already exists and is used in a different project. 

Figure 4-9 : Skipping existing asset files. 

• If there are no duplicate asset files, a dialog appears stating that the project has been imported 

successfully, as shown in Figure 4-10 on page 99. 

Figure 4-10: Importing all files. 

7. Click Finish to complete the import process. 

The imported project appears in the projects list. 

- 99 -


Duplicating a Project 

You can duplicate an existing project from the My Projects page. Duplicating makes an exact copy of your project, which 

you can then freely modify. 

To duplicate a project: 

1. On the My Projects page, click on the project name. 

The Project Menu ( 

) icon appears. 

Figure 4-1: Duplicating a project. 

2. Click on the Project Menu icon to open the menu, and select Duplicate. 

A duplicate copy of the project appears in the project list, with "Copy 1" appended to the project name. 

- 100 -


Figure 4-2: Duplicate copy of the project in the projects list. 

- 101 -


Changing Project Settings 

After you add a new project, you can change some project-level settings. By default these settings are not enabled 

(except for preloading assets). You can change the default settings at the start of the project or at any time later. 

To open the project Settings page: 




2. Click on the Project Menu icon to open the menu, and select Export. 

Figure 4-1: Opening the Settings page. 

The project's Settings page appears. 

3. To change the project's settings, scroll to the appropriate section and enable or disable the setting, choose setting 

options, or enter text, then click Apply and OK. 

Project-level settings include: 

• General: Enables you to add page metadata tags to landing pages and define the browser heading title. 

See "General" on page 103. 

• Runtime: Enables you to define how your project should behave or look at runtime. See "Runtime" on 

page 104. 

• Splash Screen: Enables you to customize what a user will see while your project loads in the browser. 

See "Splash screen" on page 105. 

- 102 -


General 

• Open Graph Meta Tags: Enables you to create a Facebook Open Graph Object with metadata for a 

project, and when a user posts the web app to Facebook, Facebook can use the metadata to generate the 

post summary. See "Open Graph Meta Tags" on page 107. 

• Optimization: Enables the preloading of assets. See "Optimizing at the Project Level" on page 134. 

• Analytics: Enables page and page element tracking. See "Adding Site Tracking" on page 374. 

• Export: Enables you to host a project in an environment external to 5ml. See "Export" on page 109. 

• Manifest: Enables you to store project data (except audio and video files) on the mobile device's offline 

cache. See "Manifest" on page 109. 

The General section, on the project Settings page, allows you to add page metadata tags to landing pages. (This 

functionality does not apply to advertisement projects.) Metadata tags help search engines and users find your content. 

HTML meta tags are page data tags that lie between the open and close tags in the HTML code of a document. 

The text in these tags do not display, but are parsible and help to tell the browsers (or other web services) specific 

information about the page. 5ml supports the and page meta tags, as well as the 

tag. 

Figure 4-1: Setting the page meta tags. 

- 103 -


• Name (Title)–The Name field adds text to the HTML tag. (This is not officially a meta tag, but it is a 

required element.) It defaults to the project name. To enter a more descriptive title to your page enter it in the 

Name field. When viewing the landing page, the text displays in the browser header. 

Note: The text you enter into the Name field becomes the new project name. 

• Description–The Description field allows you to add a page meta tag to your project pages. You 

should enter a short but highly focused description of your site, as the browser presents this text (among other 

descriptions) to the viewer when the viewer performs a search that is relevant to your site. You want the viewer 

to click on your link, and having a well-written description not only tells users what is on your page, but also 

entices them to visit your site. Also, a well written description can help to increase your site's rankings. (If you do 

not enter text into this field, then the tag is not created.) 

• Keywords–The Keywords field allows you to add a page meta tag to your project pages. Enter relevant 

keywords for your site that help search engines and users find your content. 

Runtime 

The Runtime section, on the project Settings page, allows you to define how your project should behave or look at 

runtime. For example, you can define whether the browser should display its address bar, or you can upload an image to 

use as the app icon. 

Figure 4-2: Setting project runtime options. 

• Mobile Browser Settings–Use to define how the mobile browser should behave with your project. (This functionality 

does not apply to advertisement projects.) 

o 

Show mobile browser address bar–Select this checkbox when you want the browser to display your 

landing page address. 

- 104 -


o 

Allow the user to zoom in and out–Select this checkbox to allow the user to zoom in and out when 

viewing your pages. 

• Web App Settings–Use to define whether your project should run in fullscreen mode or not. 

o 

Run in fullscreen mode–Select this checkbox to run your project in fullscreen mode. (This functionality 

only applies to the iOS platform.) 

• iOS Status Bar Style–Use to define the iOS status bar style. 

o 

o 

o 

Default–Select this radio button to keep the default status bar style. 

Black–Select this radio button to change the iOS default status bar to a black status bar when displaying 

your project. 

Black translucent–Select this radio button to change the iOS default status bar to a black translucent 

status bar when displaying your project. 

• iOS Web App Icon–Use to upload a graphic to use as your mobile web application's icon. Upload a 144 x 144 

pixel graphic in the .png file format. Click inside the image well, navigate to the graphic file, and select it. The 

graphics file uploads and displays in the image well. (This functionality only applies to the iOS platform.) 

o 

Splash screen 

Mark as precomposed–Select this checkbox to ensure no image effects are applied by iOS to your icon; 

otherwise, your icon might be altered visually. 

The Splash Screen section, on the project Settings page, allows you to customize what a user will see while your project 

loads in the browser. Using a splash screen shows the user that your project is loading, especially if you have configured 

your project to preload images and assets. You can change the splash screen's background color, choose to display a 

progress bar or not, as well as change the progress bar's color. You can also upload a background image and position it 

vertically. To the right the Preview box shows a preview of what the splash screen will look like with your customized 

settings. 

- 105 -


Figure 4-3: Setting splash screen options. 

• Colors–Use to select a background or progress bar color. Click inside the color well to open the color selector 

dialog. Select a color or enter a Hex value, then move the Opacity slide control to the right to increase the color 

opacity. Click anywhere outside the color selector dialog to close it. 

Figure 4-4: Selecting a background or progress bar color. 

• Background Image–Use to select a background image for the splash screen. The default image is the 5ml 

image. To select a custom image, from the Background Image dropdown menu, select Custom. Click inside the 

image well, navigate to the graphic file, and select it. The graphics file uploads and displays in the image well. Use 

the V Position slide control to re-position the image vertically on the splash screen. 

- 106 -


Figure 4-5: Selecting a background image. 

• Progress Bar–Use to show or hide the progress bar on the splash screen. Select the Always show checkbox to 

show the progress bar on the splash screen. 

Open Graph Meta Tags 

The Open Graph Meta Tags section, on the project Settings page, allows you to create a Facebook Open Graph Object for 

your project and add metadata that Facebook can use when a user posts your web app. (This functionality does not apply 

to advertisement projects.) Facebook Open Graph Objects allow you to integrate your web app into key points of 

distribution on Facebook, with the result that your web app becomes a part of the user’s identity and social graph. When a 

user chooses to share your web app with others on Facebook, for example, by clicking on a Like button on one of your 

pages, a post summary describing your web app appears on Facebook. Facebook uses your Open Graph Object's 

metadata to generate the post summary content. 

An Open Graph Object is simply a web page with tags containing Open Graph information in the section 

of the page. These tags describe the type of the object, the name of the object and other key information. For example, 

to create the "Stuffed Pizza" object for a recipe app, you should add tags to specify the object type as a recipe, 

its title as “Stuffed Pizzas” and the URL to its representative image. 

- 107 -


Figure 4-6: Setting a project's Facebook Open Graph Object metadata. 

• Title–The Title field allows you to add a title to your Facebook post. 

• Type–Use the Type dropdown menu to select an Open Graph Object type that best describes your project. The 

object types are: 

o 

o 

o 

o 

o 

o 

o 

o 

o 

Article 

Blog 

Book 

Profile (External) 

Movie 

TV Episode 

TV Show 

Video 

Website 

• Description–The Description field allows you to add a detailed description of your project. 

• Image–Use to upload a graphic file for your project's Facebook post. Click inside the image well, navigate to the 

graphic file, and select it. The graphics file uploads and displays in the image well. 

- 108 -


Optimization 

For information about optimizing your project, see "Optimizing at the Project Level" on page 134. 

Analytics 

For information about enabling analytics for your projects, see "Adding Site Tracking" on page 374. 

Export 

You can choose to host your project on an external (to 5ml) Web server, for example Mobclix Ad Exchange. If you choose 

to do so, then you should add the external host URL to the Host URL field, in the project Settings page, before you export 

the project. Including the Host URL value allows 5ml to configure the project export file with all the necessary 

configurations for the project to work external to the 5ml environment, as some functionality depends on the full URL 

path. For example, the Mobclix SDK and Facebook image tags. 

Figure 4-7: Entering an external Host URL to export the project. 

Manifest 

The Manifest section, on the project Settings page, allows you to store project data (except audio and video files) on the 

mobile device's offline cache. Offline caching can reduce the amount of project data to transfer as well as reduce the 

project loading time. Once an asset is transferred it does not need to be transferred a second time. Select the Enable 

offline application cache for this project checkbox to enable offline cache storage. As the mobile user interacts with the 

project assets load (according to your optimization choices) and display in the project. The first time a project loads and 

requests an asset to display it also copies the asset to the device's offline cache. The next time the project requires the 

asset the project retrieves it from the device's offline cache. The assets remain in the offline cache even after the user 

stops viewing the project, and the assets are available from the offline cache the next time the user interacts with the 

project. 

- 109 -


Figure 4-8: Selecting to store project data offline on the device 

- 110 -


Showing Pages in a Project 

To show the pages in a project, click the project name, as shown in Figure 4-9 on page 111. To hide the pages of the 

project, click another project or click Home in the project breadcrumb. 

When showing the pages in a project, thumbnail images for the pages appear in a row. You can sort the thumbnails in the 

row by clicking the Sort By options above the row: Name, Date Modified, or Date Created. 

Figure 4-9: Showing the pages in a project. 

If the project has more page thumbnails than can fit in the row, a vertical scroll bar appears to the right. You can drag the 

scroll bar to see more pages in the project. 

- 111 -


Opening a Project 

To open a project and edit a page, first show the pages in a project (see "Showing Pages in a Project" on page 111). 

To open a page in a project: 

1. Double-click on the page's thumbnail or click on the page's edit ( ) icon, located at the bottom left corner of the 

page thumbnail. 

Figure 4-1: Showing the pages in a project. 

The Project Editor appears with the Canvas in the center, the Widgets/Assets pane on the top left side, the Page 

Outline on the bottom left side, and the Properties pane on the right side. (To learn more about using the Project 

Editor and Canvas, see "Working in the Project Editor" on page 154.) 

Figure 4-2: Opening a page in the Project Editor 

- 112 -


Adding a Page to a Project 

You can add pages to a project only within the Project Editor, see "Adding a Page in the Project Editor" on page 157. 

However, you can duplicate a page on the My Projects page, see "Duplicating a Project" on page 100. 

- 113 -


Duplicating a Page in a Project 

You can duplicate an existing page in a project from the My Projects page. Duplicating makes an exact copy of your page, 

which you can then freely modify. 

To duplicate a page in a project: 


The project pages appear to the right. 

2. Click on the page to duplicate. 

The page level icons appear at the bottom of the page thumbnail. 

Figure 4-1: Page level icons. 

3. Click the Duplicate ( ) icon. 

The Duplicate Page dialog appears. 

4. Enter a page name for the duplicate page, and click Duplicate. 

Figure 4-2: Entering the duplicate page's name. 

The new (duplicate) page appears with the existing pages. 

- 114 -


Figure 4-3: Duplicate page appears. 

- 115 -


Setting a Project's Home Page 

When you create a new project, by default, the first page in the project is the project's home page. At runtime, the home 

page is the first page you see when you view your project and it is the project's entry point. To get to other pages in your 

project the pages need to be linked to the home page (or another page that is linked to the home page), for example, 

clicking on a button on the home page can open a second page. Once you create additional pages you can change the 

home page to any page in the project. Keep in mind that your page linking scheme starts with the home page, so you 

might need to rework the linking scheme from the new home page to the other pages. 

To set the project's home page: 


The project pages appear to the right. 

Figure 4-1: The project pages with Page 1 as the home page. 

2. Click on the page to be the new home page. 

The page level icons appear at the bottom of the page thumbnail. 

Figure 4-2: Page level icons. 

3. Click the Home ( ) icon. 

The page you selected becomes the new home page. 

- 116 -


Figure 4-3: The project pages with Page 2 as the new home page. 

- 117 -


Deleting a Page From a Project 

After showing the pages of a project (see "Opening a Project" on page 112), you can delete a page from the project by 

clicking the delete icon (the circle icon with a line across it) in the bottom right corner of the page thumbnail, as shown in 


To delete a page from a project: 

1. Open the project and select the page to delete. 

2. At the bottom right corner of the page thumbnail, click the delete ( ) icon. 

Figure 4-1: Deleting a page from a project. 

A warning dialog appears asking if you are sure that you want to delete the page. 

3. Click Delete in the warning dialog to delete the page (or Cancel to cancel the deletion). 

Warning: You cannot undo deleting a page from a project. 

- 118 -


Deleting a Project 

You can delete an entire project from the My Projects page. You cannot undo deleting a project. Deleting a project does 

not delete the project's assets. 

To delete an entire project: 

1. On the My Projects page, click on the project name. The Project Menu ( ) icon appears. 

Figure 4-1: Deleting an entire project from the My Projects page. 

2. Click on the Project Menu icon to open the menu, and select Delete. 

A warning dialog appears asking if you are sure that you want to delete the project. 

3. Click Delete. (Or, click Cancel to cancel the delete operation.) 

Warning: You cannot undo deleting a project. 

- 119 -


Previewing a Project 

You can preview the project's home page (first page) from the My Projects page. If the home page offers links to other 

pages, you can click on the links in the preview display to see the other pages. 

To preview a project: 




Figure 4-1: Previewing a project using the project menu. 

2. Click on the Project Menu icon to open the menu, and select Preview. 

The Preview selection dialog appears. To close the Preview dialog without previewing the project, click the "x" 

button in the top right corner of the Preview dialog. 

- 120 -


Figure 4-2: Selecting a preview option. 

3. Choose a preview display option: 

• Preview on a mobile browser: You can choose to preview on a mobile browser by entering the URL 

under the "Preview on a mobile browser" heading directly into your mobile browser. If you have a Quick 

Response (QR) barcode reader app on your mobile device, you can scan the QR barcode that appears 

under the "Preview on a mobile browser" heading to automatically enter the URL and preview the project 

in your mobile browser. 

• Preview as a mobile app: You can download the 5ml Tester App for your mobile device (available from 

the App Store for iOS devices and Android Marketplace for Android devices), and then log into your 5ml 

account to use the app to preview your project. 

• Preview on a desktop browser: Click the Preview Now button to preview your project in your 

computer's browser. For best results, use a WebKit-based browser such as Apple Safari or Google 

Chrome. 

After choosing Preview on a desktop browser, the project's first page appears inside a separate browser 

window on your computer, which mimics how the page might look on a mobile phone. 

- 121 -


Figure 4-3: Choosing the Preview on a desktop brower option. 

You can use your mouse to interact with the page. Mouse clicks are like taps on a mobile device, and 

dragging the mouse is similar to swiping with your finger on a mobile device. 

If the home page offers links to other pages, you can click on the links in the preview display to see the other 

pages. 

- 122 -


Publishing a Project 

You publish a project when you want to host it on 5ml. (To publish your project in an environment external to 5ml, see 

"Exporting a Project" on page 385.) 

To publish a project: 




2. Click on the Project Menu icon to open the menu, and select Publish. 

Figure 4-1: Publishing a project using the project menu. 

The Publishing dialog appears. 

3. Click Publish. 

- 123 -


Figure 4-2: Publishing the project 

The project publishing process starts and might take up to 15 or 20 minutes, depending on the size of your project. 

To check if a project is published: 


The Project pages appear to the right. 

2. Click the Check Status button located above the project pages. 

Figure 4-3: Checking if a project is published. 

• If the publishing process is not yet complete, a status message appears and requests that you try again 

later. 

- 124 -


Figure 4-4: Publishing status message; still publishing. 

• If the publishing process is complete, a status message appears with the last published date and time for 

the project, and the project's published URL appears to the right. 

Figure 4-5: Published project with URL. 

3. To capture the published project's URL, click on the URL. A browser opens, and you can copy the URL from the 

browser's address field. 

- 125 -


Exporting a Project 

You export a project when you want to host it on an external (to 5ml) Web server. You can export the entire project from 

the My Projects page to the folder that your browser uses to download files. The project is exported as a standalone set 

of files, in the form of a compressed "zip" file (with the ".zip" filename extension) that can be unzipped and then hosted on 

a web server. The zip file uses the project name. 

Note: Before exporting a project, you should consider adding the external host server's URL as some functionality 

depends on the full URL path. For more information, see "Export" on page 109. 

To export a project your user account needs to have the export feature enabled. To enable the export feature, contact 

your 5ml representative. 

To export a project: 





Figure 4-6: Exporting a project using the project menu. 

3. In the File Download dialog that appears, click Save to save the downloaded zip file, or Open to save the zip file 

and then open it. (Or follow your particular browser's prompts.) 

To learn how to host your exported project on a server, see "Deploying Your Project" on page 381. 

- 126 -


Backing Up a Project 

You can back up an entire project from the My Projects page to the folder that your browser uses to download files. You 

can use the backup functionality to perform project back ups (and save versions), and then use the project backup file to 

restore a project or import the project into another workspace. To do this, your user account needs to have the Back 

Up/Restore feature enabled. The project is backed up and exported as a compressed "pkg" file (with the ".pkg" filename 

extension). The pkg file uses the project name. To enable the Back Up/Restore feature, contact your 5ml representative. 

Note: You cannot use a project's backup file to host the project on a web server; instead you should use the export 

function. For more information, see "Exporting a Project" on page 385. 

To back up a project: 




2. Click on the Project Menu icon to open the menu, and select Backup/Restore. 

Figure 4-1: Backing up a project using the project menu. 

The Backup and Restore dialog appears. 

3. Select the Backup this project radio button to download the pkg file containing the project's files. 

- 127 -


Figure 4-2: Selecting the Backup this project radio button and Include analytics checkbox. 

4. If you enabled your project to gather analytics, you can choose to back up the analytics component of the project. 

Select the Include Analytic checkbox to include the project's analytics component in the backup. 

5. Click Backup, and then Save to back up the project to the folder that your browser uses to download files. 

- 128 -


Restoring a Project 

You can restore a previously backed up project from the My Projects page and replace the existing project and its files 

(including assets). For more information about backing up projects, see "Backing Up a Project" on page 127. The project 

is imported as a compressed "pkg" file (with the ".pkg" filename extension) and then unpackaged into the existing project 

folder. The restore function, deletes all pages in the existing project and creates all pages that are included in the restore 

pkg file (which was previously backed up from the same project). 

Note: You can only restore a project with a backup taken from the same project. If you want to create a new project 

using the backup files, then use the import project functionality. For more information, see "Importing a Project" on page 

97. 

To restore a project: 




2. Click on the Project Menu icon to open the menu, and select Backup/Restore. 

Figure 4-1: Restoring a project using the project menu. 

The Backup and Restore dialog appears. 

3. Select the Restore this project to a previous version radio button to upload the pkg file containing the project's 

files. 

- 129 -


Figure 4-2: Selecting the Restore this project to a previous version radio button and Replace existing assets 

checkbox. 

4. Click the Browse button to locate the backup pkg file to restore, as shown in Figure 4-3 on page 130Figure 4-3 on 

page 130. 

Figure 4-3: Browsing to the project backup file to restore. 

The backup file to restore uploads. 

5. Decide whether you want to replace any existing asset files with the backed up version of the asset file. To replace 

all asset files when restoring, select the Replace existing assets checkbox, as shown in Figure 4-3 on page 130. 

6. Click the Restore button to restore the project to the backed up version. 

- 130 -


• If you did not select the Replace existing assets checkbox, as shown in Figure 4-3 on page 130, you might 

see a dialog notifying you that some asset files were not restored because they already exist in your 

account. This ensures that you do not erroneously replace an asset, for example, an image, that already 

exists and is used in a different project. 

Figure 4-4: Restoring all files except existing asset files. 

• If you did select the Replace existing assets checkbox, a dialog appears stating that the project has been 

imported successfully. 

Figure 4-5: Restoring all files. 

7. Click Finish to complete the restore process. The restored project appears in the projects list. 

- 131 -

CHAPTER 5: Optimizing Projects 


5ml provides several ways to optimize your projects. This chapter covers the following topics: 

• "About Optimizing Projects" on page 133 

• "Optimizing at the Project Level" on page 134 

• "Optimizing at the Page Level" on page 138 

• "Optimizing at the View or Tab Level" on page 141 

- 132 -


About Optimizing Projects 

You can optimize a project at the project, page, and view or tab level by using the progressive loading of data settings. 

Optimizing a project refers to managing when data is transferred to the mobile user's device. For example, a project 

page that contains a View Set widget, by design, does not display every piece of information at the same time. The views 

that are not currently active do not display. Therefore it is not necessary to transfer all project data when rendering the 

page's initial view. You can optimize the time it takes to load the initial page by transferring data, such as images, only 

when the user performs an action to display the data, for example, when the user changes a view. 

The optimize settings appear at the following levels: 

• Project level–You can set the Preload all assets or Don't preload any assets optimize settings at the project 

level. When you create a new project, by default, all assets, except background images, are automatically preloaded. 

If you want some pages not to preload assets, keep the project level setting on and turn on the page level 

Load on demand setting. See "Optimizing at the Project Level" on page 134. 

• Page level–You can set the Load on demand and Preload images settings at the page level. If the project level 

preload assets setting is active and you set the Load on demand setting to be active on a page, then only this page 

is set to load data (including images) on demand. In other words, the page level load on demand setting overrides 

the project level preload images setting. In addition, you can set the page level preload images setting to be 

active. In this case everything but the images are loaded on demand and the images are preloaded. See "Optimizing 

at the Page Level" on page 138. 

• View and tab level–Some widgets, for example, those that contain views and tabs, also include load on 

demand and preload images settings. When these settings are active they override the project and page level settings. 

For example, if the project level setting preload images is inactive and the page level setting load on 

demand is active (but the preload images setting is not active), then activating a view or tab level load on demand 

and preload images setting means only this view on this page is set to preload images. See "Optimizing at the View 

or Tab Level" on page 141. 

- 133 -


Optimizing at the Project Level 


Optimizing a project refers to managing when data is transferred to the mobile user's device. This section describes how 

to optimize at the project level. 

The optimize setting at the project level is: 

• Preload all assets–Selecting this setting causes the project to preload all assets (with the exception of background 

images) before the assets are required to display on the user's mobile device. This setting improves the 

user's experience once the initial loading of data is complete. 

• Don't preload any assets–Selecting this setting causes the project to load assets only when the user performs 

an action, or there is a dynamic action, that requires the asset to display on the mobile device. This setting 

improves project's initial loading time. 

You can set the Preload all assets optimize setting at the project level. All images, except background images, are 

automatically preloaded. When you create a new project, by default this setting is turned on to preload all assets. If you 

want some pages in a project not to preload assets, keep the project level setting on and turn on the page level Load on 

demand setting. 

The optimize assets project level setting appears on the Settings page's Optimization section. 

Changing the Project Level Optimize Settings 

To set the project to preload all assets: 

• By default, when you create a new project the project level Preload all assets setting is active. 

To set the project to not preload any images: 

- 134 -


1. In the Optimization section, of the project Settings page, select Don't preload any assets. 

Figure 5-1: Selecting the Don't preload any assets radio button to not preload assets. 

Optimizing Through Image Quality 

Another way to optimize the loading of your project is to alter the quality of the images contained in the project. The 

lower the image quality the faster your project loads; however, images that are reduced in size can lose sharpness and 

detail. For this reason, 5ml provides Image Quality presets, which affect both file size and image quality. Image quality 

presets compress and shrink down the size of the image so that it loads quickly, but maintains a certain level of quality. 

5ml provides several image quality presets to choose from. You can also choose a custom setting for images that are in 

the JPEG format. 

To set the image quality: 

1. In the Optimization section, of the project Settings page, select an image quality preset value from the Image 

Quality dropdown menu. 

- 135 -


Figure 5-2: Selecting a image quality preset value. 

The possible image quality preset values are: 

• Maximum–100% quality 

• Very High–80% quality 

• High–60% quality 

• Medium–30% quality 

• Low–10% quality 

• Custom–1-100% (only for JPEG files) 

2. Click Apply, and then OK. 

To create a custom image quality preset for JPEG files: 

1. In the Optimization section, of the project Settings page, select the Custom image quality preset value from the 

Image Quality dropdown menu. 

- 136 -


Figure 5-3: Creating a custom image quality preset for JPEG files. 

2. Move the quality control slider to the left to lower the quality level or to the right to increase the quality level. 

- 137 -


Optimizing at the Page Level 


Optimizing a project refers to managing when data is transferred to the mobile user's device. This section describes how 

to optimize at the page level. 

The optimize settings at the page level are: 

• Load on demand–Selecting this setting causes the project to load data, including images, only when the user 

performs an action, or there is a dynamic action, that requires the data to display on the mobile device. This setting 

improves the project's initial loading time. 

• Preload images–Selecting this setting causes the project to preload images (with the exception of background 

images) before the images are required to display on the user's mobile device. This setting improves the user's 

experience once the initial loading of data is complete. 

You can set the Load on demand and Preload images settings at the page level. If the project level Preload all images 

setting is active and you set the Load on demand setting to be active on a page, then only this page is set to load data on 

demand. By default when you select the page's Download on demand setting the page's Preload Images setting is also 

active. In other words, when you activate the page level load on demand setting it does not override the project level 

Preload Images setting. However, you can deactivate the page level Preload Images setting. In this case everything 

including images are loaded on demand. If a page includes a View Set or Tab Set widget and you activate the view's or 

tab's Download on demand and/or Preload Images settings, the view's or tab's settings override the page level settings. 

The Load on demand and Preload Images page level settings appear on the Properties panel's General tab. 

Changing the Page Level Optimize Settings 

To set the page to download data on demand: 

1. On the Page Outline panel, select the page. 

2. On the General tab, select Load on demand. 

Beneath the Load on demand checkbox, the Preload Images checkbox appears already selected. 

- 138 -


Figure 5-4: Selecting the page level Load on demand and Preload Images settings 

3. If you want page level images to preload, keep the Preload Images checkbox selected, if not, deselect it. 

To set the page to preload images: 

1. By default, the project level Preload Images setting is active. Unless you want to activate the page's Download on 

Demand setting, you do not need to do anything to preload images at the page level. 

• If the Download on demand setting is not active on the page's Properties pane's, General tab, as seen in 

Figure 5-5 on page 140, then do nothing. 

- 139 -


Figure 5-5: Load on demand setting at the page level 

• If the Download on demand setting is active, as seen in Figure 5-4 on page 139, then select the Preload 

Images checkbox beneath the Download on demand checkbox. (By default, it is already selected.) 

- 140 -


Optimizing at the View or Tab Level 

You can optimize a project at the project, page, and view or tab level by using the progressive loading of data (Preload 

Images and Load on demand) settings. Optimizing a project refers to managing when data is transferred to the mobile 

user's device. This section describes how to optimize at the view or tab level. 

The optimize settings at the view or tab level are: 

• Preload images–Selecting this setting causes the project to preload images (with the exception of background 

images) before the images are required to display on the user's mobile device. This setting improves the user's 

experience once the initial loading of data is complete. 

• Load on demand–Selecting this setting causes the project to load data, including images, only when the user 

performs an action, or there is a dynamic action, that requires the data to display on the mobile device. This setting 

improves project loading time. 

The Load on demand and Preload Images view or tab level settings appear only for the View Set, Tab Set, and Gallery 

widgets. The Load on demand and Preload Images appear on the widget's General tab. (In the Gallery widget, these 

settings appear on the image View component's General tab.) 

When these settings are active they override the project and page level settings. For example, if the project level setting 

Preload Images is not active, the page level setting Load on demand is active, and the page level Preload Images setting 

is not active, then activating the view or tab level Load on demand and Preload Images settings means only this view or 

tab on this page is set to preload images. 

Changing the View or Tab Level Optimize Settings 

To set a view to download data on demand and preload images: 

1. Drag and drop a View Set (Tab Set or Gallery) widget onto the canvas. 

2. Add views to the View Set (tabs to the Tab Set or image to the Gallery) widget. 

3. On the Page Outline pane, select a view (or tab). (For the Gallery widget you need to select an image in the Photo 

list and then double-click on the image to open the image View.) 

4. On the General tab, select Load on demand, as seen in Figure 5-6 on page 142. 

Beneath the Load on demand checkbox, the Preload Images checkbox appears already selected. 

- 141 -


Figure 5-6: Selecting the Load on demand checkbox 

5. If you want view (or tab) level images to preload, keep the Preload Images checkbox selected, if not, deselect it. 

- 142 -

CHAPTER 6: Importing and Managing Assets 


5ml lets you import your creative assets and use them in multiple projects and pages. This chapter covers the following 

topics: 

• "Accessing the Library Pane" on page 144 

• "Creating Folders" on page 146 

• "Importing Images" on page 149 

• "Importing Video" on page 152 

- 143 -


Accessing the Library Pane 

To create a successful web project, you need to use high-quality creative assets in your pages. These assets typically 

include graphics, icons, images, and even audio and video clips. 5ml helps you organize your creative assets and use 

them in multiple projects and pages. You can import assets into 5ml at any time while working on projects. Each 

registered user can use up to 100 MB of storage for storing assets. 

To import assets, open the Project Editor by opening a project page (for details, see "Opening a Project" on page 112). On 

the Library pane, click on the Assets tab in the upper left corner of the Project Editor window, as shown in Figure 6-1 on 

page 144. 

Figure 6-1: Clicking the Assets tab of the Library pane to show the Assets pane. 

The Assets pane of the Library is empty until you import assets. However, before importing assets, you may want to 

create folders in the pane first, so that you can import assets directly into the folders, thereby making the assets easier to 

find in the Assets pane. See "Creating Folders" on page 146. 

When you want to use an Image asset in a project, you can preview it first before adding it to the Canvas. To preview the 

Image, select the image on the Assets pane and click on the magnifier icon that appears at the top right corner of the 

image icon. The preview window opens to display the image. 

- 144 -


Figure 6-2: Showing the Image preview in the Assets pane. 

- 145 -


Creating Folders 

To create a folder in the Assets pane so that you can organize your assets in folders: 

1. Click the create folder button (the folder icon with a plus sign in its center) in the bottom left corner of the Assets 


The Folder Name dialog appears with a blank field for entering the folder's name. 

Figure 6-3: Adding a folder to the Assets pane of the Library. 

2. Enter the folder's name in the field, and then click the Create button (or click Cancel to cancel the operation). 

For example, you might name the folder "people photos", as shown in Figure 6-4 on page 147, if you are going to 

upload photos of people. 

The folder appears in the Assets pane, along with the Home icon in the upper left corner, as shown in Figure 6-5 

on page 147. 

- 146 -


Figure 6-4: Naming the folder and creating it. 

Figure 6-5: Double-clicking the folder to open it. 

- 147 -


3. Double-click the folder to open it. 

The folder name appears next to the Home icon, as shown in Figure 6-6 on page 148, to show that the folder is 

open. After opening the folder, you can click the upload assets button (the document icon with a plus sign on its left 

side) to add asset files to the folder. 

After opening a folder, you can click the Home icon in the Assets pane to return to the top view of folders. 

Figure 6-6: Opening a folder in the Assets pane. 

- 148 -


Importing Images 

To import image assets: 

1. Choose Images from the drop-down menu at the top of the Assets pane (under the Assets tab). 

2. Click the upload assets button (the document icon with a plus sign), as shown in Figure 6-7 on page 149. 

Tip: If you have already opened a folder (see "Creating Folders" on page 146), the assets you select are imported 

directly into the folder. 

After clicking the upload assets button, the Select Files to Upload dialog appears, as shown in Figure 6-8 on page 

150. 

Figure 6-7: Upload asset files to the Assets pane. 

- 149 -


Figure 6-8: Select images to upload. 


Tip: You can import one or more files at once. To select a contiguous range of files to import, click the first file in the 

range, and hold down the Shift key while clicking the last file in the range (as shown in Figure 6-8 on page 150). To select 

multiple files that are not contiguous in a range, click the first file, and then hold down the Cmd key on a Mac, or the Ctrl 

key on a Windows PC, while clicking each subsequent file. When you are finished selecting files, click the Open button in 

the bottom right corner of the dialog 

- 150 -


Importing Audio 

To import audio assets, follow these steps: 

1. Choose Audio from the drop-down menu at the top of the Assets pane (under the Assets tab). 

2. Click the upload assets button (the document icon with a plus sign on its left side), as shown in Figure 6-9 on page 

151. 

Figure 6-9: Import audio into the Assets pane. 

After clicking the upload assets button, the Select Files to Upload dialog appears. 


Tip: If you have already opened a folder (see "Creating Folders" on page 146), the assets you selected are uploaded 


Tip: To select a contiguous range of files to upload, click the first file in the range, and hold down the Shift key while 

clicking the last file in the range. To select multiple files that are not contiguous in a range, click the first file, and then hold 

down the Cmd key on a Mac, or the Ctrl key on a Windows PC, while clicking each subsequent file. When you are finished 

selecting files, click the Open button in the bottom right corner of the dialog. 

- 151 -


Importing Video 

To import video assets, follow these steps: 

1. Choose Videos from the drop-down menu at the top of the Assets pane (under the Assets tab). 

2. Click the upload assets button (the document icon with a plus sign on its left side), as shown in Figure 6-10 on page 

152. 

Figure 6-10: Upload videos into the Assets pane. 

After clicking the upload assets button, the Select Files to Upload dialog appears. 


Tip: If you have already opened a folder (see "Creating Folders" on page 146), the assets you select are uploaded 


Tip: To select a contiguous range of files to upload, click the first file in the range, and hold down the Shift key 

while clicking the last file in the range. To select multiple files that are not contiguous in a range, click the first file, 

and then hold down the Cmd key on a Mac, or the Ctrl key on a Windows PC, while clicking each subsequent file. 

When you are finished selecting files, click the Open button in the bottom right corner of the dialog. 

- 152 -


Deleting Assets 

To delete one or more assets or folders containing assets: 

1. Select one or more assets (images or videos), or one or more folders, in the Assets pane. 

To select more than one asset or folder in a contiguous range, click the first asset or folder, and then hold down 

the Shift key while clicking the last asset or folder in the range. To select assets or folders that are not contiguous 

in a range, click the first asset or folder, and then hold down the Cmd key on a Mac, or the Ctrl key on a Windows 

PC, while clicking each subsequent asset or folder. 

2. Click the delete file button (the document icon with a minus sign), as shown in Figure 6-11 on page 153. 

A warning dialog appears asking if you are sure you want to delete the selected items. 

3. Click Delete in the warning dialog (or Cancel to cancel the delete operation). 

Warning: You can't undo the deletion of assets. 

Figure 6-11: Deleting assets from the Assets pane. 

- 153 -

CHAPTER 7: Working in the Project Editor 


The Project Editor includes the Canvas where you edit your pages, and the Library, Page Outline, and Properties panes. 

This chapter covers the following topics: 

• "About the Project Editor" on page 155 

• "Adding a Page in the Project Editor" on page 157 

• "Using a Tracing Image" on page 158 

• "Changing Page Properties" on page 160 

• "Placing Elements on a Page" on page 168 

• "Resizing Page Elements" on page 171 

• "Aligning Page Elements" on page 175 

• "Arranging and Overlapping Page Elements" on page 181 

• "Copying, Pasting, and Deleting Page Elements" on page 187 

• "Opening and Closing Pages in the Canvas" on page 189 

• "Saving Pages" on page 190 

• "Previewing Pages From the Canvas" on page 191 

• "Canvas Viewing Options" on page 192 

- 154 -


About the Project Editor 

The Project Editor is comprised of the following: 

• The menu bar (along the top) with the New button, the Open and Save menus, and the Preview button 

• The Library pane (top left side), which contains the widgets for placing on the Canvas, and your project assets 

• The Page Outline pane (bottom left side), which shows the hierarchy of page elements 

• The Canvas (center), in which you edit your pages (also includes the Canvas top and bottom toolbars) 

• The Properties pane (right side), which shows properties you can modify for the selected element on the Canvas 

Figure 7-1: Choosing Undo in the Project Editor to undo the last action performed on the Canvas. 

Menu Bar 

The menu bar (along the top) includes the New (page) button, the Open and Save (page) menus, and the Preview 

(project) button. 

Library Pane 

The Library pane (which includes the Widgets and Assets panes) appears in the top left side of the Project Editor window, 

providing widgets and assets that you can place on the pages in the Canvas. 

- 155 -


Page Outline Pane 

The Page Outline pane appears in the bottom left side and shows the hierarchy of elements on the page, which indicates 

elements that are in front of other elements. To open the Page Outline hierarchy, click the disclosure triangle next to Page 

in the Page Outline pane. When you select an element on the page, the element is also selected in the hierarchy of 

elements in the Page Outline pane. You can also click an element in the Page Outline pane in order to select it on the page 

in the Canvas. The Page Outline pane includes a show/hide element icon which allows you to show or hide an element on 

the canvas. In addition, the Page Outline pane includes lock/unlock element icons which allows you to lock an element to 

its current position on the canvas. 

Canvas 

After you open a project (for details, see "Opening a Project" on page 112), the Canvas appears in the center of the 

Project Editor window, as shown in Figure 7-1 on page 155. The Canvas shows the page, and provides top and bottom 

toolbars for aligning, resizing, rotating, and arranging elements on the page; for copying or cutting and pasting elements; 

for deleting elements; and for undoing actions in the Canvas. As you work in the Canvas, you can Undo any action by 

clicking the Undo button in the top left corner of the Canvas. You can also add a mockup of the page as a tracing image to 

use as a guide for placing the elements on the page. For more information, see "Using a Tracing Image" on page 158. 

Properties Pane 

The Properties pane, which appears on the right side, enables you to change the properties of the selected element on 

the page. For example, if you select a text element on the page, the Properties pane lets you change the text element's 

properties (for details, see "Changing Text Properties" on page 208). 

- 156 -


Adding a Page in the Project Editor 

You can no longer add pages to a project on the My Projects page; you can add pages only within the Project Editor. 

However, you can duplicate a page on the My Projects page, see "Duplicating a Project" on page 100. 

Note: If you want the new page to be the project's home page, see "Setting a Project's Home Page" on page 116. 

To add a new page to the project: 

1. First open the project by showing the project's pages and opening a project page, see "Opening a Project" on page 

112. 

2. Click New... in the Project Editor menu bar above the Canvas. 

A new page appears in the Canvas as part of the project, as shown in Figure 7-2 on page 157. A page tab (such as 

"Page 2") appears above the Canvas for each open page. You can click the page tab to switch from one page to 

another. 

Figure 7-2: Adding a new page to the project. 

- 157 -


Using a Tracing Image 

A tracing image is a mockup of the page that appears as a guide for placing the page elements. The concept is similar to 

using tracing paper to trace over an image. You can control the opacity of the tracing image so that you can see the page 

elements you are arranging more clearly, or see the tracing image more clearly. 

To use a tracing image with your page, you need to first import a mockup image for your page into the Assets pane (for 

details, see "Importing Images" on page 149). 

To assign the tracing image to the page: 

1. Click the page in the Canvas, or select Page in the Page Outline pane on the lower left side of the Project Editor 

next to the Canvas. 

After selecting the page, the page properties appear in the Properties pane on the right side of the Project Editor 

next to the Canvas. 

2. Drag the mockup image in the Assets pane to the tracing image well in the Properties pane, as shown in Figure 7-3 

on page 158. 

Figure 7-3: Dragging a mockup image to use as a tracing image on the page. 


4. Drag the Opacity slider, which is beneath the tracing image well, in order to increase or reduce the opacity of the 

tracing image. 

- 158 -


Dragging the slider to the left reduces the opacity of the tracing image, increasing its transparency so that you can 

see the page elements better. Dragging the slider to the right increases the opacity of the tracing image, so that 

you see the tracing image better. 

Figure 7-4: Dragging the Opacity slider to set the tracing image's opacity. 

- 159 -


Changing Page Properties 

You can change the page's background, border, and opacity in the Appearance tab of the Properties pane, and add 

padding to the inner edges of the page in the Layout section of the Properties pane. You can also add a tracing image to 

the General tab of the Properties pane to use as a guide for placing elements (for details, see "Using a Tracing Image" on 

page 158). In addition, on the General tab you can set the page level optimize settings, see "Optimizing at the Page Level" 

on page 138. 

To change the page properties, click the page in the Canvas, or select Page in the Page Outline pane. After selecting the 

page, the page properties appear in the Properties pane on the right side of the Project Editor next to the Canvas, as 


Figure 7-5: Selecting the page in the Page Outline pane. 

Changing the Page Background 

To change the page background, on the Properties panel's Appearance tab, choose Color, Linear Gradient, Image Fill, or 

None for the Background drop-down menu. Choosing None specifies no background color, gradient, or image (for 

example, if you already selected a color, gradient, or image, select None to delete it). 

To add color to the page background: 

- 160 -


1. Select Color in the Background drop-down menu. 

The HTML color code box appears underneath the Background drop-down menu, showing the HTML code for 

white (#FFFFFF), as shown in Figure 7-6 on page 161. You can enter the color's HTML code in the box, or 

continue with these steps to pick the color. 

Figure 7-6: Choosing color for the page background. 

2. Click inside the HTML color code box. 

The color picker appears in the Properties pane, as shown in Figure 7-7 on page 162. 

- 161 -


Figure 7-7: Selecting a color in the color picker. 

3. Click inside the color picker to pick a color. 

4. Drag the slider on the right side of the color picker to adjust the value of the color component (from saturated to 

black), as shown in Figure 7-8 on page 163. 

- 162 -


Figure 7-8: Adjusting the value of the color component. 

To set a linear gradient of color for the page background: 

1. Select Linear Gradient in the Background drop-down menu. 

A gradient line appears underneath the Background menu, as shown in Figure 7-9 on page 163. 

Figure 7-9: Selecting a linear gradient of color for the page background. 

- 163 -


2. Click the HTML color code box at the left end of the gradient line to show the color picker. 

3. Click inside the color picker to pick the starting color for the gradient, as shown in Figure 7-10 on page 164. 

4. Drag the slider on the right side of the color picker to adjust the color component value (from saturated to black). 

Figure 7-10: Picking the starting color for a linear gradient background for the page. 

5. Click the HTML color code box at the right end of the gradient line to show the color picker. 

6. Click inside the color picker to pick the ending color for the gradient. 


8. Click one of the two gradient buttons underneath the gradient line to set the gradient to flow from top to bottom, as 

shown in Figure 7-11 on page 165, or from side to side. 

To experiment with the gradient, you can click the button to the right of the two gradient buttons to switch the starting and 

ending colors of the gradient. 

- 164 -


Figure 7-11: Setting the linear gradient to flow from top to bottom. 

To set an image as the page background (filling the background): 

1. Select Image Fill in the Background drop-down menu. 

An image well appears under the menu. 

2. Drag an image from the Assets pane to the image well. 

3. Use the Original Size drop-down menu to specify whether the image should remain in its original size, or be 

stretched or scaled (resized up) to fit the background, as shown in Figure 7-12 on page 166. 

- 165 -


Figure 7-12: Adding an image fill to the page background, and setting the image fill size. 

Adding a Page Border 

To add a border around the page: 

1. Choose a line type, such as Line (Simple Mode), in the Border drop-down menu. 

2. Choose a line style, such as a solid line, a line of dashes, or a frame (as shown in Figure 7-13 on page 167). 

3. Specify the line size and roundness (for rounded corners). 

4. Specify the border's color by clicking the HTML color box underneath the Border menu to show the color picker, 

and then picking a color. 

- 166 -


Figure 7-13: Adding a border to the page, and setting the style for the line or frame style for the border. 

Changing the Page Opacity 

To set the opacity for the entire page, including existing elements on the page, drag the Opacity slider underneath the 

Border menu in the Appearance tab of the Properties pane. 

Dragging the Opacity slider to the left reduces the opacity of the page and its elements (fading the entire page), while 

sliding to the right increases the opacity. Drag the slider all the way to the right (if it is not already set to the far right) to 

use normal opacity. 

Adding Page Padding 

You can add padding to the inner edges of the page to create space between the edge of the page and page elements. To 

add padding, enter the number of pixels in the Top, Bottom, Left, and Right fields in the Layout tab of the Properties pane. 

- 167 -


Placing Elements on a Page 

To place elements such as images, graphics, text, buttons, and video clips on the page, drag them from the Library pane 

to the Canvas. You can then resize and arrange these elements to fit your page design. 

For example, if you drag a Text widget from the Widgets pane to the Canvas, as shown in Figure 7-1 on page 168, you 

can place the element it creates anywhere on the page, and then edit the Text element by double-clicking it. You can also 

select the text in the Text element and change its font, size, and other properties. (For more details on editing and 

changing text properties, see "Changing Text Properties" on page 208). 

Figure 7-1: Placing a Text widget element on the page in the Canvas. 

You can drag image and video assets directly from the Assets pane of the Library, as shown in Figure 7-2 on page 169. If 

your assets are not yet ready to use, you can drag Image and Video widgets to use as placeholders, and when your 

assets are ready to use, drag the assets from the Assets pane into the Source field on the widget element's Properties 


- 168 -


Figure 7-2: Placing an image asset on a page in the Canvas. 

Figure 7-3: Dragging an image from the Assets pane to place inside an Image widget element. 

- 169 -


Placing Elements Freely or Using Arrow Keys 

When placing an element on the page, you can drag it freely to any position. Once placed on the canvas, you can also use 

the arrow keys on your keyboard to move an element precisely (one pixel at a time) in one direction, such as up, down, 

left, or right. Using two keys at a time, you can even move the element diagonally. 

Placing Elements Using Page Coordinates 

To place an element using precise page coordinates, select the element and use the Layout tab of the Properties pane on 

the right side of the Canvas, as shown in Figure 7-4 on page 170. 

For example, you can click inside the X and Y Position fields to enter coordinates in pixels for the top left corner of the 

element. You can also use the keywords "center", "left", and "right" for the X Position field (for example, "center" centers 

the element horizontally on the page), and "top", "middle", or "bottom" with the Y Position field. You can also specify a 

percentage (such as "60%" in the Y Position field to place an element starting at exactly 60% of the distance from the top 

of the page). 

Figure 7-4: Placing an element using precise page coordinates in the Layout tab of the Properties pane. 

- 170 -


Resizing Page Elements 

To resize an element on a page in the Canvas, drag one of the handles along the edges of the element. Dragging a side 

handle stretches the element horizontally, while dragging a top or bottom handle stretches it vertically; dragging a corner 

handle stretches the element both horizontally and vertically, as shown in Figure 7-5 on page 171. 

When you resize a Text, Label, or Button element, the size of the text in the element doesn't change — only the element 

itself changes. (For details on resizing the text, see "Changing Text Properties" on page 208.) 

Figure 7-5: Resizing an Image element on a page in the Canvas. 

When resizing Image elements and other elements by dragging the handles along the edges of the element, the 

dimensions of the element (in pixels) appear in a pop-up box. When you resize an image or video, the image or video 

picture inside the element also changes size. 

You can resize an element to be the same size as another element. Select two elements and click the following tabs at the 

top of the Canvas: 

• Same Width, as shown in Figure 7-6 on page 172, changes the thinner selected element to have the same width as 

the wider selected element. 

• Same Height, as shown in Figure 7-7 on page 172, changes the shorter selected element to have the same height 

as the taller selected element. 

• Same Width & Height, as shown in Figure 7-8 on page 173, changes the smaller selected element to be the same 

size as the larger selected element. 

- 171 -


Figure 7-6: Resizing an element to match the width of another element. 

Figure 7-7: Resizing an element to match the height of another element. 

- 172 -


Figure 7-8: Resizing an element to be the same size as another element. 

To resize an element to specific dimensions, or to constrain the proportions of the element while resizing, select the 

element and use the Layout tab of the Properties panel on the right side of the Canvas, as shown in Figure 7-9 on page 

174. You can click inside the Width and Height fields to enter sizes for the width and height in pixels. You can also turn on 

the Constrain Proportions option in order to freely resize the element in the same aspect ratio. 

- 173 -


Figure 7-9: Specifying an exact size for the element and turning on the Constrain Proportions option. 

- 174 -


Aligning Page Elements 

There are a number of methods to position and align page elements on the Canvas. You can drag page elements on to the 

Canvas and freely move and arrange the elements. You can use the keyboard arrow keys to freely move and arrange 

elements on the Canvas. You can use the alignment buttons along the top of the Canvas to precisely align a page element 

to another page element or to the parent element. The parent element is either the page itself (the parent to all elements 

on the page), or a page element that holds other page elements (such as a Container or Tab Set widget). Additionally, 

you can use page or element snap-to grid lines. 

Placing Elements Freely or Using Arrow Keys 

When placing an element on the page, you can drag it freely to any position. Once placed on the Canvas, you can also use 

the arrow keys on your keyboard to move an element precisely (one pixel at a time) in one direction, such as up, down, 

left, or right. Using two keys at a time, you can even move the element diagonally. 

Aligning Elements Using the Alignment Buttons 

The six alignment buttons (Align Left, Align Center, Align Right, Align Top, Align Middle, and Align Bottom) are located at 

the center-right of the Canvas Toolbar, and are followed by the Snap to Parent on/off button. If you click the Snap to 

Parent button to turn it on (the button is highlighted when turned on), the alignment buttons align the selected element or 

elements to the parent. If the Snap to Parent button is turned off (not highlighted), you must select two page elements to 

align them to each other. 

For example, if the Snap to Parent button is turned off, you can select two elements on the page (click the first element, 

and then Shift-click the second element), and align them by clicking the alignment buttons: 

• Align Left to align the rightmost element to the leftmost element along the leftmost element's left side, as shown in 


Figure 7-10: Aligning two page elements vertically along the left side. 

- 175 -


• Align Center to center the elements vertically. 

• Align Right to align the leftmost element to the rightmost element along the rightmost element's right side, as 


Figure 7-11: Aligning two page elements vertically along the right side. 

• Align Top, as shown inFigure 7-12 on page 176, to align the lower element to the top of the higher element. 

Figure 7-12: Aligning the top of one page element to the top of another element. 

• Align Bottom, as shown in Figure 7-13 on page 177, to align the higher element to the bottom of the lower 

element. 

- 176 -


Figure 7-13: Aligning the bottom of one page element to the bottom of another page element. 

• Align Middle, as shown in Figure 7-14 on page 177, to align the middle of the elements horizontally. 

Figure 7-14: Aligning the middle of the page elements horizontally. 

If you click the Snap to Parent button to turn it on, the alignment buttons align the selected element or elements to the 

parent. The parent is either the page itself (the parent to all elements on the page), or a page element that holds other 

page elements (such as a Container or Tab Set widget). 

For example, if you click Snap to Parent to turn it on (as shown in Figure 7-15 on page 178, and then click a single element 

on the page, you can click Align Left (as shown in Figure 7-16 on page 178) to align the element to the left side of the page 

- 177 -


(the page is the parent of the element). You can quickly center an element horizontally on the page by clicking Snap to 

Parent to turn it on, and then clicking Align Center. 

Figure 7-15: Clicking Snap to Parent to turn it on (the page itself is the parent of the two rectangle elements). 

Figure 7-16: Clicking Align Left to align the image to the left side of the parent (the page), with Snap to Parent turned 

on. 

- 178 -


Aligning Elements Using Page and Element Snap-to Grid Lines 

When placing elements on a page you can use the snap-to grid lines to align elements. Snap-to works in two ways; snapto 

align with a page grid line or snap-to align with another element. 

The snap-to page grid lines are located at the vertical center and horizontal center of the page, as well as at each (top, 

bottom, right, or left ) edge of the page, as shown in Figure 7-17 on page 179. The element's outline has six snap-to 

points. This lets you align the element's top, bottom, right, or left edge with a page grid line or align its vertical center or 

horizontal center to a page grid line. For example, you can align a Button element's bottom edge with the page's 

horizontal center snap-to grid line, and align its vertical center points with the page's vertical center line snap-to grid line, 

as shown in Figure 7-17 on page 179. Or, you can align a button element's top and left edges with the page's top and left 

snap-to grid lines, also shown in Figure 7-17 on page 179. 

Figure 7-17: Snap-to page grid lines. 

The snap-to element grid lines are located at the vertical center and horizontal center of the element, as well as at each 

(top, bottom, right, or left ) edge of the element, as shown in Figure 7-18 on page 180. (When an element is the same size 

as the element it is being aligned too, for example, two Button elements with the default size, elements are aligned using 

the left and top element grid lines.) The element's outline has six snap-to handles. This lets you align a second element to 

the first element's top, bottom, right, or left edge using the first element's snap-to grid lines. For example, you can align a 

button element's top edge with another element's top snap-to grid line, as shown in Figure 7-18 on page 180. 

- 179 -


Figure 7-18: Snap-to element edge grid lines. 

You can also align the second element's vertical center or horizontal center to the first element's vertical center or 

horizontal center grid line. For example, you can align a button element's horizontal center line with another element's 

horizontal snap-to grid line, as shown in Figure 7-19 on page 180. 

Figure 7-19: Snap-to element center grid lines. 

- 180 -


Arranging and Overlapping Page Elements 

Page elements can appear in front of or behind other elements on the page. You can overlap one element over another 

by selecting the element and dragging it over the other element. The overlapping element appears either in front of or 

behind the other element depending on its position in the hierarchy of elements in the Page Outline pane on the lower left 

side of the Project Editor next to the Canvas. 

You can arrange the elements so that one covers the other, or vice-versa. To select a page element that is hard to select 

on the Canvas because it is behind another element, click on the element's name in the Page Outline pane. After selecting 

one or more elements, you can click the following buttons at the top of the Canvas (to the left of the alignment buttons) to 

arrange the elements in the hierarchy: 

• Move Forward, as shown in Figure 7-20 on page 181, moves the selected element forward, in front of another element. 

In the Page Outline pane, the element moves up one level in the hierarchy. 

• Move Backward, as shown in Figure 7-21 on page 182, moves the selected element backward, in back of another 

element. In the Page Outline pane, the element moves down one level in the hierarchy. 

• Bring to Front, as shown in Figure 7-22 on page 182, moves the selected element in front of all other elements. In 

the Page Outline pane, the element moves to the top of the hierarchy under Page. 

• Send to Back, as shown in Figure 7-23 on page 183, moves the selected element in back of all other elements. In 

the Page Outline pane, the element moves to the bottom of the hierarchy. 

You can also use the Arrange buttons to change the order of tabs and views in the Tab Set and View Set elements (for 

details, see "Using the Tab Set Widget" on page 327 and "Using the View Set Widget" on page 335). 

Figure 7-20: Moving an overlapping element forward, in front of another element. 

- 181 -


Figure 7-21: Moving an overlapping element backward, behind another element. 

Figure 7-22: Moving an element in front of all other elements. 

- 182 -


Figure 7-23: Moving an element behind all other elements. 

- 183 -


Showing and Hiding Page Elements 

The Page Outline pane includes a show/hide element icon which allows you to show or hide an element on the canvas. 

Some elements are parent elements, for example, the Container element. In the case of a parent element, you can show 

or hide at the parent level or at the child element level. For example, Figure 7-1 on page 184 shows the Container 

element, the parent element, and hides one of its Image elements, a child element. (The red rectangle as shown 

indicates where the hidden Image element would display if it was not hidden; it does not appear on the Canvas.) When a 

parent element is hidden so are all of its child elements. 

Figure 7-1: Hiding an Image element on the Canvas. 

To hide a page element: 

1. Select the page element either on the Canvas on in the Page Outline pane. 

2. Click on the show/hide ( ) icon located in the Page Outline's left column. 

The show/hide icon no longer appears and the element is hidden on the Canvas. 

To show a page element: 

1. On the Page Outline, click in the show/hide column to the left of the element. 

The show/hide ( 

) icon appears and the element displays on the Canvas. 

- 184 -


Locking and Unlocking Page Elements 

The Page Outline pane includes a lock/unlock element icon which allows you to lock an element to its current position on 

the canvas. Some elements are parent elements, for example, the Container element. In the case of a parent element, 

you can lock or unlock at the parent level or at the child element level. For example, Figure 7-1 on page 185 shows the 

Container element unlocked, the parent element, and two Image elements, one locked and the other unlocked. Both 

Image elements are child elements of the Container element. The first Image element, being unlocked can be manually 

moved to another position on the page as shown Figure 7-1 on page 185. The second Image element being locked cannot 

be moved. When a parent element is locked so are all of its child elements. 

Figure 7-1: Moving an unlocked Image element on the Canvas. 

To lock a page element: 

1. Select the page element either on the Canvas on in the Page Outline pane. 

2. Click on the lock/unlock ( ) icon located in the Page Outline's middle column. 

The lock/unlock icon no longer appears and the element is locked on the Canvas and cannot be manually moved 

on the Canvas. 

To unlock a page element: 

1. On the Page Outline, click in the lock/unlock column to the left of the element. 

The lock/unlock ( 

) icon appears and the element is unlocked on the Canvas and can be manually moved. 

- 185 -


Rotating Page Elements 

To rotate an element on the Canvas, click the Rotate button (with the circular arrow icon 

toolbar, beneath the Canvas. 

) located on the bottom 

Figure 7-2: Rotate button on bottom toolbar. 

When you select the element to rotate, its handles change from blue to white. Place the cursor over a handle to display 

the rotate cursor, then holding down the mouse button, move the element in either a clockwise or counter-clockwise 

direction, as shown in Figure 7-3 on page 186. 

Figure 7-3: Rotating a Button element on the canvas. 

You can rotate the element to a precise angle of rotation using the Rotation field on the Properties pane's Layout tab. In 

the Rotation field, enter the exact rotation degree value, as shown in Figure 7-3 on page 186. 

- 186 -


Copying, Pasting, and Deleting Page Elements 

To copy an element from one place to another on the page, or from one page to another page, select the element, and 

then click the Copy button on the left side of the row of buttons above the Canvas, as shown in Figure 7-4 on page 187. 

Figure 7-4: Copying the selected element. 

The Copy operation makes a copy of the element, leaving the original element on the page. To remove the original 

element while moving it to another location or another page, click the Cut button next to the Copy button (refer to Figure 

7-4 on page 187. 

To paste the copied or cut element on the same page, click the Paste button next to the Copy button, as shown in Figure 

7-5 on page 188. 

To paste the copied or cut element on another page, switch to another page and then click the Paste button. (For details 

on adding another page to the Canvas and switching pages in the Canvas, see "Adding a Page in the Project Editor" on 

page 157). 

To delete an element from the page, select the element and then click the Delete button next to the Paste button at the 

top of the Canvas, as shown in Figure 7-6 on page 188. 

- 187 -


Figure 7-5: Pasting the copied (or cut) element on the page. 

Figure 7-6: Deleting an element on the page. 

- 188 -


Opening and Closing Pages in the Canvas 

To open another page in your project, choose the page (such as Page 2, or Page 3, etc.) from the Open menu in the 

Project Editor menu bar above the Canvas, as shown in Figure 7-7 on page 189. 

You must have already created the page, either on the My Projects page (see "Adding a Page to a Project" on page 113) 

or in the Canvas (see "Adding a Page in the Project Editor" on page 157). A blue dot next to a page in the Open menu 

indicates that the page is already open in the Canvas. Tabs for the page appear above the Canvas — click the tab for the 

page to jump to that page. 

Figure 7-7: Opening another page in the Canvas. 

To close a page, click the "x" button on the right side of the page tab (refer to Figure 7-7 on page 189). 

- 189 -


Saving Pages 

You use a browser to access 5ml. Browser access to Internet resources can suddenly fail for any number of reasons 

(including a lost Internet connection), so you should save your work in a project as often as possible. 

To save the page currently open, choose Save from the Save menu in the Project Editor menu bar above the Canvas, as 

shown in Figure 7-8 on page 190. Choose Save All from the Save menu to save all of the pages in the project at once. 

Figure 7-8: Saving the page in the ad project. 

- 190 -


Previewing Pages From the Canvas 

You can preview the entire project while working in the Project Editor. Click the Preview button in the Project Editor menu 

bar above the Canvas. For a detailed description of previewing the project, see "Previewing a Project" on page 120 

- 191 -


Canvas Viewing Options 

You can zoom into the page in the Canvas to see it in more detail by dragging the zoom slider in the lower right corner of 

the Canvas. Dragging the zoom slider to the right zooms into the page to see more detail, and dragging to the left zooms 

out of the page to see more of the page. 

You can increase or decrease the width of the Canvas by dragging the right edge of the Canvas, as shown in Figure 7-9 

on page 192. You can also increase or decrease the width of the Library and Page Outline panes by dragging the left edge 

of the Canvas. 

Figure 7-9: Dragging the right edge of the Canvas to make it wider. 

If you started your project with a variable-sized page (see "Adding a New Project" on page 94), you can see how the 

page will appear on different-sized devices or different screen orientations (portrait or landscape) by changing the 

Canvas page size in the drop-down menu on the lower left side of the Canvas, as shown in Figure 7-10 on page 193. 

- 192 -


Figure 7-10: Changing the Canvas page size to show a variable-sized page at different sizes and orientations. 

- 193 -

CHAPTER 8: Customizing Page Elements 


5ml lets you place a variety of elements on a page to build the content of the page. As you place elements, you can also 

customize them by changing their properties in the Properties pane. This chapter covers the following topics: 

• "Using the Properties Pane" on page 195 

• "Changing General Properties" on page 197 

• "Changing Appearance Properties" on page 198 

• "Changing Text Properties" on page 208 

• "Changing Layout Properties" on page 214 

• "Changing Behavior Properties" on page 223 

- 194 -


Using the Properties Pane 

5ml lets you place a variety of elements on a page to build the content of the page. As you place elements, you can also 

customize them by changing their properties, such as the element's appearance, position on the page, size, and text (if 

the element includes text), in the Properties pane. You can also customize some elements to associate it with an 

event/action behavior to perform when the user taps or clicks the element, such as navigating to another page or 

executing a custom script. 

After placing an element on the page (for details, see "Placing Elements on a Page" on page 168), you can select the 

element on the page or in the Page Outline pane and change its properties in the Properties pane on the right side of the 


The Properties pane, shown in Figure 8-1 on page 195, includes the following tabs: 

Figure 8-1: The Properties pane. 

• The General tab lets you define the element's optional object ID attribute, which you can use with custom HTML5 

markup, CSS3 style sheets, and JavaScript scripts to refer to the element object. Most elements also offer a 

unique set of General properties that you can change — for details, refer to each widget's description. If a page element 

supports tracking, the Track in analytics check box appears on the element's General tab. 

- 195 -


• The Appearance tab lets you set the element's background, border, and opacity, and also add a reflection or 

shadow to the element. 

• The Text tab appears only for elements that include text. It lets you change the font family and size of the text, the 

text color, the text alignment within the element, and other text formatting settings. 

• The Layout tab lets you set the size of the element, its position on the page, and for some elements, the amount of 

padding within the element. You can also constrain the proportions of the element when freely resizing it on the 

Canvas. 

• The 3D Transformations tab lets you transform any widget into a 3D version of that widget. 

• The Behavior tab lets you associate a page or page element with an event/action behavior. 

- 196 -


Changing General Properties 

The General tab of the Properties pane lets you define an element's object ID (identifier), which can be used with HTML5 

markup, CSS3 style sheets, and JavaScript scripts to refer to the specific element. 

Most elements created from widgets also offer a unique set of General properties that you can change — for details, refer 

to each widget's description. 

To change an element's General properties, select the element on the page or in the Page Outline pane. The Properties 

pane for the element appears on the right side of the Project Editor, and the General tab is at the top of the Properties 


Figure 8-2: Choosing Stretch in the Fill Mode menu and Middle in the Vertical Align menu for the Image element. 

Object ID 

You can enter the element's object ID attribute in the ID field in the General tab of the Properties pane. While it is not 

necessary to enter an object ID, the ID can be used with HTML5 markup, CSS3 style sheets, and JavaScript scripts to 

refer to this specific element. The ID can be a word or any sequence of alphanumeric characters — such as "gallery_ 

button1" shown in Figure 8-2 on page 197. 

Track in analytics 

If a page element supports tracking, the Track in analytics check box appears on the element's General tab. The Track in 

analytics check box only appears if you have enabled tracking at the project level. For more information, see "Adding Site 

Tracking" on page 374. 

- 197 -


Changing Appearance Properties 

The Appearance tab of the Properties pane (shown in Figure 8-3 on page 198) lets you set an element's background, 

border, and opacity, as well as add a reflection or shadow to the element. 

Figure 8-3: The Appearance tab of the Properties pane. 

Changing the Background 

To change the element's background, choose Color, Linear Gradient, Image Fill, or None in the Background drop-down 

menu. Choosing None specifies no background color, gradient, or image (for example, if you already selected a color, 

gradient, or image, select None to delete it). 

Color 

To set the background to a solid color: 

1. Choose Color from the Background drop-down menu. 

The HTML color code box appears underneath the Background drop-down menu, showing the HTML code for 

white (#FFFFFF), as shown in Figure 8-3 on page 198. You can enter the color's HTML code in the box, or 

continue with these steps to pick the color.. 

2. Click inside the HTML color code box. 

The color picker appears in the Properties pane, as shown in Figure 8-4 on page 199. 

- 198 -


Figure 8-4: Selecting a color in the color picker and adjusting the value of the color component. 

3. Click inside the color picker to pick a color component. 


Linear Gradient 

To set the background to a linear gradient of colors: 

1. Choose Linear Gradient from the Background drop-down menu. 

A gradient line appears underneath the Background menu, as shown in Figure 8-5 on page 200. 

2. Double-click the HTML color code box at the left end of the gradient line to show the color picker. 

- 199 -


Figure 8-5: Selecting a linear gradient of color in the Background menu. 

3. Click inside the color picker to pick a color component for the starting color of the gradient, as shown in Figure 8-6 

on page 201. 

4. Drag the slider on the right side of the color picker to adjust the value of the color component (from saturated to 

black). 

- 200 -


Figure 8-6: Choosing the starting color and adjusting the color value for the linear gradient. 

5. Double-click the HTML color code box at the right end of the gradient line to show the color picker. 

6. Click inside the color picker to pick the ending color for the gradient. 


8. Click one of the four gradient buttons underneath the gradient line to set the gradient to flow from top to bottom, 

as shown in Figure 8-7 on page 202, from left to right, from top left corner to bottom right corner, or from bottom 

left corner to top right corner. 

- 201 -


Figure 8-7: Setting the linear gradient to flow from top to bottom. 

To experiment with the gradient, you can click the button to the right of the gradient buttons to switch the starting and 

ending colors of the gradient. 

To add more colors to the gradient line in between the start and end colors: 

1. Click on the gradient line to add a HTML color code box. 

2. Double-click on the HTML color code box to show the color picker. 

3. Click inside the color picker to pick the color for the gradient. 


The gradient line now has three colors that graduate into each other, as shown in Figure 8-7 on page 202. 

5. Drag the HTML color code box to the left or right to adjust the midpoint of the new gradient color. 

Note: To remove the additional colors from the gradient line, click the trash can icon located underneath the 

gradient line to the right. 

- 202 -


Figure 8-8: Adding more colors to the gradient line. 

Image Fill 

To set the background to an image, follow these steps: 

1. Choose Image Fill from the Background drop-down menu. 

The image well appears underneath the Background drop-down menu, as shown in Figure 8-9 on page 204. 

2. Drag an image from the Assets pane to the image well. 

3. Choose Original Size, Stretch, or Scale to Fit from the drop-down menu to the right of the image well. 

• Original Size: The image retains its original size. 

• Stretch: The image is stretched horizontally and/or vertically to fit the background. 

• Scale to Fit: The image is scaled up or down to fit the entire image in the background. 

- 203 -


Figure 8-9: Adding an image fill to the background, and setting the image fill size to Scale to fit in order to fit all of the 

image into the background. 

None 

Choose None from the Background drop-down menu to specify no background color, gradient, or image (for example, if 

you already selected a color, gradient, or image, select None to delete it). 

Adding a Border 

To add a border around an element: 

1. Choose a border type, such as Line (Simple Mode), in the Border drop-down menu. 

2. To change the line style (which is a single solid line by default), choose a line style from the Style drop-down 

menu, such as a solid line, a line of dashes, or a frame, as shown in Figure 8-10 on page 205. 

3. To change the line size (which is set to one pixel by default), click the up or down arrows for the Size control, or 

enter the size in pixels. 

4. To change the border roundness (which is set to zero by default, for no roundness), click the up or down arrows 

for the Roundness control. 

5. To change the border color (which is set to black by default), click in the HTML color code box underneath the Border 

menu to show the color picker. 

- 204 -


6. To set the color, click inside the color picker to pick a color component, and drag the slider on the right side of the 

color picker to adjust the value of the color component (from saturated to black). 

Figure 8-10: Adding a border to an element, and setting the style for the border. 

Changing Opacity 

Normally the Opacity slider underneath the Border drop-down menu is set to full opacity (far to the right). Dragging the 

slider to the left reduces the opacity of the element, increasing its transparency. Dragging the slider to the right increases 

opacity. 

Adding Reflection and Shadow 

You can add a mirror reflection effect to an element that appears below, above, or to either side of the element. You can 

also add a shadow behind an element. 

To add a reflection effect: 

1. Click the Reflection option to turn it on. 

2. Click one of the four arrows below the Reflection option indicating whether the reflection is above, below, or to 

either side of the element, as shown in Figure 8-11 on page 206. 

3. To change the offset (the number of pixels between the element and its reflection), click the up or down arrows for 

- 205 -


the Offset control or enter the offset in pixels. 

(By default, the offset is set to zero, which attaches the reflection to the element with no space between them.) 

4. Drag the Opacity slider underneath the four arrows to the left to reduce the opacity of the reflection and make it 

more transparent, or to the right to increase opacity. 

5. To change the size of the reflection, drag the Size slider to the left to reduce the size of the reflection or to the right 

to increase the size of the reflection. 

Figure 8-11: Adding a reflection to a Text element to show below the element with an offset of zero and an opacity of 

0.7. 

To add a shadow behind an element: 

1. Click the Shadow option to turn it on. 

2. To change the shadow's color (set to black by default), click in the HTML color code box underneath the Shadow 

option to show the color picker. 

3. To set the color, click inside the color picker to pick a color component, and drag the slider on the right side of the 

color picker to adjust the value of the color component (from saturated to black). 

- 206 -


4. The Offset X (horizontal axis) and Offset Y (vertical axis) values are set to 4. To change either offset value (or 

both), click the up or down arrows for the Offset X and/or Offset Y controls under the HTML color code bar, or 

enter the offset in pixels. 

5. The Blur option, to blur the edges of the element, is set to zero (no blurring). To blur the edges of the element, 

click the up or down arrows for the Blur control as shown in Figure 8-11 on page 206, or enter the number of pixels 

to use for blurring. 

Figure 8-12: Adding a shadow effect with blurred edges to a Image element. 

- 207 -


Changing Text Properties 

You use the Text tab of the Properties pane to change the text properties of elements that contain text, for example, 

Button, Label, and List Menu elements. The Text tab lets you change the selected text's font family and size, color, 

alignment within the element, formatting, character spacing, opacity, and add a shadow to the text. 

For some elements, for example, Text Input, Text Area, Password Input, Radio button, and Checkbox elements, the Text 

tab also lets you wrap text, change the line height, set content as ordered or unordered lists, and set content as 

superscript or subscript. 

In order to make changes to the Text tab, you must first select the text inside the element. To select the text, double-click 

the element and then drag across the text you want to select in order to highlight it. 

Changing the Font Family and Size 

To change the font family for the selected text, choose a font family in the left drop-down menu under the Font Family 

& Size heading, as shown in Figure 8-13 on page 208. 

Figure 8-13: Changing the font family of the selected text to Verdana. 

To change the font size, choose a size from the right drop-down menu under the Font Family & Size heading, as shown in 

Figure 8-14 on page 209. The sizes available for the selected text in Text elements are xx-small, x-small, small, medium, 

- 208 -


large, x-large, and xx-large. For all other elements, you specify the pixel size for the text. (You can manually enter a 

pixel size.) 

Figure 8-14: Changing the text size. 

Changing the Text Color 

To change the color of the selected text: 

1. Click inside the HTML color code box underneath the Font Family & Size drop-down menus to show the color 

picker, as shown in Figure 8-15 on page 210. 

2. Click inside the color picker to pick a color component, and drag the slider on the right side of the color picker to 

adjust the value of the color component (from saturated to black). 

As an alternative, you can enter the color's HTML color code directly into the HTML color code box. 

- 209 -


Figure 8-15: Changing the text color. 

Changing the Text Formatting 

You can change the alignment for selected text inside an element to be left-aligned, centered, right-aligned, or justified 

within the element. To change the text alignment, click the Left, Center, Right, or Justified button underneath the 

HTML color code box in the Text tab of the Properties pane, as shown in Figure 8-16 on page 211. 

You can also change the text style for selected text inside an element to bold, italic, and/or underlined (for example, you 

can style the text to be both bold and italic, or italic and underlined, or bold and underlined). To change the text style, click 

the B, I, and/or U buttons under the HTML color code box (refer to Figure 8-16 on page 211). To set text to be superscript 

or subscript, click the superscript or subscript buttons next to the text style buttons. To make text into an ordered or 

unordered list, click either the bullet list or number list button. 

- 210 -


Figure 8-16: Changing the text alignment and style. 

To change the line height, drag the Line Height slider to the right to increase the height, or to the left to reduce the height. 

Changing Opacity, Line Height, and Character Spacing 

You can set the text's opacity, line height, and character spacing. 

To increase the opacity, select the element and drag the Opacity slider to the right, as shown in Figure 8-17 on page 212. 

After increasing the opacity, you can reduce it by dragging the slider to the left. 

To increase the line height, select the element and drag the Line Height slider to the right, as shown in Figure 8-17 on 

page 212. After increasing the line height, you can reduce it by dragging the slider to the left. 

To increase the character spacing, select the element and drag the Character Spacing slider to the right, as shown in 

Figure 8-17 on page 212. After increasing the character spacing, you can reduce it by dragging the slider to the left. 

- 211 -


Figure 8-17: Changing the opacity, line height, and character spacing. 

Adding Text Wrap 

You can add text wrapping to the Text Input, Text Area, Password Input, Radio button, and Checkbox elements. To add 

text wrap to an element, on the Properties pane, click Wrap Content (refer to Figure 8-18 on page 213). (To select text 

wraping for a Label widget, you select the Wrap text checkbox on the General tab.) 

Adding Text Shadow 

You can add a shadow to the text in an element. In addition, you can select the shadow color, change the vertical and 

horizontal shadow offset, and change the shadow's blur effect. 

To add a shadow to the text in an element: 

1. Click the Text Shadow option to turn it on (refer to Figure 8-18 on page 213). 

2. To change the shadow's color (set to black by default), click in the HTML color code box underneath the Text 

Shadow option to show the color picker. 

3. To set the shadow's color, click inside the color picker to pick a color component, and drag the slider on the right 

side of the color picker to adjust the value of the color component (from saturated to black). 

4. To change the Offset X (horizontal axis) and/or Offset Y (vertical axis) values for the shadow (which are set to 1 

by default), click the up or down arrows for the Offset X and/or Offset Y controls under the HTML color code box, 

or enter the offset in pixels. 

5. To blur the edges of the element, click the up or down arrows for the Blur control, or enter the number of pixels to 

use for blurring (set to zero by default for no blurring). 

- 212 -


Figure 8-18:Adding text shadow and text wrap 

- 213 -


Changing Layout Properties 

The Layout tab of the Properties pane lets you set the size of the selected element and its position on the page. In 

addition, for elements that contain text or other elements, you can set the amount of padding to the inner edges of the 

element to create space between the edge of the element and whatever the element contains. You can also constrain the 

proportions of the element when freely resizing it on the Canvas. 

Changing the Element Size 

To change the size of the selected element on the page, click inside the Width and Height fields next to the Size heading 

and enter sizes for the width and height in pixels, as shown in Figure 8-19 on page 214. 

Figure 8-19: Changing the element's size on the page. 

You can also freely resize the element by dragging its edges (for details, see "Resizing Page Elements" on page 171). In 

order to freely resize the element without changing the element's aspect ratio, turn on the Constrain Proportions option in 

the Layout tab. (By default the Image, Video, and You Tube widgets have the Constrain Proportions checkbox preselected.) 

- 214 -


Changing the Element Position 

In addition to placing an element freely on the page (for details, see "Placing Elements on a Page" on page 168), you can 

position the element using precise page coordinates. Click inside the X and Y Position fields to enter pixel coordinates 

using the top left corner of the element as the zero point of origin — for example, entering 20 pixels for the X position 

places the element exactly 20 pixels to the right of the left edge of the page; entering 50 pixels for the Y position places 

the element exactly 50 pixels down from the top of the page. 

You can also use the keywords "center", "left", and "right" for the X Position field (for example, "center" centers the 

element horizontally on the page), and "top", "middle", or "bottom" with the Y Position field. You can also specify a 

percentage (such as "60%" in the Y Position field to place an element starting at exactly 60% of the distance from the top 

of the page). 

Changing the Element Padding 

You can also add padding to Text, Label, Button, Image, and Container widget elements. Padding creates space around 

the inside edges within the element. To add padding, enter the number of pixels in the Top, Bottom, Left, and Right fields 

next to the Padding heading. 

Changing the Element Rotation 

To rotate an element on the Canvas, you can click the Rotate button (with the circular arrow icon ) located on the 

bottom toolbar, beneath the Canvas. Alternatively, you can rotate the element to a precise angle of rotation using the 

Rotation field on the Properties pane's Layout tab. In the Rotation field, enter the exact rotation degree value. 

- 215 -


Changing 3D Transformations Properties 

The 3D Transformations tab of the Properties pane lets you edit a widget's 3D properties. For a widget to have 3D 

properties you must place it within the 3D Stage widget. You can place one or more of the 5mlwidgets within a 3D Stage 

widget. 

Note: Due to limited CSS 3D support in some browsers, the 3D Transformation properties are available only in Safari 

and Chrome browsers. 

Changing an Element's Origin Properties 

You can change the position of the element's perspective vanishing point by changing the perspective Origin values. 

Changing the X perspective Origin value moves the vanishing point along the X axis. A negative value moves it to the left 

and a positive number moves it to the right. Changing the Y perspective Origin value moves the vanishing point along the 

Y axis. A negative value moves it down and a positive number moves it to the up. 

The perspective Origin properties for all elements within a 3D Stage element are based on the 3D Stage's Perspective and 

Perspective Origin values. For example, an element within the 3D Stage element uses the 3D Stage's Perspective Origin 

value as its starting point for evaluating its own perspective origin. If you keep the element at it default value, 50%, then 

it will share the same vanishing point as the 3D Stage element, as shown with rectangle A in Figure 8-1 on page 216. 

Figure 8-1: Placing two Rectangle elements within a 3D Stage element. 

If you change the element's Origin value, then you will offset its vanishing point from the 3D Stage element's vanishing 

point, as shown with rectangle B in Figure 8-2 on page 217. 

- 216 -


Figure 8-2: Changing Rectangle B's Origin X and Y values to offset its vanishing point. 

To change the perspective Origin for the selected element on the page, open the 3D Transformations tab and pull the 

Origin (X or Y) slider to the right or left as shown in Figure 8-3 on page 218. You can also enter a percentage value. The 

default value is 50%, which represents the 3D Stage element's Perspective Origin value. You can change it to any value 

between zero and 100%. 

- 217 -


Figure 8-3: Changing a Button element's Origin properties. 

Changing an Element's Offset 

You can offset (in pixels) an element from its original position on the X (horizontal) axis, the Y (vertical) axis, and/or the Z 

(depth) axis. To change the Offset X (horizontal axis), Offset Y (vertical axis), and/or Offset Z values (which are set to 0 

by default), move the slider controls right or left, as shown in Figure 8-5 on page 219, or enter the offset values in pixels. 

Enter the values in pixels between -500 and 500. 

- 218 -



Figure 8-5: Changing the Second Rectangle Element's X Offset to 50px 

Changing an Element's Rotation Properties 

You can rotate an element (in degrees) around its X (horizontal) axis, Y (vertical) axis, and/or Z (depth) axis. To change 

the Rotate X (horizontal axis), Rotate Y (vertical axis), and/or Rotate Z values (which are set to 0 by default), move the 

slider controls right or left, or enter the values in degrees between -360 and 360. 

Change the X Rotate value to rotate the element around the X axis. A positive value rotates the element backward 

(clockwise) and a negative value rotates the element forward (anti-clockwise), as shown in Figure 8-6 on page 220. 

- 219 -


Figure 8-6: Rotating the Element Around the X axis. 

Change the Y Rotate value to rotate the element around the Y axis. A positive value rotates the element's left side 

forward and right side backward (clockwise) and a negative value rotates the element's right side forward and left side 

backward (anti-clockwise), as shown in Figure 8-7 on page 220. 

Figure 8-7: Rotating the Element Around the Y Axis. 

Change the Z Rotate value to rotate the element around the Z axis. A positive value rotates the element clockwise around 

the Z axis and a negative value rotates the element anti-clockwise around the Z axis, as shown in Figure 8-8 on page 221. 

- 220 -


Figure 8-8: Rotating the Element Around the Z Axis. 

Changing an Element's Skew Properties 

You can skew an element (in degrees) on its X (horizontal) axis and Y (vertical) axis. To change the Skew X (horizontal 

axis) and/or Skew Y (vertical axis) values (which are set to 0 by default), move the slider controls right or left, or enter 

the values in degrees between -90 and 90. 

Change the X Skew value to skew the element on its X axis. A positive value skews the element to the left and a negative 

value skews the element to the right, as shown in Figure 8-9 on page 221. 

Figure 8-9: Skewing the Element Around the X Axis and Y Axis. 

- 221 -


Displaying an Element's Backface 

You can choose to either display or hide the back face (rear side) of an element. If you display the back face and rotate 

the element to face backward, you can see the image or text in reverse. If you hide the back face and rotate the element 

to face backward you see only blank space, as shown in Figure 8-10 on page 222. 

Figure 8-10: Hiding an Element's Backface 

- 222 -


Changing Behavior Properties 

The Behavior tab on the Properties pane lets you associate an element (or page) with an event and an action to perform 

when that event is triggered, for example, when the user taps or clicks the element, such as navigating to another page 

or executing a custom script. For details about supported events and actions, see "About Events" on page 224 and "About 

Actions" on page 226. The events and actions that appear in the drop-down lists depend on the widget type and whether 

the SDK is enabled for the project. 

Note: To use a Custom Function action, you must enter the function into the Script Editor before selecting the Event and 

Action. (Some custom functions might require you to enable the SDK functionality. For more information, see "Enabling 

Native Device Functionality" on page 372.) 

To change an element's Behavior properties: 

1. Open a project page, and on the Page Outline, select the page or a page element. 

The Properties pane for the page or element appears on the right side of the Project Editor, and the Behavior tab is 

at the top right of the Properties pane, as shown in Figure 8-1 on page 223. 

2. On the Properties pane select the Behavior tab. 

Figure 8-1: Associating a Button element with an event and action on the Behavior tab 

3. Click the add behavior ( ) button. 

4. From the Event drop-down menu, choose an event. For example, choose onclick. 

5. From the Action drop-down menu, choose an action. For example, choose Show Page, and then choose the page 

to open. In this example you can also choose how to transition the page change. For example, for Effect choose 

Fade in, for Acceleration choose Ease, and for Duration enter 2. 

6. Click Apply. The new behavior displays in the Behavior list. 

- 223 -


About Events 

The Behavior tab on the Properties pane lets you associate an element (or page) with an event, and an action to perform. 

When the user generates the event, for example, taps or clicks the element, the action executes, for example, navigates 

to another page or executes a custom script (including calling an external web service). 5ml supports the events shown in 

Table 8-2: on page 224. The events and actions that appear in the drop-down lists depend on the widget type and 

whether the SDK is enabled for the project. Some events are dependent on native device functionality and require you to 

enable the ad exchange/ad network SDK; for more details, see "Enabling Native Device Functionality" on page 372. 

Table 8-2: Supported Events 

Event 

Description 

Use with this 

element 

Use with 

this action 

SDK 

required 

onadcontract 

Occurs before the advertisement contracts back to its 

original size. 

All 

Mostly Custom 

Function 

Yes 

onafteradresize Occurs after the advertisement finishes resizing. All Mostly Custom 

Function 

Yes 

onchange 

Occurs when the current state of the media changes; by 

play, pause, or stop actions. 

Video, Audio 

Mostly Custom 

Function 

No 

onclick 

oncontextmenu 

Occurs when the user clicks on an element. (Supported 

by devices with a touch screen display.) 

Occurs after the user clicks the right mouse button. 

(Applicable only for devices equipped with a two button 

mouse.) 

All All No 

All All No 

ondblclick Occurs when the user double-clicks on an element. All All No 

ondevicemotion 

Occurs when the user rotates or moves the device and 

provides the projection of the current gravity vector on 

the X, Y and Z axis. (Applicable only for devices equipped 

with accelerometer.) 

All 

Mostly Custom 

Function 

Yes or No - 

if viewed on 

the iPhone 

or iPad 

mobile 

browser. 

ondeviceorientationchange 

Occurs when the user rotates the device on z axis and 

provides the new orientation: Up, Right, Down or Left. 

(Applicable only for devices equipped with accelerometer.) 

All 

Mostly Custom 

Function 

Yes 

ondevicerotate 

Occurs when the user rotates the device and provides the 

device’s rotation angle for the X, Y, and Z axis. (Applicable 

only for devices equipped with accelerometer.) 

All 

Mostly Custom 

Function 

Yes or No - 

if viewed on 

the iPhone 

or iPad 

mobile 

browser. 

ondeviceshake 

Occurs when the user shakes the device. (Applicable only 

for devices equipped with accelerometer.) 

All All Yes 

- 224 -


Event 

Description 

Use with this 

element 

Use with 

this action 

SDK 

required 

ondocumentload Occurs when the external page loads. Facebook Like Button, 

Tweet Button, 

YouTube, IFrame 

Mostly Custom 

Function 

No 

ondrop 

Fires on a target element when the user releases the 

mouse button during a drag-and-drop operation. 

All 

Mostly Custom 

Function 

No 

onenter Occurs before a view becomes the current view. Page, View , Tab Mostly Custom 

Function 

No 

onheadingchange 

Occurs when the device’s heading is changed. (Applicable 

only for devices equipped with magnetometer.) 

All 

Mostly Custom 

Function 

Yes 

onkeydown 

Occurs on the focused element when the user presses a 

key down, and occurs periodically until the user releases 

the key. 

All 

Mostly Custom 

Function 

No 

onkeypress 

Occurs on the focused element when the user presses a 

key down, and occurs periodically until the user releases 

the key. 

All 

Mostly Custom 

Function 

No 

onkeyup 

Occurs on the focused element when the user releases a 

key. 

All 

Mostly Custom 

Function 

No 

onleave 

Occurs on the current view before it is replaced by 

another view and becomes hidden. 

Page, View, Tab 

Mostly Custom 

Function 

No 

onload Occurs immediately after an element loads and is parsed. All Mostly Custom 

Function 

No 

onlocationchange 

Occurs when the device’s location (latitude, longitude) 

changes. (Provides higher accuracy if the device is 

equipped with GPS.) 

All 

Mostly Custom 

Function 

No 

onmousedown 

Occurs when the user presses a mouse button over an 

element. 

All All No 

onmousemove 

Occurs when the user moves the mouse over an element. 

(Supported by devices with a touch screen display.) 

All 

Mostly Custom 

Function 

No 

onmouseout 

Occurs when the user moves the mouse pointer out of an 

element. 

All All No 

onmouseover 

Occurs when the user moves the mouse pointer into an 

element. 

All 

Mostly Custom 

Function 

No 

onmouseup 

Occurs when the user releases the mouse button on an 

element. (Supported by devices with a touch screen display.) 

All All No 

onresize Occurs when the size of an element changes. All Mostly Custom 

Function 

No 

onswipe 

Occurs after the user swipes an element using the mouse. 

(Supported by devices with a touch screen display.) 

All 

Mostly Custom 

Function 

No 

- 225 -


Event 

Description 

Use with this 

element 

Use with 

this action 

SDK 

required 

onuiorientationchange 

Occurs when the device’s user interface orientation 

changes. (Applicable only for devices equipped with accelerometer.) 

All 

Mostly Custom 

Function 

No 

onunload 

Occurs before an element is destroyed. (By calling its 

destroy() method.) 

All 

Mostly Custom 

Function 

No 

onviewchange Occurs when the current view changes. Gallery, 360, View- 

Set, TabSet 

Mostly Custom 

Function 

No 

About Actions 

When you add an event to a page or an element, you must select an action to perform when the user triggers the event. 

For example, when the user taps or clicks on a button (the onclick event), the browser displays a different page (the 

Show Page action). 5ml supports the actions shown in Table 8-3: on page 226. The events and actions that appear in the 

drop-down lists depend on the widget type and whether the SDK is enabled for the project. Some actions are dependent 

on native device functionality and require you enable the ad exchange/ad network SDK; for more details, see "Enabling 

Native Device Functionality" on page 372. 

Table 8-3:Supported Actions 

Action Description Element/SDK Required 

Contract to original size 

Custom Function 

Expand to full screen 

Hide 

Move 

Open External Page 

Contracts a previously expanded page element to its original size. 

User defined. 

Expands the page element to full screen size. 

Hides a page element. Use in combination with the Show action. 

Moves a page element to the defined page coordinates. 

Opens a Web page external to the project, but hosted by a 5ml project. 

Pause Media Pauses the media that is currently playing. Audio, Video 

Play Media Starts playing the selected media. Audio, Video 

Send E-mail 

Opens a new email message window with the defined email address in 

the To field. 

- 226 -


Action Description Element/SDK Required 

Set Text 

Share on Facebook 

Show 

Replaces the text that appears on a text-based element with new text 

that is defined along with this action. (For the Text Input, Text Area, 

and Password Input elements this action replaces the text in the 

Prompt Text field. For the Button and Label elements this action 

replaces the text in the Text field. For the Text element this action 

replaces all the text entered into the HTML Editor. 

Opens a browser window with the Facebook Share this link page and 

the defined link to share. 

Shows a hidden page element. Use in combination with the Hide 

action. 

Text, Label, Text Area, Text Input, 

Button, and Password Input. 

Show Current Location Causes the current location to display on the Map View element. Map View 

Show Next View Shows the next view in a View Set element. View Set 

Show Page 

Shows the selected page, with selected transition effect and time. 

Show Previous View Shows the previous view in a View Set element. View Set 

Show View Shows the defined view. View Set 

Stop Media Stops playing the selected media. Audio, Video 

Take a photo Takes a photo with the mobile device. SDK integration 

Turn Flashlight Off Turns the mobile device's flashlight off. SDK integration 

Turn Flashlight On Turns the mobile device's flashlight on. SDK integration 

Twitter Post 

Opens a browser window with the Twitter What's Happening page and 

the defined Tweet Text and the account to follow. 

Vibrate Device Vibrates the mobile device. SDK 

Using the 5ml Proxy API 

This section describes the 5ml Proxy API and provides example implementations. Using the 5ml Proxy API, the 5ml 

developer can access any kind of remote web service, through a GET or POST HTTP request. Because some public web 

services do not allow AJAX calls from third-party sites to access the web service, 5ml uses a proxy to access the web 

service. When you export a project, 5ml provides a proxy.php script in the project package, which you can use to handle 

the proxy request, provided the web server hosting the project supports PHP. 

You can write custom code to obtain data from a 5ml widget's attributes to pass to the web service using the 5ml Proxy 

API. Similarly you can write custom code to obtain data from a web service and insert it into a 5ml widget's attributes. For 

example, the mobile device user enters the zip code value "94111" into a entry form and clicks on a button to retrieve a 

list of local concerts from a web service. The user clicks on a button to retrieve the price for a ticket. The web service 

sends the price, for example, "$20," and the price is passed to a button widget's caption attribute. The user sees the 

button rendered with the "$20" value. 

- 227 -


The Behavior tab on the Properties pane lets you associate an element (or page) with an event and an action to perform 

when the user taps or clicks the element. An action can execute a Custom Function that calls the 5ml Proxy API. The API 

in turn can invoke a remote web service, hosted on another server. Use the Behavior tab's Script Editor to implement the 

custom code and 5ml Proxy API. Then associate the custom code with a 5ml widget (for example, a Button widget) by 

setting up an Event/Action sequence, using the Custom Function-Action and selecting the custom function from the 

Function drop down menu. For more information about setting up Events and Actions, see "Changing Behavior 

Properties" on page 223. 

5ml Proxy API Reference 

fiveml.proxy.sendRequest = function(url, httpMethod /*, data, oncomplete, headers*/); 

Parameters 

• url (required)—The remote web service URL that you want to invoke. 

• httpMethod (required)—The HTTP method to invoke the remote web service (GET or POST). 

• data (required for POST requests)—The data parameter can be of any type, depending on the web service you 

wish to invoke. If you want to invoke a web service using a GET HTTP request and you want to pass parameters 

as a query string, then pass a JavaScript object and the 5ml Proxy API will manage the encoding. 

• oncomplete (optional)—A callback function to invoke after the remote service sends the response. It accepts one 

parameter, which is the XHR instance. 

• headers (required for POST)—A JavaScript object that contains headers that you want to set when invoking the 

remote web service. For POST HTTP requests, you should at least set the Content-Type header, as the API uses it 

to determine how to encode the POST data. 

The headers parameter can take the following three static variables: 

fiveml.proxy.TYPE_JSON = 'application/json'; 

fiveml.proxy.TYPE_XML = 'text/xml'; 

fiveml.proxy.TYPE_FORM_POST = 'application/x-www-form-urlencoded'; 

5ml Proxy API Examples 

Sending a Simple GET HTTP Request 

function simpleGet() { 

fiveml.proxy.sendRequest('http://wsf.cdyne.com/WeatherWS/Weather.asmx/ 

GetCityForecastByZIP','GET', null, function(req){alert(req.responseText); 

}); 

Sending a GET HTTP Request with Query String Parameters 

function get() { 

- 228 -


var data = { 

'zip' : '23454', 

'country' : 'UK' 

}; 

fiveml.proxy.sendRequest('http://wsf.cdyne.com/WeatherWS/Weather.asmx/ 

GetCityForecastByZIP','GET', data, function(req){alert(req.responseText); 

}); 

Sending a POST HTTP Request to a Web Service Expecting JSON Data 

function jsonPost() { 

var data = { 

"clientId" : "corning_gorilla", 

"msgId" : '1', 

"msisdns" : [ "+11234343434" ], 

"params" : { 

"name" : "test" 

} 

} 

var headers = { 

'Content-Type' : fiveml.proxy.TYPE_JSON, 

'Accept' : 'application/json', 

'User-Agent' : 'Firefox' 

} 

fiveml.proxy.sendRequest("http://some.remoteservice.net/api/json", 'POST', data, 

function(req){alert(req.responseText); 

}, headers); 

} 

- 229 -


Sending a POST HTTP Request to a Web Service Expecting Simple HTTP FORM POST Data 

Note: Do not pass complex structures for the data parameter, when using the FORM POST Content-Type. 

function httpPost() { 

var data = { 

"clientId" : "corning_gorilla", 

"msgId" : '1' 

} 


'Content-Type' : fiveml.proxy.TYPE_FORM_POST 

} 

fiveml.proxy.sendRequest("http://some.remoteservice.net/api/post", 'POST', data, 


}, headers); 

} 

Sending a POST HTTP Request to a Web Service Expecting XML Data 

function xmlPost() { 

var data = ''; 


'Content-Type' : fiveml.proxy.TYPE_XML 

} 

fiveml.proxy.sendRequest("http://some.remoteservice.net/api/xml", 'POST', data, 


}, headers); 

} 

Exporting Projects that Include 5ml Proxy API Calls 

You do not need to perform any other configuration after you export the project for the proxy requests to work. The 

proxy.php is included in the exported package only if the proxy is used by the custom code in the Script Editor. 

- 230 -


- 231 -


Using the Advanced Properties Pane 

5ml lets you set advanced properties for page elements. To set advanced properties: 

1. Click the element on the page, or click the element in the Page Outline pane. 

The Properties pane for the element appears on the right side of the Project Editor. 

2. Click the Advanced Properties button at the top of the Properties pane, as shown in Figure 8-1 on page 232. 

The Advanced Properties pane replaces the Properties pane on the right side of the Project Editor, as shown in 


3. Select the property you want to change. 

A drop-down menu with choices, a selection button, a color picker, or text entry field appears for the property. 

4. Choose an option from the drop-down menu, click the selection button, click inside the color picker, or enter the 

new value in the text entry field for the property. 

Figure 8-1: Choosing Advanced Properties for the selected Image element. 

- 232 -


Figure 8-2: Using the drop-down menu for the image-valign property in the Advanced Properties pane to change the 

property's setting. 

- 233 -

CHAPTER 9: Using Common Widgets 


The Common widgets provide basic building blocks for creating the elements of a page, including forms. This chapter 

covers the following topics: 

• "About Common Widgets" on page 235 

• "Using the Text Widget" on page 237 

• "Using the Label Widget" on page 239 

• "Using the Button Widget" on page 241 

• "Using the Text Area Widget" on page 245 

• "Using the Text Input Widget" on page 243 

• "Using the Radio Button Widget" on page 249 

• "Using the Checkbox Widget" on page 247 

• "Using the List Menu Widget" on page 251 

• "Using the Password Input Widget" on page 253 

- 234 -


About Common Widgets 

5ml includes several Common widgets to create page elements, including forms, in your project: 

• Text widget: Creates a simple text element. You can change its appearance, including the text font family and 

size, text formatting within the element, and the element's layout on the page. It also provides a HTML editor so 

you can include more advanced content, for example, a link. 

• Label widget: Creates an interactive text element. You can assign an action to the label element to be performed 

when the user taps the element. You can also change the element's appearance, including the text font family and 

size, text formatting within the element, character spacing, and the element's layout on the page. 

• Button widget: Creates an interactive button with a border and text. You can assign an action to the button element 

to be performed when the user taps the button. You can also change the element's appearance, including the 

text font family and size, text formatting within the element, and the element's layout on the page. 

• Text Input widget: Creates a simple text entry form field. You can change the element's appearance, including the 

text font family and size, text formatting within the element, character spacing, and its layout on the page. You can 

also add prompt text and define the maximum number of characters that can be entered into the form field. 

• Text Area widget: Creates a text entry form field similar to the Text Input widget, but with a larger entry field that 

does not have a limit on the maximum number of characters you can enter. You can change the element's appearance, 

including the text font family and size, text formatting within the element, character spacing, and the element's 

layout on the page. You can also add prompt text. 

• Checkbox widget: Creates an interactive checkbox element to represent a selection choice. You can assign an 

action to the element to be performed when the user selects the element and submits the form. You can also 

change the element's appearance, including the text font family and size, text formatting within the element, character 

spacing, and the element's layout on the page. 

• Radio Button widget: Creates an interactive radio button element to represent a selection choice. Once you place 

two or more Radio Button widgets on a page and associate them together, you can select one Radio Button element 

to be the default selection. You can change the element's appearance, including the text font family and size, 

text formatting within the element, character spacing, and the element's layout on the page. You can also label the 

radio button and assign it a value. 

• List Menu widget: Creates an interactive drop-down list menu element to represent a list of choices to choose 

from. You can define the menu selections and assign one selection to be the default selection. You can also assign 

an action to the element to be performed when the user selects the element and submits the form. You can change 

the element's appearance, including the text font family and size, text formatting within the element, character 

spacing, and the element's layout on the page. 

• Password Input widget: Creates a password entry field. You can change the element's appearance, including the 

text font family and size, text formatting within the element, character spacing, and its layout on the page. You can 

also add prompt text and define the maximum number of characters that can be entered into the form field. 

Click the Widgets tab at the top of the Library pane to show the Widgets pane. You can then select Common in the dropdown 

menu under the Widgets tab, as shown in Figure 9-1 on page 236, to see the Button, Label, Text, Text Input, Text 

- 235 -


Area, Checkbox, Radio Button, List Menu, and Password Input widgets (or select All in the pop-up menu to see all 

widgets). 

Figure 9-1: Selecting the Common widgets. 

To create an element on the page from a widget, drag the widget from the Widgets pane to the Canvas. You can then 

resize, align, and arrange the element to fit your page design (for details, see "Working in the Project Editor" on page 

154). You can also customize the element by changing the element's properties in the Properties pane — for details, see 

"Customizing Page Elements" on page 194. 

- 236 -


Using the Text Widget 

The Text widget lets you add a Text element to a page. You may want to use it to add a headline or body text to the page. 

You can change the element's appearance, the font and formatting of text within the element, and the element's layout 

and position on the page. 

To place a Text element on a page, drag the Text widget from the Common section of the Widgets pane to the Canvas. 

You can then resize, align, and arrange the element to fit your page design (for details, see "Working in the Project 

Editor" on page 154). 

To customize the Text element, select the element on the page or in the Page Outline pane, as shown in Figure 9-2 on 

page 237. To enter the text for the Text element, double-click the element on the page and edit the text in the element. 

Alternatively, to enter more sophisticated content, in the Properties pane, on the General tab, click the Open HTML Editor 

button and enter HTML code. 

Figure 9-2: Entering text for the Text element or opening the HTML editor. 

You can customize the element by changing properties in the Properties pane, which appears on the right side of the 

Project Editor after you select the Text element: 

• The General tab lets you define the Text element's optional ID. You can also open the HTML Editor and enter 

HTML code to create more sophisticated content than just double-clicking on the Text widget and entering text 

there. For details, see "Changing General Properties" on page 197. 

- 237 -


• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow 

to the element. See "Changing Appearance Properties" on page 198 

• The Text tab lets you change the font family and size of the text, the text color, text alignment within the element, 

and text formatting. See "Changing Text Properties" on page 208 

• The Layout tab lets you set the size of the element, its position on the page, and the amount of padding within the 

element. You can also constrain the proportions of the element so that the aspect ratio stays the same when freely 

resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214. 

• The Behavior tab lets you associate the Text element with an event and an action to be performed. See "Changing 

Behavior Properties" on page 223 for details. 

- 238 -


Using the Label Widget 

The Label widget lets you add a Label element with text to a page and associate an action to be performed when the user 

taps or clicks the element. You may want to use it to add a rectangle with text as a link to another page or to a web page. 

You can change the element's appearance, the text font family and size, text formatting within the element, and the 

element's layout on the page. In addition, you can change the text character spacing, add a shadow to the text, and wrap 

the Label text. 

To place a Label element on a page, drag the widget from the Common section of the Widgets pane to the Canvas. You 

can then resize, align, and arrange the element to fit your page design (for details, see "Working in the Project Editor" on 

page 154). 

To customize the Label element, select the element on the page or in the Page Outline pane, as shown in Figure 9-3 on 

page 239. The Properties pane for the element appears on the right side of the Canvas. 

To enter the text for the Label element, enter the text in the Text field in the General tab at the top of the Properties pane, 

or double-click the element on the page and edit the text in the element. 

Figure 9-3: Entering text for the Label element. 

You can customize the element by changing properties in the Properties pane: 

• The General tab lets you define the Label element's optional ID and name, and set up the text wrap option. For 

details, see "Changing General Properties" on page 197. 

- 239 -



to the element. For details, see "Changing Appearance Properties" on page 198. 


text opacity, character spacing, and text formatting. It also lets you add a shadow to the text itself, and select text 

wrapping. See "Changing Text Properties" on page 208 for details. 




• The Behavior tab lets you associate the Label element with an event and an action to be performed. See "Changing 


- 240 -


Using the Button Widget 

The Button widget lets you add a Button element to a page and associate an action to be performed when the user taps or 

clicks the button. You can change the element's appearance, the text font family and size, text formatting within the 

element, and the element's layout on the page. In addition, you can change the text character spacing, and add a shadow 

to the text in the element. 

To place a Button element on a page, drag the Button widget from the Common section of the Widgets pane to the 

Canvas. You can then resize, align, and arrange the element to fit your page design (for details, see "Working in the 

Project Editor" on page 154). 

To customize the Button element, select the element on the page or in the Page Outline pane, as shown in Figure 9-4 on 

page 241. The Properties pane for the element appears on the right side of the Project Editor. 

To enter the text for the Button element, enter the text in the Text field in the General tab at the top of the Properties 

pane, or double-click the element on the page and edit the text in the element. 

Figure 9-4: Entering text for the Button element. 


• The General tab lets you define the Button element's label and optional ID. For details, see "Changing General 




- 241 -



text opacity, character spacing, and text formatting, and lets you add a shadow to the text itself. See "Changing 

Text Properties" on page 208 for details. 




• The Behavior tab lets you associate the Button element with an event and an action to be performed. See "Changing 


- 242 -


Using the Text Input Widget 

The Text Input widget lets you add a simple text entry field to a page or form. You can change the element's appearance, 

including the text font family and size, text formatting within the element, character spacing, and its layout on the page. 

You can also add prompt text to inform the user of the type of content to be entered. In addition you can define the 

maximum number of characters that can be entered into the text field. 

To place a Text Input element on a page, drag the Text Input widget from the Common section of the Widgets pane to the 



To customize the Text Input element, select the element on the page or in the Page Outline pane, as shown in Figure 9-5 

on page 243. The Properties pane for the element appears on the right side of the Project Editor. 

To enter the Name for the Text Input element, enter the name in the Name field in the General tab at the top of the 

Properties pane, and to inform the user of the type of content to enter into the field, in the Prompt Text field, enter prompt 

text; for example, enter Address. To set a limit for the maximum number of characters to enter, in the Max Chars field, 

enter the maximum number of characters. 

Figure 9-5: Entering Name and Prompt Text for the Text Input element. 


• The General tab lets you define the element's name, optional ID, and prompt text. You can also limit the maximum 

number of characters allowed to be entered into the field. For details, see "Changing General Properties" on page 

197. 

- 243 -





text opacity, character spacing, and text formatting. It also lets you add a shadow to the text itself and select text 





- 244 -


Using the Text Area Widget 

The Text Area widget lets you add a text entry field, to a page or form, similar to the Text Input widget, but with a larger 

entry field that does not have a limit on the maximum number of characters you can enter. You can change the element's 

appearance, including the text font family and size, text formatting within the element, character spacing, and the 

element's layout on the page. You can also add prompt text to inform the user of the type of content to be entered. There 

is no maximum number of characters limit for the text field. 

To place a Text Area element on a page, drag the Text Area widget from the Common section of the Widgets pane to the 



To customize the Text Area element, select the element on the page or in the Page Outline pane, as shown in Figure 9-6 


To enter the Name for the Text Area element, enter the name in the Name field in the General tab at the top of the 

Properties pane, and to inform the user of the type of content to enter into the field, in the Prompt Text field, enter prompt 

text; for example, enter Description. 

Figure 9-6: Entering text for the Text Area element. 


• The General tab lets you define the element's name, optional ID, and prompt text. For details, see "Changing General 


- 245 -










- 246 -


Using the Checkbox Widget 

The Checkbox widget lets you add an interactive checkbox element to a page or form to represent a selection choice. You 

can assign an action to the element to be performed when the user selects the element and submits the form. You can 

also change the element's appearance, including the text font family and size, text formatting within the element, 

character spacing, and the element's layout on the page. 

To place a Checkbox element on a page, drag the Checkbox widget from the Common section of the Widgets pane to the 



To customize the Checkbox element, select the element on the page or in the Page Outline pane, as shown in Figure 9-7 


To give the Checkbox element an informational label to represent the selection choice, enter the label in the Text field in 

the General tab at the top of the Properties pane. If you want the checkbox to be selected by default when the user views 

the form, then under the Text field, select the Checked checkbox. 

Figure 9-7: Entering text for the Checkbox element's label and selecting the default state as Checked. 


• The General tab lets you define the element's name, optional ID, label text, and default selection state. For details, 

see "Changing General Properties" on page 197. 



- 247 -








• The Behavior tab lets you associate the Checkbox element with an event and an action to be performed. See 

"Changing Behavior Properties" on page 223 for details. 

- 248 -


Using the Radio Button Widget 

The Radio Button widget lets you add an interactive radio button element to a page or form to represent one option from 

a group of possible options. To use a Radio Button element you must group it with at least one other Radio Button 

element. You can change the element's appearance, including the text font family and size, text formatting within the 

element, character spacing, and the element's layout on the page. 

To place a Radio Button element on a page, drag the Radio Button widget from the Common section of the Widgets pane 

to the Canvas. You can then resize, align, and arrange the element to fit your page design (for details, see "Working in 

the Project Editor" on page 154). 

To customize the Radio Button element, select the element on the page or in the Page Outline pane, as shown in Figure 9- 

8 on page 249. The Properties pane for the element appears on the right side of the Project Editor. 

To give the Radio Button element an informational label to represent the selection choice, enter the label in the Text field 

in the General tab at the top of the Properties pane. To assign a value to the Radio Button element, enter the value in the 

Value field. 

To associate the Radio Button element with another Radio Button element and create a logical group of radio buttons, 

drag another Radio Button widget to the Canvas and replace the ID of the new element with the same ID of the first Radio 

Button element. (For a group of Radio Button elements to be associated with each other they must all have the same ID, 

but different values.) To choose which Radio Button element is selected by default when the user views the form or page, 

on the Canvas select the default Radio Button element and then under the Text field, select the Checked checkbox. 

Figure 9-8: Grouping Radio Button elements: Entering a name, value, and label. Replacing the second radio button's ID 

to match the first. Selecting the first radio button as the default option. 


• The General tab lets you define the element's name, ID, label text, value, and default selection state. For details, 

see "Changing General Properties" on page 197. 



- 249 -








- 250 -


Using the List Menu Widget 

The List Menu widget lets you add a List Menu element to a form or page and associate an action to be performed when 

the user selects a menu option. You can change the element's appearance, the text font family and size, text formatting 

within the element, and the element's layout on the page. In addition, you can change the text character spacing, and add 

a shadow to the text in the element. 

To place a List Menu element on a page, drag the List Menu widget from the Common tab of the Widgets pane to the 



To customize the List Menu element, select the element on the page or in the Page Outline pane, as shown in Figure 9-9 


To enter a name for the List Menu element, enter the name in the Name field in the General tab at the top of the 

Properties pane. 

To add the various List Menu options, in the General tab, under the Options section, click the add icon ( ). In the Text 

field enter the label for the List Menu element's first option, and then in the Value field enter a unique value that this option 

represents. To add more List Menu options click the add icon again. To choose which List Menu option will display as the 

default when the user views the form or page, click on the option's far right column and select the check box that 

appears. A blue check mark displays to show the default value. 

Figure 9-9: Entering a Name, defining menu Options, and selecting a default for the List Menu element. 


- 251 -


• The General tab lets you define the element's name, optional ID, menu options, and default selection state. For 

details, see "Changing General Properties" on page 197. 

• The Appearance tab lets you set the element's background, border, and opacity, and add a shadow to the element. 

For details, see "Changing Appearance Properties" on page 198. 







• The Behavior tab lets you associate the List Menu element with an event and an action to be performed. See 


- 252 -


Using the Password Input Widget 

The Password Input widget lets you add a password entry field to a form or page. The actual password characters do not 

display when a user enters them. You can change the element's appearance, including the text font family and size, text 

formatting within the element, character spacing, and its layout on the page. You can also add prompt text to inform the 

user of the type of content to be entered. In addition you can define the maximum number of characters that can be 

entered into the password field. 

To place a Password Input element on a page, drag the Password Input widget from the Common tab of the Widgets 

pane to the Canvas. You can then resize, align, and arrange the element to fit your page design (for details, see "Working 

in the Project Editor" on page 154). 

To customize the Password Input element, select the element on the page or in the Page Outline pane, as shown in Figure 

9-10 on page 253. The Properties pane for the element appears on the right side of the Project Editor. 

To inform the user of the type of content to enter into the field, in the Prompt Text field on the General tab, enter prompt 

text; for example, Enter Password. To set a limit for the maximum number of characters to enter, in the Max Chars field, 

enter the maximum number of characters. 

Figure 9-10: Entering Prompt Text and Max Chars for the Password Input element. 


• The General tab lets you define the element's optional ID and prompt text. You can also limit the maximum 

number of characters allowed to be entered into the field. For details, see "Changing General Properties" on page 

197. 

- 253 -










- 254 -

CHAPTER 10: Using Shape Widgets 


The Shape widgets provide basic building blocks for creating the elements of a page. This chapter covers the following 

topics: 

• "About Shape Widgets" on page 256 

• "Using the Rectangle Widget" on page 257 

• "Using the Ellipsis Widget" on page 258 

• "Using the Triangle Widget" on page 259 

- 255 -


About Shape Widgets 

5ml includes several Shape widgets to create page elements in your project: 

• Rectangle widget: Creates a rectangle. You can change the element's appearance and its layout on the page. 

• Ellipsis widget: Creates an elliptical shape such as a circle or oval. You can change the element's appearance and 

its layout on the page. 

• Triangle widget: Creates a triangle. You can change the element's appearance and its layout on the page. 

Click the Widgets tab at the top of the Library pane to show the Widgets pane. You can then select Shapes in the dropdown 

menu to see the Rectangle, Ellipsis, and Triangle widgets (or select All in the pop-up menu to see all widgets). 

Figure 10-1: Selecting the Shapes widgets. 



154). You can also customize the element by changing the element's properties in the Properties pane — for details, see 

"Customizing Page Elements" on page 194. 

- 256 -


Using the Rectangle Widget 

The Rectangle Widget lets you add a Rectangle element to a page. You may want to use it to define a rectangular section 

of the page and then fill the rectangle with color, a linear gradient, or an image. You can change the element's 

appearance and its layout on the page. 

To place a Rectangle element on a page, drag the Rectangle widget from the Shapes section of the Widgets pane to the 



To customize the Rectangle element, select the element on the page or in the Page Outline pane, as shown in Figure 10-2 

on page 257. The Properties pane for the element appears on the right side of the Project Editor with the following tabs: 

• The General tab lets you define the element's optional ID. For details, see "Changing General Properties" on page 

197. 



• The Layout tab lets you set the size of the element and its position on the page. You can also constrain the proportions 

of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For details, 

see "Changing Layout Properties" on page 214. 

• The Behavior tab lets you associate the Rectangle element with an event and an action to be performed. See 


Figure 10-2: Selecting the Rectangle element on the page to change its properties. 

- 257 -


Using the Ellipsis Widget 

The Ellipsis Widget lets you add a circle or oval Ellipsis element to a page. You may want to use it to define a circular or 

oval section of the page and then fill the shape with color, a linear gradient, or an image. You can change the element's 

appearance and its layout on the page. 

To place an Ellipsis element on a page, drag the Ellipsis widget from the Shapes section of the Widgets pane to the 



To customize the Ellipsis element, select the element on the page or in the Page Outline pane, as shown in Figure 10-3 on 

page 258. The Properties pane for the element appears on the right side of the Project Editor with the following tabs: 

• The General tab lets you define the element's optional ID.For details, see "Changing General Properties" on page 

197. 




of the element so that the aspect ratio stays the same when freely resizing it on the Canvas — turn on this 

option to resize a circle shape and maintain the shape as a circle. For details, see "Changing Layout Properties" on 

page 214. 

• The Behavior tab lets you associate the Ellipsis element with an event and an action to be performed. See "Changing 


Figure 10-3: Selecting the Ellipsis element on the page to change its properties, 

- 258 -


Using the Triangle Widget 

The Triangle Widget lets you add a Triangle element to a page. You may want to use it to define a triangular section of 

the page and then fill the triangle with color, a linear gradient, or an image. You can change the element's appearance 

and its layout on the page. 

To place a Triangle element on a page, drag the Triangle widget from the Shapes section of the Widgets pane to the 



To customize the Triangle element, select the element on the page or in the Page Outline pane, as shown in Figure 10-4 

on page 259. The Properties pane for the element appears on the right side of the Project Editor with the following tabs: 


197. 

• The Appearance tab lets you set the element's background color and opacity, and add a reflection and shadow to 

the element. For details, see "Changing Appearance Properties" on page 198. 




• The Behavior tab lets you associate the Triangle element with an event and an action to be performed. See 


Figure 10-4: Selecting the Triangle element on the page to change its properties. 

- 259 -

CHAPTER 11: Using Media Widgets 


The media widgets enable you to add media elements to a page, including images, audio, video clips, and links to video 

clips on YouTube. This chapter covers the following topics: 

• "About Media Widgets" on page 261 

• "Using the Image Widget" on page 263 

• "Using the Gallery Widget" on page 265 

• "Using the Audio Widget" on page 278 

• "Using the Video Widget" on page 281 

• "Using the YouTube Widget" on page 285 

- 260 -


About Media Widgets 

5ml includes several Media widgets to create page elements in your project: 

• Image widget: Creates an interactive image element. You can drag an image from the Assets pane to create an 

image element. If you need a placeholder for an image asset that's not ready, you can drag an Image widget from 

the Widgets pane and then drag an image from the Assets pane later to fill the element. You can assign an action 

to the element to be performed when the user taps or clicks the image. You can also change the element's appearance 

and layout on the page. 

• Gallery widget: Creates an interactive gallery of images with controls for users to navigate back and forth through 

the images. You drag multiple images from the Assets pane to fill the Gallery element. You can also change the element's 

appearance and layout on the page. 

• Audio widget: Creates an interactive audio element that plays automatically or offers controls for users to play, 

pause, and turn off the sound. You can drag audio content from the Assets pane to create an audio element. If you 

need a placeholder for a audio asset that's not ready to use, you can drag an Audio widget from the Widgets pane 

and then drag an audio file from the Assets pane later to fill the element. You can also change the element's 


• Video widget: Creates an interactive video element that plays automatically or offers controls for users to play, 

fast-forward, rewind, pause, and freely scrub through the video. You can drag a video from the Assets pane to 

create a video element. If you need a placeholder for a video asset that's not ready to use, you can drag a Video 

widget from the Widgets pane and then drag a video from the Assets pane later to fill the element. You can also 

change the element's appearance and layout on the page. 

• YouTube widget: Creates an interactive element for a YouTube video with controls for users to expand the video 

to full screen, adjust the video's sound, and play, pause, and freely scrub through the video. You can also change 

the element's appearance and layout on the page. 

Click the Widgets tab at the top of the Library pane to show the Widgets pane in the Library. You can then select Media in 

the drop-down menu under the Widgets tab, as shown in Figure 11-1 on page 262, to see the Image, Gallery, Audio, 

Video, and YouTube widgets (or select All in the drop-down menu to see all widgets). 

- 261 -


Figure 11-1: Selecting the Media widgets in the Widgets pane of the Library. 



154). You can also change the element's properties in the Properties pane — for details, see "Customizing Page 

Elements" on page 194 

- 262 -


Using the Image Widget 

The Image widget lets you create an Image element on a page and associate an action to be performed when the user 

taps or clicks the image. You can set the image to be embedded as well as downloadable. You can also associate the 

Image element with an event and an action to be performed when the user interacts with the Image element. You can 

resize, align, and arrange the element on the page to fit your page design (for details, see "Working in the Project Editor" 

on page 154). 

To place an Image element on a page, select Images in the Assets pane drop-down menu, and drag an image from the 

Assets pane, as shown in Figure 11-2 on page 263. 

Figure 11-2: Placing an image asset on a page in the Canvas. 

You can also drag an Image widget from the Media section of the Widgets pane, and later drag an image from the Assets 

pane to fill the element, as shown in Figure 11-3 on page 264. To fill the Image element, select the element and drag the 

image asset to the Source field on the Properties pane's General tab. Use this method if your image asset is not ready for 

placement on the page or if you want to replace an existing image. 

- 263 -


Figure 11-3: Dragging an image from the Assets pane to the Image widget's Source field to place it inside an Image 

element already on the page. 

To reduce the time to load an image, you can embed the image into the page's HTML file (in base64 format). To embed 

an image, select the Image element, open the Properties pane's advanced view, and select the image-embed checkbox. 

To set the image to be downloadable (for example, to download a wallpaper image), select the Image element and then 

select the Downloadable checkbox on the Properties pane's General tab. The mobile user can tap on the image and save 

it to their mobile device. 

To change the Image element's properties, select the element on the page or in the Page Outline pane. The Properties 

pane for the element appears on the right side of the Project Editor with the following tabs: 

• The General tab lets you define the Image element's action and optional ID. For details, see "Changing General 


• The Appearance tab lets you set the element's border, opacity, and add a reflection and shadow to the element. 





• The Behavior tab lets you associate the Image element with an event and an action to be performed. See "Changing 


- 264 -


Using the Gallery Widget 

The Gallery widget lets you create a page element for an interactive gallery of images with captions for each image, and 

includes controls for users to navigate back and forth through the images. An interactive gallery can be entertaining as 

well as informative, and it provides a way to show multiple images with captions on a single page. 

You place the widget on the page to create the Gallery element, and then fill the element with multiple images by 

dragging the images from the Assets pane. 

To place the Gallery widget on a page, drag the widget from the Media section of the Widgets pane to the Canvas, as 


Figure 11-4: Placing a Gallery widget on a page (using a tracing image as a guide). 

You can resize, align, and arrange the element to fit your page design, as shown in Figure 11-5 on page 266 (for details, 

see "Working in the Project Editor" on page 154). 

- 265 -


Figure 11-5: Resizing the Gallery element. 

To change the Gallery element's properties, select the element on the page or in the Page Outline pane. The Properties 

pane for the Gallery element appears on the right side of the Project Editor (refer to Figure 11-5 on page 266). 

Note: To select the Gallery widget on the canvas single-click on the Gallery widget. To select an image, double-click the 

Gallery widget; the last active image opens. 

To add the first image to the Gallery element: 

1. Click the Assets tab in the Library pane, and choose Images from the Assets drop-down menu to see your image 

assets. 

2. Drag the first image from the Assets pane to the Gallery element, as shown in Figure 11-6 on page 267. 

- 266 -


Figure 11-6: Dragging the first image into the Gallery element. 

To add the next image to the Gallery element, you can click the Add View (+) button in the Gallery element's controller, 

as shown in Figure 11-7 on page 267. You can then drag the next image from the Assets pane, as shown in Figure 11-8 on 

page 268. 

Figure 11-7: Clicking the Add View button to add the next image to the Gallery element. 

- 267 -


Figure 11-8: Dragging the next image into the Gallery element. 

The images in the Gallery element are listed in the Photos list in the General tab of the Photo Gallery Properties pane as 

you add them. 

You can also add one or more images to the Gallery element by selecting them in the Assets pane and dragging them 

directly to the Photos list, as shown in Figure 11-9 on page 269. You can then reorder the images in the Gallery by 

selecting an image in the Photos list and clicking the up or down arrows at the bottom right corner of the Photos list, as 


- 268 -


Figure 11-9: Dragging several images to the Photos list to add them at once to the Gallery element. 

Figure 11-10: Moving an image up in the order of images in the Gallery element. 

- 269 -


Each Gallery image includes a View and a Label (caption) component, each with its own Properties pane. To change an 

image's View or Label properties, select the image in the Photos list or use the Show Next button to navigate to the 

image, as shown in Figure 11-11 on page 270. Double-click on the image to select the image View and display the View 

Properties pane. Click on the Label (caption) component below the image View to select the Label component and display 

the Label Properties pane. 

Figure 11-11: Using the Show Next button to navigate to the next image. 

To change the image View Properties: 

1. Select the image in the Photos list or use the Show Next button to navigate to the image. 

2. Double-click on the image to select the image View. 

The image View Properties pane opens. 

- 270 -


Figure 11-12: Selecting a Gallery widget's image View and Properties pane 

3. From the Transition drop-down menu, you can select to Slide or Fade In the image when the user or an event 

changes the Gallery view. 

• Select the Slide in transition. 

Figure 11-13: Selecting the Slide transition. 

Then select a Slide in Direction, Acceleration, and Duration option. 

• Select the Fade In transition. 

- 271 -


Figure 11-14: Selecting the Fade In transition 

Then select a Fade In Acceleration and Duration option. 

4. You can select the Load on demand and Preload Images checkboxes to determine when to load the images to the 

user's device. For more information about Loading on demand and Preloading Images, see "Optimizing at the 

View or Tab Level" on page 141. 

To add a caption to a Gallery image: 

1. Select the image in the Photos list or use the Show Next button to navigate to the image. 

2. Double-click on the image to select the image View. 

3. Beneath the image, click inside the caption area to select the Label component. 

The Label (caption) properties appear in the Properties pane, as shown in Figure 11-15 on page 273. 

- 272 -


Figure 11-15: Selecting a Gallery widget's image Label and Properties pane. 

4. Enter the caption text in the Text field in the General tab. 

The caption text appears in the caption area on the page, and is also listed in the Photos section of the Photo 

Gallery Properties pane. 

5. The Wrap Text checkbox is selected by default. If you enter a large amount of text, it will wrap to the size of Label 

(caption) component. 

Setting up caption placement: 

You can place captions at the bottom or top of the images, or overlay the captions over the images. You can also change 

the size of the caption area. 

To set the placement of captions in the Gallery element, choose one of the following options in the Captions drop-down 

menu under the Photos list in the Photo Gallery Properties pane, as shown in Figure 11-16 on page 274: 

• Bottom: Captions are placed below each image. 

• Bottom (Overlay): Captions are placed at the bottom of each image overlaying the image. 

• Top: Captions are placed above each image. 

• Top (Overlay): Captions are placed at the top of each image overlaying the image. 

• No Captions: Captions do not appear in the Gallery element. 

- 273 -


Figure 11-16: Choosing to place captions at the bottom of each image overlaying the image. 

With Bottom (Overlay) or Top (Overlay) choices, a drop-down menu appears below the Captions menu, as shown in 

Figure 11-17 on page 275, for choosing Always Show to always show the overlaid caption, or On Tap to show the overlaid 

caption only when the user taps or clicks the image. 

- 274 -


Figure 11-17: Choosing to show the overlaid caption only when the user taps or clicks the image. 

To resize the caption area, drag the Caption Size slider at the bottom of the General tab of the Photo Gallery properties, 

as shown in Figure 11-18 on page 276. The caption size is a percentage of the total size of the Gallery element. 

- 275 -


Figure 11-18: Resizing the caption area with the Caption Size slider. 

You can also customize the Gallery element itself by selecting the Gallery element on the page or in the Page Outline pane 

and changing its properties in the Properties pane: 

• The General tab of the Gallery widget Properties pane lets you define the element's optional ID. It lets you select 

where to locate the gallery image's caption, whether to show a caption, and what size the caption should be. In 

addition you can select whether to enable tracking for to the Gallery widget. For details, see "Changing General 


• The Appearance tab lets you set the element's border and opacity, and add a reflection and shadow to the element. 





• The Behavior tab lets you associate the Gallery element with an event and an action to be performed. See "Changing 


You can customize the images by changing the View properties: 

- 276 -


• The General tab of the View Properties pane lets you define the View's optional ID. You can set up image transitions 

such as Slide and Fade In, and you can customize the transitions by choosing the Slide Direction and the 

Slide or Fade In Acceleration and Duration options. In additon you can enable View tracking options; you can track 

the image as a View or as a Page. You can also choose Load on Demand and Preload Images options. 

• The Appearance tab of the View Properties pane lets you set the View background, border, and opacity. For 

details, see "Changing Appearance Properties" on page 198. 

• The Layout tab lets you set the degree of rotation to set the caption area. For details, see "Changing Layout Properties" 

on page 214. 

• The Behavior tab lets you associate the View component with an event and an action to be performed. See "Changing 


You can customize the captions by changing the Label properties: 

• The General tab lets you enter text for the Label (caption) component. The Wrap Text option is automatically 

selected so that long caption text lines wrap around to the next line; however, if you don’t want the text lines to 

wrap, you can turn this option off by clicking it. 

• The Appearance tab of the Label Properties pane lets you set the caption’s background, border, and opacity, and 

add a reflection to the element. For details, see "Changing Appearance Properties" on page 198. 

• The Text tab lets you change the font family and size of the text, the text color, text alignment within the caption, 

text opacity, character spacing, and text formatting, and lets you add a shadow to the text itself. In addition, you 

can set the line height by dragging the Line Height slider — dragging to the right increases the line height, while 

dragging to the left reduces the line height. The line height is measured in percentages of the font size, in which 

100% is equal to the font size. See "Changing Text Properties" on page 208 for details. 

• The Layout tab lets you set the degree of rotation to set the caption area. For details, see "Changing Layout Properties" 

on page 214. 

- 277 -


Using the Audio Widget 

The Audio widget lets you create an Audio element on a page that offers controls for users to play or pause the audio 

content, as well as turn the sound on or off. You can also resize, align, and arrange the element to fit your page design 

(for details, see "Working in the Project Editor" on page 154). 

To place an Audio element on a page, click the Assets tab, select Audio in the Assets pane drop-down menu, and navigate 

to the audio file you want to place on the Canvas. Drag and drop the audio file from the Assets pane onto the Canvas, as 


Figure 11-19: Placing an audio asset on a page in the Canvas. 

You can also drag an Audio widget from the Media section of the Widgets pane, and later drag an audio file from the 

Assets pane to use with the Audio element, as shown in Figure 11-20 on page 279. Use this method if your audio asset is 

not ready for placement on the page. 

- 278 -


Figure 11-20 : Dragging an audio file from the Assets pane to the Audio widget's Source field to place it inside an Audio 

element already on the page. 

To change the Audio element's properties, select the element on the page or in the Page Outline pane. The Properties 

pane for the element appears on the right side of the Project Editor. 

You can customize the Audio element by changing properties in the Properties pane: 

• The General tab lets you define the Audio element's optional ID. You can set the audio player controls to be visible 

or hidden by choosing Visible or Hidden from the Controls drop-down menu. The user can then tap or click the 

audio to see the controls. Using the controls the user can play, pause, and turn the sound on or off. In the Options 

section, you can set the audio content to play automatically or only when the user clicks on the play control. You 

can also set the audio content to play in a loop and you can choose whether to preload the audio content. 

(Preloading the audio reduces the response time when the user clicks to play the audio; however, it increases the 

initial page load time.) For details, see "Changing General Properties" on page 197 

If you enable the tracking feature for the project, then you see additional options on the General tab. You can 

choose to track when the user starts the audio (either auto or manual play), pauses the audio (manual pause), and 

when the audio ends (either auto or manual stop). In the Label and Category fields you can enter custom values to 

create report tags to sort and aggregate the events in tracking reports. 

- 279 -


Figure 11-21 : Tracking the audio element and selecting tracking options; track media start, media pause, and 

media end. 



• The Layout tab lets you set the size of the element and its position on the page, as well as add padding. You can 

also constrain the proportions of the element so that the aspect ratio stays the same when freely resizing it on the 

Canvas. For details, see "Changing Layout Properties" on page 214. 

- 280 -


Using the Video Widget 

The Video widget lets you create a Video element on the page that offers controls for users to play or pause the video, 

and rewind, scrub through, or fast-forward through the video. You can also resize, align, and arrange the element to fit 

your page design (for details, see "Working in the Project Editor" on page 154). 

To place a Video element on a page, select Videos in the Assets pane drop-down menu, and drag a video from the Assets 


Figure 11-22: Placing a video asset on a page in the Canvas. 

You can also drag a Video widget from the Media section of the Widgets pane, and later drag a video file from the Assets 

pane to use with the Video element, as shown in Figure 11-23 on page 282. Use this method if your video asset is not 

ready for placement on the page. 

- 281 -


Figure 11-23 : Placing a Video widget from the Widgets pane on the page before dragging a video file from the Assets 

pane to place inside a Video widget already on the page. 

In addition, you can use a HTTP URL to a remote web server to point to the video file, as shown in Figure 11-24 on page 

282. Use this method if your video is hosted elsewhere. To add the video source URL, drag a Video widget onto the 

canvas, and click the Advanced Properties button at the top of the Properties pane. In the media-source field, enter (or 

copy and paste) the URL value for the video's source. 

Figure 11-24 : Using a URL, in the Advanced Properties' media-source field, to point to the video file's location. 

- 282 -


To change the Video element's properties, select the element on the page or in the Page Outline pane. The Properties 


In the General tab of the Properties pane you can set the Preview frame of the video, which is the frame that appears 

when the video is not playing. To set the Preview frame, drag the Preview Frame slider in the General tab of the Video 

Properties pane to the right until you see the frame you want, as shown in Figure 11-25 on page 283. You can move 

backward and forward through all the video frames by dragging the slider left and right. 

You can also set the video player controls to be visible or hidden by choosing Visible or Hidden from the Controls dropdown 

menu in the General tab of the Video Properties. The user can then tap or click the video to see the controls. 

Figure 11-25: Setting the Preview Frame for the video. 

Alternatively, instead of using a frame from the video as a preview, you can display a poster image for the video using a 

HTTP URL to a remote web server, as shown in Figure 11-24 on page 282. It appears before the video starts. To add the 

poster source URL, drag a Video widget onto the canvas, and click the Advanced Properties button at the top of the 

Properties pane. In the poster field, enter (or copy and paste) the URL value for the poster's source. The poster source 

can be either local or remote. (Currently to use a local asset, you need to drag and drop the image onto the canvas and 

then copy the Image widget's Advanced Properties image property value and paste it into the Video widget's Advanced 

Properties poster property field.) To hide the poster image, in the Advanced Properties pane, select the hide-poster 

checkbox. 

You can customize the Video element by changing properties in the Properties pane: 

• The General tab lets you define the Video element's optional ID. You can set the video player controls to be visible 

or hidden by choosing Visible or Hidden from the Controls drop-down menu. The user can then tap or click the 

video to see the controls. Using the controls the user can play, pause, and turn the sound on or off. 

- 283 -


In the Options section, you can set the video content to play automatically or only when the user clicks on the play 

control. You can also set the video content to play in a loop and you can choose whether to preload the video 

content. (Preloading the video reduces the response time when the user clicks to play the video; however, it 

increases the initial page load time.) For details, see "Changing General Properties" on page 197 

If you enable the tracking feature for the project, then you see additional options on the General tab. You can 

choose to track when the user starts the video, pauses the video, and when the video ends (either auto or manual 

stop). In the Label and Category fields you can enter custom values to create report tags to sort and aggregate the 

events in tracking reports. 

Figure 11-26: Tracking the video element and selecting tracking options; track media start, media pause, and 

media end. 






- 284 -


Using the YouTube Widget 

The YouTube widget places a YouTube video clip on a page with controls for users to play or pause the video, scrub 

through the video, adjust the sound, play the video full-screen, and jump to the YouTube page where the video resides. 

To place the YouTube element on a page, drag the widget from the Media section of the Widgets pane to the Canvas, as 

shown in Figure 11-27 on page 285. You can then resize, align, and arrange the element to fit your page design (for 

details, see "Working in the Project Editor" on page 154). 

Figure 11-27: Placing a YouTube widget on a page in the Canvas. 

To change the YouTube element's properties, select the element on the page or in the Page Outline pane. The Properties 


To assign a YouTube video clip to the element, enter the YouTube video ID (not the entire URL for the YouTube video, 

just the ID portion at the end of the URL) in the Video ID field in the General tab at the top of the YouTube Properties 


- 285 -


Figure 11-28: Changing the YouTube Video ID to point to a different YouTube video clip. 

You can customize the Video element by changing its properties in the Properties pane: 

• The General tab lets you define the YouTube element's optional ID. For details, see "Changing General Properties" 

on page 197 






- 286 -

CHAPTER 12: Using Effects and Animation Widgets 


The Effects and Animation widgets let you add special effects to a page, including a 360-degree view and animation. This 

chapter covers the following topics: 

• "About Effects and Animation Widgets" on page 288 

• "Using the 360 Widget" on page 289 

• "Using the Frameset Widget" on page 297 

• "Using the Particles Widget" on page 304 

- 287 -


About Effects and Animation Widgets 

5ml includes several Effects and Animation widgets to create page elements in your project: 

• 360 widget: Creates an interactive gallery of images designed to show a 360-degree view, with controls for users 

to navigate back and forth through the images. You drag multiple images from the Assets pane to fill the 360 element. 

You can also change the element's appearance and layout on the page. 

• Particles widget: Creates an animation of particles, such as falling leaves, rain, snow, confetti, stars, Xmas-style 

snowflakes, or custom particles. You can control the size of the particles, the speed of the animation, the 

animation's rotation about the X, Y, and Z axes, and the acceleration of the animation. 

• Frameset widget: Creates an interactive slideshow of images that you can set to play automatically, to play when 

the mouse hovers over the element, or to navigate manually by swiping through the images. You drag multiple 

images from the Assets pane to fill the Frameset element. You can also change the element's appearance and layout 

on the page. 

Click the Widgets tab at the top of the Library pane to show the Widgets pane. You can then select Effects & Animation in 

the drop-down menu under the Widgets tab, as shown in Figure 12-1 on page 288, to see the 360, Particles, and 

Frameset widgets (or select All in the drop-down menu to see all widgets). 

Figure 12-1: Selecting the Effects & Animation widgets in the Widgets pane of the Library. 

- 288 -


Using the 360 Widget 

The 360 widget lets you create a page element for an interactive gallery of images that you can set to play automatically, 

to play when the mouse hovers over the element, or to be navigated manually by swiping through the images. You drag 

multiple images from the Assets pane to fill the 360 element. You can also change the element's appearance and layout 

on the page. 

To place the widget on a page and create a 360 element, drag the widget from the Effects & Animation section of the 

Widgets pane to the Canvas, as shown in Figure 12-2 on page 289. You can then resize, align, and arrange the element to 

fit your page design (for details, see "Working in the Project Editor" on page 154). You can also associate the 360 element 

with an event and an action to be performed when the user interacts with the 360 element. 

Figure 12-2: Placing a 360 widget on the page. 

To add the first image to the 360 element: 

1. Click the Assets tab in the Library pane, and choose Images from the Assets drop-down menu. 

2. Drag the image from the Assets pane, and drop it into the element, as shown in Figure 12-3 on page 290. 

- 289 -


Figure 12-3: Dragging the first image into the 360 element. 

To add the next image to the 360 element, click the Add View (+) button in the 360 element's controller, as shown in 

Figure 12-4 on page 291. You can then drag the next image from the Assets pane into the 360 element, as shown in 


- 290 -


Figure 12-4: Clicking the Add View button to add the next image to the 360 element. 

Figure 12-5: Dragging the next image into the 360 element. 

- 291 -


The images in the 360 element are listed in the Photos list in the General tab of the 360 Properties pane as you add them. 

Tip: You can add a selection of images quickly to the 360 element by selecting them in the Assets pane and dragging 

them directly to the Photos list, as shown in Figure 12-6 on page 292. 

You can reorder the images in the 360 widget element by selecting an image in the Photos list and clicking the up or down 

arrows at the bottom right corner of the Photos list, as shown in . 

Figure 12-6: Dragging several images to the Photos list to add them at once to the 360 element. 

- 292 -


Figure 12-7: Moving an image up in the order of images in the 360 element. 

You can also set the 360 element to enable swiping through the images manually, or playing the images automatically as 

a slideshow, by choosing Manual or Automatic from the Playback drop-down menu in the General tab of the Frameset 

Properties pane, as shown in Figure 12-8 on page 294. 

- 293 -


Figure 12-8: Setting the Frameset element to On Swipe to show the images by manual swiping. 

The choices for the Playback menu are: 

• On Swipe: The 360 element displays the first image, and the user can swipe (or click and drag with a mouse) to 

navigate back and forth through all the images. 

• On Hover: The 360 element starts playing the images as a slideshow whenever the user hovers the mouse over 

the element. 

• Automatic: The 360 element starts playing the slideshow immediately after the page loads. 

• None: Removes any playback modes. 

After choosing Automatic, you can choose Duration in the drop-down menu underneath the Playback menu to set the 

slideshow's duration in milliseconds, as shown in Figure 12-9 on page 295, or choose Frames Per Second in the menu to 

set the number of frames per second for playing the slideshow, as shown in Figure 12-10 on page 296. You can also click 

the Loop option to continually repeat the slideshow. 

- 294 -


Figure 12-9: Setting the Playback menu to Automatic, choosing Duration, and setting the duration in milliseconds. 

- 295 -


Figure 12-10: Setting the Playback menu to Automatic, choosing Frames Per Second, and setting the number of frames 

per second. 

The 360 Properties pane also includes the following tabs: 

• The General tab lets you define the 360 element's optional ID and the image playback mode. For details, see 

"Changing General Properties" on page 197. 

• The Appearance tab lets you set the element's border and opacity. For details, see "Changing Appearance Properties" 

on page 198. 




• The Behavior tab lets you associate the 360 element with an event and an action to be performed. See "Changing 


- 296 -


Using the Frameset Widget 

The Frameset widget lets you create a page element for an interactive slideshow of images that you can set to play 

automatically, to play when the mouse hovers over the element, or to be navigated manually by swiping through the 

images. You drag multiple images from the Assets pane to fill the Frameset element. You can also change the element's 


To place the widget on a page and create a Frameset element, drag the widget from the Effects & Animation section of 

the Widgets pane to the Canvas, as shown in Figure 12-11 on page 297. You can then resize, align, and arrange the 

element to fit your page design (for details, see "Working in the Project Editor" on page 154). You can also associate the 

Frameset element with an event and an action to be performed when the user interacts with the Frameset element. 

Figure 12-11: Placing a Frameset widget on the page. 

To add the first image to the Frameset element: 

1. Click the Assets tab in the Library pane, and choose Images from the Assets drop-down menu. 

2. Drag the image from the Assets pane, and drop it into the element, as shown in Figure 12-12 on page 298. 

- 297 -


Figure 12-12: Dragging the first image into the Frameset element. 

To add the next image to the Frameset element, click the Add View (+) button in the Frameset element's controller, as 

shown in Figure 12-13 on page 298. You can then drag the next image from the Assets pane to the Frameset element, as 


Figure 12-13: Clicking the Add View button to add the next image to the Frameset element. 

- 298 -


Figure 12-14: Dragging the next image into the Frameset element. 

The images in the Frameset element are listed in the Photos list in the General tab of the Frameset Properties pane as you 

add them. You can also add one or more images to the Frameset element by selecting them in the Assets pane and 

dragging them directly to the Photos list, as shown in Figure 12-15 on page 300. 

You can reorder the images in the Frameset element by selecting an image in the Photos list and clicking the up or down 

arrows at the bottom right corner of the Photos list, as shown in Figure 12-16 on page 300. 

- 299 -


Figure 12-15: Dragging several images to the Photos list to add them at once to the Frameset element. 

Figure 12-16: Moving an image up in the order of images in the Frameset element. 

- 300 -


You can also set the Frameset element to enable swiping through the images manually, or playing the images 

automatically as a slideshow, by choosing Manual or Automatic from the Playback drop-down menu in the General tab of 

the Frameset Properties pane, as shown in Figure 12-17 on page 301. 

Figure 12-17: Setting the Frameset element to On Swipe to show the images by manual swiping. 

The choices for the Playback menu are: 

• On Swipe: The Frameset element displays the first image, and the user can swipe (or click and drag with a mouse) 

to navigate back and forth through all the images. 

• On Hover: The Frameset element starts playing the images as a slideshow whenever the user hovers the mouse 

over the element. 

• Automatic: The Frameset element starts playing the slideshow immediately after the page loads. 


After choosing Automatic, you can choose Duration in the drop-down menu underneath the Playback menu to set the 

slideshow's duration in milliseconds, as shown in Figure 12-18 on page 302, or choose Frames Per Second in the menu to 

- 301 -


set the number of frames per second for playing the slideshow, as shown in Figure 12-19 on page 303. You can also click 

the Loop option to continually repeat the slideshow. 

Figure 12-18: Setting the Playback menu to Automatic, choosing Duration, and setting the duration in milliseconds. 

- 302 -


Figure 12-19: Setting the Playback menu to Automatic, choosing Frames Per Second, and setting the number of frames 

per second. 

You can also customize the Frameset element in the Properties pane: 

• The General tab lets you define the Frameset element's optional ID. For details, see "Changing General Properties" 

on page 197. 

• The Appearance tab lets you set the element's border and opacity. For details, see "Changing Appearance Properties" 

on page 198. 




• The Behavior tab lets you associate the Frameset element with an event and an action to be performed. See 


- 303 -


Using the Particles Widget 

The Particles widget lets you create a page element for animated particles. The Particles widget includes presets for 

falling leaves, rain, snow, confetti, stars, xmas-related particles, and you can create animation with custom particles. You 

can control the size of the particles, the speed of the animation, the animation's rotation about the X, Y, and Z axes, and 

the acceleration of the animation. 

To place the widget on a page and create a Particles element, drag the widget from the Effects & Animation section of the 

Widgets pane to the Canvas, as shown in Figure 12-20 on page 304. You can then resize, align, and arrange the element 

to fit your page design (for details, see "Working in the Project Editor" on page 154). 

Figure 12-20: Placing a Particles widget on a page (on top of an Image element). 

You can change the type of animated particle in the Particles element by choosing the type in the Type drop-down menu 

in the General tab of the Particles Properties pane, as shown in Figure 12-21 on page 305. 

- 304 -


Figure 12-21: Changing the type of animated particle in the Particles widget element to Snow. 

You can use your own custom particles by uploading the particle image(s) into the Assets library. For information about 

how to upload an image, see "Importing Images" on page 149. On the Particles Properties pane's General Tab, from the 

Type drop-down menu, choose Custom. Under the Type drop-down menu an image well appears. Drag and drop the 

custom particle image(s) from the Assets library into the image well, as shown in Figure 12-22 on page 306. (You can add 

one or more particle images. To remove an image, select the image and click on the bin icon.) When implementing 

custom particles you need to consider the image size and the image density (number of images). Also, consider how 

rendering the image size and density affects the mobile user experience and how the particles will render on a variety of 

mobile devices. For more information, contact your Velti representative. 

- 305 -


Figure 12-22: Using a Custom particle image. 

After selecting a type of particle, you can set the amount of particles in the Population slider by dragging to the right (for a 

large animation with many particles) or to the left (for a small animation with less particles), as shown in Figure 12-23 on 

page 307. 

You can also set the speed of the animation by dragging the Speed slider to the left (slow) or the right (fast). To change 

the direction of the animated particles, you can set the particles to rotate around the X, Y, and/or Z axes by clicking to 

turn on the X Axis, Y Axis, and/or Z Axis under the Rotation subheading, as shown in Figure 12-24 on page 308. 

- 306 -


Figure 12-23: Setting the Population of animated particles to Large (for more particles in the animation). 

You can also specify the way the animation accelerates from start to finish by choosing one of the following for the 

Acceleration drop-down menu: 

• Ease: The animation accelerates slowly and builds up to normal speed as it plays. 

• Ease In: The animation accelerates from slower at the start to normal speed at the end. 

• Ease Out: The animation plays at normal speed at the start and then decelerates (from faster to slower) at the 

end. 

• Ease In Out: The animation accelerates from slower at the start to faster in the middle, and then decelerates (from 

- 307 -


faster to slower) at the end. 

• Linear: The animation plays at the same speed throughout. 

Figure 12-24: Changing the Acceleration and direction of the animated particles to rotate around both the Y and Z axes. 

You can also customize the Particles element in the Properties pane: 

• The General tab lets you define the Particles element's optional ID. For details, see "Changing General Properties" 

on page 197. 

- 308 -


• The Appearance tab lets you set the element's background, border, and opacity. For details, see "Changing 

Appearance Properties" on page 198. 




- 309 -

CHAPTER 13: Using Layout and Navigation Widgets 


The Layout widgets let you group other widget-created elements together for layout on the page, and the Navigation 

widgets provide a way to navigate collections of elements. This chapter covers the following topics: 

• "About Layout and Navigation Widgets" on page 311 

• "Using the Container Widget" on page 312 

• "Using the 3D Stage Widget" on page 314 

• "Using the HBox Widget" on page 320 

• "Using the VBox Widget" on page 323 

• "Using the Scroll View Widget" on page 325 

• "Using the Tab Set Widget" on page 327 

• "Using the View Set Widget" on page 335 

- 310 -


About Layout and Navigation Widgets 

5ml includes the following Layout and Navigation widgets you can use in your project: 

• Container widget: Creates a rectangular element for page layout that can hold other page elements. 

• HBox and VBox widgets: Create horizontal and vertical boxes for laying out page elements that automatically position 

the page elements within them. 

• Scroll View widget: Creates a rectangular window that provides additional viewing space in which you can view 

other page elements. The Scroll View widget provides a compact method for displaying elements that take up a lot 

of space, whether due to the size of the element or the number of the elements. In this way you can fit more elements 

or larger elements inside the Scroll View element than would otherwise fit into the space the Scroll View element 

takes up on the Canvas. The Scroll View element provides scroll bars that allow the user to scroll vertically 

and horizontally to view all the other elements within the window. 

• Tab Set widget: Creates a page element that holds sets of other elements and shows them one at a time. Users 

can navigate to each set by tapping tabs along the top of the Tab Set element -- similar to the way users click tabs 

at the top of a web page to see different "pages" of content. 

• View Set widget: Creates a page element that holds sets of other elements and shows each set one at a time. 

Users can navigate to the other sets by tapping dots along the bottom of the View Set element -- similar to the way 

users tap dots at the bottom of a mobile device's home screen to see different screens of content. 

The Layout and Navigation widgets let your group other page elements together, either as a collection of elements that 

are all visible on the page (such as in a Container, HBox, or VBox), or as sets of elements that users can navigate to by 

tabs (in a Tab Set) or dots (in a View Set). 

Click the Widgets tab at the top of the Library pane to show the Widgets pane in the Library. As shown in Figure 13-1 on 

page 311, you can then select Layout in the drop-down menu under the Widgets tab to see the Layout widgets, and select 

Navigation in the drop-down menu to see the Navigation widgets (or select All in the drop-down menu to see all widgets). 

Figure 13-1: Choosing Layout and Navigation widgets. 

- 311 -


Using the Container Widget 

The Container widget creates a rectangular area on the page that can hold other page elements, such as Label, Button, 

Text, Image, and Video elements. Container elements are useful for holding other elements so that you can copy and 

paste the entire Container element on another page without having to copy the individual elements. You can change the 

appearance of the Container element separately from the other elements and from the page itself. 

To place the widget on a page and create a Container element, drag the widget from the Layout section of the Widgets 

pane to the Canvas, as shown in Figure 13-1 on page 312. You can then resize, align, and arrange the element to fit your 

page design (for details, see "Working in the Project Editor" on page 154). You can also associate the Container element 

with an event and an action to be performed when the user interacts with the Container element. 

Figure 13-1: Placing a Container widget on the page (using a tracing image as a guide). 

After placing the Container element on the page, you can drag widgets from the Widgets pane, or assets from the Assets 

pane, into the Container element, as shown in Figure 13-2 on page 313. Each element or asset you add to the Container 

element appears as a child to the parent Container element in the Page Outline pane on the lower left side of the Project 

Editor. 

- 312 -


Figure 13-2: Placing a Label widget inside the Container element. 

To change the Container element's properties, click the element on the page, or click Container in the Page Outline pane. 

The Properties pane for the Container element appears on the right side of the Project Editor with the following tabs: 


197. 


to the element. These settings are applied to the entire Container element; to change the appearance settings for 

each element within the Container element, select each element first. For details, see "Changing Appearance Properties" 

on page 198. 

• The Layout tab lets you set the size of the entire Container element and its position on the page, and the amount of 

padding within the element. You can also constrain the proportions of the element so that the aspect ratio stays 

the same when freely resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214. 

• The Behavior tab lets you associate the Container element with an event and an action to be performed. See 


- 313 -


Using the 3D Stage Widget 

The 3D Stage widget creates a container area on the page that can hold other page elements, such as Label, Button, 

Text, Image, and Video elements. Using this widget you can transform two dimensional elements into three dimensional 

elements by dragging them into the 3D Stage element. The 3D Stage element provides "the appearance" that some parts 

of an element are near the viewer as they appear larger and some parts of an element are further from the viewer as 

they appear smaller. 

The 3D Stage widget's 3D Transform tab allows you to set Perspective and Perspective Origin properties collectively to all 

the elements that are included within the widget. In addition, for each element within the 3D Stage element, you can set 

its individual 3D properties, including setting different perspective point of origin, offset, rotation, and skew properties. 

You can change the appearance of the 3D Stage element separately from the other elements and from the page itself. 

You can also associate the 3D Stage element with an event and an action to be performed when the user interacts with 

the 3D Stage element. 

To place the widget on a page and create a 3D Stage element, drag the widget from the Layout section of the Widgets 

pane to the Canvas, as shown in Figure 13-1 on page 314. You can then resize, align, and arrange the element to fit your 

page design (for details, see "Working in the Project Editor" on page 154). 

Figure 13-1: Placing a 3D Stage widget on the page. 

Set the 3D Stage element's Perspective and Perspective Origin values, as shown in Figure 13-2 on page 315. 

- 314 -


Figure 13-2: Setting the 3D Transformations properties. 

After placing the 3D Stage element on the page, you can drag widgets from the Widgets pane, or assets from the Assets 

pane, into the 3D Stage element, as shown in Figure 13-3 on page 315. (Select the 3D Stage element before dragging the 

widget into it.) Each element or asset you add to the 3D Stage element appears as a child to the parent 3D Stage element 

in the Page Outline pane on the lower left side of the Project Editor. 

Figure 13-3: Placing a Button widget inside the 3D Stage element. 

- 315 -


After placing a widget inside a 3D Stage element, you can select the widget's 3D Transformations tab, on the Properties 

pane, and set the 3D properties for that individual element. Figure 13-4 on page 316 shows the 3D Transformations tab 

for a Button element. For more information about the 3D Transformations tab, see "Changing 3D Transformations 


Figure 13-4: Setting a Button element's 3D Transformations properties. 

Perspective Property 

Use the 3D Stage widget's Perspective property to align all the elements within the 3D Stage element to the same 

perspective. In this way each element shares the same 3D space. 

The Perspective's value determines the intensity of the 3D effect. Think of it as a distance from the viewer to the object. 

The greater the value, the further the distance, the less intense the visual effect. For example, the default 800px 

perspective value yields a subtle 3D effect, as if you are viewing an object from far away. A 100px perspective value 

produces a more intense 3D effect, as if you are viewing a massive object. 

You can change the perspective by moving the Perspective slider control to the right or the left. To intensify the 3D effect 

(the object looks closer), move the Perspective slider control to the left. To reduce the intensity of the 3D effect (the 

object looks far away), move the Perspective slider control to the right. 

- 316 -


Figure 13-5: Decreasing the Perspective Value to 20px to Intensify the 3D Effect. 

Perspective Origin Properties 

By default, the vanishing point for a 3D Stage element is positioned at the center of the element. The vanishing point is 

represented by a Perspective Origin X axis (horizontal axis) value of 50% and a Perspective Origin Y axis (vertical axis) 

vaule of 50%. The 50% Perspective Origin X and Perspective Origin Y values represent the midway points for the X and Y 

axises. (Think of an imaginary X and Y axis; a 50% value for X and a 50% value for Y is equivalent to the (0,0) value. 

The X and Y Perspective Origin values have a range from 0% to 100%.You can change the position of the vanishing point 

by changing the Perspective Origin values. Changing the X Perspective Origin moves the vanishing point along the X axis. 

A value 50 moves it to the right. Changing the Y Prespective Origin moves the 

vanishing point along the Y axis. A value 50 moves it to the up. 

The 3D Transformations properties for all elements within a 3D Stage element are based on the 3D Stage's Perspective 

and Perspective Origin values. For example, an element within the 3D Stage element uses the 3D Stage's Perspective 

Origin value as its starting point for evaluating its own perspective origin. If you keep the element at it default value, 

50%, then it will share the same vanishing point as the 3D Stage element, as shown with rectangle A in Figure 13-6 on 

page 318. 

- 317 -



If you change the element's Origin value, then you will offset its vanishing point from the 3D Stage element's vanishing 

point, as shown with rectangle B in Figure 13-7 on page 318. 

Figure 13-7:Changing Rectangle B's Origin X and Y values to offset its vanishing point. 

To change the 3D Stage element's properties, click the element on the page, or click 3D Stage in the Page Outline pane. 

The Properties pane for the 3D Stage element appears on the right side of the Project Editor with the following tabs: 


197. 


These settings are applied to the entire Container element; to change the appearance settings for each 

- 318 -


element within the Container element, select each element first. For details, see "Changing Appearance Properties" 

on page 198. 

• The Layout tab lets you set the size of the entire Container element and its position on the page. You can also constrain 

the proportions of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. 

For details, see "Changing Layout Properties" on page 214. 

• The 3D Transformations tab lets you set the Perspective and Perspective Origin properties. For details, see 

"Changing 3D Transformations Properties" on page 216. 

• The Behavior tab lets you associate the Container element with an event and an action to be performed. See 


- 319 -


Using the HBox Widget 

The HBox widget lets you create a horizontal box for laying out page elements. Each asset or widget you drag into the 

HBox is automatically placed horizontally in a row, to the right of the previous one. As you add more page elements, the 

HBox grows wider. 

You can set an offset (in pixels) between the elements inside the HBox, and change the appearance of the HBox 

separately from the other elements and from the page itself. 

To place the widget on a page and create an HBox element, drag the widget from the Layout tab of the Widgets pane to 

the Canvas, as shown in Figure 13-8 on page 320. You can then resize, align, and arrange the element to fit your page 

design (for details, see "Working in the Project Editor" on page 154). You can also associate the HBox element with an 

event and an action to be performed when the user interacts with the HBox element. 

Figure 13-8: Placing an HBox widget on a page. 

After placing the HBox widget on the page, you can drag other widgets from the Widgets pane, or assets from the Assets 

pane, into the HBox element, as shown in Figure 13-9 on page 321. 

- 320 -


Figure 13-9: Dragging Button widgets to the HBox element (with Spacing set to five pixels). 

Each element you add to the HBox element appears to the right of the previous element, and also appears as a child to 

the parent HBox element in the Page Outline pane on the lower left side of the Project Editor. You can change the order of 

the elements by clicking Bring Forward, Send Backwards, and so on (for details on arranging elements, see "Arranging 

and Overlapping Page Elements" on page 181). 

To change the HBox element's properties, click the element on the page, or click HBox in the Page Outline pane. The 

Properties pane for the HBox element appears on the right side of the Project Editor (refer to Figure 13-9 on page 321). 

To set the spacing in pixels between elements in the HBox, drag the Spacing slider in the General tab of the Properties 

pane — drag to the right to increase spacing, or to the left to reduce spacing. To align the elements vertically within the 

HBox element, choose Top, Middle, or Bottom in the Vertical Align drop-down menu. 

You can also customize the HBox element by changing properties in the Properties pane: 


197. 

• The Appearance tab lets you set the HBox element's background, border, and opacity, and add a reflection and 

shadow to the element. You can also set the roundness of the border's line style with the Roundness control. 

These settings are applied to the entire HBox element; to change the appearance settings for each widget element 

within the HBox element, select each element first. For details, see "Changing Appearance Properties" on page 

198. 

- 321 -


• The Layout tab lets you set the size of the entire HBox element and its position on the page, and the amount of padding 

within the element. You can also constrain the proportions of the element so that the aspect ratio stays the 

same when freely resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214. 

• The Behavior tab lets you associate the HBox element with an event and an action to be performed. See "Changing 


- 322 -


Using the VBox Widget 

The VBox widget lets you create a vertical box for laying out page elements. Each asset or widget you drag into the VBox 

is automatically placed vertically in a column, below the previous one. As you add more elements, the VBox grows taller. 

You can set an offset (in pixels) between the elements inside the VBox, and change the appearance of the VBox 

separately from the other elements and from the page itself. 

To place the widget on a page and create a VBox element, drag the widget from the Layout tab of the Widgets pane to the 

Canvas, as shown in Figure 13-10 on page 323. You can then resize, align, and arrange the element to fit your page 

design (for details, see "Working in the Project Editor" on page 154). 

Figure 13-10: Placing a VBox widget on a page. 

After placing the VBox widget on the page, you can drag other widgets from the Widgets pane, or assets from the Assets 

pane, into the VBox element, as shown in Figure 13-11 on page 324. 

- 323 -


Figure 13-11: Dragging Button widgets to the VBox element (with Spacing set to five pixels). 

Each element you add to the VBox appears below the previous element, and also appears as a child to the parent VBox 

element in the Page Outline pane on the lower left side of the Project Editor. 

To change the VBox element's properties, click the element on the page, or click VBox in the Page Outline pane. The 

Properties pane for the VBox element appears on the right side of the Project Editor (refer to Figure 13-11 on page 324). 

To set the spacing in pixels between elements in the VBox, drag the Spacing slider in the General tab of the Properties 

pane — drag to the right to increase spacing, or to the left to reduce spacing. To align the elements horizontally within the 

VBox element, choose Right, Middle, or Left in the Horizontal Align drop-down menu. 

You can also customize the VBox element by changing properties in the Properties pane: 


197. 

• The Appearance tab lets you set the VBox element's background, border, and opacity, and add a reflection and 

shadow to the element. You can also set the roundness of the border's line style with the Roundness control. 

These settings are applied to the entire VBox element; to change the appearance settings for each element within 

the VBox element, select each element first. For details, see "Changing Appearance Properties" on page 198. 

• The Layout tab lets you set the size of the entire VBox element and its position on the page, and the amount of padding 

within the element. You can also constrain the proportions of the element so that the aspect ratio stays the 

same when freely resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214. 

- 324 -


Using the Scroll View Widget 

The Scroll View widget creates a rectangular window on the page that can hold other page elements, such as Label, 

Button, Text, and Image elements. Scroll View elements are useful for displaying other elements that take up a lot of 

space, whether due to the size of the element or the number of the elements. It provides additional viewing space as you 

can fit more elements or larger elements inside the Scroll View element than would otherwise fit into the space the Scroll 

View element takes up on the Canvas. The Scroll View element provides scroll bars that allow the user to scroll vertically 

and horizontally to view the other elements within the window. For example, in Figure 13-1 on page 325 you cannot fully 

see the two image elements that are contained within the Scroll View element; however, when the mobile user views the 

page, they will also see scroll bars that allow them to scroll horizontally and vertically to view all the elements within the 

Scroll View window. You can change the appearance of the Scroll View element separately from the other elements and 

from the page itself. 

To place the widget on a page and create a Scroll View element, drag the widget from the Layout section of the Widgets 

pane to the Canvas. You can then resize, align, and arrange the element to fit your page design (for details, see "Working 

in the Project Editor" on page 154). You can also associate the Scroll View element with an event and an action to be 

performed when the user interacts with the Scroll View element. 

After placing the Scroll View element on the page, you can drag widgets from the Widgets pane, or assets from the Assets 

pane, into the Scroll View element, as shown in Figure 13-1 on page 325. Each element or asset you add to the Scroll 

View element appears as a child to the parent Scroll View element in the Page Outline pane on the lower left side of the 


Figure 13-1: Placing an image inside the Scroll View element 

- 325 -


To change the Scroll View element's properties, click the element on the page, or click Scroll View in the Page Outline 

pane. The Properties pane for the Scroll View element appears on the right side of the Project Editor with the following 

tabs: 

• The General tab lets you define the element's optional ID and choose to display scroll bars, and the scroll bar type 

(vertical, horizontal, or both). For details, see "Changing General Properties" on page 197. 

• The Appearance tab lets you set the element's background, border, and opacity, and add a shadow to the element. 

These settings are applied to the entire Scroll View element; to change the appearance settings for each element 

within the Scroll View element, select each element first. For details, see "Changing Appearance Properties" 

on page 198. 

• The Layout tab lets you set the size of the entire Scroll View element and its position on the page, and the amount 

of padding within the element. You can also constrain the proportions of the element so that the aspect ratio stays 

the same when freely resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214. 

• The Behavior tab lets you associate the Scroll View element with an event and an action to be performed. See 


- 326 -


Using the Tab Set Widget 

The Tab Set widget lets you create a page element that holds sets of other elements and shows them one at a time. Users 

can navigate to each set by tapping or clicking tabs along the top of the Tab Set element — similar to the way users click 

tabs at the top of a web page to see different "pages" of content. 

The Tab Set widget is a good choice when you need to provide sets of elements on a single page, with each set defined by 

a tab title. The tab titles should be short and fit on one row across the page. The elements in each set, or tab "page," can 

be any other page elements. Because Tab Sets can contain many tabs and therefore a lot of data (including images), this 

widget lets you choose Load on demand and Preload Images options at the tab level. For more information, see 

"Optimizing at the View or Tab Level" on page 141. 

To place the widget on a page and create a Tab Set element, drag the widget from the Navigation section of the Widgets 

pane to the Canvas. You can then resize, align, and arrange the element, as shown in Figure 13-2 on page 327, to fit your 

page design (for details, see "Working in the Project Editor" on page 154). You can also associate the Tab Set element 

with an event and an action to be performed when the user interacts with the Tab Set element. 

Figure 13-2: Placing a Tab Set widget into position on a page. 

To change the Tab Set element's properties, click the element on the page, or click Tab Set in the Page Outline pane on 

the lower left side of the Project Editor. The Properties pane for the Tab Set element appears on the right side of the 


After placing the Tab Set element on the page, you can add new tabs, give a title to each tab, and add assets from the 

Assets pane, or widgets from the Widgets pane to each tab. You can also rearrange the order of the tabs using the 

- 327 -


Arrange buttons on the Project Editor's top toolbar (for details, see "Arranging and Overlapping Page Elements" on page 

181). 

Note: To select the Tab Set widget on the canvas single-click on the Tab Set widget. To select a Tab, double-click the 

Tab Set widget; the last active Tab opens. The active Tab is highlighted. 

To add a Tab Set widget to a page: 

1. Select the tab title ("Tab 1") in the Page Outline pane, and then enter the text for the tab title in the Text field on the 

General tab of the Properties pane, as shown in Figure 13-3 on page 328. 

After typing the text, the text becomes the tab title at the top of the Tab Set element and in the Page Outline pane. 

Figure 13-3: Adding the title "Speed" to the first tab set. 

2. In the Page Outline, select the tab title "Speed" to select the tab, and drag one or more assets or widgets on to the 

Canvas. 

The elements appear in the Page Outline pane as child elements in relation to the "Speed" parent element, as 


- 328 -


Figure 13-4: Adding two image assets and a Text element to the first Tab of a Tab Set element. 

3. Resize the elements and enter text in to the Text element, as shown in Figure 13-3 on page 328. 

Figure 13-5: Resizing an image. 

4. (Optional) Change the appearance of the tab, "Speed," by selecting the tab title in the Page Outline pane, and then 

changing the Background, Border, and Opacity settings in the Appearance tab of the Properties pane (for details 

- 329 -


on changing the appearance, see "Changing Appearance Properties" on page 198). 

Figure 13-6: Changing the Tab's background color on the Appearance tab. 

These settings affect only the selected tab, not the entire Tab Set element. 

5. In the Page Outline, select the Tab Set and click the Add View (+) button in the Tab Set element's controller, as 


- 330 -


Figure 13-7: Clicking the Add View button to add the next tab to the Tab Set element. 

The next tab appears with a blank area below it, and another tab element child appears under the Tab Set parent 

in the Page Outline pane. 

6. Select the tab title ("Tab 2") in the Page Outline pane, and then enter the text for the tab title in the Text field inside 

the General tab of the Properties pane, as shown in Figure 13-5 on page 329. 

- 331 -


Figure 13-8: Entering the title "Features" for the second tab. 

After typing the text, the text becomes the second tab title at the top of the Tab Set element and in the 

Page Outline pane. 

7. Repeat Steps 2-4 for each new tab set. 

To rearrange the tab order: 

1. In the Page Outline, select the tab that you want to move. 

2. Depending on where you want to move the tab, select one of the Arrange buttons on the top toolbar (for details, 

see "Arranging and Overlapping Page Elements" on page 181). 

For example, you have three tabs named Cakes, Breads, and Buns, in that order, as show in Figure 13-9 on page 

333. You want to move the tab named Cakes, currently in the first tab position, to the last tab position. 

To move the Cakes tab to the last positon, in the Page Outline, select the Cakes tab and then click on the Send to 

Back button on the top toolbar, as show in Figure 13-9 on page 333. 

- 332 -


Figure 13-9: Selecting the Cake tab and clicking Send to Back on top toobar. 

The Cakes tab moves to the last position, as shown in Figure 13-10 on page 333. 

Figure 13-10: Cakes tab moves to the last tab position. 

- 333 -


To customize the entire Tab Set element, select the title of a tab set on the page, or select the title in the Page Outline 

pane, and then change properties in the Properties pane: 

• The General tab lets you define the entire Tab Set element's optional ID. The ID is applied to the entire Tab Set element; 

to change the ID for each set within the Tab Set element, select each individual set first. For details on using 

the ID, see "Changing General Properties" on page 197. In addition, you can choose the Tab Set transition setting 

and set up the tab level Load on demand and Preload Images settings. 

• The Appearance tab lets you set the Tab Set element's background, border, and opacity to the element. These settings 

are applied to the entire Tab Set element; to change the appearance settings for each set within the Tab Set 

element, select each individual set first. For details, see "Changing Appearance Properties" on page 198. 

• The Layout tab lets you set the size of the entire Tab Set element and its position on the page. You can also constrain 



• The Behavior tab lets you associate the Tab Set element with an event and an action to be performed. See "Changing 


- 334 -


Using the View Set Widget 

The View Set widget lets you create a page element that holds sets of other elements and shows each set one at a time. 

Users can navigate to the other sets by tapping or clicking dots along the bottom of the element — similar to the way 

users tap dots at the bottom of a mobile device's home screen to see different screens of content. 

You can also set a View Set element's playback to automatic playback with transitions of different views in any direction, 

so that you can create automatically rotating banners or page elements. 

The View Set widget is a good choice when you want to provide multiple sets of elements on a single page without titles. 

The elements in each set can be any other page elements. Because View Sets can contain many views and therefore a lot 

of data (including images), this widget lets you choose Load on demand and Preload Images options at the view level. For 

more information, see "Optimizing at the View or Tab Level" on page 141. 

To place the widget on a page and create a View Set element, drag the widget from the Navigation section of the Widgets 

pane to the Canvas. You can then resize, align, and arrange the element, as shown in Figure 13-11 on page 335, to fit 

your page design (for details, see "Working in the Project Editor" on page 154). You can also associate the View Set 

element with an event and an action to be performed when the user interacts with the View Set element. 

Figure 13-11: Placing a View Set widget on a page. 

To change the View Set element's properties, click the element on the page, or click View Set in the Page Outline pane on 

the lower left side of the Project Editor. The Properties pane for the View Set element appears on the right side of the 


- 335 -


After placing the View Set element on the page, you can add assets from the Assets pane, or widgets from the Widgets 

pane, to each set within the element. You can also rearrange the order of the views using the Arrange buttons on the 

Project Editor's top toolbar (for details, see "Arranging and Overlapping Page Elements" on page 181). 

Note: To select the View Set widget on the canvas single-click on the View Set widget. To select a View, double-click the 

View Set widget; the last active View opens. The active View is indicated by the highlighted dot. 

To add a View Set widget to a page: 

1. Drag one or more assets or widgets into the area above the dot in the View Set element, as shown in Figure 13-12 

on page 336. 

The elements appear in the Page Outline pane as child elements in relation to the View parent. 

Figure 13-12 : Adding an image asset to the first set of a View Set element. 

2. (Optional) Change the appearance of the view by selecting the area above the dot or selecting the child View 

under View Set in the Page Outline pane, and then changing the Background, Border, and Opacity settings in the 

Appearance tab of the View Properties pane (for details on changing the appearance, see "Changing Appearance 

Properties" on page 198). 

These settings affect only the selected view, not the entire View Set element. 

3. Select the View Set and click the Add View (+) button in the View Set element's controller, as shown in Figure 13- 

13 on page 337, to add the next set to the View Set element. 

- 336 -


The next dot appears with a blank area above it, and another View child appears under the View Set parent in the 

Page Outline pane. 

4. Drag one or more assets or widgets to the next set, as shown in Figure 13-14 on page 338. 

Figure 13-13: Clicking the Add View button to add the next set to the View Set element. 

- 337 -


Figure 13-14: Adding an image asset to the next set of a View Set element. 

5. (Optional) Change the appearance of the view set by selecting the area above the dot, or selecting the View child 

of the View Set parent in the Page Outline pane, and then changing the Background, Border, and Opacity settings 

in the Appearance tab of the View Properties pane (for details on changing the appearance, see "Changing 

Appearance Properties" on page 198). 

These settings affect only the selected view set, not the entire View Set element. 

6. Repeat Steps 3-5 for each new view set. 

To set the playback of the View Set element, choose one of the following from the Playback menu in the General tab of 

the View Set Properties pane: 

• Manual: Let the user tap or click the dots in the View Set element to navigate to other sets. 

• Automatic: Play the entire View Set element as a slideshow with transitions. 

• Manual & Automatic: Play the entire View Set element as a slideshow with transitions, while also enabling the user 

to tap or click the dots to navigate to other sets. 


After choosing Automatic from the Playback menu, you can drag the Delay slider to set the delay between view sets in 

milliseconds, or click the delay controller at the right end of the slider to set the number of milliseconds. (The Delay slider 

really determines how long the slide displays on screen before the next slide displays.) You can choose the type of 

transition for automatic playback in the Transition drop-down menu, as shown in Figure 13-15 on page 339. 

- 338 -


Figure 13-15: Choosing a transition for automatic playback of the View Set element. 

If you choose a Slide transition, you can also set the direction of the transition in the Direction drop-down menu, as shown 

in Figure 13-16 on page 340. 

- 339 -


Figure 13-16: Choosing a direction for the Slide transition for automatic playback of the View Set element. 

You can also specify the way the slide transition accelerates or decelerates, from start to finish, using the Acceleration 

drop-down menu, as shown in Figure 13-16 on page 340. The Acceleration options are: 

• Ease: The slide transition accelerates slowly and builds up to normal speed as it plays. 

• Ease In: The slide transition accelerates from slower at the start to normal speed at the end. 

• Ease Out: The slide transitions at normal speed at the start and then decelerates (from faster to slower) at the 

end. 

• Ease In Out: The slide transition accelerates from slower at the start to faster in the middle, and then decelerates 

(from faster to slower) at the end. 

• Linear: The slide transitions at the same speed throughout. 

- 340 -


Figure 13-17: Choosing a slide transition acceleration or deceleration rate for automatic playback of the View Set 

element. 

You can specify the slide transition duration, in seconds. While the Delay option determines how long the slide displays, 

the Duration determines the transition time between slide displays. 

- 341 -


Figure 13-18: Choosing a slide transition duration for automatic playback of the View Set element. 

To rearrange the view order: 

1. In the Page Outline, select the view that you want to move. 

2. Depending on where you want to move the view, select one of the Arrange buttons on the top toolbar (for details, 

see "Arranging and Overlapping Page Elements" on page 181). 

For example, you have three views named Cakes, Breads, and Buns, in that order, as show in Figure 13-19 on 

page 343Figure 13-18 on page 342. You want to move the view named Cakes, currently in the first view position, 

to the last view position. 

To move the Cakes view to the last positon, in the Page Outline, select the Cakes view and then click on the Send 

to Back button on the top toolbar, as show in Figure 13-19 on page 343. 

- 342 -


Figure 13-19: Selecting the Cake view and clicking Send to Back on top toobar. 

The Cakes view moves to the last position, as shown in Figure 13-20 on page 343. 

Figure 13-20: Cakes view moves to the last view position. 

- 343 -


You can also remove the dots from the View Set element by clicking the Show Dots option in the General tab of the 

Properties pane to turn it off. Turning off the Show Dots option is useful for automatic playback. 

To customize the entire View Set element, select the View Set element on the page, or select View Set in the Page Outline 

pane, and then change properties in the Properties pane: 

• The General tab lets you define the entire View Set element's optional ID. The ID is applied to the entire View Set 

element; to change the ID for each set within the View Set element, select each individual set first. For details on 

using the ID, see "Changing General Properties" on page 197. In addition, you can choose the View Set transition 

setting and set up the view level Load on demand and Preload Images settings. 

• The Appearance tab lets you set the View Set element's background, border, and opacity to the element. These 

settings are applied to the entire View Set element; to change the appearance settings for each set within the View 

Set element, select each individual set first. For details, see "Changing Appearance Properties" on page 198. 

• The Layout tab lets you set the size of the entire View Set element and its position on the page. You can also constrain 



• The Behavior tab lets you associate the View Set element with an event and an action to be performed. See 


- 344 -

CHAPTER 14: Using Social Media Widgets 


The Social Media widgets enable you to add social media elements to a page, such as a Facebook "Like" button, a Twitter 

"Follow me" button, and so on. This chapter covers the following topics: 

• "About Social Media Widgets" on page 346 

• "Using the Google +1 Widget " on page 348 

• "Using the Facebook Like Widget" on page 350 

• "Using the Tweet Button Widget" on page 352 

• "Using the Twitter Follow Widget" on page 354 

- 345 -


About Social Media Widgets 

5ml includes several Social Media widgets you can place on a page so that the user can share the page on the Facebook 

and Twitter social media sites: 

• Google +1 widget: Creates a Google +1 "Like" button on a page. You provide the URL of the page that the user 

can "+1" (and share on Google). You can choose the Google +1 element layout size; standard, small, medium, or 

tall. You can also choose to show the +1 counter. 

• Facebook Like widget: Creates a Facebook "Like" button in a standard layout that shows the faces of other Facebook 

friends who "like" your page, or in a layout that shows only a button with a counter of other "likes" or a box 

with a counter of other "likes". You provide the URL of the page that the user can "like" (and share on Facebook). 

You can choose a light or dark color scheme and a different font, and change the verb from "Like" to "Recommend". 

• Tweet Button widget: Creates a Twitter "Tweet" button with or without a counter of other tweet messages about 

your page, and with optional text for the tweet message to post on in the user's Twitter feed. You provide the 

URL that Twitter users share when they tap the Tweet button, and the usernames for two Twitter accounts that 

users can tap to follow. 

• Twitter Follow widget: Creates a "Follow Me on Twitter" button with a choice of button styles. You provide the 

username for the Twitter account that users follow as a result of tapping the button. 

Click the Widgets tab at the top of the Library pane to show the Widgets pane in the Library. You can then select Social 

Media in the drop-down menu under the Widgets tab, as shown in Figure 14-1 on page 346 (or select All in the drop-down 

menu to see all widgets). 

Figure 14-1 : Selecting the Social Media widgets in the Widgets pane of the Library. 

To place a widget on a page and create an element from it, drag the widget from the Widgets pane to the Canvas. You 

can then resize, align, and arrange the element to fit your ad page design (for details, see "Working in the Project Editor" 

- 346 -


on page 154). You can also change the element's properties in the Properties pane -- for details, see "Customizing Page 

Elements" on page 194 

- 347 -


Using the Google +1 Widget 

The Google +1 widget lets you place a Google +1 "Like" button on a page. You provide the URL of the page that the user 

can "+1" (and share on Google). You can choose the Google +1 element layout size; standard, small, medium, or tall. 

You can also choose to show the +1 counter. 

To place the widget on a page and create an element from it, drag the widget from the Widgets pane to the Canvas, as 



Figure 14-2: Placing a Google +1 widget on a page in the Canvas. 

To change the Google +1 element's properties, click the element on the page or select it in the Page Outline pane. The 

Properties pane for the element appears on the right side of the Project Editor. You can then set the properties in the 

General tab of the Properties pane: 

1. Enter the URL in the URL To +1 field, which is underneath the ID field. 

2. Choose one of the following layout sizes (shown with the counter) from the Size drop-down menu underneath the 

URL To +1 field: 

Size 

Image 

Standard 

Small 

- 348 -


Size 

Image 

Medium 

Tall 

3. Select the Count checkbox to display the +1 counter. 

You can also customize the Google +1 element by changing properties in the Properties pane: 


197. 






- 349 -


Using the Facebook Like Widget 

The Facebook Like widget lets you place a Facebook "Like" button on a page. You can choose a standard layout that 

shows the faces of other Facebook friends who "like" the page, or a layout that shows only a button with a counter of 

other "likes" or a box with a counter of other "likes". 

You provide the URL of the page that the user can "like" (and share on Facebook). You can choose a light or dark color 

scheme and a different font, and change the verb from "Like" to "Recommend". 




Figure 14-3: Placing a Facebook Like widget on a page in the Canvas. 

To change the Facebook Like element's properties, click the element on the page or select it in the Page Outline pane. 

The Properties pane for the element appears on the right side of the Project Editor. You can then set the properties in the 

General tab of the Properties pane: 

1. Enter the URL in the URL to Like field, which is underneath the ID field. 

2. Choose one of the following layout styles from the Layout Style drop-down menu underneath the URL to Like field: 

• Standard: The standard layout (refer to Figure 14-3 on page 350) displays the Like button, the counter 

(with a Facebook icon), and a "Sign up" link for non-Facebook users. You can also click the Show Faces 

option to turn on the display of faces of the user's Facebook friends who have also liked this URL. 

- 350 -


• Button Count: The Button Count layout shows only the Facebook Like button and the counter. 

• Box Count: The Box Count layout shows the Facebook Like button and the counter in a separate box. 

3. Choose a color scheme for the Facebook Like widget element (either Light or Dark) in the Color Scheme dropdown 

menu underneath the Layout Style menu. 

4. Choose the font for the button and "Sign up" link in the Font drop-down menu. 

5. Choose the verb to use (either "Like" or "Recommend") in the Verb To Display drop-down menu. 

You can also customize the Facebook Like element by changing properties in the Properties pane: 


197. 






- 351 -


Using the Tweet Button Widget 

The Tweet Button widget lets you place a "Tweet" button on a page, with or without a counter of other tweet messages 

about the page, and with optional text for the tweet message to post in the user's Twitter feed. 

You provide the URL of the page that Twitter users share when they tap or click the Tweet button, and the usernames for 

two Twitter accounts that users can tap or click to follow. 




Figure 14-4: Placing a Tweet Button widget on a page in the Canvas. 

To change the Tweet Button element's properties, click the element on the page or select it in the Page Outline pane. The 

Properties pane for the Tweet Button element appears on the right side of the Project Editor. You can then set the 

properties in the General tab of the Properties pane: 

1. Enter the URL of the page in the URL to Share field, which is underneath the ID field. 

2. Choose one of the following display types from the Display Type drop-down menu underneath the URL to Share 

field: 

• Horizontal Count: Displays the Tweet button and counter in a horizontal layout (refer to Figure 14-4 on 

page 352). 

• Vertical Count: Displays the Tweet button and counter in a vertical layout. 

• No Count: Displays the Tweet button without a counter. 

- 352 -


3. Enter the optional text for the tweet message to be posted in the user's Twitter stream. 

4. Enter up to two optional Twitter accounts that the user can follow. 

You can also customize the Tweet Button element by changing properties in the Properties pane: 

• The General tab lets you define the Tweet Button element's optional ID. For details, see "Changing General Properties" 

on page 197. 






- 353 -


Using the Twitter Follow Widget 

The Twitter Follow widget lets you place a "Follow Me on Twitter" button on a page, with a choice of three button styles. 

You provide the username for the Twitter account that users follow as a result of tapping or clicking the button. 




Figure 14-5: Placing a Twitter Follow widget on a page in the Canvas. 

To change the Twitter Follow element's properties, click the element on the page or select it in the Page Outline pane. 

The Properties pane for the Twitter Follow element appears on the right side of the Project Editor. You can then set the 

properties in the General tab of the Properties pane: 

1. Enter the username for the Twitter account that the user can follow into the Twitter Username field, which is underneath 

the ID field. 

2. Click one of the three button styles for the "Follow Me on Twitter" button in the Button Styles subsection underneath 

the Twitter Username field. 

You can also customize the Twitter Follow element by changing properties in the Properties pane: 

• The General tab lets you define the Twitter Follow element's optional ID. For details, see "Changing General Properties" 

on page 197. 



- 354 -





- 355 -

CHAPTER 15: Using the Map View Widget 


The Map View widget lets you place an interactive map on a page. This chapter covers the following topics: 

• "About the Map View Widget" on page 357 

• "Using the Map View Widget" on page 358 

- 356 -


About the Map View Widget 

5ml includes the Map View widget so you can include an interactive map (Google map) in your project: 

• Map View widget: Creates a map view on a page to direct viewers to one or more locations. 

Click the Widgets tab at the top of the Library pane to show the Widgets pane. You can then select Other in the drop-down 

menu under the Widgets tab, as shown in Figure 15-1 on page 357, to see the Map View widget (or select All in the dropdown 

menu to see all widgets). 

Figure 15-1: Choosing the Map View widget. 

- 357 -


Using the Map View Widget 

The Map View widget lets you create an interactive map (Google map) on a page. You set the map's center location and 

add map markers for the various locations to which you want to direct the viewer. 

To place a Map View element on a page, drag the widget from the Other section of the Widgets pane to the Canvas, as 



Figure 15-2: Placing a Map View widget on a page. 

To change the Map View element's properties, click the element on the page, or click Map View in the Page Outline pane. 

The Properties pane for the Map View element appears on the right side of the Project Editor (refer to Figure 15-3 on 

page 359). 

To configure the map view: 

1. In the Map Center field on the Properties' General tab, enter a place name, location, or address to set the map's 

center, as shown in Figure 15-3 on page 359. (You can adjust the map view by double-clicking on the map image, 

and when the hand icon appears, move the map image in the direction you want. You can also center the map 

based on a marker, which is discussed later.) 

As you enter a place name, location, or address, the Map Center field's smart search displays possible locations to 

choose from. When the location is set the Latitude and Longitude fields automatically populate with the location's 

- 358 -


latitude and longitude values. Alternatively, you can enter the location's latitude and longitude values directly into 

the fields. 

Figure 15-3: Adding a location to set the map's center location. 

2. To choose the type of map to display, from the Map Type menu, select one of the following options: 

• Roadmap 

• Hybrid 

• Satellite 

• Terrain 

3. To increase the map detail level move the Zoom Level slider to the right. To decrease the map detail level move 

the Zoom Level slider to the left. 

4. To display navigation controls on the map view, for example, zoom in and zoom out controls, street level view, 

and panning controls, select the Show Navigation Controls checkbox. (Selected by default.) 

5. To display a menu on the map view with map type options, for example, satellite or terrain, select the Show Map 

Types checkbox. 

6. To add a location marker to the map, click the plus icon ( ) below the Markers field, as shown in Figure 15-4 on 

page 360. 

- 359 -


Figure 15-4: Adding a location marker. 

In the Title field, enter a name for the marker, and in the Location field, enter a place name, location, or address. 

The marker's Latitude and Longitude fields populate automatically with the location marker's latitude and 

longitude values. Click Add. 

7. To add information about the marker, which displays on the map when the mobile user hovers over the marker, 

select the marker in the Markers list and select the Enable Info Window checkbox. Click Edit Content to open the 

HTML Editor and enter content about the maker. To see a preview of the content, click Show Window. 

8. To add another location marker, click the plus icon ( ) again. 

You can customize the Map View element by changing properties in the Properties pane: 

• The General tab lets you define the element's optional ID, set the map location, the type of map, the zoom level 

and add location markers. For details, see "Changing General Properties" on page 197. 

• The Appearance tab lets you set the Map View element's border and opacity, and add a reflection and shadow to 

the element. For details, see "Changing Appearance Properties" on page 198. 

• The Layout tab lets you set the size of the Map View element and its position on the page. You can also constrain 

the proportions of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For 

details, see "Changing Layout Properties" on page 214. 

• The Behavior tab lets you associate the Map View element with an event and an action to be performed. See 


- 360 -


- 361 -

CHAPTER 16: Using Web View, HTML, and HTML5 Widgets 

CHAPTER 16: Using Web View, HTML, and HTML5 

Widgets 

The Web View widget lets you place a web page view on a page, the HTML widget lets you add HTML code to a page, 

and the HTML5 widget lets you place the HTML5 logo on a page with icons showing the supported features of your site. 


• "About the Web View, HTML, and HTML5 Widgets" on page 363 

• "Using the Web View Widget" on page 364 

• "Using the HTML Widget" on page 366 

• "Using the HTML5 Widget" on page 369 

- 362 -


About the Web View, HTML, and HTML5 Widgets 

5ml includes the following widgets to create page elements in your project: 

• Web View widget: Creates a view on a page that displays an existing web page. 

• HTML widget: Creates a HTML element that lets you add HTML code to a page. 

• HTML5 widget: Creates a HTML5 logo element that includes icons representing the supported features of your 

site. 

Click the Widgets tab at the top of the Library pane to show the Widgets pane. You can then select External in the dropdown 

menu under the Widgets tab, as shown in Figure 16-1 on page 363, to see the Web View widget, or Other in the 

drop-down menu to see the HTML and HTML5 widgets (or select All in the drop-down menu to see all widgets). 

Figure 16-1: Choosing the External and Other widgets. 

- 363 -


Using the Web View Widget 

The Web View widget lets you create a view on a page that displays an existing web page. You enter the URL and set the 

scrolling option for the web page. 

To place a Web View element on a page, drag the widget from the External section of the Widgets pane to the Canvas, as 



Figure 16-2: Placing a Web View widget on a page. 

After placing the Web View widget on the page, you can enter the full URL for the web page in the Source field of the 

General tab of the Properties pane on the right side of the Project Editor, as shown in Figure 16-3 on page 365. You can 

also use the Scrolling drop-down menu to choose: 

• Yes: Include scroll bars 

• No: Not include scroll bars 

• Auto: Include scroll bars only if the web page is not fully contained within the view. 

- 364 -


Figure 16-3: Adding a URL for the web page to use in the Web View element (with Scrolling set to Yes). 

To change the Web View element's properties, click the element on the page, or click Web View in the Page Outline pane. 

The Properties pane for the Web View element appears on the right side of the Project Editor (refer to Figure 16-3 on 

page 365). You can customize the Web View element by changing properties in the Properties pane: 


197. 

• The Appearance tab lets you set the Web View element's background, border, and opacity, and add a reflection 

and shadow to the element. For details, see "Changing Appearance Properties" on page 198. 

• The Layout tab lets you set the size of the Web View element and its position on the page. You can also constrain 

the proportions of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For 


- 365 -


Using the HTML Widget 

The HTML widget lets you create a HTML element on a page into which you can directly enter HTML code. The 

HTML widget can take up the whole page or just a segment of the page. 

To place a HTML element on a page, drag the widget from the Other section of the Widgets pane to the Canvas, as shown 

in Figure 16-4 on page 366. You can then resize, align, and arrange the element to fit your page design (for details, see 

"Working in the Project Editor" on page 154). 

Figure 16-4: Placing a HTML widget on a page 

After placing the HTML widget on the page, you can open the HTML Editor to enter the HTML code. On the General tab of 

the Properties pane, on the right side of the Project Editor, as shown in Figure 16-5 on page 367, click Open HTML Editor. 

For details about which HTML tags are not supported by the HTML widget, see "About Unsupported HTML Tags" on page 

1. 

- 366 -


Figure 16-5: Entering HTML code into the HTML element's HTML Editor 

Enter the HTML code, and then click Done. The HTML Editor closes and the HTML code renders on the Canvas. 

Figure 16-6: Viewing the HTML code on the Canvas 

To change the HTML element's properties, click the element on the page, or click HTML in the Page Outline pane. The 

Properties pane for the HTML element appears on the right side of the Project Editor (refer to Figure 16-5 on page 367). 

You can customize the HTML element by changing properties in the Properties pane: 

- 367 -


• The General tab lets you define the element's optional ID and the Open HTML Editor button opens the HTML Editor 

where you can enter HTML code. For details, see "Changing General Properties" on page 197. 

• The Appearance tab lets you set the HTML element's background, border, and opacity, and add a reflection and 

shadow to the element. For details, see "Changing Appearance Properties" on page 198. 

• The Layout tab lets you set the size of the HTML element and its position on the page. You can also constrain the 

proportions of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For 


- 368 -


Using the HTML5 Widget 

The HTML5 widget lets you create an HTML5 logo element on a page that includes icons representing the supported 

features of your site. You use the HTML5 widget to highlight specific capabilities, such as offline access and storage, 3D 

graphics and effects, CSS3 style sheet control, and real-time connectivity. 

To place the HTML5 element on a page, drag the widget from the Other section of the Widgets pane to the Canvas, as 

shown in Figure 16-7 on page 369. You can then align and arrange the element to fit your page design (for details, see 

"Working in the Project Editor" on page 154). 

Figure 16-7: Placing an HTML5 widget on a page. 

After placing the HTML5 widget on the page, you can change the HTML5 element's properties by clicking the element on 

the page, or clicking HTML5 in the Page Outline pane. The Properties pane for the HTML5 element appears on the right 

side of the Project Editor, as shown in Figure 16-8 on page 370. You can choose which features of your site to highlight by 

selecting individual Supporting Elements in the General tab of the Properties pane: 

• Connectivity / Real Time: Uses Web Sockets and server-sent events to provide more efficient connectivity for 

real-time chats, faster games, and better communication. 

• CSS3 / Styling: Uses CSS3 to deliver a wide range of stylization and effects, and Web Open Font Format (WOFF) 

for typographic flexibility. 

- 369 -


• Device Access: Uses rich, device-aware features including geolocation, access to audio/video input from microphones 

and cameras, local data such as contacts and events, and tilt orientation. 

• Graphics, 3D & Effects: Uses SVG, Canvas, WebGL, and CSS3 3D features to provide stunning visuals natively rendered 

in the browser. 

• Multimedia: Uses audio and video. 

• Performance & Integration: Uses techniques and technologies such as Web Workers and XMLHttpRequest 2 to 

make Web Apps and dynamic web content display faster. 

• Semantics: Provides meaning for structured data with a rich set of tags and microformats. 

• Offline & Storage: Uses the HTML5 app cache, local storage, indexed databases, and the File API specifications to 

start web apps faster and work without an Internet connection. 

You can also use the Orientation drop-down menu above the Supporting Elements to choose Horizontal for a horizontal 

orientation of the logo and icons, or Vertical for a vertical orientation. 

Figure 16-8: Choosing the Supporting Elements for the HTML5 element to highlight features of the site. 

You can customize the HTML5 element by changing its properties in the Properties pane: 


197. 



- 370 -





- 371 -

CHAPTER 17: Enabling Native Device Functionality 

CHAPTER 17: Enabling Native Device Functionality 

5ml ad projects support native device functionality. This feature is only for ad projects that will serve as in-application 

advertisements via the Mobclix ad exchange. Examples of native device functionality are; accelerometer, shake, device 

orientation, geolocation, and vibration. Native device functionality is supported through the ad exchange/ad network SDK 

(Mobclix iOS SDK) and by adding custom scripting or the event/action framework to a page. 


• "Enabling Native Device Functionality for a Page" on page 373 

- 372 -


Enabling Native Device Functionality for a Page 

After you enable the project to support native device functionality, you can add native device functionality to a page. 

To enable native device functionality on a page: 

1. Open a project page, and on the Page Outline, select the page (or a page element). 

2. On the Properties pane select the Behavior tab. 

Figure 17-1: Enabling native device functionality on the Behavior tab 

3. Add a native device event and action. For example, from the Event drop-down menu, select the ondevicemotion 

event, and from the Action drop-down menu, select the Vibrate Device action. 

4. Click Apply. The new behavior displays in the Behavior list. 

For more information about adding event/action behaviors and a list of supported native device behaviors, see 

"Changing Behavior Properties" on page 223. For more information about the native device functionality 

supported by 5ml, see "About Events" on page 224. 

Note: To view and test native device functionality you must preview the page using the Preview as Mobile App 

option; see "Previewing a Project" on page 120. Native device functionality does not work on browsers. 

- 373 -

CHAPTER 18: Adding Site Tracking 


5ml lets you add the capability to track pages and page elements in order to measure site traffic and user behavior on the 

site. This chapter covers the following topics: 

• "About Tracking" on page 375 

• "Enabling Google Analytics" on page 376 

• "Tracking Pages" on page 378 

• "Tracking Page Elements" on page 379 

- 374 -


About Tracking 

5ml lets you add the capability to track pages and page elements in order to measure site traffic and user behavior on the 

site. With tracking capabilities, you can determine which pages drive the most page views on your site, and which groups 

of visitors did something important on your site (such as click on a link for more information, or click to purchase 

something). 

To add tracking to your project, first enable tracking for your project on the My Projects' Settings page, and enter the site 

profile ID. For details, see "Enabling Google Analytics" on page 376. 

After enabling tracking for the project, you can track each page in the project, see "Tracking Pages" on page 378, and 

also track individual page elements in the project, see "Tracking Page Elements" on page 379. 

- 375 -


Enabling Google Analytics 

5ml lets you add the capability to track performance and user behavior for each page in a project, and for individual page 

elements, using Google Analytics (www.google.com/analytics). 

Note: Before you can enable tracking for 5ml projects, you need a valid Google Analytics profile. 

To enable a project to use Google Analytics for tracking: 




Figure 18-1: Opening the project settings page. 

2. Click on the Project Menu icon to open the menu, and select Settings. 

The Settings page appears. 

3. Scroll down the page to the Analytics section, and select the Google Analyitcs Settings checkbox. 

- 376 -


Figure 18-2: Selecting the Google Analytics Settings checkbox 

4. In the Google Analytics Settings field, enter the Google Analytics profile ID. 

You can find more about how to create and manage Google Analytics accounts at 

http://www.google.com/analytics/learn/index.html. Currently, 5ml supports only page and page elementgenerated 

event tracking. 

5. Click Apply. When the confirmation diaglog appears, click OK. 

6. After enabling analytics for the project, you can open the project (see "Opening a Project" on page 112) and select 

pages and page elements to track. See "Tracking Pages" on page 378 and "Tracking Page Elements" on page 379 

for details. 

- 377 -


Tracking Pages 

After enabling tracking for the project (see "About Tracking" on page 375), you can track each page in the project, and 

also track individual page elements in the project, see "Tracking Page Elements" on page 379. 

To track an entire page: 

1. Open the page in the Project Editor (see "Opening a Project" on page 112). 

2. Select the entire page by clicking Page at the top of the Page Outline. 

3. On the General tab of the Properties pane, click the Track in Analytics checkbox, as shown in Figure 18-3 on page 

378. 

The tracking ID for the entire page appears in a text field below the Track in Analytics option. You can change the 

tracking ID by clicking in this field and entering another tracking ID. 

Figure 18-3: Tracking an entire page. 

- 378 -


Tracking Page Elements 

To track a page element, you must first enable project tracking, see "About Tracking" on page 375, and page tracking, 

see "Tracking Pages" on page 378. 

To track any single element on the page: 

1. Select the page element, and then on the General tab of the Properties pane, click the Track in Analytics checkbox, 


Figure 18-1: Selecting the Track in Analytics checkbox. 

You can control some basic attribute values for each event that Google Analytics tracks (object, action, label). A 

5ml user can modify: 

• Label–Enter text to change the string reported to Google Analytics for the event label. 

• Category–Enter text to change the string reported to Google Analytics for the event object. 

• Event Name–Enter text to change the string reported to Google Analytics for event action. 

For more information about Google Analytics event tracking semantics, see 

https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide. 

2. You need to add an event and action to the page element to determine what to track; see "Changing Behavior 


- 379 -


For example, you could use an Image element on a page to go to another page. To track when a user clicks on the 

image to go to that page, you select the Image element's Track in analytics checkbox and on the Behavior tab you 

add the onclick event and choose the Show Page action. 

Note: Tracking an Audio element does not require an event/action behavior. Instead, on the Audio element's 

General tab there are three additional check boxes that determine the behavior to track. 

Figure 18-2: Adding an event/action to the selected page element to track. 

You can enable tracking for the following page elements: 

• Button 

• Label 

• Photo Gallery 

• Image 

• Audio 

• 360 

• Frame Set 

• Container 

• Tab Set, and Tab 

• View Set 

- 380 -

CHAPTER 19: Deploying Your Project 


5ml enables you to deploy your project in two ways. You can publish the project within the 5ml-hosted environment or 

you can export the project and deploy it on a web server external to the 5ml environment. This chapter covers the 

following topics: 

• "Publishing a Project" on page 382 

• "Exporting a Project" on page 385 

- 381 -


Publishing a Project 

You publish a project when you want to host it on 5ml. (To publish your project in an environment external to 5ml, see 

"Exporting a Project" on page 385.) 

To publish a project: 




2. Click on the Project Menu icon to open the menu, and select Publish. 

Figure 19-1: Publishing a project using the project menu. 

The Publishing dialog appears. 

3. Click Publish. 

- 382 -


Figure 19-2: Publishing the project 

The project publishing process starts and might take up to 15 or 20 minutes, depending on the size of your project. 

To check if a project is published: 


The Project pages appear to the right. 

2. Click the Check Status button located above the project pages. 

Figure 19-3: Checking if a project is published. 

• If the publishing process is not yet complete, a status message appears and requests that you try again 

later. 

- 383 -


Figure 19-4: Publishing status message; still publishing. 

• If the publishing process is complete, a status message appears with the last published date and time for 

the project, and the project's published URL appears to the right. 

Figure 19-5: Published project with URL. 

3. To capture the published project's URL, click on the URL. A browser opens, and you can copy the URL from the 

browser's address field. 

- 384 -


Exporting a Project 

You export a project when you want to host it on an external (to 5ml) Web server. You can export the entire project from 

the My Projects page to the folder that your browser uses to download files. The project is exported as a standalone set 

of files, in the form of a compressed "zip" file (with the ".zip" filename extension) that can be unzipped and then hosted on 

a web server. The zip file uses the project name. 

Note: Before exporting a project, you should consider adding the external host server's URL as some functionality 

depends on the full URL path. For more information, see "Export" on page 109. 

To export a project your user account needs to have the export feature enabled. To enable the export feature, contact 

your 5ml representative. 

To export a project: 





Figure 19-6: Exporting a project using the project menu. 

3. In the File Download dialog that appears, click Save to save the downloaded zip file, or Open to save the zip file 

and then open it. (Or follow your particular browser's prompts.) 

To learn how to host your exported project on a server, see "Deploying Your Project" on page 381. 

- 385 -

Velti UK 

4th Floor, Bastille Court 

2 Paris Garden 

London, SE1 8ND, UK 

Tel: + 44 (0) 20 7633 5000 

Fax: +44 (0) 20 7633 5001 

Velti Greece 

44 Kifissias Ave. 151 25 

Marousi, Athens 

Greece 

Tel: +30 210 637 8800 

Fax: +30 210 637 8888 

www.velti.com 

info@velti.com 

London | New York | San Francisco | Boston | Athens | Madrid | Sofia | Nicosia | 

Moscow | Dubai | New Delhi | Mumbai | Beijing |Shanghai 

- 386 -

5ml User's Guide

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?