May 8, 2018
Set Variables With Interactive Sliders – Part 3 Adding The HTML File To The Stage
Comments
(3)
May 8, 2018
Set Variables With Interactive Sliders – Part 3 Adding The HTML File To The Stage
I am currently a provider of technical training and support in the electronic manufacturing industry. My prior training and work experience as a teacher, network administrator, web design, and instructional design make me well prepared to design it, develop it, and deliver it. I am a father of five, a US Army veteran, and I enjoy playing the guitar as well as performing in local community theater. 
Legend 99 posts
Followers: 153 people
(3)

This is the third part of the series for adding a slider to your project that will update your variables.

If you have not seen the first two, you may want to get caught up.

Part 1 – Introduction

Part 2 – HTML and CSS

In this post we are going to add the HTML file we created in Part 2 to the Captivate stage as an HTML5 Animation. I will give a short textual overview of this  but I also put together a real short video walk-through as well so that you could see it played out.

Make A ZIP File

The HTML5 Animations require a zip file to be loaded so our first step to getting this on the stage is to find a way to zip up the file. You can use whatever zip tool you prefer. If you do not have a zip tool, I would recommend 7-Zip because it is free and does not require any fancy “know-how” to use it.

Add The File To The Stage

Once the zip file is created, we can go back to Captivate. Under the Media icon is an option called HTML5 Animation. Select that one and a window will pop up for you to browse to the location of your zip file. Highlight the zip file and click open. You should see the web object appear on your screen.

Clean Up The Web Object

The object on your stage may not match the dimensions of your slider so resize it and position it as you see fit.
I also removed the border and the scrolling options.

Preview As HTML5 In Browser

You will want to test this, right? Check it out an make sure that it works!

See the video below and stay tuned for the next post where we will add some JavaScript in order to view the value of the slider.

3 Comments
2018-05-10 19:31:04
2018-05-10 19:31:04

Thank you for sharing Greg; nice job!

Like
(1)
2018-05-08 19:00:36
2018-05-08 19:00:36

Neither can I. I’v found some on the Internet but none of them really helped me.

Like
2018-05-08 14:11:18
2018-05-08 14:11:18

Hi Greg. Thanks for posting this. Can’t wait for the part on javascript!

Like
Add Comment