Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Show/hide affect object

Community Beginner ,
Jan 23, 2016 Jan 23, 2016

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

320
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
People's Champ ,
Jan 24, 2016 Jan 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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 24, 2016 Jan 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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
People's Champ ,
Jan 25, 2016 Jan 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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 25, 2016 Jan 25, 2016
LATEST

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'.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Help resources