Skip to main content
Known Participant
January 23, 2016
Question

Show/hide affect object

  • January 23, 2016
  • 2 replies
  • 396 views

I'm trying to create an interaction in which the user clicks on an image, and a text caption eases in from the left, and when the image is clicked again, the text caption eases out. This being an infinite action. Any help is greatly appreciated.

Running Captivate 9 on Windows 8.0

    This topic has been closed for replies.

    2 replies

    Lilybiri
    Legend
    January 24, 2016

    The issue with motion effects is, that they always move relatively to the starting point. In your use case that starting point is moving!

    You'll have to create two custom effects: one for easing in and one for easing out, both for the Text caption, which I will name Tx_Message. I will label those effects MoveIn and MoveOut

    Create a tracking user variable (Boolean, only values 0/1) with a default value of 0. I will label it v_text.

    Since the image has to be 'clickable', either you put that image into a shape that you convert to a shape button (step-by-step in this post: Turn an Image into a Button - Captivate blog).  Alternative is to put a click box over the image (you end up with two instead of one object). Be careful with the pausing point if you have other interactive objects on the slide.

    Create a conditional advanced action to be triggered by the Success event of the shape button (or the click box):

    IF v_text is equal to 0

       Apply Effect MoveIn Tx_Message

       Toggle v_text

    ELSE

        Apply Effect MoveOut Tx_Message

       Toggle v_text

    If you need this interactivity more than once, I recommend turning this advanced action to a shared action with Parameters the Effects and the Text Caption. The variable can be reused, has not to be a parameter. That way you'll be able to reuse the action, by choosing the effects and the caption on other slides.

    TLCMediaDesign‌  Sorry, David, you seem to understand that the OP wants a Fade in effect, I understand with ease in/out that he meant a Motion effect with easing.

    TLCMediaDesign
    Inspiring
    January 25, 2016

    That's what I understood also Lieve. That the caption eases in from the left to right, going from an alpha of 0 to an alpha of 100, then reversing.

    Possible that the OP doesn't want the alpha effect, which would make it much easier in CP.

    I played around and unless the caption is originally off the stage and you use the alpha effect, you can't get the initial visibility worked out.

    Lilybiri
    Legend
    January 25, 2016

    David, maybe due to my different background, 'easing' in/out for me has nothing to do with Alpha change, but with change in motion speed. I am not an English native speaker, but that is how Flash, Edge Animate and other animation applications use that term 'easing'.

    TLCMediaDesign
    Inspiring
    January 24, 2016

    Not sure how you can do that with Captivate. I would think you would need 2 identical captions at the very least.

    Very easy to do with jQuery animate. You could create an html page and zip it. Insert as HTML5 animation.

    The basic syntax is fade in:

    $('#your_caption').animate({opacity: 1,left: "+=100px",,0500);}

    fadeout:

    $('#your_caption').animate({opacity: 0,left: "-=100px",,0500);}

    You would need to put these in functions and add a click handler to the image. With CSS, set the captions initial opacity to 0.