18.02.2015 Views

5ml User's Guide

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

mGage Messaging Administration User’s <strong>Guide</strong><br />

<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

© 2010-2011 Velti - All rights reserved 1


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

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

whole or in part, without the express consent of Velti ® .<br />

© Velti ® 2011 All rights reserved.<br />

- 2 -


About This <strong>Guide</strong><br />

About This <strong>Guide</strong><br />

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

This guide is organized as follows:<br />

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

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

• Chapter 3: <strong>5ml</strong> Tutorial — provides an overview of designing a mobile project using <strong>5ml</strong>.<br />

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

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

improve the mobile user experience.<br />

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

projects.<br />

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

your pages.<br />

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

in the Properties pane.<br />

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

for example, Text Input, Checkbox, and List Menu.<br />

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

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

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

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

Tab Set and View Set widgets.<br />

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

Twitter Follow widgets.<br />

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

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

widgets.<br />

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

accelerometer, shake, device orientation, geolocation, and vibration, using events and actions.<br />

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

measure site traffic and user behavior on the site.<br />

- 3 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

transfer them to an external web server or by publishing the project within the <strong>5ml</strong> environment.<br />

- 4 -


Table of Contents<br />

Table of Contents<br />

About This <strong>Guide</strong> 3<br />

Table of Contents 5<br />

CHAPTER 1: Introduction to <strong>5ml</strong> 9<br />

About <strong>5ml</strong> 10<br />

How <strong>5ml</strong> Works 11<br />

First Look at <strong>5ml</strong> 12<br />

CHAPTER 2: About Administering Accounts 15<br />

About Brands 15<br />

About User Accounts 15<br />

Adding a Brand 16<br />

Editing a Brand 17<br />

Disabling a Brand 18<br />

Adding a User Account 19<br />

Editing a User Account 21<br />

Changing a User Account Password 23<br />

Disabling a User Account 26<br />

Deleting a User Account 27<br />

CHAPTER 3: <strong>5ml</strong> Tutorial 28<br />

Getting Started 29<br />

Creating a New Project 30<br />

Organizing Your Assets 32<br />

Adding a Tracing Image 37<br />

Changing the Page Background 40<br />

Adding Text to the Page 43<br />

Adding a 360-degree View 47<br />

Adding and Modifying Images 53<br />

Adding Shapes and Layout Elements 60<br />

Saving the Page 69<br />

Creating a Second Page 70<br />

Creating a Form 71<br />

Adding a Gallery with Captions 75<br />

Adding a Video 80<br />

Adding a Social Media Widget 83<br />

Adding Navigation Links and Transitions 85<br />

Previewing the Page 90<br />

CHAPTER 4: Organizing Projects 91<br />

About the My Projects Page 92<br />

Adding a New Project 94<br />

Importing a Project 97<br />

- 5 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Duplicating a Project 100<br />

Changing Project Settings 102<br />

Showing Pages in a Project 111<br />

Opening a Project 112<br />

Adding a Page to a Project 113<br />

Duplicating a Page in a Project 114<br />

Setting a Project's Home Page 116<br />

Deleting a Page From a Project 118<br />

Deleting a Project 119<br />

Previewing a Project 120<br />

Publishing a Project 123<br />

Exporting a Project 126<br />

Backing Up a Project 127<br />

Restoring a Project 129<br />

CHAPTER 5: Optimizing Projects 132<br />

About Optimizing Projects 133<br />

Optimizing at the Project Level 134<br />

Optimizing at the Page Level 138<br />

Optimizing at the View or Tab Level 141<br />

CHAPTER 6: Importing and Managing Assets 143<br />

Accessing the Library Pane 144<br />

Creating Folders 146<br />

Importing Images 149<br />

Importing Audio 151<br />

Importing Video 152<br />

Deleting Assets 153<br />

CHAPTER 7: Working in the Project Editor 154<br />

About the Project Editor 155<br />

Adding a Page in the Project Editor 157<br />

Using a Tracing Image 158<br />

Changing Page Properties 160<br />

Placing Elements on a Page 168<br />

Resizing Page Elements 171<br />

Aligning Page Elements 175<br />

Arranging and Overlapping Page Elements 181<br />

Showing and Hiding Page Elements 184<br />

Locking and Unlocking Page Elements 185<br />

Rotating Page Elements 186<br />

Copying, Pasting, and Deleting Page Elements 187<br />

Opening and Closing Pages in the Canvas 189<br />

Saving Pages 190<br />

Previewing Pages From the Canvas 191<br />

- 6 -


Table of Contents<br />

Canvas Viewing Options 192<br />

CHAPTER 8: Customizing Page Elements 194<br />

Using the Properties Pane 195<br />

Changing General Properties 197<br />

Changing Appearance Properties 198<br />

Changing Text Properties 208<br />

Changing Layout Properties 214<br />

Changing 3D Transformations Properties 216<br />

Changing Behavior Properties 223<br />

Using the Advanced Properties Pane 232<br />

CHAPTER 9: Using Common Widgets 234<br />

About Common Widgets 235<br />

Using the Text Widget 237<br />

Using the Label Widget 239<br />

Using the Button Widget 241<br />

Using the Text Input Widget 243<br />

Using the Text Area Widget 245<br />

Using the Checkbox Widget 247<br />

Using the Radio Button Widget 249<br />

Using the List Menu Widget 251<br />

Using the Password Input Widget 253<br />

CHAPTER 10: Using Shape Widgets 255<br />

About Shape Widgets 256<br />

Using the Rectangle Widget 257<br />

Using the Ellipsis Widget 258<br />

Using the Triangle Widget 259<br />

CHAPTER 11: Using Media Widgets 260<br />

About Media Widgets 261<br />

Using the Image Widget 263<br />

Using the Gallery Widget 265<br />

Using the Audio Widget 278<br />

Using the Video Widget 281<br />

Using the YouTube Widget 285<br />

CHAPTER 12: Using Effects and Animation Widgets 287<br />

About Effects and Animation Widgets 288<br />

Using the 360 Widget 289<br />

Using the Frameset Widget 297<br />

Using the Particles Widget 304<br />

CHAPTER 13: Using Layout and Navigation Widgets 310<br />

About Layout and Navigation Widgets 311<br />

Using the Container Widget 312<br />

- 7 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the 3D Stage Widget 314<br />

Using the HBox Widget 320<br />

Using the VBox Widget 323<br />

Using the Scroll View Widget 325<br />

Using the Tab Set Widget 327<br />

Using the View Set Widget 335<br />

CHAPTER 14: Using Social Media Widgets 345<br />

About Social Media Widgets 346<br />

Using the Google +1 Widget 348<br />

Using the Facebook Like Widget 350<br />

Using the Tweet Button Widget 352<br />

Using the Twitter Follow Widget 354<br />

CHAPTER 15: Using the Map View Widget 356<br />

About the Map View Widget 357<br />

Using the Map View Widget 358<br />

CHAPTER 16: Using Web View, HTML, and HTML5 Widgets 362<br />

About the Web View, HTML, and HTML5 Widgets 363<br />

Using the Web View Widget 364<br />

Using the HTML Widget 366<br />

Using the HTML5 Widget 369<br />

CHAPTER 17: Enabling Native Device Functionality 372<br />

Enabling Native Device Functionality for a Page 373<br />

CHAPTER 18: Adding Site Tracking 374<br />

About Tracking 375<br />

Enabling Google Analytics 376<br />

Tracking Pages 378<br />

Tracking Page Elements 379<br />

CHAPTER 19: Deploying Your Project 381<br />

Publishing a Project 382<br />

Exporting a Project 385<br />

- 8 -


CHAPTER 1: Introduction to <strong>5ml</strong><br />

CHAPTER 1: Introduction to <strong>5ml</strong><br />

This chapter introduces <strong>5ml</strong> and covers the following topics:<br />

• "About <strong>5ml</strong>" on page 10<br />

• "How <strong>5ml</strong> Works" on page 11<br />

• "First Look at <strong>5ml</strong>" on page 12<br />

- 9 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

About <strong>5ml</strong><br />

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

tablets, and standard web platforms. <strong>5ml</strong> automatically manages the HTML5, CSS3 and JavaScript behind your rich<br />

media content to make the creation of content as easy as point and click.<br />

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

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

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

coding.<br />

With <strong>5ml</strong>, you can combine images, video clips, interactive galleries, 360-degree views, social media elements,<br />

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

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

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

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

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

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

projects with our full-service program.<br />

- 10 -


CHAPTER 1: Introduction to <strong>5ml</strong><br />

How <strong>5ml</strong> Works<br />

<strong>5ml</strong> helps advertisers, agencies, and publishers harness the full power of HTML5 to engage consumers with highly<br />

interactive rich media content -- without the need for coding.<br />

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

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

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

supported on next-generation mobile browsers and platforms.<br />

<strong>5ml</strong>gives you a powerful visual editing canvas to edit the individual pages and share content among them. <strong>5ml</strong> manages<br />

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

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

web browser.<br />

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

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

- 11 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

First Look at <strong>5ml</strong><br />

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

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

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

recommended.<br />

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

on page 12.<br />

Figure 1-1: Accessing <strong>5ml</strong> from your browser.<br />

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

• Create a new project<br />

• Open a project<br />

• Delete a project<br />

• Preview a project<br />

• Enable tracking for a project<br />

• Add a new page to an existing project<br />

• Import or Export a project<br />

• Back up and Restore a project<br />

• Publish a project<br />

- 12 -


CHAPTER 1: Introduction to <strong>5ml</strong><br />

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

underneath the Add New button. Each project can include multiple pages.<br />

Figure 1-2: Organizing your projects on the My Projects page.<br />

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<br />

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

The Project Editor is comprised of the following:<br />

• The Canvas (center), in which you edit your pages<br />

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

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

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

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

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

- 13 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

- 14 -


CHAPTER 2: About Administering Accounts<br />

CHAPTER 2: About Administering Accounts<br />

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

About Brands<br />

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

user accounts to each of your organization's brands.<br />

Administering Brands<br />

• "Adding a Brand" on page 16<br />

• "Editing a Brand" on page 17<br />

• "Disabling a Brand" on page 18<br />

About User Accounts<br />

<strong>5ml</strong> allows you to add user accounts to your organization and brands so that you can manage who has access to your<br />

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

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

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

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

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

premium.<br />

Administering User Accounts<br />

• "Adding a User Account" on page 19<br />

• "Editing a User Account" on page 21<br />

• "Changing a User Account Password" on page 23<br />

• "Disabling a User Account" on page 26<br />

• "Deleting a User Account" on page 27<br />

- 15 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Adding a Brand<br />

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

organization.<br />

To add a brand:<br />

1. On the Administration page, click Brands, and then Add New.<br />

Figure 2-1: Adding a new brand<br />

The Create New Brand dialog appears.<br />

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

Figure 2-2: Entering a brand name.<br />

The new brand appears in the Brands list.<br />

- 16 -


CHAPTER 2: About Administering Accounts<br />

Editing a Brand<br />

You can edit an existing brand from the Administration page.<br />

To edit a brand:<br />

1. On the Administration page, click Brands.<br />

2. In the Brands list, select the brand to edit, and click Edit.<br />

Figure 2-1: Editing a brand.<br />

The Edit Brand dialog appears.<br />

3. In the Brand Name field, edit the brand name, and click Apply.<br />

Figure 2-2: Editing the brand name.<br />

The edited brand appears in the Brands list.<br />

- 17 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Disabling a Brand<br />

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

disabled brand.<br />

To disable a brand:<br />

1. On the Administration page, click Brands.<br />

2. In the Brands list, select the brand to disable, and click Disable.<br />

Figure 2-1: Disabling a brand.<br />

The brand appears disabled in the Brands list.<br />

- 18 -


CHAPTER 2: About Administering Accounts<br />

Adding a User Account<br />

You can add a user account to a brand from the Administration page.<br />

To add a user account:<br />

1. On the Administration page, click Users, and then Add New.<br />

Figure 2-1: Adding a new user<br />

The Create User dialog appears.<br />

2. In the Create User dialog, enter the information for the new user.<br />

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

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

name.<br />

c. In the Password field, enter a password for the account.<br />

d. In the Verify Password field, enter the password again.<br />

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

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

users for the organization.<br />

• Author–Use when you want the user to only author projects.<br />

f. The Organization field displays the name of the organization the new user will belong to.<br />

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

access to.<br />

- 19 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 2-2: Entering the user account information.<br />

3. Click Create.<br />

The new user appears in the Users list.<br />

- 20 -


CHAPTER 2: About Administering Accounts<br />

Editing a User Account<br />

You can edit user account information from the Administration page, including changing the user account password.<br />

To edit a user account:<br />

1. On the Administration page, select the user to edit, and click Edit.<br />

Figure 2-1: Editing a user account.<br />

The Edit User dialog appears.<br />

2. In the Edit User dialog, you can edit the following user account information.<br />

• Full Name<br />

• Password<br />

• Role<br />

• Assign To Brands<br />

- 21 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 2-2: Entering the user account information.<br />

3. Click Apply.<br />

The updated user appears in the Users list.<br />

- 22 -


CHAPTER 2: About Administering Accounts<br />

Changing a User Account Password<br />

You can change a user account password from the Administration page.<br />

To change a user account password:<br />

1. On the Administration page, select the user to edit, and click Edit.<br />

Figure 2-1: Editing a user account.<br />

The Edit User dialog appears.<br />

- 23 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

2. In the Edit User dialog, click Change Password.<br />

Figure 2-2: Clicking the Change Password link.<br />

The change password fields appear.<br />

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

- 24 -


CHAPTER 2: About Administering Accounts<br />

Figure 2-3: Entering the new password.<br />

4. Click Apply.<br />

The updated user account appears in the Users list.<br />

- 25 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Disabling a User Account<br />

You can disable a user account from the Administration page.<br />

To disable a user account:<br />

1. On the Administration page, click Users.<br />

2. In the Users list, select the user account to disable, and click Disable.<br />

Figure 2-1: Disabling a user account.<br />

The user account appears disabled in the Users list.<br />

- 26 -


CHAPTER 2: About Administering Accounts<br />

Deleting a User Account<br />

You can delete a user account from the Administration page.<br />

To delete a user account:<br />

1. On the Administration page, click Users.<br />

2. In the Users list, select the user account to delete, and click Delete.<br />

Figure 2-1: Deleting a user account.<br />

3. When the confirmation dialog appears, click Delete.<br />

The user account is deleted from the Users list.<br />

- 27 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

CHAPTER 3: <strong>5ml</strong> Tutorial<br />

This chapter provides an overview of designing a mobile project using <strong>5ml</strong>. This chapter covers the following topics:<br />

• "Getting Started" on page 29<br />

• "Creating a New Project" on page 30<br />

• "Organizing Your Assets" on page 32<br />

• "Adding a Tracing Image" on page 37<br />

• "Changing the Page Background" on page 40<br />

• "Adding Text to the Page" on page 43<br />

• "Adding a 360-degree View" on page 47<br />

• "Adding and Modifying Images" on page 53<br />

• "Adding Shapes and Layout Elements" on page 60<br />

• "Saving the Page" on page 69<br />

• "Creating a Second Page" on page 70<br />

• "Creating a Form" on page 71<br />

• "Adding a Gallery with Captions" on page 75<br />

• "Adding a Video" on page 80<br />

• "Adding a Social Media Widget" on page 83<br />

• "Adding Navigation Links and Transitions" on page 85<br />

• "Previewing the Page" on page 90<br />

- 28 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Getting Started<br />

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

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

streamlined appearance for an optimal viewing experience on mobile devices as well as on computers.<br />

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

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

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

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

relevance to mobile users.<br />

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

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

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

comfort of your web browser.<br />

What You'll Learn<br />

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

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

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

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

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

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

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

your device's app store or marketplace.<br />

What You Need<br />

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

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

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

HTML5; Safari and Chrome are recommended.<br />

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

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

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<br />

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

images in the image gallery.<br />

- 29 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

Creating a New Project<br />

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

94.<br />

Figure 3-1: Adding a new project.<br />

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

project name. You can see that the first page has been added to the project.<br />

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<br />

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

top left side of the Canvas, the Page Outline on the bottom left side of the Canvas, and the Properties pane on the right<br />

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

- 30 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 3-2: The Project Editor screen.<br />

- 31 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

Organizing Your Assets<br />

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

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

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

under 10 MB.<br />

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

Editor window, as shown in Figure 3-3 on page 32.<br />

Figure 3-3: Click the Assets tab of the Library pane to show the Assets pane.<br />

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

into the folders, thereby organizing the assets and making them easier to find.<br />

To create a folder in the Assets pane:<br />

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

pane, as shown in Figure 3-4 on page 33.<br />

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

- 32 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 3-4: Add a folder to the Assets pane of the Library.<br />

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

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

upload photos of people.<br />

Figure 3-5: Create the folder and give it a name.<br />

- 33 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

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

on page 34.<br />

Figure 3-6: Selecting the folder in the Assets pane.<br />

4. Repeat steps 1-3 for each folder you want to add.<br />

To import assets directly into a folder:<br />

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

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

on which type of asset you are importing — image files or video clips.<br />

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<br />

35.<br />

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

35.<br />

- 34 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 3-7: Add asset files to the Assets pane.<br />

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

The assets you select are imported directly into the folder you selected in step 1.<br />

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<br />

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

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<br />

files to include them in the range.<br />

Figure 3-8: Select images to import.<br />

- 35 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

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

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

Assets pane, see "Importing and Managing Assets" on page 143.)<br />

- 36 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Adding a Tracing Image<br />

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

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

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

To assign the mockup image as a tracing image:<br />

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<br />

Project Editor.<br />

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

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

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

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

3. Click the Tracing Image option above the tracing image well to turn it on.<br />

After clicking this option, the tracing image appears on the page.<br />

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

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<br />

page more visible.<br />

- 37 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

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

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

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

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

the actual background color:<br />

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

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

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

image as a normal image, as shown in Figure 3-11 on page 39.<br />

- 38 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 3-11: Increasing the opacity of the tracing image.<br />

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

background color of the mockup.<br />

- 39 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

Changing the Page Background<br />

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

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

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

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

2. Click on the Properties pane's Appearance tab.<br />

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

The color picker appears in the Properties pane.<br />

Figure 3-12: Choosing Color from the Background menu.<br />

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

5. Click inside the color picker to pick the color.<br />

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<br />

shown in Figure 3-13 on page 41.<br />

- 40 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

7. Click on the Properties pane's General tab.<br />

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

opacity so that it fades out.<br />

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

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

160.)<br />

- 41 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

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<br />

background.<br />

- 42 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Adding Text to the Page<br />

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

slider, beneath the tracing image well, to the right to increase its opacity.<br />

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<br />

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

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

Figure 3-15: Selecting the Widgets pane.<br />

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

shown in Figure 3-16 on page 43.<br />

Figure 3-16: Dragging the Text widget to the page.<br />

- 43 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

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

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

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

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

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

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

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

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

Figure 3-17: Selecting the text in the Text element.<br />

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

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

- 44 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

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

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

Figure 3-19: Setting the text color to white.<br />

- 45 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

10. Repeat steps 2-9 for the text "Built for Speed."<br />

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

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

- 46 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Adding a 360-degree View<br />

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

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

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<br />

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

finger or dragging with a mouse.<br />

To add the 360-degree view:<br />

1. Click the Widgets tab in the Library pane to show the Widgets pane.<br />

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

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

as shown in Figure 3-20 on page 47.<br />

Figure 3-20: Dragging the 360 widget to the page.<br />

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<br />

shown in Figure 3-21 on page 48.<br />

- 47 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

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

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.<br />

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

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

- 48 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

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

Figure 3-23: Resizing the element by dragging a corner handle.<br />

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

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

Your Assets" on page 32).<br />

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

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.<br />

- 49 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

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

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

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

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

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

on page 51.<br />

- 50 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

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

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

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

Widget" on page 289.)<br />

- 51 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

Figure 3-27: Showing the next image in the 360 element.<br />

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

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

widget, see "Using the 360 Widget" on page 289.)<br />

- 52 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Adding and Modifying Images<br />

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

creates an Image element for each image you drag to the page.<br />

For example, to add the "GALLERY" image:<br />

1. Click the Assets tab at the top of the Library pane.<br />

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

Your Assets" on page 32).<br />

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

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

Figure 3-28: Dragging the "GALLERY" image directly to the page.<br />

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

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

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

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

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

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

- 53 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

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

"Resizing Page Elements" on page 171).<br />

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

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

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

the image to it later.<br />

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

1. Click the Widgets tab in the Library pane to show the Widgets pane.<br />

2. Choose Media from the drop-down menu at the top of the Widgets pane.<br />

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

image in the bottom half of the tracing image.<br />

- 54 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 3-30 : Dragging an Image widget to the page.<br />

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<br />

shown in Figure 3-31 on page 56.<br />

- 55 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

Figure 3-31: Dragging an image asset to the Image element.<br />

After adding the image to the Image element, drag the Image element into position to cover the logo in the tracing image,<br />

as shown in Figure 3-32 on page 57.<br />

- 56 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

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

modify the Image element:<br />

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

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

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

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

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

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

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

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

"Arranging and Overlapping Page Elements" on page 181<br />

- 57 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

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

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

element, as shown in Figure 3-34 on page 59.<br />

- 58 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 3-34: Reducing the opacity of the image by dragging the Opacity slider.<br />

- 59 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

Adding Shapes and Layout Elements<br />

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

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

rectangular area on the page that can hold other elements.<br />

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

1. Click the Widgets tab at the top of the Library pane to show the Widgets pane.<br />

2. Choose Shapes in the drop-down menu to see the Rectangle widget.<br />

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

Figure 3-35: Dragging the Rectangle widget to the Canvas.<br />

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

pane, as shown in Figure 3-36 on page 61.<br />

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

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

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

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

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

- 60 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

page 168.)<br />

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

pane.<br />

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

6. Click inside the HTML color code box underneath the Background drop-down menu to show the color picker.<br />

7. Click inside the color picker to pick a color.<br />

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<br />

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

- 61 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

Figure 3-37: Changing the background color of the Rectangle element.<br />

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

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

Container element, you can drag other widgets or assets into the Container element. If you need the Container element<br />

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

page without having to copy each individual asset or element within the Container element.<br />

To create the navigation bar with the Container widget:<br />

1. Click the Widgets tab at the top of the Library pane to show the Widgets pane.<br />

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

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

- 62 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

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

pane, as shown in Figure 3-39 on page 63.<br />

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

pane.<br />

- 63 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

To add an image and a text label to the Container element:<br />

1. Click the Assets tab at the top of the Library pane.<br />

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

Your Assets" on page 32).<br />

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

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

Figure 3-40: Dragging an image into the Container element.<br />

5. Click the Widgets tab at the top of the Library pane to show the Widgets pane.<br />

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

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

- 64 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 3-41: Adding a Label widget to the Container element.<br />

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

65) to the appropriate text ("Visit Deus Online").<br />

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

drop-down menus to match the text in the tracing image.<br />

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

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<br />

shown in Figure 3-42 on page 66.<br />

- 65 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

Figure 3-42: Changing the text color of the Label element.<br />

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

the tracing image):<br />

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

Editor window.<br />

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

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

2. Click the Assets tab at the top of the Library pane.<br />

3. Double-click the folder that contains the image (if you organized your images into folders, as described in "Organizing<br />

Your Assets" on page 32).<br />

4. Choose Images from the Assets drop-down menu.<br />

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

- 66 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 3-43: Adding an image to the Container element.<br />

6. Select the Container element again (see step 1).<br />

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

8. Click inside the HTML color code box underneath the Background drop-down menu to show the color picker.<br />

9. Click inside the color picker to select a color.<br />

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<br />

Figure 3-44 on page 68.<br />

- 67 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

Figure 3-44: Changing the background color of the Container element.<br />

- 68 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Saving the Page<br />

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<br />

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

Figure 3-45: Saving the page.<br />

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

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

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

- 69 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

Creating a Second Page<br />

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

Editor window.<br />

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

switch from one page to another by clicking the tab for the page above the Canvas.<br />

To assign a mockup image as a tracing image for the new page:<br />

1. Select the blank page in the Canvas by clicking on it.<br />

2. Drag the mockup image from the Assets pane to the tracing image well in the Properties pane.<br />

3. Click the Tracing Image option above the tracing image well to turn it on.<br />

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<br />

tracing image opacity.<br />

Figure 3-46: Adding a tracing image to the new page.<br />

- 70 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Creating a Form<br />

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

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

contact them.<br />

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

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

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

window. The new page appears in the Canvas.<br />

To create a form using Common widgets:<br />

1. Click the Widgets tab in the Library pane to show the Widgets pane.<br />

2. Choose Common from the drop-down menu at the top of the Widgets pane.<br />

3. Add text input fields:<br />

a. Drag the Text Input widget from the Widgets pane to the Canvas.<br />

b. Resize and position the Text Input element.<br />

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

For example, enter Name.<br />

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

enter 25.<br />

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

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

prompt text and its maximum number of characters.<br />

Figure 3-47: Adding Text Input elements to the form<br />

- 71 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

4. Add a Radio Button group:<br />

a. Drag the Radio Button widget from the Widgets pane to the Canvas.<br />

b. Resize and position the Radio Button element.<br />

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

example, enter 1.<br />

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

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

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

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

unique value.<br />

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

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

exact same value.<br />

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

Radio Button element will be set as the default Radio Button element. On the Canvas select the default<br />

Radio Button element, and in the Properties pane, select the Checked check box.<br />

Figure 3-48: Adding JavaScript code to create the Custom Function sendForm<br />

5. Add a submit button and JavaScript code:<br />

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

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

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

example, on clicking (onclick) the button the JavaScript code (Custom Function) executes.<br />

- 72 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

a. Drag the Button widget from the Widgets pane to the Canvas.<br />

b. Resize and position the Button element.<br />

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

element. For example, enter Sign Up Now!<br />

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

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

JavaScript code for the sendForm custom function.<br />

Figure 3-49: Adding JavaScript code to create the Custom Function sendForm<br />

e. Click Done.<br />

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

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

h. From the Action drop-down menu, select Custom Function.<br />

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

Editor. For example, select sendForm.<br />

j. Click Add.<br />

6. Click Save.<br />

The Behavior field displays the Custom Function that submits the form's data.<br />

Figure 3-50: Associating the sendForm Custom Function with the submit Button element<br />

on page 71<br />

- 73 -


- 74 -<br />

CHAPTER 3: <strong>5ml</strong> Tutorial


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Adding a Gallery with Captions<br />

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

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

provides a way to show multiple images with captions on a single page.<br />

To add the Gallery widget:<br />

1. Click the Widgets tab in the Library pane to show the Widgets pane.<br />

2. Choose Media from the drop-down menu at the top of the Widgets pane.<br />

3. Drag the Gallery widget from the Widgets pane to the Canvas.<br />

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

75, so that the caption ("") aligns with the caption in the tracing image.<br />

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

To add the first image to the Gallery element:<br />

1. Click the Assets tab in the Library pane.<br />

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

Your Assets" on page 32).<br />

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

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

- 75 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

Figure 3-52: Dragging the first image into the Gallery element.<br />

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

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

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

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

- 76 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

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

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

To place captions at the bottom of the Gallery element:<br />

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

not already selected).<br />

2. Click inside the caption area of an image in the Gallery element.<br />

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

- 77 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

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

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

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

Gallery Properties pane.<br />

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

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

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

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

- 78 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

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

the Gallery Widget" on page 265.<br />

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

Editor window, and choose Save.<br />

- 79 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

Adding a Video<br />

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<br />

rewind, scrub through, or fast-forward through the video.<br />

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

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

"Adding a Tracing Image" on page 37.<br />

To add the Video widget:<br />

1. Click the Widgets tab in the Library pane to show the Widgets pane.<br />

2. Choose Media from the drop-down menu at the top of the Widgets pane.<br />

3. Drag the Video widget from the Widgets pane to the Canvas.<br />

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

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

To add a video to the Video widget element:<br />

1. Click the Assets tab in the Library pane.<br />

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

"Organizing Your Assets" on page 32).<br />

- 80 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

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.<br />

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

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

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

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

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

you want, as shown in Figure 3-59 on page 82.<br />

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

3. Choose Visible or Hidden from the Controls drop-down menu.<br />

- 81 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

Figure 3-59: Setting the Preview Frame for the video.<br />

- 82 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Adding a Social Media Widget<br />

<strong>5ml</strong> includes several Social Media widget elements you can place on a page so that the user can share the page on the<br />

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

of other Facebook friends who "like" your page.<br />

To place a Facebook "Like" button:<br />

1. Click the Widgets tab in the Library pane to show the Widgets pane.<br />

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

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

Figure 3-60: Placing a Facebook Like widget on the page.<br />

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<br />

Project Editor), enter the URL of the page to share on Facebook.<br />

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

URL.<br />

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

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

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

menu underneath the Layout Style menu.<br />

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

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

- 83 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

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

- 84 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Adding Navigation Links and Transitions<br />

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

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

contains the gallery.<br />

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

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

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

2. Choose onclick from the Event menu on the Behavior tab of the Properties pane.<br />

3. Choose Show Page from the Action drop-down menu .<br />

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

shown in Figure 3-61 on page 85<br />

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

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

on page 86.<br />

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

- 85 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

Figure 3-62: Adding a transition effect for the Show Page link.<br />

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

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

- 86 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 3-63: Changing the duration of the transition.<br />

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

image and repeat steps 1-5, choosing Page 3 in step 3.<br />

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

by choosing one of the following options from the Direction drop-down menu:<br />

• Right to Left: The image slides into view from the right side.<br />

• Left to Right: The image slides into view from the left side.<br />

• Bottom to Top: The image slides into view from the bottom.<br />

• Top to Bottom: The image slides into view from the top.<br />

- 87 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

Figure 3-64: Setting the direction of the slide transition.<br />

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

choosing one of the following options from the Acceleration drop-down menu:<br />

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

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

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

end.<br />

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

(from faster to slower) at the end.<br />

• Linear: The image fade-in occurs at the same speed throughout.<br />

- 88 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 3-65: Setting the acceleration of the fade-in transition.<br />

- 89 -


CHAPTER 3: <strong>5ml</strong> Tutorial<br />

Previewing the Page<br />

You can preview any page in the project from the Canvas:<br />

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

2. Click the Preview button in the Project Editor menu bar above the Canvas.<br />

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

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

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

be lost if you continue).<br />

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

Figure 3-66 on page 90.<br />

3. Click the Preview Now button to see the page in your browser.<br />

Figure 3-66: Previewing the page.<br />

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

Project" on page 120<br />

- 90 -


CHAPTER 4: Organizing Projects<br />

CHAPTER 4: Organizing Projects<br />

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

• "About the My Projects Page" on page 92<br />

• "Adding a New Project" on page 94<br />

• "Importing a Project" on page 97<br />

• "Duplicating a Project" on page 100<br />

• "Changing Project Settings" on page 102<br />

• "Showing Pages in a Project" on page 111<br />

• "Opening a Project" on page 112<br />

• "Adding a Page to a Project" on page 113<br />

• "Duplicating a Page in a Project" on page 114<br />

• "Setting a Project's Home Page" on page 116<br />

• "Deleting a Page From a Project" on page 118<br />

• "Previewing a Project" on page 120<br />

• "Publishing a Project" on page 382<br />

• "Deleting a Project" on page 119<br />

• "Backing Up a Project" on page 127<br />

• "Restoring a Project" on page 129<br />

• "Exporting a Project" on page 385<br />

- 91 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

About the My Projects Page<br />

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

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

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

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

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<br />

projects list.<br />

• 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<br />

project.<br />

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

how to import a project.<br />

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

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

Figure 4-1: The My Projects Home page.<br />

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

Menu ( ) icon (refer to Figure 4-1 on page 92):<br />

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

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

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

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

127 and "Restoring a Project" on page 129.<br />

- 92 -


CHAPTER 4: Organizing Projects<br />

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

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

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

customize runtime behavior, enable a splash screen, enable project level optimizing, enable tracking, or enable<br />

offline caching of assets, see "Changing Project Settings" on page 102.<br />

- 93 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Adding a New Project<br />

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

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

To add a new project:<br />

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

Figure 4-2: Adding a new project.<br />

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

2. Select the Create From Scratch option, and then click Continue.<br />

Figure 4-3: Selecting the Create From Scratch option.<br />

- 94 -


CHAPTER 4: Organizing Projects<br />

The second page of the New Project Setup wizard appears.<br />

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

Figure 4-4: Selecting the mobile website option.<br />

4. Choose whether the new project is a website or an ad project.<br />

5. Click Finish.<br />

• If the new project is an website, select the Blank Website option.<br />

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

Interstitial ads for Mobclix in-app ads.)<br />

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

Figure 4-5: New project with the first page set as the home page.<br />

- 95 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

- 96 -


CHAPTER 4: Organizing Projects<br />

Importing a Project<br />

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

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

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

127.<br />

To import a project:<br />

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

Figure 4-6: Adding (importing) a new project.<br />

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

2. Select the Import Project option, and then click Continue.<br />

- 97 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 4-7: Importing a project.<br />

The next page of the New Project Setup wizard appears.<br />

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

Figure 4-8 on page 98.Figure 4-6 on page 97<br />

Figure 4-8: Selecting the project file to import.<br />

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

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

6. Click Import.<br />

- 98 -


CHAPTER 4: Organizing Projects<br />

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

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

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

Figure 4-9 : Skipping existing asset files.<br />

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

successfully, as shown in Figure 4-10 on page 99.<br />

Figure 4-10: Importing all files.<br />

7. Click Finish to complete the import process.<br />

The imported project appears in the projects list.<br />

- 99 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Duplicating a Project<br />

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

you can then freely modify.<br />

To duplicate a project:<br />

1. On the My Projects page, click on the project name.<br />

The Project Menu (<br />

) icon appears.<br />

Figure 4-1: Duplicating a project.<br />

2. Click on the Project Menu icon to open the menu, and select Duplicate.<br />

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

- 100 -


CHAPTER 4: Organizing Projects<br />

Figure 4-2: Duplicate copy of the project in the projects list.<br />

- 101 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Changing Project Settings<br />

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

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

To open the project Settings page:<br />

1. On the My Projects page, click on the project name.<br />

The Project Menu (<br />

) icon appears.<br />

2. Click on the Project Menu icon to open the menu, and select Export.<br />

Figure 4-1: Opening the Settings page.<br />

The project's Settings page appears.<br />

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

options, or enter text, then click Apply and OK.<br />

Project-level settings include:<br />

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

See "General" on page 103.<br />

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

page 104.<br />

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

See "Splash screen" on page 105.<br />

- 102 -


CHAPTER 4: Organizing Projects<br />

General<br />

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

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

post summary. See "Open Graph Meta Tags" on page 107.<br />

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

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

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

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

cache. See "Manifest" on page 109.<br />

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

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

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

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

information about the page. <strong>5ml</strong> supports the and page meta tags, as well as the <br />

tag.<br />

Figure 4-1: Setting the page meta tags.<br />

- 103 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

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

Name field. When viewing the landing page, the text displays in the browser header.<br />

Note: The text you enter into the Name field becomes the new project name.<br />

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

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

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

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

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

not enter text into this field, then the tag is not created.)<br />

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

keywords for your site that help search engines and users find your content.<br />

Runtime<br />

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

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

use as the app icon.<br />

Figure 4-2: Setting project runtime options.<br />

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

does not apply to advertisement projects.)<br />

o<br />

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

landing page address.<br />

- 104 -


CHAPTER 4: Organizing Projects<br />

o<br />

Allow the user to zoom in and out–Select this checkbox to allow the user to zoom in and out when<br />

viewing your pages.<br />

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

o<br />

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

only applies to the iOS platform.)<br />

• iOS Status Bar Style–Use to define the iOS status bar style.<br />

o<br />

o<br />

o<br />

Default–Select this radio button to keep the default status bar style.<br />

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

your project.<br />

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

status bar when displaying your project.<br />

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

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

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

o<br />

Splash screen<br />

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

otherwise, your icon might be altered visually.<br />

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

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

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

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

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

settings.<br />

- 105 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 4-3: Setting splash screen options.<br />

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

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

opacity. Click anywhere outside the color selector dialog to close it.<br />

Figure 4-4: Selecting a background or progress bar color.<br />

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

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

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

the V Position slide control to re-position the image vertically on the splash screen.<br />

- 106 -


CHAPTER 4: Organizing Projects<br />

Figure 4-5: Selecting a background image.<br />

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

show the progress bar on the splash screen.<br />

Open Graph Meta Tags<br />

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

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

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

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

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

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

metadata to generate the post summary content.<br />

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

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

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

its title as “Stuffed Pizzas” and the URL to its representative image.<br />

- 107 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

• Title–The Title field allows you to add a title to your Facebook post.<br />

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

object types are:<br />

o<br />

o<br />

o<br />

o<br />

o<br />

o<br />

o<br />

o<br />

o<br />

Article<br />

Blog<br />

Book<br />

Profile (External)<br />

Movie<br />

TV Episode<br />

TV Show<br />

Video<br />

Website<br />

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

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

graphic file, and select it. The graphics file uploads and displays in the image well.<br />

- 108 -


CHAPTER 4: Organizing Projects<br />

Optimization<br />

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

Analytics<br />

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

Export<br />

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

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

the project. Including the Host URL value allows <strong>5ml</strong> to configure the project export file with all the necessary<br />

configurations for the project to work external to the <strong>5ml</strong> environment, as some functionality depends on the full URL<br />

path. For example, the Mobclix SDK and Facebook image tags.<br />

Figure 4-7: Entering an external Host URL to export the project.<br />

Manifest<br />

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

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

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

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

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

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

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

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

project.<br />

- 109 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 4-8: Selecting to store project data offline on the device<br />

- 110 -


CHAPTER 4: Organizing Projects<br />

Showing Pages in a Project<br />

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<br />

project, click another project or click Home in the project breadcrumb.<br />

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

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

Figure 4-9: Showing the pages in a project.<br />

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<br />

scroll bar to see more pages in the project.<br />

- 111 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Opening a Project<br />

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

To open a page in a project:<br />

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

page thumbnail.<br />

Figure 4-1: Showing the pages in a project.<br />

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

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

Editor and Canvas, see "Working in the Project Editor" on page 154.)<br />

Figure 4-2: Opening a page in the Project Editor<br />

- 112 -


CHAPTER 4: Organizing Projects<br />

Adding a Page to a Project<br />

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

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

- 113 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Duplicating a Page in a Project<br />

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

which you can then freely modify.<br />

To duplicate a page in a project:<br />

1. On the My Projects page, click on the project name.<br />

The project pages appear to the right.<br />

2. Click on the page to duplicate.<br />

The page level icons appear at the bottom of the page thumbnail.<br />

Figure 4-1: Page level icons.<br />

3. Click the Duplicate ( ) icon.<br />

The Duplicate Page dialog appears.<br />

4. Enter a page name for the duplicate page, and click Duplicate.<br />

Figure 4-2: Entering the duplicate page's name.<br />

The new (duplicate) page appears with the existing pages.<br />

- 114 -


CHAPTER 4: Organizing Projects<br />

Figure 4-3: Duplicate page appears.<br />

- 115 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Setting a Project's Home Page<br />

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

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<br />

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

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

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

might need to rework the linking scheme from the new home page to the other pages.<br />

To set the project's home page:<br />

1. On the My Projects page, click on the project name.<br />

The project pages appear to the right.<br />

Figure 4-1: The project pages with Page 1 as the home page.<br />

2. Click on the page to be the new home page.<br />

The page level icons appear at the bottom of the page thumbnail.<br />

Figure 4-2: Page level icons.<br />

3. Click the Home ( ) icon.<br />

The page you selected becomes the new home page.<br />

- 116 -


CHAPTER 4: Organizing Projects<br />

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

- 117 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Deleting a Page From a Project<br />

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

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

Figure 4-1 on page 118.<br />

To delete a page from a project:<br />

1. Open the project and select the page to delete.<br />

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

Figure 4-1: Deleting a page from a project.<br />

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

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

Warning: You cannot undo deleting a page from a project.<br />

- 118 -


CHAPTER 4: Organizing Projects<br />

Deleting a Project<br />

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

not delete the project's assets.<br />

To delete an entire project:<br />

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

Figure 4-1: Deleting an entire project from the My Projects page.<br />

2. Click on the Project Menu icon to open the menu, and select Delete.<br />

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

3. Click Delete. (Or, click Cancel to cancel the delete operation.)<br />

Warning: You cannot undo deleting a project.<br />

- 119 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Previewing a Project<br />

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

pages, you can click on the links in the preview display to see the other pages.<br />

To preview a project:<br />

1. On the My Projects page, click on the project name.<br />

The Project Menu (<br />

) icon appears.<br />

Figure 4-1: Previewing a project using the project menu.<br />

2. Click on the Project Menu icon to open the menu, and select Preview.<br />

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

button in the top right corner of the Preview dialog.<br />

- 120 -


CHAPTER 4: Organizing Projects<br />

Figure 4-2: Selecting a preview option.<br />

3. Choose a preview display option:<br />

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

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

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

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

in your mobile browser.<br />

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

the App Store for iOS devices and Android Marketplace for Android devices), and then log into your <strong>5ml</strong><br />

account to use the app to preview your project.<br />

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

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

Chrome.<br />

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

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

- 121 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 4-3: Choosing the Preview on a desktop brower option.<br />

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

dragging the mouse is similar to swiping with your finger on a mobile device.<br />

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

pages.<br />

- 122 -


CHAPTER 4: Organizing Projects<br />

Publishing a Project<br />

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

"Exporting a Project" on page 385.)<br />

To publish a project:<br />

1. On the My Projects page, click on the project name.<br />

The Project Menu (<br />

) icon appears.<br />

2. Click on the Project Menu icon to open the menu, and select Publish.<br />

Figure 4-1: Publishing a project using the project menu.<br />

The Publishing dialog appears.<br />

3. Click Publish.<br />

- 123 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 4-2: Publishing the project<br />

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

To check if a project is published:<br />

1. On the My Projects page, click on the project name.<br />

The Project pages appear to the right.<br />

2. Click the Check Status button located above the project pages.<br />

Figure 4-3: Checking if a project is published.<br />

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

later.<br />

- 124 -


CHAPTER 4: Organizing Projects<br />

Figure 4-4: Publishing status message; still publishing.<br />

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

the project, and the project's published URL appears to the right.<br />

Figure 4-5: Published project with URL.<br />

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

browser's address field.<br />

- 125 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Exporting a Project<br />

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

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

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

a web server. The zip file uses the project name.<br />

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

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

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

your <strong>5ml</strong> representative.<br />

To export a project:<br />

1. On the My Projects page, click on the project name.<br />

The Project Menu (<br />

) icon appears.<br />

2. Click on the Project Menu icon to open the menu, and select Export.<br />

Figure 4-6: Exporting a project using the project menu.<br />

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

and then open it. (Or follow your particular browser's prompts.)<br />

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

- 126 -


CHAPTER 4: Organizing Projects<br />

Backing Up a Project<br />

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

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

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

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

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

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

function. For more information, see "Exporting a Project" on page 385.<br />

To back up a project:<br />

1. On the My Projects page, click on the project name.<br />

The Project Menu (<br />

) icon appears.<br />

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

Figure 4-1: Backing up a project using the project menu.<br />

The Backup and Restore dialog appears.<br />

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

- 127 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

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

Select the Include Analytic checkbox to include the project's analytics component in the backup.<br />

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

- 128 -


CHAPTER 4: Organizing Projects<br />

Restoring a Project<br />

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

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

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

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

pkg file (which was previously backed up from the same project).<br />

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

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

97.<br />

To restore a project:<br />

1. On the My Projects page, click on the project name.<br />

The Project Menu (<br />

) icon appears.<br />

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

Figure 4-1: Restoring a project using the project menu.<br />

The Backup and Restore dialog appears.<br />

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

files.<br />

- 129 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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

checkbox.<br />

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<br />

page 130.<br />

Figure 4-3: Browsing to the project backup file to restore.<br />

The backup file to restore uploads.<br />

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

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

6. Click the Restore button to restore the project to the backed up version.<br />

- 130 -


CHAPTER 4: Organizing Projects<br />

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

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

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

exists and is used in a different project.<br />

Figure 4-4: Restoring all files except existing asset files.<br />

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

imported successfully.<br />

Figure 4-5: Restoring all files.<br />

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

- 131 -


CHAPTER 5: Optimizing Projects<br />

CHAPTER 5: Optimizing Projects<br />

<strong>5ml</strong> provides several ways to optimize your projects. This chapter covers the following topics:<br />

• "About Optimizing Projects" on page 133<br />

• "Optimizing at the Project Level" on page 134<br />

• "Optimizing at the Page Level" on page 138<br />

• "Optimizing at the View or Tab Level" on page 141<br />

- 132 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

About Optimizing Projects<br />

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

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

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

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

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

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

The optimize settings appear at the following levels:<br />

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

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

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

Load on demand setting. See "Optimizing at the Project Level" on page 134.<br />

• Page level–You can set the Load on demand and Preload images settings at the page level. If the project level<br />

preload assets setting is active and you set the Load on demand setting to be active on a page, then only this page<br />

is set to load data (including images) on demand. In other words, the page level load on demand setting overrides<br />

the project level preload images setting. In addition, you can set the page level preload images setting to be<br />

active. In this case everything but the images are loaded on demand and the images are preloaded. See "Optimizing<br />

at the Page Level" on page 138.<br />

• View and tab level–Some widgets, for example, those that contain views and tabs, also include load on<br />

demand and preload images settings. When these settings are active they override the project and page level settings.<br />

For example, if the project level setting preload images is inactive and the page level setting load on<br />

demand is active (but the preload images setting is not active), then activating a view or tab level load on demand<br />

and preload images setting means only this view on this page is set to preload images. See "Optimizing at the View<br />

or Tab Level" on page 141.<br />

- 133 -


CHAPTER 5: Optimizing Projects<br />

Optimizing at the Project Level<br />

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

Optimizing a project refers to managing when data is transferred to the mobile user's device. This section describes how<br />

to optimize at the project level.<br />

The optimize setting at the project level is:<br />

• Preload all assets–Selecting this setting causes the project to preload all assets (with the exception of background<br />

images) before the assets are required to display on the user's mobile device. This setting improves the<br />

user's experience once the initial loading of data is complete.<br />

• Don't preload any assets–Selecting this setting causes the project to load assets only when the user performs<br />

an action, or there is a dynamic action, that requires the asset to display on the mobile device. This setting<br />

improves project's initial loading time.<br />

You can set the Preload all assets optimize setting at the project level. All images, except background images, are<br />

automatically preloaded. When you create a new project, by default this setting is turned on to preload all assets. If you<br />

want some pages in a project not to preload assets, keep the project level setting on and turn on the page level Load on<br />

demand setting.<br />

The optimize assets project level setting appears on the Settings page's Optimization section.<br />

Changing the Project Level Optimize Settings<br />

To set the project to preload all assets:<br />

• By default, when you create a new project the project level Preload all assets setting is active.<br />

To set the project to not preload any images:<br />

- 134 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

1. In the Optimization section, of the project Settings page, select Don't preload any assets.<br />

Figure 5-1: Selecting the Don't preload any assets radio button to not preload assets.<br />

Optimizing Through Image Quality<br />

Another way to optimize the loading of your project is to alter the quality of the images contained in the project. The<br />

lower the image quality the faster your project loads; however, images that are reduced in size can lose sharpness and<br />

detail. For this reason, <strong>5ml</strong> provides Image Quality presets, which affect both file size and image quality. Image quality<br />

presets compress and shrink down the size of the image so that it loads quickly, but maintains a certain level of quality.<br />

<strong>5ml</strong> provides several image quality presets to choose from. You can also choose a custom setting for images that are in<br />

the JPEG format.<br />

To set the image quality:<br />

1. In the Optimization section, of the project Settings page, select an image quality preset value from the Image<br />

Quality dropdown menu.<br />

- 135 -


CHAPTER 5: Optimizing Projects<br />

Figure 5-2: Selecting a image quality preset value.<br />

The possible image quality preset values are:<br />

• Maximum–100% quality<br />

• Very High–80% quality<br />

• High–60% quality<br />

• Medium–30% quality<br />

• Low–10% quality<br />

• Custom–1-100% (only for JPEG files)<br />

2. Click Apply, and then OK.<br />

To create a custom image quality preset for JPEG files:<br />

1. In the Optimization section, of the project Settings page, select the Custom image quality preset value from the<br />

Image Quality dropdown menu.<br />

- 136 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 5-3: Creating a custom image quality preset for JPEG files.<br />

2. Move the quality control slider to the left to lower the quality level or to the right to increase the quality level.<br />

- 137 -


CHAPTER 5: Optimizing Projects<br />

Optimizing at the Page Level<br />

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

Optimizing a project refers to managing when data is transferred to the mobile user's device. This section describes how<br />

to optimize at the page level.<br />

The optimize settings at the page level are:<br />

• Load on demand–Selecting this setting causes the project to load data, including images, only when the user<br />

performs an action, or there is a dynamic action, that requires the data to display on the mobile device. This setting<br />

improves the project's initial loading time.<br />

• Preload images–Selecting this setting causes the project to preload images (with the exception of background<br />

images) before the images are required to display on the user's mobile device. This setting improves the user's<br />

experience once the initial loading of data is complete.<br />

You can set the Load on demand and Preload images settings at the page level. If the project level Preload all images<br />

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<br />

demand. By default when you select the page's Download on demand setting the page's Preload Images setting is also<br />

active. In other words, when you activate the page level load on demand setting it does not override the project level<br />

Preload Images setting. However, you can deactivate the page level Preload Images setting. In this case everything<br />

including images are loaded on demand. If a page includes a View Set or Tab Set widget and you activate the view's or<br />

tab's Download on demand and/or Preload Images settings, the view's or tab's settings override the page level settings.<br />

The Load on demand and Preload Images page level settings appear on the Properties panel's General tab.<br />

Changing the Page Level Optimize Settings<br />

To set the page to download data on demand:<br />

1. On the Page Outline panel, select the page.<br />

2. On the General tab, select Load on demand.<br />

Beneath the Load on demand checkbox, the Preload Images checkbox appears already selected.<br />

- 138 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 5-4: Selecting the page level Load on demand and Preload Images settings<br />

3. If you want page level images to preload, keep the Preload Images checkbox selected, if not, deselect it.<br />

To set the page to preload images:<br />

1. By default, the project level Preload Images setting is active. Unless you want to activate the page's Download on<br />

Demand setting, you do not need to do anything to preload images at the page level.<br />

• If the Download on demand setting is not active on the page's Properties pane's, General tab, as seen in<br />

Figure 5-5 on page 140, then do nothing.<br />

- 139 -


CHAPTER 5: Optimizing Projects<br />

Figure 5-5: Load on demand setting at the page level<br />

• If the Download on demand setting is active, as seen in Figure 5-4 on page 139, then select the Preload<br />

Images checkbox beneath the Download on demand checkbox. (By default, it is already selected.)<br />

- 140 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Optimizing at the View or Tab Level<br />

You can optimize a project at the project, page, and view or tab level by using the progressive loading of data (Preload<br />

Images and Load on demand) settings. Optimizing a project refers to managing when data is transferred to the mobile<br />

user's device. This section describes how to optimize at the view or tab level.<br />

The optimize settings at the view or tab level are:<br />

• Preload images–Selecting this setting causes the project to preload images (with the exception of background<br />

images) before the images are required to display on the user's mobile device. This setting improves the user's<br />

experience once the initial loading of data is complete.<br />

• Load on demand–Selecting this setting causes the project to load data, including images, only when the user<br />

performs an action, or there is a dynamic action, that requires the data to display on the mobile device. This setting<br />

improves project loading time.<br />

The Load on demand and Preload Images view or tab level settings appear only for the View Set, Tab Set, and Gallery<br />

widgets. The Load on demand and Preload Images appear on the widget's General tab. (In the Gallery widget, these<br />

settings appear on the image View component's General tab.)<br />

When these settings are active they override the project and page level settings. For example, if the project level setting<br />

Preload Images is not active, the page level setting Load on demand is active, and the page level Preload Images setting<br />

is not active, then activating the view or tab level Load on demand and Preload Images settings means only this view or<br />

tab on this page is set to preload images.<br />

Changing the View or Tab Level Optimize Settings<br />

To set a view to download data on demand and preload images:<br />

1. Drag and drop a View Set (Tab Set or Gallery) widget onto the canvas.<br />

2. Add views to the View Set (tabs to the Tab Set or image to the Gallery) widget.<br />

3. On the Page Outline pane, select a view (or tab). (For the Gallery widget you need to select an image in the Photo<br />

list and then double-click on the image to open the image View.)<br />

4. On the General tab, select Load on demand, as seen in Figure 5-6 on page 142.<br />

Beneath the Load on demand checkbox, the Preload Images checkbox appears already selected.<br />

- 141 -


CHAPTER 5: Optimizing Projects<br />

Figure 5-6: Selecting the Load on demand checkbox<br />

5. If you want view (or tab) level images to preload, keep the Preload Images checkbox selected, if not, deselect it.<br />

- 142 -


CHAPTER 6: Importing and Managing Assets<br />

CHAPTER 6: Importing and Managing Assets<br />

<strong>5ml</strong> lets you import your creative assets and use them in multiple projects and pages. This chapter covers the following<br />

topics:<br />

• "Accessing the Library Pane" on page 144<br />

• "Creating Folders" on page 146<br />

• "Importing Images" on page 149<br />

• "Importing Video" on page 152<br />

- 143 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Accessing the Library Pane<br />

To create a successful web project, you need to use high-quality creative assets in your pages. These assets typically<br />

include graphics, icons, images, and even audio and video clips. <strong>5ml</strong> helps you organize your creative assets and use<br />

them in multiple projects and pages. You can import assets into <strong>5ml</strong> at any time while working on projects. Each<br />

registered user can use up to 100 MB of storage for storing assets.<br />

To import assets, open the Project Editor by opening a project page (for details, see "Opening a Project" on page 112). On<br />

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<br />

page 144.<br />

Figure 6-1: Clicking the Assets tab of the Library pane to show the Assets pane.<br />

The Assets pane of the Library is empty until you import assets. However, before importing assets, you may want to<br />

create folders in the pane first, so that you can import assets directly into the folders, thereby making the assets easier to<br />

find in the Assets pane. See "Creating Folders" on page 146.<br />

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<br />

Image, select the image on the Assets pane and click on the magnifier icon that appears at the top right corner of the<br />

image icon. The preview window opens to display the image.<br />

- 144 -


CHAPTER 6: Importing and Managing Assets<br />

Figure 6-2: Showing the Image preview in the Assets pane.<br />

- 145 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Creating Folders<br />

To create a folder in the Assets pane so that you can organize your assets in folders:<br />

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

pane, as shown in Figure 6-3 on page 146.<br />

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

Figure 6-3: Adding a folder to the Assets pane of the Library.<br />

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

For example, you might name the folder "people photos", as shown in Figure 6-4 on page 147, if you are going to<br />

upload photos of people.<br />

The folder appears in the Assets pane, along with the Home icon in the upper left corner, as shown in Figure 6-5<br />

on page 147.<br />

- 146 -


CHAPTER 6: Importing and Managing Assets<br />

Figure 6-4: Naming the folder and creating it.<br />

Figure 6-5: Double-clicking the folder to open it.<br />

- 147 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

3. Double-click the folder to open it.<br />

The folder name appears next to the Home icon, as shown in Figure 6-6 on page 148, to show that the folder is<br />

open. After opening the folder, you can click the upload assets button (the document icon with a plus sign on its left<br />

side) to add asset files to the folder.<br />

After opening a folder, you can click the Home icon in the Assets pane to return to the top view of folders.<br />

Figure 6-6: Opening a folder in the Assets pane.<br />

- 148 -


CHAPTER 6: Importing and Managing Assets<br />

Importing Images<br />

To import image assets:<br />

1. Choose Images from the drop-down menu at the top of the Assets pane (under the Assets tab).<br />

2. Click the upload assets button (the document icon with a plus sign), as shown in Figure 6-7 on page 149.<br />

Tip: If you have already opened a folder (see "Creating Folders" on page 146), the assets you select are imported<br />

directly into the folder.<br />

After clicking the upload assets button, the Select Files to Upload dialog appears, as shown in Figure 6-8 on page<br />

150.<br />

Figure 6-7: Upload asset files to the Assets pane.<br />

- 149 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 6-8: Select images to upload.<br />

3. Select one or more files, and click the Open button in the bottom right corner of the dialog.<br />

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<br />

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<br />

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<br />

key on a Windows PC, while clicking each subsequent file. When you are finished selecting files, click the Open button in<br />

the bottom right corner of the dialog<br />

- 150 -


CHAPTER 6: Importing and Managing Assets<br />

Importing Audio<br />

To import audio assets, follow these steps:<br />

1. Choose Audio from the drop-down menu at the top of the Assets pane (under the Assets tab).<br />

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<br />

151.<br />

Figure 6-9: Import audio into the Assets pane.<br />

After clicking the upload assets button, the Select Files to Upload dialog appears.<br />

3. Select one or more files, and click the Open button in the bottom right corner of the dialog.<br />

Tip: If you have already opened a folder (see "Creating Folders" on page 146), the assets you selected are uploaded<br />

directly into the folder.<br />

Tip: To select a contiguous range of files to upload, click the first file in the range, and hold down the Shift key while<br />

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<br />

down the Cmd key on a Mac, or the Ctrl key on a Windows PC, while clicking each subsequent file. When you are finished<br />

selecting files, click the Open button in the bottom right corner of the dialog.<br />

- 151 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Importing Video<br />

To import video assets, follow these steps:<br />

1. Choose Videos from the drop-down menu at the top of the Assets pane (under the Assets tab).<br />

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<br />

152.<br />

Figure 6-10: Upload videos into the Assets pane.<br />

After clicking the upload assets button, the Select Files to Upload dialog appears.<br />

3. Select one or more files, and click the Open button in the bottom right corner of the dialog.<br />

Tip: If you have already opened a folder (see "Creating Folders" on page 146), the assets you select are uploaded<br />

directly into the folder.<br />

Tip: To select a contiguous range of files to upload, click the first file in the range, and hold down the Shift key<br />

while clicking the last file in the range. To select multiple files that are not contiguous in a range, click the first file,<br />

and then hold down the Cmd key on a Mac, or the Ctrl key on a Windows PC, while clicking each subsequent file.<br />

When you are finished selecting files, click the Open button in the bottom right corner of the dialog.<br />

- 152 -


CHAPTER 6: Importing and Managing Assets<br />

Deleting Assets<br />

To delete one or more assets or folders containing assets:<br />

1. Select one or more assets (images or videos), or one or more folders, in the Assets pane.<br />

To select more than one asset or folder in a contiguous range, click the first asset or folder, and then hold down<br />

the Shift key while clicking the last asset or folder in the range. To select assets or folders that are not contiguous<br />

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<br />

PC, while clicking each subsequent asset or folder.<br />

2. Click the delete file button (the document icon with a minus sign), as shown in Figure 6-11 on page 153.<br />

A warning dialog appears asking if you are sure you want to delete the selected items.<br />

3. Click Delete in the warning dialog (or Cancel to cancel the delete operation).<br />

Warning: You can't undo the deletion of assets.<br />

Figure 6-11: Deleting assets from the Assets pane.<br />

- 153 -


CHAPTER 7: Working in the Project Editor<br />

CHAPTER 7: Working in the Project Editor<br />

The Project Editor includes the Canvas where you edit your pages, and the Library, Page Outline, and Properties panes.<br />

This chapter covers the following topics:<br />

• "About the Project Editor" on page 155<br />

• "Adding a Page in the Project Editor" on page 157<br />

• "Using a Tracing Image" on page 158<br />

• "Changing Page Properties" on page 160<br />

• "Placing Elements on a Page" on page 168<br />

• "Resizing Page Elements" on page 171<br />

• "Aligning Page Elements" on page 175<br />

• "Arranging and Overlapping Page Elements" on page 181<br />

• "Copying, Pasting, and Deleting Page Elements" on page 187<br />

• "Opening and Closing Pages in the Canvas" on page 189<br />

• "Saving Pages" on page 190<br />

• "Previewing Pages From the Canvas" on page 191<br />

• "Canvas Viewing Options" on page 192<br />

- 154 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

About the Project Editor<br />

The Project Editor is comprised of the following:<br />

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

• The Library pane (top left side), which contains the widgets for placing on the Canvas, and your project assets<br />

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

• The Canvas (center), in which you edit your pages (also includes the Canvas top and bottom toolbars)<br />

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

Figure 7-1: Choosing Undo in the Project Editor to undo the last action performed on the Canvas.<br />

Menu Bar<br />

The menu bar (along the top) includes the New (page) button, the Open and Save (page) menus, and the Preview<br />

(project) button.<br />

Library Pane<br />

The Library pane (which includes the Widgets and Assets panes) appears in the top left side of the Project Editor window,<br />

providing widgets and assets that you can place on the pages in the Canvas.<br />

- 155 -


CHAPTER 7: Working in the Project Editor<br />

Page Outline Pane<br />

The Page Outline pane appears in the bottom left side and shows the hierarchy of elements on the page, which indicates<br />

elements that are in front of other elements. To open the Page Outline hierarchy, click the disclosure triangle next to Page<br />

in the Page Outline pane. When you select an element on the page, the element is also selected in the hierarchy of<br />

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<br />

in the Canvas. The Page Outline pane includes a show/hide element icon which allows you to show or hide an element on<br />

the canvas. In addition, the Page Outline pane includes lock/unlock element icons which allows you to lock an element to<br />

its current position on the canvas.<br />

Canvas<br />

After you open a project (for details, see "Opening a Project" on page 112), the Canvas appears in the center of the<br />

Project Editor window, as shown in Figure 7-1 on page 155. The Canvas shows the page, and provides top and bottom<br />

toolbars for aligning, resizing, rotating, and arranging elements on the page; for copying or cutting and pasting elements;<br />

for deleting elements; and for undoing actions in the Canvas. As you work in the Canvas, you can Undo any action by<br />

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<br />

use as a guide for placing the elements on the page. For more information, see "Using a Tracing Image" on page 158.<br />

Properties Pane<br />

The Properties pane, which appears on the right side, enables you to change the properties of the selected element on<br />

the page. For example, if you select a text element on the page, the Properties pane lets you change the text element's<br />

properties (for details, see "Changing Text Properties" on page 208).<br />

- 156 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Adding a Page in the Project Editor<br />

You can no longer add pages to a project on the My Projects page; you can add pages only within the Project Editor.<br />

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

Note: If you want the new page to be the project's home page, see "Setting a Project's Home Page" on page 116.<br />

To add a new page to the project:<br />

1. First open the project by showing the project's pages and opening a project page, see "Opening a Project" on page<br />

112.<br />

2. Click New... in the Project Editor menu bar above the Canvas.<br />

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<br />

"Page 2") appears above the Canvas for each open page. You can click the page tab to switch from one page to<br />

another.<br />

Figure 7-2: Adding a new page to the project.<br />

- 157 -


CHAPTER 7: Working in the Project Editor<br />

Using a Tracing Image<br />

A tracing image is a mockup of the page that appears as a guide for placing the page elements. The concept is similar to<br />

using tracing paper to trace over an image. You can control the opacity of the tracing image so that you can see the page<br />

elements you are arranging more clearly, or see the tracing image more clearly.<br />

To use a tracing image with your page, you need to first import a mockup image for your page into the Assets pane (for<br />

details, see "Importing Images" on page 149).<br />

To assign the tracing image to the page:<br />

1. Click the page in the Canvas, or select Page in the Page Outline pane on the lower left side of the Project Editor<br />

next to the Canvas.<br />

After selecting the page, the page properties appear in the Properties pane on the right side of the Project Editor<br />

next to the Canvas.<br />

2. Drag the mockup image in the Assets pane to the tracing image well in the Properties pane, as shown in Figure 7-3<br />

on page 158.<br />

Figure 7-3: Dragging a mockup image to use as a tracing image on the page.<br />

3. Click the Tracing Image option above the tracing image well to turn it on.<br />

4. Drag the Opacity slider, which is beneath the tracing image well, in order to increase or reduce the opacity of the<br />

tracing image.<br />

- 158 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Dragging the slider to the left reduces the opacity of the tracing image, increasing its transparency so that you can<br />

see the page elements better. Dragging the slider to the right increases the opacity of the tracing image, so that<br />

you see the tracing image better.<br />

Figure 7-4: Dragging the Opacity slider to set the tracing image's opacity.<br />

- 159 -


CHAPTER 7: Working in the Project Editor<br />

Changing Page Properties<br />

You can change the page's background, border, and opacity in the Appearance tab of the Properties pane, and add<br />

padding to the inner edges of the page in the Layout section of the Properties pane. You can also add a tracing image to<br />

the General tab of the Properties pane to use as a guide for placing elements (for details, see "Using a Tracing Image" on<br />

page 158). In addition, on the General tab you can set the page level optimize settings, see "Optimizing at the Page Level"<br />

on page 138.<br />

To change the page properties, click the page in the Canvas, or select Page in the Page Outline pane. After selecting the<br />

page, the page properties appear in the Properties pane on the right side of the Project Editor next to the Canvas, as<br />

shown in Figure 7-5 on page 160.<br />

Figure 7-5: Selecting the page in the Page Outline pane.<br />

Changing the Page Background<br />

To change the page background, on the Properties panel's Appearance tab, choose Color, Linear Gradient, Image Fill, or<br />

None for the Background drop-down menu. Choosing None specifies no background color, gradient, or image (for<br />

example, if you already selected a color, gradient, or image, select None to delete it).<br />

To add color to the page background:<br />

- 160 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

1. Select Color in the Background drop-down menu.<br />

The HTML color code box appears underneath the Background drop-down menu, showing the HTML code for<br />

white (#FFFFFF), as shown in Figure 7-6 on page 161. You can enter the color's HTML code in the box, or<br />

continue with these steps to pick the color.<br />

Figure 7-6: Choosing color for the page background.<br />

2. Click inside the HTML color code box.<br />

The color picker appears in the Properties pane, as shown in Figure 7-7 on page 162.<br />

- 161 -


CHAPTER 7: Working in the Project Editor<br />

Figure 7-7: Selecting a color in the color picker.<br />

3. Click inside the color picker to pick a color.<br />

4. Drag the slider on the right side of the color picker to adjust the value of the color component (from saturated to<br />

black), as shown in Figure 7-8 on page 163.<br />

- 162 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 7-8: Adjusting the value of the color component.<br />

To set a linear gradient of color for the page background:<br />

1. Select Linear Gradient in the Background drop-down menu.<br />

A gradient line appears underneath the Background menu, as shown in Figure 7-9 on page 163.<br />

Figure 7-9: Selecting a linear gradient of color for the page background.<br />

- 163 -


CHAPTER 7: Working in the Project Editor<br />

2. Click the HTML color code box at the left end of the gradient line to show the color picker.<br />

3. Click inside the color picker to pick the starting color for the gradient, as shown in Figure 7-10 on page 164.<br />

4. Drag the slider on the right side of the color picker to adjust the color component value (from saturated to black).<br />

Figure 7-10: Picking the starting color for a linear gradient background for the page.<br />

5. Click the HTML color code box at the right end of the gradient line to show the color picker.<br />

6. Click inside the color picker to pick the ending color for the gradient.<br />

7. Drag the slider on the right side of the color picker to adjust the color component value (from saturated to black).<br />

8. Click one of the two gradient buttons underneath the gradient line to set the gradient to flow from top to bottom, as<br />

shown in Figure 7-11 on page 165, or from side to side.<br />

To experiment with the gradient, you can click the button to the right of the two gradient buttons to switch the starting and<br />

ending colors of the gradient.<br />

- 164 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 7-11: Setting the linear gradient to flow from top to bottom.<br />

To set an image as the page background (filling the background):<br />

1. Select Image Fill in the Background drop-down menu.<br />

An image well appears under the menu.<br />

2. Drag an image from the Assets pane to the image well.<br />

3. Use the Original Size drop-down menu to specify whether the image should remain in its original size, or be<br />

stretched or scaled (resized up) to fit the background, as shown in Figure 7-12 on page 166.<br />

- 165 -


CHAPTER 7: Working in the Project Editor<br />

Figure 7-12: Adding an image fill to the page background, and setting the image fill size.<br />

Adding a Page Border<br />

To add a border around the page:<br />

1. Choose a line type, such as Line (Simple Mode), in the Border drop-down menu.<br />

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).<br />

3. Specify the line size and roundness (for rounded corners).<br />

4. Specify the border's color by clicking the HTML color box underneath the Border menu to show the color picker,<br />

and then picking a color.<br />

- 166 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 7-13: Adding a border to the page, and setting the style for the line or frame style for the border.<br />

Changing the Page Opacity<br />

To set the opacity for the entire page, including existing elements on the page, drag the Opacity slider underneath the<br />

Border menu in the Appearance tab of the Properties pane.<br />

Dragging the Opacity slider to the left reduces the opacity of the page and its elements (fading the entire page), while<br />

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<br />

use normal opacity.<br />

Adding Page Padding<br />

You can add padding to the inner edges of the page to create space between the edge of the page and page elements. To<br />

add padding, enter the number of pixels in the Top, Bottom, Left, and Right fields in the Layout tab of the Properties pane.<br />

- 167 -


CHAPTER 7: Working in the Project Editor<br />

Placing Elements on a Page<br />

To place elements such as images, graphics, text, buttons, and video clips on the page, drag them from the Library pane<br />

to the Canvas. You can then resize and arrange these elements to fit your page design.<br />

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<br />

can place the element it creates anywhere on the page, and then edit the Text element by double-clicking it. You can also<br />

select the text in the Text element and change its font, size, and other properties. (For more details on editing and<br />

changing text properties, see "Changing Text Properties" on page 208).<br />

Figure 7-1: Placing a Text widget element on the page in the Canvas.<br />

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<br />

your assets are not yet ready to use, you can drag Image and Video widgets to use as placeholders, and when your<br />

assets are ready to use, drag the assets from the Assets pane into the Source field on the widget element's Properties<br />

pane, as shown in Figure 7-3 on page 169.<br />

- 168 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 7-2: Placing an image asset on a page in the Canvas.<br />

Figure 7-3: Dragging an image from the Assets pane to place inside an Image widget element.<br />

- 169 -


CHAPTER 7: Working in the Project Editor<br />

Placing Elements Freely or Using Arrow Keys<br />

When placing an element on the page, you can drag it freely to any position. Once placed on the canvas, you can also use<br />

the arrow keys on your keyboard to move an element precisely (one pixel at a time) in one direction, such as up, down,<br />

left, or right. Using two keys at a time, you can even move the element diagonally.<br />

Placing Elements Using Page Coordinates<br />

To place an element using precise page coordinates, select the element and use the Layout tab of the Properties pane on<br />

the right side of the Canvas, as shown in Figure 7-4 on page 170.<br />

For example, you can click inside the X and Y Position fields to enter coordinates in pixels for the top left corner of the<br />

element. You can also use the keywords "center", "left", and "right" for the X Position field (for example, "center" centers<br />

the element horizontally on the page), and "top", "middle", or "bottom" with the Y Position field. You can also specify a<br />

percentage (such as "60%" in the Y Position field to place an element starting at exactly 60% of the distance from the top<br />

of the page).<br />

Figure 7-4: Placing an element using precise page coordinates in the Layout tab of the Properties pane.<br />

- 170 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Resizing Page Elements<br />

To resize an element on a page in the Canvas, drag one of the handles along the edges of the element. Dragging a side<br />

handle stretches the element horizontally, while dragging a top or bottom handle stretches it vertically; dragging a corner<br />

handle stretches the element both horizontally and vertically, as shown in Figure 7-5 on page 171.<br />

When you resize a Text, Label, or Button element, the size of the text in the element doesn't change — only the element<br />

itself changes. (For details on resizing the text, see "Changing Text Properties" on page 208.)<br />

Figure 7-5: Resizing an Image element on a page in the Canvas.<br />

When resizing Image elements and other elements by dragging the handles along the edges of the element, the<br />

dimensions of the element (in pixels) appear in a pop-up box. When you resize an image or video, the image or video<br />

picture inside the element also changes size.<br />

You can resize an element to be the same size as another element. Select two elements and click the following tabs at the<br />

top of the Canvas:<br />

• Same Width, as shown in Figure 7-6 on page 172, changes the thinner selected element to have the same width as<br />

the wider selected element.<br />

• Same Height, as shown in Figure 7-7 on page 172, changes the shorter selected element to have the same height<br />

as the taller selected element.<br />

• Same Width & Height, as shown in Figure 7-8 on page 173, changes the smaller selected element to be the same<br />

size as the larger selected element.<br />

- 171 -


CHAPTER 7: Working in the Project Editor<br />

Figure 7-6: Resizing an element to match the width of another element.<br />

Figure 7-7: Resizing an element to match the height of another element.<br />

- 172 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 7-8: Resizing an element to be the same size as another element.<br />

To resize an element to specific dimensions, or to constrain the proportions of the element while resizing, select the<br />

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<br />

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<br />

the Constrain Proportions option in order to freely resize the element in the same aspect ratio.<br />

- 173 -


CHAPTER 7: Working in the Project Editor<br />

Figure 7-9: Specifying an exact size for the element and turning on the Constrain Proportions option.<br />

- 174 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Aligning Page Elements<br />

There are a number of methods to position and align page elements on the Canvas. You can drag page elements on to the<br />

Canvas and freely move and arrange the elements. You can use the keyboard arrow keys to freely move and arrange<br />

elements on the Canvas. You can use the alignment buttons along the top of the Canvas to precisely align a page element<br />

to another page element or to the parent element. The parent element is either the page itself (the parent to all elements<br />

on the page), or a page element that holds other page elements (such as a Container or Tab Set widget). Additionally,<br />

you can use page or element snap-to grid lines.<br />

Placing Elements Freely or Using Arrow Keys<br />

When placing an element on the page, you can drag it freely to any position. Once placed on the Canvas, you can also use<br />

the arrow keys on your keyboard to move an element precisely (one pixel at a time) in one direction, such as up, down,<br />

left, or right. Using two keys at a time, you can even move the element diagonally.<br />

Aligning Elements Using the Alignment Buttons<br />

The six alignment buttons (Align Left, Align Center, Align Right, Align Top, Align Middle, and Align Bottom) are located at<br />

the center-right of the Canvas Toolbar, and are followed by the Snap to Parent on/off button. If you click the Snap to<br />

Parent button to turn it on (the button is highlighted when turned on), the alignment buttons align the selected element or<br />

elements to the parent. If the Snap to Parent button is turned off (not highlighted), you must select two page elements to<br />

align them to each other.<br />

For example, if the Snap to Parent button is turned off, you can select two elements on the page (click the first element,<br />

and then Shift-click the second element), and align them by clicking the alignment buttons:<br />

• Align Left to align the rightmost element to the leftmost element along the leftmost element's left side, as shown in<br />

Figure 7-10 on page 175.<br />

Figure 7-10: Aligning two page elements vertically along the left side.<br />

- 175 -


CHAPTER 7: Working in the Project Editor<br />

• Align Center to center the elements vertically.<br />

• Align Right to align the leftmost element to the rightmost element along the rightmost element's right side, as<br />

shown in Figure 7-11 on page 176.<br />

Figure 7-11: Aligning two page elements vertically along the right side.<br />

• Align Top, as shown inFigure 7-12 on page 176, to align the lower element to the top of the higher element.<br />

Figure 7-12: Aligning the top of one page element to the top of another element.<br />

• Align Bottom, as shown in Figure 7-13 on page 177, to align the higher element to the bottom of the lower<br />

element.<br />

- 176 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 7-13: Aligning the bottom of one page element to the bottom of another page element.<br />

• Align Middle, as shown in Figure 7-14 on page 177, to align the middle of the elements horizontally.<br />

Figure 7-14: Aligning the middle of the page elements horizontally.<br />

If you click the Snap to Parent button to turn it on, the alignment buttons align the selected element or elements to the<br />

parent. The parent is either the page itself (the parent to all elements on the page), or a page element that holds other<br />

page elements (such as a Container or Tab Set widget).<br />

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<br />

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<br />

- 177 -


CHAPTER 7: Working in the Project Editor<br />

(the page is the parent of the element). You can quickly center an element horizontally on the page by clicking Snap to<br />

Parent to turn it on, and then clicking Align Center.<br />

Figure 7-15: Clicking Snap to Parent to turn it on (the page itself is the parent of the two rectangle elements).<br />

Figure 7-16: Clicking Align Left to align the image to the left side of the parent (the page), with Snap to Parent turned<br />

on.<br />

- 178 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Aligning Elements Using Page and Element Snap-to Grid Lines<br />

When placing elements on a page you can use the snap-to grid lines to align elements. Snap-to works in two ways; snapto<br />

align with a page grid line or snap-to align with another element.<br />

The snap-to page grid lines are located at the vertical center and horizontal center of the page, as well as at each (top,<br />

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<br />

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<br />

horizontal center to a page grid line. For example, you can align a Button element's bottom edge with the page's<br />

horizontal center snap-to grid line, and align its vertical center points with the page's vertical center line snap-to grid line,<br />

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<br />

snap-to grid lines, also shown in Figure 7-17 on page 179.<br />

Figure 7-17: Snap-to page grid lines.<br />

The snap-to element grid lines are located at the vertical center and horizontal center of the element, as well as at each<br />

(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<br />

as the element it is being aligned too, for example, two Button elements with the default size, elements are aligned using<br />

the left and top element grid lines.) The element's outline has six snap-to handles. This lets you align a second element to<br />

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<br />

button element's top edge with another element's top snap-to grid line, as shown in Figure 7-18 on page 180.<br />

- 179 -


CHAPTER 7: Working in the Project Editor<br />

Figure 7-18: Snap-to element edge grid lines.<br />

You can also align the second element's vertical center or horizontal center to the first element's vertical center or<br />

horizontal center grid line. For example, you can align a button element's horizontal center line with another element's<br />

horizontal snap-to grid line, as shown in Figure 7-19 on page 180.<br />

Figure 7-19: Snap-to element center grid lines.<br />

- 180 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Arranging and Overlapping Page Elements<br />

Page elements can appear in front of or behind other elements on the page. You can overlap one element over another<br />

by selecting the element and dragging it over the other element. The overlapping element appears either in front of or<br />

behind the other element depending on its position in the hierarchy of elements in the Page Outline pane on the lower left<br />

side of the Project Editor next to the Canvas.<br />

You can arrange the elements so that one covers the other, or vice-versa. To select a page element that is hard to select<br />

on the Canvas because it is behind another element, click on the element's name in the Page Outline pane. After selecting<br />

one or more elements, you can click the following buttons at the top of the Canvas (to the left of the alignment buttons) to<br />

arrange the elements in the hierarchy:<br />

• Move Forward, as shown in Figure 7-20 on page 181, moves the selected element forward, in front of another element.<br />

In the Page Outline pane, the element moves up one level in the hierarchy.<br />

• Move Backward, as shown in Figure 7-21 on page 182, moves the selected element backward, in back of another<br />

element. In the Page Outline pane, the element moves down one level in the hierarchy.<br />

• Bring to Front, as shown in Figure 7-22 on page 182, moves the selected element in front of all other elements. In<br />

the Page Outline pane, the element moves to the top of the hierarchy under Page.<br />

• Send to Back, as shown in Figure 7-23 on page 183, moves the selected element in back of all other elements. In<br />

the Page Outline pane, the element moves to the bottom of the hierarchy.<br />

You can also use the Arrange buttons to change the order of tabs and views in the Tab Set and View Set elements (for<br />

details, see "Using the Tab Set Widget" on page 327 and "Using the View Set Widget" on page 335).<br />

Figure 7-20: Moving an overlapping element forward, in front of another element.<br />

- 181 -


CHAPTER 7: Working in the Project Editor<br />

Figure 7-21: Moving an overlapping element backward, behind another element.<br />

Figure 7-22: Moving an element in front of all other elements.<br />

- 182 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 7-23: Moving an element behind all other elements.<br />

- 183 -


CHAPTER 7: Working in the Project Editor<br />

Showing and Hiding Page Elements<br />

The Page Outline pane includes a show/hide element icon which allows you to show or hide an element on the canvas.<br />

Some elements are parent elements, for example, the Container element. In the case of a parent element, you can show<br />

or hide at the parent level or at the child element level. For example, Figure 7-1 on page 184 shows the Container<br />

element, the parent element, and hides one of its Image elements, a child element. (The red rectangle as shown<br />

indicates where the hidden Image element would display if it was not hidden; it does not appear on the Canvas.) When a<br />

parent element is hidden so are all of its child elements.<br />

Figure 7-1: Hiding an Image element on the Canvas.<br />

To hide a page element:<br />

1. Select the page element either on the Canvas on in the Page Outline pane.<br />

2. Click on the show/hide ( ) icon located in the Page Outline's left column.<br />

The show/hide icon no longer appears and the element is hidden on the Canvas.<br />

To show a page element:<br />

1. On the Page Outline, click in the show/hide column to the left of the element.<br />

The show/hide (<br />

) icon appears and the element displays on the Canvas.<br />

- 184 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Locking and Unlocking Page Elements<br />

The Page Outline pane includes a lock/unlock element icon which allows you to lock an element to its current position on<br />

the canvas. Some elements are parent elements, for example, the Container element. In the case of a parent element,<br />

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<br />

Container element unlocked, the parent element, and two Image elements, one locked and the other unlocked. Both<br />

Image elements are child elements of the Container element. The first Image element, being unlocked can be manually<br />

moved to another position on the page as shown Figure 7-1 on page 185. The second Image element being locked cannot<br />

be moved. When a parent element is locked so are all of its child elements.<br />

Figure 7-1: Moving an unlocked Image element on the Canvas.<br />

To lock a page element:<br />

1. Select the page element either on the Canvas on in the Page Outline pane.<br />

2. Click on the lock/unlock ( ) icon located in the Page Outline's middle column.<br />

The lock/unlock icon no longer appears and the element is locked on the Canvas and cannot be manually moved<br />

on the Canvas.<br />

To unlock a page element:<br />

1. On the Page Outline, click in the lock/unlock column to the left of the element.<br />

The lock/unlock (<br />

) icon appears and the element is unlocked on the Canvas and can be manually moved.<br />

- 185 -


CHAPTER 7: Working in the Project Editor<br />

Rotating Page Elements<br />

To rotate an element on the Canvas, click the Rotate button (with the circular arrow icon<br />

toolbar, beneath the Canvas.<br />

) located on the bottom<br />

Figure 7-2: Rotate button on bottom toolbar.<br />

When you select the element to rotate, its handles change from blue to white. Place the cursor over a handle to display<br />

the rotate cursor, then holding down the mouse button, move the element in either a clockwise or counter-clockwise<br />

direction, as shown in Figure 7-3 on page 186.<br />

Figure 7-3: Rotating a Button element on the canvas.<br />

You can rotate the element to a precise angle of rotation using the Rotation field on the Properties pane's Layout tab. In<br />

the Rotation field, enter the exact rotation degree value, as shown in Figure 7-3 on page 186.<br />

- 186 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Copying, Pasting, and Deleting Page Elements<br />

To copy an element from one place to another on the page, or from one page to another page, select the element, and<br />

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.<br />

Figure 7-4: Copying the selected element.<br />

The Copy operation makes a copy of the element, leaving the original element on the page. To remove the original<br />

element while moving it to another location or another page, click the Cut button next to the Copy button (refer to Figure<br />

7-4 on page 187.<br />

To paste the copied or cut element on the same page, click the Paste button next to the Copy button, as shown in Figure<br />

7-5 on page 188.<br />

To paste the copied or cut element on another page, switch to another page and then click the Paste button. (For details<br />

on adding another page to the Canvas and switching pages in the Canvas, see "Adding a Page in the Project Editor" on<br />

page 157).<br />

To delete an element from the page, select the element and then click the Delete button next to the Paste button at the<br />

top of the Canvas, as shown in Figure 7-6 on page 188.<br />

- 187 -


CHAPTER 7: Working in the Project Editor<br />

Figure 7-5: Pasting the copied (or cut) element on the page.<br />

Figure 7-6: Deleting an element on the page.<br />

- 188 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Opening and Closing Pages in the Canvas<br />

To open another page in your project, choose the page (such as Page 2, or Page 3, etc.) from the Open menu in the<br />

Project Editor menu bar above the Canvas, as shown in Figure 7-7 on page 189.<br />

You must have already created the page, either on the My Projects page (see "Adding a Page to a Project" on page 113)<br />

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<br />

indicates that the page is already open in the Canvas. Tabs for the page appear above the Canvas — click the tab for the<br />

page to jump to that page.<br />

Figure 7-7: Opening another page in the Canvas.<br />

To close a page, click the "x" button on the right side of the page tab (refer to Figure 7-7 on page 189).<br />

- 189 -


CHAPTER 7: Working in the Project Editor<br />

Saving Pages<br />

You use a browser to access <strong>5ml</strong>. Browser access to Internet resources can suddenly fail for any number of reasons<br />

(including a lost Internet connection), so you should save your work in a project as often as possible.<br />

To save the page currently open, choose Save from the Save menu in the Project Editor menu bar above the Canvas, as<br />

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.<br />

Figure 7-8: Saving the page in the ad project.<br />

- 190 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Previewing Pages From the Canvas<br />

You can preview the entire project while working in the Project Editor. Click the Preview button in the Project Editor menu<br />

bar above the Canvas. For a detailed description of previewing the project, see "Previewing a Project" on page 120<br />

- 191 -


CHAPTER 7: Working in the Project Editor<br />

Canvas Viewing Options<br />

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<br />

the Canvas. Dragging the zoom slider to the right zooms into the page to see more detail, and dragging to the left zooms<br />

out of the page to see more of the page.<br />

You can increase or decrease the width of the Canvas by dragging the right edge of the Canvas, as shown in Figure 7-9<br />

on page 192. You can also increase or decrease the width of the Library and Page Outline panes by dragging the left edge<br />

of the Canvas.<br />

Figure 7-9: Dragging the right edge of the Canvas to make it wider.<br />

If you started your project with a variable-sized page (see "Adding a New Project" on page 94), you can see how the<br />

page will appear on different-sized devices or different screen orientations (portrait or landscape) by changing the<br />

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.<br />

- 192 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 7-10: Changing the Canvas page size to show a variable-sized page at different sizes and orientations.<br />

- 193 -


CHAPTER 8: Customizing Page Elements<br />

CHAPTER 8: Customizing Page Elements<br />

<strong>5ml</strong> lets you place a variety of elements on a page to build the content of the page. As you place elements, you can also<br />

customize them by changing their properties in the Properties pane. This chapter covers the following topics:<br />

• "Using the Properties Pane" on page 195<br />

• "Changing General Properties" on page 197<br />

• "Changing Appearance Properties" on page 198<br />

• "Changing Text Properties" on page 208<br />

• "Changing Layout Properties" on page 214<br />

• "Changing Behavior Properties" on page 223<br />

- 194 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Properties Pane<br />

<strong>5ml</strong> lets you place a variety of elements on a page to build the content of the page. As you place elements, you can also<br />

customize them by changing their properties, such as the element's appearance, position on the page, size, and text (if<br />

the element includes text), in the Properties pane. You can also customize some elements to associate it with an<br />

event/action behavior to perform when the user taps or clicks the element, such as navigating to another page or<br />

executing a custom script.<br />

After placing an element on the page (for details, see "Placing Elements on a Page" on page 168), you can select the<br />

element on the page or in the Page Outline pane and change its properties in the Properties pane on the right side of the<br />

Project Editor.<br />

The Properties pane, shown in Figure 8-1 on page 195, includes the following tabs:<br />

Figure 8-1: The Properties pane.<br />

• The General tab lets you define the element's optional object ID attribute, which you can use with custom HTML5<br />

markup, CSS3 style sheets, and JavaScript scripts to refer to the element object. Most elements also offer a<br />

unique set of General properties that you can change — for details, refer to each widget's description. If a page element<br />

supports tracking, the Track in analytics check box appears on the element's General tab.<br />

- 195 -


CHAPTER 8: Customizing Page Elements<br />

• The Appearance tab lets you set the element's background, border, and opacity, and also add a reflection or<br />

shadow to the element.<br />

• The Text tab appears only for elements that include text. It lets you change the font family and size of the text, the<br />

text color, the text alignment within the element, and other text formatting settings.<br />

• The Layout tab lets you set the size of the element, its position on the page, and for some elements, the amount of<br />

padding within the element. You can also constrain the proportions of the element when freely resizing it on the<br />

Canvas.<br />

• The 3D Transformations tab lets you transform any widget into a 3D version of that widget.<br />

• The Behavior tab lets you associate a page or page element with an event/action behavior.<br />

- 196 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Changing General Properties<br />

The General tab of the Properties pane lets you define an element's object ID (identifier), which can be used with HTML5<br />

markup, CSS3 style sheets, and JavaScript scripts to refer to the specific element.<br />

Most elements created from widgets also offer a unique set of General properties that you can change — for details, refer<br />

to each widget's description.<br />

To change an element's General properties, select the element on the page or in the Page Outline pane. The Properties<br />

pane for the element appears on the right side of the Project Editor, and the General tab is at the top of the Properties<br />

pane, as shown in Figure 8-2 on page 197.<br />

Figure 8-2: Choosing Stretch in the Fill Mode menu and Middle in the Vertical Align menu for the Image element.<br />

Object ID<br />

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<br />

necessary to enter an object ID, the ID can be used with HTML5 markup, CSS3 style sheets, and JavaScript scripts to<br />

refer to this specific element. The ID can be a word or any sequence of alphanumeric characters — such as "gallery_<br />

button1" shown in Figure 8-2 on page 197.<br />

Track in analytics<br />

If a page element supports tracking, the Track in analytics check box appears on the element's General tab. The Track in<br />

analytics check box only appears if you have enabled tracking at the project level. For more information, see "Adding Site<br />

Tracking" on page 374.<br />

- 197 -


CHAPTER 8: Customizing Page Elements<br />

Changing Appearance Properties<br />

The Appearance tab of the Properties pane (shown in Figure 8-3 on page 198) lets you set an element's background,<br />

border, and opacity, as well as add a reflection or shadow to the element.<br />

Figure 8-3: The Appearance tab of the Properties pane.<br />

Changing the Background<br />

To change the element's background, choose Color, Linear Gradient, Image Fill, or None in the Background drop-down<br />

menu. Choosing None specifies no background color, gradient, or image (for example, if you already selected a color,<br />

gradient, or image, select None to delete it).<br />

Color<br />

To set the background to a solid color:<br />

1. Choose Color from the Background drop-down menu.<br />

The HTML color code box appears underneath the Background drop-down menu, showing the HTML code for<br />

white (#FFFFFF), as shown in Figure 8-3 on page 198. You can enter the color's HTML code in the box, or<br />

continue with these steps to pick the color..<br />

2. Click inside the HTML color code box.<br />

The color picker appears in the Properties pane, as shown in Figure 8-4 on page 199.<br />

- 198 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 8-4: Selecting a color in the color picker and adjusting the value of the color component.<br />

3. Click inside the color picker to pick a color component.<br />

4. Drag the slider on the right side of the color picker to adjust the color component value (from saturated to black).<br />

Linear Gradient<br />

To set the background to a linear gradient of colors:<br />

1. Choose Linear Gradient from the Background drop-down menu.<br />

A gradient line appears underneath the Background menu, as shown in Figure 8-5 on page 200.<br />

2. Double-click the HTML color code box at the left end of the gradient line to show the color picker.<br />

- 199 -


CHAPTER 8: Customizing Page Elements<br />

Figure 8-5: Selecting a linear gradient of color in the Background menu.<br />

3. Click inside the color picker to pick a color component for the starting color of the gradient, as shown in Figure 8-6<br />

on page 201.<br />

4. Drag the slider on the right side of the color picker to adjust the value of the color component (from saturated to<br />

black).<br />

- 200 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 8-6: Choosing the starting color and adjusting the color value for the linear gradient.<br />

5. Double-click the HTML color code box at the right end of the gradient line to show the color picker.<br />

6. Click inside the color picker to pick the ending color for the gradient.<br />

7. Drag the slider on the right side of the color picker to adjust the color component value (from saturated to black).<br />

8. Click one of the four gradient buttons underneath the gradient line to set the gradient to flow from top to bottom,<br />

as shown in Figure 8-7 on page 202, from left to right, from top left corner to bottom right corner, or from bottom<br />

left corner to top right corner.<br />

- 201 -


CHAPTER 8: Customizing Page Elements<br />

Figure 8-7: Setting the linear gradient to flow from top to bottom.<br />

To experiment with the gradient, you can click the button to the right of the gradient buttons to switch the starting and<br />

ending colors of the gradient.<br />

To add more colors to the gradient line in between the start and end colors:<br />

1. Click on the gradient line to add a HTML color code box.<br />

2. Double-click on the HTML color code box to show the color picker.<br />

3. Click inside the color picker to pick the color for the gradient.<br />

4. Drag the slider on the right side of the color picker to adjust the color component value (from saturated to black).<br />

The gradient line now has three colors that graduate into each other, as shown in Figure 8-7 on page 202.<br />

5. Drag the HTML color code box to the left or right to adjust the midpoint of the new gradient color.<br />

Note: To remove the additional colors from the gradient line, click the trash can icon located underneath the<br />

gradient line to the right.<br />

- 202 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 8-8: Adding more colors to the gradient line.<br />

Image Fill<br />

To set the background to an image, follow these steps:<br />

1. Choose Image Fill from the Background drop-down menu.<br />

The image well appears underneath the Background drop-down menu, as shown in Figure 8-9 on page 204.<br />

2. Drag an image from the Assets pane to the image well.<br />

3. Choose Original Size, Stretch, or Scale to Fit from the drop-down menu to the right of the image well.<br />

• Original Size: The image retains its original size.<br />

• Stretch: The image is stretched horizontally and/or vertically to fit the background.<br />

• Scale to Fit: The image is scaled up or down to fit the entire image in the background.<br />

- 203 -


CHAPTER 8: Customizing Page Elements<br />

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<br />

image into the background.<br />

None<br />

Choose None from the Background drop-down menu to specify no background color, gradient, or image (for example, if<br />

you already selected a color, gradient, or image, select None to delete it).<br />

Adding a Border<br />

To add a border around an element:<br />

1. Choose a border type, such as Line (Simple Mode), in the Border drop-down menu.<br />

2. To change the line style (which is a single solid line by default), choose a line style from the Style drop-down<br />

menu, such as a solid line, a line of dashes, or a frame, as shown in Figure 8-10 on page 205.<br />

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<br />

enter the size in pixels.<br />

4. To change the border roundness (which is set to zero by default, for no roundness), click the up or down arrows<br />

for the Roundness control.<br />

5. To change the border color (which is set to black by default), click in the HTML color code box underneath the Border<br />

menu to show the color picker.<br />

- 204 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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<br />

color picker to adjust the value of the color component (from saturated to black).<br />

Figure 8-10: Adding a border to an element, and setting the style for the border.<br />

Changing Opacity<br />

Normally the Opacity slider underneath the Border drop-down menu is set to full opacity (far to the right). Dragging the<br />

slider to the left reduces the opacity of the element, increasing its transparency. Dragging the slider to the right increases<br />

opacity.<br />

Adding Reflection and Shadow<br />

You can add a mirror reflection effect to an element that appears below, above, or to either side of the element. You can<br />

also add a shadow behind an element.<br />

To add a reflection effect:<br />

1. Click the Reflection option to turn it on.<br />

2. Click one of the four arrows below the Reflection option indicating whether the reflection is above, below, or to<br />

either side of the element, as shown in Figure 8-11 on page 206.<br />

3. To change the offset (the number of pixels between the element and its reflection), click the up or down arrows for<br />

- 205 -


CHAPTER 8: Customizing Page Elements<br />

the Offset control or enter the offset in pixels.<br />

(By default, the offset is set to zero, which attaches the reflection to the element with no space between them.)<br />

4. Drag the Opacity slider underneath the four arrows to the left to reduce the opacity of the reflection and make it<br />

more transparent, or to the right to increase opacity.<br />

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<br />

to increase the size of the reflection.<br />

Figure 8-11: Adding a reflection to a Text element to show below the element with an offset of zero and an opacity of<br />

0.7.<br />

To add a shadow behind an element:<br />

1. Click the Shadow option to turn it on.<br />

2. To change the shadow's color (set to black by default), click in the HTML color code box underneath the Shadow<br />

option to show the color picker.<br />

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<br />

color picker to adjust the value of the color component (from saturated to black).<br />

- 206 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

4. The Offset X (horizontal axis) and Offset Y (vertical axis) values are set to 4. To change either offset value (or<br />

both), click the up or down arrows for the Offset X and/or Offset Y controls under the HTML color code bar, or<br />

enter the offset in pixels.<br />

5. The Blur option, to blur the edges of the element, is set to zero (no blurring). To blur the edges of the element,<br />

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<br />

to use for blurring.<br />

Figure 8-12: Adding a shadow effect with blurred edges to a Image element.<br />

- 207 -


CHAPTER 8: Customizing Page Elements<br />

Changing Text Properties<br />

You use the Text tab of the Properties pane to change the text properties of elements that contain text, for example,<br />

Button, Label, and List Menu elements. The Text tab lets you change the selected text's font family and size, color,<br />

alignment within the element, formatting, character spacing, opacity, and add a shadow to the text.<br />

For some elements, for example, Text Input, Text Area, Password Input, Radio button, and Checkbox elements, the Text<br />

tab also lets you wrap text, change the line height, set content as ordered or unordered lists, and set content as<br />

superscript or subscript.<br />

In order to make changes to the Text tab, you must first select the text inside the element. To select the text, double-click<br />

the element and then drag across the text you want to select in order to highlight it.<br />

Changing the Font Family and Size<br />

To change the font family for the selected text, choose a font family in the left drop-down menu under the Font Family<br />

& Size heading, as shown in Figure 8-13 on page 208.<br />

Figure 8-13: Changing the font family of the selected text to Verdana.<br />

To change the font size, choose a size from the right drop-down menu under the Font Family & Size heading, as shown in<br />

Figure 8-14 on page 209. The sizes available for the selected text in Text elements are xx-small, x-small, small, medium,<br />

- 208 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

large, x-large, and xx-large. For all other elements, you specify the pixel size for the text. (You can manually enter a<br />

pixel size.)<br />

Figure 8-14: Changing the text size.<br />

Changing the Text Color<br />

To change the color of the selected text:<br />

1. Click inside the HTML color code box underneath the Font Family & Size drop-down menus to show the color<br />

picker, as shown in Figure 8-15 on page 210.<br />

2. Click inside the color picker to pick a color component, and drag the slider on the right side of the color picker to<br />

adjust the value of the color component (from saturated to black).<br />

As an alternative, you can enter the color's HTML color code directly into the HTML color code box.<br />

- 209 -


CHAPTER 8: Customizing Page Elements<br />

Figure 8-15: Changing the text color.<br />

Changing the Text Formatting<br />

You can change the alignment for selected text inside an element to be left-aligned, centered, right-aligned, or justified<br />

within the element. To change the text alignment, click the Left, Center, Right, or Justified button underneath the<br />

HTML color code box in the Text tab of the Properties pane, as shown in Figure 8-16 on page 211.<br />

You can also change the text style for selected text inside an element to bold, italic, and/or underlined (for example, you<br />

can style the text to be both bold and italic, or italic and underlined, or bold and underlined). To change the text style, click<br />

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<br />

or subscript, click the superscript or subscript buttons next to the text style buttons. To make text into an ordered or<br />

unordered list, click either the bullet list or number list button.<br />

- 210 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 8-16: Changing the text alignment and style.<br />

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.<br />

Changing Opacity, Line Height, and Character Spacing<br />

You can set the text's opacity, line height, and character spacing.<br />

To increase the opacity, select the element and drag the Opacity slider to the right, as shown in Figure 8-17 on page 212.<br />

After increasing the opacity, you can reduce it by dragging the slider to the left.<br />

To increase the line height, select the element and drag the Line Height slider to the right, as shown in Figure 8-17 on<br />

page 212. After increasing the line height, you can reduce it by dragging the slider to the left.<br />

To increase the character spacing, select the element and drag the Character Spacing slider to the right, as shown in<br />

Figure 8-17 on page 212. After increasing the character spacing, you can reduce it by dragging the slider to the left.<br />

- 211 -


CHAPTER 8: Customizing Page Elements<br />

Figure 8-17: Changing the opacity, line height, and character spacing.<br />

Adding Text Wrap<br />

You can add text wrapping to the Text Input, Text Area, Password Input, Radio button, and Checkbox elements. To add<br />

text wrap to an element, on the Properties pane, click Wrap Content (refer to Figure 8-18 on page 213). (To select text<br />

wraping for a Label widget, you select the Wrap text checkbox on the General tab.)<br />

Adding Text Shadow<br />

You can add a shadow to the text in an element. In addition, you can select the shadow color, change the vertical and<br />

horizontal shadow offset, and change the shadow's blur effect.<br />

To add a shadow to the text in an element:<br />

1. Click the Text Shadow option to turn it on (refer to Figure 8-18 on page 213).<br />

2. To change the shadow's color (set to black by default), click in the HTML color code box underneath the Text<br />

Shadow option to show the color picker.<br />

3. To set the shadow's color, click inside the color picker to pick a color component, and drag the slider on the right<br />

side of the color picker to adjust the value of the color component (from saturated to black).<br />

4. To change the Offset X (horizontal axis) and/or Offset Y (vertical axis) values for the shadow (which are set to 1<br />

by default), click the up or down arrows for the Offset X and/or Offset Y controls under the HTML color code box,<br />

or enter the offset in pixels.<br />

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<br />

use for blurring (set to zero by default for no blurring).<br />

- 212 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 8-18:Adding text shadow and text wrap<br />

- 213 -


CHAPTER 8: Customizing Page Elements<br />

Changing Layout Properties<br />

The Layout tab of the Properties pane lets you set the size of the selected element and its position on the page. In<br />

addition, for elements that contain text or other elements, you can set the amount of padding to the inner edges of the<br />

element to create space between the edge of the element and whatever the element contains. You can also constrain the<br />

proportions of the element when freely resizing it on the Canvas.<br />

Changing the Element Size<br />

To change the size of the selected element on the page, click inside the Width and Height fields next to the Size heading<br />

and enter sizes for the width and height in pixels, as shown in Figure 8-19 on page 214.<br />

Figure 8-19: Changing the element's size on the page.<br />

You can also freely resize the element by dragging its edges (for details, see "Resizing Page Elements" on page 171). In<br />

order to freely resize the element without changing the element's aspect ratio, turn on the Constrain Proportions option in<br />

the Layout tab. (By default the Image, Video, and You Tube widgets have the Constrain Proportions checkbox preselected.)<br />

- 214 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Changing the Element Position<br />

In addition to placing an element freely on the page (for details, see "Placing Elements on a Page" on page 168), you can<br />

position the element using precise page coordinates. Click inside the X and Y Position fields to enter pixel coordinates<br />

using the top left corner of the element as the zero point of origin — for example, entering 20 pixels for the X position<br />

places the element exactly 20 pixels to the right of the left edge of the page; entering 50 pixels for the Y position places<br />

the element exactly 50 pixels down from the top of the page.<br />

You can also use the keywords "center", "left", and "right" for the X Position field (for example, "center" centers the<br />

element horizontally on the page), and "top", "middle", or "bottom" with the Y Position field. You can also specify a<br />

percentage (such as "60%" in the Y Position field to place an element starting at exactly 60% of the distance from the top<br />

of the page).<br />

Changing the Element Padding<br />

You can also add padding to Text, Label, Button, Image, and Container widget elements. Padding creates space around<br />

the inside edges within the element. To add padding, enter the number of pixels in the Top, Bottom, Left, and Right fields<br />

next to the Padding heading.<br />

Changing the Element Rotation<br />

To rotate an element on the Canvas, you can click the Rotate button (with the circular arrow icon ) located on the<br />

bottom toolbar, beneath the Canvas. Alternatively, you can rotate the element to a precise angle of rotation using the<br />

Rotation field on the Properties pane's Layout tab. In the Rotation field, enter the exact rotation degree value.<br />

- 215 -


CHAPTER 8: Customizing Page Elements<br />

Changing 3D Transformations Properties<br />

The 3D Transformations tab of the Properties pane lets you edit a widget's 3D properties. For a widget to have 3D<br />

properties you must place it within the 3D Stage widget. You can place one or more of the <strong>5ml</strong>widgets within a 3D Stage<br />

widget.<br />

Note: Due to limited CSS 3D support in some browsers, the 3D Transformation properties are available only in Safari<br />

and Chrome browsers.<br />

Changing an Element's Origin Properties<br />

You can change the position of the element's perspective vanishing point by changing the perspective Origin values.<br />

Changing the X perspective Origin value moves the vanishing point along the X axis. A negative value moves it to the left<br />

and a positive number moves it to the right. Changing the Y perspective Origin value moves the vanishing point along the<br />

Y axis. A negative value moves it down and a positive number moves it to the up.<br />

The perspective Origin properties for all elements within a 3D Stage element are based on the 3D Stage's Perspective and<br />

Perspective Origin values. For example, an element within the 3D Stage element uses the 3D Stage's Perspective Origin<br />

value as its starting point for evaluating its own perspective origin. If you keep the element at it default value, 50%, then<br />

it will share the same vanishing point as the 3D Stage element, as shown with rectangle A in Figure 8-1 on page 216.<br />

Figure 8-1: Placing two Rectangle elements within a 3D Stage element.<br />

If you change the element's Origin value, then you will offset its vanishing point from the 3D Stage element's vanishing<br />

point, as shown with rectangle B in Figure 8-2 on page 217.<br />

- 216 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 8-2: Changing Rectangle B's Origin X and Y values to offset its vanishing point.<br />

To change the perspective Origin for the selected element on the page, open the 3D Transformations tab and pull the<br />

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<br />

default value is 50%, which represents the 3D Stage element's Perspective Origin value. You can change it to any value<br />

between zero and 100%.<br />

- 217 -


CHAPTER 8: Customizing Page Elements<br />

Figure 8-3: Changing a Button element's Origin properties.<br />

Changing an Element's Offset<br />

You can offset (in pixels) an element from its original position on the X (horizontal) axis, the Y (vertical) axis, and/or the Z<br />

(depth) axis. To change the Offset X (horizontal axis), Offset Y (vertical axis), and/or Offset Z values (which are set to 0<br />

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.<br />

Enter the values in pixels between -500 and 500.<br />

- 218 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 8-4: Placing two Rectangle elements within a 3D Stage element.<br />

Figure 8-5: Changing the Second Rectangle Element's X Offset to 50px<br />

Changing an Element's Rotation Properties<br />

You can rotate an element (in degrees) around its X (horizontal) axis, Y (vertical) axis, and/or Z (depth) axis. To change<br />

the Rotate X (horizontal axis), Rotate Y (vertical axis), and/or Rotate Z values (which are set to 0 by default), move the<br />

slider controls right or left, or enter the values in degrees between -360 and 360.<br />

Change the X Rotate value to rotate the element around the X axis. A positive value rotates the element backward<br />

(clockwise) and a negative value rotates the element forward (anti-clockwise), as shown in Figure 8-6 on page 220.<br />

- 219 -


CHAPTER 8: Customizing Page Elements<br />

Figure 8-6: Rotating the Element Around the X axis.<br />

Change the Y Rotate value to rotate the element around the Y axis. A positive value rotates the element's left side<br />

forward and right side backward (clockwise) and a negative value rotates the element's right side forward and left side<br />

backward (anti-clockwise), as shown in Figure 8-7 on page 220.<br />

Figure 8-7: Rotating the Element Around the Y Axis.<br />

Change the Z Rotate value to rotate the element around the Z axis. A positive value rotates the element clockwise around<br />

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.<br />

- 220 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 8-8: Rotating the Element Around the Z Axis.<br />

Changing an Element's Skew Properties<br />

You can skew an element (in degrees) on its X (horizontal) axis and Y (vertical) axis. To change the Skew X (horizontal<br />

axis) and/or Skew Y (vertical axis) values (which are set to 0 by default), move the slider controls right or left, or enter<br />

the values in degrees between -90 and 90.<br />

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<br />

value skews the element to the right, as shown in Figure 8-9 on page 221.<br />

Figure 8-9: Skewing the Element Around the X Axis and Y Axis.<br />

- 221 -


CHAPTER 8: Customizing Page Elements<br />

Displaying an Element's Backface<br />

You can choose to either display or hide the back face (rear side) of an element. If you display the back face and rotate<br />

the element to face backward, you can see the image or text in reverse. If you hide the back face and rotate the element<br />

to face backward you see only blank space, as shown in Figure 8-10 on page 222.<br />

Figure 8-10: Hiding an Element's Backface<br />

- 222 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Changing Behavior Properties<br />

The Behavior tab on the Properties pane lets you associate an element (or page) with an event and an action to perform<br />

when that event is triggered, for example, when the user taps or clicks the element, such as navigating to another page<br />

or executing a custom script. For details about supported events and actions, see "About Events" on page 224 and "About<br />

Actions" on page 226. The events and actions that appear in the drop-down lists depend on the widget type and whether<br />

the SDK is enabled for the project.<br />

Note: To use a Custom Function action, you must enter the function into the Script Editor before selecting the Event and<br />

Action. (Some custom functions might require you to enable the SDK functionality. For more information, see "Enabling<br />

Native Device Functionality" on page 372.)<br />

To change an element's Behavior properties:<br />

1. Open a project page, and on the Page Outline, select the page or a page element.<br />

The Properties pane for the page or element appears on the right side of the Project Editor, and the Behavior tab is<br />

at the top right of the Properties pane, as shown in Figure 8-1 on page 223.<br />

2. On the Properties pane select the Behavior tab.<br />

Figure 8-1: Associating a Button element with an event and action on the Behavior tab<br />

3. Click the add behavior ( ) button.<br />

4. From the Event drop-down menu, choose an event. For example, choose onclick.<br />

5. From the Action drop-down menu, choose an action. For example, choose Show Page, and then choose the page<br />

to open. In this example you can also choose how to transition the page change. For example, for Effect choose<br />

Fade in, for Acceleration choose Ease, and for Duration enter 2.<br />

6. Click Apply. The new behavior displays in the Behavior list.<br />

- 223 -


CHAPTER 8: Customizing Page Elements<br />

About Events<br />

The Behavior tab on the Properties pane lets you associate an element (or page) with an event, and an action to perform.<br />

When the user generates the event, for example, taps or clicks the element, the action executes, for example, navigates<br />

to another page or executes a custom script (including calling an external web service). <strong>5ml</strong> supports the events shown in<br />

Table 8-2: on page 224. The events and actions that appear in the drop-down lists depend on the widget type and<br />

whether the SDK is enabled for the project. Some events are dependent on native device functionality and require you to<br />

enable the ad exchange/ad network SDK; for more details, see "Enabling Native Device Functionality" on page 372.<br />

Table 8-2: Supported Events<br />

Event<br />

Description<br />

Use with this<br />

element<br />

Use with<br />

this action<br />

SDK<br />

required<br />

onadcontract<br />

Occurs before the advertisement contracts back to its<br />

original size.<br />

All<br />

Mostly Custom<br />

Function<br />

Yes<br />

onafteradresize Occurs after the advertisement finishes resizing. All Mostly Custom<br />

Function<br />

Yes<br />

onchange<br />

Occurs when the current state of the media changes; by<br />

play, pause, or stop actions.<br />

Video, Audio<br />

Mostly Custom<br />

Function<br />

No<br />

onclick<br />

oncontextmenu<br />

Occurs when the user clicks on an element. (Supported<br />

by devices with a touch screen display.)<br />

Occurs after the user clicks the right mouse button.<br />

(Applicable only for devices equipped with a two button<br />

mouse.)<br />

All All No<br />

All All No<br />

ondblclick Occurs when the user double-clicks on an element. All All No<br />

ondevicemotion<br />

Occurs when the user rotates or moves the device and<br />

provides the projection of the current gravity vector on<br />

the X, Y and Z axis. (Applicable only for devices equipped<br />

with accelerometer.)<br />

All<br />

Mostly Custom<br />

Function<br />

Yes or No -<br />

if viewed on<br />

the iPhone<br />

or iPad<br />

mobile<br />

browser.<br />

ondeviceorientationchange<br />

Occurs when the user rotates the device on z axis and<br />

provides the new orientation: Up, Right, Down or Left.<br />

(Applicable only for devices equipped with accelerometer.)<br />

All<br />

Mostly Custom<br />

Function<br />

Yes<br />

ondevicerotate<br />

Occurs when the user rotates the device and provides the<br />

device’s rotation angle for the X, Y, and Z axis. (Applicable<br />

only for devices equipped with accelerometer.)<br />

All<br />

Mostly Custom<br />

Function<br />

Yes or No -<br />

if viewed on<br />

the iPhone<br />

or iPad<br />

mobile<br />

browser.<br />

ondeviceshake<br />

Occurs when the user shakes the device. (Applicable only<br />

for devices equipped with accelerometer.)<br />

All All Yes<br />

- 224 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Event<br />

Description<br />

Use with this<br />

element<br />

Use with<br />

this action<br />

SDK<br />

required<br />

ondocumentload Occurs when the external page loads. Facebook Like Button,<br />

Tweet Button,<br />

YouTube, IFrame<br />

Mostly Custom<br />

Function<br />

No<br />

ondrop<br />

Fires on a target element when the user releases the<br />

mouse button during a drag-and-drop operation.<br />

All<br />

Mostly Custom<br />

Function<br />

No<br />

onenter Occurs before a view becomes the current view. Page, View , Tab Mostly Custom<br />

Function<br />

No<br />

onheadingchange<br />

Occurs when the device’s heading is changed. (Applicable<br />

only for devices equipped with magnetometer.)<br />

All<br />

Mostly Custom<br />

Function<br />

Yes<br />

onkeydown<br />

Occurs on the focused element when the user presses a<br />

key down, and occurs periodically until the user releases<br />

the key.<br />

All<br />

Mostly Custom<br />

Function<br />

No<br />

onkeypress<br />

Occurs on the focused element when the user presses a<br />

key down, and occurs periodically until the user releases<br />

the key.<br />

All<br />

Mostly Custom<br />

Function<br />

No<br />

onkeyup<br />

Occurs on the focused element when the user releases a<br />

key.<br />

All<br />

Mostly Custom<br />

Function<br />

No<br />

onleave<br />

Occurs on the current view before it is replaced by<br />

another view and becomes hidden.<br />

Page, View, Tab<br />

Mostly Custom<br />

Function<br />

No<br />

onload Occurs immediately after an element loads and is parsed. All Mostly Custom<br />

Function<br />

No<br />

onlocationchange<br />

Occurs when the device’s location (latitude, longitude)<br />

changes. (Provides higher accuracy if the device is<br />

equipped with GPS.)<br />

All<br />

Mostly Custom<br />

Function<br />

No<br />

onmousedown<br />

Occurs when the user presses a mouse button over an<br />

element.<br />

All All No<br />

onmousemove<br />

Occurs when the user moves the mouse over an element.<br />

(Supported by devices with a touch screen display.)<br />

All<br />

Mostly Custom<br />

Function<br />

No<br />

onmouseout<br />

Occurs when the user moves the mouse pointer out of an<br />

element.<br />

All All No<br />

onmouseover<br />

Occurs when the user moves the mouse pointer into an<br />

element.<br />

All<br />

Mostly Custom<br />

Function<br />

No<br />

onmouseup<br />

Occurs when the user releases the mouse button on an<br />

element. (Supported by devices with a touch screen display.)<br />

All All No<br />

onresize Occurs when the size of an element changes. All Mostly Custom<br />

Function<br />

No<br />

onswipe<br />

Occurs after the user swipes an element using the mouse.<br />

(Supported by devices with a touch screen display.)<br />

All<br />

Mostly Custom<br />

Function<br />

No<br />

- 225 -


CHAPTER 8: Customizing Page Elements<br />

Event<br />

Description<br />

Use with this<br />

element<br />

Use with<br />

this action<br />

SDK<br />

required<br />

onuiorientationchange<br />

Occurs when the device’s user interface orientation<br />

changes. (Applicable only for devices equipped with accelerometer.)<br />

All<br />

Mostly Custom<br />

Function<br />

No<br />

onunload<br />

Occurs before an element is destroyed. (By calling its<br />

destroy() method.)<br />

All<br />

Mostly Custom<br />

Function<br />

No<br />

onviewchange Occurs when the current view changes. Gallery, 360, View-<br />

Set, TabSet<br />

Mostly Custom<br />

Function<br />

No<br />

About Actions<br />

When you add an event to a page or an element, you must select an action to perform when the user triggers the event.<br />

For example, when the user taps or clicks on a button (the onclick event), the browser displays a different page (the<br />

Show Page action). <strong>5ml</strong> supports the actions shown in Table 8-3: on page 226. The events and actions that appear in the<br />

drop-down lists depend on the widget type and whether the SDK is enabled for the project. Some actions are dependent<br />

on native device functionality and require you enable the ad exchange/ad network SDK; for more details, see "Enabling<br />

Native Device Functionality" on page 372.<br />

Table 8-3:Supported Actions<br />

Action Description Element/SDK Required<br />

Contract to original size<br />

Custom Function<br />

Expand to full screen<br />

Hide<br />

Move<br />

Open External Page<br />

Contracts a previously expanded page element to its original size.<br />

User defined.<br />

Expands the page element to full screen size.<br />

Hides a page element. Use in combination with the Show action.<br />

Moves a page element to the defined page coordinates.<br />

Opens a Web page external to the project, but hosted by a <strong>5ml</strong> project.<br />

Pause Media Pauses the media that is currently playing. Audio, Video<br />

Play Media Starts playing the selected media. Audio, Video<br />

Send E-mail<br />

Opens a new email message window with the defined email address in<br />

the To field.<br />

- 226 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Action Description Element/SDK Required<br />

Set Text<br />

Share on Facebook<br />

Show<br />

Replaces the text that appears on a text-based element with new text<br />

that is defined along with this action. (For the Text Input, Text Area,<br />

and Password Input elements this action replaces the text in the<br />

Prompt Text field. For the Button and Label elements this action<br />

replaces the text in the Text field. For the Text element this action<br />

replaces all the text entered into the HTML Editor.<br />

Opens a browser window with the Facebook Share this link page and<br />

the defined link to share.<br />

Shows a hidden page element. Use in combination with the Hide<br />

action.<br />

Text, Label, Text Area, Text Input,<br />

Button, and Password Input.<br />

Show Current Location Causes the current location to display on the Map View element. Map View<br />

Show Next View Shows the next view in a View Set element. View Set<br />

Show Page<br />

Shows the selected page, with selected transition effect and time.<br />

Show Previous View Shows the previous view in a View Set element. View Set<br />

Show View Shows the defined view. View Set<br />

Stop Media Stops playing the selected media. Audio, Video<br />

Take a photo Takes a photo with the mobile device. SDK integration<br />

Turn Flashlight Off Turns the mobile device's flashlight off. SDK integration<br />

Turn Flashlight On Turns the mobile device's flashlight on. SDK integration<br />

Twitter Post<br />

Opens a browser window with the Twitter What's Happening page and<br />

the defined Tweet Text and the account to follow.<br />

Vibrate Device Vibrates the mobile device. SDK<br />

Using the <strong>5ml</strong> Proxy API<br />

This section describes the <strong>5ml</strong> Proxy API and provides example implementations. Using the <strong>5ml</strong> Proxy API, the <strong>5ml</strong><br />

developer can access any kind of remote web service, through a GET or POST HTTP request. Because some public web<br />

services do not allow AJAX calls from third-party sites to access the web service, <strong>5ml</strong> uses a proxy to access the web<br />

service. When you export a project, <strong>5ml</strong> provides a proxy.php script in the project package, which you can use to handle<br />

the proxy request, provided the web server hosting the project supports PHP.<br />

You can write custom code to obtain data from a <strong>5ml</strong> widget's attributes to pass to the web service using the <strong>5ml</strong> Proxy<br />

API. Similarly you can write custom code to obtain data from a web service and insert it into a <strong>5ml</strong> widget's attributes. For<br />

example, the mobile device user enters the zip code value "94111" into a entry form and clicks on a button to retrieve a<br />

list of local concerts from a web service. The user clicks on a button to retrieve the price for a ticket. The web service<br />

sends the price, for example, "$20," and the price is passed to a button widget's caption attribute. The user sees the<br />

button rendered with the "$20" value.<br />

- 227 -


CHAPTER 8: Customizing Page Elements<br />

The Behavior tab on the Properties pane lets you associate an element (or page) with an event and an action to perform<br />

when the user taps or clicks the element. An action can execute a Custom Function that calls the <strong>5ml</strong> Proxy API. The API<br />

in turn can invoke a remote web service, hosted on another server. Use the Behavior tab's Script Editor to implement the<br />

custom code and <strong>5ml</strong> Proxy API. Then associate the custom code with a <strong>5ml</strong> widget (for example, a Button widget) by<br />

setting up an Event/Action sequence, using the Custom Function-Action and selecting the custom function from the<br />

Function drop down menu. For more information about setting up Events and Actions, see "Changing Behavior<br />

Properties" on page 223.<br />

<strong>5ml</strong> Proxy API Reference<br />

fiveml.proxy.sendRequest = function(url, httpMethod /*, data, oncomplete, headers*/);<br />

Parameters<br />

• url (required)—The remote web service URL that you want to invoke.<br />

• httpMethod (required)—The HTTP method to invoke the remote web service (GET or POST).<br />

• data (required for POST requests)—The data parameter can be of any type, depending on the web service you<br />

wish to invoke. If you want to invoke a web service using a GET HTTP request and you want to pass parameters<br />

as a query string, then pass a JavaScript object and the <strong>5ml</strong> Proxy API will manage the encoding.<br />

• oncomplete (optional)—A callback function to invoke after the remote service sends the response. It accepts one<br />

parameter, which is the XHR instance.<br />

• headers (required for POST)—A JavaScript object that contains headers that you want to set when invoking the<br />

remote web service. For POST HTTP requests, you should at least set the Content-Type header, as the API uses it<br />

to determine how to encode the POST data.<br />

The headers parameter can take the following three static variables:<br />

fiveml.proxy.TYPE_JSON = 'application/json';<br />

fiveml.proxy.TYPE_XML = 'text/xml';<br />

fiveml.proxy.TYPE_FORM_POST = 'application/x-www-form-urlencoded';<br />

<strong>5ml</strong> Proxy API Examples<br />

Sending a Simple GET HTTP Request<br />

function simpleGet() {<br />

fiveml.proxy.sendRequest('http://wsf.cdyne.com/WeatherWS/Weather.asmx/<br />

GetCityForecastByZIP','GET', null, function(req){alert(req.responseText);<br />

});<br />

Sending a GET HTTP Request with Query String Parameters<br />

function get() {<br />

- 228 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

var data = {<br />

'zip' : '23454',<br />

'country' : 'UK'<br />

};<br />

fiveml.proxy.sendRequest('http://wsf.cdyne.com/WeatherWS/Weather.asmx/<br />

GetCityForecastByZIP','GET', data, function(req){alert(req.responseText);<br />

});<br />

Sending a POST HTTP Request to a Web Service Expecting JSON Data<br />

function jsonPost() {<br />

var data = {<br />

"clientId" : "corning_gorilla",<br />

"msgId" : '1',<br />

"msisdns" : [ "+11234343434" ],<br />

"params" : {<br />

"name" : "test"<br />

}<br />

}<br />

var headers = {<br />

'Content-Type' : fiveml.proxy.TYPE_JSON,<br />

'Accept' : 'application/json',<br />

'User-Agent' : 'Firefox'<br />

}<br />

fiveml.proxy.sendRequest("http://some.remoteservice.net/api/json", 'POST', data,<br />

function(req){alert(req.responseText);<br />

}, headers);<br />

}<br />

- 229 -


CHAPTER 8: Customizing Page Elements<br />

Sending a POST HTTP Request to a Web Service Expecting Simple HTTP FORM POST Data<br />

Note: Do not pass complex structures for the data parameter, when using the FORM POST Content-Type.<br />

function httpPost() {<br />

var data = {<br />

"clientId" : "corning_gorilla",<br />

"msgId" : '1'<br />

}<br />

var headers = {<br />

'Content-Type' : fiveml.proxy.TYPE_FORM_POST<br />

}<br />

fiveml.proxy.sendRequest("http://some.remoteservice.net/api/post", 'POST', data,<br />

function(req){alert(req.responseText);<br />

}, headers);<br />

}<br />

Sending a POST HTTP Request to a Web Service Expecting XML Data<br />

function xmlPost() {<br />

var data = '';<br />

var headers = {<br />

'Content-Type' : fiveml.proxy.TYPE_XML<br />

}<br />

fiveml.proxy.sendRequest("http://some.remoteservice.net/api/xml", 'POST', data,<br />

function(req){alert(req.responseText);<br />

}, headers);<br />

}<br />

Exporting Projects that Include <strong>5ml</strong> Proxy API Calls<br />

You do not need to perform any other configuration after you export the project for the proxy requests to work. The<br />

proxy.php is included in the exported package only if the proxy is used by the custom code in the Script Editor.<br />

- 230 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

- 231 -


CHAPTER 8: Customizing Page Elements<br />

Using the Advanced Properties Pane<br />

<strong>5ml</strong> lets you set advanced properties for page elements. To set advanced properties:<br />

1. Click the element on the page, or click the element in the Page Outline pane.<br />

The Properties pane for the element appears on the right side of the Project Editor.<br />

2. Click the Advanced Properties button at the top of the Properties pane, as shown in Figure 8-1 on page 232.<br />

The Advanced Properties pane replaces the Properties pane on the right side of the Project Editor, as shown in<br />

Figure 8-2 on page 233.<br />

3. Select the property you want to change.<br />

A drop-down menu with choices, a selection button, a color picker, or text entry field appears for the property.<br />

4. Choose an option from the drop-down menu, click the selection button, click inside the color picker, or enter the<br />

new value in the text entry field for the property.<br />

Figure 8-1: Choosing Advanced Properties for the selected Image element.<br />

- 232 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 8-2: Using the drop-down menu for the image-valign property in the Advanced Properties pane to change the<br />

property's setting.<br />

- 233 -


CHAPTER 9: Using Common Widgets<br />

CHAPTER 9: Using Common Widgets<br />

The Common widgets provide basic building blocks for creating the elements of a page, including forms. This chapter<br />

covers the following topics:<br />

• "About Common Widgets" on page 235<br />

• "Using the Text Widget" on page 237<br />

• "Using the Label Widget" on page 239<br />

• "Using the Button Widget" on page 241<br />

• "Using the Text Area Widget" on page 245<br />

• "Using the Text Input Widget" on page 243<br />

• "Using the Radio Button Widget" on page 249<br />

• "Using the Checkbox Widget" on page 247<br />

• "Using the List Menu Widget" on page 251<br />

• "Using the Password Input Widget" on page 253<br />

- 234 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

About Common Widgets<br />

<strong>5ml</strong> includes several Common widgets to create page elements, including forms, in your project:<br />

• Text widget: Creates a simple text element. You can change its appearance, including the text font family and<br />

size, text formatting within the element, and the element's layout on the page. It also provides a HTML editor so<br />

you can include more advanced content, for example, a link.<br />

• Label widget: Creates an interactive text element. You can assign an action to the label element to be performed<br />

when the user taps the element. You can also change the element's appearance, including the text font family and<br />

size, text formatting within the element, character spacing, and the element's layout on the page.<br />

• Button widget: Creates an interactive button with a border and text. You can assign an action to the button element<br />

to be performed when the user taps the button. You can also change the element's appearance, including the<br />

text font family and size, text formatting within the element, and the element's layout on the page.<br />

• Text Input widget: Creates a simple text entry form field. You can change the element's appearance, including the<br />

text font family and size, text formatting within the element, character spacing, and its layout on the page. You can<br />

also add prompt text and define the maximum number of characters that can be entered into the form field.<br />

• Text Area widget: Creates a text entry form field similar to the Text Input widget, but with a larger entry field that<br />

does not have a limit on the maximum number of characters you can enter. You can change the element's appearance,<br />

including the text font family and size, text formatting within the element, character spacing, and the element's<br />

layout on the page. You can also add prompt text.<br />

• Checkbox widget: Creates an interactive checkbox element to represent a selection choice. You can assign an<br />

action to the element to be performed when the user selects the element and submits the form. You can also<br />

change the element's appearance, including the text font family and size, text formatting within the element, character<br />

spacing, and the element's layout on the page.<br />

• Radio Button widget: Creates an interactive radio button element to represent a selection choice. Once you place<br />

two or more Radio Button widgets on a page and associate them together, you can select one Radio Button element<br />

to be the default selection. You can change the element's appearance, including the text font family and size,<br />

text formatting within the element, character spacing, and the element's layout on the page. You can also label the<br />

radio button and assign it a value.<br />

• List Menu widget: Creates an interactive drop-down list menu element to represent a list of choices to choose<br />

from. You can define the menu selections and assign one selection to be the default selection. You can also assign<br />

an action to the element to be performed when the user selects the element and submits the form. You can change<br />

the element's appearance, including the text font family and size, text formatting within the element, character<br />

spacing, and the element's layout on the page.<br />

• Password Input widget: Creates a password entry field. You can change the element's appearance, including the<br />

text font family and size, text formatting within the element, character spacing, and its layout on the page. You can<br />

also add prompt text and define the maximum number of characters that can be entered into the form field.<br />

Click the Widgets tab at the top of the Library pane to show the Widgets pane. You can then select Common in the dropdown<br />

menu under the Widgets tab, as shown in Figure 9-1 on page 236, to see the Button, Label, Text, Text Input, Text<br />

- 235 -


CHAPTER 9: Using Common Widgets<br />

Area, Checkbox, Radio Button, List Menu, and Password Input widgets (or select All in the pop-up menu to see all<br />

widgets).<br />

Figure 9-1: Selecting the Common widgets.<br />

To create an element on the page from a widget, drag the widget from the Widgets pane to the Canvas. You can then<br />

resize, align, and arrange the element to fit your page design (for details, see "Working in the Project Editor" on page<br />

154). You can also customize the element by changing the element's properties in the Properties pane — for details, see<br />

"Customizing Page Elements" on page 194.<br />

- 236 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Text Widget<br />

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.<br />

You can change the element's appearance, the font and formatting of text within the element, and the element's layout<br />

and position on the page.<br />

To place a Text element on a page, drag the Text widget from the Common section of the Widgets pane to the Canvas.<br />

You can then resize, align, and arrange the element to fit your page design (for details, see "Working in the Project<br />

Editor" on page 154).<br />

To customize the Text element, select the element on the page or in the Page Outline pane, as shown in Figure 9-2 on<br />

page 237. To enter the text for the Text element, double-click the element on the page and edit the text in the element.<br />

Alternatively, to enter more sophisticated content, in the Properties pane, on the General tab, click the Open HTML Editor<br />

button and enter HTML code.<br />

Figure 9-2: Entering text for the Text element or opening the HTML editor.<br />

You can customize the element by changing properties in the Properties pane, which appears on the right side of the<br />

Project Editor after you select the Text element:<br />

• The General tab lets you define the Text element's optional ID. You can also open the HTML Editor and enter<br />

HTML code to create more sophisticated content than just double-clicking on the Text widget and entering text<br />

there. For details, see "Changing General Properties" on page 197.<br />

- 237 -


CHAPTER 9: Using Common Widgets<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. See "Changing Appearance Properties" on page 198<br />

• The Text tab lets you change the font family and size of the text, the text color, text alignment within the element,<br />

and text formatting. See "Changing Text Properties" on page 208<br />

• The Layout tab lets you set the size of the element, its position on the page, and the amount of padding within the<br />

element. You can also constrain the proportions of the element so that the aspect ratio stays the same when freely<br />

resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the Text element with an event and an action to be performed. See "Changing<br />

Behavior Properties" on page 223 for details.<br />

- 238 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Label Widget<br />

The Label widget lets you add a Label element with text to a page and associate an action to be performed when the user<br />

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.<br />

You can change the element's appearance, the text font family and size, text formatting within the element, and the<br />

element's layout on the page. In addition, you can change the text character spacing, add a shadow to the text, and wrap<br />

the Label text.<br />

To place a Label element on a page, drag the widget from the Common section of the Widgets pane to the Canvas. You<br />

can then resize, align, and arrange the element to fit your page design (for details, see "Working in the Project Editor" on<br />

page 154).<br />

To customize the Label element, select the element on the page or in the Page Outline pane, as shown in Figure 9-3 on<br />

page 239. The Properties pane for the element appears on the right side of the Canvas.<br />

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,<br />

or double-click the element on the page and edit the text in the element.<br />

Figure 9-3: Entering text for the Label element.<br />

You can customize the element by changing properties in the Properties pane:<br />

• The General tab lets you define the Label element's optional ID and name, and set up the text wrap option. For<br />

details, see "Changing General Properties" on page 197.<br />

- 239 -


CHAPTER 9: Using Common Widgets<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. For details, see "Changing Appearance Properties" on page 198.<br />

• The Text tab lets you change the font family and size of the text, the text color, text alignment within the element,<br />

text opacity, character spacing, and text formatting. It also lets you add a shadow to the text itself, and select text<br />

wrapping. See "Changing Text Properties" on page 208 for details.<br />

• The Layout tab lets you set the size of the element, its position on the page, and the amount of padding within the<br />

element. You can also constrain the proportions of the element so that the aspect ratio stays the same when freely<br />

resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the Label element with an event and an action to be performed. See "Changing<br />

Behavior Properties" on page 223 for details.<br />

- 240 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Button Widget<br />

The Button widget lets you add a Button element to a page and associate an action to be performed when the user taps or<br />

clicks the button. You can change the element's appearance, the text font family and size, text formatting within the<br />

element, and the element's layout on the page. In addition, you can change the text character spacing, and add a shadow<br />

to the text in the element.<br />

To place a Button element on a page, drag the Button widget from the Common section of the Widgets pane to the<br />

Canvas. You can then resize, align, and arrange the element to fit your page design (for details, see "Working in the<br />

Project Editor" on page 154).<br />

To customize the Button element, select the element on the page or in the Page Outline pane, as shown in Figure 9-4 on<br />

page 241. The Properties pane for the element appears on the right side of the Project Editor.<br />

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<br />

pane, or double-click the element on the page and edit the text in the element.<br />

Figure 9-4: Entering text for the Button element.<br />

You can customize the element by changing properties in the Properties pane:<br />

• The General tab lets you define the Button element's label and optional ID. For details, see "Changing General<br />

Properties" on page 197.<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. For details, see "Changing Appearance Properties" on page 198.<br />

- 241 -


CHAPTER 9: Using Common Widgets<br />

• The Text tab lets you change the font family and size of the text, the text color, text alignment within the element,<br />

text opacity, character spacing, and text formatting, and lets you add a shadow to the text itself. See "Changing<br />

Text Properties" on page 208 for details.<br />

• The Layout tab lets you set the size of the element, its position on the page, and the amount of padding within the<br />

element. You can also constrain the proportions of the element so that the aspect ratio stays the same when freely<br />

resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the Button element with an event and an action to be performed. See "Changing<br />

Behavior Properties" on page 223 for details.<br />

- 242 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Text Input Widget<br />

The Text Input widget lets you add a simple text entry field to a page or form. You can change the element's appearance,<br />

including the text font family and size, text formatting within the element, character spacing, and its layout on the page.<br />

You can also add prompt text to inform the user of the type of content to be entered. In addition you can define the<br />

maximum number of characters that can be entered into the text field.<br />

To place a Text Input element on a page, drag the Text Input widget from the Common section of the Widgets pane to the<br />

Canvas. You can then resize, align, and arrange the element to fit your page design (for details, see "Working in the<br />

Project Editor" on page 154).<br />

To customize the Text Input element, select the element on the page or in the Page Outline pane, as shown in Figure 9-5<br />

on page 243. The Properties pane for the element appears on the right side of the Project Editor.<br />

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<br />

Properties pane, and to inform the user of the type of content to enter into the field, in the Prompt Text field, enter prompt<br />

text; for example, enter Address. To set a limit for the maximum number of characters to enter, in the Max Chars field,<br />

enter the maximum number of characters.<br />

Figure 9-5: Entering Name and Prompt Text for the Text Input element.<br />

You can customize the element by changing properties in the Properties pane:<br />

• The General tab lets you define the element's name, optional ID, and prompt text. You can also limit the maximum<br />

number of characters allowed to be entered into the field. For details, see "Changing General Properties" on page<br />

197.<br />

- 243 -


CHAPTER 9: Using Common Widgets<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. For details, see "Changing Appearance Properties" on page 198.<br />

• The Text tab lets you change the font family and size of the text, the text color, text alignment within the element,<br />

text opacity, character spacing, and text formatting. It also lets you add a shadow to the text itself and select text<br />

wrapping. See "Changing Text Properties" on page 208 for details.<br />

• The Layout tab lets you set the size of the element, its position on the page, and the amount of padding within the<br />

element. You can also constrain the proportions of the element so that the aspect ratio stays the same when freely<br />

resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214.<br />

- 244 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Text Area Widget<br />

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<br />

entry field that does not have a limit on the maximum number of characters you can enter. You can change the element's<br />

appearance, including the text font family and size, text formatting within the element, character spacing, and the<br />

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<br />

is no maximum number of characters limit for the text field.<br />

To place a Text Area element on a page, drag the Text Area widget from the Common section of the Widgets pane to the<br />

Canvas. You can then resize, align, and arrange the element to fit your page design (for details, see "Working in the<br />

Project Editor" on page 154).<br />

To customize the Text Area element, select the element on the page or in the Page Outline pane, as shown in Figure 9-6<br />

on page 245. The Properties pane for the element appears on the right side of the Project Editor.<br />

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<br />

Properties pane, and to inform the user of the type of content to enter into the field, in the Prompt Text field, enter prompt<br />

text; for example, enter Description.<br />

Figure 9-6: Entering text for the Text Area element.<br />

You can customize the element by changing properties in the Properties pane:<br />

• The General tab lets you define the element's name, optional ID, and prompt text. For details, see "Changing General<br />

Properties" on page 197.<br />

- 245 -


CHAPTER 9: Using Common Widgets<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. For details, see "Changing Appearance Properties" on page 198.<br />

• The Text tab lets you change the font family and size of the text, the text color, text alignment within the element,<br />

text opacity, character spacing, and text formatting. It also lets you add a shadow to the text itself and select text<br />

wrapping. See "Changing Text Properties" on page 208 for details.<br />

• The Layout tab lets you set the size of the element, its position on the page, and the amount of padding within the<br />

element. You can also constrain the proportions of the element so that the aspect ratio stays the same when freely<br />

resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214.<br />

- 246 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Checkbox Widget<br />

The Checkbox widget lets you add an interactive checkbox element to a page or form to represent a selection choice. You<br />

can assign an action to the element to be performed when the user selects the element and submits the form. You can<br />

also change the element's appearance, including the text font family and size, text formatting within the element,<br />

character spacing, and the element's layout on the page.<br />

To place a Checkbox element on a page, drag the Checkbox widget from the Common section of the Widgets pane to the<br />

Canvas. You can then resize, align, and arrange the element to fit your page design (for details, see "Working in the<br />

Project Editor" on page 154).<br />

To customize the Checkbox element, select the element on the page or in the Page Outline pane, as shown in Figure 9-7<br />

on page 247. The Properties pane for the element appears on the right side of the Project Editor.<br />

To give the Checkbox element an informational label to represent the selection choice, enter the label in the Text field in<br />

the General tab at the top of the Properties pane. If you want the checkbox to be selected by default when the user views<br />

the form, then under the Text field, select the Checked checkbox.<br />

Figure 9-7: Entering text for the Checkbox element's label and selecting the default state as Checked.<br />

You can customize the element by changing properties in the Properties pane:<br />

• The General tab lets you define the element's name, optional ID, label text, and default selection state. For details,<br />

see "Changing General Properties" on page 197.<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. For details, see "Changing Appearance Properties" on page 198.<br />

- 247 -


CHAPTER 9: Using Common Widgets<br />

• The Text tab lets you change the font family and size of the text, the text color, text alignment within the element,<br />

text opacity, character spacing, and text formatting. It also lets you add a shadow to the text itself and select text<br />

wrapping. See "Changing Text Properties" on page 208 for details.<br />

• The Layout tab lets you set the size of the element, its position on the page, and the amount of padding within the<br />

element. You can also constrain the proportions of the element so that the aspect ratio stays the same when freely<br />

resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the Checkbox element with an event and an action to be performed. See<br />

"Changing Behavior Properties" on page 223 for details.<br />

- 248 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Radio Button Widget<br />

The Radio Button widget lets you add an interactive radio button element to a page or form to represent one option from<br />

a group of possible options. To use a Radio Button element you must group it with at least one other Radio Button<br />

element. You can change the element's appearance, including the text font family and size, text formatting within the<br />

element, character spacing, and the element's layout on the page.<br />

To place a Radio Button element on a page, drag the Radio Button widget from the Common section of the Widgets pane<br />

to the Canvas. You can then resize, align, and arrange the element to fit your page design (for details, see "Working in<br />

the Project Editor" on page 154).<br />

To customize the Radio Button element, select the element on the page or in the Page Outline pane, as shown in Figure 9-<br />

8 on page 249. The Properties pane for the element appears on the right side of the Project Editor.<br />

To give the Radio Button element an informational label to represent the selection choice, enter the label in the Text field<br />

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<br />

Value field.<br />

To associate the Radio Button element with another Radio Button element and create a logical group of radio buttons,<br />

drag another Radio Button widget to the Canvas and replace the ID of the new element with the same ID of the first Radio<br />

Button element. (For a group of Radio Button elements to be associated with each other they must all have the same ID,<br />

but different values.) To choose which Radio Button element is selected by default when the user views the form or page,<br />

on the Canvas select the default Radio Button element and then under the Text field, select the Checked checkbox.<br />

Figure 9-8: Grouping Radio Button elements: Entering a name, value, and label. Replacing the second radio button's ID<br />

to match the first. Selecting the first radio button as the default option.<br />

You can customize the element by changing properties in the Properties pane:<br />

• The General tab lets you define the element's name, ID, label text, value, and default selection state. For details,<br />

see "Changing General Properties" on page 197.<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. For details, see "Changing Appearance Properties" on page 198.<br />

- 249 -


CHAPTER 9: Using Common Widgets<br />

• The Text tab lets you change the font family and size of the text, the text color, text alignment within the element,<br />

text opacity, character spacing, and text formatting, and lets you add a shadow to the text itself. See "Changing<br />

Text Properties" on page 208 for details.<br />

• The Layout tab lets you set the size of the element, its position on the page, and the amount of padding within the<br />

element. You can also constrain the proportions of the element so that the aspect ratio stays the same when freely<br />

resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214.<br />

- 250 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the List Menu Widget<br />

The List Menu widget lets you add a List Menu element to a form or page and associate an action to be performed when<br />

the user selects a menu option. You can change the element's appearance, the text font family and size, text formatting<br />

within the element, and the element's layout on the page. In addition, you can change the text character spacing, and add<br />

a shadow to the text in the element.<br />

To place a List Menu element on a page, drag the List Menu widget from the Common tab of the Widgets pane to the<br />

Canvas. You can then resize, align, and arrange the element to fit your page design (for details, see "Working in the<br />

Project Editor" on page 154).<br />

To customize the List Menu element, select the element on the page or in the Page Outline pane, as shown in Figure 9-9<br />

on page 251. The Properties pane for the element appears on the right side of the Project Editor.<br />

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<br />

Properties pane.<br />

To add the various List Menu options, in the General tab, under the Options section, click the add icon ( ). In the Text<br />

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<br />

represents. To add more List Menu options click the add icon again. To choose which List Menu option will display as the<br />

default when the user views the form or page, click on the option's far right column and select the check box that<br />

appears. A blue check mark displays to show the default value.<br />

Figure 9-9: Entering a Name, defining menu Options, and selecting a default for the List Menu element.<br />

You can customize the element by changing properties in the Properties pane:<br />

- 251 -


CHAPTER 9: Using Common Widgets<br />

• The General tab lets you define the element's name, optional ID, menu options, and default selection state. For<br />

details, see "Changing General Properties" on page 197.<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a shadow to the element.<br />

For details, see "Changing Appearance Properties" on page 198.<br />

• The Text tab lets you change the font family and size of the text, the text color, text alignment within the element,<br />

text opacity, character spacing, and text formatting, and lets you add a shadow to the text itself. See "Changing<br />

Text Properties" on page 208 for details.<br />

• The Layout tab lets you set the size of the element, its position on the page, and the amount of padding within the<br />

element. You can also constrain the proportions of the element so that the aspect ratio stays the same when freely<br />

resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the List Menu element with an event and an action to be performed. See<br />

"Changing Behavior Properties" on page 223 for details.<br />

- 252 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Password Input Widget<br />

The Password Input widget lets you add a password entry field to a form or page. The actual password characters do not<br />

display when a user enters them. You can change the element's appearance, including the text font family and size, text<br />

formatting within the element, character spacing, and its layout on the page. You can also add prompt text to inform the<br />

user of the type of content to be entered. In addition you can define the maximum number of characters that can be<br />

entered into the password field.<br />

To place a Password Input element on a page, drag the Password Input widget from the Common tab of the Widgets<br />

pane to the Canvas. You can then resize, align, and arrange the element to fit your page design (for details, see "Working<br />

in the Project Editor" on page 154).<br />

To customize the Password Input element, select the element on the page or in the Page Outline pane, as shown in Figure<br />

9-10 on page 253. The Properties pane for the element appears on the right side of the Project Editor.<br />

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<br />

text; for example, Enter Password. To set a limit for the maximum number of characters to enter, in the Max Chars field,<br />

enter the maximum number of characters.<br />

Figure 9-10: Entering Prompt Text and Max Chars for the Password Input element.<br />

You can customize the element by changing properties in the Properties pane:<br />

• The General tab lets you define the element's optional ID and prompt text. You can also limit the maximum<br />

number of characters allowed to be entered into the field. For details, see "Changing General Properties" on page<br />

197.<br />

- 253 -


CHAPTER 9: Using Common Widgets<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. For details, see "Changing Appearance Properties" on page 198.<br />

• The Text tab lets you change the font family and size of the text, the text color, text alignment within the element,<br />

text opacity, character spacing, and text formatting, and lets you add a shadow to the text itself. See "Changing<br />

Text Properties" on page 208 for details.<br />

• The Layout tab lets you set the size of the element, its position on the page, and the amount of padding within the<br />

element. You can also constrain the proportions of the element so that the aspect ratio stays the same when freely<br />

resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214.<br />

- 254 -


CHAPTER 10: Using Shape Widgets<br />

CHAPTER 10: Using Shape Widgets<br />

The Shape widgets provide basic building blocks for creating the elements of a page. This chapter covers the following<br />

topics:<br />

• "About Shape Widgets" on page 256<br />

• "Using the Rectangle Widget" on page 257<br />

• "Using the Ellipsis Widget" on page 258<br />

• "Using the Triangle Widget" on page 259<br />

- 255 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

About Shape Widgets<br />

<strong>5ml</strong> includes several Shape widgets to create page elements in your project:<br />

• Rectangle widget: Creates a rectangle. You can change the element's appearance and its layout on the page.<br />

• Ellipsis widget: Creates an elliptical shape such as a circle or oval. You can change the element's appearance and<br />

its layout on the page.<br />

• Triangle widget: Creates a triangle. You can change the element's appearance and its layout on the page.<br />

Click the Widgets tab at the top of the Library pane to show the Widgets pane. You can then select Shapes in the dropdown<br />

menu to see the Rectangle, Ellipsis, and Triangle widgets (or select All in the pop-up menu to see all widgets).<br />

Figure 10-1: Selecting the Shapes widgets.<br />

To create an element on the page from a widget, drag the widget from the Widgets pane to the Canvas. You can then<br />

resize, align, and arrange the element to fit your page design (for details, see "Working in the Project Editor" on page<br />

154). You can also customize the element by changing the element's properties in the Properties pane — for details, see<br />

"Customizing Page Elements" on page 194.<br />

- 256 -


CHAPTER 10: Using Shape Widgets<br />

Using the Rectangle Widget<br />

The Rectangle Widget lets you add a Rectangle element to a page. You may want to use it to define a rectangular section<br />

of the page and then fill the rectangle with color, a linear gradient, or an image. You can change the element's<br />

appearance and its layout on the page.<br />

To place a Rectangle element on a page, drag the Rectangle widget from the Shapes section of the Widgets pane to the<br />

Canvas. You can then resize, align, and arrange the element to fit your page design (for details, see "Working in the<br />

Project Editor" on page 154).<br />

To customize the Rectangle element, select the element on the page or in the Page Outline pane, as shown in Figure 10-2<br />

on page 257. The Properties pane for the element appears on the right side of the Project Editor with the following tabs:<br />

• The General tab lets you define the element's optional ID. For details, see "Changing General Properties" on page<br />

197.<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the element and its position on the page. You can also constrain the proportions<br />

of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For details,<br />

see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the Rectangle element with an event and an action to be performed. See<br />

"Changing Behavior Properties" on page 223 for details.<br />

Figure 10-2: Selecting the Rectangle element on the page to change its properties.<br />

- 257 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Ellipsis Widget<br />

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<br />

oval section of the page and then fill the shape with color, a linear gradient, or an image. You can change the element's<br />

appearance and its layout on the page.<br />

To place an Ellipsis element on a page, drag the Ellipsis widget from the Shapes section of the Widgets pane to the<br />

Canvas. You can then resize, align, and arrange the element to fit your page design (for details, see "Working in the<br />

Project Editor" on page 154).<br />

To customize the Ellipsis element, select the element on the page or in the Page Outline pane, as shown in Figure 10-3 on<br />

page 258. The Properties pane for the element appears on the right side of the Project Editor with the following tabs:<br />

• The General tab lets you define the element's optional ID.For details, see "Changing General Properties" on page<br />

197.<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the element and its position on the page. You can also constrain the proportions<br />

of the element so that the aspect ratio stays the same when freely resizing it on the Canvas — turn on this<br />

option to resize a circle shape and maintain the shape as a circle. For details, see "Changing Layout Properties" on<br />

page 214.<br />

• The Behavior tab lets you associate the Ellipsis element with an event and an action to be performed. See "Changing<br />

Behavior Properties" on page 223 for details.<br />

Figure 10-3: Selecting the Ellipsis element on the page to change its properties,<br />

- 258 -


CHAPTER 10: Using Shape Widgets<br />

Using the Triangle Widget<br />

The Triangle Widget lets you add a Triangle element to a page. You may want to use it to define a triangular section of<br />

the page and then fill the triangle with color, a linear gradient, or an image. You can change the element's appearance<br />

and its layout on the page.<br />

To place a Triangle element on a page, drag the Triangle widget from the Shapes section of the Widgets pane to the<br />

Canvas. You can then resize, align, and arrange the element to fit your page design (for details, see "Working in the<br />

Project Editor" on page 154).<br />

To customize the Triangle element, select the element on the page or in the Page Outline pane, as shown in Figure 10-4<br />

on page 259. The Properties pane for the element appears on the right side of the Project Editor with the following tabs:<br />

• The General tab lets you define the element's optional ID.For details, see "Changing General Properties" on page<br />

197.<br />

• The Appearance tab lets you set the element's background color and opacity, and add a reflection and shadow to<br />

the element. For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the element and its position on the page. You can also constrain the proportions<br />

of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For details,<br />

see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the Triangle element with an event and an action to be performed. See<br />

"Changing Behavior Properties" on page 223 for details.<br />

Figure 10-4: Selecting the Triangle element on the page to change its properties.<br />

- 259 -


CHAPTER 11: Using Media Widgets<br />

CHAPTER 11: Using Media Widgets<br />

The media widgets enable you to add media elements to a page, including images, audio, video clips, and links to video<br />

clips on YouTube. This chapter covers the following topics:<br />

• "About Media Widgets" on page 261<br />

• "Using the Image Widget" on page 263<br />

• "Using the Gallery Widget" on page 265<br />

• "Using the Audio Widget" on page 278<br />

• "Using the Video Widget" on page 281<br />

• "Using the YouTube Widget" on page 285<br />

- 260 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

About Media Widgets<br />

<strong>5ml</strong> includes several Media widgets to create page elements in your project:<br />

• Image widget: Creates an interactive image element. You can drag an image from the Assets pane to create an<br />

image element. If you need a placeholder for an image asset that's not ready, you can drag an Image widget from<br />

the Widgets pane and then drag an image from the Assets pane later to fill the element. You can assign an action<br />

to the element to be performed when the user taps or clicks the image. You can also change the element's appearance<br />

and layout on the page.<br />

• Gallery widget: Creates an interactive gallery of images with controls for users to navigate back and forth through<br />

the images. You drag multiple images from the Assets pane to fill the Gallery element. You can also change the element's<br />

appearance and layout on the page.<br />

• Audio widget: Creates an interactive audio element that plays automatically or offers controls for users to play,<br />

pause, and turn off the sound. You can drag audio content from the Assets pane to create an audio element. If you<br />

need a placeholder for a audio asset that's not ready to use, you can drag an Audio widget from the Widgets pane<br />

and then drag an audio file from the Assets pane later to fill the element. You can also change the element's<br />

appearance and layout on the page.<br />

• Video widget: Creates an interactive video element that plays automatically or offers controls for users to play,<br />

fast-forward, rewind, pause, and freely scrub through the video. You can drag a video from the Assets pane to<br />

create a video element. If you need a placeholder for a video asset that's not ready to use, you can drag a Video<br />

widget from the Widgets pane and then drag a video from the Assets pane later to fill the element. You can also<br />

change the element's appearance and layout on the page.<br />

• YouTube widget: Creates an interactive element for a YouTube video with controls for users to expand the video<br />

to full screen, adjust the video's sound, and play, pause, and freely scrub through the video. You can also change<br />

the element's appearance and layout on the page.<br />

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<br />

the drop-down menu under the Widgets tab, as shown in Figure 11-1 on page 262, to see the Image, Gallery, Audio,<br />

Video, and YouTube widgets (or select All in the drop-down menu to see all widgets).<br />

- 261 -


CHAPTER 11: Using Media Widgets<br />

Figure 11-1: Selecting the Media widgets in the Widgets pane of the Library.<br />

To create an element on the page from a widget, drag the widget from the Widgets pane to the Canvas. You can then<br />

resize, align, and arrange the element to fit your page design (for details, see "Working in the Project Editor" on page<br />

154). You can also change the element's properties in the Properties pane — for details, see "Customizing Page<br />

Elements" on page 194<br />

- 262 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Image Widget<br />

The Image widget lets you create an Image element on a page and associate an action to be performed when the user<br />

taps or clicks the image. You can set the image to be embedded as well as downloadable. You can also associate the<br />

Image element with an event and an action to be performed when the user interacts with the Image element. You can<br />

resize, align, and arrange the element on the page to fit your page design (for details, see "Working in the Project Editor"<br />

on page 154).<br />

To place an Image element on a page, select Images in the Assets pane drop-down menu, and drag an image from the<br />

Assets pane, as shown in Figure 11-2 on page 263.<br />

Figure 11-2: Placing an image asset on a page in the Canvas.<br />

You can also drag an Image widget from the Media section of the Widgets pane, and later drag an image from the Assets<br />

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<br />

image asset to the Source field on the Properties pane's General tab. Use this method if your image asset is not ready for<br />

placement on the page or if you want to replace an existing image.<br />

- 263 -


CHAPTER 11: Using Media Widgets<br />

Figure 11-3: Dragging an image from the Assets pane to the Image widget's Source field to place it inside an Image<br />

element already on the page.<br />

To reduce the time to load an image, you can embed the image into the page's HTML file (in base64 format). To embed<br />

an image, select the Image element, open the Properties pane's advanced view, and select the image-embed checkbox.<br />

To set the image to be downloadable (for example, to download a wallpaper image), select the Image element and then<br />

select the Downloadable checkbox on the Properties pane's General tab. The mobile user can tap on the image and save<br />

it to their mobile device.<br />

To change the Image element's properties, select the element on the page or in the Page Outline pane. The Properties<br />

pane for the element appears on the right side of the Project Editor with the following tabs:<br />

• The General tab lets you define the Image element's action and optional ID. For details, see "Changing General<br />

Properties" on page 197.<br />

• The Appearance tab lets you set the element's border, opacity, and add a reflection and shadow to the element.<br />

For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the element and its position on the page. You can also constrain the proportions<br />

of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For details,<br />

see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the Image element with an event and an action to be performed. See "Changing<br />

Behavior Properties" on page 223 for details.<br />

- 264 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Gallery Widget<br />

The Gallery widget lets you create a page element for an interactive gallery of images with captions for each image, and<br />

includes controls for users to navigate back and forth through the images. An interactive gallery can be entertaining as<br />

well as informative, and it provides a way to show multiple images with captions on a single page.<br />

You place the widget on the page to create the Gallery element, and then fill the element with multiple images by<br />

dragging the images from the Assets pane.<br />

To place the Gallery widget on a page, drag the widget from the Media section of the Widgets pane to the Canvas, as<br />

shown in Figure 11-4 on page 265.<br />

Figure 11-4: Placing a Gallery widget on a page (using a tracing image as a guide).<br />

You can resize, align, and arrange the element to fit your page design, as shown in Figure 11-5 on page 266 (for details,<br />

see "Working in the Project Editor" on page 154).<br />

- 265 -


CHAPTER 11: Using Media Widgets<br />

Figure 11-5: Resizing the Gallery element.<br />

To change the Gallery element's properties, select the element on the page or in the Page Outline pane. The Properties<br />

pane for the Gallery element appears on the right side of the Project Editor (refer to Figure 11-5 on page 266).<br />

Note: To select the Gallery widget on the canvas single-click on the Gallery widget. To select an image, double-click the<br />

Gallery widget; the last active image opens.<br />

To add the first image to the Gallery element:<br />

1. Click the Assets tab in the Library pane, and choose Images from the Assets drop-down menu to see your image<br />

assets.<br />

2. Drag the first image from the Assets pane to the Gallery element, as shown in Figure 11-6 on page 267.<br />

- 266 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 11-6: Dragging the first image into the Gallery element.<br />

To add the next image to the Gallery element, you can click the Add View (+) button in the Gallery element's controller,<br />

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<br />

page 268.<br />

Figure 11-7: Clicking the Add View button to add the next image to the Gallery element.<br />

- 267 -


CHAPTER 11: Using Media Widgets<br />

Figure 11-8: Dragging the next image into the Gallery element.<br />

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

you add them.<br />

You can also add one or more images to the Gallery element by selecting them in the Assets pane and dragging them<br />

directly to the Photos list, as shown in Figure 11-9 on page 269. You can then reorder the images in the Gallery by<br />

selecting an image in the Photos list and clicking the up or down arrows at the bottom right corner of the Photos list, as<br />

shown in Figure 11-10 on page 269.<br />

- 268 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 11-9: Dragging several images to the Photos list to add them at once to the Gallery element.<br />

Figure 11-10: Moving an image up in the order of images in the Gallery element.<br />

- 269 -


CHAPTER 11: Using Media Widgets<br />

Each Gallery image includes a View and a Label (caption) component, each with its own Properties pane. To change an<br />

image's View or Label properties, select the image in the Photos list or use the Show Next button to navigate to the<br />

image, as shown in Figure 11-11 on page 270. Double-click on the image to select the image View and display the View<br />

Properties pane. Click on the Label (caption) component below the image View to select the Label component and display<br />

the Label Properties pane.<br />

Figure 11-11: Using the Show Next button to navigate to the next image.<br />

To change the image View Properties:<br />

1. Select the image in the Photos list or use the Show Next button to navigate to the image.<br />

2. Double-click on the image to select the image View.<br />

The image View Properties pane opens.<br />

- 270 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 11-12: Selecting a Gallery widget's image View and Properties pane<br />

3. From the Transition drop-down menu, you can select to Slide or Fade In the image when the user or an event<br />

changes the Gallery view.<br />

• Select the Slide in transition.<br />

Figure 11-13: Selecting the Slide transition.<br />

Then select a Slide in Direction, Acceleration, and Duration option.<br />

• Select the Fade In transition.<br />

- 271 -


CHAPTER 11: Using Media Widgets<br />

Figure 11-14: Selecting the Fade In transition<br />

Then select a Fade In Acceleration and Duration option.<br />

4. You can select the Load on demand and Preload Images checkboxes to determine when to load the images to the<br />

user's device. For more information about Loading on demand and Preloading Images, see "Optimizing at the<br />

View or Tab Level" on page 141.<br />

To add a caption to a Gallery image:<br />

1. Select the image in the Photos list or use the Show Next button to navigate to the image.<br />

2. Double-click on the image to select the image View.<br />

3. Beneath the image, click inside the caption area to select the Label component.<br />

The Label (caption) properties appear in the Properties pane, as shown in Figure 11-15 on page 273.<br />

- 272 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 11-15: Selecting a Gallery widget's image Label and Properties pane.<br />

4. Enter the caption text in the Text field in the General tab.<br />

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

Gallery Properties pane.<br />

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<br />

(caption) component.<br />

Setting up caption placement:<br />

You can place captions at the bottom or top of the images, or overlay the captions over the images. You can also change<br />

the size of the caption area.<br />

To set the placement of captions in the Gallery element, choose one of the following options in the Captions drop-down<br />

menu under the Photos list in the Photo Gallery Properties pane, as shown in Figure 11-16 on page 274:<br />

• Bottom: Captions are placed below each image.<br />

• Bottom (Overlay): Captions are placed at the bottom of each image overlaying the image.<br />

• Top: Captions are placed above each image.<br />

• Top (Overlay): Captions are placed at the top of each image overlaying the image.<br />

• No Captions: Captions do not appear in the Gallery element.<br />

- 273 -


CHAPTER 11: Using Media Widgets<br />

Figure 11-16: Choosing to place captions at the bottom of each image overlaying the image.<br />

With Bottom (Overlay) or Top (Overlay) choices, a drop-down menu appears below the Captions menu, as shown in<br />

Figure 11-17 on page 275, for choosing Always Show to always show the overlaid caption, or On Tap to show the overlaid<br />

caption only when the user taps or clicks the image.<br />

- 274 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 11-17: Choosing to show the overlaid caption only when the user taps or clicks the image.<br />

To resize the caption area, drag the Caption Size slider at the bottom of the General tab of the Photo Gallery properties,<br />

as shown in Figure 11-18 on page 276. The caption size is a percentage of the total size of the Gallery element.<br />

- 275 -


CHAPTER 11: Using Media Widgets<br />

Figure 11-18: Resizing the caption area with the Caption Size slider.<br />

You can also customize the Gallery element itself by selecting the Gallery element on the page or in the Page Outline pane<br />

and changing its properties in the Properties pane:<br />

• The General tab of the Gallery widget Properties pane lets you define the element's optional ID. It lets you select<br />

where to locate the gallery image's caption, whether to show a caption, and what size the caption should be. In<br />

addition you can select whether to enable tracking for to the Gallery widget. For details, see "Changing General<br />

Properties" on page 197.<br />

• The Appearance tab lets you set the element's border and opacity, and add a reflection and shadow to the element.<br />

For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the element and its position on the page. You can also constrain the proportions<br />

of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For details,<br />

see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the Gallery element with an event and an action to be performed. See "Changing<br />

Behavior Properties" on page 223 for details.<br />

You can customize the images by changing the View properties:<br />

- 276 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

• The General tab of the View Properties pane lets you define the View's optional ID. You can set up image transitions<br />

such as Slide and Fade In, and you can customize the transitions by choosing the Slide Direction and the<br />

Slide or Fade In Acceleration and Duration options. In additon you can enable View tracking options; you can track<br />

the image as a View or as a Page. You can also choose Load on Demand and Preload Images options.<br />

• The Appearance tab of the View Properties pane lets you set the View background, border, and opacity. For<br />

details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the degree of rotation to set the caption area. For details, see "Changing Layout Properties"<br />

on page 214.<br />

• The Behavior tab lets you associate the View component with an event and an action to be performed. See "Changing<br />

Behavior Properties" on page 223 for details.<br />

You can customize the captions by changing the Label properties:<br />

• The General tab lets you enter text for the Label (caption) component. The Wrap Text option is automatically<br />

selected so that long caption text lines wrap around to the next line; however, if you don’t want the text lines to<br />

wrap, you can turn this option off by clicking it.<br />

• The Appearance tab of the Label Properties pane lets you set the caption’s background, border, and opacity, and<br />

add a reflection to the element. For details, see "Changing Appearance Properties" on page 198.<br />

• The Text tab lets you change the font family and size of the text, the text color, text alignment within the caption,<br />

text opacity, character spacing, and text formatting, and lets you add a shadow to the text itself. In addition, you<br />

can set the line height by dragging the Line Height slider — dragging to the right increases the line height, while<br />

dragging to the left reduces the line height. The line height is measured in percentages of the font size, in which<br />

100% is equal to the font size. See "Changing Text Properties" on page 208 for details.<br />

• The Layout tab lets you set the degree of rotation to set the caption area. For details, see "Changing Layout Properties"<br />

on page 214.<br />

- 277 -


CHAPTER 11: Using Media Widgets<br />

Using the Audio Widget<br />

The Audio widget lets you create an Audio element on a page that offers controls for users to play or pause the audio<br />

content, as well as turn the sound on or off. You can also resize, align, and arrange the element to fit your page design<br />

(for details, see "Working in the Project Editor" on page 154).<br />

To place an Audio element on a page, click the Assets tab, select Audio in the Assets pane drop-down menu, and navigate<br />

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<br />

shown in Figure 11-19 on page 278.<br />

Figure 11-19: Placing an audio asset on a page in the Canvas.<br />

You can also drag an Audio widget from the Media section of the Widgets pane, and later drag an audio file from the<br />

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<br />

not ready for placement on the page.<br />

- 278 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 11-20 : Dragging an audio file from the Assets pane to the Audio widget's Source field to place it inside an Audio<br />

element already on the page.<br />

To change the Audio element's properties, select the element on the page or in the Page Outline pane. The Properties<br />

pane for the element appears on the right side of the Project Editor.<br />

You can customize the Audio element by changing properties in the Properties pane:<br />

• The General tab lets you define the Audio element's optional ID. You can set the audio player controls to be visible<br />

or hidden by choosing Visible or Hidden from the Controls drop-down menu. The user can then tap or click the<br />

audio to see the controls. Using the controls the user can play, pause, and turn the sound on or off. In the Options<br />

section, you can set the audio content to play automatically or only when the user clicks on the play control. You<br />

can also set the audio content to play in a loop and you can choose whether to preload the audio content.<br />

(Preloading the audio reduces the response time when the user clicks to play the audio; however, it increases the<br />

initial page load time.) For details, see "Changing General Properties" on page 197<br />

If you enable the tracking feature for the project, then you see additional options on the General tab. You can<br />

choose to track when the user starts the audio (either auto or manual play), pauses the audio (manual pause), and<br />

when the audio ends (either auto or manual stop). In the Label and Category fields you can enter custom values to<br />

create report tags to sort and aggregate the events in tracking reports.<br />

- 279 -


CHAPTER 11: Using Media Widgets<br />

Figure 11-21 : Tracking the audio element and selecting tracking options; track media start, media pause, and<br />

media end.<br />

• The Appearance tab lets you set the element's border and opacity, and add a reflection and shadow to the element.<br />

For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the element and its position on the page, as well as add padding. You can<br />

also constrain the proportions of the element so that the aspect ratio stays the same when freely resizing it on the<br />

Canvas. For details, see "Changing Layout Properties" on page 214.<br />

- 280 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Video Widget<br />

The Video widget lets you create a Video element on the page that offers controls for users to play or pause the video,<br />

and rewind, scrub through, or fast-forward through the video. You can also resize, align, and arrange the element to fit<br />

your page design (for details, see "Working in the Project Editor" on page 154).<br />

To place a Video element on a page, select Videos in the Assets pane drop-down menu, and drag a video from the Assets<br />

pane, as shown in Figure 11-22 on page 281.<br />

Figure 11-22: Placing a video asset on a page in the Canvas.<br />

You can also drag a Video widget from the Media section of the Widgets pane, and later drag a video file from the Assets<br />

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<br />

ready for placement on the page.<br />

- 281 -


CHAPTER 11: Using Media Widgets<br />

Figure 11-23 : Placing a Video widget from the Widgets pane on the page before dragging a video file from the Assets<br />

pane to place inside a Video widget already on the page.<br />

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<br />

282. Use this method if your video is hosted elsewhere. To add the video source URL, drag a Video widget onto the<br />

canvas, and click the Advanced Properties button at the top of the Properties pane. In the media-source field, enter (or<br />

copy and paste) the URL value for the video's source.<br />

Figure 11-24 : Using a URL, in the Advanced Properties' media-source field, to point to the video file's location.<br />

- 282 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

To change the Video element's properties, select the element on the page or in the Page Outline pane. The Properties<br />

pane for the element appears on the right side of the Project Editor.<br />

In the General tab of the Properties pane you can set the Preview frame of the video, which is the frame that appears<br />

when the video is not playing. To set the Preview frame, drag the Preview Frame slider in the General tab of the Video<br />

Properties pane to the right until you see the frame you want, as shown in Figure 11-25 on page 283. You can move<br />

backward and forward through all the video frames by dragging the slider left and right.<br />

You can also set the video player controls to be visible or hidden by choosing Visible or Hidden from the Controls dropdown<br />

menu in the General tab of the Video Properties. The user can then tap or click the video to see the controls.<br />

Figure 11-25: Setting the Preview Frame for the video.<br />

Alternatively, instead of using a frame from the video as a preview, you can display a poster image for the video using a<br />

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<br />

poster source URL, drag a Video widget onto the canvas, and click the Advanced Properties button at the top of the<br />

Properties pane. In the poster field, enter (or copy and paste) the URL value for the poster's source. The poster source<br />

can be either local or remote. (Currently to use a local asset, you need to drag and drop the image onto the canvas and<br />

then copy the Image widget's Advanced Properties image property value and paste it into the Video widget's Advanced<br />

Properties poster property field.) To hide the poster image, in the Advanced Properties pane, select the hide-poster<br />

checkbox.<br />

You can customize the Video element by changing properties in the Properties pane:<br />

• The General tab lets you define the Video element's optional ID. You can set the video player controls to be visible<br />

or hidden by choosing Visible or Hidden from the Controls drop-down menu. The user can then tap or click the<br />

video to see the controls. Using the controls the user can play, pause, and turn the sound on or off.<br />

- 283 -


CHAPTER 11: Using Media Widgets<br />

In the Options section, you can set the video content to play automatically or only when the user clicks on the play<br />

control. You can also set the video content to play in a loop and you can choose whether to preload the video<br />

content. (Preloading the video reduces the response time when the user clicks to play the video; however, it<br />

increases the initial page load time.) For details, see "Changing General Properties" on page 197<br />

If you enable the tracking feature for the project, then you see additional options on the General tab. You can<br />

choose to track when the user starts the video, pauses the video, and when the video ends (either auto or manual<br />

stop). In the Label and Category fields you can enter custom values to create report tags to sort and aggregate the<br />

events in tracking reports.<br />

Figure 11-26: Tracking the video element and selecting tracking options; track media start, media pause, and<br />

media end.<br />

• The Appearance tab lets you set the element's border and opacity, and add a reflection and shadow to the element.<br />

For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the element and its position on the page. You can also constrain the proportions<br />

of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For details,<br />

see "Changing Layout Properties" on page 214.<br />

- 284 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the YouTube Widget<br />

The YouTube widget places a YouTube video clip on a page with controls for users to play or pause the video, scrub<br />

through the video, adjust the sound, play the video full-screen, and jump to the YouTube page where the video resides.<br />

To place the YouTube element on a page, drag the widget from the Media section of the Widgets pane to the Canvas, as<br />

shown in Figure 11-27 on page 285. You can then resize, align, and arrange the element to fit your page design (for<br />

details, see "Working in the Project Editor" on page 154).<br />

Figure 11-27: Placing a YouTube widget on a page in the Canvas.<br />

To change the YouTube element's properties, select the element on the page or in the Page Outline pane. The Properties<br />

pane for the element appears on the right side of the Project Editor.<br />

To assign a YouTube video clip to the element, enter the YouTube video ID (not the entire URL for the YouTube video,<br />

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<br />

pane, as shown in Figure 11-28 on page 286.<br />

- 285 -


CHAPTER 11: Using Media Widgets<br />

Figure 11-28: Changing the YouTube Video ID to point to a different YouTube video clip.<br />

You can customize the Video element by changing its properties in the Properties pane:<br />

• The General tab lets you define the YouTube element's optional ID. For details, see "Changing General Properties"<br />

on page 197<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the element and its position on the page. You can also constrain the proportions<br />

of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For details,<br />

see "Changing Layout Properties" on page 214.<br />

- 286 -


CHAPTER 12: Using Effects and Animation Widgets<br />

CHAPTER 12: Using Effects and Animation Widgets<br />

The Effects and Animation widgets let you add special effects to a page, including a 360-degree view and animation. This<br />

chapter covers the following topics:<br />

• "About Effects and Animation Widgets" on page 288<br />

• "Using the 360 Widget" on page 289<br />

• "Using the Frameset Widget" on page 297<br />

• "Using the Particles Widget" on page 304<br />

- 287 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

About Effects and Animation Widgets<br />

<strong>5ml</strong> includes several Effects and Animation widgets to create page elements in your project:<br />

• 360 widget: Creates an interactive gallery of images designed to show a 360-degree view, with controls for users<br />

to navigate back and forth through the images. You drag multiple images from the Assets pane to fill the 360 element.<br />

You can also change the element's appearance and layout on the page.<br />

• Particles widget: Creates an animation of particles, such as falling leaves, rain, snow, confetti, stars, Xmas-style<br />

snowflakes, or custom particles. You can control the size of the particles, the speed of the animation, the<br />

animation's rotation about the X, Y, and Z axes, and the acceleration of the animation.<br />

• Frameset widget: Creates an interactive slideshow of images that you can set to play automatically, to play when<br />

the mouse hovers over the element, or to navigate manually by swiping through the images. You drag multiple<br />

images from the Assets pane to fill the Frameset element. You can also change the element's appearance and layout<br />

on the page.<br />

Click the Widgets tab at the top of the Library pane to show the Widgets pane. You can then select Effects & Animation in<br />

the drop-down menu under the Widgets tab, as shown in Figure 12-1 on page 288, to see the 360, Particles, and<br />

Frameset widgets (or select All in the drop-down menu to see all widgets).<br />

Figure 12-1: Selecting the Effects & Animation widgets in the Widgets pane of the Library.<br />

- 288 -


CHAPTER 12: Using Effects and Animation Widgets<br />

Using the 360 Widget<br />

The 360 widget lets you create a page element for an interactive gallery of images that you can set to play automatically,<br />

to play when the mouse hovers over the element, or to be navigated manually by swiping through the images. You drag<br />

multiple images from the Assets pane to fill the 360 element. You can also change the element's appearance and layout<br />

on the page.<br />

To place the widget on a page and create a 360 element, drag the widget from the Effects & Animation section of the<br />

Widgets pane to the Canvas, as shown in Figure 12-2 on page 289. You can then resize, align, and arrange the element to<br />

fit your page design (for details, see "Working in the Project Editor" on page 154). You can also associate the 360 element<br />

with an event and an action to be performed when the user interacts with the 360 element.<br />

Figure 12-2: Placing a 360 widget on the page.<br />

To add the first image to the 360 element:<br />

1. Click the Assets tab in the Library pane, and choose Images from the Assets drop-down menu.<br />

2. Drag the image from the Assets pane, and drop it into the element, as shown in Figure 12-3 on page 290.<br />

- 289 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 12-3: Dragging the first image into the 360 element.<br />

To add the next image to the 360 element, click the Add View (+) button in the 360 element's controller, as shown in<br />

Figure 12-4 on page 291. You can then drag the next image from the Assets pane into the 360 element, as shown in<br />

Figure 12-5 on page 291.<br />

- 290 -


CHAPTER 12: Using Effects and Animation Widgets<br />

Figure 12-4: Clicking the Add View button to add the next image to the 360 element.<br />

Figure 12-5: Dragging the next image into the 360 element.<br />

- 291 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

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.<br />

Tip: You can add a selection of images quickly to the 360 element by selecting them in the Assets pane and dragging<br />

them directly to the Photos list, as shown in Figure 12-6 on page 292.<br />

You can reorder the images in the 360 widget element by selecting an image in the Photos list and clicking the up or down<br />

arrows at the bottom right corner of the Photos list, as shown in .<br />

Figure 12-6: Dragging several images to the Photos list to add them at once to the 360 element.<br />

- 292 -


CHAPTER 12: Using Effects and Animation Widgets<br />

Figure 12-7: Moving an image up in the order of images in the 360 element.<br />

You can also set the 360 element to enable swiping through the images manually, or playing the images automatically as<br />

a slideshow, by choosing Manual or Automatic from the Playback drop-down menu in the General tab of the Frameset<br />

Properties pane, as shown in Figure 12-8 on page 294.<br />

- 293 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 12-8: Setting the Frameset element to On Swipe to show the images by manual swiping.<br />

The choices for the Playback menu are:<br />

• On Swipe: The 360 element displays the first image, and the user can swipe (or click and drag with a mouse) to<br />

navigate back and forth through all the images.<br />

• On Hover: The 360 element starts playing the images as a slideshow whenever the user hovers the mouse over<br />

the element.<br />

• Automatic: The 360 element starts playing the slideshow immediately after the page loads.<br />

• None: Removes any playback modes.<br />

After choosing Automatic, you can choose Duration in the drop-down menu underneath the Playback menu to set the<br />

slideshow's duration in milliseconds, as shown in Figure 12-9 on page 295, or choose Frames Per Second in the menu to<br />

set the number of frames per second for playing the slideshow, as shown in Figure 12-10 on page 296. You can also click<br />

the Loop option to continually repeat the slideshow.<br />

- 294 -


CHAPTER 12: Using Effects and Animation Widgets<br />

Figure 12-9: Setting the Playback menu to Automatic, choosing Duration, and setting the duration in milliseconds.<br />

- 295 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 12-10: Setting the Playback menu to Automatic, choosing Frames Per Second, and setting the number of frames<br />

per second.<br />

The 360 Properties pane also includes the following tabs:<br />

• The General tab lets you define the 360 element's optional ID and the image playback mode. For details, see<br />

"Changing General Properties" on page 197.<br />

• The Appearance tab lets you set the element's border and opacity. For details, see "Changing Appearance Properties"<br />

on page 198.<br />

• The Layout tab lets you set the size of the element and its position on the page. You can also constrain the proportions<br />

of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For details,<br />

see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the 360 element with an event and an action to be performed. See "Changing<br />

Behavior Properties" on page 223 for details.<br />

- 296 -


CHAPTER 12: Using Effects and Animation Widgets<br />

Using the Frameset Widget<br />

The Frameset widget lets you create a page element for an interactive slideshow of images that you can set to play<br />

automatically, to play when the mouse hovers over the element, or to be navigated manually by swiping through the<br />

images. You drag multiple images from the Assets pane to fill the Frameset element. You can also change the element's<br />

appearance and layout on the page.<br />

To place the widget on a page and create a Frameset element, drag the widget from the Effects & Animation section of<br />

the Widgets pane to the Canvas, as shown in Figure 12-11 on page 297. You can then resize, align, and arrange the<br />

element to fit your page design (for details, see "Working in the Project Editor" on page 154). You can also associate the<br />

Frameset element with an event and an action to be performed when the user interacts with the Frameset element.<br />

Figure 12-11: Placing a Frameset widget on the page.<br />

To add the first image to the Frameset element:<br />

1. Click the Assets tab in the Library pane, and choose Images from the Assets drop-down menu.<br />

2. Drag the image from the Assets pane, and drop it into the element, as shown in Figure 12-12 on page 298.<br />

- 297 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 12-12: Dragging the first image into the Frameset element.<br />

To add the next image to the Frameset element, click the Add View (+) button in the Frameset element's controller, as<br />

shown in Figure 12-13 on page 298. You can then drag the next image from the Assets pane to the Frameset element, as<br />

shown in Figure 12-14 on page 299.<br />

Figure 12-13: Clicking the Add View button to add the next image to the Frameset element.<br />

- 298 -


CHAPTER 12: Using Effects and Animation Widgets<br />

Figure 12-14: Dragging the next image into the Frameset element.<br />

The images in the Frameset element are listed in the Photos list in the General tab of the Frameset Properties pane as you<br />

add them. You can also add one or more images to the Frameset element by selecting them in the Assets pane and<br />

dragging them directly to the Photos list, as shown in Figure 12-15 on page 300.<br />

You can reorder the images in the Frameset element by selecting an image in the Photos list and clicking the up or down<br />

arrows at the bottom right corner of the Photos list, as shown in Figure 12-16 on page 300.<br />

- 299 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 12-15: Dragging several images to the Photos list to add them at once to the Frameset element.<br />

Figure 12-16: Moving an image up in the order of images in the Frameset element.<br />

- 300 -


CHAPTER 12: Using Effects and Animation Widgets<br />

You can also set the Frameset element to enable swiping through the images manually, or playing the images<br />

automatically as a slideshow, by choosing Manual or Automatic from the Playback drop-down menu in the General tab of<br />

the Frameset Properties pane, as shown in Figure 12-17 on page 301.<br />

Figure 12-17: Setting the Frameset element to On Swipe to show the images by manual swiping.<br />

The choices for the Playback menu are:<br />

• On Swipe: The Frameset element displays the first image, and the user can swipe (or click and drag with a mouse)<br />

to navigate back and forth through all the images.<br />

• On Hover: The Frameset element starts playing the images as a slideshow whenever the user hovers the mouse<br />

over the element.<br />

• Automatic: The Frameset element starts playing the slideshow immediately after the page loads.<br />

• None: Removes any playback modes.<br />

After choosing Automatic, you can choose Duration in the drop-down menu underneath the Playback menu to set the<br />

slideshow's duration in milliseconds, as shown in Figure 12-18 on page 302, or choose Frames Per Second in the menu to<br />

- 301 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

set the number of frames per second for playing the slideshow, as shown in Figure 12-19 on page 303. You can also click<br />

the Loop option to continually repeat the slideshow.<br />

Figure 12-18: Setting the Playback menu to Automatic, choosing Duration, and setting the duration in milliseconds.<br />

- 302 -


CHAPTER 12: Using Effects and Animation Widgets<br />

Figure 12-19: Setting the Playback menu to Automatic, choosing Frames Per Second, and setting the number of frames<br />

per second.<br />

You can also customize the Frameset element in the Properties pane:<br />

• The General tab lets you define the Frameset element's optional ID. For details, see "Changing General Properties"<br />

on page 197.<br />

• The Appearance tab lets you set the element's border and opacity. For details, see "Changing Appearance Properties"<br />

on page 198.<br />

• The Layout tab lets you set the size of the element and its position on the page. You can also constrain the proportions<br />

of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For details,<br />

see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the Frameset element with an event and an action to be performed. See<br />

"Changing Behavior Properties" on page 223 for details.<br />

- 303 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Particles Widget<br />

The Particles widget lets you create a page element for animated particles. The Particles widget includes presets for<br />

falling leaves, rain, snow, confetti, stars, xmas-related particles, and you can create animation with custom particles. You<br />

can control the size of the particles, the speed of the animation, the animation's rotation about the X, Y, and Z axes, and<br />

the acceleration of the animation.<br />

To place the widget on a page and create a Particles element, drag the widget from the Effects & Animation section of the<br />

Widgets pane to the Canvas, as shown in Figure 12-20 on page 304. You can then resize, align, and arrange the element<br />

to fit your page design (for details, see "Working in the Project Editor" on page 154).<br />

Figure 12-20: Placing a Particles widget on a page (on top of an Image element).<br />

You can change the type of animated particle in the Particles element by choosing the type in the Type drop-down menu<br />

in the General tab of the Particles Properties pane, as shown in Figure 12-21 on page 305.<br />

- 304 -


CHAPTER 12: Using Effects and Animation Widgets<br />

Figure 12-21: Changing the type of animated particle in the Particles widget element to Snow.<br />

You can use your own custom particles by uploading the particle image(s) into the Assets library. For information about<br />

how to upload an image, see "Importing Images" on page 149. On the Particles Properties pane's General Tab, from the<br />

Type drop-down menu, choose Custom. Under the Type drop-down menu an image well appears. Drag and drop the<br />

custom particle image(s) from the Assets library into the image well, as shown in Figure 12-22 on page 306. (You can add<br />

one or more particle images. To remove an image, select the image and click on the bin icon.) When implementing<br />

custom particles you need to consider the image size and the image density (number of images). Also, consider how<br />

rendering the image size and density affects the mobile user experience and how the particles will render on a variety of<br />

mobile devices. For more information, contact your Velti representative.<br />

- 305 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 12-22: Using a Custom particle image.<br />

After selecting a type of particle, you can set the amount of particles in the Population slider by dragging to the right (for a<br />

large animation with many particles) or to the left (for a small animation with less particles), as shown in Figure 12-23 on<br />

page 307.<br />

You can also set the speed of the animation by dragging the Speed slider to the left (slow) or the right (fast). To change<br />

the direction of the animated particles, you can set the particles to rotate around the X, Y, and/or Z axes by clicking to<br />

turn on the X Axis, Y Axis, and/or Z Axis under the Rotation subheading, as shown in Figure 12-24 on page 308.<br />

- 306 -


CHAPTER 12: Using Effects and Animation Widgets<br />

Figure 12-23: Setting the Population of animated particles to Large (for more particles in the animation).<br />

You can also specify the way the animation accelerates from start to finish by choosing one of the following for the<br />

Acceleration drop-down menu:<br />

• Ease: The animation accelerates slowly and builds up to normal speed as it plays.<br />

• Ease In: The animation accelerates from slower at the start to normal speed at the end.<br />

• Ease Out: The animation plays at normal speed at the start and then decelerates (from faster to slower) at the<br />

end.<br />

• Ease In Out: The animation accelerates from slower at the start to faster in the middle, and then decelerates (from<br />

- 307 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

faster to slower) at the end.<br />

• Linear: The animation plays at the same speed throughout.<br />

Figure 12-24: Changing the Acceleration and direction of the animated particles to rotate around both the Y and Z axes.<br />

You can also customize the Particles element in the Properties pane:<br />

• The General tab lets you define the Particles element's optional ID. For details, see "Changing General Properties"<br />

on page 197.<br />

- 308 -


CHAPTER 12: Using Effects and Animation Widgets<br />

• The Appearance tab lets you set the element's background, border, and opacity. For details, see "Changing<br />

Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the element and its position on the page. You can also constrain the proportions<br />

of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For details,<br />

see "Changing Layout Properties" on page 214.<br />

- 309 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

CHAPTER 13: Using Layout and Navigation Widgets<br />

The Layout widgets let you group other widget-created elements together for layout on the page, and the Navigation<br />

widgets provide a way to navigate collections of elements. This chapter covers the following topics:<br />

• "About Layout and Navigation Widgets" on page 311<br />

• "Using the Container Widget" on page 312<br />

• "Using the 3D Stage Widget" on page 314<br />

• "Using the HBox Widget" on page 320<br />

• "Using the VBox Widget" on page 323<br />

• "Using the Scroll View Widget" on page 325<br />

• "Using the Tab Set Widget" on page 327<br />

• "Using the View Set Widget" on page 335<br />

- 310 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

About Layout and Navigation Widgets<br />

<strong>5ml</strong> includes the following Layout and Navigation widgets you can use in your project:<br />

• Container widget: Creates a rectangular element for page layout that can hold other page elements.<br />

• HBox and VBox widgets: Create horizontal and vertical boxes for laying out page elements that automatically position<br />

the page elements within them.<br />

• Scroll View widget: Creates a rectangular window that provides additional viewing space in which you can view<br />

other page elements. The Scroll View widget provides a compact method for displaying elements that take up a lot<br />

of space, whether due to the size of the element or the number of the elements. In this way you can fit more elements<br />

or larger elements inside the Scroll View element than would otherwise fit into the space the Scroll View element<br />

takes up on the Canvas. The Scroll View element provides scroll bars that allow the user to scroll vertically<br />

and horizontally to view all the other elements within the window.<br />

• Tab Set widget: Creates a page element that holds sets of other elements and shows them one at a time. Users<br />

can navigate to each set by tapping tabs along the top of the Tab Set element -- similar to the way users click tabs<br />

at the top of a web page to see different "pages" of content.<br />

• View Set widget: Creates a page element that holds sets of other elements and shows each set one at a time.<br />

Users can navigate to the other sets by tapping dots along the bottom of the View Set element -- similar to the way<br />

users tap dots at the bottom of a mobile device's home screen to see different screens of content.<br />

The Layout and Navigation widgets let your group other page elements together, either as a collection of elements that<br />

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<br />

tabs (in a Tab Set) or dots (in a View Set).<br />

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<br />

page 311, you can then select Layout in the drop-down menu under the Widgets tab to see the Layout widgets, and select<br />

Navigation in the drop-down menu to see the Navigation widgets (or select All in the drop-down menu to see all widgets).<br />

Figure 13-1: Choosing Layout and Navigation widgets.<br />

- 311 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

Using the Container Widget<br />

The Container widget creates a rectangular area on the page that can hold other page elements, such as Label, Button,<br />

Text, Image, and Video elements. Container elements are useful for holding other elements so that you can copy and<br />

paste the entire Container element on another page without having to copy the individual elements. You can change the<br />

appearance of the Container element separately from the other elements and from the page itself.<br />

To place the widget on a page and create a Container element, drag the widget from the Layout section of the Widgets<br />

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<br />

page design (for details, see "Working in the Project Editor" on page 154). You can also associate the Container element<br />

with an event and an action to be performed when the user interacts with the Container element.<br />

Figure 13-1: Placing a Container widget on the page (using a tracing image as a guide).<br />

After placing the Container element on the page, you can drag widgets from the Widgets pane, or assets from the Assets<br />

pane, into the Container element, as shown in Figure 13-2 on page 313. Each element or asset you add to the Container<br />

element appears as a child to the parent Container element in the Page Outline pane on the lower left side of the Project<br />

Editor.<br />

- 312 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 13-2: Placing a Label widget inside the Container element.<br />

To change the Container element's properties, click the element on the page, or click Container in the Page Outline pane.<br />

The Properties pane for the Container element appears on the right side of the Project Editor with the following tabs:<br />

• The General tab lets you define the element's optional ID. For details, see "Changing General Properties" on page<br />

197.<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. These settings are applied to the entire Container element; to change the appearance settings for<br />

each element within the Container element, select each element first. For details, see "Changing Appearance Properties"<br />

on page 198.<br />

• The Layout tab lets you set the size of the entire Container element and its position on the page, and the amount of<br />

padding within the element. You can also constrain the proportions of the element so that the aspect ratio stays<br />

the same when freely resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the Container element with an event and an action to be performed. See<br />

"Changing Behavior Properties" on page 223 for details.<br />

- 313 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

Using the 3D Stage Widget<br />

The 3D Stage widget creates a container area on the page that can hold other page elements, such as Label, Button,<br />

Text, Image, and Video elements. Using this widget you can transform two dimensional elements into three dimensional<br />

elements by dragging them into the 3D Stage element. The 3D Stage element provides "the appearance" that some parts<br />

of an element are near the viewer as they appear larger and some parts of an element are further from the viewer as<br />

they appear smaller.<br />

The 3D Stage widget's 3D Transform tab allows you to set Perspective and Perspective Origin properties collectively to all<br />

the elements that are included within the widget. In addition, for each element within the 3D Stage element, you can set<br />

its individual 3D properties, including setting different perspective point of origin, offset, rotation, and skew properties.<br />

You can change the appearance of the 3D Stage element separately from the other elements and from the page itself.<br />

You can also associate the 3D Stage element with an event and an action to be performed when the user interacts with<br />

the 3D Stage element.<br />

To place the widget on a page and create a 3D Stage element, drag the widget from the Layout section of the Widgets<br />

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<br />

page design (for details, see "Working in the Project Editor" on page 154).<br />

Figure 13-1: Placing a 3D Stage widget on the page.<br />

Set the 3D Stage element's Perspective and Perspective Origin values, as shown in Figure 13-2 on page 315.<br />

- 314 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 13-2: Setting the 3D Transformations properties.<br />

After placing the 3D Stage element on the page, you can drag widgets from the Widgets pane, or assets from the Assets<br />

pane, into the 3D Stage element, as shown in Figure 13-3 on page 315. (Select the 3D Stage element before dragging the<br />

widget into it.) Each element or asset you add to the 3D Stage element appears as a child to the parent 3D Stage element<br />

in the Page Outline pane on the lower left side of the Project Editor.<br />

Figure 13-3: Placing a Button widget inside the 3D Stage element.<br />

- 315 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

After placing a widget inside a 3D Stage element, you can select the widget's 3D Transformations tab, on the Properties<br />

pane, and set the 3D properties for that individual element. Figure 13-4 on page 316 shows the 3D Transformations tab<br />

for a Button element. For more information about the 3D Transformations tab, see "Changing 3D Transformations<br />

Properties" on page 216.<br />

Figure 13-4: Setting a Button element's 3D Transformations properties.<br />

Perspective Property<br />

Use the 3D Stage widget's Perspective property to align all the elements within the 3D Stage element to the same<br />

perspective. In this way each element shares the same 3D space.<br />

The Perspective's value determines the intensity of the 3D effect. Think of it as a distance from the viewer to the object.<br />

The greater the value, the further the distance, the less intense the visual effect. For example, the default 800px<br />

perspective value yields a subtle 3D effect, as if you are viewing an object from far away. A 100px perspective value<br />

produces a more intense 3D effect, as if you are viewing a massive object.<br />

You can change the perspective by moving the Perspective slider control to the right or the left. To intensify the 3D effect<br />

(the object looks closer), move the Perspective slider control to the left. To reduce the intensity of the 3D effect (the<br />

object looks far away), move the Perspective slider control to the right.<br />

- 316 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 13-5: Decreasing the Perspective Value to 20px to Intensify the 3D Effect.<br />

Perspective Origin Properties<br />

By default, the vanishing point for a 3D Stage element is positioned at the center of the element. The vanishing point is<br />

represented by a Perspective Origin X axis (horizontal axis) value of 50% and a Perspective Origin Y axis (vertical axis)<br />

vaule of 50%. The 50% Perspective Origin X and Perspective Origin Y values represent the midway points for the X and Y<br />

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.<br />

The X and Y Perspective Origin values have a range from 0% to 100%.You can change the position of the vanishing point<br />

by changing the Perspective Origin values. Changing the X Perspective Origin moves the vanishing point along the X axis.<br />

A value 50 moves it to the right. Changing the Y Prespective Origin moves the<br />

vanishing point along the Y axis. A value 50 moves it to the up.<br />

The 3D Transformations properties for all elements within a 3D Stage element are based on the 3D Stage's Perspective<br />

and Perspective Origin values. For example, an element within the 3D Stage element uses the 3D Stage's Perspective<br />

Origin value as its starting point for evaluating its own perspective origin. If you keep the element at it default value,<br />

50%, then it will share the same vanishing point as the 3D Stage element, as shown with rectangle A in Figure 13-6 on<br />

page 318.<br />

- 317 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

Figure 13-6: Placing two Rectangle elements within a 3D Stage element.<br />

If you change the element's Origin value, then you will offset its vanishing point from the 3D Stage element's vanishing<br />

point, as shown with rectangle B in Figure 13-7 on page 318.<br />

Figure 13-7:Changing Rectangle B's Origin X and Y values to offset its vanishing point.<br />

To change the 3D Stage element's properties, click the element on the page, or click 3D Stage in the Page Outline pane.<br />

The Properties pane for the 3D Stage element appears on the right side of the Project Editor with the following tabs:<br />

• The General tab lets you define the element's optional ID. For details, see "Changing General Properties" on page<br />

197.<br />

• The Appearance tab lets you set the element's border and opacity, and add a reflection and shadow to the element.<br />

These settings are applied to the entire Container element; to change the appearance settings for each<br />

- 318 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

element within the Container element, select each element first. For details, see "Changing Appearance Properties"<br />

on page 198.<br />

• The Layout tab lets you set the size of the entire Container element and its position on the page. You can also constrain<br />

the proportions of the element so that the aspect ratio stays the same when freely resizing it on the Canvas.<br />

For details, see "Changing Layout Properties" on page 214.<br />

• The 3D Transformations tab lets you set the Perspective and Perspective Origin properties. For details, see<br />

"Changing 3D Transformations Properties" on page 216.<br />

• The Behavior tab lets you associate the Container element with an event and an action to be performed. See<br />

"Changing Behavior Properties" on page 223 for details.<br />

- 319 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

Using the HBox Widget<br />

The HBox widget lets you create a horizontal box for laying out page elements. Each asset or widget you drag into the<br />

HBox is automatically placed horizontally in a row, to the right of the previous one. As you add more page elements, the<br />

HBox grows wider.<br />

You can set an offset (in pixels) between the elements inside the HBox, and change the appearance of the HBox<br />

separately from the other elements and from the page itself.<br />

To place the widget on a page and create an HBox element, drag the widget from the Layout tab of the Widgets pane to<br />

the Canvas, as shown in Figure 13-8 on page 320. You can then resize, align, and arrange the element to fit your page<br />

design (for details, see "Working in the Project Editor" on page 154). You can also associate the HBox element with an<br />

event and an action to be performed when the user interacts with the HBox element.<br />

Figure 13-8: Placing an HBox widget on a page.<br />

After placing the HBox widget on the page, you can drag other widgets from the Widgets pane, or assets from the Assets<br />

pane, into the HBox element, as shown in Figure 13-9 on page 321.<br />

- 320 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 13-9: Dragging Button widgets to the HBox element (with Spacing set to five pixels).<br />

Each element you add to the HBox element appears to the right of the previous element, and also appears as a child to<br />

the parent HBox element in the Page Outline pane on the lower left side of the Project Editor. You can change the order of<br />

the elements by clicking Bring Forward, Send Backwards, and so on (for details on arranging elements, see "Arranging<br />

and Overlapping Page Elements" on page 181).<br />

To change the HBox element's properties, click the element on the page, or click HBox in the Page Outline pane. The<br />

Properties pane for the HBox element appears on the right side of the Project Editor (refer to Figure 13-9 on page 321).<br />

To set the spacing in pixels between elements in the HBox, drag the Spacing slider in the General tab of the Properties<br />

pane — drag to the right to increase spacing, or to the left to reduce spacing. To align the elements vertically within the<br />

HBox element, choose Top, Middle, or Bottom in the Vertical Align drop-down menu.<br />

You can also customize the HBox element by changing properties in the Properties pane:<br />

• The General tab lets you define the element's optional ID.For details, see "Changing General Properties" on page<br />

197.<br />

• The Appearance tab lets you set the HBox element's background, border, and opacity, and add a reflection and<br />

shadow to the element. You can also set the roundness of the border's line style with the Roundness control.<br />

These settings are applied to the entire HBox element; to change the appearance settings for each widget element<br />

within the HBox element, select each element first. For details, see "Changing Appearance Properties" on page<br />

198.<br />

- 321 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

• The Layout tab lets you set the size of the entire HBox element and its position on the page, and the amount of padding<br />

within the element. You can also constrain the proportions of the element so that the aspect ratio stays the<br />

same when freely resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the HBox element with an event and an action to be performed. See "Changing<br />

Behavior Properties" on page 223 for details.<br />

- 322 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the VBox Widget<br />

The VBox widget lets you create a vertical box for laying out page elements. Each asset or widget you drag into the VBox<br />

is automatically placed vertically in a column, below the previous one. As you add more elements, the VBox grows taller.<br />

You can set an offset (in pixels) between the elements inside the VBox, and change the appearance of the VBox<br />

separately from the other elements and from the page itself.<br />

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<br />

Canvas, as shown in Figure 13-10 on page 323. You can then resize, align, and arrange the element to fit your page<br />

design (for details, see "Working in the Project Editor" on page 154).<br />

Figure 13-10: Placing a VBox widget on a page.<br />

After placing the VBox widget on the page, you can drag other widgets from the Widgets pane, or assets from the Assets<br />

pane, into the VBox element, as shown in Figure 13-11 on page 324.<br />

- 323 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

Figure 13-11: Dragging Button widgets to the VBox element (with Spacing set to five pixels).<br />

Each element you add to the VBox appears below the previous element, and also appears as a child to the parent VBox<br />

element in the Page Outline pane on the lower left side of the Project Editor.<br />

To change the VBox element's properties, click the element on the page, or click VBox in the Page Outline pane. The<br />

Properties pane for the VBox element appears on the right side of the Project Editor (refer to Figure 13-11 on page 324).<br />

To set the spacing in pixels between elements in the VBox, drag the Spacing slider in the General tab of the Properties<br />

pane — drag to the right to increase spacing, or to the left to reduce spacing. To align the elements horizontally within the<br />

VBox element, choose Right, Middle, or Left in the Horizontal Align drop-down menu.<br />

You can also customize the VBox element by changing properties in the Properties pane:<br />

• The General tab lets you define the element's optional ID.For details, see "Changing General Properties" on page<br />

197.<br />

• The Appearance tab lets you set the VBox element's background, border, and opacity, and add a reflection and<br />

shadow to the element. You can also set the roundness of the border's line style with the Roundness control.<br />

These settings are applied to the entire VBox element; to change the appearance settings for each element within<br />

the VBox element, select each element first. For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the entire VBox element and its position on the page, and the amount of padding<br />

within the element. You can also constrain the proportions of the element so that the aspect ratio stays the<br />

same when freely resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214.<br />

- 324 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Scroll View Widget<br />

The Scroll View widget creates a rectangular window on the page that can hold other page elements, such as Label,<br />

Button, Text, and Image elements. Scroll View elements are useful for displaying other elements that take up a lot of<br />

space, whether due to the size of the element or the number of the elements. It provides additional viewing space as you<br />

can fit more elements or larger elements inside the Scroll View element than would otherwise fit into the space the Scroll<br />

View element takes up on the Canvas. The Scroll View element provides scroll bars that allow the user to scroll vertically<br />

and horizontally to view the other elements within the window. For example, in Figure 13-1 on page 325 you cannot fully<br />

see the two image elements that are contained within the Scroll View element; however, when the mobile user views the<br />

page, they will also see scroll bars that allow them to scroll horizontally and vertically to view all the elements within the<br />

Scroll View window. You can change the appearance of the Scroll View element separately from the other elements and<br />

from the page itself.<br />

To place the widget on a page and create a Scroll View element, drag the widget from the Layout section of the Widgets<br />

pane to the Canvas. You can then resize, align, and arrange the element to fit your page design (for details, see "Working<br />

in the Project Editor" on page 154). You can also associate the Scroll View element with an event and an action to be<br />

performed when the user interacts with the Scroll View element.<br />

After placing the Scroll View element on the page, you can drag widgets from the Widgets pane, or assets from the Assets<br />

pane, into the Scroll View element, as shown in Figure 13-1 on page 325. Each element or asset you add to the Scroll<br />

View element appears as a child to the parent Scroll View element in the Page Outline pane on the lower left side of the<br />

Project Editor.<br />

Figure 13-1: Placing an image inside the Scroll View element<br />

- 325 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

To change the Scroll View element's properties, click the element on the page, or click Scroll View in the Page Outline<br />

pane. The Properties pane for the Scroll View element appears on the right side of the Project Editor with the following<br />

tabs:<br />

• The General tab lets you define the element's optional ID and choose to display scroll bars, and the scroll bar type<br />

(vertical, horizontal, or both). For details, see "Changing General Properties" on page 197.<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a shadow to the element.<br />

These settings are applied to the entire Scroll View element; to change the appearance settings for each element<br />

within the Scroll View element, select each element first. For details, see "Changing Appearance Properties"<br />

on page 198.<br />

• The Layout tab lets you set the size of the entire Scroll View element and its position on the page, and the amount<br />

of padding within the element. You can also constrain the proportions of the element so that the aspect ratio stays<br />

the same when freely resizing it on the Canvas. For details, see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the Scroll View element with an event and an action to be performed. See<br />

"Changing Behavior Properties" on page 223 for details.<br />

- 326 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Tab Set Widget<br />

The Tab Set widget lets you create a page element that holds sets of other elements and shows them one at a time. Users<br />

can navigate to each set by tapping or clicking tabs along the top of the Tab Set element — similar to the way users click<br />

tabs at the top of a web page to see different "pages" of content.<br />

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<br />

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<br />

be any other page elements. Because Tab Sets can contain many tabs and therefore a lot of data (including images), this<br />

widget lets you choose Load on demand and Preload Images options at the tab level. For more information, see<br />

"Optimizing at the View or Tab Level" on page 141.<br />

To place the widget on a page and create a Tab Set element, drag the widget from the Navigation section of the Widgets<br />

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<br />

page design (for details, see "Working in the Project Editor" on page 154). You can also associate the Tab Set element<br />

with an event and an action to be performed when the user interacts with the Tab Set element.<br />

Figure 13-2: Placing a Tab Set widget into position on a page.<br />

To change the Tab Set element's properties, click the element on the page, or click Tab Set in the Page Outline pane on<br />

the lower left side of the Project Editor. The Properties pane for the Tab Set element appears on the right side of the<br />

Project Editor.<br />

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<br />

Assets pane, or widgets from the Widgets pane to each tab. You can also rearrange the order of the tabs using the<br />

- 327 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

Arrange buttons on the Project Editor's top toolbar (for details, see "Arranging and Overlapping Page Elements" on page<br />

181).<br />

Note: To select the Tab Set widget on the canvas single-click on the Tab Set widget. To select a Tab, double-click the<br />

Tab Set widget; the last active Tab opens. The active Tab is highlighted.<br />

To add a Tab Set widget to a page:<br />

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<br />

General tab of the Properties pane, as shown in Figure 13-3 on page 328.<br />

After typing the text, the text becomes the tab title at the top of the Tab Set element and in the Page Outline pane.<br />

Figure 13-3: Adding the title "Speed" to the first tab set.<br />

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<br />

Canvas.<br />

The elements appear in the Page Outline pane as child elements in relation to the "Speed" parent element, as<br />

shown in Figure 13-3 on page 328.<br />

- 328 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 13-4: Adding two image assets and a Text element to the first Tab of a Tab Set element.<br />

3. Resize the elements and enter text in to the Text element, as shown in Figure 13-3 on page 328.<br />

Figure 13-5: Resizing an image.<br />

4. (Optional) Change the appearance of the tab, "Speed," by selecting the tab title in the Page Outline pane, and then<br />

changing the Background, Border, and Opacity settings in the Appearance tab of the Properties pane (for details<br />

- 329 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

on changing the appearance, see "Changing Appearance Properties" on page 198).<br />

Figure 13-6: Changing the Tab's background color on the Appearance tab.<br />

These settings affect only the selected tab, not the entire Tab Set element.<br />

5. In the Page Outline, select the Tab Set and click the Add View (+) button in the Tab Set element's controller, as<br />

shown in Figure 13-5 on page 329.<br />

- 330 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 13-7: Clicking the Add View button to add the next tab to the Tab Set element.<br />

The next tab appears with a blank area below it, and another tab element child appears under the Tab Set parent<br />

in the Page Outline pane.<br />

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<br />

the General tab of the Properties pane, as shown in Figure 13-5 on page 329.<br />

- 331 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

Figure 13-8: Entering the title "Features" for the second tab.<br />

After typing the text, the text becomes the second tab title at the top of the Tab Set element and in the<br />

Page Outline pane.<br />

7. Repeat Steps 2-4 for each new tab set.<br />

To rearrange the tab order:<br />

1. In the Page Outline, select the tab that you want to move.<br />

2. Depending on where you want to move the tab, select one of the Arrange buttons on the top toolbar (for details,<br />

see "Arranging and Overlapping Page Elements" on page 181).<br />

For example, you have three tabs named Cakes, Breads, and Buns, in that order, as show in Figure 13-9 on page<br />

333. You want to move the tab named Cakes, currently in the first tab position, to the last tab position.<br />

To move the Cakes tab to the last positon, in the Page Outline, select the Cakes tab and then click on the Send to<br />

Back button on the top toolbar, as show in Figure 13-9 on page 333.<br />

- 332 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 13-9: Selecting the Cake tab and clicking Send to Back on top toobar.<br />

The Cakes tab moves to the last position, as shown in Figure 13-10 on page 333.<br />

Figure 13-10: Cakes tab moves to the last tab position.<br />

- 333 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

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<br />

pane, and then change properties in the Properties pane:<br />

• The General tab lets you define the entire Tab Set element's optional ID. The ID is applied to the entire Tab Set element;<br />

to change the ID for each set within the Tab Set element, select each individual set first. For details on using<br />

the ID, see "Changing General Properties" on page 197. In addition, you can choose the Tab Set transition setting<br />

and set up the tab level Load on demand and Preload Images settings.<br />

• The Appearance tab lets you set the Tab Set element's background, border, and opacity to the element. These settings<br />

are applied to the entire Tab Set element; to change the appearance settings for each set within the Tab Set<br />

element, select each individual set first. For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the entire Tab Set element and its position on the page. You can also constrain<br />

the proportions of the element so that the aspect ratio stays the same when freely resizing it on the Canvas.<br />

For details, see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the Tab Set element with an event and an action to be performed. See "Changing<br />

Behavior Properties" on page 223 for details.<br />

- 334 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the View Set Widget<br />

The View Set widget lets you create a page element that holds sets of other elements and shows each set one at a time.<br />

Users can navigate to the other sets by tapping or clicking dots along the bottom of the element — similar to the way<br />

users tap dots at the bottom of a mobile device's home screen to see different screens of content.<br />

You can also set a View Set element's playback to automatic playback with transitions of different views in any direction,<br />

so that you can create automatically rotating banners or page elements.<br />

The View Set widget is a good choice when you want to provide multiple sets of elements on a single page without titles.<br />

The elements in each set can be any other page elements. Because View Sets can contain many views and therefore a lot<br />

of data (including images), this widget lets you choose Load on demand and Preload Images options at the view level. For<br />

more information, see "Optimizing at the View or Tab Level" on page 141.<br />

To place the widget on a page and create a View Set element, drag the widget from the Navigation section of the Widgets<br />

pane to the Canvas. You can then resize, align, and arrange the element, as shown in Figure 13-11 on page 335, to fit<br />

your page design (for details, see "Working in the Project Editor" on page 154). You can also associate the View Set<br />

element with an event and an action to be performed when the user interacts with the View Set element.<br />

Figure 13-11: Placing a View Set widget on a page.<br />

To change the View Set element's properties, click the element on the page, or click View Set in the Page Outline pane on<br />

the lower left side of the Project Editor. The Properties pane for the View Set element appears on the right side of the<br />

Project Editor.<br />

- 335 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

After placing the View Set element on the page, you can add assets from the Assets pane, or widgets from the Widgets<br />

pane, to each set within the element. You can also rearrange the order of the views using the Arrange buttons on the<br />

Project Editor's top toolbar (for details, see "Arranging and Overlapping Page Elements" on page 181).<br />

Note: To select the View Set widget on the canvas single-click on the View Set widget. To select a View, double-click the<br />

View Set widget; the last active View opens. The active View is indicated by the highlighted dot.<br />

To add a View Set widget to a page:<br />

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<br />

on page 336.<br />

The elements appear in the Page Outline pane as child elements in relation to the View parent.<br />

Figure 13-12 : Adding an image asset to the first set of a View Set element.<br />

2. (Optional) Change the appearance of the view by selecting the area above the dot or selecting the child View<br />

under View Set in the Page Outline pane, and then changing the Background, Border, and Opacity settings in the<br />

Appearance tab of the View Properties pane (for details on changing the appearance, see "Changing Appearance<br />

Properties" on page 198).<br />

These settings affect only the selected view, not the entire View Set element.<br />

3. Select the View Set and click the Add View (+) button in the View Set element's controller, as shown in Figure 13-<br />

13 on page 337, to add the next set to the View Set element.<br />

- 336 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

The next dot appears with a blank area above it, and another View child appears under the View Set parent in the<br />

Page Outline pane.<br />

4. Drag one or more assets or widgets to the next set, as shown in Figure 13-14 on page 338.<br />

Figure 13-13: Clicking the Add View button to add the next set to the View Set element.<br />

- 337 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

Figure 13-14: Adding an image asset to the next set of a View Set element.<br />

5. (Optional) Change the appearance of the view set by selecting the area above the dot, or selecting the View child<br />

of the View Set parent in the Page Outline pane, and then changing the Background, Border, and Opacity settings<br />

in the Appearance tab of the View Properties pane (for details on changing the appearance, see "Changing<br />

Appearance Properties" on page 198).<br />

These settings affect only the selected view set, not the entire View Set element.<br />

6. Repeat Steps 3-5 for each new view set.<br />

To set the playback of the View Set element, choose one of the following from the Playback menu in the General tab of<br />

the View Set Properties pane:<br />

• Manual: Let the user tap or click the dots in the View Set element to navigate to other sets.<br />

• Automatic: Play the entire View Set element as a slideshow with transitions.<br />

• Manual & Automatic: Play the entire View Set element as a slideshow with transitions, while also enabling the user<br />

to tap or click the dots to navigate to other sets.<br />

• None: Removes any playback modes.<br />

After choosing Automatic from the Playback menu, you can drag the Delay slider to set the delay between view sets in<br />

milliseconds, or click the delay controller at the right end of the slider to set the number of milliseconds. (The Delay slider<br />

really determines how long the slide displays on screen before the next slide displays.) You can choose the type of<br />

transition for automatic playback in the Transition drop-down menu, as shown in Figure 13-15 on page 339.<br />

- 338 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 13-15: Choosing a transition for automatic playback of the View Set element.<br />

If you choose a Slide transition, you can also set the direction of the transition in the Direction drop-down menu, as shown<br />

in Figure 13-16 on page 340.<br />

- 339 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

Figure 13-16: Choosing a direction for the Slide transition for automatic playback of the View Set element.<br />

You can also specify the way the slide transition accelerates or decelerates, from start to finish, using the Acceleration<br />

drop-down menu, as shown in Figure 13-16 on page 340. The Acceleration options are:<br />

• Ease: The slide transition accelerates slowly and builds up to normal speed as it plays.<br />

• Ease In: The slide transition accelerates from slower at the start to normal speed at the end.<br />

• Ease Out: The slide transitions at normal speed at the start and then decelerates (from faster to slower) at the<br />

end.<br />

• Ease In Out: The slide transition accelerates from slower at the start to faster in the middle, and then decelerates<br />

(from faster to slower) at the end.<br />

• Linear: The slide transitions at the same speed throughout.<br />

- 340 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 13-17: Choosing a slide transition acceleration or deceleration rate for automatic playback of the View Set<br />

element.<br />

You can specify the slide transition duration, in seconds. While the Delay option determines how long the slide displays,<br />

the Duration determines the transition time between slide displays.<br />

- 341 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

Figure 13-18: Choosing a slide transition duration for automatic playback of the View Set element.<br />

To rearrange the view order:<br />

1. In the Page Outline, select the view that you want to move.<br />

2. Depending on where you want to move the view, select one of the Arrange buttons on the top toolbar (for details,<br />

see "Arranging and Overlapping Page Elements" on page 181).<br />

For example, you have three views named Cakes, Breads, and Buns, in that order, as show in Figure 13-19 on<br />

page 343Figure 13-18 on page 342. You want to move the view named Cakes, currently in the first view position,<br />

to the last view position.<br />

To move the Cakes view to the last positon, in the Page Outline, select the Cakes view and then click on the Send<br />

to Back button on the top toolbar, as show in Figure 13-19 on page 343.<br />

- 342 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 13-19: Selecting the Cake view and clicking Send to Back on top toobar.<br />

The Cakes view moves to the last position, as shown in Figure 13-20 on page 343.<br />

Figure 13-20: Cakes view moves to the last view position.<br />

- 343 -


CHAPTER 13: Using Layout and Navigation Widgets<br />

You can also remove the dots from the View Set element by clicking the Show Dots option in the General tab of the<br />

Properties pane to turn it off. Turning off the Show Dots option is useful for automatic playback.<br />

To customize the entire View Set element, select the View Set element on the page, or select View Set in the Page Outline<br />

pane, and then change properties in the Properties pane:<br />

• The General tab lets you define the entire View Set element's optional ID. The ID is applied to the entire View Set<br />

element; to change the ID for each set within the View Set element, select each individual set first. For details on<br />

using the ID, see "Changing General Properties" on page 197. In addition, you can choose the View Set transition<br />

setting and set up the view level Load on demand and Preload Images settings.<br />

• The Appearance tab lets you set the View Set element's background, border, and opacity to the element. These<br />

settings are applied to the entire View Set element; to change the appearance settings for each set within the View<br />

Set element, select each individual set first. For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the entire View Set element and its position on the page. You can also constrain<br />

the proportions of the element so that the aspect ratio stays the same when freely resizing it on the Canvas.<br />

For details, see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the View Set element with an event and an action to be performed. See<br />

"Changing Behavior Properties" on page 223 for details.<br />

- 344 -


CHAPTER 14: Using Social Media Widgets<br />

CHAPTER 14: Using Social Media Widgets<br />

The Social Media widgets enable you to add social media elements to a page, such as a Facebook "Like" button, a Twitter<br />

"Follow me" button, and so on. This chapter covers the following topics:<br />

• "About Social Media Widgets" on page 346<br />

• "Using the Google +1 Widget " on page 348<br />

• "Using the Facebook Like Widget" on page 350<br />

• "Using the Tweet Button Widget" on page 352<br />

• "Using the Twitter Follow Widget" on page 354<br />

- 345 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

About Social Media Widgets<br />

<strong>5ml</strong> includes several Social Media widgets you can place on a page so that the user can share the page on the Facebook<br />

and Twitter social media sites:<br />

• Google +1 widget: Creates a Google +1 "Like" button on a page. You provide the URL of the page that the user<br />

can "+1" (and share on Google). You can choose the Google +1 element layout size; standard, small, medium, or<br />

tall. You can also choose to show the +1 counter.<br />

• Facebook Like widget: Creates a Facebook "Like" button in a standard layout that shows the faces of other Facebook<br />

friends who "like" your page, or in a layout that shows only a button with a counter of other "likes" or a box<br />

with a counter of other "likes". You provide the URL of the page that the user can "like" (and share on Facebook).<br />

You can choose a light or dark color scheme and a different font, and change the verb from "Like" to "Recommend".<br />

• Tweet Button widget: Creates a Twitter "Tweet" button with or without a counter of other tweet messages about<br />

your page, and with optional text for the tweet message to post on in the user's Twitter feed. You provide the<br />

URL that Twitter users share when they tap the Tweet button, and the usernames for two Twitter accounts that<br />

users can tap to follow.<br />

• Twitter Follow widget: Creates a "Follow Me on Twitter" button with a choice of button styles. You provide the<br />

username for the Twitter account that users follow as a result of tapping the button.<br />

Click the Widgets tab at the top of the Library pane to show the Widgets pane in the Library. You can then select Social<br />

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<br />

menu to see all widgets).<br />

Figure 14-1 : Selecting the Social Media widgets in the Widgets pane of the Library.<br />

To place a widget on a page and create an element from it, drag the widget from the Widgets pane to the Canvas. You<br />

can then resize, align, and arrange the element to fit your ad page design (for details, see "Working in the Project Editor"<br />

- 346 -


CHAPTER 14: Using Social Media Widgets<br />

on page 154). You can also change the element's properties in the Properties pane -- for details, see "Customizing Page<br />

Elements" on page 194<br />

- 347 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Google +1 Widget<br />

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<br />

can "+1" (and share on Google). You can choose the Google +1 element layout size; standard, small, medium, or tall.<br />

You can also choose to show the +1 counter.<br />

To place the widget on a page and create an element from it, drag the widget from the Widgets pane to the Canvas, as<br />

shown in Figure 14-2 on page 348. You can then resize, align, and arrange the element to fit your page design (for<br />

details, see "Working in the Project Editor" on page 154).<br />

Figure 14-2: Placing a Google +1 widget on a page in the Canvas.<br />

To change the Google +1 element's properties, click the element on the page or select it in the Page Outline pane. The<br />

Properties pane for the element appears on the right side of the Project Editor. You can then set the properties in the<br />

General tab of the Properties pane:<br />

1. Enter the URL in the URL To +1 field, which is underneath the ID field.<br />

2. Choose one of the following layout sizes (shown with the counter) from the Size drop-down menu underneath the<br />

URL To +1 field:<br />

Size<br />

Image<br />

Standard<br />

Small<br />

- 348 -


CHAPTER 14: Using Social Media Widgets<br />

Size<br />

Image<br />

Medium<br />

Tall<br />

3. Select the Count checkbox to display the +1 counter.<br />

You can also customize the Google +1 element by changing properties in the Properties pane:<br />

• The General tab lets you define the element's optional ID. For details, see "Changing General Properties" on page<br />

197.<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the element and its position on the page. You can also constrain the proportions<br />

of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For details,<br />

see "Changing Layout Properties" on page 214.<br />

- 349 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Facebook Like Widget<br />

The Facebook Like widget lets you place a Facebook "Like" button on a page. You can choose a standard layout that<br />

shows the faces of other Facebook friends who "like" the page, or a layout that shows only a button with a counter of<br />

other "likes" or a box with a counter of other "likes".<br />

You provide the URL of the page that the user can "like" (and share on Facebook). You can choose a light or dark color<br />

scheme and a different font, and change the verb from "Like" to "Recommend".<br />

To place the widget on a page and create an element from it, drag the widget from the Widgets pane to the Canvas, as<br />

shown in Figure 14-3 on page 350. You can then resize, align, and arrange the element to fit your page design (for<br />

details, see "Working in the Project Editor" on page 154).<br />

Figure 14-3: Placing a Facebook Like widget on a page in the Canvas.<br />

To change the Facebook Like element's properties, click the element on the page or select it in the Page Outline pane.<br />

The Properties pane for the element appears on the right side of the Project Editor. You can then set the properties in the<br />

General tab of the Properties pane:<br />

1. Enter the URL in the URL to Like field, which is underneath the ID field.<br />

2. Choose one of the following layout styles from the Layout Style drop-down menu underneath the URL to Like field:<br />

• Standard: The standard layout (refer to Figure 14-3 on page 350) displays the Like button, the counter<br />

(with a Facebook icon), and a "Sign up" link for non-Facebook users. You can also click the Show Faces<br />

option to turn on the display of faces of the user's Facebook friends who have also liked this URL.<br />

- 350 -


CHAPTER 14: Using Social Media Widgets<br />

• Button Count: The Button Count layout shows only the Facebook Like button and the counter.<br />

• Box Count: The Box Count layout shows the Facebook Like button and the counter in a separate box.<br />

3. Choose a color scheme for the Facebook Like widget element (either Light or Dark) in the Color Scheme dropdown<br />

menu underneath the Layout Style menu.<br />

4. Choose the font for the button and "Sign up" link in the Font drop-down menu.<br />

5. Choose the verb to use (either "Like" or "Recommend") in the Verb To Display drop-down menu.<br />

You can also customize the Facebook Like element by changing properties in the Properties pane:<br />

• The General tab lets you define the element's optional ID. For details, see "Changing General Properties" on page<br />

197.<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the element and its position on the page. You can also constrain the proportions<br />

of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For details,<br />

see "Changing Layout Properties" on page 214.<br />

- 351 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Tweet Button Widget<br />

The Tweet Button widget lets you place a "Tweet" button on a page, with or without a counter of other tweet messages<br />

about the page, and with optional text for the tweet message to post in the user's Twitter feed.<br />

You provide the URL of the page that Twitter users share when they tap or click the Tweet button, and the usernames for<br />

two Twitter accounts that users can tap or click to follow.<br />

To place the widget on a page and create an element from it, drag the widget from the Widgets pane to the Canvas, as<br />

shown in Figure 14-4 on page 352. You can then resize, align, and arrange the element to fit your page design (for<br />

details, see "Working in the Project Editor" on page 154).<br />

Figure 14-4: Placing a Tweet Button widget on a page in the Canvas.<br />

To change the Tweet Button element's properties, click the element on the page or select it in the Page Outline pane. The<br />

Properties pane for the Tweet Button element appears on the right side of the Project Editor. You can then set the<br />

properties in the General tab of the Properties pane:<br />

1. Enter the URL of the page in the URL to Share field, which is underneath the ID field.<br />

2. Choose one of the following display types from the Display Type drop-down menu underneath the URL to Share<br />

field:<br />

• Horizontal Count: Displays the Tweet button and counter in a horizontal layout (refer to Figure 14-4 on<br />

page 352).<br />

• Vertical Count: Displays the Tweet button and counter in a vertical layout.<br />

• No Count: Displays the Tweet button without a counter.<br />

- 352 -


CHAPTER 14: Using Social Media Widgets<br />

3. Enter the optional text for the tweet message to be posted in the user's Twitter stream.<br />

4. Enter up to two optional Twitter accounts that the user can follow.<br />

You can also customize the Tweet Button element by changing properties in the Properties pane:<br />

• The General tab lets you define the Tweet Button element's optional ID. For details, see "Changing General Properties"<br />

on page 197.<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the element and its position on the page. You can also constrain the proportions<br />

of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For details,<br />

see "Changing Layout Properties" on page 214.<br />

- 353 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the Twitter Follow Widget<br />

The Twitter Follow widget lets you place a "Follow Me on Twitter" button on a page, with a choice of three button styles.<br />

You provide the username for the Twitter account that users follow as a result of tapping or clicking the button.<br />

To place the widget on a page and create an element from it, drag the widget from the Widgets pane to the Canvas, as<br />

shown in Figure 14-5 on page 354. You can then resize, align, and arrange the element to fit your page design (for<br />

details, see "Working in the Project Editor" on page 154).<br />

Figure 14-5: Placing a Twitter Follow widget on a page in the Canvas.<br />

To change the Twitter Follow element's properties, click the element on the page or select it in the Page Outline pane.<br />

The Properties pane for the Twitter Follow element appears on the right side of the Project Editor. You can then set the<br />

properties in the General tab of the Properties pane:<br />

1. Enter the username for the Twitter account that the user can follow into the Twitter Username field, which is underneath<br />

the ID field.<br />

2. Click one of the three button styles for the "Follow Me on Twitter" button in the Button Styles subsection underneath<br />

the Twitter Username field.<br />

You can also customize the Twitter Follow element by changing properties in the Properties pane:<br />

• The General tab lets you define the Twitter Follow element's optional ID. For details, see "Changing General Properties"<br />

on page 197.<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. For details, see "Changing Appearance Properties" on page 198.<br />

- 354 -


CHAPTER 14: Using Social Media Widgets<br />

• The Layout tab lets you set the size of the element and its position on the page. You can also constrain the proportions<br />

of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For details,<br />

see "Changing Layout Properties" on page 214.<br />

- 355 -


CHAPTER 15: Using the Map View Widget<br />

CHAPTER 15: Using the Map View Widget<br />

The Map View widget lets you place an interactive map on a page. This chapter covers the following topics:<br />

• "About the Map View Widget" on page 357<br />

• "Using the Map View Widget" on page 358<br />

- 356 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

About the Map View Widget<br />

<strong>5ml</strong> includes the Map View widget so you can include an interactive map (Google map) in your project:<br />

• Map View widget: Creates a map view on a page to direct viewers to one or more locations.<br />

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<br />

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<br />

menu to see all widgets).<br />

Figure 15-1: Choosing the Map View widget.<br />

- 357 -


CHAPTER 15: Using the Map View Widget<br />

Using the Map View Widget<br />

The Map View widget lets you create an interactive map (Google map) on a page. You set the map's center location and<br />

add map markers for the various locations to which you want to direct the viewer.<br />

To place a Map View element on a page, drag the widget from the Other section of the Widgets pane to the Canvas, as<br />

shown in Figure 15-2 on page 358. You can then resize, align, and arrange the element to fit your page design (for<br />

details, see "Working in the Project Editor" on page 154).<br />

Figure 15-2: Placing a Map View widget on a page.<br />

To change the Map View element's properties, click the element on the page, or click Map View in the Page Outline pane.<br />

The Properties pane for the Map View element appears on the right side of the Project Editor (refer to Figure 15-3 on<br />

page 359).<br />

To configure the map view:<br />

1. In the Map Center field on the Properties' General tab, enter a place name, location, or address to set the map's<br />

center, as shown in Figure 15-3 on page 359. (You can adjust the map view by double-clicking on the map image,<br />

and when the hand icon appears, move the map image in the direction you want. You can also center the map<br />

based on a marker, which is discussed later.)<br />

As you enter a place name, location, or address, the Map Center field's smart search displays possible locations to<br />

choose from. When the location is set the Latitude and Longitude fields automatically populate with the location's<br />

- 358 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

latitude and longitude values. Alternatively, you can enter the location's latitude and longitude values directly into<br />

the fields.<br />

Figure 15-3: Adding a location to set the map's center location.<br />

2. To choose the type of map to display, from the Map Type menu, select one of the following options:<br />

• Roadmap<br />

• Hybrid<br />

• Satellite<br />

• Terrain<br />

3. To increase the map detail level move the Zoom Level slider to the right. To decrease the map detail level move<br />

the Zoom Level slider to the left.<br />

4. To display navigation controls on the map view, for example, zoom in and zoom out controls, street level view,<br />

and panning controls, select the Show Navigation Controls checkbox. (Selected by default.)<br />

5. To display a menu on the map view with map type options, for example, satellite or terrain, select the Show Map<br />

Types checkbox.<br />

6. To add a location marker to the map, click the plus icon ( ) below the Markers field, as shown in Figure 15-4 on<br />

page 360.<br />

- 359 -


CHAPTER 15: Using the Map View Widget<br />

Figure 15-4: Adding a location marker.<br />

In the Title field, enter a name for the marker, and in the Location field, enter a place name, location, or address.<br />

The marker's Latitude and Longitude fields populate automatically with the location marker's latitude and<br />

longitude values. Click Add.<br />

7. To add information about the marker, which displays on the map when the mobile user hovers over the marker,<br />

select the marker in the Markers list and select the Enable Info Window checkbox. Click Edit Content to open the<br />

HTML Editor and enter content about the maker. To see a preview of the content, click Show Window.<br />

8. To add another location marker, click the plus icon ( ) again.<br />

You can customize the Map View element by changing properties in the Properties pane:<br />

• The General tab lets you define the element's optional ID, set the map location, the type of map, the zoom level<br />

and add location markers. For details, see "Changing General Properties" on page 197.<br />

• The Appearance tab lets you set the Map View element's border and opacity, and add a reflection and shadow to<br />

the element. For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the Map View element and its position on the page. You can also constrain<br />

the proportions of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For<br />

details, see "Changing Layout Properties" on page 214.<br />

• The Behavior tab lets you associate the Map View element with an event and an action to be performed. See<br />

"Changing Behavior Properties" on page 223 for details.<br />

- 360 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

- 361 -


CHAPTER 16: Using Web View, HTML, and HTML5 Widgets<br />

CHAPTER 16: Using Web View, HTML, and HTML5<br />

Widgets<br />

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,<br />

and the HTML5 widget lets you place the HTML5 logo on a page with icons showing the supported features of your site.<br />

This chapter covers the following topics:<br />

• "About the Web View, HTML, and HTML5 Widgets" on page 363<br />

• "Using the Web View Widget" on page 364<br />

• "Using the HTML Widget" on page 366<br />

• "Using the HTML5 Widget" on page 369<br />

- 362 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

About the Web View, HTML, and HTML5 Widgets<br />

<strong>5ml</strong> includes the following widgets to create page elements in your project:<br />

• Web View widget: Creates a view on a page that displays an existing web page.<br />

• HTML widget: Creates a HTML element that lets you add HTML code to a page.<br />

• HTML5 widget: Creates a HTML5 logo element that includes icons representing the supported features of your<br />

site.<br />

Click the Widgets tab at the top of the Library pane to show the Widgets pane. You can then select External in the dropdown<br />

menu under the Widgets tab, as shown in Figure 16-1 on page 363, to see the Web View widget, or Other in the<br />

drop-down menu to see the HTML and HTML5 widgets (or select All in the drop-down menu to see all widgets).<br />

Figure 16-1: Choosing the External and Other widgets.<br />

- 363 -


CHAPTER 16: Using Web View, HTML, and HTML5 Widgets<br />

Using the Web View Widget<br />

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<br />

scrolling option for the web page.<br />

To place a Web View element on a page, drag the widget from the External section of the Widgets pane to the Canvas, as<br />

shown in Figure 16-2 on page 364. You can then resize, align, and arrange the element to fit your page design (for<br />

details, see "Working in the Project Editor" on page 154).<br />

Figure 16-2: Placing a Web View widget on a page.<br />

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<br />

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<br />

also use the Scrolling drop-down menu to choose:<br />

• Yes: Include scroll bars<br />

• No: Not include scroll bars<br />

• Auto: Include scroll bars only if the web page is not fully contained within the view.<br />

- 364 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 16-3: Adding a URL for the web page to use in the Web View element (with Scrolling set to Yes).<br />

To change the Web View element's properties, click the element on the page, or click Web View in the Page Outline pane.<br />

The Properties pane for the Web View element appears on the right side of the Project Editor (refer to Figure 16-3 on<br />

page 365). You can customize the Web View element by changing properties in the Properties pane:<br />

• The General tab lets you define the element's optional ID.For details, see "Changing General Properties" on page<br />

197.<br />

• The Appearance tab lets you set the Web View element's background, border, and opacity, and add a reflection<br />

and shadow to the element. For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the Web View element and its position on the page. You can also constrain<br />

the proportions of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For<br />

details, see "Changing Layout Properties" on page 214.<br />

- 365 -


CHAPTER 16: Using Web View, HTML, and HTML5 Widgets<br />

Using the HTML Widget<br />

The HTML widget lets you create a HTML element on a page into which you can directly enter HTML code. The<br />

HTML widget can take up the whole page or just a segment of the page.<br />

To place a HTML element on a page, drag the widget from the Other section of the Widgets pane to the Canvas, as shown<br />

in Figure 16-4 on page 366. You can then resize, align, and arrange the element to fit your page design (for details, see<br />

"Working in the Project Editor" on page 154).<br />

Figure 16-4: Placing a HTML widget on a page<br />

After placing the HTML widget on the page, you can open the HTML Editor to enter the HTML code. On the General tab of<br />

the Properties pane, on the right side of the Project Editor, as shown in Figure 16-5 on page 367, click Open HTML Editor.<br />

For details about which HTML tags are not supported by the HTML widget, see "About Unsupported HTML Tags" on page<br />

1.<br />

- 366 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 16-5: Entering HTML code into the HTML element's HTML Editor<br />

Enter the HTML code, and then click Done. The HTML Editor closes and the HTML code renders on the Canvas.<br />

Figure 16-6: Viewing the HTML code on the Canvas<br />

To change the HTML element's properties, click the element on the page, or click HTML in the Page Outline pane. The<br />

Properties pane for the HTML element appears on the right side of the Project Editor (refer to Figure 16-5 on page 367).<br />

You can customize the HTML element by changing properties in the Properties pane:<br />

- 367 -


CHAPTER 16: Using Web View, HTML, and HTML5 Widgets<br />

• The General tab lets you define the element's optional ID and the Open HTML Editor button opens the HTML Editor<br />

where you can enter HTML code. For details, see "Changing General Properties" on page 197.<br />

• The Appearance tab lets you set the HTML element's background, border, and opacity, and add a reflection and<br />

shadow to the element. For details, see "Changing Appearance Properties" on page 198.<br />

• The Layout tab lets you set the size of the HTML element and its position on the page. You can also constrain the<br />

proportions of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For<br />

details, see "Changing Layout Properties" on page 214.<br />

- 368 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Using the HTML5 Widget<br />

The HTML5 widget lets you create an HTML5 logo element on a page that includes icons representing the supported<br />

features of your site. You use the HTML5 widget to highlight specific capabilities, such as offline access and storage, 3D<br />

graphics and effects, CSS3 style sheet control, and real-time connectivity.<br />

To place the HTML5 element on a page, drag the widget from the Other section of the Widgets pane to the Canvas, as<br />

shown in Figure 16-7 on page 369. You can then align and arrange the element to fit your page design (for details, see<br />

"Working in the Project Editor" on page 154).<br />

Figure 16-7: Placing an HTML5 widget on a page.<br />

After placing the HTML5 widget on the page, you can change the HTML5 element's properties by clicking the element on<br />

the page, or clicking HTML5 in the Page Outline pane. The Properties pane for the HTML5 element appears on the right<br />

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<br />

selecting individual Supporting Elements in the General tab of the Properties pane:<br />

• Connectivity / Real Time: Uses Web Sockets and server-sent events to provide more efficient connectivity for<br />

real-time chats, faster games, and better communication.<br />

• CSS3 / Styling: Uses CSS3 to deliver a wide range of stylization and effects, and Web Open Font Format (WOFF)<br />

for typographic flexibility.<br />

- 369 -


CHAPTER 16: Using Web View, HTML, and HTML5 Widgets<br />

• Device Access: Uses rich, device-aware features including geolocation, access to audio/video input from microphones<br />

and cameras, local data such as contacts and events, and tilt orientation.<br />

• Graphics, 3D & Effects: Uses SVG, Canvas, WebGL, and CSS3 3D features to provide stunning visuals natively rendered<br />

in the browser.<br />

• Multimedia: Uses audio and video.<br />

• Performance & Integration: Uses techniques and technologies such as Web Workers and XMLHttpRequest 2 to<br />

make Web Apps and dynamic web content display faster.<br />

• Semantics: Provides meaning for structured data with a rich set of tags and microformats.<br />

• Offline & Storage: Uses the HTML5 app cache, local storage, indexed databases, and the File API specifications to<br />

start web apps faster and work without an Internet connection.<br />

You can also use the Orientation drop-down menu above the Supporting Elements to choose Horizontal for a horizontal<br />

orientation of the logo and icons, or Vertical for a vertical orientation.<br />

Figure 16-8: Choosing the Supporting Elements for the HTML5 element to highlight features of the site.<br />

You can customize the HTML5 element by changing its properties in the Properties pane:<br />

• The General tab lets you define the element's optional ID. For details, see "Changing General Properties" on page<br />

197.<br />

• The Appearance tab lets you set the element's background, border, and opacity, and add a reflection and shadow<br />

to the element. For details, see "Changing Appearance Properties" on page 198.<br />

- 370 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

• The Layout tab lets you set the size of the element and its position on the page. You can also constrain the proportions<br />

of the element so that the aspect ratio stays the same when freely resizing it on the Canvas. For details,<br />

see "Changing Layout Properties" on page 214.<br />

- 371 -


CHAPTER 17: Enabling Native Device Functionality<br />

CHAPTER 17: Enabling Native Device Functionality<br />

<strong>5ml</strong> ad projects support native device functionality. This feature is only for ad projects that will serve as in-application<br />

advertisements via the Mobclix ad exchange. Examples of native device functionality are; accelerometer, shake, device<br />

orientation, geolocation, and vibration. Native device functionality is supported through the ad exchange/ad network SDK<br />

(Mobclix iOS SDK) and by adding custom scripting or the event/action framework to a page.<br />

This chapter covers the following topics:<br />

• "Enabling Native Device Functionality for a Page" on page 373<br />

- 372 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Enabling Native Device Functionality for a Page<br />

After you enable the project to support native device functionality, you can add native device functionality to a page.<br />

To enable native device functionality on a page:<br />

1. Open a project page, and on the Page Outline, select the page (or a page element).<br />

2. On the Properties pane select the Behavior tab.<br />

Figure 17-1: Enabling native device functionality on the Behavior tab<br />

3. Add a native device event and action. For example, from the Event drop-down menu, select the ondevicemotion<br />

event, and from the Action drop-down menu, select the Vibrate Device action.<br />

4. Click Apply. The new behavior displays in the Behavior list.<br />

For more information about adding event/action behaviors and a list of supported native device behaviors, see<br />

"Changing Behavior Properties" on page 223. For more information about the native device functionality<br />

supported by <strong>5ml</strong>, see "About Events" on page 224.<br />

Note: To view and test native device functionality you must preview the page using the Preview as Mobile App<br />

option; see "Previewing a Project" on page 120. Native device functionality does not work on browsers.<br />

- 373 -


CHAPTER 18: Adding Site Tracking<br />

CHAPTER 18: Adding Site Tracking<br />

<strong>5ml</strong> lets you add the capability to track pages and page elements in order to measure site traffic and user behavior on the<br />

site. This chapter covers the following topics:<br />

• "About Tracking" on page 375<br />

• "Enabling Google Analytics" on page 376<br />

• "Tracking Pages" on page 378<br />

• "Tracking Page Elements" on page 379<br />

- 374 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

About Tracking<br />

<strong>5ml</strong> lets you add the capability to track pages and page elements in order to measure site traffic and user behavior on the<br />

site. With tracking capabilities, you can determine which pages drive the most page views on your site, and which groups<br />

of visitors did something important on your site (such as click on a link for more information, or click to purchase<br />

something).<br />

To add tracking to your project, first enable tracking for your project on the My Projects' Settings page, and enter the site<br />

profile ID. For details, see "Enabling Google Analytics" on page 376.<br />

After enabling tracking for the project, you can track each page in the project, see "Tracking Pages" on page 378, and<br />

also track individual page elements in the project, see "Tracking Page Elements" on page 379.<br />

- 375 -


CHAPTER 18: Adding Site Tracking<br />

Enabling Google Analytics<br />

<strong>5ml</strong> lets you add the capability to track performance and user behavior for each page in a project, and for individual page<br />

elements, using Google Analytics (www.google.com/analytics).<br />

Note: Before you can enable tracking for <strong>5ml</strong> projects, you need a valid Google Analytics profile.<br />

To enable a project to use Google Analytics for tracking:<br />

1. On the My Projects page, click on the project name.<br />

The Project Menu (<br />

) icon appears.<br />

Figure 18-1: Opening the project settings page.<br />

2. Click on the Project Menu icon to open the menu, and select Settings.<br />

The Settings page appears.<br />

3. Scroll down the page to the Analytics section, and select the Google Analyitcs Settings checkbox.<br />

- 376 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 18-2: Selecting the Google Analytics Settings checkbox<br />

4. In the Google Analytics Settings field, enter the Google Analytics profile ID.<br />

You can find more about how to create and manage Google Analytics accounts at<br />

http://www.google.com/analytics/learn/index.html. Currently, <strong>5ml</strong> supports only page and page elementgenerated<br />

event tracking.<br />

5. Click Apply. When the confirmation diaglog appears, click OK.<br />

6. After enabling analytics for the project, you can open the project (see "Opening a Project" on page 112) and select<br />

pages and page elements to track. See "Tracking Pages" on page 378 and "Tracking Page Elements" on page 379<br />

for details.<br />

- 377 -


CHAPTER 18: Adding Site Tracking<br />

Tracking Pages<br />

After enabling tracking for the project (see "About Tracking" on page 375), you can track each page in the project, and<br />

also track individual page elements in the project, see "Tracking Page Elements" on page 379.<br />

To track an entire page:<br />

1. Open the page in the Project Editor (see "Opening a Project" on page 112).<br />

2. Select the entire page by clicking Page at the top of the Page Outline.<br />

3. On the General tab of the Properties pane, click the Track in Analytics checkbox, as shown in Figure 18-3 on page<br />

378.<br />

The tracking ID for the entire page appears in a text field below the Track in Analytics option. You can change the<br />

tracking ID by clicking in this field and entering another tracking ID.<br />

Figure 18-3: Tracking an entire page.<br />

- 378 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Tracking Page Elements<br />

To track a page element, you must first enable project tracking, see "About Tracking" on page 375, and page tracking,<br />

see "Tracking Pages" on page 378.<br />

To track any single element on the page:<br />

1. Select the page element, and then on the General tab of the Properties pane, click the Track in Analytics checkbox,<br />

as shown in Figure 18-1 on page 379.<br />

Figure 18-1: Selecting the Track in Analytics checkbox.<br />

You can control some basic attribute values for each event that Google Analytics tracks (object, action, label). A<br />

<strong>5ml</strong> user can modify:<br />

• Label–Enter text to change the string reported to Google Analytics for the event label.<br />

• Category–Enter text to change the string reported to Google Analytics for the event object.<br />

• Event Name–Enter text to change the string reported to Google Analytics for event action.<br />

For more information about Google Analytics event tracking semantics, see<br />

https://developers.google.com/analytics/devguides/collection/gajs/eventTracker<strong>Guide</strong>.<br />

2. You need to add an event and action to the page element to determine what to track; see "Changing Behavior<br />

Properties" on page 223.<br />

- 379 -


CHAPTER 18: Adding Site Tracking<br />

For example, you could use an Image element on a page to go to another page. To track when a user clicks on the<br />

image to go to that page, you select the Image element's Track in analytics checkbox and on the Behavior tab you<br />

add the onclick event and choose the Show Page action.<br />

Note: Tracking an Audio element does not require an event/action behavior. Instead, on the Audio element's<br />

General tab there are three additional check boxes that determine the behavior to track.<br />

Figure 18-2: Adding an event/action to the selected page element to track.<br />

You can enable tracking for the following page elements:<br />

• Button<br />

• Label<br />

• Photo Gallery<br />

• Image<br />

• Audio<br />

• 360<br />

• Frame Set<br />

• Container<br />

• Tab Set, and Tab<br />

• View Set<br />

- 380 -


CHAPTER 19: Deploying Your Project<br />

CHAPTER 19: Deploying Your Project<br />

<strong>5ml</strong> enables you to deploy your project in two ways. You can publish the project within the <strong>5ml</strong>-hosted environment or<br />

you can export the project and deploy it on a web server external to the <strong>5ml</strong> environment. This chapter covers the<br />

following topics:<br />

• "Publishing a Project" on page 382<br />

• "Exporting a Project" on page 385<br />

- 381 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Publishing a Project<br />

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

"Exporting a Project" on page 385.)<br />

To publish a project:<br />

1. On the My Projects page, click on the project name.<br />

The Project Menu (<br />

) icon appears.<br />

2. Click on the Project Menu icon to open the menu, and select Publish.<br />

Figure 19-1: Publishing a project using the project menu.<br />

The Publishing dialog appears.<br />

3. Click Publish.<br />

- 382 -


CHAPTER 19: Deploying Your Project<br />

Figure 19-2: Publishing the project<br />

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

To check if a project is published:<br />

1. On the My Projects page, click on the project name.<br />

The Project pages appear to the right.<br />

2. Click the Check Status button located above the project pages.<br />

Figure 19-3: Checking if a project is published.<br />

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

later.<br />

- 383 -


<strong>5ml</strong> <strong>User's</strong> <strong>Guide</strong><br />

Figure 19-4: Publishing status message; still publishing.<br />

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

the project, and the project's published URL appears to the right.<br />

Figure 19-5: Published project with URL.<br />

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

browser's address field.<br />

- 384 -


CHAPTER 19: Deploying Your Project<br />

Exporting a Project<br />

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

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

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

a web server. The zip file uses the project name.<br />

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

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

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

your <strong>5ml</strong> representative.<br />

To export a project:<br />

1. On the My Projects page, click on the project name.<br />

The Project Menu (<br />

) icon appears.<br />

2. Click on the Project Menu icon to open the menu, and select Export.<br />

Figure 19-6: Exporting a project using the project menu.<br />

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

and then open it. (Or follow your particular browser's prompts.)<br />

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

- 385 -


Velti UK<br />

4th Floor, Bastille Court<br />

2 Paris Garden<br />

London, SE1 8ND, UK<br />

Tel: + 44 (0) 20 7633 5000<br />

Fax: +44 (0) 20 7633 5001<br />

Velti Greece<br />

44 Kifissias Ave. 151 25<br />

Marousi, Athens<br />

Greece<br />

Tel: +30 210 637 8800<br />

Fax: +30 210 637 8888<br />

www.velti.com<br />

info@velti.com<br />

London | New York | San Francisco | Boston | Athens | Madrid | Sofia | Nicosia |<br />

Moscow | Dubai | New Delhi | Mumbai | Beijing |Shanghai<br />

- 386 -

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!