Rapid eLearning with Adobe Captivate 5.5… HTML5 way!
200
0
As you all are aware, we launched an HTML5 contest where you can win an iPad by submitting your HTML5 courses that you have created using Adobe Captivate. All you need to do is convert it to HTML5 format using HTML5 converter for Adobe Captivate 5.5. In that context, I thought of creating a sample project to showcase the power of HTML5 converter. I was contemplating on couple of subjects but finally my favorite topic won… Basics of Photography.What is the content all about?
Try and Learn is a very popular method of teaching any subject. I thought of making use of that principle to teach the concept of Aperture and Shutter Speed in Digital Photography where-in, learner would choose an Aperture setting for a given focal length and try different shutter speeds for those settings.
The plan:
- I had to decide on the project size and as I had mentioned in my earlier post about Adobe Lightroom Tutorial, I preferred 980×660 as the size.
- How about the user experience? For that I decided to have 3-4 types of screens. One to explain the concepts, other to show the questions, and one to show the images clicked, etc. So I opted to do the master slide backgrounds using Adobe Photoshop. For the images, I preferred shooting my own images… I actually enjoyed shooting the pictures 🙂
What should be considered while developing?
Converting the content to HTML5 using HTML5 Converter for Adobe Captivate 5.5 can be really interesting if we consider few thing while creating content.
- Make sure to use rich colors because it looks wonderful in hand-held devices like iPad.
- In this project I used Click Boxes and Text Captions to simulate the question slide. The plan is to go back and forth between the questions whenever the wrong shutter speed is chosen and allow the learners to try and learn.
- Whenever a correct answer is chosen, learner can choose another Aperture to try out a different scenario. For this, I had a custom image button taking them back to the first slide where learner would choose another aperture. So, it is a good idea to create custom image buttons related to the topic being covered.
- It is a good idea to keep the objects little bigger because when it is being experienced on touch devices, learners should be able to use it with ease.
- I’m having navigational interactivity within the project and I don’t need the playbar generated by the HTML5 Converter. So I modified the generated html file… will talk about the code to hide the playbar right below.
Do you want to see how the final project look? Visit http://als.adobe.com/phbasics/
BTW, how do I hide the playbar?
Modify the following code in the html file. You need to add the highlighted part in the html file.
<div id=’frameSlider’ class=’slider shadow’ style=’width:460px;box-shadow: 2px 1px 5px #888888;display:none‘></div>
<div id=’progressPercentage’ style=’width: 100px;position:absolute; right: 2px; bottom: 2px;display:none‘ class=’
<div id=’prevButton’ class=’backButton’ onClick=’goToPreviousSlide()’
<div id=’playPauseButton’ class=’playButton’ onClick=’playPause()’ style=’display:none;’></div>
<div id=’nextButton’ class=’nextButton’ onClick=’goToNextSlide()’ style=’display:none;’></div>
Hope you liked the post! Please let me know your thoughts by adding a comment below.
3 Responses
Leave a reply
You must be logged in to post a comment.
Categories
UPCOMING EVENTS
[…] Go here to see the original: Rapid eLearning with Adobe Captivate 5.5… HTML5 way! « Rapid eLearning | Adobe Captivate Blog […]
Very cool. Nice interface. Thanks for sharing.
[…] Tip: Using the playbar to navigate seems out-of-place in HTML5 content. Here is a nice post that describes how you could hide your playbar. […]