May 12, 2018
Animation of Objects – Three Examples (Part 2)
Comments
(11)
May 12, 2018
Animation of Objects – Three Examples (Part 2)
I am currently a provider of technical training and support in the electronic manufacturing industry. My prior training and work experience as a teacher, network administrator, web design, and instructional design make me well prepared to design it, develop it, and deliver it. I am a father of five, a US Army veteran, and I enjoy playing the guitar as well as performing in local community theater. 
Wizard 75 posts
Followers: 78 people
(11)

This is the concluding post for the animating objects post from earlier.

If you missed the post with the examples, you may want to check it out.
Animation of Objects (Part 1)

In this post, I want to go through and explain the code behind how the animations work.

I will address this all in five parts.

  1. Initial Issues
  2. The Single Button
  3. The Two Button
  4. The onEnter Action
  5. The Indicator Bar

Initial Issues

Initially, I had created an arrow and then another state for it. From a sequencing standpoint, I had the arrow go off the screen, change state, then come back on. However, it was very choppy. I realized that my command to change states was causing the second state to ‘snap’ into position rather than slide back on like the other arrow slid off. Then I tried another approach. I thought I would try placing the second state off of the stage. I figured that way we would not see the snapping and it could slide onto the stage. That simply didn’t work at all, I think, because it was off of the stage. This is what led me to my work around which I will cover with the onEnter action.

The Single Button

On the round trip button I decided to implement a variable called  arrowVis  to track which of my arrows was currently on the screen. So the variable toggles between two values: up or down. My starting point is with the up arrow visible so the default value for  arrowVis is “up”. This allows me to do a check for the arrow on stage and perform a slightly different action based on that.

So, if the visible arrow is the up arrow – we are going to animate it to the left by adjusting the left margin by -300px over the course of 500 milliseconds. Then the down arrow will slide on the screen by adjusting the left margin of that arrow by 150px. I have this on a setTimeout for two seconds so that the other arrow has time to get off the stage and give a pause before it comes on. Finally, after 2.5 seconds, which should be the time for the swap to complete, I change the variable to reflect the new item on stage. This is the way I managed to keep the variable correct so that I did not have conflicts.

if (window.arrowVis==”up”) {
$(document).ready(function() {
$(“#upc”).animate({left: “-300px”}, 500);
});

setTimeout(function() {
$(document).ready(function() {
$(“#downc”).animate({left: “150px”}, 500);
});
},2000);

setTimeout(function() {
arrowVis=”down”;
},2500);
}

if (window.arrowVis==”down”) {
$(document).ready(function() {
$(“#downc”).animate({left: “-150px”}, 500);
});

setTimeout(function() {
$(document).ready(function() {
$(“#upc”).animate({left: “0px”}, 500);
});
},2000);

setTimeout(function() {
arrowVis=”up”;
},2500);
}

The Two Button

In this animation, we are basically doing the same thing but with a picture rather than an object and through the use of two buttons rather than one.

In essence, the core code that does the animating work is the same but I had to work in some extra code to tweak performance. You will notice that on the swap button, we move the normal picture off stage and bring the hex version on about a second later. You will also notice that I disable the buttons during the animation and re-enable them afterwards. That is because I was able to mess up the animation by clicking too fast on the buttons. I allowed you to see both of them together at some point.

SWAP Button
$(document).ready(function() {
$(“#sunc”).animate({left: “400px”}, 500);
cp.disable(“swap”);
cp.disable(“swapBack”);
});

setTimeout(function() {
$(document).ready(function() {
$(“#hexSunc”).animate({left: “0px”}, 500);
cp.enable(“swap”);
cp.enable(“swapBack”);
});
},1500);

SWAP BACK Button
$(document).ready(function() {
$(“#hexSunc”).animate({left: “400px”}, 500);
cp.disable(“swap”);
cp.disable(“swapBack”);
});

setTimeout(function() {
$(document).ready(function() {
$(“#sunc”).animate({left: “0px”}, 500);
cp.enable(“swap”);
cp.enable(“swapBack”);
});
},1500);

The onEnter Action

So both of the swap animations suffered from the same issue – getting a smooth swap animation. It seemed that as long as the object started on the stage and was animated off that I could bring it back just fine. The trick was making the object animate off of the stage without being able to see it. Now I will admit that there is probably a better way to do this with code but I am not an expert in JavaScript so I went with a white box to hide the object as it animated off onEnter. So I actually start with all the objects on the stage and animate two of them off to their hidden locations. Once they are off stage, I hide the white boxes so that they don’t block the objects animating on.

$(document).ready(function() {
$(“#downc”).animate({left: “-150px”}, 10);
$(“#hexSunc”).animate({left: “400px”}, 10);
});

setTimeout(function() {
cp.hide(“cover”);
cp.hide(“cover2”);
}, 1000);

The Indicator Bar

I wanted to also make a form of this that could be a bit more controlled. To pull this off, I created a variable called chevronPos to track the position of the chevron along the bar. Then I can make sure it does not slide past the edges of the bar. So on the back button (red), our start position, we simply state that as long as the position is not equal to 0, go ahead and move the chevron back 40px. On the green arrow we do the same thing only we are saying that as long as the chevron position is not equal to 640 we can go ahead and move 40px to the right. On each button press we also adjust the variable value up or down accordingly.

if (window.chevronPos!=0) {
chevronPos=(chevronPos-40);
$(document).ready(function() {
$(“#chevronc”).animate({left: “-=40px”}, 500);
});
}

if (window.chevronPos!=640) {
chevronPos=(chevronPos+40);
$(document).ready(function() {
$(“#chevronc”).animate({left: “+=40px”}, 500);
});
}

Hopefully this was helpful in giving you some new ideas for you projects.
Please feel free to share your ideas and ask any questions that you have.

11 Comments
2019-06-19 19:02:00
2019-06-19 19:02:00

Hi Greg, I have been trying the simple parts of the script. The SetTimeout works perfectly fine and will help me avoid using a dummy clickbox to pause slides.

I am trying also the simplest animate bit but something is not right. Have a look at the screenshot. I attach the code to the OnEnter but the object would not move. What am I missing?

Thanks

Bobby

 

Attachment

Like
(4)
>
Bobby Jourdan
's comment
2019-06-19 19:20:08
2019-06-19 19:20:08
>
Bobby Jourdan
's comment

You will need to add the “c” after your object id in the second line.

$(“#objectToAnimatec“).animate({left:”-300px”},500);

Like
(1)
>
Greg Stager
's comment
2019-06-19 19:22:24
2019-06-19 19:22:24
>
Greg Stager
's comment

Wow, simple… but what is the idea behind the c?

In the jQuery references there is not a word about it. Specific to Captivate?

Thanks Greg

Like
>
Bobby Jourdan
's comment
2019-06-19 19:44:07
2019-06-19 19:44:07
>
Bobby Jourdan
's comment

I believe it is used to reference the “canvas” where the object is drawn. I created a blank slide with just a quick circle shape and named it circle. You can see in the picture when you inspect the code created by Captivate that it has a canvas id with a ‘c’ appended. This is what you need to reference when you want to animate it.

I am not sure if that is unique to Captivate or not but it is consistent within Captivate.

 

Attachment

Like
(1)
>
Greg Stager
's comment
2019-06-19 20:24:27
2019-06-19 20:24:27
>
Greg Stager
's comment

Thanks Greg. Great stuff

 

 

Like
2019-06-18 20:28:28
2019-06-18 20:28:28

Hi there Greg,

extremely interesting post. I am trying to deconstruct the different pieces and have concentrated on the Single button part.

I see that you are using the $.(document).ready() statement .

I read about it here – http://learn.jquery.com/using-jquery-core/document-ready/

but would like to understand what is the value of using it in captivate. In other words, what would be the problem if you dont use it?

Thanks for these great posts. Help me a lot.

Bobby

 

Like
(4)
>
Bobby Jourdan
's comment
2019-06-18 20:42:19
2019-06-18 20:42:19
>
Bobby Jourdan
's comment

The idea is that sometimes people can be quicker to click buttons than our content can be to “load up”.

If we didn’t use this – the animations can “misfire” and do some weird things or simply not work at all. While the time frame differences we are talking about are probably not noticeable to us – a fraction of a second out of order with our code will bugger things up quickly.

This line of code says “Hold your horses, pal – not until everything is ready.”

Hopefully that makes some sense.

Like
(1)
>
Greg Stager
's comment
2019-06-18 20:47:15
2019-06-18 20:47:15
>
Greg Stager
's comment

Thanks, it does make sense.

and I guess in this case there is no need because there is no click involved, right?

setTimeout(function() {
arrowVis=”down”;
},2500);
}

Thanks again. I will test this in the office tomorrow.

Like
>
Bobby Jourdan
's comment
2019-06-18 21:12:02
2019-06-18 21:12:02
>
Bobby Jourdan
's comment

Ultimately – there is no animating going on there – just a variable assignment. Even without a click to fire the animation I would want to have the page fully ready before trying to execute the animation.

With onEnter actions, for example, that would fire right away – I would use some sort of timeout or document ready to delay things until all objects are fully loaded.  It is more related to interaction with objects by the code.

I’m no code expert but that is how I currently understand it.

Like
(1)
>
Greg Stager
's comment
2019-06-19 05:08:59
2019-06-19 05:08:59
>
Greg Stager
's comment

Thanks

Like
2018-05-14 19:44:30
2018-05-14 19:44:30

Thanks for this post Greg. I’m looking to swap out multiple objects, but I think I can use a variable like you did to track what’s on the stage and use that to control what leaves and what enters.

Like
Add Comment