Imagem com comportamento de botão

Olá como está, espero que bem!

Uma das grande novidades no novo Adobe Captivate 2019 é o comportamento de uma imagem como botão.

Nas versões anteriores, teriamos que criar um Shape e inserir a imagem dentro do mesmo, nesta nova verão, basta que você adicione uma imagem no palco, e em propriedades ative a opção Use as Button, vejamos a imagem a seguir.

Da mesma forma, podemos aditar as formas internas da imagem. Para isso podemos clicar em State View, como mostra a imagem abaixo.

Teremos a área de modificação do State, vejamos o painel ao lado esquerdo do software, onde podemos modificar o estado de cada imagem para que, quando passarmos o mouse sobre, ele seja modificado. Este processo de modificação já foi explicado em um vídeo anterior, localize em meus posts sobre este assunto.

Após a modificação, basta clicar sobre Exit State  .

Teste seu projeto clicando em Preview > HTML5 in Browser.

Abraços,

Fabio OLiveira – Fojool

The post Imagem com comportamento de botão appeared first on eLearning.

Button Sets

Does Captivate have a “Button Set” feature?

Here is what I mean by a “button set” feature:

I’m creating a tabbed interaction with 6 tabs. When the user clicks Tab 1, the tab’s state will change to “active” (different shade of blue than the normal state).  When the user clicks Tab 2, tab 2’s state will change to “active” and change tab 1’s state to “Visited”, and so forth. However, the user can choose which tab they want to start with, so the user will not always go in order…1, 2, 3, etc.

I have seen in other software where you can group all the buttons together into a button set, so that the button’s  will change it’s own state to active and change which ever button was active before the click action to visited automatically. The only thing we as the developer needed to do was indicate which content the action needed to display (and possibly indicate that all the other content that needs to be hidden).

Can this be done in Captivate without having to set up a variable and create a conditional advance action for each button?

The post Button Sets appeared first on eLearning.

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.