ScrollMotion FAQs

SmartStudio and WorkCloud are compatible with the following computer operating systems and browsers:

Platform

Type

Version(s)

Mac

OS

10.10 and 10.11

Windows

OS

7 (SP1), 10

Mac

Browsers

Chrome and Safari (current version and 1 major version back)

Windows

Browsers

Chrome (current version and 1 major version back)

Click a Page Set icon in the Page Sets area of the Project Panel.

Click the Add Page button in the Pages area of the Project Panel.

A new Page opens in the selected Page Set.

Ingage for Designers was previously known as the ScrollMotion Enterprise Platform. Ingage for Designers is referred to below as the Platform.

Components. Platform subscriptions include access to the following software components:

MobileLibrary: mobile device software that provides (i) access to and download of Applets and Platform compatible files (collectively, Platform Files) from WorkCloud (ii) and local storage, organization and display of Platform Files. (All Users)

WorkCloud: Configurable web-based software for Platform File storage and management. (Admin Users only)

SmartStudio: web-based Applet creation software. (Admin Users only)

Features

Compatability: WorkCloud and SmartStudio are compatible with Chrome (current) and Safari (current and immediately prior versions) browsers.

Publish to Web functionalityshare Applets with individuals who do not have Platform access via URL links. URLs can be password protected, but the password is for the URL, not individual users.

Analytics DashboardEasily track Platform File use with real-time event logs and analytics down to the individual User level.

Push notifications to MobileLibrary Users.

Initial Setup and Configuration

Provide WorkCloud and SmartStudio access for Admin Users through a single master platform account.

Provide credentials for accessing Scrollmotion-branded MobileLibrary from the Apple App Store.

Configure WorkCloud and SmartStudio (account management, User roles/entitlement).

Data Hosting and Transfer. 100GB min. per account (Up to 10 GB per user annually included). We may charge for the actual cost of hosting and transfer to the extent that your annual data use exceeds this level.

Training

i) Access to self-serve training materials, product documentation, and other support resources available in-product and at https://support.scrollmotion.com/

Access to Support Agent assistance via form submission at https://support.scrollmotion.com/ or via email at [email protected].

Technical Support

Support is available via email at [email protected]

Access to Documentation and other online Platform resources at https://support.scrollmotion.com/

To access/use this sample:

Download the .scrollmotiontransit file here: Assessment - Drag

Upload the .scrollmotiontransit file to your WorkCloud. For instructions on how to upload afile toWorkCloud, see this article.

Follow along with the video above to customize.

The Image Sequence object is a frame-based animation consisting of multiple images or "frames" that are displayed at a specific frame rate. It appears in SmartStudio with the frame you select for display in the Properties Panel.

Click the Image Sequence icon on the Design Panel The Media Library displays.

Image Sequence Properties Panel

2. Select a group of image files from the Library for the Image Sequence and click OK

OR

2. Click Upload to upload new files and then select a group of images for the Image Sequence.

The is activated.

Under Attributes in the Image Sequence Properties Panel:

Click Select file.The Media Library displays the list of uploaded images.

Choose the image files for the image sequence and click OK.

In the Properties Panel, click the file which will be displayed initially.

Select Settings for the following:

Loop: Check to play the image sequence continuously.

Auto Reverse: Check to play the image sequence in reverse order.

Frames / Sec: Change the speed of the image sequence in frames per second (from 1 frame per second to 30 frames per second).

Under Advanced in the Image Sequence Properties Panel:

Select Settings for the following:

Allow Tap Through

Draggable

Review the selection of articles/videos below to get up and running with the ScrollMotion Enterprise Platform quickly!

WorkCloud Overview

WorkCloud Interface

How to Create a Folder

How to Create a New Applet

The SmartStudio Workspace

How to Upload Assets

How to Add a Basic Button / How to Add an Image Button / How to Add a Hotspot

How to Add a Video

How to Add a PDF

How to Add a Webview

How to Add an Image Sequence

How to Add a ScrollMotion

How to Add a Draggable Image

How to Preview Your Content

How to Publish an Applet

How to Install the ScrollMotion MobileLibrary App

How to Add a User

How to Create a Group

How to Share Files with User Groups / How to Share Folders with User Groups

How to Notify a User of Their New Account

When creating assets, Generator listens for file format extensions in the layer names.

File format extensions are very important. If a layer name does not contain a file format extension, Generator will ignore the layer.

Below example illustrates how a file, was automatically generated from a Photoshop layer:

Proceed to: Image Compression and Scaling

This same approach can be applied to a group of layers by using a file format extension in the name of the group. This is helpful when working with more complex graphics.

Below example illustrates how Adobe Generator produced a single file, from several grouped layers:

Adobe Generator can also create multiple assets from the same layer or group. To enable this, name the layer with multiple image names and formats. Separate each of the names with a comma:

We are aware of an issue wherecustom fonts fail to render correctly in SmartStudios Preview mode and Publish to Web when viewed in Chrome.It was found that this is a result of a Chrome bug (issue 544879 ) introduced by their browser update. Currently there is no fix from Google for this issue.

Custom fonts will still render as expected on a user's mobile device, or when viewed using Safari. If these options are not sufficient, it is possible to install the custom font directly into Chrome, so that the browser no longer uses the default font.

To install the font into Chrome:

Click on the custom font (.otf or .ttf file)

This brings up a dialog - click on Install Font

If the font has a Off next to it then right click and enable the font family

Resolution and Interpolation

Resolution is defined as number of pixels per unit of measurement (i.e. an inch or centimeter). The word pixel is derived from the words picture element and is the smallest element (or building block) of a digital image. Essentially, resolution describes the size of a single pixel.

Bitmap (or Raster) images are based on pixels, and should have the same pixel dimensions as the device the images will be displayed on. If this type of graphic is displayed on a screen with different pixel dimensions, the apparent quality of the graphic will be reduced. A common example of this is when a graphic like a photograph appears blurry when displayed on a large screen. This is caused by a process called interpolation.

Proceed to: Vector and Bitmap Graphics

When a pixel-based graphic is enlarged, the original pixels are distributed over the larger display area. This creates gaps or missing pixels between the original pixels. The process of interpolation fills in the missing pixels based on the information in the surrounding pixels. This produces a larger image, but the sharpness of the detail in the image will be reduced.

Retina and Non-Retina Displays

It is important to understand that screens with the same physical size can have different pixel dimensions. One common scenario where this becomes important is in the difference between Retina and Non-Retina displays. For example, the iPad 2 and iPad Air 2 both have screens with the same physical dimensions (9.7 inches diagonally), but they do not have the same pixel dimensions. The iPad 2 is an older model, and it has pixel dimensions of 1024px by 768px, or 132 ppi (pixels per inch). The iPad Air 2 is a newer model, and it has pixel dimensions of 2048px by 1536px, or 264 ppi.

Apple has chosen to use the term Retina Display to describe displays where the human eye cannot discern the individual pixels at a normal viewing distance (a foot or more from the screen).

Since the iPad Air 2s Retina display has more pixels per inch than the iPad 2s Non-Retina display in a screen of the same physical size, it follows that each one of those pixels is smaller in the Retina display. The iPad Air 2s pixels are half the size of those in the iPad 2, which means that there are four times as many pixels in the Air 2s display. Smaller pixels enable a greater level of detail in a graphic.

This difference creates a challenge when designing for an iPad. Graphics that are designed for Non-Retina display will be upscaled (enlarged) on Retina devices, leading to blurry images.

iOS Handling of Display Differences (1x vs 2x)

Since not all iOS devices have Retina displays, iOS provides a way to manage assets in your project so that both Retina and Non-Retina displays can be accommodated. This is handled using a standard naming convention that identifies Retina and Non-Retina assets. Non-Retina assets are designed for a 1024 by 768px display. Retina assets are designed for a 2048 by 1536px display and are named with a @2x just before the file extension. For example, for an image called example.png you would create two versions: one at 1024 x 768 called example.png and one at 2048 x 1536 called [email protected].

When a project containing assets named this way is displayed on a device, iOS uses the naming conventions to display the appropriate assets for the device being used. A Non-Retina device would display example.png and a Retina device would display [email protected]. This ensures that each device is able to display a clear image. To find out how to include both types of assets in your SmartStudio applet, read this article.

https://en.wikipedia.org/wiki/IPad#Model_comparison

To create a new illustrator document for an iPad app:

Launch Adobe Illustrator

Go to File - New, and under New Document window choose below settings:

Under Number of Artboards enter desired number. Enter 1 to start your document. You can always add additional artboards as you are developing your project

Under Width and Height enter 1024px x 768px to generate 1x canvas

Select Pixels as the unit of measurement

Under Orientation, select Horizontal

Color Mode: RGB

Raster Effects: Screen (72 ppi)

Preview Mode: Pixel - selecting pixels preview mode will allow you to preview, in real time, how your artwork will look like when rasterized. Illustrator is a vector based application, therefore, your content created inside of Illustrator will be vector. All SmartStudio image assets are bitmap (pixel based), and at the end your illustrator vector content needs to be rasterized. Viewing your vector content as bitmap, will allow you to make better design decisions.

Align New Objects to Pixel Grid

To create a new illustrator document for an iPhone app, use different set of pixel dimensions and vertical orientation:

Number of Artboards: 1

Units: Pixels

Width: 320 px

Height: 568 px

Orientation: Vertical

Color Mode: RGB

Raster Effects: Screen (72 ppi)

Preview Mode: Pixel

Align New Objects to Pixel Grid

Important Illustrator Preferences

On a Mac OS, the Illustrator preferences are located under the Illustrator menu

On Windows, the Illustrator preferences are located under the Edit menu.

When resizing artwork directly inside of Adobe Illustrator, ensure below general preferences are enabled:

Scale Corners - when this option is enabled, the corner radius will scale together with an object

Scale Strokes Effects - when this option is enabled, the stroke weight as well as effects will scale together with an object

Optional - if patterns are present in your design, and you would like them to scale inside of objects, enable the "Transform Pattern Tiles" preference

In the workflow that we recommend, you will use Adobe Photoshop as the primary tool for generating your design and exporting assets. However, you can develop individual elements of your applet in Adobe Illustrator and place them into Adobe Photoshop as Vector Smart Objects.

The easiest method for non-designers for placing Illustrator content in Photoshop is simply to copy it in Illustrator, and paste it in Photoshop as a Vector Smart Object.

When you paste Illustrator artwork inside of Photoshop document, you will be presented with the "Paste" dialog box where you need to select the Paste As: Smart Object option.

1. Enter your account's URL (for most accounts this is pro.scrollmotion.com) in either the Chrome or Safari browser (latest version is recommended).

If you are unsure of your account URL, contact your system administrator or submit a request to ScrollMotion Support.

2. Enter your Email address and Password.

3. Optional: To remain logged in to WorkCloud on a specific computer, check the box under Remember me. When you exit from WorkCloud, do not logout. When you return to WorkCloud, you will not be prompted to login again. If you do logout, you will be required to enter your password the next time you login.

4. Click Login.

NOTE: If this is your first visit and you have yet to activate your user account, you will need to do that first. See the User Activation article for more info.

Graphics fall into two main categories: Vector Graphics and Bitmap Images. Each type has advantages and disadvantages, and understanding these will help you choose between them when creating graphics for your project.

Vector Graphics

Vector graphics are composed of mathematically defined lines and shapes called vectors. The advantage of vector content is that it is resolution independent, which means it can scale without loss in quality. The disadvantage of vector content is a that it has less detail than bitmap images. Vector content in Adobe Photoshop consists of objects created with the pen tool, shape layers, vector smart objects and unflattened type. Vector content is recommended for logos, buttons, interface, menus, icons, and similar project elements.

Scaled Vector Content (No Loss in Quality)

Bitmap Images

Bitmap images, technically called raster images, are composed of pixels. The advantage of bitmap content is that it contains a much greater level of detail compared to vector content. The disadvantage of bitmap content is that it is resolution dependent, which means that it loses quality when scaled up or down. Even though the level of detail in vector content has steadily increased over the years, bitmap content still contains the most detail. The best examples of bitmap images are photographs.

Scaled Bitmap Content (Quality is Lost)

Summary

One of our back-end providers, Amazon Web Services, experienced an outage today that affected many websites and web services across the United States, including Scrollmotion. Reports indicate that the outage began around 2:58 pm ET and operations were fully recovered by 3:49 pm ET. For more information about the outage, see the Amazon Service Health Dashboard site.

Scrollmotion customers that were actively creating or editing their applets during this time frame may have been affected. If you are experiencing any issues with your applets, please reach out to our Support team at [email protected] so we can help to resolve.

1. Tap "Options" in the upper right corner.

2. Tap "Log Out" at the bottom of the menu.

3. You will be logged out immediately and will return to the login screen.

Trigger : All button actions have a Trigger, which is an event that causes the action to be executed. Triggers include Touch, Touch and Release, Toggle On/Off, and Now. Now executes "on load", which is a really powerful feature, especially when used with Delay.

TargetObject : Nearly all button actions have a Target Object, which is another object that experiences the action. For example, a Play Video action targets a video object and causes it to play. The Go to Page action's target is a page, and the Play Sound action's target is a sound. The Stop Sound (Stop Playback) action does not have a target. It simply stops the active playback of audio.Note: Actions cannot target videos within a container.

Delay : All button actions have a Delay, which is the number of seconds between the trigger and the actual execution of the action on the target. A Now trigger with a delay puts a timer on an automatic action, like navigation to a new page.

The video object displays a video. Videos can be configured to play fullscreen, with or without controls, and can be set to play automatically and to loop.

Click the Video icon on the Design Panel The Media Library displays.

2. 1. Select a video file from the Library for the Video object and click OK.

OR

2. Click Upload to upload a new video.

The Video Properties Panel is activated.:

3. Make selections from the following properties.

Video : The video file to be used in the video object.Click the up arrow to select or upload a different video file.

Autoplay : When selected,will cause the video to play as soon as it appears.Autoplay is not selected by default.

Loop : When selected, will cause the video to repeat. Loop is not selected by default.

Fullscreen : When selected, will play the video at full screen size. Fullscreen is not selectedby default.

Preserve : When selected,will cause the video to persist on the page after it ends. Preserveis selected by default.

Controls : Determines whether the video player controls will be visible or hidden. Controls are shown by default.

Show : Controls are visible. Selected by default.Hide : Controls are not visible.

Multiple users can be imported with the use of a .CSV file. TheBulk User Importfunction allows aCustomer Adminto add multiple user profiles to an account at the same time by using a formatted .CSV file.

1. Create a new .CSV file using your spreadsheet software of choice.

Label thefirst four column cells in the header row with the words "first", "last", "email", and "groups" (all lower-case, with no additional letters, symbols, or numbers).Add each user on a separate row. Be sure to save the file as the.CSV file type.

NOTE: Groups that are not already in the system will be created automatically.

2. In WorkCloud, click User in the navigation bar.

3. Click Import.

4. Scroll down a bit and click on Browse.

5. Navigate to the .CSV file you created, select it, then click Open.

6. Click Next and review the messaging. If there are no errors, click Import.

1. On the ScrollMotion Library screen, click New Applet.

2. Complete the fields on the Welcome to SmartStudio screen:

the applet's name

the device type

dimensions

the applet's orientation to the screen.

3. Click Create.

1. Enter the App Store on your mobile device and type "scrollmotion" in the search bar in the upper right of the screen.

2. Next to the "ScrollMotion" app, tap the "GET" button followed by the "INSTALL" button to download to your device.

3. After the download is complete, tap the "OPEN" button.

4. Enter your account login credentials.

To rename an applet:

Method 1

Click Library in the Navigation bar. The Library screen displays.

Click the name of the applet you want to rename. The Applet Detail screen displays.

Click the name of the applet. The text becomes editable and a checkmark and an X icon display to the right of the selected field.

Enter the new name for the applet.

Click the checkmark to save the new name for the applet.

To cancel any changes to the field, click the X icon.

Method 2

Click Library in the Navigation bar. The Library screen displays.

Click the box next to the applet to be renamed.

Click More. The More drop-down menu displays.

Select Rename in the drop-down menu. The Rename dialog box displays.

In the Rename dialog box, enter the new name for the applet.

Click Rename.

At any time you may click Cancel to stop the renaming process and return to the Library screen.

To create a new document in Adobe Photoshop:

Launch Adobe Photoshop

Go to File - New

Proceed to: Setting up a Photoshop Document for an iPhone Applet

When setting up a new Photoshop document for SmartStudio iPad applet use the following settings:

Document Type: Custom

Width: 1024 pixels

Height: 768 pixels

Resolution: 72 pixels/inch

Color Mode: RGB, 8 bit

Color Profile: sRGB (for most color consistency)

Pixel Aspect Ratio: Square Pixels

We recommend the Pixel Dimensions be set to 1024 by 768 px to give you a 1x canvas size. This will ensure that your smallest details will be preserved in both 1x and 2x versions of graphics. It will also create a canvas that matches the dimensions of the SmartStudio canvas for an iPad applet. As you will later learn, you will use Adobe Generator Photoshop plugin which ships with the software, to automatically create 2x versions of each graphic.

Because we are designing for mobile devices and the ability to publish our content to the web, the most important factor are Pixel Dimensions which for this project are 1024px x 768px. The resolution is irrelevant, if you are publishing your content to a mobile device only, because resolution which describes the size of each pixel is already predetermined by the device you are using. The resolution of the retina iPad for example is 264ppi. The resolution of the iPad mini is 326 pixels per inch (ppi) etc. If you want to be consistent however, and you plan to not only create a mobile applet but also publish it to the web, pick a resolution you will use for all your files such as 72ppi (pixels per inch). Today, the average monitor resolution web content is viewed on is around 100ppi. We recommend 72ppi because our platform supports publishing SmartStudio content for a web browser, and some very old monitors have 72ppi resolution. This is an extremely rare use case for most ScrollMotion users, but since your resolution has to be set to something, we suggest 72ppi.

http://www.planetquark.com/2012/03/14/132-ppi-72-dpi-264-ppi-what-image-resolution-should-you-use-the-for-new-ipad/#.VuNJ6JMrKCV

After a Bigtincan Studio file's design is complete and a version has been published,you will need to download the ScrollMotionTransit file from WorkCloud so that you can transfer it to Bigtincan. There are two methods you can take to download aScrollMotionTransit file from WorkCloud. Method 1 is recommended, as it is most obvious which version of the file you are downloading.

NOTE: If you attempt to download a filefrom WorkCloud thathas not been published, the system will not download it. For instruction on how to publish a Studio file, see this article.

Method 1:

1. In WorkCloud, clickLibraryin the top navigation bar.

these instructions

2. Navigate tothe file you want to download andclick on its name.

3. On the file details page, click theActionsbutton next to version of the file you'd like to download and then clickDownload.

4. ClickOKwhen the download confirmation dialog box displays.

5. The ScrollMotionTransit file is downloaded to your computer'sdefault download folder/location.

Method 2:

1. In WorkCloud, clickLibraryin the top navigation bar.

2. Navigate tothe file you want to download andclick to checkthe boxto the left of it.

3. ClickMorein the upper right corner and then clickDownload.

4. ClickOkwhen the download confirmation dialog box displays.

5. The ScrollMotionTransit file is downloaded to your computer'sdefault download folder/location.

NOTE: If this file has more than one version,this methodwill download the currently published version of the app.

You can now upload your ScrollMotionTransit file to Bigtincan using.

1. Go to <pro.scrollmotion.com> in either the Chrome or Safari browser.

2. Click "Get Started" at the bottom of the login box.

3. Enter your email address and click Submit. An email is sent to your email address providing a link to set up your ScrollMotion password and activate your profile.

4. Check your email and click on the link provided.

5. Create a new password, retype the password, and click Submit. Passwords must be at least 6 characters and contain both an uppercase letter and a number.

6. Read the Terms of Use and click Agree.

This article will provide step-by-step instructions for animating an object in your SmartStudio applet. You might also want to take a look at this Overview.

Select a Basic Button, Image Button, or Hotspot on the Canvas.

Easing Type

2. In the Properties panel, click on Actions.

3. Click Add Type and then choose Animate from the dropdown list.

4. Click to choose an animationfrom the Animation Type dropdown list.

5. Choose a Trigger from that dropdown list.

6. Choose a Trigger from that dropdown list.

7. Select an from the dropdown.

8. Apply the appropriate setting(s) based on the Animation Type you selected in Step 4. These animations change the values of object properties from starting values to new values. Starting values are visible in theCommon Barwhen the object is selected on the Canvas. New valuesare provided by you.

Change Position:This animation moves the object from a starting position to a new position. Positions are defined in by x and y values.

Enter anX-Destination (in pixels). This is the ending X-axis location for the object after the animation has run.

Enter aY-Destination (in pixels). This is the ending Y-axis location for the object after the animation has run.

Change Opacity:This animation changes the object's opacity (or "alpha") from a starting value to a new value.

Enter a New Opacity percentage(or select from the dropdown).

To fade an invisible object in, set the starting opacity to 0% and the New Opacity to your desired opacity (use100% to make an object completely opaque).

To fade an object completely out, setthe New Opacity to 0%.

Change Rotation:This animation changes the object's rotation from a starting value to a new value.

Enter aNew Rotation (in degrees) to define the object's rotation at the end of the animation.Negative valuesindicate counter-clockwise rotation. Positive valuesindicate clockwise rotation.

Change Scale:This animation changes the scale of an object from a starting value to a new value.

Enter aNew Scale (as a percentage). Use a scale valuethat is smaller than the starting value toreducethe size of the object. Use a scale value that is larger than the starting value to increase thesize of the object.

Preset Animation:

This animation type is the result of a conversion from legacy Fade In and Fade Out animations. We recommend that you usethe Change Opacity animation (above) for any new fade animations.

9. Enter a Duration (in seconds) to specify the length of time the animation will take to run. Your entry will be rounded to the nearest hundredth of a second.

10. Enter a Delay(in seconds). When it is triggered, theanimation will wait that length of time before starting to run.Your entry will be rounded to the nearest hundredth.

11. Enter the number of times you want the animation to Repeat. (To repeat the animation indefinitely, set this to -1.)

12. Check the Auto-reverse box if you want the animation to run backwards to the beginning when it reaches the end.

1. Position the cursor over the Basic Button and hold down the left mouse button.

2. Drag the Basic Button to a new location in the WorkSpace.

When set to Hidden on the Objects list on the Project Panel, an object will not appear anywhere (not on the page in SmartStudio or when the applet page is loaded).

There is not an automated email that goes out to users after they're added, so we recommend emailing out a message similar to the one below once you're ready for them to activate:

Hello,

Congratulations! We've started using an exciting new platform called Scrollmotion and you've been set up as a user. Using Scrollmotion, we can create highly engaging, interactive content for the iPad that is accessible from our Bigtincan Hub.

To get started, you'll first need to activate your account using these instructions.

(information regarding planned training sessions, etc.)

Thank you!

Signature

Review the selection of articles/videos below to get up and running with Bigtincan Studio quickly!

How to Login to WorkCloud

How to Create a Folder

How to Create a New Applet

SmartStudio Workspace

How to Upload Assets

How to Add a Basic Button / How to Add an Image Button / How to Add a Hotspot

How to Add a Video

How to Add a PDF

How to Add a Webview

How to Add an Image Sequence

How to Add a ScrollMotion

How to Add a Draggable Image

How to Preview Your Content

How to Publish an Applet

How to Download a ScrollMotionTransit File for Bigtincan

How to Add a User

How to Notify a User of Their New Account

There is not an automated email that goes out to users after they're added, so we recommend emailing out a message similar to the one below once you're ready for them to activate:

Hello,

Congratulations! We've started using an exciting new platform called Scrollmotion and you've been set up as a user. Using Scrollmotion, we can create, share and present on the iPad in a highly engaging way via interactive content.

To get started, follow the instructions in the video below...

(insert information regarding planned training sessions, etc)

Thank you!

Signature

The Webview object displays html from a local file or web page.

To create a Webview:

Click the Webview icon on the Design Panel An empty Webview frame displays.

Webview Properties Panel

The is activated.

2. Enter the URL you want to display. The web site displays in the Webview frame.

Note: If the web site does not display,

Click the shield icon in the address/URL bar.

Then click Load unsafe script

Menu Bar: Home to some menus, some file information, and the Preview and Publish Buttons.

Common Bar: Tools to configure, position, align, and arrange your objects.

Project Panel: Blueprint for your applet's structure, navigation, and content.

Design Panel: Launchpad for lots of awesome media and interactivity, like images, animation, video, buttons, and other great building blocks for a cool user experience. Also provides a browser of reusable assets which can be uploaded in a batch or individually.

Properties Panel: Control Panel for any selected object, exposing all the configurable knobs and dials.

Page Space:"On-screen" spacefor you to place objects.

Scratch Space:"Off-screen" spacefor you to place objects.

This tutorial describes three (3) methods for uploading assets to the Media Library:

Dragging and Dropping.

Uploading assets directly from within Media Library.

Uploading assets after selecting one of the 5 Object types.

Method 1 - Uploading assets to the Media Library by Dragging and Dropping.

Step 1 - Click on one or more assets on your computer to select them.

To select several assets in consecutive order, click to select the first asset, hold down the Shift key and click on the last asset. Holding down the Shift key will allow you to select intermediate assets.

To select several assets in a non-consecutive order, click to select the first asset, hold down the Command key (Mac) and click one-by-one on the remaining assets.

Step 2 - Drag all assets on top of the SmartStudio browser window, and release your mouse button on top of the words Drop here, to upload to your Library. Your newly uploaded assets will show up under Media tab of the Design panel.

Method 2 - Uploading assets directly from within Media Library.

Step 1 - From within Media tab of the Design panel, click the Upload button.

Step 2 - Click on one or more assets to select them.

Step 3 - Click the Open button to upload selected assets to the Media Library.

Method 3 - Uploading assets after selecting one of the 5 object types.

Step 1 - Under Basic tab of the Design panel, click on one of the 5 object types that require an asset: image button, image, image sequence, video or scrollmotion.

Step 2 - The Media Library dialog box will open. Click the Upload button located on the top right corner of the Media Library.

Step 3 - Select one or more assets on your computer and click the Open button to upload them to the Media Library, and place an object on canvas.

To activate PDF viewer:

Click Advanced on the Design Panel.

Select PDF Viewer. A View PDF button displays on the current Studio Page and the Properties (PDF Viewer) Panel opens.

Click the Reader Button tab and select;

a Reader Button Image

a Reader Button Image (Tap State)

a Transition Type

File Viewer

4. Click the tab and select;

a PDF File (the PDF file to be viewed)

a Top Bar Color (the color of the top bar for the PDF Viewer)

a Top Bar Text Color (the color of the text in the top bar of the PDF Viewer)

5. Check Display Share Button.The Share button will display in the top bar of the PDF Viewer on the user device and will provide the user with the option of emailing the PDF file from their device.

The ScrollMotion object displays an interactive image sequence that is controlled by touch.

Click the ScrollMotion icon on the Design Panel The Media Library displays.

ScrollMotion Properties Panel

2. 1. Select a group of image files from the Library for the ScrollMotion and click OK.

OR

2. Click Upload to upload new files and then select a group of images for the ScrollMotion.

The is activated.:

Under Attributes In the ScrollMotion Properties Panel:

3. Click Select file.The Media Library displays the list of uploaded images.

4. Choose the image files for the ScrollMotion and click OK.

5. Select the Start Image from the drop-down list.

The Start Image is the name of the image in the sequence that will be visible when the ScrollMotion first appears.

6. Select the Swipe Direction: This determines whether the user will swipe horizontally or vertically to control the animation. Horizontal is selected by default.

Horizontal

Vertical

7. Select the Frame Order: This determines whether frames will move forward or backwards (reverse) when the user swipes left to right.

Forward: User swipes left to right (or up from the bottom). Selected by default. .

Reverse: User swipes right to left (or down from the top).

8. Check Loop to be able to continuously swipe back and forth without reaching a stopping point.

9. Select Autoplay to cause the ScrollMotion to play as soon as it appears at a specific speed and for the number of times designated.

Frames/Sec: Select the number of frames to display per second.

Repeat: Select the number of times for the ScrollMotion to repeat

Note: While on Autoplay the ScrollMotion frames cannot be swiped.

Under Advanced In the ScrollMotion Properties Panel:

10. Select Settings for the following:

Momentum: The rate at which the motion will slow to a stop. A higher momentum brings the motion to a stop more quickly. A lower momentum takes longer. A momentum of zero will not stop moving until the user touches the ScrollMotion again.

Sensitivity: The speed at which the frames move relative to the distance of the user's movement. Frames will advance more quickly when sensitivity is higher, and they will advance more slowly when it is lower.

Download the .scrollmotiontransit file here: Assessment -List

Upload the.scrollmotiontransit file to your WorkCloud. For instructions on how to upload afile toWorkCloud, see this article.

Follow along with the video above to customize.

Device Type

Model / Generation

iOS Version

ScrollMotion App Version

iPad Pro

9.7-inch

10

3.24 or higher

12.9-inch

10

3.24 or higher

iPad Air

2nd Gen

10

3.24 or higher

1st Gen

10

3.24 or higher

iPad Mini

4th Gen

10

3.24 or higher

3rd Gen

10

3.24 or higher

2nd Gen

10

3.24 or higher

1st Gen

9.3.5

3.24

iPad

4th Gen

10

3.24 or higher

3rd Gen

9.3.5

3.24

2nd Gen

9.3.5

3.24

1st Gen

not supported

not supported

iPhone

7 / 7 Plus

10

3.24 or higher

6s / 6s Plus

10

3.24 or higher

6 / 6 Plus

10

3.24 or higher

SE

10

3.24 or higher

5 / 5c / 5s

10

3.24 or higher

4 / 4s

not supported

not supported

3GS

not supported

not supported

3G

not supported

not supported

1st Gen

not supported

not supported

Version 3.21

Released 5/11/16

New Features:

SmartStudio

New Animation Types: The Animation functionality has been expanded to allow for new kinds of animation, including Change Position, Change Opacity, Change Rotation, and Change Scaling. See thisarticle for more information. (STUDIO-1053, STUDIO-1058, STUDIO-1997, STUDIO-2093, STUDIO-808)

Changes:

SmartStudio

Improved Text Property Panel: Various improvements have been made to the text properties panel, including a new color picker, listing the unit of measurement in the input and dropdown fields, and increase/decrease capabilities for font size, letter space, and line height. (STUDIO-1885)

WorkCloud

Login from Website: Free Trial and Pro users can now login to their account directly from the ScrollMotion website via a new header button. (WORKCLOUD-240)

Fixes:

SmartStudio

Pasting Overlays in Containers: An issue has been resolved where the paste in place functionality was not working as expected inside containers. (STUDIO-1815)

Image Button Blinking: An issue has been resolved where image buttons were blinking on the canvas while being resized. (STUDIO-1884)

Image Button Tap State: An issue has been resolved where the image button tap state was not working correctly. (STUDIO-2031)

Container Content Disappearing: An issue has been resolved where container content would vanish when the user started editing a text box. (STUDIO-2033)

Disappearing Cursor: An issue has been resolved where the cursor did not disappear after selecting Autoplay values using the increase and decrease spinners. (STUDIO-1905)

Support Link Error: An issue has been resolved where a 404 error was showing when a user clicked on the supported file type link. (STUDIO-1907)

Button Text Spacing:An issue has been resolved where a max of one space would appear between two words within button text, regardless of how many spaces were entered. (STUDIO-1914)

PDF Plugin Interactivity: An issue has been resolved where PDF plugins were not interactive on the canvas. (STUDIO-2001)

Chart Plugin Rendering: An issue has been resolved where the pie chart plugin was not loading when plugins were updated. (STUDIO-2024)

Container Rendering: An issue has been resolved regarding issues with rendering container content. (STUDIO-2001)

Objects Resizing: An issue has been resolved where images and other content objects proportions were not constrained during resizing. (STUDIO-2055)

Web Client (Preview/Publish to Web)

Image Sequence Rendering: An issue has been resolved where image sequence overlays were rendering as cut-off once they were resized. (BORGJS-729)

Video Progress Indicator: An issue has been resolved where the video progress indicator was appearing twice when viewed during Preview on the Safari browser. (BORGJS-787)

Video Freezing: An issue has been resolved where videos were freezing during Preview when users clicked on the control bar. (BORGJS-792)

Container Border Rendering: An issue has been resolved where part of a container content objects borders were missing when the border width was 1px. (BORGJS-796)

Version 3.18

Released 1/26/16

New Features:

SmartStudio

Plugin Updating: New functionality has been added to SmartStudio to ensure that users always have the option to update to the latest version of plugins available to them. (STUDIO-1637)

Changes:

SmartStudio

Changes to Help menu: Updates to the Help menu have been made to reflect changes to our support options. (STUDIO-1713)

Change in File Upload Process: The file upload process has changed to restrict certain special characters in file names. (STUDIO-1671)

Change in Applet Creation Process: The creation process has changed to restrict certain special characters in applet names. (STUDIO-1594)

WorkCloud

Changes to Help menu: Updates to the Help menu have been made to reflect changes to our support options. (WORKCLOUD-1112)

Fixes:

SmartStudio

Media Library Filter Settings: An issue has been resolved with the Media Librarys filter settings where PDFs were not showing up when other was selected. (STUDIO-1300)

Basic Button Text: An issue has been resolved with Basic Button text where some special characters were not rendering correctly. (STUDIO-1496)

Updates to SmartStudio Plugins: Various updates have been made to SmartStudios plugins, including resolving the z-index object stacking order, placement inaccuracies, and PDF issues. (STUDIO-1737, STUDIO-1700, STUDIO-1835, STUDIO-1838, STUDIO-1849)

Videos Being Uploaded as Images: An issue has been resolved with an issue in SmartStudios file upload system where it was converting video file names into image file names. (STUDIO-1508)

Error Handling Fixes: Various issues have been resolved with SmartStudios error handling and messaging systems. (STUDIO-1763, STUDIO-1770)

Page Deletion Issue: An issue has been resolved where deleting pages from the All Pages section of SmartSudio could not be undone. (STUDIO-1789)

MobileLibrary

Plugin Platform Functionality: An issue has been resolved where some plugins were loading on the wrong page when the app was navigated through quickly. (IOS-914)

Mobile Library PDF Rotation: An issue has been resolved with the MobileLibrary PDF viewer where it was cutting off the viewable area if rotated while open. (IOS-1467)

Download Queue Title Text: An issue has been resolved with the Download Queue page not loading its title immediately upon page load. (IOS-1474)

Nothing in this collection. Message Placement: An issue has been resolved where the Nothing in this collection. message was displaying in the carrier bar at the top of the screen instead of in its appropriate place. (IOS-1477)

Version 3.16

Released 11/11/15

New Features:

WorkCloud

Admin Push Notification: WorkCloud has expanded admin options to include the ability to send push notifications to user devices. (WORKCLOUD-1014, IOS-1308, IOS-1311)

Fixes:

Web Client (Preview/Publish to Web)

Publish to Web Rendering Issue: An issue was addressed with Publish to Web functionality where it was not rendering content as expected. (BORGJS-679)

MobileLibrary

Text Rendering Issues: Several issues were addressed regarding the way live text was being rendered. (IOS-1366, IOS-1380)

MobileLibrary Rendering Issues: An issue was addressed where MobileLibrary would not render full-screen upon initial launch in iOS 9. (IOS-1368)

Version 3.15

Released 10/6/15

Changes:

WorkCloud

Special Character Support in Content Naming: WorkCloud now supports a unified set of special characters for different naming/renaming opportunities (creation, updating, editing, etc.) and, thereby, supports most languages. (WORKCLOUD-903)

MobileLibrary

Integrations into ACE (App Configuration for Enterprise): The MobileLibrary will automatically populate a user's email into the login page when the app is distributed via an ACE compatible enterprise mobility management service such as Airwatch. (IOS-1332)

Fixes:

SmartStudio

iPhone support for PDF Plugin: An issue has been addressed in SmartStudio where the PDF plugin did not automatically resize to fit iPhone screens. (STUDIO-1161)

Web Client (Preview/Publish to Web)

Preview and Publish to Web Page Background Flash: An issue has been addressed in SmartStudio where the Preview and Publish to Web sections were showing a slight vertical top-to-bottom wiping flash on first load. (BORGJS-634)

WorkCloud

Edit Links Missing: An issue has been addressed in WorkCloud where the Edit link was not appearing for some editable applets. (WORKCLOUD-1037)

Validation Error Messaging: Clearer error messages are now displayed in certain invalid transit file upload instances. (WORKCLOUD-1049)

MobileLibrary

User Being Logged Off: An issue has been addressed in MobileLibrary where users were being logged off when in Airplane mode. (IOS-1147)

Download and Update Badges Not Responding: An issue has been addressed in MobileLibrary where the applet download and update badges were not immediately changing to indicate an update or download has begun. (IOS-1149)

Version 3.14.2

Released 9/24/15

Fixes:

SmartStudio

New User Loading Problem: An issue has been resolved where new users were unable to launch SmartStudio. (STUDIO-1632)

Version 3.14.1

Released 9/8/15

Fixes:

SmartStudio

Vertical Text Alignment Inconsistent: An issue has been resolved where the vertical alignment property was inconsistent between SmartStudio and Mobilelibrary (specifically, it was changing from "baseline" to "top"). (STUDIO-1584)

Version 3.14

Released 8/27/15

New Features:

SmartStudio

Container Bounce Property: SmartStudio has added a new property to containers that allows their overscroll bounding to be disabled. (STUDIO-1407)

WorkCloud

Expansion of Free Trial: The free trial version of the ScrollMotion platform has been expanded to include more of the standard features associated with the paid version, including WorkCloud and Publish to Web. This expanded free trial will be available to new and existing users on September 8th. (WORKCLOUD-678)

MobileLibrary

Run Applet while Downloading: The MobileLibrary has been updated to add the ability to run the current version of an applet while a new version of that applet is being downloaded. (IOS-905)

Changes:

SmartStudio

Image Sequence Max Dimensions: SmartStudio has been changed to set the max dimensions of image sequences and ScrollMotions to be equal to the screen size instead of 1024x768. (STUDIO-1301)

Fixes:

SmartStudio

Container Scratch Space Issue: An issue has been resolved where the canvas, dimming layer, and click layer were not sizing properly when large content area containers were used. (STUDIO-1306)

Page Name Showing Incorrectly: An issue has been resolved where new pages were being created with an incorrect display name. (STUDIO-1532)

Text CSS Updates: There were several updates and tweaks made to SmartStudio's text CSS in order to address issues with the way text was rendering. (STUDIO-1347, STUDIO-1365, STUDIO-1392, STUDIO-1394, STUDIO-1421, STUDIO-1423, STUDIO-1429, STUDIO-1430, STUDIO-1433, STUDIO-1440, STUDIO-1495, STUDIO-1481)

Non-English Default Text Uneditable: An issue has been resolved where SmartStudio text objects were not editable when a user's default language was not set to English. (STUDIO-1481)

Scrolling Text Resizing: An issue has been resolved where scrolling text was automatically resizing to fit text content after editing in SmartStudio legacy text support. (STUDIO-1443)

Web Client (Preview/Publish to Web)

0 Opacity Buttons Still Tapable: An issue has been resolved where buttons that had been made invisible by turning their opacity down were still tapable. (BORGJS-574)

Font Load Delay in Preview: An issue has been resolved where text would temporarily load with a different font than specified before it would disappear and reappear with the correct font used. (BORGJS-579)

Slide Transitions Jumping: An issue has been resolved where slide transitions would jump ahead during their transition when pages were set to be larger than 1024px. (BORGJS-588)

Video Control Bar Showing Before Video is Ready: An issue has been resolved where video control bars would appear before the video was ready. (BORGJS-591)

Crossfade Transition Issue: An issue has been resolved where the implementation of the crossfade transition caused the page background to shift color. (BORGJS-617)

Double Container Scrollbars: An issue has been resolved where containers were displaying two separate scrollbars. (BORGJS-619)

WorkCloud

Importing Users with CSV File: An issue has been resolved involving the creation of user accounts by importing a csv database file. (WORKCLOUD-731, WORKCLOUD-962)

Search Results Page Not Updating: An issue has been resolved where search results were being displayed again after leaving and trying to navigate to new page. (WORKCLOUD-860)

Share Functionality Bug: An issue has been resolved with the share functionality where the mouse cursor disappears after adding or removing groups. (WORKCLOUD-951)

Group Management Issue: An issue has been resolved with group descriptions not being maintained when group is duplicated. (WORKCLOUD-956)

MobileLibrary

Messaging Showing in Wrong Place: An issue has been resolved where the message "Nothing in this collection" was displaying in the wrong location in the MobileLibrary. (IOS-1320)

Version 3.13

Released 8/5/15

New Features:

WorkCloud

User List Sorting: A new feature which allows a customer admin to sort the user list by current status (for example, "active" or "deactivated"). (WORKCLOUD-635)

Changes:

MobileLibrary

Video Milestone Analytics: Video milestones, such as percent completed, have been added to analytics reports. (IOS-1194)

Fixes:

SmartStudio

Text Update Script: An automated process has been put in place to convert older text styling methods to the new and improved method in order to address known text styling issues. (STUDIO-1469)

Default Language: We've fixed an issue where English was not properly set as the default language in order to avoid issues that could arise when using a non-supported language. (STUDIO-1154, STUDIO-1481)

Web Client (Preview/Publish to Web)

Video Hide on "Now": We've fixed an issue where videos were not hiding properly when "Hide" actions used the "Now" trigger. (BORGJS-441)

Video Flash on Load: We've fixed an issue where videos were flashing on the screen immediately after they were finished loading. (BORGJS-580)

Video Only Playing Once: We've fixed an issue where videos were only playing once when they were being controlled through actions. (BORGJS-582)

Actions on Containers: We've fixed an issue where actions that targeted containers were not being triggered after the use of a "Go To Page" action. (BORGJS-578)

WorkCloud

Icon Size Instructions: We've fixed the instructions for the best custom icon size, which were incorrect. (WORKCLOUD-787)

Searching with Special Characters: We've fixed an issue where using certain special characters in search criteria could cause a problem and require a page refresh. (WORKCLOUD-892)

MobileLibrary

Default Language: We've fixed an issue where English was not properly set as the default language in order to avoid issues that could arise when using a non-supported language. (IOS-1121, IOS-1265)

Applet Installation Issue: We've fixed an issue where applets were becoming corrupted when their installation was interrupted. (IOS-1231)

Version 3.12

Released 7/21/15

New Features:

SmartStudio

Asset Replacement(via 3.10 internal release): Swapping new assets into your applet is now supported. Just upload new assets with the same names, and SmartStudio will update your applet.

WorkCloud

Analytics Dashboard(via 3.11 internal release): A new dashboard can be enabled in WorkCloud to provide better insight into how users are interacting with applets within a given MobileLibrary. (WORKCLOUD-519)

Analytics Export Tool(via 3.11 internal release): A CSV file can be exported from the Analytics Dashboard to allow for further manipulation of the data. (WORKCLOUD-704)

MobileLibrary

iOS 8 and 64-bit Support (via 3.9 internal release): We've continued to stay aligned with Apple's latest iOS versions and other technology standards. (IOS-607)

User Feedback Form: Users can now submit issue reports and other user feedback directly from MobileLibrary. (IOS-401)

Crash Logging: MobileLibrarys remote logger functionality has been updated to include crash reporting to analytics. Reach out to your ScrollMotion Project Manager to run a report. (IOS-1135)

Email Analytics Reporting: MobileLibrarys remote logger functionality has been updated to include email reporting to analytics. (IOS-1152)

Changes:

SmartStudio

Improved Code View Validation: Adjustments have been made to the code view in SmartStudio to make saving changes when in editing mode much quicker. (STUDIO1372, STUDIO622, STUDIO1366)

WorkCloud

Improved Folder-Tree Navigation (via 3.10 internal release): All folders are now collapsed by default when moving them. (WORKCLOUD-501)

Faster Uploads and Improved Upload User Experience: WorkCloud has been modified to incorporate a new dedicated applet uploading service. This new service will help facilitate the upload process, making it faster and more reliable. (WORKCLOUD-719, WORKCLOUD-815, WORKCLOUD-835, WORKCLOUD-812)

Publish To Web Password Entry Page: WorkCloud has improved the appearance of the optional password entry page for those using the Publish to Web feature. (WORKCLOUD-716)

MobileLibrary

Status Bar Update: The MobileLibrarys progress bar has been updated to use Apple's iOS 7 preferred methodology. (IOS-1138)

Fixes:

SmartStudio

Video On Screen Rendering: There was an issue in studio where only selection pips were displayed on the Canvas when a Video is uploaded and selected. Now a solid object is being shown instead. (STUDIO1418)

Text Formatting Enhancements: Several fixes have been made regarding text formatting, including formatting only applying when text is selected (STUDIO-1395), changing the color of the first item in a list changing the color of the entire list (STUDIO-1409), text becoming overlapped after the user pastes in a bulleted list item (STUDIO-1416), and the delete functionality not working as expected on the first try when used with a subscript style (STUDIO-1417).

WorkCloud

Bundle Upload Issue: There was an issue in WorkCloud where uploaded bundles would display as a blank row if user switches to a new tab before uploading processes is finished. This issue has been resolved. (WORKCLOUD-332)

Wrong Text In User Deactivation Message: There was an issue in WorkCloud where the text message in the user deactivation notification was displaying the wrong message. This issue has been resolved. (WORKCLOUD-334)

Deletion Message Typo: There was a typo in the WorkCloud deletion message. This issue has been resolved. (WORKCLOUD-335)

MobileLibrary

Launch Spinner Integration: There was an issue in the Mobile Library where users launch and applet, leave the MobileLibrary, then return and have the applet appear locked or frozen. This issue has been resolved by integrating a load spinner into the relaunch process so that users understand that things are still loading. (IOS-1117)

File Name: This displays the applet's name.

Saving: When the applet is being saved, it will display a status message ("Saving") until the save is completed.

Publishing: When the applet is being published, it will display a status message ("Publishing") until the publishing is completed.

App fails to receive Push Notifications on iOS 10: The app is failing to display push notifications on iOS 10 only. Devices running iOS 9.3.5 will continue to receive notifications. (IOS-1899)

App crash with repeated app open and close: An issue has been discovered in which repeated app opening and closing on the iPhone 5 running iOS 10 will crash the app. (IOS-1897)

Shelf interface text displays with incorrect spacing on iOS 10: The apps interface text is displaying with the incorrect line spacing on devices running iOS 10. This can result in illegible text by interfering with other visual elements. This is not an issue for applet text generated by SmartStudio. (IOS-1895, IOS-1900, IOS-1901)

We are aware of an issue seen in the Chrome browser when running Windows 7 where a scrollbar is displayed on all pages that contain a Text overlay, regardless of whether or not there is additional text that continues below the initial view. This behavior can be seen on the SmartStudio Canvas, in Preview mode, and in Publish to Webcontent.

We are working to resolve this issue. In the meantime, you can use the following workaround to remove any unwanted scrollbars:

Open your affected applet in SmartStudio and navigate to an affected page.

Select the Text overlay on the Canvas by clicking on it.

3. Press Alt+Shift+P to bring up the Code View panel (selecting the Text overlay in the previous step will bring you directly to the corresponding portion of code).

4. Under the "userScrolling" property of the overlay, replace "vertical" with "none".

5. Click on Validate Save in the upper right corner of the Code View panel.

Released 9/12/16

The ScrollMotion iOS MobileLibrary app version 3.24 is the first release supporting Apples iOS 10 and resolves a critical issue which prevents all previous versions of the app from launching on devices running iOS 10.

Changes:

MobileLibrary

Support for iOS 10: Fixed a critical issue which prevents the app from launching on devices running iOS 10.

Dropping Support for iOS 8: With the introduction of iOS 10, the app no longer supports iOS 8. Devices running iOS 8 should be upgraded to the latest version of iOS 9 (iOS 9.3.5) or upgraded to iOS 10 for the optimal experience. For more information on iOS compatibility, see this article.

See this article for known issues related to this release.

----------

Released 8/25/16

Fixes:

SmartStudio

Non-editable Text: An issue has been resolved where the text could not be edited when the default language was not set to English. (STUDIO-2121)

MobileLibrary

Memory Overload: An issue has been resolved where a memory overload occurred with multiple pages being loaded simultaneously when the user tapped on multiple buttons. iOS 8 is not supported. (IOS-1644)

There will not be a corresponding 3.24 MobileLibrary app release in the App Store. 3.22 is still the most recent version and all of the new fixeslisted above will work properly in this version. If you are not yet using the 3.22 version, please see the article Manually Updating the Pro MobileLibrary.Custom MobileLibrary users that are not yet on 3.22 will need to update their custom MobileLibrary after it is made available to their device by your internal staff.

Released 6/16/2016

New Features:

WorkCloud

Device-Specific Publishing: You can now select the specific devices to which your ScrollMotion content will be published. Options are iPad and iPhone (both enabled, by default). For example, if you select iPad for a published ScrollMotion applet, users of the iPhone Mobile Library will not see it or be able to download it. For more information, see this article. (WORKCLOUD-920)

MobileLibrary

Device-Specific Publishing: This is the corresponding Mobile Library change for WORKCLOUD-920 (IOS-1224). You need the 3.22 Mobile Library to take advantage of device-specific publishing.

Changes:

MobileLibrary

View app content while multitasking: When using the iOS Control Center and while multitasking we now show a preview of where you are live in the ScrollMotion app rather than displaying a content placeholder screen. (IOS-78)

Fixes:

MobileLibrary

Opening the iOS Control Center during video playback closes the video upon return to the ScrollMotion Mobile Library: Video playback now pauses instead. (IOS-1560)

Muting your iOS device causes video playback to be muted: If your device is muted you will now hear the audio while playing a video. (IOS-1629)

The 3.22 version of the ScrollMotion MobileLibrary app will be available in the App Store soon. In order to be compatible with all of 3.22s new features, standard MobileLibrary users will need to update their existing ScrollMotion MobileLibrary app upon release. For more information see the article Manually Updating the ScrollMotion MobileLibrary.Custom MobileLibrary users will need to update their custom MobileLibrary after it is made available to their device by your internal staff.

To access/use this sample:

Download the .scrollmotiontransit file here: Assessment -Graph

Upload the.scrollmotiontransit file to your WorkCloud. For instructions on how to upload afile toWorkCloud, see this article.

Follow along with the video above to customize.

To create a new document in Adobe Photoshop for an iPhone applet:

Launch Adobe Photoshop

Go to File - New

That will prompt the New Document window to open.

Use the following settings to create canvas with the same pixel dimensions as the 1X SmartStudio iPhone applet:

Document Type: Custom

Width: 320 pixels

Height: 568 pixels

Resolution: 72 pixels/inch

Color Mode: RGB, 8 bit

Color Profile: sRGB (for most color consistency)

Pixel Aspect Ratio: Square Pixels

Unlike iPad applets, most iPhone applets are vertical rather than horizontal. This is largely due to the way most users hold their phones. If you need to create a horizontal applet instead, simply switch the Height and Width pixel dimensions.

We recommend the Pixel Dimensions be set to 320px by 568px to give you a 1x canvas size. Starting out with 1x canvas, will ensure that your smallest details will be preserved in both 1x and 2x versions of graphics. It will also create a canvas that matches the dimensions of the SmartStudio canvas for an iPhone applet. As you will later learn, you will use Photoshop plugin, called Adobe Generator, which ships with the software, to automatically create 2x versions of each graphic.

Designing for Multiple Screen Resolutions

One of the challenges designers face when producing content for mobile devices are multiple screen sizes and resolutions. Currently, when designing content for SmartStudio iPad applet, designers need to produce two sizes for each graphic, 1x size as well as 2x. If we are starting with 1x size canvas (1024px x 768px), it means that in order to produce 2x size (2048px x 1536px), we need to scale all the elements of that design to 200%, twice its original size. That in itself poses a challenge, since bitmap images lose their quality when scaled. The second challenge becomes scaling content and ensuring all the graphics look visually the same in all scaled versions of the design, so the visual integrity is maintained and detail is preserved. One of the valid reasons why we start with the 1x (1024px x 768px) design and then scale it up to 2x, is to preserve detail.

Proceed to: SettingupanIllustratorDocumentiPhoneiPad

Scaling Graphics without Loss in Quality (Non-Destructive Image Scaling)

When scaling bitmap images in Adobe Photoshop we need to convert them all to Smart Objects and ensure that the original which lives inside of the Smart Object is big enough to accommodate the 2x size. SmartObject is like a protective container which houses the original. Any transformations you apply to the Smart Object, are applied to the protective container, leaving the original unharmed.

Example: If the 2x graphic measures 130px by 100px, then the Smart Object needs to contain a graphic with at least 130px by 100px dimensions.

Follow below workflow:

Afteryou'vecreated your 1x size photoshop document (1024px x 768px), place all external bitmap images and/or vector graphics such as those created in Adobe Illustrator on canvas. Please note, all bitmap images need to be at least at 2x size at the time of placing.

To import multiple files into a single Photoshop document you have several choices among which are: Draging all files on top of the Photoshop document or going to File - Scripts - Load Files Into Stack.

Dragging files on top of the Photoshop document might be the easiest and most intuitive method for non-designers.

Each file, when placed on canvas, will receive a transformation bounding box, which gives you a chance to resize your image before placing. You will need to resize each bitmap image you drag on top of the canvas to 1x size. Hold down the Shift key to maintain image proportions and drag one of its corners. Press the Enter or Return key on the keyboard to commit the transformation and automatically convert an image to a smart object.

Please note, unless under Photoshop preferences you turned on Always Create Smart Objects When Placing and disabled Skip Transform When Placing youwon'tbe able to take advantage of automatic Smart Object creation, and access to the transformation bounding box.

To convert an existing photoshop layer to a Smart Object, select it in the layers panel and from the layers panel flyout menu choose Convert to Smart Object function.

Adobe Generator is a Plugin available within Photoshop, which when turned on, will automatically generate, optimize and scale all image assets as well as folders and sub-folders those assets reside in. Adobe Generator will help you quickly export all image assets you will need for your SmartStudio applet.

The core idea behind Adobe Generator is its ability to export layers as actual files on disk. It does that by listening for file format extensions in layer names (eg. .png, .jpg) - formats used in SmartStudio workflow.

You can use Generator to:

Create and name, folders and sub-folders

Generate files from layers, based on format extensions

Apply image Compression

Generate 1x, 2x and absolute image sizes

We recommend always using the newest version of Photoshop, which as of this writing is 2015.1.2.

Turning On Adobe Generator

To turn on Adobe Generator:

Launch Adobe Photoshop

Go to File - Generate - Image Assets

Proceed to: Folder/Sub-Folder Creation and Naming

When you use Generator to create assets, it will create a folder to hold them. By default, the folder will be named using the name of your Photoshop (.psd) file plus -assets suffix, and the folder will be created in the same location as your .psd file. In the example below, Generator has created a folder called MyProject-assets to match the name of the MyProject Photoshop file.

Proceed to: The Importance of File Format Extensions

Once the main folder has been established, Generator can also create one or more sub-folders to organize your image assets.

To create a sub-folder and place generated layer contents inside of it:

Add the name of a folder to a layer name, followed by the forward slash /

Next, add layer name and an appropriate file extension (eg. .png, .jpg)

PNG Image Compression

Generator will also let you specify a particular variation of an image format, such as the three available variations of the PNG format: PNG-8, PNG-24, and PNG-32. When a layer or group is named with a .png extension, Generator will create a PNG-32 by default, but you can specify a different PNG variation by including the variation number in the layer or group name:

Proceed to: Automated Asset Generation

These image format variations can be useful in managing the size of the assets you generate.

blue_btn.png will generate a PNG-32 (largest, no variation number needed since 32 is the default)

blue1_btn.png8 will generate a PNG-8 (smallest)

blue2_btn.png24 will generate a PNG-24 (in between)

In most cases, we suggest that you use PNG-8, as this will produce the smallest file size. The exception to this is any image with a subtle drop-shadow or gradient, because PNG-8 could lead to banding. In these rare cases, we suggest that you use PNG-24 or PNG-32.

Jpeg Image Compression

Image compression is a very important part of the creation process, because uncompressed images will lead to very large applets. Large applets are not ideal because they take longer to download or update, and they can sometimes (when very large) overwhelm the capacity of the device.

As seen in the previous section, PNG size can be managed by selecting a PNG format variation (PNG-24, PNG-8, etc). For JPEGs, file size can be managed by specifying a quality percentage after the extension in the layer or group name. By default, Generator will create JPEG-format assets at 90% of the original image asset quality, but you can choose a different level of compression by including image quality percentage immediately after image format extension (eg. .jpg50%, jpg70%):

This will produce an asset at your chosen image quality, which can reduce the file size of individual assets.

Below illustration shows the file size difference between jpegs with 90% and 50% quality. We recommend applying 50% quality setting to all jpegs in your project.

Image Scaling

Adobe Generator allows for three (3) methods of scaling image assets using:

Prefix as a percentage % - Percentage based scaling

Prefix which includes 2 units of measurement (eg. in, cm, mm, px) connected with the x character - Absolute size scaling

Prefix which includes a wild card (?) and a unit of measurement for a single dimension, connected with the x character - Absolute size scaling with image proportions maintained

1. Scaling Image Assets using percentage % prefix

You can scale an asset by including a transformation percentage as a prefix to the layer or group name. For example, if you add 200% prefix to the blue_btn.png layer name, Generator will output and save the asset at 200% its physical dimensions.

The rule is, if there is no size prefix specified in the layer name, the contents of that layer will be saved at 100% their physical dimensions. If the size prefix is specified, the image asset will be scaled to the predefined size.

Below example illustrates two layers. The first one will generate an image with 100% its physical dimensions, and the second one will produce an image scaled to 200% its original size.

2. Scaling Image Assets using units of measurement prefix

Adobe Generator can also scale assets to an absolute size using units of measurement (eg. in, cm, mm, px) connected with the x character, as shown in the below example.

If units of measurement are not specified (eg. 100x100 blue_btn.jpg), Adobe Generator will use pixels as the default unit of measurement.

3. Scaling Image Assets using the wild card (?) prefix

Based on the specified dimension, the wild card prefix automatically determines the other size dimension which is always proportionate to the specified one. The layer in the below example will generate an asset 3 inches wide. The other dimension will be automatically calculated. Since the original is a perfect square, the resulting image asset will be 3in x 3in.

Putting It All Together: Automated Asset Generation

It is possible to combine Generator capabilities to automatically produce a large number of assets for your SmartStudio applet project. This is particularly helpful when you need to generate 1x and 2x versions of your assets.

Lets assume that you have created your content at 1x and tagged your layers and groups with file format extensions that Generator listens for. To be sure that your applet displays as expected on a Retina device, you will also need a 2x version of each asset. Generator will let you automatically scale your 1x assets to create 2x assets, name the assets correctly, and store them in separate sub-folders to keep everything organized.

To do this, you will make use of a default layer.

Purpose of the Default layer

Adobe Generator allows users to specify global default image asset specifications, affecting every layer and/or group tagged with file format extension.

To specify global default asset specifications, an empty layer named default needs to be created, preferably on top of the layers stacking order. Syntax like naming applied to the default layer which activates specific actions (eg. scaling, folder creation etc.) will then affect all the layers in the document.

Use the word default to begin the layer name.

Specify a sub-folder for assets by adding a name for the folder followed by a / character:

1x_Images/

2x_Images/

Specify a transformation percentage for assets in a sub-folder by adding the percentage before the folder name (include a space between the % and the folder name):

200% 2x_Images/ will scale all assets to 200% (2x) and place them in the 2x_assets folder.

Add a file name suffix to assets by adding it after the folder name (include a space between folder name and suffix):

200% 2x_Images/ @2x will transform all assets to 200% (2x), add the suffix @2x at the end of the file name (before the extension), and place the output in the 2x_assets folder.

Using this naming convention, Generator would generate an asset from layer called blue_btn.png, scale it to 200%, name it [email protected], and place it in the 2x_assets.

Combined Default layer name syntax, which will allow you to automatically scale and copy assets to appropriate folders, is as follows:

default 200% 2x_Images/ @2x, 1x_Images/

Proceed to: Generator Errors - What not to do

If unsupported syntax is used in a layer name, it will stop the asset generation process and the errors.txt document will be created describing the errors.

Proceed to: Layer Naming Conventions

With the exception of jpeg format compression, do not add any characters after file format extension.

Do not mix relative and absolute sizes.

Do not create two or more layers with the same name and file format.

Do not add spaces between absolute size dimensions and its units.

Do not add a space character between the file format extension and its compression percentage in the suffix.