25 Brand New Video Tutorials for Adobe Captivate 2017

hand press play button sign to start or initiate projects as concept

Weather you’re just getting started with Captivate and need some help with creating a shiny new project, or you’ve used the previous versions of Captivate and looking for some help to update your Captivate skills, there’s good news for you!

We have published 25 new video tutorials covering the basic, advanced, and new workflows in Captivate 2017. In these videos, you will learn how to create your first eLearning project, simulation, responsive project, PowerPoint-based project, video demonstration, quiz, etc. You will also learn how to use the Properties Inspector, smart shapes, multi-state objects, fluid boxes, eLearning assets, Typekit fonts, and the other features and functionalities in Captivate. These videos also cover some advanced functionalities of making your courses accessible, using advanced quizzing options, advanced actions, and converting non-responsive courses to responsive format.

 

Here’s the playlist with all the videos:

And here are the direct links for the videos:

  1. Introduction to Adobe Captivate (2017 Release)
  2. What’s New in Adobe Captivate (2017 Release)
  3. Using Fluid Boxes in Adobe Captivate (2017 Release)
  4. Auto-migrate from Non-mobile to Mobile in Adobe Captivate (2017 Release)
  5. Adobe Typekit Integration in Adobe Captivate (2017 Release)
  6. Device-specific Previews in Adobe Captivate (2017 Release)
  7. Closed Captioning in Adobe Captivate (2017 Release)
  8. Create Your First Software Simulation in Adobe Captivate (2017 Release)
  9. Create Your First eLearning Project in Adobe Captivate (2017 Release)
  10. Create Your First Responsive Project in Adobe Captivate (2017 Release)
  11. Create Your First Quiz in Adobe Captivate (2017 Release)
  12. Import Your PowerPoint Content into Adobe Captivate (2017 Release)
  13. Create Your First Video Demo in Adobe Captivate (2017 Release)
  14. Understanding the Properties Inspector in Adobe Captivate (2017 Release)
  15. Using Advanced Actions in Adobe Captivate (2017 Release)
  16. Using Smart shape as a Button in Adobe Captivate (2017 Release)
  17. Storyboarding using Adobe Captivate Draft
  18. Leveraging the 75,000+ Free Assets for Your Courses in Adobe Captivate (2017 Release)
  19. In-product LMS Preview in Adobe Captivate (2017 Release)
  20. Using Multi-state Objects in Adobe Captivate (2017 Release)
  21. Knowledge Check Questions in Adobe Captivate (2017 Release)
  22. Support for 508 Compliance in Adobe Captivate (2017 Release)
  23. Advanced Quizzing – Pre-tests and Branching in Adobe Captivate (2017 Release)
  24. Importing and Editing Audio for Your eLearning Projects in Adobe Captivate (2017 Release)
  25. Importing and Managing Video for Your eLearning Projects in Adobe Captivate (2017 Release)

 

Hope you find these videos helpful.

Happy Captivating!

Adobe Captivate – Advanced Answer Option Using Fluid Boxes

As some of you may know, The advanced answer option hasn’t proven to be all that compatible with the new fluid box responsive design features in Adobe Captivate 2017. Hopefully, this is something that Adobe will rectify in the not too distant future. In the meantime, please check out my workaround that uses a single shape that uses multi-state objects.

Adobe Captivate – Advanced Answer Option Using Fluid Boxes

As some of you may know, The advanced answer option hasn’t proven to be all that compatible with the new fluid box responsive design features in Adobe Captivate 2017. Hopefully, this is something that Adobe will rectify in the not too distant future. In the meantime, please check out my workaround that uses a single shape that uses multi-state objects.

#SmarteLearning with the 2017 Release of Adobe Captivate

In a world of smart-everything, from cities to televisions, why should eLearning be left out?

With an innovative approach to authoring, content, and total cost of ownership, you can be more creative, productive, and inclusive than ever before.

Intelligent Authoring

With Adobe Captivate, put your tool to work! Create fully responsive content, automatically, with all-new Fluid Boxes. Deliver the best experience for your learners’ device without doing anything more. Design with high-quality fonts that are consistent across devices and spring no unpleasant surprises.

Content Transformation

Keep learners engaged! Give legacy desktop courses a makeover, as mobile learning. Don’t just tell them, show them, with best-in-class simulations. Bring content to life with the perfect image or interaction from a library of 75,000+ free eLearning assets. Add an audio track with text-to-speech conversion.

Unlocking Value

Get more value for your spends! Pay-as-you-go with flexible subscription programs for individuals and teams. Sweat assets you already own – roundtrip seamlessly with Adobe Photoshop, Adobe Illustrator and more in Adobe Creative Cloud.

Experience Adobe Captivate!

Adobe Captivate – Converting to Responsive

I originally recorded an #eLearning #Livestream on this same topic but it felt sloppy so I didn’t publish it. Today I decided to record this live stream as a regular video tutorial. In this video tutorial, we review some best practices when converting non-responsive projects into a responsive project. In this video I decide to go with fluid boxes, however, you can also use breakpoints if you prefer that style of design.

I’d love to hear what others are experiencing with this process. Please share your best practices when converting older projects to responsive design using the comments below.

Getting Started with Responsive eLearning using Fluid Boxes in Adobe Captivate (2017 release)

Adobe Captivate (2017 release) packs more punch when compared to its predecessors. In this webinar, you will learn about Fluid Boxes, a feature introduced in Captivate. The new workflow using Fluid Boxes allows you to create responsive projects more easily and works just right when the content is viewed across devices.

All you need are to add Fluid Boxes to the slide, and pick from the simple properties to flow, wrap, and align objects as per your requirement. You can also convert these fluid boxes to static fluid boxes to lock the position of the objects on the screen. Also, if you have any decorative assets in the course, you can mark them as optional, and they will magically disappear in the smaller devices.

Follow the steps as they are shown in the webinar, and see a breathtakingly, refreshing result!

Get Premium Adobe Captivate 2017 Course from Skillshare for FREE!

I’ve added my premium video tutorial to Skillshare.com. Here is a way you can view the full 1 hour and 20 minute course for FREE.

  1. Click the following link http://skl.sh/2iY3hiU
  2. Once you’ve watched the Introduction, click on the Start Your Free Month Today button.
  3. Select the 30-day free trial option
  4. Select your sign in options and payment information
  5. Watch the course.

Of course, if you don’t intend to continue with your Skillshare.com account be sure to cancel before the promo period ends.

Tough Choice: Breakpoints or Fluid Boxes?

Intro

Captivate 2017 added a new workflow for developing responsive projects: Fluid Boxes. It doesn’t mean that the existing workflows to make projects accessible with all devices are no longer important. In this post I will try to talk about my present view on the different develoment methods. It is perfectly  possible that not everyone will agree with my point of view and I would welcome all discussions. At the same time I believe that the current work flow for those Fluid Boxes will be optimized in the future by the team as well, which will probably lead to editing this text. It is valid today, November 2017, about half a year after the launch of the Fluid Boxes method. More than ever, this post is valid today, November 2017 and will certainly change in the future.
future.

Overview Workflows

If you want to publish a project to be accessible from any device, you have to ignore the still available Captivate SWF output! Only HTML5 output can be used. For such a course development  Captivate offers 3 workflows:
  1. Scalable Projects: you can publish a blank (normal) project to HTML5 with the option ‘Scalable HTML Content’ activated.
    This will not result in a real ‘responsive’ project, because the layout will be the same on all screens. Another word sometimes used for this type of project is ‘adaptive’.

    Advantage of this workflow is that the development time will not increase compared with a project that is meant only for desktop/laptop. It can be a good choice for courses that will rarely be viewed on smartphones, and you don’t mind to have only landscape mode. I just wanted to mention this easy workflow, but the rest of this post has its focus on the two other workflows.

  2. Responsive Project with Fluid Boxes which is the work flow introduced with CP2017. I see the result as a solution between the Scalable HTML projects (same layout on all screens) and a  esponsive project developed with Breakpoint views. Such a full responsive project can  have different layouts for diferent screen sizes corresponding with the Breakpoints. When using Fluid boxes the layout will be rearranged by the application depending on the screen size and the settings.  Some items can be left out for small screens but you will not have full control over the design for each size. Moreover there are some limitations which I will explain later on (with possible workarounds and tips). Developing time for this type of project will be in between time needed for scalable project and for a  Breakpoint Views project. Fluid boxes have a great way to make font size changing in a ‘fluid’ way.
  3. Responsive Project with Breakpoint Views is available since version 8. It is no longer the default approachn when starting a responsive project.  You have to switch to this workflow from the Project menu.

    This workflow allows fully responsive projects: you have control over the design for a maximum of 5 resolutions. You can not only leave out items, but also replace them by other items, like replacing an animation or video by a static image or even an icon to cope with smaller screens. Control over the design means control over size and position of each item in each breakpoint. You have to know that developing time for such a fully responsive project will be much larger tahn for the first two workflows.

Example Movies

I published two responsive projects, one developed with Fluid Boxes and another with Breakpoint views. They have the same content, but show limitations and workarounds for the Fluid Boxes, compared with the Breakpoint views development.
Both projects have 4 slides:
  • Title: not all  images which in the Breakpoint example could be used on the Fluid Boxes version because you cannot stack items. I could have combined the images in a graphical application to have one image for Fluid Boxes, but the different effects and timing didn’t have a workaround.
    The images used for the mobile screen (Breakpoint) are different and smaller than for the other breakpoints. Not so for the Fluid Boxes example.
  • Buddies: similar: the ruler cannot be used for Fluid Boxes, at least not when stacked with other images.
  • Content: different items can be clicked to show more information. For the Breakpoint version that information is stacked and Hide/Show is used. Text and images are combined in a group. For the Fluid Boxes I used the workaround by creating one object with different states. Grouping is not possible here.
  • Comparison: maybe less apparent, but I used an effect on a group (image + shape with text) for the Breakpoint view version, since grouping is not possible for Fluid Boxes I had to use separate effect on the items.
Responsive projects cannot be embedded, use these links with any device please:

Breakpoint Views

Difference between Theme Breakpoints and Fluid Boxes

As described in this article, setting up a theme means the creation of a Theme Colors Palette, Object Styles, Master Slides, Skin and eventually Recording defaults. The main differences between Breakpoint Views and Fluid Boxes are in the Object Styles for Text containers and in the Master slides:

Object Styles

Design of Breakpoint Views for text, when decreasing the width of the screen, will keep the font size fixed until the width of the next Breakpoint is reached. That means that for any text container, caption or shape, and for button labels, you need to define a font size for each used Breakpoint. That can be a tedious process, because you have to test it out for all possible screen resolutions. A lot of text styles are needed, both for Standard and for Quizzing Objects.  To improve the readability I will often also increase the leading (distance between lines) since it is set to 1 (term used in Captivate for leading is Spacing).

For Fluid Boxes this is not necessary, because font size will adapt to screen size in a ‘fluid’ way when changing the screen width. It is limited by the ‘minimum size’, which is set at 14pt, which is IMO too high. In previous versions the minimum font size was 10pt which still leads to readable text on smartphones.

Master Slides

I always work in the Expert UI and have different workspaces for Fluid Boxes and for Breakpoint Views because of the specific work when editing master slides. In both workspaces I have Master slides and Filmstrip visible at the same time, which means they need to be in two different docking stations (left and bottomin my case). For both workflows I will have Rulers active on the stage to be able to use guides for a consistent design over different master slides (even more important for Fluid Boxes).
Breakpoint views: the most important panel here is the Position Properties panel. In combination with Rulers/Guides you can size and position all items on the master slides, including the placeholders. For Breakpoint workflow all master slides can be used, including the main master slide. Main master slide is a great tool for items that are common to most slides, including daughter master slides.  The object styles defined in the previous step will be used automatically provided you defined them as default styles! If you plan to use quizzes, do not overlook checking the default quizzing master slides. Labels to be used on quizzing master slides  have to be defined in the Quiz Preferences.

Fluid Boxes do not need the Position Properties panel, except for Static Fluid Boxes. Fluid Boxes are defined with the Properties panel. You cannot use the main master slide for Fluid Boxes, because all default themes with the exception of the Blank theme, have fluid boxes set up.  Even when editing the Blank theme the option Fluid Boxes is unaviailable for the Main master slide. In two previous posts I described the work flow for quizzing master slides and content master slides. Do not forget to have a look at the post about Fluid Boxes and Guides, because those Guides are indispensable to set up a consistent design spanning all master slides.

Limitations and workarounds – Fluid boxes

Do not use objects on the main master slide. Most other limitations are due to the fact that fluid boxes have to be “twodimensional”, which means that you cannot have objects overlapping or stacked in the same location, even if they don’t appear at the same time in the timeline. Here are some of the the results of that 2D paradigm and possible workarounds::
  • Grouping of objects is impossible
    That is not only disappointing for management of crowded timelines, but it also means that group effects are impossible. THse group effects can be very useful, look at this article.
    A widespread workflow consists in having different texts, grouped and  stacked in the same location. Based on a click to show one out of the group can be done with a shared action with two commands: first hides the group, second  shows one text. That work flow is impossible in fluid boxes. You’ll have to create duplicate advanced actions with a lot more commands.
    Lightboxes are also impossible with fluid boxes.
    In many cases a workaround is possible by using one multistate object instead of the group. In the movies for which I posted the links, that approach has been used on slides 3 and 4. Compare both movies. A multistate object can also be an alternative for objects appearing staggered on the timeline, but in the same location. Using an On Enter action with the command Delay Next actions can be a workaround (see Autolists).
  • It is not possible to have an object timed for the rest of the project
    Such an object is often used as alternative for objects (toggle shape buttons or a logo) on the master slide. Since such a object has a unique ID, it can be controlled, hidden on some slides and shown on other slides. Controlling objects on master slides is not possible because they do not have an ID. You’ll need perhaps more master slides when working with Fluid Boxes as workaround.
  • Some types of objects cannot be used: Zoom object, mouse object, highlight box, click box over another object and line object.
    Many users still stick to the the old work flow of putting click boxes over images to create a hotspot. Workaround is to  use a shape filled with the image, a workflow that is available since many years but apparently not well-known.
    For a highlight box: use a shape as well with multistates, one having a thick border and eventually a semi-transparent fill. No workaround however for the outer fill which exists only for a normal highlight box.
    The Line shape is a rebel, often causes issues (only shape that cannot be rotated in Options). You can replace it by a rectangle with a minimum width of 4 px which is the minimum.
If you really need to use a zoom object, mouse object or stacking items in the same location: use a static fluid box. That is the case for the default fluid box where feedback messages are stacked on the Quizzing Master slides. You have to be aware that static fluid boxes will just keep the width/height ratio, but are not really ‘fluid’.

Conclusion

Do not misunderstand my post, because it sometimes looks like I don’t like Fluid Boxes workflow. It is a great way to create responsive projects in much less time than with Breakpoint views, but you need to be aware of what is possible. I am confident  that some of the present limitations will disappear in future releases. Use your design skills and knowledge to judge if a project is suitable to be developed with Fluid Boxes or if you need Breakpoint Views workflow.

If you like Fluid Boxes, do not hesitate to enter feature requests for those limitations that bother you most. It will be a huge help to the Adobe Captivate team.

Make a responsive splash screen with several pictures

Introduction: a few weeks ago I made a video (that you can show again at the bottom of this page) showing a way to make a splash screen for responsive projects. The picture used in this demonstration worked with all the screen sizes but wasn’t responsive. However I mentioned at the end of this video that it was possible to make a responsive splash screen by using Media Queries into the Css file.

I hadn’t explained it because it wasn’t the objective to make a Css lesson in this video, but for people interested, here is the step by step process to make a responsive splash screen with several pictures.

What is the main objective?

Instead of using one picture as shown in my “Customizing a splash screen for its customers and mobile / learning solutions” video, the objective here is to use and insert 3 pictures that will appear and change according to the size of the device or browser, like shown in this short video below:

 

 — STEP BY STEP PROCESS —

Prerequisite

It is better to have already viewed the “Customizing a splash screen for its customers and mobile / learning solutions” video located at the bottom of this page or in the Video category.

Step 1

Unlike shown in the video, don’t fill the “Auto Play” form field in the Start and End menu. Let it blank. Just uncheck the checkbox like below.

pict1

 

 

 

Notice: if you have already filled this field, there is no possibility to make it blank again (Captivate doesn’t allow it). So replace your current picture by a picture that is 1px wide and high in a transparent format. The aim is to put an invisible picture to replace yours.

Step 2

Once your Captivate project is completely finished, publish it to the HTML5 format.

Step 3

To enable your splash screen to be responsive you need to prepare several pictures with different sizes. As said at the beginning, I am going to use 3 different pictures for this presentation and as size for each one I am going to use the same than the ones used by Captivate into its Css file for its “gestureimage*.*.png”.  That means:

  • Mobile size:                             width:186px;  height:350px
  • Mobile Landscape size:         width:335px;  height:281px
  • Tablet size:                              width:531px;  height:277px

Do the same on your side by preparing 3 different pictures with the sizes above-mentioned (of course you can change these sizes or add pictures to your project if you have good knowledge of Media queries.)

Step 4

Once done go to the following path: “yourproject/assets/htmlimages” of your published project at Step 2, and insert your 3 pictures into the “htmlimages” folder.

 pict2

 Step 5

Go to the “css” folder (path: “yourproject/assets/css”) and open the “CpLibraryAll.css” file with a HTML or Css editor.

pict3

Step 6

Within this file, 3 Media queries rules have been generated by default by Captivate. These Media queries rules begin by the following Css syntax: “@media”

(see yellow highlight in the picture below). Identify them into your file.

pict4

Step 7

Make these three Media Queries rules distinct like shown below in order to better edit the next steps.

 pict14

Step 8

Identify the double braces that finish each rule,

pict6

and make two line breaks just before the last one. The result must be like below with a blank line between both.

pict7

 

Step 9

For each blank line, enter the following Css code (see also screenshot below) :

Code for line 1:

#playImage{background-image:url(../htmlimages/mymobileimage.png); width:186px;height:350px}

Code for line 2:

#playImage{background-image:url(../htmlimages/mylandscapeimage.png); width:335px;height:281px}

Code for line 3:

#playImage{background-image:url(../htmlimages/mytabletimage.png); width:531px;height:277px}

Once done replace the name of the “png” picture by yours. Moreover if you haven’t used the same size than me, change also their width and height values).

Notice: “# playImage” is the css ID of the picture.

pict8

 

Step 10

Save your css file.

Step 11

Launch your “index.html” file and check out the result in your browser by resizing it. You should see your three different pictures that appear and change according to the size of your browser like shown in the video at the top of the page.

 

   END OF THE PROCESS   

CONCLUSION / NOTICE

1 – By default Captivate generates three types of Media queries but if you have good knowledge of Css and Media queries you can add others.

2 – This article only describes how to make a responsive splash screen with different pictures. It doesn’t describe the whole process shown in the video below, like the way we hide the picture of the arrow, the customization of the background and the loading page, as other tricks.

So if you want to get a complete overview of how to make a splash screen for mobile and tablet solutions, don’t hesitate to look at this complete video. A teaching aid made with fluid boxes is used.