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.
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.
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 |
| 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 |