Workflow to edit colors of SVG’s in Captivate, also for InBuilt and Custom states. The action triggered by a SVG configured as button will change state in an object which has audio attached to each state (from the new Assets panel).
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.
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.
Check out my series of tutorials on the new updates for Captivate 2019 version 11.5: Adobe Captivate 2019 Update 2
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?
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.
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.
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.
I have tried multiple icons all from the asset panel and none of them work.
Attachment 
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.
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.
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.
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.
You must be logged in to post a comment.
