• Version 6.0 is out. now support audio and video! you must keep your software updated.
  • Check YouTube for “FXLexporter” to see our video tutorials
  • Scroll down for more help and code samples.

Not register yet? Create an account by registering to our newsletter,
Get Activation Code to your email and start using FXLexporter in FREE mode.

Register

https://www.epubsystems.com/fxlexporter

copy & paste the link into your browser if these buttons not working on your computer

Want more features?
Buy credit and start using PRO features today.

Buy credit

Only 0.25 $ per page.

FXL Sigil samples

These files will help you to get started.
1. Open selected file in Sigil and change Title, Author name, Language code, ISBN and all meta data as needed.
2. Change the cover.jpg file (good idea…)
3. import all .xhtml files you exported from FXLexporter. (in Text folder, Misc and additional Video/Audio folders)
4.Save as epub file and check it with EpubCheck to fine tune your Ebook (smart idea…)
5. Done! open and read using SifriApp or any other compatible Epub3 reader.

Landscape only. LTR
Spread on Landscape. RTL

Animation, Interactive & Audio

Basics and Things to be Aware Of

  • all layers need to have unique name and comply with HTML id tags. (my_layer and not My Layer)
  • duplicated layers with auto-naming (#NUM/copy suffix) - OR ANY SPACED layer name - will require "override" and will produce same id element according to layer name BEFORE first space. You can use it to duplicate sources across pages, and even to add comments: my_button #4//this is the same button.
    * Note: Remember that on same XHTML page - can't have same element id...
  • Alpha channel of a layer - will differentiate PNG or JPG producing
  • #layer1 means targeting layer with ID "layer1"
  • .class1 means targeting all layers having "class1" class
  • @ divides action from target
  • targets can be packed together: action@#layer1.class2#id3.class4
  • visibility state on export - will set visibility state on page load. (visible audio layer - will cause audio controls to show)
Basic layer name structure:

layer_id_name[class1 class2]{action@#target_id1.target_class2}

Add Classes
[...]

XHTML tag attributes
parameter: classes names

Sample code:
define classes on self layer, and when click - show other_layer (by id).

self_layer[myclass1 myclass2]{show@#other_layer}

hide all layers with class 'myclass2'

other_layer{hide@.myclass2}

Add Actions
{...}

On Click
parameter: action name and target layer
You can add as many actions as you want on any layer
No target – will target the action layer itself

Sample code:
hide self and show other layer and toggle third layer

self_layer{hide}{show@#other_layer}{toggle@#third_layer}

Visibality
hide | show | toggle

On Click
parameter: ID or Class (optional)

Sample code:
hide self

self_layer{hide}

show other layer by ID

self_layer{show@#other_layer}

hide all layers with class 'myclass'

self_layer{hide@.myclass}

toggle other layer by ID

self_layer{toggle@#other_layer}

Link to other page
link

On Click
parameter: ID of page-layer
mostly used with “multiple pages from top-most layers” feature.

Sample code:
link to topmost_page.xhtml

this_page{link@topmost_page}

Open URL in browser
url

On Click
parameter: web link url

Sample code:
open google website in external browser

this_page{url@http://www.google.com}

Animation from Animate.css
'animate' prefix

On Click
call: 
   animate+animation name (note the case)
   use “animated” class name on animated layers
   use delay-Xs and speed-Xs to define time of actions (1-10)

parameter: ID or Class (optional)

Sample code:
slide into the page on click. start after 3 seconds. speed of animation 2 second.

target[animated delay-3s speed-2s]

other_layer{animateslideInRight@#target}

start bounceIn animation on other_layer
- when clicking self_layer

other_layer[animated speed-5s]

self_layer{animatebounceIn@#other_layer}

Auto Animation on page load - from Animate.css
'autoanimate' prefix

On Page load
call:
   autoanimate@animation name (note the case)
   use “animated” class name on the animated layers
   use delay-Xs and speed-Xs to define time of actions (1-10)
parameter: animation name

Sample code:
slide into the page on page load. start after 3 seconds. speed of animation 2 second.

target[animated delay-3s speed-2s]{autoanimate@slideInRight}

start bounceIn animation on other_layer
- when page load

other_layer[animated speed-5s]{autoanimate@bounceIn}

Create Video
file_name<video>

Add a layer with an ID name which is also the file name of the .mp4 file that you will use.
This will create the video resource that is needed in your XHTML page, with a link to the video file in “Video” directory.
(don’t forget to put all your video files there!)
will get controls UI by the OS.

* not resize-able on flex mode export.

parameter: suffix of ‘<video>’

Sample code:
create Audio

my_video_file<audio>

Create Audio
file_name<audio>

Add a layer with an ID name which is also the file name of the .m4a or .mp3 file that you will use.
This will create the audio resource that is needed in your XHTML page, with a link to the audio file in “Audio” directory.
(don’t forget to put all your audio files there!)
if visible – will get controls UI by the OS.

* not resize-able on flex mode export.

parameter: suffix of ‘<audio>’

Sample code:
create Audio

my_audio_file<audio>

Control Audio/Video
play | stop | pause | playstop | playpause

On Click
parameter: ID of special media layer (file name resource)

Sample code:
play my_audio_file (id of the audio layer and the file name - see above)

self_layer{play@#my_audio_file}

toggle between play and stop of an audio

self_layer{playstop@#my_audio_file}

Swipe action
swipeleft | swiperight

On Swipe – ONLY on FLEX export (for Web), mainly for multi pages export use.
parameter: ID of page

Sample code:
change to next page on swipe left AND change to prev page on swipe right

this_page{swipeleft@next_page}{swiperight@prev_page}

Export as image
!

export process
Override the “export as image” global export settings.
parameter: ! prefix

Sample code:
export this text layer as image

!text_layer