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

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

Drag

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

Load

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

Pinch Open

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

Pinch Close

The user gesture of simultaneously moving two fingers inwards on the object on a mobile device (on a desktop computer, it is raised when the user double-clicks on the object while pressing the alt key).

Shake

The user is shaking the device in the space.

Show

Event raised when the object is displayed on the page, either because the page loaded or because the hidden object was shown by another action

Swipe Down

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

Swipe Left

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

Swipe Right

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

Swipe Up

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

Tap

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 on a desktop computer)

Touch Down

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

Touch Up

The user gesture of raising the finger up while touching the object (or releasing the mouse 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

Hides an object on the page, with or without a fade out effect

Properties
Target the object to hide
Fade Duration duration in seconds of the fade effect, or 0 to hide without fade effect

Show Object

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
Fade Duration duration in seconds of the fade effect, or 0 to show without fade effect

Move Object

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

Properties
Target the object to move
Duration duration in seconds of the move, higher value means slower movement
Acceleration the type of acceleration, e.g. linear, slower at start (ease in) or with a bounce or elastic effect
Mode One between Fixed Position (object moves TO the specified coordinates), Delta (object moves BY the specified interval each time the action is executed), Initial Position (object moves to its initial position on stage), Previous Position (objects moves to the position it had before the last move action)
(Delta) X X pixels coordinate defining horizontal destination position (mode = fixed position) or horizontal movement (mode = delta) to apply
(Delta) Y Y pixels coordinate defining vertical destination position (mode = fixed position) or vertical movement (mode = delta) to apply

Rotate Object

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

Properties
Target the object to rotate
Angle amount of degrees to rotate, positive to rotate clockwise, negative to rotate counter-clockwise
Duration duration in seconds of the rotation, higher value means slower rotation
Acceleration the type of acceleration for the animation, e.g. linear, slower at start (ease in) or with a bounce or elastic effect
Origin the origin point of the rotation, can choose between center (default), various fixed points (e.g. topleft, top, bottom and so on) and custom
Origin X when origin is set to custom a percentage value indicating the horizontal position of the rotation point origin inside the object bounds
Origin Y when origin is set to custom a percentage value indicating the vertical position of the rotation point origin inside the object bounds
Repeat number of times to repeat the rotation; default is 1, use 0 to repeat forever

Scale Object

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

Properties
Target the object to scale
Duration duration in seconds of the scaling, higher value means slower scaling
Acceleration the type of acceleration for the animation, e.g. linear, slower at start (ease in) or with a bounce or elastic effect
Mode One between Absolute (object scales TO the specified size), Delta (object scales BY the specified interval amount)
Scale X when origin is set to absolute, the amount of horizontal scale to apply (e.g. 2x to double the size, 1x to go back to the original size); when origin is set to delta, the amount of scaling to add to the current horizontal scale (e.g. 1x to double the size, then -1x to go back to the original size
Scale Y when origin is set to absolute, the amount of vertical scale to apply (e.g. 2x to double the size, 0.5x to resize to half the original size); when origin is set to delta, the amount of scaling to add to the current vertical scale (e.g. 1x to double the size, then -1x to go back to the original size
Origin the origin point of the scaling, can choose between center (default), various fixed points (e.g. topleft, top, bottom and so on) and custom
Origin X when origin is set to custom a percentage value indicating the horizontal position of the scale origin inside the object bounds
Origin Y when origin is set to custom a percentage value indicating the vertical position of the scale origin inside the object bounds

Drag Object

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

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

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

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

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

Play Audio File

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

These actions switch the soundtrack playback status accordingly, though the user may be able to manage the soundtrack playback on some reader apps.

Add CSS Class to Object

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

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

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

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

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

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
Spread number that regulates the size of the shadow: positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink; Use 0 to use a shadow of the same size as the object
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

Scroll Content

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

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

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

Go To Page

Sends the user to a certain page in your layout

Properties
Target Page the page to go to

Open App Menu

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

Open Localizations Menu

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

Close Reader

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

Open URL

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

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

Properties
Code the code to execute