Official user guide

Table Of cOnTenTs

GENERAL NOTIONS

AND USER INTERFACE

STACkER* Purpose and General Functions/

Plugin Installation

InDesign Configuration

First Launch

Demo and Activation

Basic Terms and Element

STACkER Panel Interface

Interactivity Markup

* HTMLStacker

Exporting Documents to HTML/WebView

Exporting Static Elements of Documents

INDESIGN INTERACTIVES

Exporting InDesign Interactives

MultiStateObjects (MSO)

Animation

Media (audio, video)

Timing

STACkER INTERACTIVITY

Flickers

INTERACTIVE SCENARIOS

General Comments

Button

Coloration

Cube

Drag-and-Drop

Gallery

Gravity

Hotspot

Image Sequence

Lightbox

Parallax

Scratch

Scrollable Frame

Slideshow

Watch

STACkER (CSS, JS)

Intensive Use

Stacker is a plugin* for adobe InDesign en-abling users to export InDesign documents to the HtML5 based web application and supporting original export to the Flash SWF format.

In addition to export procedures, Stacker expands adobe InDesign interactivity, by adding dif-ferent scenarious of interactive communication with user (interactives). Stacker is fully compatible with a WebView element of adobe Digital Publishing Suite (DPS) Overlaycreator panel enabling users to place output web applications in adobe DPS digital publica-tions.

to preview created interactives, you can use Goo-gle chrome or Safari (for Mac OS) browsers only

* extension

sTacker Purpose and General functions

Plugin Installation

release bundleStacker delivered as a ZXP file. All the components and updates nec-

essary for performance will be automatically downloaded once the extension is launched for the first time. The installation package can be downloaded at http://htmlstacker.com/download/

system requirements• Windows OS (XP, Vista, 7, …), Mac OS X 10.5 and higher;• adobe InDesign 5 and higher;• Internet connection with tcP/IP port 80 opened.

adobe extension Manager Stacker’s ZXP file should be opened in Adobe Extension Manager and in-

stalled (or reinstalled) as a common extension of adobe creative Suite. If you see a warning that the developer’s certificate cannot be verified (See step 1-3), please, click “Continue”.

IMPORTANT! adobe InDesign should be disabled when you install Stacker.

General notions and User Interface

Plugin Installation

InDesign ConfigurationFor convenience of users and more efficient

running of certain interactives from the Stack-er bundle, it is recommended to properly configure InDesign.

IMPORTANT! Parameters are configured once, all the projects should be closed. If any layout is open, settings will apply to the current project only.

1) On the Preference menu, select the Unit&In-crements tab. In the Rules Units (Horiz. and Vert.) section, select Pixels as units of measurement.

In the Other Units (Stroke) section, select Points.

Leave the Points/Pica Size section as is – Post-Script (72 pts/inch).

In keyboard Increments, go to cursors key and select 1 px as a unit of measurement. Other fields should be left as they are (See step 1-1).

2) On the Preference menu, select the Grids tab then go to Document Grid: in the Horizontal and Ver-tical lines, we set values equal to 128 px. In Subdivision lines, the value should be equal to 8. (See step 1-2).

1-1

1-2

Configuring InDesign (continued)

3) Preferences menu select Guides & Pasteboards tab, section Pasteboard Options, lines Vertical / Hori-zontal Margins set the value not less than 500 px. (Set-ting the maximum length / width of the scroll frame). If in the future this value is not sufficient for solving problems - it can be enlarged (see step 1-3).

4) at the conclusion of the settings recommended to activate the Snap to Grid (snap to grid). (see step 1-4)

adobe InDesign setting after all the above items is complete.

1-3

1-4

first launch and Product activation

first launch In order to open Stacker toolbar, select Win-

dow/Extensions/HTMLStacker (See Fig.) in the InDesign menu. At the first time, it is essential for a computer to have an Internet connection to download updated components and libraries.

Demo and Activationafter installation, Stacker operates in demonstration mode (See

step 1-1). The Demo version does not require any registration keys. It is fully functional, but all output images will bear watermarks. In order to activate the standard version, in the activation panel, you have to insert your Login, Key and Activation Label, which randomly identifies a PC (See step 1-2).

activation button

Download Update

The fields needed to be filled for product activation.

It is necessary for support inquiries when you install Stacker for multiple users. Normally, an activation key may be used not more than for 2 installations only. However, multiple user license can be purchased. Stacker can be transferred to another PC but please keep in mind that you have to deacti-vate it before removal by yourself or as instructed by the support team. Other toolbar buttons will be dis-cussed in detail in “Interface Overview”.

UpdatesStacker performs minor (small) updates

automatically each time the extension launch in InDesign. also update the program by pressing the button [GLOBe] is needed (See step 1-1). Major updates (new releases) should be downloaded from the website and installed manually by using adobe extension Manager. Information on the new re-lease will be sent to customers via e-mail..

1-1

1-2

1-3

General concepts and User Interface

basic Terms and elementsSTACkER – is a standard toolbar – extension for adobe

InDesign transforming InDesign documents into the web-application.

WEB-application is a group of files, such as, html, css, js, png, media files for interaction with a user by means of a browser (only Webkit compatible browsers supported).

HTML export is a web-application generation process.

Interactive scenario is a certain type of interaction between user and content. For example, Hotspot allows users to successively switch groups of images or other elements.

Interactive is a group of elements (visual, media, non- visual), which allow users to play an interaction scenario. the sce-nario provides for a set of roles and parameters. By means of the Stacker interface, users can assign elements of a document to the role with user values set in parameters.

Native interactivity – adobe InDesign has variety of tools to generate interactivity for export to Flash or PDF (include Media, Object States, Buttons & Forms, Animation, Hyperlinks, Timelines). Stacker supports transparent export for most of these interactiv-ities. As a rule, they do not require any additional markup.

Interactivity and statics Interactive elements are all elements on the layout and in the

Web-application, which change their image, interact with a user, de-vice sensors, timer, etc.

Other elements are static. they can contain bitmap images or text. Let’s consider properties of interactive and static elements separately.

sTacker Panel InterfaceStacker is a standard toolbar – extension for

adobe InDesign. In order to turn it on/off, please, se-lect “Window/Extensions/HTML Stacker”.

the toolbar will appear as ready for updates and computer should be connected to Internet to launch it successfully (after than Internet connection will not be required). as soon as the toolbar is updated, it enables basic mode.

the major field is a tree list of interactives and elements being a part of such interactives available on the current bar. If you select interactives on the list, they are also selected on the bar (converse state-ment not true). Below is the properties control panel of a group of selected interactives on the tree list. these properties are variable and depend on the type of interactives (See Fig. 1). eXPOrt buttons will be discussed in detail in “Export of Documents”.

By buttons on the list you can add elements selected on layout to the interactive [aDD IteMS], remove elements from the interactive [reMOVe BUttON] (a recycle bin button), change the role of an element in the interactive [rOLe BUttON].

INteractIVe SettINGS

PaNeL

export interactives to HtML and WebView

remove selected interactive

copy selected interactive

a LISt OF INterac-tIVeS ON tHe actIVe

LayOUt

Interactive\element parameters

pic. 1

add an element to interactive

Update a list of interactives

create an interactive

remove selected element from interactive

HtMLJS

Animation and flickers

a drop-down menu for interactive selection

pic. 2

Interactivity MarkupStacker allows users to create interactives within InDesign documents. they will be auto-

matically saved into a document and recognized whenever a document, containing interactivity, is opened. Changes in elements on the layout will not affect interactives until the element is com-pletely removed from the layout. Stacker does not track elements removal. Therefore, if the list of interactives has been changed, [UPDate BUttON] need to press.

Select a group of elements on the layout

Select a scenario on the STACkER toolbar

Assign roles to elements of an interactive if roles did-n`t assigned automatically

Change parameter values of interactive and element if required

Exporting Documents to HTMLDocuments are exporting by pressing the button [eXPOrt].

In order to test any interactive from Stacker, you can use two buttons located at the bottom of toolbar. The first button [Page] exports documents to the Internet browser page. the second button [to WV] exports documents to a frame (for DPS version).

To get the intended effect (at the test stage), use the button [Page]. In export option dialog box set the following parameters:

• range of a document pages;• join pages algorithm (as a separate web-application or linking them into a single application);• window size of web-application;• display density of a target device (1 – for all options, for retina HD is 2);• setting document layers export (layer processing (analyze), static content optimization (Smart mode), export of non-raster-ized text (HtML text));• export path; export and cancel buttons.

Once it is launched, export takes up a lot of time. Its duration depends on elements rasterizing rate and large media files copy-ing. InDesign will be blocked until export is complete.

Upon successful export completion, the extension will auto-matically open a folder containing a generated Web-application. To test functionality of the application please open an html-file in the Webkit compatible browsers (Google Chrome and Safari for Mac OS).

Exporting Documents to WebViewexporting documents to WebView suggests export a selected

part of the document and then insert to a Web-application as an HTML block for Adobe DPS Overlay Creator (Web content tab). Page preview will automatically be generated and placed into cre-ated container . The container sizes match sizes of a predefined group. For export purposes, the extension will create an InDesign document, which will keep HTMLStack editable. The original doc-ument will have an HtML container only!

this export procedure is purely identical to export of a single document.

exporting static elements of Documents

color formats and units measurementUnlike Adobe DPS Folio, you can use custom color formats to prepare

a layout (cMyk, rGB, Lab, Pantone). However, when you export it, all col-ors will be converted to rGB (alpha) by adobe color Management Sys-tem. Vector design elements created in InDesign will change their colors for a new rGB color generated by Stacker, which will match initial color as it possible. Use RGB colors for vector elements and keep linked images in the more comfortable to edit color format.

LinksAccording to the Adobe InDesign Link Manager operation model, all

linked images are stored in a document in a low quality only, approxi-mately 70dpi. In order to export them to a Web-application for 10’’ displays and resolutions as high as 1,000 х 700, resolution of approximately 130dpi. 260dpi is required to accommodate high point density devices (PPI). From here it follows that links should be kept included in a document, which is quite common requirement for printing layouts. If there are no linked images, a preview version of an image in artificially will be increased reso-lution in the application.

Opacity of elements, pasteboard

Stacker exports layout elements to HtML only if they have graph-ic features, such as, fill color, frame color, opacity, placed-in items, etc. If an item has visibility turned off (for example, in a layers palette), it means that element will be exported as turned off, i.e. it will be invisible too. Ele-ments, which are completely off the layout (being on the pasteboard), are also exported.

IMPORTANT! Avoid littering the pasteboard and turn off visibility of elements, which are not required in the application. If you need to leave

out any elements without removing them from a document, you should move them to a separate layer and exclude it from processing in the ex-port management box.

layers and element sequence orderZ-order is a “depth”, at which an element resides within a document

(considering to InDesign layers). Stacker never alters the element se-quence order on the layout. therefore, the sequence order in a generat-ed HtML document will always match the layers palette. this behavior is completely different from DPS, where interactive elements are moved up.

Such behavior has both advantages (the design will never fail) and disadvantages (there may be cases when an interactive is overlapped by other elements and a user does not interact with an intended element).

Smart mode (merging items into HTML)In practice, document creates many static elements, which are not

require any direct projection into a web-application. they can be merged into large groups with similar elements for rasterization without interac-tivity detriment . Besides, such groups are created so as to keep the ele-ment sequence order intact. Such approach similar to sprites in web-de-sign (merging small images into one with a transparent background). This approach dramatically increases web-application processing speed of a and reduces loading to container speed.

Occasionally, when interactive regions expecting touch-events, (such as buttons) are at the bottom, this mechanism can disrupt the application, as a merged group can be quite large and geometrically overlap the but-ton, although visually there will be its transparent region, i.e. the button is still visible but it stops receiving touch-events. In this case, Smart mode should be turned off for layers above troubled buttons.

InDesign Interactives

exporting InDesign Interactives (native interactivity)

– “Tick” Button marked positions which interacts HTMLStacker

In this section, we discuss interactivity built into InDesign, with regard to their discharge

in the WEB-application.

This section is intended for a user with an idea of the content of inter-active training tools in

InDesign.

ButtonButton – a kind of MSO, which has a limited num-

ber of states and sensitive to mouse or “touch-events.” Buttons can have from 1 to 3 states: Normal - (mandatory state) the released button , Click - button is pressed and held by finger / mouse, Rollover - in WEB-application is interpreted as “the button is on.”

Button in response to user actions can control other elements of the event: click – press, release or tap – release. at each event, it can be assigned multi-ple actions (behaviors). Supports the following steps: Buttons section (InDesign)

Sound – play, stop, pause, resume (examples See Media);Video – play, stop (for examples, see Media);Animation – play, stop, pause, resume, stop all

(for examples, see animation);Go to state – MSO object management: the transi-

tion to the state (for examples, see MSO);Go to next state – the following status is maintained

control cycles (loop);Go to previous state – to the previous one, is sup-

ported by cyclic control completely (loop). remember that some events (Show\hide buttons,

Go to UrL) are carried out immediately after user’s ac-tions and added to the timeline generated by the user’s action (See timing).

Go to URL is similar to hyperlinks transition to an external resource (http://) or an internal DPS command (navto://).

Show/Hide Buttons and Forms is a control visibility function of buttons on the layout.

remember that some events (Show\hide buttons, Go to UrL) are carried out immediately after user’s ac-tions and added to the timeline generated by the user’s action (See timing). We have fully implemented this In-Design button feature in the web-application.

LinksStacker exports links, which source is a page el-

ement, including transparent ones. there can be both external (http://) and internal (navto://) links. Links from the text are processed only if you turn on “Text Export” option.

Links from page elements are differently inter-preted by browsers, for example Safari OS X and Safari iOS, so using Go to URL buttons instead of links recom-mended.

Button crossing, show/hide button

Googling it!

Hide top button

Show top button

Direct link to google.com

MultiStateObject (MSO)MultiStateObjects treated as content containers

and fully reproduce their behavior into the web-appli-cation. the state, which is visible during the export, will be initially visible in the web-application, state di-mensions and position relative to the MSO container are also relevant. they can be managed by buttons. In addition, they can be switched by default (Next State) by clicking or tapping on the visible state. MSO, which has not been marked up by Stacker, acts as Hotspot (See Hotspot) with default parameters. these objects are widely used in Stacker interactives by giving them additional properties or modifying their interaction with a user.

IMPORTANT! restrictionby InDesign: MSOs and but-tons cannot be nested (except the button controlling MSO, within which it is placed).

For more detail about MSO creation and functionality, please, see a respective section in adobe DPS.

animationInDesign animation tools are designed for export-

ing objects to Flash with more flexible management system of moving objects than HtML5. We did our best to closely reproduce the behavior of animated objects in the web-application, which you see in the InDesign Preview palette, although there are some insuperable differences in technologies. The program plays back animation well if it is set in the InDesign palette rather than imported from Flash-based presets. the following can be animated:

• movement on path, including Bezier curves;• opacity changes (including multiple key values “keyFrames” set in Flash presets);• zoom (including multiple key values “keyFrames” set in Flash presets);• rotation (including multiple key values “key-Frames” set in Flash presets);• time management (delay, acceleration, evenly, accelerate-delay, Flash presets time management will not keep in HTML5);• visibility management before/after animation;• animation direction (from the current position/from the current state/to the current state\position);• stop/start events animation.

IMPORTANT! Animation does not work in DPS. Stacker can built in animation objects into the DPS layout.

||

Media (audio, video)Web-application can playback audio and video

formats, which are supported by browsers of target devices (take note of differences for iOS and Android devices). Video and audio placed into the container on InDesign page are exported to the application without any additional markup. Please, note that browsers do not support concurrent playback of several audio and video files. Mobile platforms do not support video au-to-play due to obvious restrictions, as playback actually takes part in the external system player.

Supported VIDEO functions: platform-support-ed formats playback, poster, stop by buttons, stop by leaving the page, video playback by visiting page (start-ing ver.25).

Not supported: playback by a button, concur-rent playback of several video files.

Supported AUDIO functions: platform-sup-ported formats playback, full control by buttons, stop by leaving the page.

Not supported: concurrent playback of several audio files.

Timingthe web-application management is based on

events, which means a user’s action generate a chain of responses from the program. events can be received both from interface elements (buttons, media) and system (visiting/leaving the page) and device sensors (positions, compass). InDesign supports event-based processing of buttons while page visits by pressing/ releasing a button initiates a chain of command pro-cessing. (pressing a button runs animation, switches MSO state in 5 seconds and at the same time starts audio playback).

you can control a chain of actions in the timing palette. the web-application supports properties of ac-tions set in the timing palette, such as, grouping and delay of actions.

Stacker Interactives

FlickersFlickers (meaning “blinking, flashing”) are min-

imalistic animation effects applicable to elements. Animation effects are set as CSS classes (CSS3 Key-frame animation). Once created, they get connected to the web-application and allow to animate multiple ele-ments in a uniform manner, for example, door pull, eyes blink effects.

Flickers can be used when the layout is overloaded in promotion materials and children focused content.

IMPORTANT! Flickers are simplest Stacker in-teractives, as they are marked up by special tools. How-ever, they never interact to user, they are resistant to touches and device sensors.

Guidelines for using flickers are quite simple: nei-ther combine several flickers in one element (it can be bypassed if you use grouping and placement of effects onto different containers), nor combine InDesign and flicker-based animation.

you can expand the animation library by your-self creating own animation rules and guidelines according to CSS3 (animation-keyframes) rules.

Operation period (sec.)

return to main menu of HTMLStacker

Flicker presets*

Delayed playback

(sec.)

Time functions (it works if a long period of time is set):

In – acceleration

Out – deceleration

InOut – acceleration\ deceleration

* Flicker presetsFlickers have the following presets:– swing – a swing effect (swinging left\right)– SlideX – Х axis motion (with the appearance of a shadow)– Slidey – y axis motion (with the appearance of a shadow)– SlideZ – Z axis motion (with the appearance of a shadow)– SlideNWSe – slide to the upper left corner– SlideNeSW – slide to the upper right corner– PulseX – Х pulse– Pulsey – y pulse

– PulseXY – Х, Y pulse– Shadow – shadow – Glow – edge blur with a glowing effect– Doorcat – a sign plate swinging in the wind – DoorPushLeft – pushing door from the left side– DoorPullLeft – pulling door from the left side–DoorPushright – pushing door from the right side–DoorPullright – pulling door from the right side– EyesBlink – a blinking eye, a falling sign– EyesBlinkLongEyelas – a twinkling eye (ver. 2)

General comments

autoplay

Сhange playing

directions

Standby time (“latency”) after the

start page

Pause between switching

Synchronization with other interactive MSO.

Set only one (the ‘top’) interactivity.

Selecting the direction G-sensor

tilt sensitivity to switch state

tHe ParaMeter BLOck SWItcHING G-sensor

In all MSO-based interactives, MultiStateObject (MSO) will be initialized in HtML in the state, which is active during the export to InDesign;

Autoplay enables automatic timer-based play-back of interactives. Thus, ImageSequence starts spon-taneously switching at preselected intervals (like in DPS); Lightbox can open/close itself as set by the timer, etc. Interactives can be played automatically but as soon as a user starts interacting with them, auto-play stops and resumes when a user releases them. there is group of such scenarios parameters: autoPlay – enables au-tomatic playback; AP reverse – reversing playback; AP wait – waiting period after a page visit or end of user’s interaction; aP interval – a pause between switches.

all MSO interactives can control a devices G-sen-sor . to turn it on, you have to select G-control ( button is in the interactive parameters). It turns on interactive control by device G-sensor, as values, you can select a direction, which will control switches. a neutral position always corresponds to the horizontal device, tilts left-right – X axis, pushes and pulls – Y axis, shaking a device – Z axis (switches in one direction only, “Next State” by default). Motion direction can be changed by the auto Play reverse parameter.

Interactive synchronization. all MSO-based interactives (cube, Slide-show, Hotspot, ImageSequence) can be synchronized with each other. Uni-directional synchronization – the first interactive is master (switching), while the second interactive is slave (switched). It enables by the Synchronized pa-rameter. Synchronization occurs according to state indices (rather than names like in DPS). Synchronization work both in combination with AutoPlay and G-control.

Interactive scenarios

ButtonInteractive wrapper around an InDesign button. It

can be assigned to a button only. currently, it has one parameter - “draggable” – which makes a button drag-gable. However, a button stops responding to clicks yet allows users to drag it. realizing the chain of actions defined this button in InDesign, the program will select and run only those actions that operate an element, on which a button was dropped. For example, if you assign actions to a button being dragged, such as, animation start, audio start, video stop, and make it draggable, pressing this button will not trigger anything except dragging it to animation controlled by such button will trigger animation start with the button returning to its original state. By dragging this button into video, a user can stop video playback. Thus, a target dragging ele-ment is a filter for the action list.

Multi-state 1 Multi-state 2

Animated item

Media item

Stacker Interactive

ColorationThis is a prototype of “a coloring book for kids”, when

users can color things “as appropriate.” The palette and ar-eas of each color are set at the design creation stage. this scenario has 3 roles: a coloration area (layer), a color select button (brush) and interactive reset button (reset). In order to link up a coloration area and a color in the palette, a user should set similar labels in parameters (See a drawing area marked by yellow color). A fully colored image is placed as background and does not belong to an interactive at all. Im-age templates (layer masks) are placed inside a coloration area.

IMPORTANT! Observance of the overlay layer se-quence which working with this interactive. If an active layer is overlapped by any item, it will not work.

the reset interac-tivity button

Сolor Selection

the area colorization

role of the selected element

label element and area ratio

General palette options view of the interactive Coloration

Select a color

Reset

Touch and erase the mask

cubethis is one of the galleries variety, in which slides

are built into the edge of an imaginary 3D cube. Based on previously created MSO user can rotate the cube vertically or horizontally, by surfing through a se-quence of images. The cube follows “the finger”, i.e. ro-tates smoothly “rolling” to a stable state. The image is built so that a user never see more than 3 cube faces. Unlike a similar interactive scenario “Overlay Cre-ator”, the number of cube faces is random but not less than 3. The program marks up either a group or MSO. the face sequence order corresponds to the sequence order of states of initial MSO-based object. as with all MSO-based interactives, it supports auto-play, but-ton-based control and synchronization.

the name of the interactive

rotation direction

General palette options view of the interactive Cube

Drag-and-Dropthis is object dragging implementation. In this

interactive, all elements are divided into 2 roles: an object that can be dragged and areas, where a user can drop the object. you can set a relationship between them by assigning similar labels to areas and object. When a user drops an object with a set label, it remains only in area with a similar label. Whenever it is dropped in a different place, it will return to the original state – “return home.” These objects will have a competitive behavior in areas, i.e. if a user drags an object into an area, which is already occupied by another object, the latter will return to the original state.

If an object has no label, it means that this is a free drag object and a user can drop it anywhere.

In addition to areas and objects, the interac-tive should have a reset button, which will reset all objects (See Fig.).

the items with the status of “Active Area”

elements by which the status of objects

the element with the reSet function

the role appointed to an element of an interactive

the label for a particular object for a specific coverage

General view palette options of the interactive Drag-and-Drop

GravityThis interactivity is built on the gravity effect which

implements the scenario of objects free interaction ac-cording to the physics laws. there may be interactions with the gravity vector, or in zero gravity. Building in-teractivity should not difficulty, because the objects are divided into two categories:

1 - area (region) direct playback of interactive, 2 - Figure: static / fixed (wall area) and dynamic (balls and rectangles). Each dynamic figure may differ in their physical properties: elasticity and density.

Delay in the startup of interactive (sec.)

General view palette options of the interactive Gravity

The elements of interactivity (3 types):

– region - region play;

– Static - static elements;

– Dynamic - dynamin items.

Playing direction: – bottom; – top; – left; – right; – bottom left; – bottom right; – top left; – top right.

Gravitation force

MSO name

title interactive

a set of presetscenter point

of application of deformation

General palette options view of the interactive Gallery

Gallerythe Gallery interactive is MSO-based operates. this

scenario combines multiple spectacular slideshows for the user. Unlike other interactives demonstrating slides, only gallery can show several slideshows at a time. But one of such slides is always active, i.e. it is visible and shows with-out distortions (rotations, transparency, zoom and other transformations do not apply to an active slide).

Mark-upping the MSO for the gallery, please, keep in mind that all transformations of states take place inside a container, whose geometry is set by the size of MSO itself.

IMPORTANT! Do not resize MSO in InDesign without affecting its state, an empty original state is needed by placing an empty element of the necessary dimensions inside.

Since the slide behavior management is rather complex and contains multiple parameters, special sets of such parameters grouped into separate presets, which set the behavior of the entire gallery.

IMPORTANT! creating galleries, containing mul-tiple images, and several galleries on one and the same page, you should remember that the gallery demonstra-tion requires much more device resources than other interactives and can lead to an emergency shutdown of the program due to out-of-memory errors (applicable to iOS).

HotspotHotspot is a frame sequence. the extension

supports progressive switching or switching to the predefined state. It is convenient to use Hotspot as a container to turn on\off visibility of other inter-actives.

It can be used both with buttons or as a sepa-rate MSO. In the latter case, it is necessary to al-low “Switch on tap”. Options of animation for state switches will expand further. MSO, which is not marked up by Stacker, are always exported as Hotspot. We have also added auto-play and G-sen-sor support.

Parameters:

• visual switch effect• switch speed• switch on tap• loop (last followed by first)• autoswitch: delay, interval, reversal• G-control: tilt axis, sensitivity.• synchronization with other MSO interactives

title interactive

Visual effect:

– switch

– fade

transfer options (shift) illustrates:

– At the touch finger

– Change “by finger”

– “None” – to start using another interactive

General palette options view of the interactive HotSpot

Image sequencethis is a stop frame animation scenario when MSO

or a group of elements on the layout are interpreted as frames of an animation clip. Moreover, frames can ful-ly replace each other or work as additions when every frame complements the existing picture (addOnSlides parameter). Unlike video clips, a user can control play-back in a frame-by-frame fashion. Furthermore, a user can single out “key” frames, in which playback will be stopped. For example, these frames show an explana-tion, which should be noted and read by a user.

Parameters:

• reverse – switch\reverse order of slides

• add-on slides – switch on additional animation (See above)

• Attenuation – attenuation defines how fast ani-mation stops once you release a finger

• Sensitivity – sensitivity

• Checkpoints – ID numbers of key frames (sepa-rated by commas)

• Auto-play – automatic playback

• G-control – control playback by G-sensor

title interactive

Function to add slides to an already active,

not a replacement. (with the “static

camera”)

General palette options view of the interactive Image Sequence

General palette options view of the interactive Lightboxlightbox

title interactive

Visual Effects***

“Push Button”. When activated, the frame the button to open the content disappears.

Delay time

Interval (“Disposable Play”)

Options for the components of interactive*

Shadeless**

* Options for the components of interactive– content– Open button– close button** Shadeless – the element may exist only in one open state. Without a specific flag other state has closed.

*** Visual Effects– Fade– Pinch – close button

Lightbox scenario by pressing or pinching Open Button (increasing picture). So, the button expands and when you released it and replaced the content.

this scenario involves random elements with the following roles:

• Open Button (one or more) • content – only one element • close Button – available if required. If there

is no Close Button, it will be closed by clicking the con-tent. close Button is not required to control the Light-box by pinching.

IMPORTANT! Such a scenario is mark up without using MSO containers, therefore it can contain other interactives inside content. another thing is that you should not paste MSO into a frame every time creating the interactive. Instead, you should simply group them with other objects and assign content properties to a resulting group.

this interactive is redundant, as such a behavior can be implemented by InDesign natural interactivity: a button turn on/off another button. But in practice, it is more convenient to apply an Stacker scenario, as it requires fewer operations and still allows users to im-plement nested interactives.

Lightbox has only 2 states: auto open and close within a given period of time. also settings allow to en-able only preciously one Lightbox as open state (Single-ton). Once it is activated, opening a Lightbox will close all Lightboxes opened before.

General palette options view of the interactive Parallax

ParallaxParallax (derived from the Greek παραλλάξ, which in

its turns comes from παραλλαγή, meaning “change, al-teration”) is a displacement in the apparent position of an object against the distant background depending on the location of an observer.

It is designed to display images with pseudo-depth. the image is displayed as separate layers containing ob-jects located at equal distances from an observer. a user can change the position of a virtual camera by dragging it. However, layers are moved over different distances so that a user gets the impression they watch a 3D-panoramic pic-ture. certainly, you will need a prepared panoramic image to create such an effect. A layer containing objects that are closest to an observer should be stretched the most as it will move in front of an observer faster than others, while the most distant layer (sky line) should be the shortest and static. Laying out such an interactive is very simple, which is offset by the complexity of image preparations. Just need to add pasted images to the interactive (layer role). Please, remember that there is parallaxFrame, which sets the viewing window.

title interactive

“Multiplier”. Setting the rate index for the ratio tripped elements (1-10)

the active elements

area (frame) where playing interactive

General palette options view of the interactive Scratch

scratchthis interactive scenario allows users to arrange

a “Scratch to See” story line. There is a hidden image beneath a scratchable layer.

In the layout, you have to specify what element will be a protective scratchable image. In parameters, you can also set the scratch width.

IMPORTANT! Please, note that there can be no other touch-activated interactives under a scratchable layer. However, there can be other interactive elements, which do not interact with a user.

Since Stacker calculates parameters when load-ed, there can be a small delay in displaying the interac-tive itself. If there is an image-based background, you will see it before the interactive actually appears.

Вrush Size

title interactive

Еlement interactivity

General palette options view of the interactive Scrollable Frame

the components of interactivity

Orientation “scroll”

The band “scroll”

The effect of “spare

wheel” slide “Binding” to the height of the container with the Scroll.

Zoom Options

scrollable framethis scrollbar is very similar to the Scrollable DPS

Overlay creator.Mark upping is pretty much the same way: all scrollable content is grouped and pasted into (Copy/Paste into) a rectangle, which will mask a part of the content. In Stacker, the Scrollable Frame consists of a two parts: content-frame, where content is pasted and container’s content, which is added as content.

In parameters, you can set scrolling directions (horizontal/vertical and two directional scroll), turn on scrollbars, zoom and its ranges.

there are no additional content-related restric-tions, although you should keep in mind that InDesign does not allow pasting MSO-like container inside an-other object. For this reason, you have to use a group of objects instead of an MSO container in order to create interactivity inside a scrollable area.

IMPORTANT! remember the limited capabilities of nested interactives in using zoom in scrolling. Be-sides, you should avoid similar directions in controlling scroll and interactives nested inside. In this example, the scroll is vertical, while the Gallery and Slideshow are horizontal.

General palette options view of the interactive Slideshow

the orientation (direction) play: horizontal / vertical

title interactive

The value of “slow”Inertia “spare wheel”

limitation of scaling

Loop (for auto-scroll frame)

SlideshowSlideshow is one of the MSO-based galleries. Unlike

the Gallery, it has a completely different flipping slides behavior in the Slideshow it always follows the finger. A user can at any time stop moving their finger or move it backwards. In this case, the Gallery will not switch the operation or complete it entirely, as it supports “from A position to B position” operations only. The Slideshow will switch from the current position. Moreover, you can set switch momentum for it.

Its parameters have several groups of settings:• direction: horizontal/vertical;• momentum: you can turn on/off Momentum and set a deceleration value;• zoom: you can turn on/off zoom and set zoom limita-tions (minimum-maximum);• loop (last followed by first) – this option can be used only to enable auto-play for the slideshow, as slides do not have their positions shuffled in the line;• G-control (direction, sensitivity);• auto-play: turn on/off, direction (forward/reverse), pause, interval in seconds.

IMPORTANT! While mark upping, please, keep in mind that all states should be the same size, as flipping involves container’s (MSO object) width or height.

Slideshow can be switched by buttons or act as a dependent interactive. adding several MSO contain-ers will synchronize scrolling both for manual and auto-matic paging.

A general view of the palette options interactive Watch

Objects corresponding to the second, minute

and clockwise.

type of view: synchronized / static

Set the time zone

Smoothing the movement of the hands.

the angle of rotation watch

The offset relative to the system time

Watch (Clock)

Watch can show preset time (static watch), current system time, time of the preset clock zone based on the system time, displaced time (displaced by a fixed value against the system time), fast or slow watch.

Interactive roles are as follows: 3 hands – hour, min-ute and optional second hands – can be represented by any InDesign graphic objects.

There is a tiny trick in mark upping this interactive. Since we do not specify clock face in the interactive, we can determine the hand rotation center only by setting a container for the hand image as its center matched the rotation axis with all hands on the layout should be placed vertically upward (pointing 00:00:00 when the clock face is not rotated).

Parameters:• watch type: synchronized or static;• displacement against the system time (fast or slow watch);• time zone (fixed or user defined);• smoothing of hand movements (otherwise, hands will move by jumps);• angle of watch rotation (midnight angle on the clock face).

Nested Interactive ElementsIn all MSO-based interactives, MultiStateObject can be replaced

with a group of elements, as it allows to implement unlimited nesting in-teractives with the active upper element in the group once the interactive is initialized.

Visibility of elements in the group should be manually brought to corresponding state of the interactive For example, when you deal with Hotspot, you have to turn off all elements except the upper one.

Buttons are always exported in the Normal state with Over and Click states (if available in the layout) exported as turned off.

Inclusion of User resourcesexternal resources include program libraries (JavaScript), which will

be executed in the environment of the web application, as well as style files (CSS). Stacker stores links to user resources and connects them to the web application.

Links to the useful JavaScript libraries are stored in a document, cop-ied to the user-links folder after export and connected in HTML. Links to CSS files are not stored in a document, but stored in Stacker settings. Consequently, general CSS files will be connected to all exported docu-ments with a separate set of JS files connected to each document. As user JS files, user CSS files are copied to the user-links folder and connected in HtML after assembly.

It allows to split up design preparation and development of individual interactivity scenarios, as they only have to harmonize naming rules for styles and element IDs.

Embedding HTML Elements Into Layout element id element className background-image, background-repeatStacker can fix the element ID and its class attribute (className:

<div id=”id” class=”className”>), which is generated for the element during the export. Use a connected user JS code (ID button) where ap-propriate. In the same tab of Stacker toolbar, you can turn on a linked image as is without exporting it to InDesign and define frequency of the background image in the container (it greatly increases upload of large background images and reduces exporting speed).

IDSN ObjecStyle to CSS className mappingConnected user CSS files can be used to simplify export of elements,

which can correctly be displayed by cSS means, such as, solid and gra-dient color fills, solid frames, shadows around objects, rounded frame angles. When you use IDSN ObjecStyle to cSS className mapping, an element is not exported to a bitmap image, the program just creates a container with dimensions set in IDSN and a user style applied. to that end, you have to create your own CSS file and describe all necessary styles in it, for example, you can create an mystyles.css file.

.styleName {background:#FEFEFE; border:5px #A0A0A0; bor-der-radius:10px 10px}

In IDSN, create ObjectStyle with styleName and apply it to the ele-ment, add a link to the CSS file in Stacker toolbar (animation section).

CONTACTS

STACkER Team, http://htmlstacker.com/ E-mail: support@htmlstacker.com