Animation Editor

The Animation Editor of Slide HTML5 allows you to add multimedia and links to the digital content. In addition, this powerful editor can make your digital content much more dynamic and interactive with Time Line and Advanced Event Editor.

Contents of PUB HTML5 Animation Editor



Add Text

You can click the Add Text icon to add it to the page, and then you can input text. You can double click on the text area to edit the text in the pop-up panel.

Also, you can define Properties, Animate and Actions for the inserted text.



Add Link

It is easy to add a link to the book page, and you can set the link area by dragging the box;

After you draw the link area, you can then define link properties such as color and select an Action Option: Go to page, Open a link, Call JavaScript function, Open Photo Slideshow and Play Audio.



Add Image

You are allowed to insert native images from your local computer into the digital content.

Or you can select images from the built-in image library (PNG and GIF).

And then you can define properties, animate and action for the inserted image.




Add Sound

Click the Add Sound button and select an audio file to add it to the page.

You can then set animation properties such as the start time and duration for the audio player.



Add Video

You can embed a local video file, YouTube or Vimeo video into your digital content by clicking the Add Video icon.

If you want to embed online YouTube or Vimeo video, you just need to input the ID.



Add Shape

PUB HTML5 allows you to add various shapes to the book pages: line, arrow line, arrow, ellipse, triangle, prismatic, trapezoid, parallelogram, pentagon, etc. Besides, you can customize the shape with various settings and you can even insert text to the shape.



Add Hot Spot

You are allowed to add Hot Spot to draw readers' attention to a specific item or area. Moreover, you can customize Hot Spot proportions (Width and Height), color and transparency.



Add Button

You are able to add Buttons to the page to trigger actions.

Meanwhile, you can select different kinds of Buttons and customize the Buttons as well.



Add Shape

Slide HTML5 allows you to add various shapes to the digital content: Line, Arrow Line, Arrow, Ellipse, Triangle, Prismatic, Trapezoid, Parallelogram, Pentagon, Cross, etc. Besides, you can customize the Border Width, Border Color, Start Color, End Color, etc. of the Shape and you can even add Text to the Shape.



Add Caption

You can embed Rectangular Caption, Rounded Rectangular Caption, Oval Caption and Cloud Caption into the digital content.



Add Component



1) Add e-Commerce




A. Add PayPal:

You can select a button for the PayPal option first and then you can edit the product with:

(1) Email: Type in your PayPal Email which is used to receive payment from buyers.

(2) Product (Edit Details): Customize Product name, Price, Currency, Product description, Stock, Shipping cost and Delivery time.

(3) ToolTips: Add tooltips for the PayPal button.

Your readers will see the pop-up product window when they click the PayPal button.



B. Add Price:

There are lots of Price buttons for you to choose. You can set Price, Price Caption, Font Family, Font Size, Font Color, etc. for the Price button.



C. Add Discount

You can add Discount items to the digital content and you can choose various icons to set discount (e.g.10% off).



D. Add Star

You can add Star to mark up the rating and popularity of the selling item.



E. Add Product Box

You can display your goods in details with specific images by adding a Product Box. As a result, your readers can click the Thumbnails at the bottom of the product box to view the goods. You can also add a label such as NEW, HOT, POPULAR, FEATURED, BEST VALUE, etc. to the box to make it striking.



2) Add Embed Website

Slide HTML5 allows you to Add Embed Website to the digital content. It is quite easy for you to input the website URL and click the apply button. Besides, you can customize the frame proportions (Width, Height and Angle), Alpha and Shadow.



3) Add SlideShow

It is also very easy for you to create a photo SlideShow with a bundle of images. And you are able to configure SlideShow settings like the proportions (Width, Height and Angle), Play Interval, etc.



Time Line

Apart from allowing you to enrich your digital content with multimedia and other useful objects, the Animation Editor of Slide HTML5 offers a powerful Time Line feature to help you manage the embedded media elements. Therefore, you can define how and when the elements come in and fade away.

You will see the properties panel on the right side after selecting the object you have added to the page. You can click the Animate tab to customize Start Time, Duration, Animation and Ease for both the In Coming and Out Going animation.

You can add multiple objects to one page and set play timing for each object. Also, you can see the animation settings of each object at the bottom the Time Line Manager.



Advanced Event Editor

The non-coding Advanced Event Editor of Slide HTML5 enables you to create gorgeous interactions for the digital content easily. You can use this event editor to interact with embedded media with interactive animations after adding media elements to the digital content.

Step 1: Add Items onto Slide Page

You can insert Text, Image, Sound, Video, Shape, Hot Spot, Button, e-Commerce and Component into the digital content by clicking the item icon on the toolbar.

Step 2: Add Action

You can customize properties, animate and action for the object you have inserted into the page. Then you can click the Action button and select the Advanced Event option.

Note: There is no Action option if you add Sound and Video. However, you can also add interactions to Sound and Video by triggering other objects. For example, you can add a button to trigger actions on the Video.

Step 3: Add Advanced Event

You will see the Advanced Event window pop up when clicking Modify and then you can click the Add New Event button.

Step 4: Customize Advanced Event

1) You can select how to trigger the event: On Mouse Click, On Mouse Down, On Mouse Up, On Mouse Double Click, On Mouse Move, On Mouse Enter and On Mouse Leave.

2) You can select what object to add event among the objects you have inserted.

3) You can select what action to trigger: Play Animation, Change Visible, Change Position, Change Angle, Change Size, Change Alpha, Change Layer, Change Shadow, Change Caption, Change Text Format (for text object only), Change HTML5-Video (for video object only) and Change Website. And then you can customize the selected action (different actions have different settings).

You can click the Save button to save the settings. And then you can go back to the main interface by clicking the Save and Exit button. At last, you may publish the digital content with noticeable interactive animations which have excellent transition effects.