When Fluid Boxes were launched in Captivate 2017 Release, I was pleased with this approach to responsive design. However, I felt like some aspects needed improvement. For me, the main thing was resizing of Fluid Boxes. Resizing Fluid Boxes was done by using the blue selection handles and dragging your mouse. Even using Rulers and Guides this was a difficult task of precisely setting up Fluid Boxes of an exact size. I’m pleased to report that with Captivate 2019 you can select the Fluid Boxes to resize them to a precise number of pixels or percentage by selecting the Fluid Box and navigating over to your Position panel. From there you can type in a percentage or pixel count, and you’re done. This is useful when you have a Fluid Box that serves the same purpose on many different slides in your project. For example, a Fluid Box dedicated to slide titles or navigation controls.
Another improvement that we’ve been asking for is the ability to correct for misaligned or improperly distributed objects within a fluid box, or for that matter wrongly distributed fluid boxes within a parent fluid box. Adobe has provided a simple button to distribute these object equally. This works well when I’ve resized something by accident.
I think my favourite improvement to fluid boxes in Captivate 2019 is the ability to align Static Fluid Boxes. Regular Fluid Boxes are great when your content is side by side. However, if you need your content to overlap, or require additional state objects, you need a Static Fluid Box. As we now know, Static Fluid Boxes have to maintain their aspect ratio. This means that as you shrink from one screen size to another, the content in a Static Fluid Box always shrinks with it. In Captivate 2017 the Static Fluid Box would always remain centered within the area for that Fluid Box. It wasn’t always what I had in mind with my design. Fortunately, with Captivate 2019 you can now choose a custom alignment for Static fluid boxes. You can align the Static Fluid Box any number of ways both horizontally and vertically.
This next improvement isn’t an improvement to fluid boxes, but I sure could have used it earlier this year when designing a series of modules for a client whose target device was iPads. This organisation doesn’t use computers, but each location has several iPads for a variety of purposes including training. No problem for me because I have an iPad. There was just one problem. Every time I wanted to test a version of one of the modules, I needed to publish it for HTML5, upload the published course to my web server, email myself the URL so I could pick it up on my iPad and then launch the course. With all the iterations of each module and a total of about two dozen modules, this was time-consuming. Thankfully now I will have access to Live Preview on Devices, a new preview method in Captivate 2019 that displays a QR code on your computer screen. With a mobile device on the same Wi-Fi network as your computer, you point your camera at your screen, and the course magically launches on your device.
I know that some eLearning designer-developers downplay the importance of responsive design, but look around at some of the remote workers and see what equipment they are using. In the early 2000s when the price of laptops came down, we started seeing remote workers using laptops. For example, you might see appliance repair persons, telecom installers and various others using laptops for managing what was traditionally done with pen, paper and clipboards. I’ve been observing these workers using a variety of different tablets and in some cases even larger smartphones. I’ve also seen a restaurant using tablets for the servers to take guest orders. This tells me that responsive design will be the way we all design some day. I predict that if in 5 years time if you’re not designing responsive elearning, you will not have a competitive edge. When you look at the improvements to fluid boxes in Captivate 2019, it is clear that Adobe is preparing for that eventuality.
New Features for Experiential Learning
As you start to work with the new features in Adobe Captivate 2019, you start to see a theme with many of the features. For me, that theme is experiential learning. Of course, some of you would argue that you cannot have experiential eLearning. eLearning isn’t close enough to real life. While we may not be able to immerse learners entirely in reality, this version of Captivate takes a few big steps toward that direction.
For a few years, I’ve been listening to other Captivate developers talk about virtual reality and the dream to design 3D eLearning. That dream is now a reality with Captivate 2019. You can now create a virtual reality eLearning project that learners can view on their computer screen, mobile device and even using a VR headset. Learners can turn in all directions and view whatever environment you wish to display to them. You can make it truly interactive by adding hotspots to perform a variety of different actions. You can play additional audio, display additional images, show the learner a text passage and much more. I’m very interested in seeing how other developers use this feature. If eLearning was a video game, we’ve just gone from Donkey Kong to World of Warcraft.
VR is cool, and everything but I predict that the breakthrough feature of Adobe Captivate 2019 will be the new Interactive Video feature. An interactive video gives you the ability to design video-based learning interactions for your learners that are truly engaging and immersive. You can insert bookmarks on the video timeline and jump to those bookmarks from anywhere in your eLearning project. You can also add overlay slides that will hover over the paused video for learners to gain additional information. You can also add question slides as overlays. You can have the outcome of the question determine where you navigate your learners to depending on how they answer. So for example, if the learner gets a question wrong you can navigate to a portion of the video where the video instructor provides remediation to the learner, or alternatively offer praise to the learner for getting the answer correct.
I’m really excited to not only see what other developers will use these features for, but I’m excited to start telling my clients about what we can now do in eLearning that we couldn’t do today. I’d love to hear what your ideas are. Feel free to put your own suggestions in the comments below and please share this article with your fellow eLearning designer-developers.
Virtual Reality Projects
In this video tutorial, I show you the new Virtual Reality Projects in Adobe Captivate 2019.
In this video tutorial, I show you what I predict will be the standout feature of Adobe Captivate 2019, Interactive Video. I will show you how to add overlay slides to your videos, and interactive items like knowledge check questions. In addition, you will be able to easily add really cool remediation to your interactive videos.
In this video tutorial, I will show you the changes in the Insert Video window in Captivate 2019. You will also learn about the new way to insert YouTube videos into your eLearning project and how to make YouTube videos interactive.
Live Preview on Devices
Before Captivate 2019, if I wanted to preview my designs on a mobile device, I had to publish the whole project, upload it to my web server, email myself a hyperlink and then launch the course from my mobile device. In this video tutorial, I show you how easy it is to do the same thing just by using a simple QR Code reader in iOS or Android devices. No web server required.
Webcam Video Demo
In this video tutorial, I show you how you can record and insert clips from your webcam into your video demo tutorials recorded in Adobe Captivate 2018 Release.
Enhanced Fluid Boxes
In this video tutorial, I show you how fluid boxes have been enhanced and improved in Adobe Captivate 2019 Release
CSV Import for Questions
In this video tutorial, I’ll show you how easy it is to import a variety of question types into your Adobe Captivate project using CSV files that you can edit or create using spreadsheet software such as Microsoft Excel or Apple Numbers.
PowerPoint in Responsive Projects
In this video tutorial, I show you the new ability to import PowerPoint slides into your Adobe Captivate 2019 responsive design project. I probably won’t use this feature, but I see the value in having this feature available to new Captivate users.
Here is how I put it all together…
There are six spots with code. Only five are a part of it and you could get by with just three. There is also a single variable.
Forward button for the information box
Backward button for the information box
The ‘X’ to close out the information box
Help button in lower left corner (Not really a requirement for the box – just there if someone wanted to pull it up again.)
An ‘onEnter’ action (mostly for aesthetics – not required)
Begin button in lower right (this is not really needed though – it was just for the demo)
The information window has a total of five pages. Each of the pages is a different state. I named them step1, step2, step3, step4, and step5.
I then created a variable and called it infoPage. This is to store the current page of the information window. Default value is 1.
First, on each click of the button, I have the variable incremented by 1. The next line of code is one of my favorites. It changes the state of my information box from step 1 to step 2, etc by simply concatenating the infoPage variable onto the word “step” so that it creates the name of the state. Finally, the two IF statements simply show or hide the two buttons as you navigate to help prevent over incrementing or decrementing the value of the variable.
It is essentially the same but decreases the value of infoPage and reverses the show or hide of the two buttons.
The code behind the close button does what you might expect… It hides everything and resets the variable to 1 so that if it is closed in the middle it will restart at the beginning. It also enables the Help and Begin Buttons in the lower corners since they are not active while the information box is up.
The ‘onEnter’ action is nothing more than disabling the two buttons at the bottom. I have the infoBox fade in immediately so I didn’t want the buttons active while the infoBox was active.
Finally, the code behind the Begin box is only there for the sake of the demo. It brings up a box to state that nothing more is available. Of course, this would not be necessary if you actually move forward to the next slide.
Hopefully you can see how this might be done with advanced actions. It is mostly showing and hiding with some change states.
Additionally, I hope it provides you with some ideas for some projects of your own. Feel free to ask any questions.
Join me for this Adobe Captivate eLearning Livestream, where I will be reviewing what I’ve learned after a year of using fluid boxes. Join this live session and have your responsive design fluid box questions ready for the live chat. I will be answering your questions.
Follow the link below at any time to set up a reminder to be notified when this event becomes live on March 20th at 4 PM Eastern Time.
If you enjoy my LIVE STREAMS, please share them with your colleagues and don’t forget to subscribe to my YouTube channel to make sure you’re notified of all my upcoming events.
In this video tutorial, I show you my workflow for creating a single-slide click to reveal that contains both slide audio, as well as additional triggered audio for each state of a multi-state object. Your instinct might be to attach the audio to the individual states of the multi-state audio but you will quickly discover that this doesn’t work so well.
Please note: that this type of interaction will not work with the built-in closed captioning for the additional audio items so you might want to include narration text on-screen for those who require closed captioning for accessibility purposes.
Hey Gang, There will be no live stream the week of 26th. Instead, I will be guest presenting over at Training Magazine. The topic will be Mastering Custom Quizzes with Adobe Captivate 2017.
In this session, you will learn how to…
create a responsive design interface for your question slides in Adobe Captivate 2017 using fluid boxes
setup variables to keep track of the selections made by the users of your eLearning course
write advanced actions that will form the basis of the interaction for your users
write conditional actions that will validate if your user has submitted the correct answers to your questions
convert your questions to become scored final quiz questions
Special Bonus: Participants in the LIVE webinar will receive a coupon for FREE ACCESS to the full Udemy version of this course, including PROJECT FILES so make sure you register and get a seat. Use the following link to register right now.