Highlighted

Custom Table of Contents with Ease In/Out Effect

Community Beginner ,
Oct 03, 2018

Copy link to clipboard

Copied

Hi All,

I'm having trouble with a custom table of contents that I created.  I followed Paul Wilson's directions on how to create a pop-out table of contents, because I'm looking to maximize my viewing area at all possible times.  However, I didn't really like the way the table of contents just sort of appeared and disappeared like a light switch.

What I would like to achieve is to have an ease-in, or equivalent effect applied when you open the menu, and then have the menu ease out when you close it.

I've tried to do this a bunch of different ways, but nothing seems to work.  What keeps happening instead, is that the first time, it works beautifully, but on subsequent toggles, the menu moves further and further towards the edge of the screen, until...it just never comes back.

I'm wondering how I can get the menu to stay in place when applying this effect, because it seems to just be picking up where the last effect ended.

Does that make sense to anyone?

Thanks in advance!

-Martin

Views

192

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Custom Table of Contents with Ease In/Out Effect

Community Beginner ,
Oct 03, 2018

Copy link to clipboard

Copied

Hi All,

I'm having trouble with a custom table of contents that I created.  I followed Paul Wilson's directions on how to create a pop-out table of contents, because I'm looking to maximize my viewing area at all possible times.  However, I didn't really like the way the table of contents just sort of appeared and disappeared like a light switch.

What I would like to achieve is to have an ease-in, or equivalent effect applied when you open the menu, and then have the menu ease out when you close it.

I've tried to do this a bunch of different ways, but nothing seems to work.  What keeps happening instead, is that the first time, it works beautifully, but on subsequent toggles, the menu moves further and further towards the edge of the screen, until...it just never comes back.

I'm wondering how I can get the menu to stay in place when applying this effect, because it seems to just be picking up where the last effect ended.

Does that make sense to anyone?

Thanks in advance!

-Martin

Views

193

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Oct 03, 2018

Copy link to clipboard

Copied

You are correct about the movement being difficult to get right. This is a known issue with Captivate effects because they do not allow you to specify exact x and y coordinates for the start and end positions of the motion.  They work in more of a relative way, rather that allowing absolute positioning.

You might be able to achieve better results by using guide lines etc.  But in the end you can only ever make things approximately correct.  Getting it pixel perfect is not usually possible. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Oct 09, 2018

Copy link to clipboard

Copied

Hi Rod,

Thanks so much for the reply .  Sorry I've been off sick lately, so I didn't have a change to reply.

The problem isn't so much about the straight lines (although it IS bizarre how holding down shift when using motion paths does NOT make it straight, unlike virtually every other graphics program out there, including photoshop).

The issue is that the motion path doesn't seem to know that it should return back to the original position.  So, to illustrate:

1. This is more or less what the slide looks like in broad strokes when nothing is happening:

Rest state.png

In the top right corner, there is a smartshape button (a hamburger button), with the following advanced action associated with it:

Upon Clicking the Menu Open button (upon success):

a. Apply effect - EaseInRight to my navigation menu object.

b. Show the close menu button

c. Hide the menu open button

2.  When the menu open button is clicked, in broad strokes, the navigation menu eases in, the menu close button should be hidden (though in some versions I just leave it there), and the close menu button appears (though in some versions it is attached).   it looks something like this:

MenuOpen1.png

3. So far so good.  Then, the menu close button causes the menu to ease out, and then the menu open button reappears, and the close button disappears (at least in some versions), and has the following advanced actions associated with it:

When the menu close button is clicked (upon success):

a) Apply effect - EaseOutLeft to my navigation menu object

b)Hide menu close button

c)Show menu open button.

Menu Close 1.png

When you do so, the slide should go back to looking like so:

Rest state.png

Which it does.  This is where things start getting weird.

4. Press the menu open button again, and...

MenuOpen2.png

Only a part of the menu close button appears on the slide!  Why?

5.  When you click the menu close button, the navigation menu goes away again.

Menu Close 2.png

And we get our resting state again:

Rest state.png

6. Click the open menu button again...and...

Rest state.png

Nothing happens!  Nothing at all. Where's my navigation menu?  Presumably, it is skulking off the side of the slide somewhere, but it is impossible to say for sure in the preview.

MenuOpen3.png

So, what is going on here?  What I think is happening is that the apply effect is not operating from a relative position, and is instead shifting a little to the left each time the open/close sequence runs, like so:

What I think is happening.png

How can I stop this from happening?  If you move 500 pixels to the right with a push of a button, and then move back 500 pixels, logically, you should always end up in the same place, no matter how many times the menu is opened/closed.  What is going on?

Any ideas?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Oct 09, 2018

Copy link to clipboard

Copied

I agree that it's frustrating and it might not make a lot of sense initially, but I think you will find is happening is that each effect is starting from the point where the previous effect stopped.  You will notice that when you add any kind of motion effect to an object in Captivate, the effect is shown by a line with an arrow point at one end and a small square block at the other.  The arrow point indicates the starting point of the MIDDLE of the object, and the direction of the movement.  The block at the other end indicates the end point of the middle of the same object.  The exact position of this line and its start and end points is critical to the movement.

If you want to make an object Ease in and Ease out so that it begins and ends at exactly the same points, you need to NOT change the length or positioning of this effect indicator.  I did a quick test with a text object on a Captivate slide, adding multiple Ease-In and Ease-Out effects on the same object.  It worked predictably as long as I did not mess with the line in any way.

Did you add the effects manually or via the Actions menu?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Oct 09, 2018

Copy link to clipboard

Copied

I added the effects via the actions menu.    I suppose I can make a custom motion and save it and then use that in the advanced action so that I can control the start and stop point.  But, you'd think that the ones added via the advanced actions would have the exact same length anyways. Maybe not.  *sigh* I'll try again and see what happens.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
Oct 09, 2018

Copy link to clipboard

Copied

I recently posted a blog in the e-learning site about using custom effects

in advanced/shared actions. As for exact motion paths I always use guides,

or eat the XML file.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Oct 09, 2018

Copy link to clipboard

Copied

Hi Lilybiri,

Thanks for the help!  So, here is what both of my custom ease in/out animations look like, overlaid with eachother. bug2.png

But it still fails to work properly after the first time. As far as I can tell, I'm doing everything correctly.  There must be a setting somewhere on either the slide, or the timeline or something that I messed up on. I know I've seen this done before.  I don't know why it isn't working.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Engaged ,
Oct 09, 2018

Copy link to clipboard

Copied


I wouldn't rely on Captivates animations for the reasons given above. You could try animating with javascript. Here's what I would do:

1. Give every element (buttons, textboxes, shapes, etc.) in your table of contents, an ID starting with "tableC". Therefore you will have tableC1, tableC2, etc.

2. Position your Table of contents above 200px off screen to the left (depending on how wide it is).



3. On your open table of contents button execute the following javascript



var animObj = document.querySelectorAll("[id^='tableC']")

animObj.forEach(function(element){

element.style.WebkitTransition = "all 1.5s";

element.style.transition = "all 1.5s";

element.style.transform = "translateX(200px)";

});

4. You can then create another button, or toggle button the javascript on your open button to translating X back to 0px.

The only issue I see here is that you will need to copy and paste your table of contents on all your slides. But as long as the ID starts with "tableC" it should work. Let me know how it goes.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Captivate User Guide
New Group