Using SVG’s in Captivate
…
Hello Captivaters !…
Another project where I play with the colors !…
The objects :
I use 4 buttons to define the colors (and of course you can use as many as you want !…)
I use as many objects as I want… I use SVGs.
All these objects have different shapes (one for each color) and are selected as buttons, so when clicked triggered an action (change color).
I name them : Object_1 , Object_2 , Object_3 … …
I name the shapes : Green, Red, Yellow, Blue
(As you transformed them in buttons, Captivate add two shapes by default, you can delete them…)
The variable :
Only one is needed to define the selected color : V_Color
The codes :
1./ First, I select a color :
When I click on a colored button, I assign the color to the variable. So for example :
=> assign V_Color with Green
(I use also a small selector with two shapes : Normal and On)
=> Modify the shape of Green_Selector to On
=> Modify the shape of Red_Selector to Normal
… …
2./ Color the object
First I use a conditional action, with 4 conditions, triggered by clicking on the object/button :
if V_Color is equal to “Green”
=> Modify the shape of Object_1 to Green
if V_Color is equal to “Red”
=> Modify the shape of Object_1 to Red
if V_Color is equal to “Yellow”
=> Modify the shape of Object_1 to Yellow
if V_Color is equal to “Blue”
=> Modify the shape of Object_1 to Blue
And I reproduce this action for all my objects… !!!… But as I have many objects, I thought it would be better to use a shared action. I test it… But it’s still time consuming… I thought JavaScript could help me… and asked for help in the Captivate Forum…
https://community.adobe.com/t5/Captivate/Simplify-multiple-adanced-actions-with-JavaScript/td-p/10640727
Thanks to Gaanf, an easy solution was quickly created (See the post)
So I think it’s time to show you the project :
The issue :
The issue is with the SVGs…
I read that the SVGs (See Lieve’s Blog), when converted as button, have only their shapes sensible to the mouse Click… But it’s more complicated than that… It also depends to the layer they are on… You can see in the example with the hexagones that the sensible area is not exactly on all the SVG…
But as my Guru told me “Something is better than nothing”… So I’m quite happy with it !…
Happy Captivating !…
😉
…
Erratum : The issue I mention in this post is now an old story… Thanks to Lieve’s blog again !… Read it carefully (not like me) and you will find for sure all the answers you are looking for, and not only about SVGs !…
Big thank again to all the community working for Captivate !…
You must be logged in to post a comment.