June 18, 2019
Edit SVG’s in Captivate 11.5
Comments
(10)
June 18, 2019
Edit SVG’s in Captivate 11.5
Lieve is a civil engineer (ir) and a professional musician. After years of teaching and research (project management/eLearning/instability) she is now a freelancer specializing in advanced Adobe Captivate as trainer and consultant. Her blog is popular with Captivate users worldwide. As an Adobe Community Professional and Adobe Education Leader, she has presented both online and offline. Since 2015 she is moderator on the Adobe forums and was named as Forum Legend (special category) in the Wall of Fame. In 2017 Adobe Captivate users voted for Lieve as a Top Content Experience Strategist.
Legend 150 posts
Followers: 263 people
(10)

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.

10 Comments
2019-07-03 11:32:28
2019-07-03 11:32:28

Check out my series of tutorials on the new updates for Captivate 2019 version 11.5: Adobe Captivate 2019 Update 2

Like
(5)
>
Paul Wilson
's comment
2019-09-25 21:50:07
2019-09-25 21:50:07
>
Paul Wilson
's comment

When double click to edit the color of an SVG image in Captivate 2019 the image goes white. I have tried changing my mouse double click speed but it still does not work. Any thoughts?

Like
>
chastarb3555
's comment
2019-09-26 07:59:02
2019-09-26 07:59:02
>
chastarb3555
's comment

Know this was not meant as a question for me… since you posted it to Paul, so will refrain from answering although this is one of my articles.

 

Like
>
Lieve Weymeis
's comment
2019-09-26 13:14:06
2019-09-26 13:14:06
>
Lieve Weymeis
's comment

SVGs in Captivate can sometimes behave in an unexpected fashion. Lieve if you have an answer to question don’t let me stop you from answering it.

Like
>
Paul Wilson
's comment
2019-09-26 17:19:02
2019-09-26 17:19:02
>
Paul Wilson
's comment

Can you please post a screenshot of hat SVG? Editing colors in Captivate is limited to the fill of simple closed paths. If you have a complicated SVG, which uses appearances, blending etc…. this feature may fail.

To check if the functionality works for you (I see someone posted already a link to one of my blogs  -just finished another one for another user), take one of the ‘icons’ in the Assets panel, and see if you can edit its colors.

For more complicated SVGs, I use Illustrator indeed. But I have also described how you can convert the Illustrated Charactters to SVG, and editng the colors of pants, shirts etc works very fine in Captivate.

Like
>
Paul Wilson
's comment
2019-09-26 17:29:22
2019-09-26 17:29:22
>
Paul Wilson
's comment

I have tried multiple icons all from the asset panel and none of them work.

Attachment

Like
2019-06-19 19:41:55
2019-06-19 19:41:55

As far as i am concerned, Captivate is a container.

You as the developer should decide which content and the behavior of the content, But Captivate2019 put constrain on you. I was not the one that decide to eliminate a program

with more than 90% penetration in the market place. Adobe eliminate Flash.

This will go down as one bigger mistake by a tech company, think about the cost of replacing

Flash.  SVG allow you to do some of the animation that you were able to create with flash.

Learning is not dependent on animation, that is not the point, but a  static presentation is so 1980. Time to move to the future. Do a search for Bret victor.

Like
(1)
>
luisr61870762
's comment
2019-06-19 21:49:44
2019-06-19 21:49:44
>
luisr61870762
's comment

Up till now I replaced SWF animations by OAM’s, which are supported by a lot more browsers then animated SVG’s at this moment. As I wrote this may change in the future.

Totally agree that HTML5 is not ready to replace the standardized Flash Player of the past, but complaining about that is not helping developers. I feel very concerned by all those published eLearning courses everywhere in SWF output, where companies still not started by replacing them by HTML5 output.

Like
2019-06-19 18:33:08
2019-06-19 18:33:08

This is off topic for this blog post. You talk about SVG animation, and you know without any doubt the present limited support for those by browsers.

Captivate is NOT an animation application but an eLearning authoring tool. That means that animation is not the primary goal, it does support animated GIF’s, OAM’s an other HTML animations. Whether learning is efficient is not dependent on the type of animation but that is my opinion. I am glad about a better integration of static SVG due to deployment for mobile devices. Moreover I am sure that when SVG animations get more adopted by browsers, Captivate will be ready in the future to include them as well.

Like
2019-06-19 18:26:54
2019-06-19 18:26:54

The SVG implementation in Captivate 2019 is half bake.

Simple Animation is working, but anything more complicated is not.

I do not know if SMIL is supported by Capt2019.

SVG can be animated using animation elements –> with(CSS, SMIL, Javascript).

The animation elements were defined in the Animation specification

(https://www.w3.org/TR/2001/REC-smil-animation-20010904/).

I will continue testing and get back with additional info later.

Like
Add Comment