Selected Character Editing Effect – The Code

This post wraps up some code related to two previous posts. In the first, you get to see how navigating left and right will give the appearance of changing a selected character. In the second, we introduce an up and down arrow and the ability to actually edit the characters.

In case you missed those posts, you can find them at the links below.

  1. Blinking Character Effect
  2. Selected Character Editing Effect

OK – let’s take a look at how this was built.


The Characters

I built the “pixel style” characters using PowerPoint and saved each individual letter and number as an image. They are nothing more than a bunch of aligned squares. I created a 5 x 7 grid of squares and aligned them all from side to side and top to bottom. Then I grouped them and made a whole bunch of duplicates. Then, depending on the letter I wanted, I simply deleted the appropriate squares from the grid.

Then, in Captivate, I loaded them all up as states for a single character. Once I had them all loaded and looking the way I wanted, I duplicated it to make eight more. I like this because all of the states come as part of the duplication saving a ton of time – because, seriously, the most time consuming part of this project was making the characters and then making a total of 65 states.

After duplication, I spaced them on the stage underneath the nine masks that I already had out there. The masks are nothing more than boxes which are the same color as the background and sized to cover each character.

Refer to the first link above for the code on the left/right movement and getting the masks to blink.

The Up and Down Arrows

These are used to change the states of the characters. The concept is simple and there is a block of code for each of the nine character locations. The only difference is the reference to the image that needs changing. I will show just one as the other eight are setup the same. This is for the Up arrow.

if (window.step==1) {

cp.goToPreviousState(“pos1”);
–val1;

if (window.val1==0) {
val1=65;
}

}

Ok – so first of all, I have some variables in play here – one for each of the nine characters. They are named val1 thru val9. These are tracking the value of each of the characters 1 thru 65. I also have a variable called step which tracks the location of the selected character position.

So here is how we might read this when someone presses the up arrow.  If we are at step 1 – which is the first position that defaults to a capital ‘C’ – we are going to simply go to the previous state for the selected character (pos1 for position 1)- which would be a capital ‘B’ in this case and then decrement the val1 variable by one. This will change the variable value to a 2. I have the default value of capital ‘C’ as 3.

After that, we are going to do a quick check of the value of the val1 variable.  If we have decremented to the point that val1 is equal to zero, then change it to 65. This is what is used to allow the characters to scroll around in a loop.

That’s it! Just rinse and repeat this code for the other eight characters and change the step value, pos value, and val1 value accordingly. The code is the same for the down arrow except for two things.

  1. I am incrementing the val1 variable instead of decrementing it.
  2. I am going to the Next State instead of the Previous

The Submit Button

The submit button is where we take it all and make it a usable variable. I placed all of the character choices into an array. The trick here is to match the position of each character in the array with the value that gets assigned to each character’s tracking variable (val1, val2, etc.) So the capital ‘C’ which has a value of 3 needs to be number 4 in the array because the array is zero indexed. This is what helps to “pull the letters out” of the editing done with images. Here is a look at the code.

var letters = [“-“, “A”, “B”, “C”, “D”, “E”, “F”, “G”, “H”, “I”, “J”, “K”, “L”, “M”, “N”, “O”, “P”, “Q”, “R”, “S”, “T”, “U”, “V”, “W”, “X”, “Y”, “Z”, “a”, “b”, “c”, “d”, “e”, “f”, “g”, “h”, “i”, “j”, “k”, “l”, “m”, “n”, “o”, “p”, “q”, “r”, “s”, “t”, “u”, “v”, “w”, “x”, “y”, “z”, ” “, “&”, “.”, “0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”];

yourName=letters[val1].concat(letters[val2]).concat(letters[val3]).concat(letters[val4]).concat(letters[val5]).concat(letters[val6]).concat(letters[val7]).concat(letters[val8]).concat(letters[val9]);

cpAPIInterface.gotoSlide(1);

So you can see the big ugly array defined at the top followed by the big ugly concatenation being assigned to a variable I called yourName which is displayed on the next slide. Finally, we have the code to go to slide two (zero indexed).

Hopefully you have gained something useful out of this small project series. I would love to hear how you might use something like this in one of your own projects.

The post Selected Character Editing Effect – The Code appeared first on eLearning.

Copy/Paste Appearance = Two-edged Sword

Intro

Copy/paste appearance is a new feature in the most recent release 11.5.0.476 of Captivate. Many call it a Format Painter like in MS Word, but I do not agree with that statement at all as you will read in this blog post. It is not only my ‘dual’ feeling about this added feature, but it is not acting as the very simple Format painter in Word which is also a ‘two-edged sword’ in the sense that it can be used in a wise way or make your life as developer convert into a hell.

Do I use the Format Painter in Word? Sure, when I have to write a quick short document, which I’m sure I will never have to edit later on. Even in that case I mostly use it for alinea formatting, seldom for text formatting. When creating courses in Captivate (which happened if they were mostly text-based, switched to Framemaker when I could get a license in college, because it handles graphics and other assets lot better) I would NEVER use the format painter. Even Word has Styles for a professional workflow. Captivate is style-based as well, in the sense of Framemaker and InDesign.  Object styles are part of the theme you are using in a course, and have published several posts about it.

In this post I will try to explain which situations are suited for using appearance duplication. It is not possible for every item, as you will discover, and has a hidden gem which you may not have discovered (yet). Let me know if my guess is wrong.

Objects supporting Copy/Paste Appearance

Static objects

First requirement is to have an object style. This means that images, audio, video, bitmap as button, SVG as button can never have their appearance transferred to another item of the same type. You can find all the possible items in the Object Style Manager. Have also a look at the included features in the style. The Transition (Fade in/out with its duration) is part of the object style, when using the Appearance feature it will be transferred as well. The supported objects for appearance pasting are a minority. You cannot use it for Highlight box, zoom object, rollover items although they have an object style:

  • Captions: in the themes packaged with the present versions, all used captions are transparent captions. But the older not-transparent captions are still available. They always come with the Callout pointer in several directions, the used pointer will not be transferred. Have a look at the screenshot below. You can transfer the style of the left caption (pastel orange) to the right caption (default style). top left pointer will not be transferred. But color, font, font size and attribute, alignment, margins, leading (space between lines) and transition will be pasted.
  • Shapes: can also be a text container, but that is not compulsory. Fill, Stroke, Transition and Text properties will be transferred. The shape itself is not part of the style and will not be changed.

After using the Copy/paste feature:

Look at the style names. For the shape the style has been taken over on the second shape, which is great!. However the style of that search caption has been applied but shows a + sign to indicate an overridden style.  I have tried this for quite a lot of captions, it seems to be always the case  and that is bad news! When later on you want to change something in the applied style (here MyCaption), that change would not be applied to the right caption in the screenshots.

Warning

If you use Copy/paste appearance on text captions, and you have decided on the final look you will need to double-check the styles and avoid all overridden styles. If you forget to do so, the slightest edit you’ll have to apply in the future to that style will become a nightmare.

This problem doesn’t exist as you can see for shapes used as text containers. Double-checking at least some never harms of course. Another reason why I rarely use captions as text containers, prefer to use shapes.

Interactive Objects

Text Entry Box, Text Button, Transparent Button, Image button have object styles but you cannot use the Copy/Paste Appearance for those objects, you need to apply object styles. A click box is invisible, so it doesn’t have an object style.

The only interactive object to accept Appearance duplication is the Shape button, my favorite Captivate object! Its object style includes the look of the Inbuilt Styles Normal, Rollover and Down (not Visited).  What is the result of a Copy/paste Appearance. Here are two shape buttons, and their Object States panels. The left button has a custom style MyShapeButton, the right button uses the Default Smart Shape Style of this theme:

You see that I added the 4th InBuilt state, Visited for both buttons. Its default look would be the same as the Normal state but I edited the style. After copy/paste appearance from the left to the right button, you expect to see this:

The good news is that the second button has now also the style MyShapeButton applied to it, same as for a non-button shape. Have a look at the new Object State panel of the right button:

As expected, the Visited state didn’t take on the look of the original MyShapeButton style, except …. for the font and its size! This observation leads me to the last topic:

Hidden Gem

Captivate has no individual Text Styles (no Character styles, no Paragraph styles), they are included in the object styles of the text containers (like shapes and captions, text entry boxes). Up till now I used Copy/Paste appearance to transfer styles between objects from the same type: caption to caption, shape to shape, shape button to shape button. However it is possible to copy/paste the text style between objects who are not the same type. That may not expected between shape and shape button, but it IS possible between Caption and Shape or Shape button!

Workflow:

  • Go into Edit mode for the Caption, and select all the text if you want also to transfer the leading (F2, CTRL A)
  • Right-click, Copy Appearance
  • Go into Edit mode for the Shape, select all text (see above)
  • Right-click, Paste Appearance

If the shape is a shape button, the text style will appear in all the InBuilt states.

Use of Appearance duplication

This new feature can be useful, but should never replace Object styles.  I would use it when being in “Draft” mode and discussing with the client about style choices. Certainly the easy way to transfer text styles is appealing to me. But due to the fact that you can never be sure that object styles will not be overridden (as is the case for captions) there is no way to create the custom theme before double-checking all styles. I start each project with a custom theme, because it can save so many hours of work in the future. The add-ons for themes in this version are also very welcome, but that will be in another article.

The post Copy/Paste Appearance = Two-edged Sword appeared first on eLearning.

Selected Character Editing Effect

In this post, I expand upon my example of the blinking cursor effect by making it so that you can actually edit the characters and store them as a variable to be used elsewhere.

I use the tired old “Enter Your Name” scenario but, of course, you can have it be any sort of entry you like.

This project consists of two slides to show the storage and use of the entered name on the next slide.

The beauty behind this is that it simulates character entry on legacy equipment where you navigate left and right to select a particular character which blinks to let you know which one is the current active character. The up and down arrows then allow you to change the active character.

This project contains all of the capital letters, lower case letters, a space, a period, an ampersand, and the numbers 0 through 9. I have the default text set as Captivate and this is limited to nine characters.

Have some fun trying this out and let me know if you find any useful possibilities with it.

In another post, I will cover the code used to make this work.

Play

The post Selected Character Editing Effect appeared first on eLearning.

Free SVGs From Google For Your Images As Buttons

As I continue to contemplate the implication of images as buttons, I start realizing that some of the more difficult things I used to do are no longer necessary. For example, I used to download font-based icon sets and edit my Index.html file in my published Captivate project to display these fonts to show the icons I used for navigation purposes in my elearning course. Not a hugely tricky thing but still, it required extra steps that I would prefer I didn’t have to take. Now, of course, I can use the SVG-based icons that are in the new Assets Window in Adobe Captivate 2019 (Update 2). Unfortunately, this isn’t a long list, so it got me to thinking, what resource do I know of that includes hundreds of SVG based icons?

I thought of the Material Design Icons that Google maintains for developers looking to use material design in their apps. Of course, these are entirely free, and there is nothing to suggest that they are only for Android apps. I downloaded one or two to test them, and they work great. You can even use the color replace feature, which is excellent if you want to have different rollover and down states for your icons. Click on any of these icons and can choose to download them in SVG or PNG format, although I recommend SVG. You even get to select the color white or black.

Icons – Material Design

The post Free SVGs From Google For Your Images As Buttons appeared first on eLearning.

Building A Calculator – Part 4 – Operation Buttons

In the last three posts, I presented a basic calculator, a quick rundown on creating the framework – or really just the graphical elements of the calculator itself, and covered some code on our number buttons. In case you missed those, you may want to catch up – with the following links.

Part 1 – The Calculator

Part 2 – The Framework

Part 3 – The Numbers

In this post, I want to conclude by working through the code for the rest of the buttons used to make the operations functional.

The Math Functions

Each of the four main math functions (plus, minus, times, and divide) have a similar block of code with just a couple changes between them. In the code for these four buttons  you will notice some new variables coming into play.

  1. plus – flag to track that the plus button was pressed
  2. minus – flag to track that the minus button was pressed
  3. times – flag to track that the times button was pressed
  4. div – flag to track that the divide button was pressed
  5. pos – flag to track that the polarity of the value

The Code for the Math Functions

if (window.screen==1) {
plus=1;
minus=0;
times=0;
div=0;
screen=2;
pos=1;
cp.changeState(“symbol”,”plus”);
cp.enable(“btn1”);
cp.enable(“btn2”);
cp.enable(“btn3”);
cp.enable(“btn4”);
cp.enable(“btn5”);
cp.enable(“btn6”);
cp.enable(“btn7”);
cp.enable(“btn8”);
cp.enable(“btn9”);
cp.enable(“btn0”);
cp.enable(“pctBtn”);
cp.enable(“decBtn”);
btnCount=0;
cp.hide(“currentDisplay1”);
cp.show(“currentDisplay2”);
}

Let’s take a look at what is happening. This code example is from the plus button.

First of all, we only need to verify the first display is active. This is because we are only doing one operation at a time and so the functions are not used when the second value is being entered.

Next, depending on which button is being pressed, the appropriate flag is tripped and I am making sure the others are set to zero. (This is likely one of those areas I might be able to trim the code.)

Then we change the screen variable to 2 which sets us up to populate the second number for our calculation.

We then set the pos variable to 1 in case the value from the first number was negative.

Next we have a change state for the symbol in the upper right corner of the display to show which operation is being performed. In this case, we change it to the plus symbol.

Then we have a block of code to re-enable all the number buttons in the event that all eight characters were used in the first number.

We need to reset the btnCount variable for use with the second display.

Finally, we need to hide the first screen and show the second one which will have a default value of zero.

All that changes between these four buttons is the variable that is tripped and the symbol that is shown.

The Clear Button

This button does what you might expect. It simply resets everything to their default values and then changes any states that need changing and re-enabling buttons.

d1=0;
d2=0;
ans=0;
screen=1;

plus=0;
minus=0;
times=0;
div=0;
pos=1;
btnCount=0;

cp.show(“currentDisplay1”);
cp.hide(“currentDisplay2”);
cp.hide(“currentDisplayAns”);
cp.changeState(“symbol”,”Normal”);
cp.enable(“pctBtn”);
cp.enable(“btn1”);
cp.enable(“btn2”);
cp.enable(“btn3”);
cp.enable(“btn4”);
cp.enable(“btn5”);
cp.enable(“btn6”);
cp.enable(“btn7”);
cp.enable(“btn8”);
cp.enable(“btn9”);
cp.enable(“btn0”);
cp.enable(“decBtn”);

Looking through the code, you should be able to see what is going on.

The Plus/Minus Button

The plus/minus button works to change the polarity of the currently displayed value.

if (window.screen==1) {
if (window.pos==1) {
d1=d1*(-1);
pos=0;
}

else if (window.pos==0) {
d1=d1*(-1)
pos=1;
}
}

if (window.screen==2) {
if (window.pos==1) {
d2=d2*(-1);
pos=0;
}

else if (window.pos==0) {
d2=d2*(-1);
pos=1;
}
}

if ((window.screen==1) && (window.d1==0)) {
pos=1;
}

if ((window.screen==2) && (window.d2==0)) {
pos=1;
}

This looks like a lot of code for this and it probably could be simplified but here is what is happening.

First we need to check which display we are updating so we have an if statement for screen 1 and screen 2 and then we do a check for the current polarity of the value. The math is the same to change the polarity which is to multiply by a negative 1, but the difference is that we need to set the polarity different. So you see pretty much the same code for both screens.

Finally, we see a similar small block of code for when the display is reading zero on either screen. In this case, we don’t change polarity and the variable does not change.

The Percent Button

This one does get sort of ugly in order to deal with the floating point math but here it is. Perhaps there is an easier way but this project was all about what I discovered that would work through trial and error rather than any sort of expertise.

if ((window.screen==2) && ((window.plus==1) || (window.minus==1))) {
d2=parseFloat(((d1*(d2/100))*10/10).toPrecision(8));
}

if ((window.screen==2) && ((window.times==1) || (window.div==1))){
d2=parseFloat(((d2/100)*10/10).toPrecision(8));
}

if ((window.screen==1) && (window.d1!=0)) {
d1=parseFloat(((d1/100)*10/10).toPrecision(8));
}

cp.disable(“pctBtn”);
cp.disable(“decBtn”);
cp.disable(“btn1”);
cp.disable(“btn2”);
cp.disable(“btn3”);
cp.disable(“btn4”);
cp.disable(“btn5”);
cp.disable(“btn6”);
cp.disable(“btn7”);
cp.disable(“btn8”);
cp.disable(“btn9”);
cp.disable(“btn0”);

Let’s take a closer look.

We have four blocks of code shown above. One block to cover the first number, two blocks to cover the second number, and a block to disable other buttons after using the percent button. Starting with the block for screen 1, here is what is going on.

So – if we are on screen 1 and the display reads something other than zero, we perform a calculation to convert the number to a decimal equivalent for percent. Notice that all the disabling code is outside of our if statements. They will execute regardless of which of the if statement runs. I limited its use to one time.

Converting a number to a decimal from percent is as simple as dividing by 100 but that is easier said than done with JavaScript math. You will notice that I have d1/100 in that formula but I also do a multiplication of that by 10/10 (or 1) and I also have a parseFloat and a toPrecision(8) in that mix. All that extra stuff is to prevent the odd occurrence of values out to like 15 decimal places. My study has shown that this is a common problem which needs to be dealt with. While there were lots of solutions offered to try and solve the issue, this one seemed to behave the best for this application. So the toPrecision(8) part allows the calculated result to go to 8 places. I stopped it there to match my display limit of 8 characters. The parseFloat will strip any extra zeroes that are not needed at the end. So that a value such as 0.025000000 would only display as 0.025

For the second screen – things had to work different. So I did several tests with a real calculator to see how it would behave and found that it was different if I multiply or divide vs adding and subtracting. That is why they each have their own formula. For multiplication and division – you will notice the formula is the same as that for screen 1 but if you perform an addition or subtraction, a multiplication of the screen1 value is performed first. Try it on your phone calculator and you will see what I mean.

The Equals Button

So I saved the best for last – Ha Ha. If you thought the percent button was ugly – get a load of this…

if (window.screen==2) {

if (window.plus==1) {
ans=parseFloat(((d1*10/10)+(d2*10/10)).toPrecision(8));
}
if (window.minus==1) {
ans=parseFloat((((d1*10)-(d2*10))/10).toPrecision(8));
}
if (window.times==1) {
ans=parseFloat((d1*d2).toPrecision(8));
}
if (window.div==1) {
ans=parseFloat(((d1/d2)*10/10).toPrecision(8));
}

cp.hide(“currentDisplay1”);
cp.hide(“currentDisplay2”);
cp.show(“currentDisplayAns”);
cp.changeState(“symbol”,”Normal”);
screen=3;
}

if (window.ans>99999999) {
ans=”Error”;
}

if (window.ans<-99999999) {
ans=”Error”;
}

Ok – so maybe I exaggerated a little bit. Here is what we have going on…

First of all, the equals button only fires if we are currently on screen 2. That is because if we are on screen 1 – we would only have one number and we would need two in order to perform a calculation. Then we see a formula for each of the four functions. The end result is basically d1+d2, d1-d2, d1*d2, and d1/d2 but we have to do all the other JavaScript gymnastics to get the display to show the answer nicely. The extra multiplication and division stuff also helps to convert all the strings to numbers so they can be worked with. So these four if statements will check to see which operation flag was tripped and perform the appropriate calculation.

Next we make sure the two entry displays are hidden and that our answer display is showing.

We remove the symbol for the math operation and set our screen variable to 3.

The final check here is that we look to see if our answer exceeds the limits of our display. If it does – we display the word “Error”.

Conclusion

There are still a couple bugs or issues here and there that need some tweaking but I found this to be a worthwhile project for my own growth. I plan to investigate a bit more into improving the calculator. That will involve cleaning up some code and trying to get some values stored into an array to allow a sequence of operations instead of just one at a time. Whenever that happens, I will be sure to post about it. In the meantime, maybe some of you can take away something valuable from all of this.

The post Building A Calculator – Part 4 – Operation Buttons appeared first on eLearning.

Blinking Character Effect

In this post, I present an effect where a character blinks as if selected as part of an editing screen.

This sample uses a single image with masks that blink over the top. This should give the appearance that the selection is changing as you press the left and right buttons. This sample merely shows the blinking effect – no editing.

In another post – I will present a more developed example where you can actually edit the characters.

As with all code – there are probably many ways to get the job done. Here is what I came up with.

++step;

if (window.step==10) {
step=1;
}

if (window.step==1) {

flashOn1();

function flashOn1() {
cp.hide(“mask1”);
setTimeout(flashOff1, 500);
}

function flashOff1() {
cp.show(“mask1”);

if (window.step==1) {
setTimeout(flashOn1, 500);
}

else {
stop1();
}
}

function stop1() {
cp.hide(“mask1”);
}
}

Let’s examine.

The first line simply increments a single variable called step which tracks the letter that is currently active from left to right. (C=1 and e=9)

The second part says that if we increment to 10 then we need to switch to 1. This is the effective loop around when going to the right. A similar piece of code is there if looping by going left.

Next we have the code for the blinking mask. This is nothing more than a series of setTimeout() methods that point to each other and either show or hide the mask every half second.
The tricky part is that we have to have a way out of the blinking loop when we navigate to the next character.

So it might read this way…  if step is equal to 1 which means we have the C selected, activate the flashOn1() function. This will hide the mask and allow us to see the letter. It will then fire the flashOff1() function in a half second which will show the mask and effectively cover the letter. The next couple parts simply define what the functions will do when they are called.

Notice that within the flashOff1() function there is an embedded if statement that checks to see if the step variable is still a value of 1. If it is we will run the flashOn() function again. If not, we will run the stop1() function. This is our way out of the loop when a new character is selected. This function simply hides the mask and allows the character to stay visible without a blink effect. At that point, the newly selected character should blink with similar code.

Check it out and stay tuned for the version where we actually can edit those characters.

Play

The post Blinking Character Effect appeared first on eLearning.

Naming conventions in development

First of all, what are naming conventions? Good question! Our definition first, then we’ll share some wider thoughts on the topic. Naming conventions allow us to apply a pattern and standard to the way we name things within our computer environment. This could be from names of actual files, to folders, to how we store contacts in a CRM (“First name, Last name” or “Last Name, First Name” for example). If we have a standard by which we name things, it makes it easier to search, organise and see at a glance, what things actually are.

According to Wikipedia, “A naming convention is a convention (generally agreed scheme) for naming things. Conventions differ in their intents, which may include to: Allow useful information to be deduced from the names based on regularities.”

Read our full blog post here – https://learningplan.com.au/naming-conventions/

image from Pexels

Depth of Field Photography of File Arrangement

The post Naming conventions in development appeared first on eLearning.

Edit SVG’s in Captivate 11.5

Intro

If you have read my first blog about this major update, you will know that the extended functionality of SVG’s for use as buttons is one of my favourites. Moreover you get some editing features within Captivate (new as well). That means that you don’t have to do a roundtripping with Illustrator (or use another vector editing application) if you just want to change some colors. This blog is meant for those who are bit new to vector images, and the way paths are used.  Next post will be about roundtripping with Illustrator for more complicated editing.

You may also ignore that the new Assets Panel (wait for an in-depth exploration in the near future) includes a set of ‘icons’ which are SVG’s. Same for the hotspots used in 360 slides. All SVG’s in your project end up in a dedicated folder of the project Library.

Example slide

I used only assets in this slide from the audio and icons part. All icons have edited colors (not meant as a design example) to illustrate the workflow I will explain in this post (and later on in an interactive video). The biggest SVG in the center of the slide is configured as a button. You can click it as many times as you want, you’ll be able to listen to some of the audio assets. There is no poster image in this example, just the default Play button.

Play

Step-by-step ‘Edit colors’

I will explain this for the Normal state of the big SVG which you clicked in the example slide.

1. Insert SVG and resize

As I explained in the intro, this SVG is one of the Icons in the new Assets panel. Insert it from that panel (name ‘Cover’). You can resize either by using the Options tab of the Properties panel for the SVG, or by dragging a corner with the mouse while keepoing SHIFT pressed to preserve the width-height Ratio. Since this is a vector image, you’ll see that it remains crisp even when enlarged considerably.  The original icon uses a uniform dark grey. I check the option to use it as a button, and uncheck the option to make the whole bounding box clickable (Enable Click in Bounding box). You can see that the bounding box extends above the image. There is an option to ‘Fit to Bounding box’ but it would have distorted the SVG.

Step 2: Edit mode

To enter edit mode for the SVG double click the SVG. You find the tooltip when hovering over the Fill in the Properties panel. Do not use the button ‘Edit SVG’, which would let you choose an editing application on your system, nor the option Edit with Illustrator.

Step 3: Select a ‘path’

A vector image is composed mostly from several paths, which can have a width (may be variable) and/or a Fill. The image I used as example has 3 paths, all closed and with a fill. You select a path by clicking it. Selected path will have a blue surrounding line as you can see in this screenshot:

Step 4: change color

Click the Fill icon in the Properties panel to open the Color dialog box. For this simple demo slide I used the color wheel to select a color. In a normal project I would have used the Theme Colors palette of course. Click OK to confirm the color change. Repeat that workflow to the remaining shapes.

SVG button states

When you convert a SVG to a button, the InBuilt states Rollover and Down are added automatically. You can use the edit workflow described above for each of those states. I added also the Visited state (with a speech bubble) and the custom state ‘Done’ which appears after you have listened to the 5 available audio clips. Here is the Object state panel of the big SVG button:

The Visited state is selected in this screenshot. Look at the Properties panel: you see that the opacity is reduced to 50%. This always applies to the full SVG, but in this case only to this state of course. You see a user variable inserted in the added speech bubble. That bubble has no reduced opacity, it is not part of the original SVG but an added shape£.

More?

Main topic is finished, you may stop reading if you want. But for the curious fans,  the audio clips are attached to a state in a second multistate object, which is a shape to which I added an icon in the Normal state (no audio) and an audio clip with its name to the other states.

The Advanced action triggered by the big SVG buttone:

No need to trigger the Visited state, it appears automatically after the first click on the SVG button.

The post Edit SVG’s in Captivate 11.5 appeared first on eLearning.

How To Use Interactive Video-Based Learning To Enhance Your Training’s Impact

The adoption of video-based training is on a roll. In this article, I outline how you can use its Next-Gen avatar, interactive video-based learning, and enhance your training’s impact.

Using Interactive Video-Based Learning To Enhance Your Training’s Impact

Using videos for training has been an established practice for over a decade. With the wider usage of mobile learning and microlearning, we are seeing an exponential increase in the usage of video-based learning that can be consumed on the go, in short bites.

We know the impact of videos for learning, but did you know that it does have certain drawbacks or limitations that are equally important to note. These include:

  1. Most of us tend to forget the content after the initial run length of 45-60 seconds. So, the “Forgetting Curve” may set in if the run length of the video is over 2 mins.
  2. Even though videos offer an “on demand” training, they have an intrinsic limitation of “passivity”. This stems from the fact that the only controls learners have are the start/stop/pause. Therefore, after the initial few seconds, the learners may not be as engaged.
  3. Although videos offer high recall, in the traditional format they are not effective for higher levels of cognition like check-pointing the understanding or its application.
  4. We cannot track the learner’s usage of the video.

How Can You Offset The Drawbacks Or Limitations In Video-Based Learning?

The interactive video-based learning is the NextGen avatar of video-based learning, and it successfully mitigates the above said challenges. In fact, it will take the learning experience up by several notches.

Through interactive video-based Learning:

  • You can transform the passivity of traditional videos to highly engaging interactions. These include interactions that are widely used in eLearning, such as Click to Reveal, Hot spots, Carousal and so on.
  • You can validate or checkpoint the learners’ progress as well as learning through inline checks as well as quizzes or end of video assessments.
  • You can also help learners understand the impact/consequences of their decisions by offering branching pathways. At certain junctures of the videos, the learners’ decisions take them to different paths. This technique can help them practice the application of learning in a safe environment.
  • You can track the learners’ progress and performance on LMS.

Tip: This is not all. You can convert any of your existing videos (in traditional format) to an interactive video-based learning format and create more engaging and higher impact training.

Can Interactive Video-Based Learning Strategies Be Used To Meet Varied Corporate Training Needs?

You can apply interactive video-based learning across your varied corporate training needs. They can be used for:

  • Formal learning
  • Informal learning
  • Performance Support or Just-In-Time Learning
  • Supporting ILT/VILT training

Here is a list of our top 5 interactive video-based learning strategies:

  1. Create a learning journey that has multiple videos in the Microlearning format to support formal training.
  2. Offer microlearning videos within the learners’ workflow as Performance Support (job aids).
  3. Offer personalized video-based learning paths to the learners.
  4. Curate videos from YouTube and customize them for your learning needs.
  5. Integrate other interesting components like gamification, Virtual Reality, or Augmented Reality to create highly immersive learning experiences.

What Are The Value-adds That Interactive Video-Based Learning Offers?

There are several value-adds as you use interactive video-based learning. Here are the top 5:

  • You can use interactive video-based learning as short, bite-sized nuggets. Learners can consume this on the go, on the device of their choice.
  • With interactive video-based learning, you need to be concerned about the run length of the video. You can focus on the learning outcome and use the rich range of learning interactions to meet the learning mandate.
  • Similar to eLearning courses, you can add intermittent checkpoints or end of video assessments.
  • You can offer branching options (at certain decision points, learners make choices that take them through unique pathways). This approach creates a highly sticky learning experience plus it enables you to move the cognition level to the application (from recall or understand).
  • Similar to other eLearning courses, you can track the learners’ progress as the interactive videos support both SCORM and Tin Can.

What Are The Key Features Of An Interactive Video Framework?

we had created our interactive video-based learning framework three years ago to help our customers see a 10X impact vis-à-vis tractional video-based learning.

Highlights Of Our Interactive Video-Based Learning Framework

  • Extensive range of interactions that will keep the learners engaged. You can use them to create a sticky learning experience (similar to interactions in an eLearning course).
  • Wide range of assessment formats that can be used to checkpoint the learner’s knowledge.
  • SCORM/Tin Can output to track the learner’s progress and performance.

Key Features Of Our Interactive Video-Based Learning Framework

  • Multi-Device Support
    The interactive video-based learning framework can run seamlessly on the device of the learner’s choice (ranging from desktops or laptops to tablets and smartphones).
  • SCORM And Tin Can Support
    Our framework is compatible with SCORM 1.2, 2004, AICC, and Tin Can and can be hosted on LMS/LRS. It can also run as a standalone piece on a web server.
  • A Wide Range Of Interactivities And Knowledge Checks
    We offer a wide range of learning interactions that learners are used to in traditional eLearning including:
  1. Hotspots
  2. Click and Reveal
  3. Carousal
  4. Drop-down
  5. Timed Activity
  6. Drag and Drop
  7. Branching based on learner decisions
  8. Fill in the blanks-based assessments
  9. Single choice assessments
  10. Multiple choice assessments
  • Learner Analytics
    Our interactive video-based learning framework provides detailed analysis and reports of the learner’s usage pattern.
  • Performance Indicator
    Our framework also shows the performance of the learner, via a visual performance indicator. This tracks the learner’s progress through the learning journey.
  • Gamified Activities
    To engage the learner and make it more interesting, we have gamified elements and activities in the framework. The learner can gain points, badges, and trophies as they complete these activities.
  • Flexibility
    Our interactive video-based learning framework can process any video and make it interactive, but its real power lies in its ability to integrate videos from YouTube and create a learning path to meet specific learning outcomes. The output can be tracked as it is available in a SCORM/Tin Can format.

As you would have noted, there are several compelling reasons why you should opt for interactive video-based learning (instead of or alongside the traditional video-based learning). I hope this article provides the required insights that will help you use it and enhance your training’s impact.

If you have any specific queries, leave a comment below.

Source: https://www.eidesign.net/how-to-use-interactive-video-based-learning-to-enhance-your-trainings-impact/

The post How To Use Interactive Video-Based Learning To Enhance Your Training’s Impact appeared first on eLearning.

[Webinar] Introducing Hot New Social And UGC Features For Informal Learning From Adobe Captivate Prime

Creating a culture of learning is dependent upon engaging learners in all aspects of your learning and training programs. One powerful way to facilitate a culture of learning within your organization is to provide opportunities for learners to share informal learning materials, contribute their own content and to provide an architecture that can support ongoing discussion, evaluation and promotion of those learning materials.
Unfortunately, informal learning materials contributed without opportunities to review and curate those materials based on their potential credibility and value to the organization can create legal and ethical barriers to the adoption of such an open culture of knowledge sharing within an organization.
Join Katrina Marie Baker, Senior Learning Evangelist, Adobe to learn how these challenges can be easily addressed with Adobe Captivate Prime. You’ll discover how gamification, social learning, informal learning and user generated content may be implemented easily in your organization – while still maintaining ample opportunities to review, track and curate those contributions.
During this session, the attendees will learn how to:
  • How do informal learning and user generated content support an active culture of learning?
  • How can you provide an architecture for tracking and moderating user generated content?
  • How does social learning enhance ongoing informal learning in your organization?
  • How can an automated system help your non-specialists classify and align informal contributions to industry established skill / competency definitions?

The post [Webinar] Introducing Hot New Social And UGC Features For Informal Learning From Adobe Captivate Prime appeared first on eLearning.