Skip to main content
Pkoel
Pkoel
Inspiring
September 12, 2018
Answered

Captivate 2019 - Javascript - Change a Smart Shape color

  • September 12, 2018
  • 2 replies
  • 1701 views

Hello Friends,

   I am new to JavaScript. When I press a button, I want to change the color of a smart shape I have named ss_Monster. How do I access the color property using code?

I appreciate any guidance.

Cheers!

Peter

    This topic has been closed for replies.
    Correct answer TLCMediaDesign

    This JavaScript will change a rectangle to be filled Black. The SS is named SmartShape_1:

    var ss = document.getElementById("SmartShape_1");

    var ctx = ss.getContext("2d");

    var a = ctx.canvas.clientLeft;

    var b = ctx.canvas.clientTop;

    var c = ctx.canvas.clientWidth;

    var d = ctx.canvas.clientHeight;

    ctx.fillStyle = "#000000";

    ctx.fillRect(a,b,c,d);

    2 replies

    TLCMediaDesign
    TLCMediaDesign
    Inspiring
    September 12, 2018

    I think it would be easier to just change the state of the smartshape to a different color.

    Pkoel
    PkoelAuthor
    Inspiring
    September 12, 2018

    Hello,

    Thank you for the quick replies! I am just working on my own skills in JavaScript and thought this would be an easy start. Can you tell me how to change the state of an object using JavaScript? I know how to do it in an Advanced Action.

    Sincerely,

    Peter

    Lilybiri
    Lilybiri
    Legend
    September 12, 2018

    For pressing you don't neeed even an advanced action, state will automatically change. 

    Try to use JS for workflows that cannot be done in Captivate. One very simple example is explained in these blog posts:

    Playing with Numbers - part 1 - Captivate blog

    Playing with Numbers - part 2 - Captivate blog

    TLCMediaDesign will certainly help with real JS use cases, but you see that he agrees with my viewpoint about Inbuilt button states.

    Lilybiri
    Lilybiri
    Legend
    September 12, 2018

    Why do you need JS for something that is already available in Captivate? Each button can have 4 InBuilt states, 3 of them are already available in the Object style, the 4th can be created:

    1. Normal state
    2. Rollover state
    3. Down state
    4. Visited state

    Moreover you can add as many custom states as wanted. Have a look at this blog post:

    1 action = 5 Toggle Buttons - Captivate blog

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices