Official user guide
Table of contents GENERAL NOTIONS AND USER INTERFACE Stacker* Purpose and General Functions/
Exporting Documents to HTML/WebView Exporting Static Elements of Documents
Plugin Installation InDesign Configuration
InDesign INTERACTIVES
First Launch
Exporting InDesign Interactives
Demo and Activation
MultiStateObjects (MSO)
Basic Terms and Element
Animation
Stacker Panel Interface
Media (audio, video)
Interactivity Markup
Timing
* HTMLStacker
StacKer INTERACTIVITY Flickers INTERACTIVE SCENARIOS General Comments
Image Sequence
Button
Lightbox
Coloration
Parallax
Cube
Scratch
Drag-and-Drop
Scrollable Frame
Gallery
Slideshow
Gravity
Watch
Hotspot
Stacker (CSS, JS) Intensive Use
General Notions and User Interface
Stacker Purpose and General Functions Stacker is a plugin* for Adobe InDesign enabling 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 different 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 publications. To preview created interactives, you can use Google Chrome or Safari (for Mac OS) browsers only * extension
Plugin Installation Release bundle Stacker delivered as a ZXP file. All the components and updates necessary 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 installed (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.
Plugin Installation
1-1
InDesign Configuration
For convenience of users and more efficient running of certain interactives from the Stacker 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&Increments 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 – PostScript (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 Vertical lines, we set values equal to 128 px. In Subdivision lines, the value should be equal to 8. (See step 1-2).
1-2
1-3
Configuring InDesign
(continued)
3) Preferences menu select Guides & Pasteboards tab, section Pasteboard Options, lines Vertical / Horizontal Margins set the value not less than 500 px. (Setting 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-4
First launch and Product Activation
First Launch
In order to open Stacker toolbar, select Window/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 Activation
After 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
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 deactivate it before removal by yourself or as instructed by the support team. Other toolbar buttons will be discussed in detail in “Interface Overview�.
The fields needed to be filled for product activation.
Updates Stacker 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 release will be sent to customers via e-mail..
1-1
1-2
1-3
General Concepts and User Interface
Basic Terms and Elements Stacker
– is a standard toolbar – extension for Adobe InDesign transforming InDesign documents into the web-application.
Interactivity and Statics
WEB-application is a group of files, such as, html, css, js,
Interactive elements are all elements on the layout and in the Web-application, which change their image, interact with a user, device sensors, timer, etc.
png, media files for interaction with a user by means of a browser (only Webkit compatible browsers supported).
Other elements are static. They can contain bitmap images or text. Let’s consider properties of interactive and static elements separately.
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, nonvisual), which allow users to play an interaction scenario. The scenario 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 interactivities. As a rule, they do not require any additional markup.
pic. 1
Stacker Panel Interface Stacker is a standard toolbar – extension for Adobe InDesign. In order to turn it on/off, please, select “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 statement 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].
A list of interactives on the active layout Interactive\element parameters
Interactive settings panel
Remove selected interactive
Export interactives to HTML and WebView Copy selected interactive Animation and flickers
pic. 2
Create an interactive
A drop-down menu for interactive selection Update a list of interactives
HTML JS
Add an element to interactive Remove selected element from interactive
Interactivity Markup
Stacker allows users to create interactives within InDesign documents. They will be automatically 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 completely 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 didn`t assigned automatically
Change parameter values of interactive and element if required
Exporting Documents to HTML Documents 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-rasterized 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 copying. InDesign will be blocked until export is complete. Upon successful export completion, the extension will automatically 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 WebView
Exporting 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 created 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 document 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 measurement Unlike Adobe DPS Folio, you can use custom color formats to prepare a layout (CMYK, RGB, Lab, Pantone). However, when you export it, all colors will be converted to RGB (Alpha) by Adobe Color Management System. 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. Links According to the Adobe InDesign Link Manager operation model, all linked images are stored in a document in a low quality only, approximately 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 resolution in the application.
out any elements without removing them from a document, you should move them to a separate layer and exclude it from processing in the export management box. Layers and element sequence order Z-order is a “depth”, at which an element resides within a document (considering to InDesign layers). Stacker never alters the element sequence order on the layout. Therefore, the sequence order in a generated 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 interactivity detriment . Besides, such groups are created so as to keep the element sequence order intact. Such approach similar to sprites in web-deOpacity of elements, pasteboard sign (merging small images into one with a transparent background). This Stacker exports layout elements to HTML only if they have graph- approach dramatically increases web-application processing speed of a ic features, such as, fill color, frame color, opacity, placed-in items, etc. If and reduces loading to container speed. an item has visibility turned off (for example, in a layers palette), it means Occasionally, when interactive regions expecting touch-events, (such that element will be exported as turned off, i.e. it will be invisible too. Ele- as buttons) are at the bottom, this mechanism can disrupt the application, ments, which are completely off the layout (being on the pasteboard), are as a merged group can be quite large and geometrically overlap the butalso exported. ton, although visually there will be its transparent region, i.e. the button Important! Avoid littering the pasteboard and turn off visibility of is still visible but it stops receiving touch-events. In this case, Smart mode elements, which are not required in the application. If you need to leave should be turned off for layers above troubled buttons.
InDesign Interactives
Exporting InDesign Interactives (native interactivity) Button
Button – a kind of MSO, which has a limited number 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 multiple 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 transition 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 supported by cyclic control completely (loop). Remember that some events (Show\hide buttons, Go to URL) are carried out immediately after user’s actions and added to the timeline generated by the user’s action (See Timing).
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 interactive training tools in InDesign.
– “Tick” Button marked positions which interacts HTMLStacker
Button crossing, show/hide button Go to URL is similar to hyperlinks transition to an external resource (http://) or an internal DPS command (navto://).
Googling it!
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 actions and added to the timeline generated by the user’s action (See Timing). We have fully implemented this InDesign button feature in the web-application.
Hide top button
Show top button
Links Stacker exports links, which source is a page element, 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 interpreted by browsers, for example Safari OS X and Safari iOS, so using Go to URL buttons instead of links recommended.
Direct link to google.com
MultiStateObject (MSO) MultiStateObjects treated as content containers and fully reproduce their behavior into the web-application. The state, which is visible during the export, will be initially visible in the web-application, state dimensions 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 buttons 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.
Animation InDesign animation tools are designed for exporting 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 “keyFrames” 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 auto-play due to obvious restrictions, as playback actually takes part in the external system player.
Supported VIDEO functions: platform-supported formats playback, poster, stop by buttons, stop by leaving the page, video playback by visiting page (starting ver.25).
Not supported: playback by a button, concurrent playback of several video files.
Supported AUDIO functions: platform-supported formats playback, full control by buttons, stop by leaving the page.
Not supported: concurrent playback of several audio files.
Timing The 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 processing. (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 actions set in the Timing palette, such as, grouping and delay of actions.
Stacker Interactives
Flickers Flickers (meaning “blinking, flashing”) are minimalistic animation effects applicable to elements. Animation effects are set as CSS classes (CSS3 Keyframe animation). Once created, they get connected to the web-application and allow to animate multiple elements 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 interactives, as they are marked up by special tools. However, they never interact to user, they are resistant to touches and device sensors. Guidelines for using flickers are quite simple: neither 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 yourself creating own animation rules and guidelines according to CSS3 (animation-keyframes) rules.
Return to main menu of HTMLStacker
Flicker presets*
Delayed playback (sec.)
Operation period (sec.)
Time functions (it works if a long period of time is set):
In – acceleration
Out – deceleration
InOut – acceleration\ deceleration
* Flicker presets Flickers 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)
Interactive Scenarios Standby time (“latency”) after the start page
General Comments 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 playback of interactives. Thus, ImageSequence starts spontaneously 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 automatic 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-sensor . 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 leftright – 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.
Autoplay
Pause between switching
Сhange playing directions
The parameter block switching G-sensor
Synchronization with other interactive MSO. Set only one (the ‘top’) interactivity.
Tilt sensitivity to switch state
Selecting the direction G-sensor
Interactive synchronization. All MSO-based interactives (Cube, Slideshow, Hotspot, ImageSequence) can be synchronized with each other. Unidirectional synchronization – the first interactive is master (switching), while the second interactive is slave (switched). It enables by the Synchronized parameter. Synchronization occurs according to state indices (rather than names like in DPS). Synchronization work both in combination with AutoPlay and G-control.
Stacker Interactive Multi-state 1
Button Interactive wrapper around an InDesign button. It can be assigned to a button only. Currently, it has one parameter - “draggable� – which makes a button draggable. 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 element is a filter for the action list.
Multi-state 2
Animated item
Media item
Select a color
General palette options view of the interactive Coloration
Touch and erase the mask
The reset interactivity button
Reset Сolor Selection
Coloration This is a prototype of “a coloring book for kids”, when users can color things “as appropriate.” The palette and areas 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. Image templates (layer masks) are placed inside a coloration area. Important! Observance of the overlay layer sequence which working with this interactive. If an active layer is overlapped by any item, it will not work.
The area colorization
Role of the selected element label element and area ratio
General palette options view of the interactive Cube
Cube This 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 sequence of images. The cube follows “the finger”, i.e. rotates 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 Creator”, 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, button-based control and synchronization.
The name of the interactive Rotation direction
General view palette options of the interactive Drag-and-Drop Drag-and-Drop This 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.
The items with the status of “Active Area”
Elements by which the status of objects
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 interactive should have a reset button, which will reset all objects (See Fig.).
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 Gravity
Gravity This interactivity is built on the gravity effect which implements the scenario of objects free interaction according to the physics laws. There may be interactions with the gravity vector, or in zero gravity. Building interactivity should not difficulty, because the objects are divided into two categories:
The elements of interactivity (3 types): – Region - region play; – Static - static elements; – Dynamic - dynamin items.
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.
Gravitation force
Playing direction: – bottom; – top; – left; – right; – bottom left; – bottom right; – top left; – top right. Delay in the startup of interactive (sec.)
General palette options view of the interactive Gallery
Gallery The 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 without 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 multiple images, and several galleries on one and the same page, you should remember that the gallery demonstration 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).
MSO name
Title interactive Center point of application of deformation
A set of presets
General palette options view of the interactive HotSpot
Hotspot Hotspot 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 interactives. It can be used both with buttons or as a separate MSO. In the latter case, it is necessary to allow “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-sensor support.
Title interactive
Transfer options (shift) illustrates: – At the touch finger
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
– Change “by finger” – “None” – to start using another interactive
Visual effect: – switch – fade
General palette options view of the interactive Image Sequence
Image Sequence This 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 fully replace each other or work as additions when every frame complements the existing picture (AddOnSlides parameter). Unlike video clips, a user can control playback 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 explanation, which should be noted and read by a user. Parameters:
Title interactive
• Reverse – switch\reverse order of slides • Add-on slides – switch on additional animation (See above) • Attenuation – attenuation defines how fast animation stops once you release a finger • Sensitivity – sensitivity • Checkpoints – ID numbers of key frames (separated by commas) • Auto-play – automatic playback • G-control – control playback by G-sensor
Function to add slides to an already active, not a replacement. (with the “static camera”)
General palette options view of the interactive Lightbox
Lightbox 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 content. Close Button is not required to control the Lightbox 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 implement nested interactives. Lightbox has only 2 states: auto open and close within a given period of time. Also settings allow to enable only preciously one Lightbox as open state (Singleton). Once it is activated, opening a Lightbox will close all Lightboxes opened before.
Options for the components of interactive*
Title interactive Shadeless** 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 – 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
General palette options view of the interactive Parallax Parallax Parallax (derived from the Greek παραλλάξ, which in its turns comes from παραλλαγή, meaning “change, alteration”) 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 objects 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 picture. 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.
The active elements Area (frame) where playing interactive Title interactive “Multiplier”. Setting the rate index for the ratio tripped elements (1-10)
General palette options view of the interactive Scratch
Еlement interactivity
Scratch This 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 loaded, there can be a small delay in displaying the interactive itself. If there is an image-based background, you will see it before the interactive actually appears.
Title interactive Вrush Size
General palette options view of the interactive Scrollable Frame
Scrollable Frame This 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.
The components of interactivity
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 restrictions, although you should keep in mind that InDesign does not allow pasting MSO-like container inside another 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. Besides, 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.
Orientation “scroll”
The band “scroll”
The effect of “spare wheel” slide
Zoom Options
“Binding” to the height of the container with the Scroll.
Slideshow
General palette options view of the interactive Slideshow
Slideshow 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 limitations (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 containers will synchronize scrolling both for manual and automatic paging.
Title interactive
Inertia “spare wheel” The value of “slow”
The orientation (direction) play: horizontal / vertical limitation of scaling Loop (for auto-scroll frame)
Watch (Clock)
A general view of the palette options interactive Watch
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, minute and optional second hands – can be represented by any InDesign graphic objects.
Objects corresponding to the second, minute and clockwise.
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).
Type of view: synchronized / static The offset relative to the system time
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).
Set the time zone Smoothing the movement of the hands. The angle of rotation watch
Nested Interactive Elements
Embedding HTML Elements Into Layout
In all MSO-based interactives, MultiStateObject can be replaced with a group of elements, as it allows to implement unlimited nesting interactives 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.
element id element className background-image, background-repeat Stacker 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 appropriate. 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).
Inclusion of User Resources
External 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, copied 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 documents 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.
IDSN ObjecStyle to CSS className mapping Connected user CSS files can be used to simplify export of elements, which can correctly be displayed by CSS means, such as, solid and gradient 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; border-radius:10px 10px} In IDSN, create ObjectStyle with styleName and apply it to the element, add a link to the CSS file in Stacker toolbar (Animation section).
CONTACTS Stacker Team, http://htmlstacker.com/ E-mail: support@htmlstacker.com