Contents

Responsive Layouts Creating Phone Apps

Extending the HTML

This tutorial shows how to add your own HTML to the HTML export. Start a new movie and add a HTML object to the library.


Extending the HTML 1

Add some HTML code to the HTML object. This example is a HTML select control. The HTML will be included inline in the HTML export.



<select style="display:block;">
<option>Red</option>
<option>Orange</option>
<option>Yellow</option>
<option>Green</option>
<option>Blue</option>
<option>Indigo</option>
<option>Violet</option>
</select>

Remember to include a 'display:block;' style for the select control. When exported, most HTML controls and objects are hidden by default. This is so the animation can show the control only when needed. To make the select control visible, the display style needs to be changed to block.


Add the HTML object to the library. The HTML code an be seen in the editor. The HTML object can be animated like any other object, but it's content do not scale automatically and it can only be rotated 90 degrees.


Extending the HTML 3

When you press play, the HTML object is empty. HTML is not shown in the player.


Play Play

Extending the HTML 4

When you export the movie, the HTML is included in the export. It is important to note that any mistakes in your HTML could make the export fail.


Extending the HTML 5

The HTML select control is now available in the web page.


Extending the HTML 6

Responsive Layouts Creating Phone Apps