• Introduction & Installing
  • Creating a New Document
  • The Interface
  • Document Settings
  • Device Flavors & Views
  • Assets & Fonts
  • Triggers
  • Pages
  • Color Picker
  • Preview
  • Export
  • Type Tool
  • Images
  • Hotspot
  • Scrollable Boxes
  • Overlay
  • Video
  • Audio
  • Anchors
  • Widgets
  • Custom Widgets
  • Publishing
  • Preference Panel
  • Advanced Tutorials
Origami Design

Introduction & Installing

Origami Engine is a powerful, flexible tool that lets you realize your wildest interactive ideas. You can use it for template based documents but it is geared toward high touch interactions and exploring the possibilities.

Every page starts with a blank canvas. The size of your canvas is the default of your chosen device and orientation. You navigate within one page by going up and down.

Interactivity in Origami Engine is created by Triggers (On Screen Enter, On Tap etc). Triggers can be attached to various Objects (Hotspot, Image, Video, Audio etc). By putting a trigger on an object you fire off an Event (On Tap → Show Image_1), which alters the state of an Object or the App itself. Understanding the various Objects and their trigger possibilities is key to creating good interactive design in Origami Design, and we suggest you read up on triggers and objects.

  • Interactivity in Origami Engine
  • Is created by On Screen Enter, On Tap etc
  • Triggers can be attached to various
  • Hotspot, Image, Video, Audio etc
  • By putting a trigger on an object

Requirements

If you do not have Origami Design already please download it from here. Origami Design requires:

  • Apple Macintosh computer
  • Minimum of 4 GB of memory
  • Minimum 10GB of free disk space
  • OS X 10.9 or newer

What is Origami Design?

Origami Design is a desktop application for Mac that gives you all the tools needed to design interactive apps and publications for the iPad, iPhone, Android Phone and Android Tablet. Origami Design is built for designers to focus on design and it offers access to advanced interactive features without having to write a single line of code.

What Origami Design is not

Origami Design is not a set of designs, it does not magically build or create great designs or layouts. It does not export code in Objective C or Java. It does not automatically translate to a different language or convert your design from tablet format to phone format. It’s a suite of tools not a template.

Assumptions

Users of Origami Design are expected to have a full working knowledge of both Macintosh computers and general design software metaphors. We use standardized technical design language such as Kerning and Leading. Additionally we assume a basic of knowledge about mobile and interactive design such as triggers, gestures and hotspots. In the documentation, here we will provide additional details and descriptions about these concepts as they pertain to their application in Origami Design.

Installation

Once you have downloaded Origami Design, please place it in your applications folder on your Mac (/Applications). When you open Origami Design, you will be required to login using an Origami ID. If you do’t have one you can choose a plan and register here. Once you login, you’ll be asked to connect to an organization. In most cases, you will only have one to choose from. But as a user, you can be assigned to multiple organizations. To switch between organizations, go to the menu bar Origami Design›Account to change organizations or logout of a user.

Free Version Limitations

If you choose to try out the free version, there are two limitations. First Origami Design will only run for 15 minutes at a time. Once the 15 minutes are up, then it will quit and not allow you to save your work (saving prior to the 15 minute limit works). Second, anything you export with the free version will have watermark on it when viewed in Origami View.

Creating a New Document

After opening Origami Design, you can either open an existing document or create a new one. To create a new document go to File > New or press ⌘N.

A new document dialog will open with options for you to choose. The options are as follows:

  • Presets – Here you can choose from presets you define. When you open Origami Design for the first time, there will be no presets.
  • Target Device – This is where you set up the devices you want to design this document for. For each device you have a new view to add a layout for that specific device. iPhone and Android Phone share the same layout size and aspect ratio but iPad and Android Tablet are unique. Once you have set the target device, you will not be able to change it for that document.
    • iPad – Aspect Ratio 4:3 and pixel size 1024 x 768
    • iPhone – Aspect Ratio 16:9 and pixel size 960 x 540
    • Android Tablet – Aspect Ratio 16:10 and pixel size 1280 x 800
    • Android Phone – Aspect Ratio 16:9 and pixel size 960 x 540
  • Default Language – Here you can set the base language for your document. After the document is created, you can add and remove languages at your discretion. Each language is also a unique view. Origami Engine supports 53 languages.
  • Orientation – You can choose the orientation of the document here. Either Landscape, Portrait or Both. Each orientation is a unique view as well.

Each of the options you choose in the New Document Dialog will create an additional view you will need to design for. While is it very easy to design one and then copy and paste to another view, you will need to make adjustments to layout, typography and other interactive elements. There is no way for our system to be able to auto redesign your original design into different sizes, languages and orientations. Origami Engine is a great design tool, but does not do magic. For this reason we recommend that you keep the views to a minimum.

Origami Xchange New Document
OD_support_new_doc
The new OED (Origami Engine Document) dialog has several options. You must set the devices you want to design for, the orientation(s) of the document and the default language. Only the default language can be changed later. When you export, you can choose what to export from these different views. But when you publish, you must publish all of them.

File Formats

Origami Design works with 2 formats.

OED – Origami Engine Design file is the native file for building with Origami Design. You open OED with Origami Design and you can edit your project.

OEP – Origami Engine Package is a compiled and encrypted file for distributing interactive app, read by Origami View. You cannot open an OEP with Origami Design. OEP is exported by Origami Design, each device has it’s own OEP but the orientation views and languages are all included in a single OEP.

Saving your OED

Once you create a new document you then need to save the document. All of the assets you use in Origami Design will be added to the OED file including images, videos, audio, html and fonts.

 

icon48 OED File Icon

icon48 OEP File Icon

The Interface

The user interface for Origami Design is very simple. There is a set of panels (you can choose to put them on the right or left) with all of the controls for the document and objects in it. The top element in the Inspector.

View controls will let you change between languages, orientations and devices. You can also preview your document here.
You can add and customize the toolbar with tool you use regularly.
These are tools you have access to. The selection tool and the type tool.
Object transform options. When a object is selected you can arrange and move them here.
The canvas is where you design. The width will be specified by the device type and the height will be set by you with a device minimum.
The document overview panel shows all of the pages and their options. You can create, delete, lock and duplicate pages here as well.
This is the inspector panel, it is always visible and will change to show the selected objects settings and options.
The info bar gives you basic details about each objet. Size, position, name and interactivity options.
This is the tabbed area with four different panels. Layers, Assets, Widgets and Data.
For most objects there is a general settings and a triggers pane. In the triggers pain you can add trigger events to the object.
Layers tab lets you edit each layer, turn visibility on and off and to see the overall structure of your page. You can search and filter the layers as well.
In the control for the page you can set the zoom rate add a page and show/hide the documents panel.
Each page can be moved around, duplicated, locked and deleted.
The audio object is one of two objects that have no visual representation. So they can be placed anywhere on the stage.
The transparent pink areas are hotspots. They define a screen area that can be effected interactively.
These are the interactive options for each object. You can set the object to be interactive, non-interactive or receive no touches.
Add an Object button lets you put any of the objects on the canvas. Image, Audio, Video, Framation, Scrollable, Overlay, Anchor and Web Object.
There are widgets. They are displayed as green boxes. They add a high degree complex interactivity to a page.
This defines the Action that fires the trigger. For example, On Tap
This shows the hotspot you are adding triggers to.
This is for setting connected to the trigger panel.
Once you have defined a target then depending on the object type, you will get different triggers for that type of Object. IN this case a framation is being targeted.
Here you add a new trigger event.
Here you can add a target and action to a trigger event. You can have as many targets and actions on a single event.
This is for the options. Delay and Fade in most cases.
This is where you set the target. All triggers must be pointing at a function or a target, which is an object.
Triggers are at the core of the functionality in Origami Engine. They are made up of 3 components.
Event – An event is what causes the trigger to fire. It can be many different things from a tap or gesture to a video time or a vertical position on screen.
Target – The target is what you want to effect. It can be an object or a function.
Action – Once you have chosen the Target then you get a set of actions you can apply to that object or function. Some objects have very few actions like text (Show/Hide/Toggle) and some Targets have many actions like framation, which you see here on the left.

Toolbar

The toolbar can be customized to your specific needs. Simply right click on the toolbar anywhere to get access to the customization menu.

Info Bar

This provides you with details about the selected element. Such as the Name, Size, Position and kind of interactivity.

When you open the contents of an overlay, widget or scrollable then a new tab is opened. You can leave the tabs open and go between them to see changes.
This is the name of the object. It is automatically generated but if you have a page with lots of objects it might be a good idea to name them. You cannot have 2 objects with the same name.
Most object can be part of a view group. For more details see the View Group Section.
This is the width of the object in pixels.
This links or unlinks the aspect ratio of an object. Depending on the object some are linked by default like an image and others are not like a text box.
This is the height of the object in pixels.
This is the x position of an object on the canvas.
This is the y position of an object on the canvas.
This is the background color of a specific object. Most objects can have custom background colors.
This is to set the transparency of an object.
This is to set the rotation of an object in degrees.
Interactive mean that an object will receive touches. When turned off that object is be static.
No touch means that an object invisible to touches, so any object under it will receive the touches.

Document Settings

Once you create a document, you can adjust some of the document settings as you build your OED. You can also add document level triggers in document settings.

This is the name of the document. This will appear as the document name in home screen when you are previewing in Origami View. When you publish to an App or Channel you can change this name in Origami Xchange.
This is the description of the document. Found in the document details and is searchable via the bookshelf.
You can add and remove languages here. An OED must have 1 language, but you can change the languages in the document whenever you want to.
You can add a custom thumbnail to the document so it shows the graphic you want it to. This can be a PNG with transparency.
We have a auto numbering system in Origami Engine. if this is on then the user will see a page number for 5 seconds at the bottom of the screen and the position horizontally shows your progress through the document.
To access the document settings just click outside of any page in the page overview panel.

Device Flavors & Views

When building a document in Origami Design, you will be working with pages and views of that page. Each device type and orientation will also have it’s own view. Because each of these views is a new layout in can be a large task to build and manage these views, especially if you design an App for all iOS and Android devices in multiple languages.

We have all these different views because each device will have a different physical size and reading experience. For example, text will be presented very differently on a iPhone compared to an iPad and text will be much longer in German than in English.

One of the best ways to manage all of these views is to design for a single view and get the content and functionality finished. Then copy and paste from that view to another. When you copy and paste all of the triggers, associations and functionality will be preserved so all you will need to do is to adjust the position of elements and type sizes (or change out the text if a different language).

You switch between languages in the top left part of the toolbar. There you have controls for the Language, Device and Orientation.

One note, Android Phone and iPhone share the same device size, so you can copy and paste between them without any changes.

Assets & Fonts

Origami Engine supports the following Asset files types.

  • PNG Image (with or without transparency)
  • JPEG Image
  • H264 Video
  • MP3 Audio
  • OTF Fonts
  • TTF Fonts

You add assets by Right Click > Import assets when over the asset panel. Or File > Import Assets in the file menu. Once an asset is imported into an EOD the files is copied into the document. So if you zip up and send the document to another users, all of the assets will be there.

Once the assets are in the document, you can drag them from the assets panel onto the canvas. If an asset is in the assets panel but was never used on the stage, then it will not be exported to the final OEP.

If you choose to add a folder with html into the OED then the whole HTML folder will be copied into the OED. To edit the HTML is that folder, double click on the Web Object and Origami Design will open the folder in the finder and you can edit it directly there (edit, add or replace files).

Origami Design Assets Panel
Origami Design Assets Panel
In the assets panel you can directly import your assets or you can filter the view of your assets to see what you need. You can also search through your assets.

If an asset is somehow removed or corrupted then you will see a dead link icon next to the asset. You can right click on it and choose Relink and then find the document again and it will be reimported.

Also if your OED is getting very large because of may unused assets you can purge all unused assets by clicking on the assets options icon. But once you remove unused you will not be able to undo anything before that action.

Origami Design Assets Panel
Origami Design Assets Panel

Triggers

Triggers are the key element to the power of Origami Engine. Understanding Triggers and how you can harness them will give you nearly  unlimited design options. The basic principle behind Triggers are the 3 main components.

Origami Design Triggers

Trigger Model

Event Target/Function Action
On Tap

On Tap Start

On Tap End

On Screen Enter

On Screen Exit

On Frame

On Time

On Anchor

 xxxxxxxxxxxxxxx

  Any object on the current page or any page in the document.

Functions that access specific features or elements in the system.

  Actions depend on the object. For example an image object will have the following.
– Show
– Hide
– Toggle
– Next Image
– Previous Image
– Image 1
– Image 2
– Random Image

Events

An event is anything that will cause a trigger to fire. In the case of a hotspot, it will be a tap gesture or if a hotspot comes on screen or goes off screen. For other objects, the event is different. In the case of a video, you can set a trigger event to a time on the video. So when a video plays and gets to a defined time, say 10 seconds then that is a trigger event and will cause something to happen. With this model, almost everything can have a trigger event and everything can be effected by a trigger event.

We will discuss specific triggers and Actions in each of the object sections.

Target

Targets are the object that you want to make some changes to. Each object will have a different set of Actions connected to it. So you need to define the target before you do anything else.

Action

Actions are the different ways you can change an object once you have targeted it. Each object will have a different set of actions. In most cases you can do the following to an object show, hide or toggle visibility after these basics there are special actions. We cover a specific object’s action in the respective object’s sections.

Function

Functions are actions that are not really associated with a object; Things like send an email or open a webpage. Please see the functions sections for details about each function.

Scrubber

These actions will give you control over the Scrubber widget. Open and close and toggling the visibility of the scrubber. Typically this si used as a button inside the toolbar, but you can access it anywhere.

Toolbar

These are the same controls as the scrubber, just for the Toolbar Widget.

Social

This will show or hide a menu for the user to share the page or app in social media. You can share to Facebook, Twitter or Google+.

Favorites

Similar to the Social menu, this is a menu that lets the user favorite a page so they can return to it later. This is App wide, not IAP specific.

Search

This will open the search window so the user can search. If you are in an IAP then the search will only work inside of that specific IAP. But if search is accessed from the App GUI then it will search app IAPs.

Open URL

This will open a custom browser window inside you App or IAP so the user can view a webpage without leaving your App.

Open URL in Safari

This does two thing. If you give it a standard web URL it will open safari and show the web content. When you do that there is a small by to my App link at the top corner of the screen. Additionally this is where you define Deep Links to other App’s on the device. For details about what deep links are and how to use them, see this article.

Send e-mail

Send an email.

Bookshelf

This only works with bookshelf Apps, it will send you back out to the App GUI interface.

Page Cover

This will take you to the front, start or cover page. Typically this is the first page in the document.

Page Last

This takes you to the last page in the document.

Page Next

This goes to the next page after the one you are on.

Page Previous

This goes to the pervious page after the one you are on. Not as in history but as in page number.

Reset

This will reset your document completely.

Restore Purchases

This is typically used in a bookshelf or App GUI interface. If you have perviously purchased IAP then click ing on this will confirm all purchases with Apple and then show a download link for all purchased IAPs. IT will also reinstate page purchased subscriptions.

Subscription Info

This shows a dialog box of all available subscriptions.

Send OSC Messages

This will send an OSC message.

Pages

Origami Engine is organized around pages. The page width and minimum height is defined by the device view. For example the iPad is 1024 x 768 and Android Phone is 960 x 512 pixels. You can have up to 300 pages in your OED file.

You can change the height of a page but not the width. A page can be up to 20,000 pixels tall. If you need to make a page wider than the default please see scrollable boxes for more details.

Page Inspector – General

Origami Design Page Inspector
Title – This is the Title of the page. It can be seen in the scrubber and is searchable.
Subtitle – This is the description of the page. It can be seen in the scrubber and is searchable.
Tags – These help in search results.
Categories – Used only for special Apps.
Page Ref – This is an automatically generated internal reference na,e. you can change it to anything you want.
Page State – This tells the app how the page should behave when you return to it. “Don’t save” means that every time you come back to the page it will be like it was the first time you saw it. “Save until shutdown” means that the page will keep it’s state until you close the IAP or the App. And Save means that the state will always be saves.
Full Screen – This is a special interface for use with GUI that needs to move both up and down and right and left. It locks the page turn so you don’t swipe from one page to another.
Navigation – Page swipe turns on the ability to swipe between pages horizontally. Next to it, you have the page turn effect you want to use when moving between pages that are not next to one another. The default shows the show all the pages in between. You also have single page which regardless of the distance between two pages it will never show the interim pages. Finally you have none, it does not animate right and left but simply shows the page you are going to.

Page Inspector – Triggers

Origami Design Page Triggers
Page level triggers are special because they have unique Events to fire a trigger. Such as Shake, Page Load or Page Unload.

Page Specific Events

On Page Load – When a page loads then this will fire a trigger. Commonly used when you want an animation or series of actions to start when a user goes to a page.

On Page Unload – This the opposite of On Page Load so when you leave a page you want these things to happen. This is typically used to reset elements on a page you want to restart when a user comes back to the page.

On Shake – This will fire the trigger when the device is shaken enough to indicate the OS gesture “shake”. Mainly useful for fun things.

Page Actions

Open the Page – This is to send the user to that specified page.

Show the Page – If a page is hidden then you make it visible in the system.

Hide the Page – This effectively removes the page from the system. It will still export with the OEP and be editable in Origami Design but it will not be visible or searchable in Origami View.

Page Inspector – Details

Origami Design Page Details
Page No – We have an auto page numbering system in Origami Engine. These are to customize the look of it. You can define the box color, the text color and if you want to force an arrow to point down you can check that box.
Thumbnail – This lets you set a custom thumbnail for a page.

Hiding & Showing Pages

You have the ability to hide or show a page in Origami Engine. If you hide a page then it’s in the OEP but it’s not visible to the end user. You can still edit it in Origami Design.

This can be useful if you want to hide content until a user does something to access it. Or if you want to have paged content not visible in the scrubber.

Page Length

Pages can be up to 20,000 pixels long.

Color Picker

The color picker supports RGB, HEX and HSC color formats. Origami Design comes with a set of preloaded color palettes. You can access them from the options menu. You can save color palettes out as an OES file (Origami Engine Swatch).

We display the color swatches in two ways, as a grid and as a list with names. To add a color to your color palette you just drag it from the main color area to the swatch area.

You can choose colors from a color field or the Apple default color wheel and from a set of sliders connected to the color model you have chosen.

 

icon48 OES File Icon

Origami Design Color Palette
The color palette is used for object background colors and for type colors among other things.
Origami Design Color Palette
The color picker supports RGB, HEX and HSB color formats
You can Load, save and Access present swatches from the options menu.

Preview

Preview is a default button in the toolbar that will let you see your work right away. Preview will upload the page you are currently working on to your device of choice.

Your device will need to have Origami View installed on it. Then either connect your device to the WiFi network that Origami Design is on, or connect directly with a USB cable (iOS Device only). Origami Design will show you the available devices in the preview dropdown list. Choose one and the page will go immediately to the device.

Origami Design Export

Export

You can export a OEP from Origami Design by going to File > Export or ⌘E. Export dialog is a very powerful tool. You can not only export the document as an OEP but you can export specific pages, ranges, devices, languages and orientations. So you want to export pages 10-16 for iPad in only Russian, you can do it with the export dialog.

You can export an OEP file or export directly to a device with Origami View.

In this dropdown you will choose the devices you want to export for. This will only work if exporting to a file.
Here you can choose to limit the orientation view you want to export.
With this dropdown you select the languages you want to export.
Here you can set or limit the pages that will be exported. You can choose a range 4-8 or you can choose single pages 3,5,7,9,11 ad a combination of the two.
If you are exporting to a file, then you will need to specify where you want the files to be saved.
Here you select either none to save as a file, or choose a device you want to export to.
Once you have specified what and how you want to export click on the export button and it will begin.
Once the export starts then you will see both a progress bar and a log of what it happening. If there are errors or triggers not set they will appear here. Each line in this log begins with language and page number so it's easy to track down errors.

Export Errors

There are many different types of errors that can occur when exporting. Assets can be missing, WiFi might error out or you forget something in one of the views. Understanding these errors is important to be able to know how to fix it.

There are two types of errors. Warnings and Fatal Errors, Warning are typically triggers with no target or dead triggers. These types of errors will not stop the export. But its good to have a record of them to be able to go back and fix them.

In the log you will see page and language, this will help you track down an  error more quickly.

Origami Design Export Warnings

This error

[pt_PT, 02] This says that the warning is on page 2 in the Portuguese language view.

WARNING: This says it’s not a fatal error.

Skipping touch trigger without any triggers. This is the problem.

@Hotspot 13 This is the name of the object giving the error.

The rest of the error types are fatal errors and will stop the export process when they occur. These types of errors range from missing content to your device falling asleep so Origami Design can’t talk to it. Here is an example.

Origami Design Export Errors

This error has the same syntax and it says

Image not found Then the path to where Origami Design expects the file to be.

Type Tool

The type tool is the most powerful tool in Origami Engine. It gives you complete control over all typographic components in any language.

Type Inspector – Type

Type Inspector
Font Family – Here you select from the fonts available in your system and in Origami Design.
Font Weight – These are the weights the select font family are available in. For example Regular, Bold and Italic.
od2_ui_icon_18x18_font_size@2x
Font Height – This is the height of the font in pixels. Historically it has been called the point size of the font.
od2_ui_icon_18x18_leading@2x
Leading – This is the distance between two line of text in pixels. It is also known as line height or line spacing.
od2_ui_icon_18x18_tracking@2x
Letter Spacing – This is the gap between each letter in the selected text. When set to 0 the font uses it’s default letter spacing which is unique for each letter pair. When you adjust it in .01 increments then you are scaling the default distances.
Font Color – This specifies the color of the selected font. It uses the standard color picker in Origami Design.
Render Options – Here you can adjust the use of sub pixel rendering of the text. By default there will be full sub pixel rendering but in some rare situations you might want to adjust this. Also if you want to use highly pixelated text then you would turn it off. Smoothing by default is off, it behaves similar to adding a semi-bolding to the font. It can be used to make extremely thin type slightly more readable.
od2_ui_icon_19x14_text_a_left@2x
Align Left – Sets the selected text so it’s Align left ragged right.
od2_ui_icon_19x14_text_a_center@2x
Align Center – Sets the selected text so it’s ragged right and left.
od2_ui_icon_19x14_text_a_right@2x
Align Right – Sets the selected text so it’s aligned right with ragged left.
od2_ui_icon_19x14_text_j_left@2x
Justified Left – Sets the selected text so it’s letter spacing is adjusted enough to make the text align to both left and right margins. But the last line in a paragraph will align to the left only.
od2_ui_icon_19x14_text_j_center@2x
Justified Center – Sets the selected text so it’s letter spacing is adjusted enough to make the text align to both left and right margins. But the last line in a paragraph will align to the center only.
od2_ui_icon_19x14_text_j_right@2x
Justified Right – Sets the selected text so it’s letter spacing is adjusted enough to make the text align to both left and right margins. But the last line in a paragraph will align to the right only.
od2_ui_icon_19x14_text_j_all@2x
Justified Full – Sets the selected text so it’s letter spacing is adjusted enough to make the text align to both left and right margins. This includes the last line in a paragraph too.
od2_ui_icon_19x14_text_a_top@2x
Vertical Align Top – Sets the text so it is at the top edge of the text box.
od2_ui_icon_19x14_text_a_middle@2x
Vertical Align Center – Sets the text so it’s at the center of the text box.
od2_ui_icon_19x14_text_a_bottom@2x
Vertical Align Bottom – Sets the text so it’s at the bottom of the text box.
Hanging Punctuation – This is a way of typesetting punctuation marks and bullet points, most commonly quotation marks and hyphens outside the main text block, so that they do not disrupt the ‘flow’ of a body of text or ‘break’ the margin of alignment. See details here.
od2_ui_icon_18x18_space_above@2x
Space Before Paragraph – Adds space in pixels before a paragraph block of text.
od2_ui_icon_18x18_space_below@2x
Space After Paragraph – Adds space in pixels after a paragraph block of text.
od2_ui_icon_18x18_indent@2x
Paragraph Indent – This adjusts the left margin all lines of selected paragraph text except for the first line of text.
od2_ui_icon_18x18_indent_first@2x
First Line Indent – This adjusts the left margin of the first line of text in a paragraph.
od2_ui_icon_18x18_font_baseline@2x
Baseline Shift – You can change the selected text’s baseline vertical position. Both positive and negative position in .1 pixel increments.
od2_ui_icon_18x18_t_box_all@2x
Padding Full – Adds space around the selected text objects in pixels.
od2_ui_icon_18x18_t_box_top@2x
Padding Top – Adds space to the top of a selected text object.
od2_ui_icon_18x18_t_box_bottom@2x
Padding Bottom – Adds space to the bottom of a select text object.
od2_ui_icon_18x18_t_box_left@2x
Padding Left – Adds space to the left side of a selected text object.
od2_ui_icon_18x18_t_box_right@2x
Padding Right – Adds space to the right side of a selected text object.
Hyphenation – The breaking of a word across 2 lines of text in a text object. It place a hyphenation – at the breakpoint of the first part of the word.
od2_ui_icon_24x24_caps@2x
All Caps – Converts the selected text to all capital letters.
All Lowercase – Converts the selected text to all lower case letters.
od2_ui_icon_24x24_super@2x
Superscript – This is a number, figure, symbol, or indicator that is smaller than their normal line of type and is set slightly above it. Typically used to denote ‘power of’, square or cubed.
od2_ui_icon_24x24_sub@2x
Subscript – This is a number, figure, symbol, or indicator that is smaller than their normal line of type and is set slightly below it. Typically used with chemical shorthand.
od2_ui_icon_24x24_underline@2x
Underline – Adds an underline to selected text.
od2_ui_icon_24x24_strike@2x
Strike Through – Adds a strike-thru to the selected text.
Selectable -Selecting this makes the text selectable in the final app.  This is off be default.

Type Inspector – Columns

Origami Design Type Inspector
Columns – Set the number of columns here.
Equal Widths – By default columns are equal, but if you want a unique width to each column then turn this off.
Width – You set the width here by double clicking the number.
Gutter – You set the gutter between the columns here. Double click to edit it.

Type Inspector – Options

Origami Design Type Inspector
Horizontal – This is for horizontally set languages such as English, French, Arabic and Russian.
Vertical – This is for languages with vertical layout options such as Japanese, Chinese and Korean.

Type Inspector – Text Render Options

Origami Design Type Inspector
Subpixel – This sets the basic sub pixel render option on and off. Using this rendering technology pixels are spilt based on perceived color in order to make type look crisper on screen.
Quantize – This adds an additional layer of sub pixel positioning.
Antialias – This helps the letter render more smoothly
Smooth – This adds an additional layer of outline smoothing which in practical terms makes the text slightly bolder. This is typically used to make very thin type more readable in small sizes.

Type Inspector – Hyphenation

Origami Design Type Inspector
We offer hyphenation in specific languages and also auto detect hyphenation. Hyphenation is off by default.

Type Inspector – JCK Vertical Text

Origami Design Type Inspector 縦書き
When you switch the type orientation from horizontal to vertical the type controls change to handle the orientation. They are the same controls just with the direction turned to handle vertical type.

Examples of a Type Object

This is the bounding box for a text object.
This is a multi column text object.
The red dot in the bottom right corner of the text box shows that some of the text is hidden in overflow.
This is a super script numeral.
This is a subscript numeral.
This is the strike-through treatment for text.
This is the underline treatment in text.
This is the uppercase transform in the text object.
This is the linking symbol to show how the text box links flow.

Type Sizes on Different Devices

One of the main reasons we have views for each device type is that because the screen size is physically different you will need to adjust the typography to match the size.

For example an iPad 2 is 1024×768 and an iPhone 6 is 640×1136. Because the iPhone screen is much smaller physically the same 20px type will appear much smaller on the iPhone 6 than on the iPad 2.

Hanging Punctuation.

Hanging punctuation is a typographic mechanism that has fallen out of favor in the age of the web. It is called “Optical Margin Adjustment” in Adobe InDesign.

Basically it pushes the punctuation marks outside the visual bounding box of a type galley (object) in order to provide a cleaner rectangular shape when using justified type.

Origami Design Hanging Punctuation ぶら下がり禁則処理 burasagari kinsoku shori

Images

The image object is one of the core objects in Origami Engine. The image object has a few special characteristics unlike other image objects. The first is that a single image object can contain multiple images (the same size) in a single image object. A single image object can hold many image in it (up to 20)

You can use PNG or JPEG images in the image object with or without transparency. We recommend that you use images below 2048×2048 pixels this will ensure that the system can handle them well. There is a limit of images up to 4096×4096 pixels. This does not include images you scale up.

You need to be very conscious of the assets and  images you use for your Android app. Android devices have significantly less usable memory than iOS devices (even the most high end devices) and they handle images very differently. They do not support native image formats but convert all images to a bitmap file. So even if your PNG file save it’s 200k when rendered on Android it can be many megabytes in size.

Image Inspector

If your image object has multiple images in it then you can check this and one of the image will randomly appear each time you go to the page.
This is the select image and with the eye icon it shows the image that be appear by default, or start image.
If you want to you can customize how the image exported, it's format and the compression levels. We strongly recommend to leave the defaults until you are running into a specific issue with an image.

Image Triggers

Show – This will make the image object visible.

Hide – This will hide the image object.

Toggle – This will make the image object the opposite of what it’s current state is. For example if it’s visible then it will make it hidden.

Next Image – If your image object has multiple images in it then it will show the next image in the list.

Previous Image – If your image object has multiple images in it then it will show the previous image. If the there are 5 images and you trigger image 1 then it will show image 5.

Image Number – You can also specify an image number to make visible.

Random Image – With this you will show a random image from inside the image object.

Hotspot

This is the core of the interaction in Origami Engine. A HotSpot is an object you add to the canvas. It defines an area that can be touched or effected by the device screen. Hotspots are the most direct way to cause an interaction. You use them for creating buttons and any other type of trigger that needs user input.

The HotSpot is represented by a transparent pink rectangle in Origami Design. On the device the hotspot has no visual form, it’s a invisible area that receives touches from the user.

A HotSpot can work in two ways. First it defines an area where the user touches, like a button. Second a HotSpot can define a space that will fire a trigger when it enters or exits the screen. So if you want an animation to start the a user scroll down to the right area, you can set a HotSpot to start it.

Like all objects a hotspot can have multiple triggers on it that do different things.

This is where you select the event that will cause the trigger to be fired. In the case of a hotspot you have: On Tap, On Tap Start, On Tap End, On Screen Enter, and On Screen Exit.
Inspector panel options menu.
Random allows an event to fire only a single action from the list randomly.
You also have standard options for most actions. Such as delay.
In some cases a action will have options. In this case the action to goto a specific anchor, so then the option is which anchor to go to.
This is the action the trigger will have.
Here you choose the object you want to affect with the trigger.
When you rollover a action in the trigger list, you can delete one by clicking on the X.
This is the shorthand for a trigger showing the target, action and options.
Click here to create a new Trigger with a new Event.

Hotspot Actions

While you can effect a hotspot is in not typically something you would do.

Show – Make hotspot visible. You care not really making it “visible” per say but you can make it active on the screen so then it’s clickable.

Hide – Make a hotspot area hidden so then it cannot receive touches.

Toggle – Change the state from one to the other.

Scrollable Boxes

Scrollable boxes can be used more ways than can be described in this manual. There is no way to express the value of a scalable box. From simple scrolling to pinch and zoom to parallaxing.

Essentially a scrollable box has two parts to it. The visible area or what you would call the mask. Then you have the inner canvas which is typically larger that the visible area. The inner caves behaves just like the page, you can have anything you want in it. You can nest scrollable as deep as you want.

In this section will cover the basic of the controls. You can find more detailed explanations in posts about different ways to use scalable boxes and their specific functions.

Scrollable Inspector Panel
Direction – The direction set the basic behavior for the scrollable. By default it’s set to both and you can set it to Horizontal or Vertical. In most normal cases it will be horizontal or vertical.
Speed – This defines the speed relationship between the users finger dragging and the speed of the scrollable. 1 is a 1 to 1 ratio meaning it will match your figure exactly. .5 means that it will move at half the speed of your dragging and 2 means that the scrollable will move twice as fast as your finger.
Scroll Group – This links the moment of one scrollable to another.
Touch – This defines how the user can interact with the scrollable. By default it’s set to tracking, this means that when a user touches the scrollable it moves. You can also set it to none, where a touch or drag will not effect the scrollable. Finally you have Global where the whole screen will effect the scrollable regardless of the size of the scrollable.
Motion – This lets to add other inputs for controlling the scrollable, namely the gyroscope and accelerometer. In this way the motion of the device itself will cause the scrollable to move.
Bounce – This lets you turn on and off the typical Apple bounce when getting to the end of a scrollable. For patent reasons this is only available on iOS.
Wrap – This lets you make an infinite scroll. When the scrollable gets to the end, it wraps itself and start over from the end.
Scrollbar – This shows or hides a small scroll bar.
Invert – This set the scrollable to invert the direction you are scrolling.
Scroll Area – A scrollable when tracking is on will be controlled by the whole area of the scrollable object on the screen. If you want to reduce this area, then you can specify a width, height and X and Y position to reduce the touchable area
Offset – Here you can change the starting point of the scrollable. This is typically used for parallaxing and scrollables that do not have tracking on.
Zoom – When you change these settings 1, 1, 1 to anything else this will activate pinch and zoom. Min is the minimum scale the scrollable canvas can go to win pinching. Max is the maximum zoomed scale and initial is the scale you want it to start at. For best results initial should be set to 1.

How a Scrollable Works

Scroll Groups

Scroll groups are an way way to link scrollable boxes to one and other. So when one scrolls the other scrolls as well. This is the easies and most common way to create a parlaying effect.

To create a scroll group you select the scroll group dropdown in the scrollable inspector. Then choose New Scroll Group. It will ask you to name the group. Scroll Groups like view groups are unique to a page, so make sure that all your scroll groups have unique names on a single page. But you can have as many scroll groups as you want on a single page.

Once you create the Scroll Group on the scrollable a color icon will show you which scrollable objects in the layer panel are in the same scroll group.

When scroll groups are moving they must meet up at the start of the scroll and the end of the scroll. So if you have a very short and a very long scrollable in the same scroll group then the short one will need to mov much slower to get from beginning to end while the long one will need to move very fast to cover more distance in order to real the end at the same time. Try this out and test it a little to get the hang of how it works.

Origami Design Layers Scrollgroups
Scroll Groups and View Groups have the same type of color markers but scroll groups are always cool colors and view groups are always war colors.

Gyroscope and Accelerometer Controls

In the Scrollable controls you have Motion options this lets you connect the Gyroscope or Accelerometer to drive the scrolling. Simple select the driver and it will move the scrollable. But if you have tracking still turned on then a user can still touch the scrollable and make it move.

If you only want it to move with the Gyroscope or Accelerometer then turn tracking off.

Overlay

An overlay is very simple, it’s a collection of other objects. Like a group or a page within a page. It has not inherent functionality at all. You use Overlays to be able to control large numbers of objects at once. Kind of like a view. In many cases an Overlay will be used as a view or state in a modal design scenario.

The inspector will only tell you how many objects are inside of it. You can nest overlays as deep as you want to.

Video

Video objects will add a video to the stage. A single video object can handle a single video. Videos can only be played forward. If you turn on scrubber, you will be able to go back to a specific time but it will not scrub backward.

A video can be no bigger than 1920×1440 pixels (1440p), anything bigger and iOS will not play it. This is a OS limitation. But you can scale a video as large as you want to. We have tested up to 4500 pixels on one side.

Origami Design Video Inspector
Delivery – Here you can choose to embed the video or deliver the video via Vimeo Pro account. Currently streaming specifications have changes on Vimeo and we are updating the streaming so it is temporarily our of order.
H264 Video – This is the video format that will run on iOS and Android. The format is very specific and we provide details on how to encode it below.
H265 Video – If you add a H265 video is will only be delivered to Android at this time.
Auto Play – This will cause the video to play when it enters the screen. It will not play the video if the video is off screen.
Loop – This will make the video keep playing. Once it gets to the end it will start over automatically.
Remember State – This will keep the state of the video when you leave the page.
Exclusive – This makes it so that when this video plays all other video on the page will be automatically stopped.
Tap Play/Pause – When the video is visible then tapping on it will play it and tapping again will pause it.
Scrubber – This shows a default OS scrubber at the bottom of the video.
Zoom Button – This adds a zoom button in the top right corner of the video. If clicked on the video will go full screen.
Pinch Zoom – IF you select this then when you pinch the video it will grow to full screen size. Pinching back down will bring the video back to it’s default size.

Exporting your Videos

iOS only natively support one very specific flavor of h264 video. It can be very frustrating and confusing when you import a h264 video but it does not play on the device and it does not show in Origami Design. Here we have a few tips on how to export or encode for iOS h264 video.

There are no specific details on the why h264 works or does not work. We can give you our experience and advise on what works for us and some of our customers.

The raw video can be anything you want. We have seen that Apple Compressor works on some settings but the overall compression file size is not very small. Additionally we have ha success with Sorensen Squeeze, but not 100% of the time. The video encoder that we like best, that gives us the best file size to quality balance is Handbrake, a open source software.  It’s not the prettiest but it’s simple and goes a fantastic job every time. Adobe Encode has been our favorite encoding tool but from our experience it does not work very well for this specific type of encoding.

With hardback you only need to make sure that the file is exported as MP4, everything else can be adjusted. We recommend VBR, 2 pass, and a bit rate of 2000 to 5000 depending on the video.

Video Triggers

Setting a trigger on a video object is just like all other triggers. Just the event that starts a trigger is defined by the video time. The time format is H:M:S.

#icon-font-5903685068975 i { background-color:#3c99ea; color:#ffffff; border-color:; } #icon-font-5903685068975 i:hover { background-color:; color:#000000; border-color:; }

iOS has been tested up to 16 videos running simultaneously with transparency. Videos are handled in a very robust manner. Only in the most extreme cases will you run into memory crashes because the videos are too big. Any length of video will work as well. Tested up to 2.5 hours of video.

#icon-font-590368506928f i { background-color:#70ce35; color:#ffffff; border-color:; } #icon-font-590368506928f i:hover { background-color:; color:#000000; border-color:; }

Android has some challenges with video. We have not been able to consistently handle more than 4 videos running simultaneously, this number will very by device, but as a rule of thumb try not to exceed 4 video even on high end Android devices. Also you will need to carefully test your documents on android if your videos are longer than 6 minutes.

Origami Design Video Triggers
Show – Sets the visibility of the video to on.
Hide  Sets the visibility of the video to off.
Toggle  – Alternates the visibility of the video.
Play – This will start the playing of the video.
Pause – This will pause the videos playback.
Toggle Playback – This will cause the video to stop if playing and play if stopped.
Reset – This will send the video back to it’s start state.
Go To Time – This will jump the play point to anywhere on the timeline.
Play Loop – This will play a looped from any point on the timeline to any other point.

Audio

The audio object is one of two objects that have no visual representations on screen (the other is the Anchor). The audio object is only an icon on the stage. In most cases it can be placed anywhere on or off stage you want it. As long as it’s on the canvas, it will be targetable and will load into the OEP.

We support all forms of MP3 audio. Audio can be up to 2 hours long.

Origami Design Audio Inspector
Audio – Here you select the file to be associated with the audio object.
Auto Play – This will cause the audio to play when it enters the screen. It will play the audio if the audio is off screen.
Loop – This will make the audio keep playing. Once it gets to the end it will start over automatically.
Remember State – This will keep the state of the audio when you leave the page.
Exclusive – This makes it so that when this audio plays all other audio on the page will be automatically stopped.
Show State Icon – This gives the Audio object a visual representation on stage. It adds a play/mute function.
Play Icon – Add a png for the play button.
Mute Icon – Add a PNG for the mute button.
Position – Where the play/mute should be located on the audio object.
Fade with distance – This is a feature that will allow you to set a volume ramp for each audio object. The volume is set based on the proximity of the object to the center of the screen. At the center the volume will be 100%. You set the ramp size in pixels.
Fade on Stop – Here you can tell a audio element when it stops fade the sound out. You can specify the length of the fade in seconds.

Anchors

An Anchor is a way to snap the scrolling to a specific vertical or horizontal position. This is commonly used in ‘paging’ where you set an anchor at intervals the same as the hight or width of the screen. Giving the impression you are going from page to page. Anchors snaps to the top and left edge of the screen.

On the page level you can only add an anchor vertically whereas in the scrollable box depending on the direction you can add them vertically and horizontally. You ca cannot add a actor to a scrollable box set to both directions.

Anchors can also have triggers connected to them. When the anchor position get to the X or Y zero then the anchor trigger is fired.

Origami Design Anchor Inspector
Behavior – Here you can set the anchor to snap to the position or freely scroll.
Anchor can have any kind of trigger connected to them, like all other objects.

Widgets

Widgets are broken into two types, standard widgets and custom widgets. Standard widgets are objects that have more complex and prebuilt functionality. For the most part widgets are used for very specific features like a toolbar. Custom widget are user defined so they can really be pretty much anything at all.

To add a standard widget to your document go to the widget panel and click on the plus icon in the top right corner. Then you get a list of possible widgets to add to your document. add widgets in the main widget panel will be loaded into your document.

A custom widget is created by selecting any number of objects on the stage and right clicking to select create widget. Custom widgets are used to create elements you need to repeat throughout your document.

A widget can be unique or universal. A widget set to universal will maintain the same position on all of the pages. Change the widget’s position will affect all of the widget instances on all pages. If universal is turned off then the position of a widget will be unique for every instance.

One benefit to a custom widget is that once you create it and use it. Then editing the widget all changes will appear in every instance.

Origami Design Widget Panel
To start a new project open Origami Design and select New from the menu bar. Choose between Portrait or Landscape orientation, or both. Leave both boxes checked under Device if you wish to support all iPads currently available. If you only want to publish for Retina, or for iPad 1,2 & Mini, make sure you check the one you want. Hit Create.

Toolbar Widget

The toolbar widget adds a single bar at the top of the interface. It will show and hide as needed and you can add anything you want to it. The toolbar can be opened/closed by trigger function or preset gestures of double tap and two finger swipe down.

Origami Design Toolbar
This is what the end result of the toolbar will lookalike in your app. Of course the actual graphics and buttons will be based on what you add.
Origami Design Toolbar
This  green block above the stage is where the toolbar widget goes. When you add a toolbar widget to the stage it will then appear on every page. You double click on it in order to customize the content.
Origami Design Toolbar Inspector
In the main toolbar inspector you can set the behavior of the toolbar and also the gesture that will make the toolbar open and close. You also add the toolbar background here.

Scrubber Widget

The scrubber widget is a navigation interface to be able to access a page view and get an overview of all of the pages. Mainly a navigation for publications it shows the Page name, description and page number as well as giving the user a scrollbar to browse all of the pages. The scrubber is typically used in conjunction with the toolbar, it does not have to. You can customize the GUI graphics for the scrubber and the type position and colors but you cannot change the overall layout.

This is the info area and the graphic here can be custom as long as the size is 2048x308.
This is the Page Title, you can customize the position, size and color of the typography.
This is the Page Number, you can customize the position, size and color of the typography.
This is the Page Description, you can customize the position, size and color of the typography.
This is the scrubber background to the scrubber set by the normal background color.
This is the scrollbar, the position is fixed but you can customize the graphics. The image should be 2048x80px.
This is the scrubber knob. The graphic needs to be 44x44px and you can adjust the vertical position but do not try to adjust the horizontal position.
This is the page area color. It will appear when the scrubber is open.
The scrubber can be accessed by the same gestures as the toolbar. If you have a toolbar set then the scrubber is inherit the gestures. You can also access the scrubber via trigger functions.
Origami Design Scrubber
The scrubber looks similar to the toolbar widget, a green box. But it will always place itself above the stage. The scrubber also will be on every page if added to one.
Origami Design Scrubber Inspector
Behavior – This defines how the scrubber opens and closes in relation to the page. Some push the content down other open over the content.
Gesture – This defines how to open and close the scrubber. These are the same settings as the toolbar. You can also access the scrubber via a tigger function.
Info Area – This is the graphic that is the top part of the scrubber. The image needs to be 2048x308px.
Scrollbar – This is the scrollbar at the bottom of the scrubber. It needs to be 2048x80px.
Scrollbar Knob – This the graphic used for the knob in the scrollbar. By default it will center itself horizontally but you can adjust the vertical position. The graphic needs to be 44x44px
Page Area – This is where you set the page area background color. You can set it here or by setting the overall scrubber background color.

In-App-Purchase (IAP) Widget

The IAP widget is how add IAPs to your documents. They can be added anywhere in your document even inside other IAPs. You define the type of grid the IAPs are presented in and set the typographic look of the IAP titles. This widget is typically only used in the App GUI to build a bookshelf type interface for magazines or publications.

In-App-Purchase (IAP) Widget

The IAP widget is how add IAPs to your documents. They can be added anywhere in your document even inside other IAPs. You define the type of grid the IAPs are presented in and set the typographic look of the IAP titles. This widget is typically only used in the App GUI to build a bookshelf type interface for magazines or publications.

IAP widget inspector
Columns – Here you set the number of columns in the IAP widget view.
Scroll – Her you specify how the scrolling will work for showing more IAP widgets.
Margins – Here you can customize the positioning of the thumbnails of each IAP.
Font Family – Set the font for the IAP label.
Weight – Set the Weight for the IAP label
Size – Set the size  for the IAP label.
Align – Set the text alignment  for the IAP label.
Origami Design IAP Widget
This is what the IAP widget looks like on stage when you set it up into a bookshelf type interface.

Publishing

With this you can upload your finished document to Origami Xchange or to a Channel. It’s a very simple process similar to exporting your document. To start the process goto File > Publish or ⌘U. Then you will see the publish dialog box. Depending on the account you are logged into you will see Apps and Channels connected to that account.

Choose the App or Channel you want to publish to in the left hand column then you will see in the middle column the existing documents. You can either update an existing document or publish a new one.

Origami Design Publish Dialog Box
The publish interface is 3 panels. On the left you have the apps and channels you can publish to. In the middle are the documents already in the App or Channel and a + icon to add a new one. On the right is the details about the document you are uploading or updating.
Origami Design Publish Dialog Box
Once you have clicked the publish button then you will see a log of everything happening in the publish process. First the document is exported then it’s uploaded file by file. You will also see a progress bar at the bottom of the log window.

It’s important to remember that once you have published your document to Origami Xchange it will not be approved for publishing until you login and click on the document to be punished. Only user with Admin level access can publish a document. When you approve the document for publishing you need to set the publish date and optionally the update type and sunset date.

Preference Panel

Our preferences panel is very basic. It has three tabs. You can set some interface typography and export properties here.

Origami Design Preference Panel
In the general tab you can specify the kind of fonts you see in your font list. Because iOS has a specific set of font embedded into the device you can set your font list to show only those font and fonts you have actively added to the document. This is the recommend behavor. You can also embed fonts into all of your documents. This is very useful when you are using the same customer fonts all the time. Then you will not need to add them to every document every time.
Origami Design Preference Panel
In this tab you can specify the type of screen you are using which will help correctly setup the device preview size.
Also you can choose the side you want the inspector and palettes on.
Origami Design Preference Panel
This lets you choose to save or delete the files that you export to your devices. They are deleted by default.

Advanced Tutorials

Please goto our YouTube channel to see all of our tutorials.