Custom HTML5 timeline for Articulate Storyline 360

Articulate Storyline, is one of the popular e-Learning authoring tools. Storyline is known for its ease in the workflow for developing an E-learning course. It is suitable for both beginners as well as experts due to its familiar interface. The look is very similar to Microsoft PowerPoint. Articulate Storyline uses a component called “Player” inside…

Adobe Captivate 2017 Review: What is Improved?


Adobe’s new update for its most popular eLearning authoring tool, Captivate 2017 is released now! It is loaded with tons of new exciting features and enhancements! Be it custom eLearning content development, rapid elearning, mobile learning, simulation-based eLearning or microlearning, Adobe Captivate has been the choice of eLearning developers and eLearning providers. This update brings the best of the features which help you reimagine the way you develop HTML5-based interactive eLearning. This means more flexibility in creating fully responsive multi-device eLearning and mLearning content.

In our last blog, we have covered the new features of Adobe Captivate 2017. So for now, we will take a look at the improved features or enhancements to understand what makes it better than Adobe Captivate 9.

Multi-Device Responsive eLearning Authoring – Enhancement:

With Adobe Captivate 2017, creating multi-device eLearning content has never been so easy. Your eLearning content adapts itself to every mobile device without developing the same slide for multiple times for different views. Now you can use Device-Specific previews to see how your eLearning content looks on any device. One publish for all devices. You’d love this enhancement as it reduces redundancy in development saving you a huge amount of time.

Responsive Themes – Enhancement:

The responsive themes are now loaded with Fluid boxes that enable you to render fully responsive content for multiple devices. You can customize themes for an enhanced look and feel with blended backgrounds, styles, fonts, and layouts. You can also save them for future.

Responsive Motion Effects Without Programming – Enhancement:

Take learner engagement to the next level. Create motion effects using fluid object transitions even for responsive elearning projects without any code. Define motion paths and control how objects move.

Shared Advanced Actions – Enhancement:

Applying Shared Advanced Actions within the project is much easier now with the introduction of Conditional tab in the Advanced Actions dialog box. You can now convert standard to conditional action and vice versa eliminating the need to copy and paste the shared action. It saves your time and efforts.


The enhancements in 2017 edition of Adobe Captivate enable you to create advanced multi-device learning with improved flexibility. In addition, it is also power-packed with the ability to convert a non-responsive eLearning project to responsive project, customizable closed captioning and many more.

Source Link:

Adobe Captivate 2017 Review: What’s New and Enhanced for Responsive Mobile Learning?

Adobe Captivate 2017, New HTML5 responsive Smart elearning Tool, mLearning


Adobe Captivate 2017 is released and I am excited to see what this new version has to offer to the eLearning world. With this new version, Adobe has opened the doors for smart and advanced eLearning authoring focusing on mobile learning courses & responsive eLearning design. This eLearning authoring tool lets eLearning Developer create responsive HTML5-based eLearning content without any programming knowledge.

Adobe Captivate 2017, the updated version of Adobe Captivate 9.0.1, can be a game changer as it comes with capabilities to:

  • Reduce eLearning development time with the innovative new Fluid Boxes
  • Transform legacy Adobe Captivate eLearning (desktop) courses into fully responsive eLearning content
  • Deliver engaging, interactive, multi-device eLearning content with no hassles

Adobe Captivate 2017 is now power-packed with lots of exciting new features, enhancements and functionalities like never before. As part of Adobe Captivate 2017 review, we will have a look at the new features and improvements of Adobe Captivate 2017 Release.

New Features of Adobe Captivate 2017

It includes:

  • Adobe Typekit Integration
  • Fluid Boxes
  • Transform legacy desktop-only courses into fully responsive modules
  • Device-specific previews
  • Responsive sliders
  • Responsive text support
  • Customizable closed captions
  • Scalable Vector Graphics (SVG) support

Enhanced Features of Adobe Captivate 2017

It includes:

  • Multiscreen responsive eLearning authoring
  • Responsive themes
  • Responsive Motion Effects without programming
  • Shared Advanced Actions

I will be covering the enhancements in the next blog. But for now, let’s have a closer look at my favorite brand-new features of Adobe Captivate 2017.

Fluid Boxes for True Responsive eLearning:

Creating responsive eLearning courses has never been so easy. With the introduction of Fluid Boxes, you don’t have to worry about the break points to see how your content looks on various devices.

The Fluid Boxes are containers that hold the objects (text and graphics) enabling you use the white space more intelligently. These Fluid Boxes logically resize or align the objects without the developer’s intervention to adjust breakpoints manually. This new feature saves a lot of time and efforts in eLearning development while creating true responsive eLearning experience.

Adobe Typekit Integration:

With the integration of Adobe Captivate with Typekit fonts, you don’t have to limit yourself to the web-safe fonts in your eLearning projects for HTML5 and responsive eLearning courses. This integration will help you access the beautiful fonts from the Typekit font library from the cloud. It provides an optimal and consistent viewing experience across any device ensuring your on-screen text always looks like the way it should be.

Convert legacy courses desktop-only into fully responsive eLearning:

Converting previously created legacy non-responsive Captivate eLearning course to fully responsive eLearning course is now a matter of clicks. Adobe Captivate 2017 comes with the ability to save existing Adobe Captivate eLearning courses as responsive mobile learning courses. Captivate applies the Fluid Boxes to intelligently rearrange and group the objects logically.

Device-Specific Previews and Responsive Slider:

Eliminate the guess work. Now you can use Device-specific previews along with the Responsive slider to see how your eLearning content looks on various devices before the final publish. Select the specific device from the preset device menu to see the output.

You can also drag the responsive slider at the top to see how the eLearning content aligns for varied screen sizes right away in the authoring environment. You can even make a custom size and add it to the list of Device-specific preview.


To conclude, Adobe Captivate 2017 simplifies and speeds up the responsive eLearning aka mobile learning to the next level. The new features and enhancements are worth the upgrade if you are looking for fully responsive eLearning courses aka mobile learning.

So Adobe Captivate 2017 authoring tool is not only intelligent by design but also efficient by nature. I will be covering a few more enhanced features of Captivate 2017 in the upcoming blog. Stay tuned to learn more!


Custom Volume Control – Articulate Storyline 3 or Articulate Storyline 360

The latest release of Articulate Storyline 360 or Storyline 3 has number of exciting new features allowing eLearning developers to explore many more creative ways in developing new interactions. Yet, we still have a few things that cannot be achieved using the native options of Articulate Storyline 360. One such, most requested functionality is, the…

The Demise of the Flash Player – What Do I Do Now?

On July 25, 2017, Adobe made the following announcement:

Adobe is planning to end-of-life Flash. Specifically, we will stop updating and distributing the Flash Player at the end of 2020 and encourage content creators to migrate any existing Flash content to these new open formats.

This announcement has a major impact on any organization which has e-learning courses published to run in Adobe Flash player. And for more than a decade, if you took or built an e-learning course, chances are high that you published or viewed it in the Flash player.

While the end of 2020 seems far away, it is not, especially if your organization has a large library of courses published for Flash output. Now is the time to begin planning your transition from Flash-based courses to alternate delivery platforms such as HTML5.

Here are some questions to consider as you develop your transition plan:

1. What tool was used to build the course?

If it was Adobe Captivate or one of the other big-name authoring tools, you may be in luck. Those tools have the option to publish in both Flash and HTML5 formats. If your course was recently built and published in Flash, it may just be a matter of opening the course’s source file and re-publishing in HTML5. Of course, test your course to ensure its features work well with HTML5. If your course was built in the Flash program, you may have to consider re-building your course with one of the authoring tools mentioned above.

2. How much has your content changed since you first published your course?

You may find as you review your courses – especially the older ones –some content requires updating. The demise of the Flash player brings a great opportunity to review your content, make necessary changes, and then publish it to the HTML5 format. Some older courses were built with text only and no audio. Given the increase in bandwidth that has occurred over the past decade, you may want to re-design the course to include supporting media.

3. What are your plans for mobile delivery?

Until recently, most courses were consumed via desktop computers. Even today, some experts say about 50% of courses are still published solely for desktop delivery. As we near 2020 and organizations re-design and re-publish their existing courses to meet the needs for mobile delivery, we anticipate a huge uptick in this number. Why? If you are updating your content and re-publishing your course in HTML5, it stands to reason that you would make your course available for mobile users. If your course has a shelf-life of 5 years, for instance, what are the odds that at the end of that 5 years, your courses will still be delivered via desktop only? In other words, iif you are taking the time to update your content and publish to HTML5, take the extra step and design it to be viewed on all screens and on all devices.

4. When should I start?

The answer is NOW! Even if you only have a few courses, develop and implement your plan ASAP. While Adobe set its deadline for the end of 2020, it’s really up to the browsers as to when these changes will occur. Let’s say that one of the browsers issues a new release in 2018. If they choose not to support the Flash player with the new release, then your Flash course will not work in that browser at that time. Other browsers may decide to issue challenge statements such as “This page requires the Flash player to run. Do you want to continue?” How many of your learners will know how to answer that? I’m not suggesting that either of these things will happen, but I cannot say for certain that they won’t.

5. Where do I start?


Begin with an inventory of your courses, especially those that require the Flash Player to view. If you’re not sure, look at the course files on your server. If any of the files have the extension .flv or .swf, it relies on the Flash player. If you cannot view files on your server, launch the course in your browser and right-click it. A box like that shown here will appear. If it’s running in the Flash Player, you will see “About Adobe Flash Player” listed as one of the menu options. When building your course inventory, include the following details:

  • Course name (and LMS number)
  • Course format (.swf, .htm)
  • Course length (number of screens)
  • Course time (minutes and seconds)
  • Most recent publication date (mm/yy)
  • Tool used to create the course (Captivate, Storyline, Lectora, Flash, or other)
  • Source file availability (yes or no)
  • Level of content update required (none, minor, or major)
  • Mobile delivery options (yes or no; if yes then list devices)

Put these items into a spreadsheet and develop your plan from there. By doing so, you will help ensure your learners have continued access to your course content after the Flash Player is no longer available.

Best Practices to Migrate Legacy Flash Courses to HTML5 the Right Way

Today, mLearning or mobile learning is an integral part of learning strategy. If you haven’t opted for it, chances are that you are evaluating it. Besides new online training development, you certainly need to evaluate to migrate some or all of you legacy Flash courses to a format that is compatible with Tablets and Smartphones.

In this article, I will begin the challenge that you face (existing Flash courses that are not supported on most mobile devices), the way forward (how to migrate your legacy Flash courses to HTML5 that supports multi-devices including Desktops, Laptops, Tablets and Smartphones). Additionally, I will share some of our best practices that will help you plan this migration exercise effectively so that you can achieve a positive ROI on your investment.


In my earlier article 8 Tips To Convert Flash to HTML5 That Will Help Your Business, I had highlighted the challenge (associated with legacy courses) and the solution (how HTML5 addresses the challenge). Let’s begin with this recap:

The challenge

Over the years, all of us would have created courses that predominantly used Flash for development. With increase in demand to offer mobile learning, you would have realized that Flash courses do not work on most mobile devices. As a result, you need to plan to migrate the existing legacy Flash content to HTML5.

The solution

HTML5 supports all mobile devices (Tablets and Smartphones). Additionally, the more recent browsers support HTML5 enabling you to run the mobile-ready courses on Desktops and Laptops as well. This flexibility now allows a single build to work seamlessly across all devices starting from Desktops/Laptops to Tablets and Smartphones.

Best practices

EI Design Best practices

At EI Design, we have partnered with several organizations globally in their mandate to successfully migrate legacy Flash courses to HTML5. In the last 5 years, we have successfully migrated hundreds of legacy courses. In this journey, we have seen what worked and what did not. Here is a listing of our best practices.

Our best practices map to 3 stages of your planning. Essentially, these are aspects you should put in place prior to the migration exercise. You will see that using these simple and easy to implement best practices will make your migration effort worthwhile and create a positive ROI on you investment.

    1. During pre-planning phase (Pre-requisites)
    2. During scoping (To improve and maximize the effectiveness of the migration initiative)
    3. Key selections (To select the right output through the right authoring tool)


EI Design Pre requisites

The success of any project is in direct proportion to the effort put in the pre-planning stage. We have noted that the success factors during this stage can be enhanced through the following four measures:

    1. Ensure readiness of supporting aspects: This includes browser support for HTML5, Learning Management System support for mobile learning solutions, and updates to your security policy.
    2. Draw up the priority list of courses to be converted from Flash to HTML5: Begin the migration exercise by picking a small number of courses, migrate, and perform a user testing for the feedback. More significantly, assess if the impact you had envisioned is being created (that is, better learning experience for the learners).
    3. Validate that all assets and pre-requisites are in place: We often see delays (typically post the pilot phase) on account of all assets not being accounted for and accessible. Again, this must be in place and availability of assets should be in line with the migration project schedule.
    4. Understand the pros and cons (the trade-off between the punch of learning design capability that Flash offers and what HTML5 can offer): This is probably the most significant aspect to watch out for. The kind of user experience that HTLML5-based designs offer is different from the Flash-based approach. It is very important to understand this, identify the frames that will have a different user experience and have a clear Instructional Design support in place to map certain frames of legacy Flash courses to HTML5.


EI Design Scoping

Watch out for the following three aspects:

    1. Identify the need: Technology update vs. complete redesign: As highlighted earlier, the nature of value addition sought in a course or a series can vary. You must ascertain how you should plan the migration. Some of the cues could be:
        1. Recent courses: These may need technology uplift only (conversion to HTML5 – no Instructional Design and Visual Design enhancements).


        1. Compliance courses: The migration cycle can also factor for textual updates as well as visual enhancements.


        1. Legacy courses: You can only re-use the content and then completely re-design (both from Instructional Design and Visual Design perspectives).


    2. Identify what more do you want to achieve as you craft your mobile learning strategy:Besides providing flexibility to the learners to learn on the device of their choice, it is important to identify the other aspects you may want to address (user experience, learning experience, better retention and performance gain, and so on).


  1. Identify the devices to be supported (including the testing methodology): With the ever expanding range of options available for Tablets and Smartphones, there is no way you can check your HTML5 courses on all. Instead, identify the key models (for both Tablets and Smartphones) and have exhaustive test cases for this. During release, do caution the learners on this aspect.

Key selections

EI Design Key selections

Here you need to watch out for two crucial aspects:

1. Select adaptive vs. responsive designs: You have two options as you begin the migration from Flash to HTML5. You can opt for:

  1. Adaptive: These are multi-device custom mobile learning solutions that support PCs, Laptops, and Tablets.
  2. Responsive: These are multi-device custom mobile learning solutions that support PCs, Laptops, Tablets, and Smartphones.

2. Select the right authoring tool: Selection of the right tool is a tough decision and this must be done so that it can help you deliver the gains you want to accomplish. Today, there are multiple options to choose from. Besides offering adaptive or completely responsive design capability, the tools can be further classified into rapid development (Articulate Studio 13, iSpring, Adapt, and so on) or standard mobile learning authoring tools (Adobe CS6 with CreateJS, Adobe Captivate, Trivantis Lectora, Articulate Storyline, and so on).

I hope this article provides insights on how you can craft the right approach to migrate legacy Flash courses to HTML5. If you have any further questions or would like to see how we have done this exercise for some of our global customers, do contact me.



Pinch/zoom on iPhone

Hi Everybody,

I have just published a test HTML5 question slide in Adobe Captivate 10 with a small format of 320 by 500 px. I disabled the player controls and put it on my server. I than opened it on my iPhone. It looks good, but the slide is basically published in a sort of iFrame. So i Can pinch and zoom within this frame, does anybody know a way to publish without this extra frame around the content?

Hope my explanation is clear.



Latest Features of HTML5 Authoring Tools – Storyline3, Captivate 2017, Lectora 17 and Elucidat

The eLearning authoring tools are playing a huge role in success of eLearning courseware. These tools provide great features to develop effective online modules suited for modern-day learning requirements. Amongst many features that have been developed over the years, responsive learning is the stand out feature that has been highly prioritized by almost every HTML5…

Flash & The Future of Interactive Content for eLearning

Adobe has long played a leadership role in advancing interactivity and creative content – from video, to games and more – on the web.

But as open standards like HTML5, WebGL and WebAssembly have matured over the past several years, most now provide many of the capabilities and functionalities that plugins pioneered and have become a viable alternative for content on the web.

Given this progress, and in collaboration with several of our technology partners – including AppleFacebookGoogleMicrosoft and Mozilla – Adobe is planning to end-of-life Flash. Specifically, we will stop updating and distributing the Flash Player at the end of 2020 and encourage content creators to migrate any existing Flash content to these new open formats.

The full excerpt of this announcement is available here –

If you are an Adobe customer creating eLearning content, here is a quick guide to understanding what it means for you:

– Will Flash content stop working on our content in production now?

While Adobe has announced the end-of-life of Flash, the distribution of the Flash Player will only end in 3 years from now. This date is contingent to our browser technology partners supporting it.

– Are eLearning users adopting HTML5?

67% of Adobe Captivate Users have tried the HTML5 format both for mobile and desktop browsers. The adoption curve has grown from a 15% to 67% in the past 3 years.

How can you migrate your existing content to HTML5?

You can migrate your existing content using Adobe Captivate using your existing project (.cptx) files . You can choose HTML5 as the output format and re-publish them to HTML5, which would work for both desktop and mobile browsers. This will work across previous product versions that have support for HTML5 output.

If you have any queries or concerns, do write to us at


ADOBE CAPTIVATE 2017: Wrapping Fluid Boxes

by Kevin Siegel, COTP, CTT

Fluid Boxes, introduced with Adobe Captivate 2017, make the process of creating a responsive eLearning project faster than ever. If you’ve spent any time playing them I think you’ll agree that they’re pretty, well for lack of a better word, fluid. However, if the amount of email I’ve received recently is any indication, I’m betting you’re struggling a bit with how to control the way content flows (wraps) in a Fluid Box when learners either resize their browser windows or access your content on different screen sizes. Let’s see if I can make sense of the Wrap features you’ll find when working with Fluid Boxes.

To begin, create a new Responsive project (it has to be Responsive because standard projects do not support Fluid Boxes).

Insert a new, blank slide into the project. Then, insert a two row Fluid Box with two rows (click the Fluid Box tool and choose Vertical > 2).

Select the second Fluid Box and draw four shapes. Do the same thing in the third Fluid Box. Then, beginning with the number 1, type a number into each box. In the end, you should have 8 shapes (from 1-8, similar to the image below).

Use the Preview tool to preview from your current slide. At first, you’ll see that the shapes appear in the web browser exactly as you created them within each Fluid Box.

However, as you drag the size slider (at the top of the page) to simulate a smaller and smaller window, the shapes might not wrap within each Fluid Box as you’d like. For example, in the image below, I’m not happy with how two of my shapes ended up on a line all by themselves.

Back on the slide, use the Fluid Box Selector to select the Fluid Box containing the first four shapes. (Selecting a child Fluid Box can be a challenge. If you don’t see the Fluid Box Selector on the Properties Inspector, on the slide click in a corner of any Fluid Box and see if that makes the Fluid Box Selector visible.)

From the Wrap area of the Properties Inspector, choose Squeeze in a column. Do the same thing to the second child Fluid Box.

If you preview now and resize the browser window, the Fluid Box shapes will get squeezed together within each box (none of the shapes will wrap to the next line).

It’s certainly possible that you do want the shapes to wrap to the next line, but you’d like to ensure that no single shape is on a line by itself. No problem. From the Wrap area of the Properties Inspector, choose Symmetrical. Do the same thing to the other Fluid Boxes.

Preview again or drag the Preview Slider (shown in the upper right of the image below) to change the onscreen size and notice this time that the shapes wrap, but in even groups.


If you’re looking to learn Adobe Captivate, we’ve got you covered. Check out these live, online, and 100% interactive Captivate classes.


Kevin Siegel, CTT, COTP, is the founder and president of IconLogic. Following a career in Public Affairs with the U.S. Coast Guard and in private industry, Kevin has spent decades as a technical communicator, classroom and online trainer, public speaker, and has written hundreds of computer training books for adult learners. He has been recognized by Adobe as one of the top trainers world-wide.