#eLearning #LIVESTREAM – Designing for the Unknown Device – 09/18/2017, 16:00 EDT

Manufacturers are coming out with new smartphones, tablets and other devices all the time. A skill set that is still relatively new for eLearning designers is designing for responsive design. This Livestream will attempt to uncover some of these secrets and make it easy for you to develop responsive projects in the future.

As per usual, I will also be taking questions if time permits so get your Captivate Questions ready for the Live Chat.

Follow the link right now to set up a reminder to get notified when this event becomes live.

#eLearning #LIVESTREAM – Designing for the Unknown Device – 09/18/2017, 16:00 EDT

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. If you subscribe to my YouTube channel you will receive my Adobe Captivate 2017 – Responsive Custom Quiz Questions online course from Udemy for only $10 (a $50 value).

How to customize a Splash screen for its customers and mobile / tablet learning solutions

When we develop a WebApp or a mobile application (Android or Apple) we usually develop a screen called “Splash screen” that appears before the loading of the application. This screen identifies the project that is being launched and can display a title, an illustration, a learning objective, a company’s logo or other.

With Captivate a screen with a white background and an arrow is generated by default when we publish a responsive project, so this video shows how to customize this screen in order that users, trainees, customers are able to immediately identify the application they are launching as they can do it when they launch their WebApps or Android / Apple mobile applications.

As teaching aid this video uses a responsive project made with fluid boxes.

You can look at this video by clicking on the link or picture below.

Webinar Recording and Handout: Getting Started with Responsive eLearning using Fluid Boxes in Adobe Captivate (2017 release)

Captivate Fluid BoxesFluid Boxes in Adobe Captivate 2017 are magical containers that allow you to create responsive eLearning courses in a snap. Just add the images, videos, animations, buttons, and other objects to the Fluid Boxes and they will automatically arrange on the screen based on the screen size and orientation.

Join me on 25th July, 2017, at 9:00 AM Pacific Time, for a step-by-step guided tour on how to create responsive eLearning courses using Fluid Boxes. You will also learn about the best practices of using Fluid Boxes in Captivate and make the most of them. I will also share a workbook for getting started with Fluid Boxes during the webinar. Don’t miss it!

Webinar title: Getting Started with Responsive eLearning using Fluid Boxes in Adobe Captivate

Date and time: 25th July, 2017 | 9:00 AM PDT

Recording link

Handout

 

Static and Optional Fluid Boxes

A few of my clients who have hired me to teach them about Adobe Captivate 2017 have asked about two things they used to do when designing responsive courses and how to do the same thing using fluid boxes.

The first is the idea of having optional content. In previous versions of adobe captivate you could simply select one of your smaller breakpoints and place optional content off the stage and into the scrap area. When these projects were displayed on smaller devices the optional content would not be visible, yet that content remained for larger displays.

The second idea relates to grouping a series of objects together for alignment purposes. Sometimes you might have several items that need to stay aligned regardless of screen size. In the past grouping these objects together made keeping all the items aligned. Of course in Captivate 2017 grouped objects are not compatible with fluid boxes, so how can we do something similar?

Using Fluid boxes: Knowledge Facts – 2

Please make sure you have read the article – Using Fluid boxes: Knowledge Facts – 1“, to understand this article better.

In this article, I will be discussing some facts you need to know for creating a fluid box layout. This will basically involve giving an overview on what approach needs to be followed for creating a layout with fluid boxes, how to use it and how to insert and handle objects within the layout.

So, let us get started!

Download the sample project here to try it yourself and follow along: Using_fluid_boxes_2

How to Create your Fluid Box Layout:

Since we know creating a fluid box layout is necessary before we start placing our actual content, let us try to create one like shown below:

art2_1

  • Total number of fluid boxes used in above layout are 12.
  • FB_1 is the Root Flex box which comprises of all other fluid boxes.
  • FB_2, FB_3 and FB-4 are the immediate child fluid boxes of FB_1.
  • FB_5, FB_6 are immediate child of FB_2.
  • FB_7, FB_8 are immediate child of FB_3.
  • FB_9, FB_10, FB_11 and FB_12 are immediate child of FB_4.

 

Here is how you create them:

  • Click on Fluid box option art2_2 in the Toolbar.
  • Select 3 fluid boxes to be inserted from the vertical insertion optionart2_3
  • This will insert 4 Fluid boxes. Root Fluid box (FB_1) and three child fluid boxes FB_2, FB_3 and FB_4.
  • Since Root Fluid box, FB_1 is selected, you can resize the child FB_2, FB_3 and FB_4 using the visible resize handle between their common boundary. Move the top resize handle to a bit more top.
  • Select FB_2 and insert two horizontal fluid boxes again using the above-mentioned method. Remember, this time only two child fluid boxes FB_5 and FB_6 will be inserted as a child to FB_2. Parent Fluid box is only added if it is not present on the slide for child fluid boxes to be inserted.
  • Since FB-2 is selected, you can resize the child FB_5 and FB_6 using the visible resize handle between their common boundary. Move the resize handle to right to achieve desired layout.
  • Select FB_3 and insert two horizontal fluid boxes again using the above-mentioned method.
  • Since FB_3 is selected, you can resize the child FB_7 and FB_8 using the visible resize handle between their common boundary. Move resize handle to left to achieve desired layout.
  • Select FB_4 and insert 4 horizontal fluid boxes again using the above-mentioned method.
  • After inserting FB_4 will be selected. Uncheck Stretch to Fit option from the PI for both horizontal and vertical option.
  • Select horizontal alignment option from the PI and chose “Space around” as an alignment option.

 

Your layout is ready. 

 

How to Add objects to a Fluid box:

After your layout is ready, next step is placing your course content within the fluid box.

There are multiple ways of adding content to a fluid box. We will talk about few of them below:

  1. Select the fluid box and insert an object using Captivate tool bar.

 

For example: Let us select FB_8 from the layout we created

art2_4

Go to Toolbar and insert a text caption or press ctrl+shift+C on your keyboard. Text Caption gets inserted to the fluid box. (I have changed color of Text Caption to make it more evident)

art2_5

 

  1. Drag and drop the objects from one fluid box to another

Select the Text caption added in above step and move it from FB_8 to FB_7 (to the left fluid box). When dragging, and dropping an object to fluid box, target fluid box is highlighted in blue color. (In below figure, you can see FB_7 is highlighted)

art2_6

 

Text caption is moved from FB_8 to FB_7.

art2_7

  1. Copy pasting an object works similarly as mentioned in first method after you have selected a fluid box. You can add multiple objects at the same time by pasting objects in to selected fluid box.

 

  1. Importance of Unlock from fluid box: If you want to make any object as a slide object, which is currently part of fluid box, you can enable unlock from fluid box for that object from the PI, upon selecting the object. Other important usage of Unlock from Fluid box can be if you want to do some editing to your object which is not allowed as part of Fluid box, you can choose to unlock the object.

 

Remember, objects which have got “unlock from fluid box” checked cannot be added to any fluid box, unless you disable/uncheck “unlock from fluid box” for those objects.

Important Tip: Always remember Fluid boxes and objects cannot be siblings at the same time at same hierarchal level.

For example, if you have a layout something like below, where FB_1 is the root fluid box and its child are FB_2, FB_3 and FB_4:

art2_8

You cannot add Objects to FB_1. Reason- FB_2, FB_3 and FB_4 are already present as a child to FB_1. You can add more fluid boxes within FB_1, but not objects.

Also, if you would have added a smart shape to FB_2 like below, you will not be allowed to add any fluid boxes within FB_2. If you want to build nested layout within FB_2, you can either delete the smart shape or unlock it from fluid box.

art2_9

Check out Knowledge Fact – 3

Have you started using Fluid Boxes, please share your experience & any questions you have around this new feature…

Using Fluid boxes: Knowledge Facts – 1

In this article, I will be discussing some facts you need to know for getting started on working with fluid boxes. This will basically involve giving an overview on what are fluid boxes, how to use them, insertion and selection of fluid boxes.

So, let us get started!

Download the sample project here to try it yourself and follow along: Using_fluid_boxes_1

What is a Fluid box?

As part of Adobe Captivate 2017 release, Fluid boxes are the containers which layout your content intelligently as per the defined settings. They are adaptive across various devices and screen sizes, to provide great learning experience while maintaining the integrity of your content.

With Fluid boxes, come their properties like Flow direction, Wrapping, Stretching, Alignment, Padding, Optional and Static which we will discuss in detail across this article.

 

How to use Fluid boxes?

One of the most important things to keep in mind while working with fluid boxes is to have a layout design ready for your content before you start placing the actual course content on your slide. This step is a critical one, as it serves to provide a strong base foundation for building your responsive project.

For example: To create a slide as shown below:

art1_1

You must have already prepared a layout, something like this:

art1_2

 

How to insert Fluid boxes?

You can insert Fluid boxes using the Fluid box option art1_3 present in Captivate tool bar.

Upon clicking Fluid Box button, you will see two options:

art1_4

Horizontal and Vertical are the flow direction for your fluid boxes which are inserted as children within your Root Fluid box (I will be referring to the Root fluid box as the main Fluid box on the slides within which all other fluid boxes or objects will be contained). Remember, every time you chose to insert multiple fluid boxes, they get inserted as children within a Root Fluid box.

For example, if you chose to insert two horizontal fluid boxes art1_5, they get inserted on a slide like below:

art1_6

After you insert fluid boxes, always the Root fluid box is selected on the slide and it is highlighted with the dark blue boundary.

The blue handle which is common between the boundary of inserted fluid boxes  is used for resizing the fluid boxes. This will only appear if the parent fluid box of child fluid boxes is selected (In this case it is Root Fluid box by default).

Also, if you notice the Properties panel, a Fluid box selector panel appears which shows the fluid boxes currently inserted on a slide in a hierarchal fashion. Blue color highlight in the Fluid box selector panel shown the fluid box which is currently selected on the slide.

art1_7

 

How to select a Fluid Box?

There are 3 basic ways of selecting a fluid box. One of the basic thing to remember is that when a fluid box is selected on a slide, it is always marked with a dark blue boundary (as shown below).

art1_8

In above figure, child fluid box 2 is selected on the slide, highlighted in dark blue boundary. Label on top of selected fluid box (in this case FB_19) is the name of the fluid box. Arrows on the label represent the flow of selected Fluid box.

 

Ways to select a fluid box:

  1. Click on the empty area within the fluid box
  2. Use the Fluid box selector panel
  3. This approach comes handy if a Fluid box contains other fluid boxes or objects within it and it is hard to find the empty area within the fluid box to click.

 

For example, in a case like below, when there are three text captions filling out the entire area of child fluid box 2, how do you select the fluid box:

art1_9

It is simple. Select any object within the fluid box (In this case I will be selecting the grey text caption). Move your mouse pointer on the boundary of the selected object, which is overlapping with the Fluid box. Fluid box will get highlight in light bluish green color (as shown below). All you must do is click on this highlighted boundary and Fluid box will get selected. Remember, you must click for fluid box to get selected

art1_10

 

Same approach needs to be followed if a fluid box containing child fluid boxes need to be selected. First select any of the child fluid boxes of the fluid box you want to select and then move the mouse pointer to overlapping boundary and then click on the highlighted light bluish green boundary.

Points to be noted-

  • Fluid box which is currently selected is always represented by a solid dark blue boundary.
  • Fluid box which is currently not selected and is serving as a parent for fluid boxes or objects within it, is always represented by a light bluish green boundary upon hovering over its boundary.

Check out the Knowledge Fact – 2

Have you started using Fluid Boxes, please share your experience & any questions you have around this new feature…