Rapid eLearning with Adobe Captivate 5.5… HTML5 way!
What is the content all about?
- 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?
- 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.
BTW, how do I hide the playbar?
<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>