Known Participant

Question

Custom Table of Contents with Ease In/Out Effect

Forum|Forum|7 years ago
October 3, 2018
2 replies
565 views

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

This topic has been closed for replies.

Jeremy Shimmerman

Participating Frequently

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.

RodWard

Community Expert

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.

mithrylaltaireAuthor

Known Participant

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:

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:

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.

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

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

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

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.

And we get our resting state again:

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

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.

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:

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?

RodWard

Community Expert

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?

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded