stacker com
DESCRIPTION
Stacker is a plugin (extension) 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.TRANSCRIPT
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: [email protected]