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).
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.
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.
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.
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.
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 NEW
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.
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 the object is displayed on the page, either because the page loaded or because the hidden object was shown by another action
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 NEW
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 a fade out 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 |
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 |
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
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
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
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
XPUB iOS App Android App HTML5 EPUB KF8
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
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.
ibooks:readaloud="startstop" attribute), this action must be placed alone in the action list of a Tap or Touch Down event, no other actions can be executed in the same action listPlay 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 |
| 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
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 |