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.

Assets gone and won’t download

Since the latest version of Captivate (11.5.0.476) I have been running into a number of issues. The latest one is that all my cut out characters that I downloaded from e-learning bros have disappeared. I can only imagine this is because of the clearprefs.bat file that is advised to be carried out before running the new version – Or am I wrong? Is there any other reason they would be gone?

Also, Now when I go to try and re-download (you can imagine just how ecstatically happy that makes me, to have to download them ALL again!), the download button seems not to work and the asset is nowhere to be found. Please, if I am missing something do let me know. Any help or insight would be most appreciated.

is anyone else’s patience being put to the test with this update?

The post Assets gone and won’t download appeared first on eLearning.

Features that will work outside an LMS in .html format

Hello

I’m looking for some expert advice please.

I do not have an LMS system and I’m rendering Captivate elearning courses in HTML format. I’m wondering which features will work in this format and which I need to avoid.

I’m using Captivate to create simulations of our online research tool. It would be nice if I can simulate users entering keywords into search boxes, clicking check-boxes, clicking buttons/links, opening drop-down menus and selecting options, scrolling down a page, etc. Is any/all of this possible?

Does Adobe have a checklist of which features work in which format?

I’m using the latest version of Captivate.

Thank you, Marion

The post Features that will work outside an LMS in .html format 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.

Captivate Community Points and Questions, Blogs, Videos, Showcases location

Woo hoo!  I made it past 150 points, just by asking questions when I got stuck in Captivate.   It says I will get 3 months free of Captivate!!!  Thanks Adobe!  Does the free Captivate happen automatically or do I need to do anything?

I’d like to give back to the community, plus get a year free of Captivate.  So seems the best way to do both of these is posting blogs and videos.  I see how to post Blogs and Videos in Create a Post button. But before I post anything, I want to see what others have done so I don’t duplicate.

My question is – how do I see the current questions, discussions, videos, blogs and showcases?  The only place I see them is only the latest posts in Community > Home.  I want to view all of the Questions, Discussions, Blogs, Videos and Showcases.

So specifically where do I go to see Captivate Blogs?  Where do I go to see all Captivate Questions? Where do I go to see all Captivate Discussions?  Where do I go to see all Captivate Questions? Where do I go to see all Captivate Videos?  Where do I go to see all Captivate Showcases?

Is there a direct URL to each of these? Or link to each of these on Community > Home that I missed?

The post Captivate Community Points and Questions, Blogs, Videos, Showcases location appeared first on eLearning.