Change state variable to endlessly select and deselect an image

Dear community,

I have created a slide in an online module where I ask learners to select up to 4 images. The images are inserted in gray scale (state 1) and when selected change state to their colored version (state 2). Now due to their task it is possible that they decide to deselect an image again after having selected it in the first place.

For this to work I created a variable (“clickendlessly”)  and when running the Advanced Action (conditional) the variable “is equal to 0” so that a click on an image changes its state to state 2 (color). The variable is toggled so “if ELSE” by clicking again it changes back to gray (state 1). So far so clear.

Now, when I switch between the 4 images, e.g. I first clicked image 1 and it changed its color to state 2 and I click on image 2, what happens now is that the first click kind of only selects the image and only when selected by clicking it again the advanced action is “released” and change of state therefore needs a second click. Once selected I can change state again and again. But as soon as I move on to another image I need to select the image first (click 1) and change state/color works only with click 2.

Question: Is that how it is and I have to live with it OR is there any way around it? So that whenever clicking on an image it changes color right away, no need for the “pre selection process”?

Help would be great!

Thanks in advance!

Jane

The post Change state variable to endlessly select and deselect an image appeared first on eLearning.

Which Button Type? – Part 2

Newer Button types

In the first part you have explored the old types of buttons: Text button, Transparent Button and Image button.  From my comments you detect that I only use Transparent buttons on quiz slides and score slide, but very rarely the other types. Reason is that since they appeared with Captivate 6 I always used Shape buttons. With the most recent release, 11.5, two new possibilities were added: using bitmap images, or SVG’s as buttons. I know, in the release notes they only talk about images used as buttons, but there is a considerable difference between bitmap image buttons and SVG buttons. That is the new trio of buttons, topic of this post.

Common features

You did read in Part 1 about the common features for all buttons, and those common to all the three older button types. These are the common features for the newer buttons:

  • They can be used on master slides. Those will not have an ID, cannot be controlled by actions.
  • They can be timed for the rest of the project. That way you create one button with a unique ID which can be controlled (Hide/Show, Enable/Disable)
  • They can not be used as embedded buttons on quiz and score slides.
  • They can be used as extra (custom) button on a quiz or a score slide.

This list is not as long as for the old trio. To see specific features for each type continue reading.

Shape Button

A smart shape with the option “Use as button’ checked in its Properties, is not so new anymore. Since many years my number 1. Why?  Have a look at this 7 years old blog post: “Why I like Shape Buttons“. I even presented several webinars for Adobe about this type of button.

Such a shape button has some features taken over from the old trio:

  • Its timeline is green. A Smart shape has a blue timeline, which turns green when you check the option ‘Use as button’, identifying it as an interactive object.
  • Shapes have multiple default object styles, which you can check/define in the Object Style Manager. However you do not see a default style for a Shape button. Since any shape can be used as a button, each of the styles has the  InBuilt states Normal, Rollover and Down (not Visited) included. Similar to all object styles shape (buton) styles will be included in the (custom) theme.
  • They will not show up in the Library, are not available in the Assets panel neither.

Shape button has also some similarities to the Transparent button, concerning the style: you can fill a shape with a solid color, a gradient, a texture or an image. You can also indicate color and width of the stroke. But, a shape button can have any shape, transparent buttons are limited to rectangle and rounded rectangle shape. This  is even valid for the states: you can switch to another shape in the InBuilt or custom states. Only rule is that the original bounding box location/size of the Normal state has to be preserved. Look at the Object state panel of (maybe too exaggerated style) of this shape button:

Personally I appreciate also the fact that the label can be typed in the shape, you don’t need to use the Properties panel (Text and Transparent button). I defined an object style for this button. It will include the edited image (Normal and Down state), the gradient and the text style for the Rollover state, and all strokes. Object style will not have the different shapes (Normal state is a freeform shape).

Shape button is the only button type which will allow Copy/Paste appearance as well! Read more in Copy/Paste Appearance.

If you are not yet convinced that this a very flexible type of button, look at the common features for the three buttons in this post.

Here are some minus points:

  • If you want the shape to be filled with an image, only bitmap images can be used (as for trnasparent buttons). To have a crisp looking image, create it in exactly the same size as the shape button. More details in ‘Turn an image into a button
  • You will find no Shape buttons in the Library,  only images if you used them s fill. I recommend to create a subfolder for images used in shape buttons. The Buttons section in the Assets panel neither has shape buttons.
  • Shape buttons automatically shrink when pressed, trying to simulate a a real button.  Some developers do not like that effect (which you’ll also see in the two other button types of this post). Mixed feelings: I don’t care about this feature, but not everyone agrees. It would have been better to leave the choice to the Captivate developer.

Bitmap image as Button

New type available since version 11.5. Instead of filling a shape with an image you can now convert a bitmap image (PNG, JPEG, GIF…) directly to a button. Just check the option in the Properties panel. You’ll see immediately that the default three InBuilt states appear in the panel:

You can swap images in the states, using the button indicated in this screenshot by a red rounded rectangle. In this example I used three different images from the series Brady (Illustrated category). You can add a text container in each state, but it is not really embedded in the image itself, or you can choose an image which has text in the graphics. Here I just used the character images.

You cannot define an object style s.

If you open the Assets panel, you’ll find a group titled ‘Buttons’. All the buttons in this group are of this type. However, the three InBuilt states will show identical images. In a previous article about the Asset panel I offered a tip to make it possible to have different images show up when inserting a button from this panel. That make it a lot easier to reuse buttons from this type: insert them from the Assets panel.

Common features described at the start are valid for this type as well.

Features which are less appealing:

  • Contrary to all buttons discussed before, this type keeps the blue timeline of any non-interactive object.
  • It is a bitmap image, which means quality loss when rescaling. Rescaling happens for Rescalable HTML output and in responsive projects.
  • Shrinking happens for this type as well, may be very visible (with simple buttons like the ones in the Asset panel) or barely visible for a big character button like I showed in the screenshots.

SVG as Button

I have already blogged about this type in the already mentioned blog with Tips for the Assets Panel, but also in “Edit SVG’s“. Up till now it has never been possible to use a SVG in an interactive object like a shape button or a transparent button. For the first time you can use a vector-based image as a button, which is great news for responsive projects and rescalable HTML5 projects. They share the common features with the two other types of this post.

SVG’s also may have a smaller file size than their bitmap counterparts. I have converted some png-files from the Characters, Illustrated category to SVG’s. File size reduced to about 30% of the png filesize.Look

At least as exciting is the fact that the clickable area for a SVG need NOT be the bounding box of the image. Look at the Properties panel:

Watch the option ‘Fit to Bounding Box’, with the associated slider (blue rounded rectangle). In the default situation the slide will be at its maximum (to the right) which means the bounding box is filled with the SVG. I created some padding as you can see, by moving the slider to the left. The green rectangle indicates the option to define the clickable area. Default setting is ‘Enable Click’ which means the legacy situation where the bounding box is clickable everywhere. I unchecked it, and now the clickable area is limited to the SVG space. Expect in the near future to see a use case where this innovative feature will be used.

Similar to Bitmap image as button, no object styles are possible. The used SVG’s will appear in the Project Library. If you used the same SVG for each state its name will appear with a usage of 3 or more (if you have more states). For a more complicated image, I recommend to create the SVG’s separately (I use Illustrator) and import them to the Project Library. In this screenshot you see a Delete button, for which I used one of the provided Icons in the Assets panel, converted it to a button.  But unlike the Bitmap images, there is no way to include a different image for the other InBuilt states.

Negative points:

  • Like its twin (Bitmap as button), this type keeps the blue timeline of any non-interactive object. Should have turned green (logged feature request).
  • Shrinking happens for this type as well,
  • No easy way to reuse a SVG button with all its states.

Conclusion

Here are my personal conclusions:

  1. If I need a button which maintains a high quality image on many different screen resolutions use a SVG aton.
  2. If reusability of certain buttons is important, and I need to localize them as well, I will use a shape button except…
  3. For quiz and score slides as embedded buttons I have no choice but need to use Transparent buttons.
  4. I am not tempted by bitmaps as buttons, except for a rare complicated button. Even though it is bit more cumbersome, in all other situations will use a shape button filled with the image.
  5. I never use Text buttons.
  6. I only use an image button in that Tweak situation described in the first post.

Would love to hear your ideas!

The post Which Button Type? – Part 2 appeared first on eLearning.

Which Button Type? – Part 1

  • Intro

Captivate ‘s most recent release, 11.5.0.476 added two types to the button treasure chest. You all know that the button is perhaps the most used interactive object. If you are only creating non-responsive projects, you may sometimes replace it by a click box, but that is not a possibility for Fluid Boxes projects.  In this post you’ll find an overview of all button types, with their advantages and disadvantages.

Common features

Here is a short list of what you’ll find in any button, whatever its type:

  • The ability to pause the playhead or not by adding a pausing point, which you can do in the Timing Properties panel. The pausing point will appear with the typical pause symbol on the button timeline. Pausing point will not stop everything (see Pausing Timeline).
  • Two events ‘Success’ and ‘Last Attempt’ (not with Infinite attempts) which you can use to trigger any possible action. Success event means clicking the button, Failure means clicking outside of the button.
  • Add-on of two extra InBuilts state on top of the Normal state Rollover and Down states. A fourth InBuilt state exists but is not automatically created; Visited. Inbuilt states typically appear in a situation. The form of the button in those states has size and location locked to the Normal state. however you can add more items in each state and define Custom states as well.

The 6 types can be divided in two groups of 3:

  1. Old types (which I have known since I started using Captivate) – topic of this blog post
  2. Newer  types will be in part 2

Old Button Types

Those are Text buttons, Transparent buttons and Image buttons. They can be added using the Interactions button, option Button.  You will always get a Text button. If you want a Transparent or an Image button, you have to open the dropdown list under Style Name in the Properties panel. Image button is the second choice, Transparent the third. In this screenshot (same for most included themes) two more styles are visible, both for quiz buttons (which are also transparent buttons).

Some features are common for those three older types:

  • Their timeline is green.
  • They have  a default object style, which you can define in the Object Style Manager. The object style includes the InBuilt states Normal, Rollover and Down (not Visited). Like all object styles they will be included in the (custom) theme. Multiple object styles are possible for each type. To reuse such a button use either the theme, or you can export/import individual styles in a new project.
  • Bounding box of the button is the clickable area, whatever the shape of the button (for image buttons).
  • They cannot be used on master slides.
  • They cannot be timed for the rest of the project.
  • They can be used for the embedded buttons on quiz and score slides.
  • They cannot be used as extra (custom) button on a quiz or a score slide.
  • You cannot use copy/paste appearance, not even between buttons of the same type.
  • They will not show up in the Library.

Text Button

This type is always rectangular. Fill nor stroke can be edited. You can only make the button transparent, which results in only the Label showing up (see screenshot with dropdown list for the checkbox ‘Make Transparent’. Look at this screenshot for a possible ‘look’ of the states:

The text on the button needs to be typed under ‘Caption’ in the Properties panel, not in the button itself. The text can be formatted: font, font size, font color and attribute.

Tips for use

Since Captivate 6 I have never used this type anymore. Not being able to use theme colors for its style is a show stopper for me. Using the option ‘Make transparent’ is not very appealing since it still keeps the bounding box as clickable area. Personally I regret that this button type is the default type when using the Button option under Interactions.

Transparent Button

This type can be a rectangle or a rounded rectangle.  Fill can be edited, offers the same options as shapes: Solid color, gradient, texture or image fill. The button text needs also to be typed in the Properties panel (same as for Text button). Font styling has same features as with text button. There is no ‘Make Transparent’ option, but you can edit the Opacity for the fill and the width of the stroke. Setting both to 0 will result in transparency. The name of the button type is bit confusing, don’t you think. Usually that button is not transparent, but the most flexible of the old types. Have a look at this example:

Tips for use

Since quiz and score slides need an old type for the embedded buttons, this one is my preferred type. That is due to its better styling options, which makes it possible to give the transparent button exactly the same look as a shape button (which is still more flexible). You may wonder: why not an Image button? Read below why.

Image button

Before shapes appeared with version 6 I have created a lot of image buttons. You need a graphics application to do so:

  • Create three graphics (bitmap), you are free to choose the type. I mostly use PNG (allows alpha channel), but you can use BMP (was the original choice), GIF… Graphics need to be exactly the same size.
  • The images need to have the same name, but followed by _up, _over, _down.  You can see a lot of image buttons in the GalleryButtons under the installation folder:
  • Save the buttons in the same folder, doesn’t have to be the GalleryButtons folder. You would need administrator rights to add them in that folder.
  • After inserting an image button, use either the dropdown list (for included image buttons) or the Browse icon (for custom image buttons stored elsewhere) and point to one of the graphics. Which one is not important, Captivate will recognize the other graphics and use them for the appropriate state.

    You see that the name on the button needs to be part of the image which is one of the disadvantages of this type of buttons. You need a lot of duplicates, each with its proper label as you could see in the excerpt from GalleryButtons shown above. You see also that the size of the button is mentioned next to its description, for the included buttons. Since those are bitmap image, it is best to use them at their original size. Increasing the size leads to loss of crispness as is very well visible in the last screenshot.
  • Whatever the shape of the image, the clickable area remains the surrounding bounding box.

Tips for use

Since shapes became available, which can be filled with an image (see Turn an image into a button) I never used image buttons. Now, with 11.5 you can use both bitmap images and SVG’s directly as buttons. In my series about Tweaking Quiz slides, I mentioned them as only solution for a Fluid Boxes project to Tweak a Results slide. As you can read in that post, I used it exactly because it was possible to make an image button totally transparent, which is not possible for a Text Button nor a Transparent button because of the label. That is the only exceptional situation where I recommend an Image button?-.µ

The second trio of button types will be described in the next blog.

Assets Panel

None of the button types described in this post can be found in the new Assets panel.

Text buttons and Transparent buttons are based on object styles, which are part of the Theme.

Image buttons also have an object style, and the image buttons packaged with Captivate have their graphics in GalleryButtons under the installation folder. They are not in the eLearning assets. You can create graphics for custom Image buttons, and store them wherever you want.

The post Which Button Type? – Part 1 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.

Adding Clickable Transparent Object

HI. I have an image with various buttons. I want the user to hear some instruction, then click the highlighted boxes around multiple buttons one at a time to view the related text.  When the next button is clicked, the text from the first button is replaced by the second. They can continue clicking highlighted buttons until the ‘Next’ button is selected.

Maybe I’m tired, but I am having no luck with using State view.

Any help would be appreciated. I miss the SWF options. It was so easy to do rollovers, etc.

The post Adding Clickable Transparent Object appeared first on eLearning.

Using Advanced Actions to change state of an object but it’s not working

Hi there,

In Captivate 9, I have created a module where I want to use advanced actions to change the state of buttons.

I’ve setup the following Completed state on a button.

On slide 12, the users clicks this button, which jumps them to the next slide. On entry into this slide, I have assigned a variable with the value of 1.

The user completes a few slides. Then on slide 15 I have an advanced action set on entry of the slide that if InspectionOrder = 1, change the button’s state to completed.

However, the state of the button is Normal. I’ve outputted the variable Inspection Order on slide 15 to confirm it is set to 1, and it is. So my variable is changing correctly but for some reason the state of the button is not changing to Completed.

What am I missing? Thanks in advance for your help. Much appreciated.

Thanks
Leanne

The post Using Advanced Actions to change state of an object but it’s not working appeared first on eLearning.

Multi-state button?

I would like to make two buttons:

  1. Mute / Unmute: The button should mute any audio playing and show an icon of a mic with a line through it. When it is clicked and audio is muted, the button should have an icon of a mic on it and when clicked, turn the audio back on.
  2. Pause / Play: The button should pause the whole slide (auto-playing video also) and have a pause icon on it. When clicked, it should have a play icon and resume the slide (auto-playing video also).

I ran into some trouble I can’t figure out (nor apparently can I find the answer on Google), so I am hoping you can help. The problems I’ve run into with these buttons are:

  1. I can’t find a way to add an action to a button in a custom state. I can add an action to a shape i’m using a button, but the Actions panel is not visible (see screenshot below) when the shape is in a custom state.
  2. It seems that you can’t just attach two or more actions to a button; you must write an advanced action. Is that really the case? So to change the state of the button when pressed (from mute to unmute and from pause to play and vice versa) and to perform the actual action, i have to write an advanced action?
  3. For the mute button, i can’t find an action called “mute audio” or anything like that; i can find “Stop triggered audio” but it’s asking which audio file – Do i have to make an advanced action for every single slide on which this button is used?

Can someone help? There must be a way, no?

The reason I need to make those buttons is because we’re not going to be using the player control bar at the bottom at all (because i don’t want to allow the learner to fast-forward and when you take the playbar out of the bottom bar, the rest of the buttons all get distributed horizontally and it looks really silly). So instead, i’m making navigation buttons and for the most part that’s ok.

Attached files:

Play

The post Multi-state button? appeared first on eLearning.

Transitioning from Rollover Objects to HTML5

The Issues:

The evolution to HTML5 has created a need to convert projects to HTML5 compliant works.  My particular case is that I have 512 pre-quiz assessments that use 3-4 Rollover Captions where the question is on the screen and users hover the mouse over the question to see the answer.   Rollover captions like mine are all Flash specific and in need updating to HTML5 compliance.  What to do with no such option?

I created a project to explore some possibilities and there are both challenges and answers here.  The project consists of four approaches and each will be discussed below.  I am not going to show click-by-click documentation on the Advanced Actions, but I will note where you could click and see how those Advanced Actions are setup.  Also, some of you might be a bit shy about Advanced Actions and the solutions are reasonable to implement Finally, the project is attached below as a link and you can dive in and see what the setup looks like for each.

The Sample Project (click the link to get it):

Test-States Buttons Project

Imagine that these buttons are questions and the goal is to have the answer appear on a click or when the mouse hovers over the button.  Rollover objects did that with Flash, but now we have a need for HTML5 buttons (or maybe not).  For this discussion, it is easier to give you the model and let you explore based on the discussion.

  • The project has <Back and Next> buttons with some text notes to let you explore the runtime project.
  • All buttons and answer rectangles are made from shapes and not buttons.
    • Set the shape property to Use As Button
    • Click the States  View button in the top of the Style panel to change button state fonts and color
    • Click the Exit State toolbar button (in the top toolbar button strip to the right side) to close States View
  • Where “Groups” are noted, the objects were all highlighted and a right-click was used to group the objects.
    • The Group uses a logical name
  • Button Actions for <Back and Next> buttons use next slide and previous slide
  • Button Actions for Home and EXIT buttons use GoTo Slide Name
  • This is a Captivate 2017 CPTX project done in Captivate 2017.1:

Slide 1 – A Button Reveals the Answer Using Advanced Actions:

  • This slide uses Advanced Actions to bring a rectangular object (my Pre-Quiz Assessment Answers) to the front.
  • The rectangle on the screen that holds the instructions and answers is a group of 4 equally sized rectangle shape objects.
  • The rectangles were all sized the same and grouped together.  Each one has a unique name in the group.
    • One for the instructions and then the three answers are underneath that.
    • They are all Grouped as Answers_1_Grouped.
    • This is important to note because the Advanced action hides the group before revealing the answer when the buttons are clicked, rather than having four lines of Advanced Actions that hide each rectangle.
  • For the Advanced Action, it is easier to call the Hide action, but a bit more work to edit each item in the group
    • hint – use the Timeline to turn off the ones that you don’t want to see and then edit what you need.
    • Still time consuming

The button Action is set to run the Advanced Action:

  • The slide load action (click the slide/thumbnail to see the slide properties) is to bring the Instructions up so that any prior answers are hidden by the Instructions rectangle.
  • The buttons link to Advanced Actions that first Hide the Group of answers.
    • This is very important because it is like saying “completely hide this group so that nothing is there”
  • The second line of the button Advanced Actions will then show the answer on the now “blank” answer area of the screen.

While control is good, the major drawbacks of this approach are:

  1. Advanced Actions are needed for much of the work and it creates many objects if you look at the timeline.
  2. Duplicating a slide only goes so far, you need to modify the advanced action for each slide and then point ot those advanced actions.  That is a bit of work and a lot to maintain over time.
  3. This is all Click to see the answer stuff and it is not a flyover / hover solution.

Slide 2 – A Button Reveals the Answer Using Button States:

Using States is faster.  In the above image there is just one rectangle drawn object and it contains the instructions (shown) and then three answer States.

Think of States as a container that has an initial maximum size and that it holds things that can be shown in that container shape and up to that size. 

The additional states can be text, images, drawn objects, sound, videos, Etc.  The buttons on the left use a special GoTo Action that calls up the State that you want from inside the States container.  Remember, this is one rectangle and as many States as you need.

In this example, the Rectangle was named as AnswerStatesGroup, but it is just one rectangle object on the screen.  It could be an image, a transparent rectangle, a text object, Etc.

Click the rectangle object and then The States View button.  That will put Adobe Captivate into the State View editor mode.

  • For illustration purposes, the four States are shown.  Note that this original object is not a button and thus you do not get hover states shown.   A right-click can copy the first state thumbnail shown on the left (Right-Click and select Duplicate).
  • Click the thumbnail on the left to select the object to edit.
  • Click the main object displayed and now the color, font, Etc. Properties can be changed.  The text can be changed, just type away.
  • Users can add additional objects onto these containers (as long as it fits inside).
  • Here a quick right-click allowed the object shape to be changed for each one.  The font size, type, color, spacing, Etc. can be changed.
  • Insert images, sound, video, Etc. into the selected State.

The right click options on the Thumbnails:

How do you get out of States editing?  It is a button in the top flyover Toolbar on the right.  Some users have complaints about this location, you get accustomed to it.  Perhaps it belongs just above the Thumbnails as Exit State? (Adobe – just do it!):

Now we need to link the buttons to the States.  These buttons are just rectangular shapes and I copied them from Slide 1.

This image shows the Action from the first button on this Slide 2 presentation.  It is linked to the State container and then the specific answer in the State (say it… “COOL!”).

This is faster than using Advanced Actions and you can right click on the slide thumbnail and select Duplicate with good results and no rework.

Other Considerations:

  1. The State View must be entered to edit the answers
  2. The buttons must be linked as shown
  3. This might be a better solution with bigger buttons and maybe just 1-2 questions and answers per slide
  4. This is all Click to see the answer stuff and it is not a flyover / hover solution.

Slide 3 -Button States are Used to Reveal Button State Answers (A Hover Action!) :

YES – You can!  

In this example, the four objects shown are drawn objects setup as buttons.  Then, each of the buttons is setup as a State.  The normal States of a button are Up, Hover or Down.

The button / container serves as the question, just type away inside the container.  This could be an image, a visible drawn object or a drawn, but transparent object.  Focus on the button idea for this presentation.

  • This is set to Use as Button.
  • When the mouse hovers over these, the answer is revealed.  NO CLICK NEEDED!
  • This slide can be copied and the new version is a duplicate.  Just enter the State view and change the text, Etc.

This is my new solution to present quick pre-quiz questions to the users where they can hover the mouse over the question to reveal the answers.  I’m hooked!

NOTE:  The Preview is a bit flakey in Captivate 2017.1  It will not refresh properly.  If you run the preview as HTML5 in a Web-Browser, then all is good.

The image below shows the State View thumbnail and edit of the thumbnail and a reminder of how to Exit State View (you remember that, right?)

Notice that the State container shape and size is coming from the original on the main Adobe Captivate screen.  Once the State is selected, the font, color, size, shadow, Etc. can be edited in the Property panel.  Notice that shape objects and a small Blogger button were added to illustrate that each State can hold other objects, images, sound, video, Etc.

It is important to note that the two states are Normal and Hover.  In this example, the Selected (mouse Down) state was deleted.  Just right-click to delete states that you don’t need.

OK, I said it once, I’ll repeat this again… say it…. “COOL.

Slide 4 – What About Interactive Widgets like Accordion?:

I had hoped that interactive widgets would work.  Unfortunately is can’t work.  It is a click event and not a hover.  The header of each accordion section is limited to only so much text and then it overflows and cannot be read (It may crash form the overflow).

At runtime the accordion section header will expand to two rows, but then when you click on the first one, the others collapse to one row.  Not a good choice to be able to read the question first.

There are some maddening spacing issues with these Widgets if you want to open up the space between accordions, you can’t.

This is good for “Show me more” types of discovery.

The flyover questions would make a great Interactive Widget perhaps we need to wait.

Conclusion:

There are still more solutions like advanced CSS (think fly-out menu) and JavaScript; it is all possible, but that is a lot of maintenance as a solution.  For fly-over action needs, the State View area opens up fast development, simple slide cloning and reasonable results without the fuss of Advanced Actions.  There is more to State Views and you can add more layers, but I hope this initial trip into the topic has you thinking of some of the possibilities with the basics.  I’m sold on just the simple hover to reveal and I just have to say “COOL!” one more time.

The post Transitioning from Rollover Objects to HTML5 appeared first on eLearning.

Using PowerPoint Shapes in Captivate

Using PowerPoint Shapes in Captivate

Captivate has come a long way in offering a good variety of shapes.  However, sometimes there are some shapes that are in  PowerPoint but not in Captivate. This blog will show you how to use those shapes in your course.

These examples use PowerPoint 365 and Captivate 2017.
Open a blank PowerPoint presentation and choose Insert–> Shapes
Let’s use this 3/4 circle for an “incomplete button.”
You can format the fill, stroke, and text to match your guidelines.  There are lots of options to get the look you want.
Right mouse click and save it as a picture.   It’s that easy.  And, look  how small the file size is.

Now let’s import the shape into Captivate.  You can use it like a Smart Shape. But, you won’t be able to add states unless you use your new shape as a button.  Let’s do that.
Let’s start by creating a button.   Here I have selected a circle since that is the the shape of the image I just created in Powerpoint.
Next, I checked “Use as Button.”  For Fill, I selected “Image” and then I imported my but_INCOMPLETE.png. To get it looking its best, I deselected “tile.”  I did keep “stretch” selected. You will have to experiment with what looks best with your image.    Here’s the result.
To get the button to look differently in different state views, you can experiment with opacity and stroke color, or you can import different colored images from PowerPoint.
Remember, you don’t have to use the image for a button only.  Buttons give you the opportunity to add states.  If you want to just use your shape as a shape, you can do that to by choosing Media–> Image, and following the path.
Sometimes, your file size can bloat when you import images.  We will cover a few ways to reduce image file size in the next blog post.
I hope this helps!
Alice