Event-action model

PubCoder allows you to easily enrich your content with interactivity by defining a series of actions that each object can perform in response to some events, like a tap on the screen or device shaking or tilting. Actions can be combined in lists using a very simple form of visual programming: each action is represented by a “brick” that can be chosen from a menu, and the various bricks can be placed in the list one after another or sticked together, so that they will be performed at the same time.

The Interactivity Panel

The Interactivity panel, at the right of the project window, can be used to define the behavior of the selected object. When an object is selected, the list of events related to that object is displayed on top of the control. Those are the starting points to let the object react with some actions. Some events are more generic and usually related to direct user input (e.g. tap, swipe), some are more specific to the object (e.g. a quiz was completed successfully).

1

Selecting an event (e.g. Tap in the picture) displays the corresponding series of actions that will be executed when the event occurs. If the event already contains some actions, the number of contained actions will be displayed at left of the event name (e.g. 7 in the picture).

You can add an action by clicking the Add New Action button, that will pop up a menu containing a searchable list of all actions that can be applied to the current event - in fact, not every action can be applied to every event, e.g. the Drag Object action can only be applied to the Drag event, since a user dragging on screen is required to actually drag an object.

Once an action was added to the list, its properties can be defined on the stage and in the action inspector in the bottom part of the Interactivity panel: for example, when you add a Move Object action, you can drag the anchor point on the stage to select the destination position of the object while the duration of the movement can be defined in the action inspector.

Actions in the interactivity panel can be dragged to re-arrange their order of execution, and can be also “attached” one to another (like the two Hide Object in the picture above) to be executed at the same time as opposed to one after another.

2

Some actions can target any other object on the page to change their appearance, e.g. moving, rotating, scaling, fading them or bringing them to the front or backwards. Other can act on specific objects: play or stop a video, an audio or a frame-by-frame animation, switching the text of a text box or the image if an image object and so on. There are actions to change page, open a URL, run JavaScript code, apply CSS classes and other that allow to loop or run a group of actions and more. The combinations are really endless, and we keep on adding something new very often. See Generic Actions below for a list of common actions.

Whatever the action you use, you can quickly preview the entire page clicking the Preview button in the Project Window toolbar.

2

To remove an action, simply select it and hit the minus (-) button. Also, for each event, you can use the button at the bottom-right of the list to decide if an action list should be performed whenever the event is fired, only the first time the event is fired or never.

2

Generic Events

Most events are generic to the vast majority of objects, most of them happen in response to user action, such as touching the screen or tilting the device. Here we describe these generic events one by one. For a description of object-specific events, see the help page for each specific object.

Accelerometer

XPUB iOS App Android App HTML5 EPUB KF8

The user gesture of moving the device in the space; accepts only Float Object action.

Appear NEW

XPUB iOS App Android App HTML5 EPUB KF8

Event fired whenever the object becomes actually visible on screen, e.g. following actions such as Move Object or due to page scrolling

Disappear NEW

XPUB iOS App Android App HTML5 EPUB KF8

Event fired whenever the object becomes actually non-visible on screen, e.g. following actions such as Move Object or due to page scrolling

Drag

XPUB iOS App Android App HTML5 EPUB KF8

The user gesture of dragging an object over the screen; accepts only Drag Object action.

Load

XPUB iOS App Android App HTML5 EPUB KF8

The page was loaded and is being displayed on the user device.

Pinch Open

XPUB iOS App Android App HTML5 EPUB KF8

The user gesture of simultaneously moving two fingers outwards on the object on a mobile device (on a desktop computer, it is triggered when the user double-clicks on the object).

Pinch Close

XPUB iOS App Android App HTML5 EPUB KF8

The user gesture of simultaneously moving two fingers inwards on the object on a mobile device (on a desktop computer, it is triggered when the user double-clicks on the object while pressing a modifier key like alt, shift, ctrl or cmd).

Press

XPUB iOS App Android App HTML5 EPUB KF8

The user gesture of touching the object leaving finger down for a while (or clicking on the object with the mouse or trackpad on a desktop computer leaving mouse/trackpad button down for a while)

Read Aloud Started

XPUB iOS App Android App HTML5 EPUB KF8

The Read Aloud playback was just started. Also triggered right after page load when read aloud playback was already active.

Read Aloud Stopped

XPUB iOS App Android App HTML5 EPUB KF8

The Read Aloud playback was just stopped.

Scroll Page NEW

XPUB iOS App Android App HTML5 EPUB KF8

Event continuously raised while vertically scrolling the page. Only a few actions can be used inside this event, like Move Object while Scrolling, Rotate Object while Scrolling, Scale Object while Scrolling and so on.

Scroll Object NEW

XPUB iOS App Android App HTML5 EPUB KF8

Event continuously raised while vertically scrolling a scrollable object like a Text Object or a Smart Object. Only a few actions can be used inside this event, like Move Object while Scrolling, Rotate Object while Scrolling, Scale Object while Scrolling and so on.

Shake

XPUB iOS App Android App HTML5 EPUB KF8

The user is shaking the device in the space.

Show

XPUB iOS App Android App HTML5 EPUB KF8

Event raised when a hidden object is shown by action Show Object, otherwise is triggered on page load for non-hiddden objects.

Swipe Down

XPUB iOS App Android App HTML5 EPUB KF8

The user gesture of swiping the object downwards with its finger (or dragging with the mouse).

Swipe Left

XPUB iOS App Android App HTML5 EPUB KF8

The user gesture of swiping the object to the left with its finger (or dragging with the mouse).

Swipe Right

XPUB iOS App Android App HTML5 EPUB KF8

The user gesture of swiping the object to the right with its finger (or dragging with the mouse).

Swipe Up

XPUB iOS App Android App HTML5 EPUB KF8

The user gesture of swiping the object upwards with its finger (or dragging with the mouse).

Tap

XPUB iOS App Android App HTML5 EPUB KF8

The user gesture of tapping on the object, that is briefly touching the object, quickly raising the finger again on a mobile device (or clicking on the object with the mouse or trackpad on a desktop computer)

Double Tap

XPUB iOS App Android App HTML5 EPUB KF8

Same gesture of tap, but repeated two times quickly

Touch Down

XPUB iOS App Android App HTML5 EPUB KF8

The user gesture of touching the object with its finger (or pressing the mouse or trackpad button with the cursor over the object).

Touch Up

XPUB iOS App Android App HTML5 EPUB KF8

The user gesture of raising the finger up while touching the object (or releasing the mouse or trackpad button after it was pressed on the object).

Generic Actions

Most actions can target any other object on the page, to change their appearance or layout. Here we describe these generic actions one by one. For a description of object-specific actions, see the help page for each specific object.

Hide Object

XPUB iOS App Android App HTML5 EPUB KF8

Hides an object on the page, with or without an effect

Properties
Target the object to hide
Animation the animation effect to use to hide the object, e.g. Fade, Bounce, Zoom, Slide and a lot more
Animation Duration duration in seconds of the animation effect

Hide Objects with CSS Class

XPUB iOS App Android App HTML5 EPUB KF8

Hides all objects with a given CSS class, with or without an effect

Properties
CSS Class the CSS class used to select the objects to hide
Animation the animation effect to use to show the objects, e.g. Fade, Bounce, Zoom, Slide and a lot more
Animation Duration duration in seconds of the animation effect

Show Object

XPUB iOS App Android App HTML5 EPUB KF8

Shows an object that was previously hidden, e.g. by a previous Hide Object action or having its hidden property enabled

Properties
Target the object to show
Animation the animation effect to use to show the object, e.g. Fade, Bounce, Zoom, Slide and a lot more
Animation Duration duration in seconds of the animation effect

Show Objects with CSS Class

XPUB iOS App Android App HTML5 EPUB KF8

Shows all objects with a given CSS class that were previously hidden, e.g. by a previous Hide Object action or having their hidden property enabled

Properties
CSS Class the CSS class used to select the objects to show
Animation the animation effect to use to show the objects, e.g. Fade, Bounce, Zoom, Slide and a lot more
Animation Duration duration in seconds of the animation effect

Move Object

XPUB iOS App Android App HTML5 EPUB KF8

Moves an object on the page in a rectilinear direction. You can use the handle on the target object to move it to the desired position on stage, or define the X,Y movement via properties

Move Object while Scrolling NEW

XPUB iOS App Android App HTML5 EPUB KF8

Just like the Move Object action, this action moves an object on the page in a rectilinear direction. But instead of applying the movement all at once in a given time, the object is moved from its starting position to the final one proportionally while the page (or object) is being scrolled.

Properties
Target The object to move
Scroll Start The y coordinate in px where the movement of the object will begin from the object starting position
Scroll End (0 = Max) The y coordinate in px (or 0 to use the entire height of the page) where the movement of the object will end at the final defined X,Y position
X X pixels coordinate defining horizontal destination position
Y Y pixels coordinate defining vertical destination position

Rotate Object

XPUB iOS App Android App HTML5 EPUB KF8

Rotates an object on the page by a certain amount of degrees. You can use the handles on the target object to rotate it as desired and change the rotation origin, or define the rotation via properties

Rotate Object while Scrolling NEW

XPUB iOS App Android App HTML5 EPUB KF8

Just like the Rotate Object action, this action rotates an object on the page by a certain amount of degrees. But instead of applying the rotation all at once in a given time, the object is rotated from its starting position to the final one proportionally while the page (or object) is being scrolled.

Properties
Target The object to rotate
Scroll Start The y coordinate in px where the rotation of the object will begin from its starting position
Scroll End (0 = Max) The y coordinate in px (or 0 to use the entire height of the page) where the rotation of the object will end with the final rotation
Angle The degrees of rotation that will be applied on the object

Scale Object

XPUB iOS App Android App HTML5 EPUB KF8

Scales an object on stage to a fixed scale or by a fixed amount

Scale Object while Scrolling NEW

XPUB iOS App Android App HTML5 EPUB KF8

Just like the Scale Object action, this action scales an object on stage to a fixed scale. But instead of applying the scale all at once in a given time, the object is scaled from its starting position to the final one proportionally while the page (or object) is being scrolled.

Properties
Target The object to scale
Scroll Start The y coordinate in px where the scaling of the object will begin from its starting position
Scroll End (0 = Max) The y coordinate in px (or 0 to use the entire height of the page) where the scaling of the object will end with the final scaling
Scale X The horizontal scale value of the object (e.g. 2.0 to double its size, 0.5 to make it smaller by a half )
Scale Y The vertical scale value of the object (e.g. 2.0 to double its size, 0.5 to make it smaller by a half )

Drag Object

XPUB iOS App Android App HTML5 EPUB KF8

When added to the event handler of a Drag event, allows the user drag the target object around the screen, meaning that after touching it, the object will follow the user’s finger (or mouse cursor) unless the finger (or mouse button) is raised. Drop zones can be defined, with corresponding action lists that will be executed if the user drops the object on the area. It is also possible to define an object whose bounds will be used to limit the area where the drag can take place, so that the target object cannot be dragged outside of the area.

Properties
Target the object to be dragged
Force to bounds of objects specify an object so that the drag is forced to stay inside its bounds; leave to no selection to allow dragging on the entire page

To define a drop zone, simply click on Add Drop Zone in the action inspector, then define the target for this drop zone and the list of actions to execute when the object is dropped onto the area. Finally, there’s a list of actions connected to drops outside of every defined zone.

Float Object

XPUB iOS App Android App HTML5 EPUB KF8

When added to the event handler of an Accelerometer event, will make the target object float around the screen of the user’s device, following gravity and device tilting.

Properties
Target the object to make float
Force to bounds of objects specify an object so that the float is forced to stay inside its bounds; leave to no selection to allow floating without bounds (not recommended, because the object will quickly fall “out” of the screen)
Acceleration Rate number that defines the rate of acceleration of the object when floating: use a higher value from a faster acceleration, a lower value for a slower acceleration; use a negative number to invert the direction
Bounce if enabled, the object will bounce on the bounds of the object specified in Force to bounds of objects property

Repeat Actions

XPUB iOS App Android App HTML5 EPUB KF8

Repeats the sequence of actions occurred in the same action list before this one

Properties
Repeat Count number of times to repeat the sequence, use 0 to repeat forever

Wait

XPUB iOS App Android App HTML5 EPUB KF8

Waits a certain amount of seconds before executing the next action in the action list

Properties
Time to Wait Time in seconds to wait

Start/Stop Read Aloud

XPUB iOS App Android App HTML5 EPUB KF8

Switches the playback of the Read Aloud from OFF to ON or vice versa.

Play Audio File

XPUB iOS App Android App HTML5 EPUB KF8

Plays an audio file.

Properties
Audio File The audio asset to be played
Wait for Completion If enabled, PubCoder will wait for the audio to complete playback before executing the next action in the same action list, otherwise it will execute the next action immediately

Play, Pause, Play/Pause Soundtrack

XPUB iOS App Android App HTML5 EPUB KF8

These actions switch the soundtrack playback status accordingly

Add CSS Class to Object

XPUB iOS App Android App HTML5 EPUB KF8

Adds a CSS class to the container (usually a DIV) of the target object, altrering its class attribute. See the Code Section to see how to define a custom CSS class via code.

Properties
Target the object to add the class to
Class Name the name of the CSS class to add to the object

Remove CSS Class from Object

XPUB iOS App Android App HTML5 EPUB KF8

Removes a CSS class from the container (usually a DIV) of the target object, altrering its class attribute

Properties
Target the object to remove the class from
Class Name the name of the CSS class to remove from the object

Set Object CSS Style

XPUB iOS App Android App HTML5 EPUB KF8

Assigns a value to a certain CSS property of the container (usually a DIV) of the target object, altrering its style attribute.

Properties
Target the object to set the style to
Property the name of the CSS property that we want to assign
Value the value to assign to the CSS property

Set Object Background Color

XPUB iOS App Android App HTML5 EPUB KF8

Applies a specific color to the background of the target object

Properties
Target the object to apply the background color to
Color the color to apply

Set Object Border

XPUB iOS App Android App HTML5 EPUB KF8

Applies specific border settings to the container of the target object

Properties
Target the object to apply the border settings to
Enabled true to enable to border, false to disable it
Color the color of the border
Thickness the width of the border, in pixels
Corner Radius the radius of the corners of the border, in pixels

Set Object Shadow

XPUB iOS App Android App HTML5 EPUB KF8

Applies specific shadow settings to the container of the target object

Properties
Target the object to apply the border settings to
Shadow true to enable to shadow, false to disable it
Color the color of the shadow
Delta X the amount of pixels to shift the shadow horizontally from the original object position
Delta Y the amount of pixels to shift the shadow vertically from the original object position
Blur number that regulates the amount of blur to apply to the shadow
Transition Duration number of seconds of duration for the animated transition to the new settings, or 0 to apply the new settings immediately

Set Object Opacity NEW

XPUB iOS App Android App HTML5 EPUB KF8

Applies specific opacity settings to the object.

Properties
Target the object to apply opacity settings to
Opacity the opacity value you want to set
Transition Duration number of seconds of duration for the animated transition to the new settings, or 0 to apply the new settings immediately

Set Object Opacity while Scrolling NEW

XPUB iOS App Android App HTML5 EPUB KF8

Applies specific opacity settings to the object as the page scrolls.

Properties
Target the object to apply opacity settings to
Scroll Start The y coordinate in px where the fading of the object will begin from its starting opacity
Scroll End (0 = Max) The y coordinate in px (or 0 to use the entire height of the page) where the fading of the object will end with the final opacity
Opacity the opacity value you want to reach at the end of the scroll

Scroll Content

XPUB iOS App Android App HTML5 EPUB KF8

Scrolls the current page vertically to reach e certain point. For more informations, please see Vertical Scrolling Pages

Properties
Position Y Y pixels coordinate from the top of the page to scroll to
Duration number of seconds for the scroll animation, use 0 to scroll immediately

Bring Back to Initial Layer, Bring Forward, Bring to Front, Send Backward, Send to Back

XPUB iOS App Android App HTML5 EPUB KF8

These actions allow to change the z-index of the layer of the target object, to bring it above or below other objects.

Go To Next Page, Go To Previous Page

XPUB iOS App Android App HTML5 EPUB KF8

Sends the user to the next or previous page in your layout

Go To Page

XPUB iOS App Android App HTML5 EPUB KF8

Sends the user to a certain page in your layout

Properties
Target Page the page to go to

Open App Menu

XPUB iOS App Android App HTML5 EPUB KF8

Opens the navigation menu of the reader app, allowing the user to modify reader settings or exit the reader

Open Localizations Menu

XPUB iOS App Android App HTML5 EPUB KF8

Opens a menu that allows the user to switch language, choosing from the different language renditions included in your exports

Close Reader

XPUB iOS App Android App HTML5 EPUB KF8

Closes the reader that is displaying the contents to the user, going back to PubReader or Shelf screen.

Open URL

XPUB iOS App Android App HTML5 EPUB KF8

Opens a web page to the specified URL, in the current app or in the user favorite browser

Properties
URL URL address of the web page to open
Open in Browser if true, opens the URL in the browser or in a new window (HTML export), otherwise the url will open locally

Run JavaScript

XPUB iOS App Android App HTML5 EPUB KF8

Executes a custom JavaScript and passes immeditaley to the next action in the list

Properties
Code the code to execute