Delaying a function in Captivate’s Javascript window

Hello, I’m working on a project in Captivate 2017 and have a slide where I’d like an object to animate in, I am animating it in the javascript window (the on enter action of the slide) and I have it written like:

var keyframes = [
{
transform:’scale0.4)’
},
{
transform:’scale1)’
}
];
var options =
{
delay: 1000,
endDelay: 0,
duration: 500,
easing: ‘ease-out’,
}

I’d like it to animate on it’s own (not based on user interaction), but not until after a second or so.  With the delay in the options variable that works, however I’d like the object to not be visible until the animation starts.  I tried writing something like:

cp.hide(‘bar’);

function playAnim(f,g,e){
cp.enable(f);
g();
pAnim = e.animate(keyframes, options);
pAnim.play();
}

function unhideBar(){
cp.show(‘bar’);
}

setTimeout(playAnim(‘bar’,unhideBar,barc), 1000);

but the setTimeout method does not seem to be working? (I’ve never used setTimeout before so I’m not sure if I’m using it correctly).

I also previously tried writing it as window.setTimeout …. but that didn’t work either.

Any advice is much appreciated, thanks!

The post Delaying a function in Captivate’s Javascript window appeared first on eLearning.

Screen Blink

When working on my project I have a slide that ends with images and text and I am trying to get the next slide to start with the same image nad text. I have set this up to work, but the problem is that when the first slide ends and the new slide begins there is a bliknk or dropout so that this does not transition from the sirst slide to the next seamlessly. Doe sanyone know why this is happening with Captivate and what a hack or solution might be. I have been trying to make sure that everything is ending withfull opaciity and the following slide starts with fullopacity.. anything you probably can think of I have tried.

The post Screen Blink appeared first on eLearning.

GIF Animation Tool – SnagIt

I have seen a number of posts popping up recently related to Animations and GIF types in particular.

I guess I had not noticed anyone mentioning my favorite GIF creator…  SnagIt  from TechSmith.  Both SnagIt 13 and SnagIt 2018 have the ability to create GIF files from your video capture. The best part is that they work real well in Captivate without needing to do anything special. Below is an example that seems to work pretty well in this posting as well. SnagIt is also really well priced for what it is capable of which is about $50. (No – I don’t work for them – LOL), but this is my “go to” tool for quick screenshots and GIFs. Hopefully you are able to see them – not 100% sure about browser support. I am on Chrome and these are looping just fine.

I also created a really quick Captivate project to show multiple GIFs in use on  the same page in a way that could be really useful. The working link is provided below.

https://s3.us-east-2.amazonaws.com/captivateshare/gifPage/index.html

As always, feel free to ask any questions that you may have and share some of the ways that you use GIFs in your projects.

The post GIF Animation Tool – SnagIt appeared first on eLearning.

Mouseover Animations and more…

It’s easy to have Captivate change the state of an object on a mouseover, but have you ever wanted to have an animation?  Here’s how you can using javascript and css.   In the sample file:

animations 

I have created 4 different animations for 4 different types of objects: Shape, button, textbox, and image.  I will explain here how to just do one. 

 

Step 1: Create your object on your slide.  

Create any type of object and give it the id ‘obj1’

Step 2: Create your ‘mouseover’ event listener

On enter frame put in the following javascript:

window.addEventListener(“mouseover”, function(e) {
if(e.target.id == “obj1”) {

}

This creates a mouseover listener. If the mouseover target is equal to “obj1” it will trigger an action.  

Step 3: Create your Animation Effect

Add the following lines to the javascript

if(e.target.id == “obj1”) {

document.getElementById(“obj1c”).style.transition = “all .5s”;
document.getElementById(“obj1c”).style.WebkitTransition = “all .5s”;
document.getElementById(“obj1c”).style.opacity = .2;
};

});

The style.transition and style.WebkitTransition (for Safari) sets the duration of the transition.  Not including these lines would result in the transition happening instantly. Note that you need to add a ‘c’ to your object.   

The style.opacity sets the new opacity to .2.  In other words opacity will transition from 1 to .2 in .5 seconds.  

Step 3: Add your ‘mouseout’ event listener

Add a mouseout event to your obj with the following code:

window.addEventListener(“mouseout”, function(e) {

if(e.target.id == “obj1”) {
document.getElementById(“obj1c”).style.opacity = 1;
};

});

This sets the opacity back to 1 when the mouse leaves the object.  Note that you do not need to add the transition timing because it was created on the mouseover event. 

All the Javascript together:

window.addEventListener(“mouseover”, function(e) {
if(e.target.id == “obj1”) {

document.getElementById(“obj1c”).style.transition = “all .5s”;
document.getElementById(“obj1c”).style.WebkitTransition = “all .5s”;
document.getElementById(“obj1c”).style.opacity = .2;
};

});

window.addEventListener(“mouseout”, function(e) {

if(e.target.id == “obj1”) {
document.getElementById(“obj1c”).style.opacity = 1;
};

});

  • Additional Notes
  • There are many transitions and effects you can add such as rotation, scale, background-color, and x or y movements.  This method also allows you to trigger other functions, show or hide objects, enable buttons, etc. 
  • For some reason adding transition times (i.e. style.transition = “all .5s) to text captions or images outside a mouseover event causes them to trigger a Captivate entrance animation.  That’s why I added the transition times inside the mouseover event.  If you are just using buttons or shapes you could dynamically add the transition times with the following script:

var a= document.querySelectorAll(“[id^=’obj’]”), i;

for (i = 0; i < a.length; ++i) {

  a[i].style.style.transition = “all .5s”;

  a[i].style.style.WebkitTransition = “all .5s”;

}

Hope you enjoy and feel free to ask any questions.  

The post Mouseover Animations and more… appeared first on eLearning.

Changing States vs Animation – (A Reason to Learn JavaScript)

At some point in your life you very well may have heard the phrase – “There is more than one way to skin the cat.” – not sure where or how that originated but I think most of us understand the meaning behind this idiomatic expression.

Creating projects with Captivate is no different. Arriving at your desired result could very well have taken any number of pathways. However, as much as those results might be the same, there can also be some subtle differences that can potentially make an impact on final presentation. I happen to think that it is good for us as developers to learn multiple ways to get the job done and then be able to choose which way provides the better impact. In many cases, there will be no marked difference, and so you may as well go with the method that is the quickest and easiest.

I think one of the areas where differences can be seen is when we compare state changes and animations. Now, you might feel differently and, to be sure, this is a subjective thing without any right or wrong answer per se. We’re merely talking about preferences here. Nonetheless, I find it to be an interesting topic for discussion and I will allow you to decide for yourself.

In my example, I have provided two of the seemingly exact same status indicator. The only difference between them is the manner by which they function.  The indicator on the left uses the native Captivate ability to change states to move the bar while the indicator on the right uses JavaScript to animate the bar.

The premise of the interaction is simple – pick items on the list to take with you that do not exceed 25 pounds. Click on the ‘Check Weight’ button to see where you come in. As you do so, pay attention to how the status indicators respond. Which do you prefer? Here is the link to the working comparison.

**Please note that I have no idea what the weights of these things are. I just picked some values that I thought might be close so try not to hold that against me. ** 

https://s3.us-east-2.amazonaws.com/captivateshare/meterClimb/index.html

Same end result. Subtle difference in presentation. The snap versus the glide.

Don’t get me wrong. I love the ability to do state changes and use them often. However, I always think it is worth the time to learn new skills and develop one’s craft.

If you plan to develop for years to come, I encourage you to take some time to enhance your craft and learn a little JavaScript. It can help you to create some experiences that have a little something extra above your competition.

The post Changing States vs Animation – (A Reason to Learn JavaScript) appeared first on eLearning.

Animation of Objects – Three Examples (Part 2)

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.

The post Animation of Objects – Three Examples (Part 2) appeared first on eLearning.

Animation of Objects – Three Examples (Part 1)

This will be a two part blog post in response to the particular thread linked below. The first part is the sharing of the project. Play with it and start thinking of ways this could add to your own projects.

https://elearning.adobe.com/2018/05/javascript-motion-effect-problem/

I had some fun playing around with this idea and think there is a great many ideas that could potentially come from it. So thanks, Jay, for the inspiration to put this together.
I hope that what you see sort of matches what you were trying to accomplish.

I went ahead and made an example of both scenarios where an object is whisked off screen and magically reappears in another form. One scenario uses a single button to perform the object swap while the other scenario requires the use of two buttons – one to change and one to change back.

I then expanded on the concept and used two buttons to slowly increment the object to the right and to the left but keeping them within a specified range.

There were a couple interesting workarounds that I came up with to make this smoother from a performance standpoint.
I will explain all of the code and setup in the next post. For now, here is the working project.

I would love to hear all of the neat ideas that you come up with for using these ideas.

https://s3.us-east-2.amazonaws.com/captivateshare/animateObjects/index.html

Happy Captivating!

The post Animation of Objects – Three Examples (Part 1) appeared first on eLearning.

Animated Scale with with Drag and Drop

Overview

I recently worked on a project where ‘balance’ was an underlying theme to the learning.  Without going into too much detail about the content, the learner needed to place several ‘statements’ into categories and through this process of categorizing would in turn understand the concept of balance.  Cue the obvious metaphor: the scale.

You can see the modified final product in the .cptx file I attached. Please feel free to modify or use it if you would like in your own projects.  This blog essentially explains some of the coding for those interested in learning more about javascript, web animation / .css, or Captivate.

DDBalance

Drag and Drop

I am assuming most people will know how to set up a basic drag and drop functionality.  I have 8 drag sources and 2 drag targets.  I have the drag sources snapped in a tiled position. For each drag target under ‘drag and drop’, ‘format’, ‘object action’, I have accept all and the 4 sources that are correct.  When any drag object reaches the correct target, it launches either advanced action ‘scale left’ or advanced action ‘scale right’.

Variables and Names

I have 5 custom variables.  eRot, sRot, eUpDown, sUpDown, and DDscore.  All set to 0

The balance bar is ID’d ‘bar’

The right and left scales are ID’d ‘scaleL’ and ‘scaleR’

The Rotation Animation Code

Have you ever tried to animate a rotation in Captivate just using the ‘RotateTo’ function?  My advice…don’t!  There are too many problems with it.  In particular if you need the rotation to happen multiple times.  In other words, if you want an object to rotate 7 degrees and then rotate 7 degrees back, it won’t happen.

I have a video post about using an external library called jQuery Rotate.  I also don’t recommend using this.  I am now generally trying to get away from jQuery and using external libraries and focusing on my Vanilla JS and .css skillz – that’s right with a ‘z’.

I do highly recommend reading up on css animation: https://css-tricks.com/css-animations-vs-web-animations-api/

Here’s the animation code I used just for the bar to rotate – not moving the scales up and down.  btw – I used an advanced action because I didn’t want to keep copying the same javascript over and over.

sRot = eRot;
eRot = eRot + 7;

barc.animate([
{
transform: “rotate(” + (sRot) + “deg)”,
},
{
transform: “rotate(” + (eRot) + “deg)”,
}
], {fill: ‘forwards’, easing: ‘ease-out’, duration: 1000});

When thinking of web animation, you need to think in terms of starting and ending frames.  Therefore you need to define the starting rotation in degrees and the ending rotation in degrees.  When this code is executed, sRot (starting rotation) equals the eRot (ending Rotation) and eRot adds 7 to its value.  Therefore if you executed this code 3 times the variables would change as follows:

0

sRot =0

eRot = 0

1

sRot = 0

eRot = 7

2

sRot = 7

eRot = 14

3

sRot = 14

eRot = 21

That’s what the first part of the code is doing.

The second part of this code – ‘barc.animate([‘ is basically declaring the starting frame rotation for the object barc (add a ‘c’ to all Captivate IDs you want to animate) and the ending frame rotation.

The last part of that code “{fill: ‘forwards’, easing: ‘ease-out’, duration: 1000})”  is saying that the animation will freeze on the last frame (fill forwards), the animation will change it’s speed out (ease-out) and the duration will take 1000 milliseconds (i.e. 1 second) to complete.

The Scales Moving Up and Down Animation Code

sUpDown = eUpDown
eUpDown = eUpDown + 16;

scaleRc.animate([
{
transform: “translateY(“+ (sUpDown)+ “px) “,
},
{
transform: “translateY(“+ (eUpDown)+ “px) “,
}
], {fill: ‘forwards’, duration: 1000});

scaleLc.animate([
{
transform: “translateY(“+ (sUpDown*-1)+ “px) “,
},
{
transform: “translateY(“+ (eUpDown*-1)+ “px) “,
}
], {fill: ‘forwards’, easing: ‘ease-out’, duration: 1000});

This is pretty much the exact same code as before, except instead of rotation, we’re dealing with the translateY position (moving up and down on the Y axis).  I also needed to apply the animation to both the left and right scale, but notice that as scaleR uses the sUpDown variable, scaleL uses sUpDown *-1.  This reverses the position because if sUpDown = 16,  sUpDown*-1 = -16.

Final Touches

I hid the Captivate submit button because I wanted more control.  I also could have added these final touches as part of the advanced actions but I forgot and wrote it in as javascript.

ddScore = ddScore+1

evaluate();

This means that every time a drag and drop source is successfully brought to the target, ddScore increases by 1.  It also executes the evaluate() function which I execute on enter slide.  That function is:

function evaluate() {
if (ddScore == 8){
cp.show(‘nextBtn1’)
};
};

Therefore if ddScore is 8 it will show nextBtn1 and the learner can continue.

The post Animated Scale with with Drag and Drop appeared first on eLearning.