Using Animation effects efficiently and professionally:

As we all know there are many (animation) effects that Captivate provides & which, we can apply to any object in our project. At first sight it may look cool.

But in real life, we may need to apply two/three effects on the same object and that also concurrently. And that is not so simple and straight forward. It is also time consuming and need trial & error(test-edit-test..). Even that is accepted. But what, When we want same complex effect on many other objects on many another slides?

What I mean is, when we work on really big project, where naturally, we may need to repeat same animation pattern, object, style multiple time. Applying complex animation effects again and again, by repeating all steps again, may become tedious work. 

Have a look at this demo where multiple effects need to apply to achieve some specific effect.

Demo. 

Play

Luckily, There is way a cool way to do it professionally.

Step 1:

Just apply all(whatsoever, multiple) effects to a particular object as per your project need. Test it.

Step 2:

Now save that effect using save button.

Step 3a: Only care need to be taken to save it in specific directory.  Normally, in     Cogram FilesAdobeAdobe Captivate 2017 x64GalleryEffects

Step 3b: After navigating to above path, Create folder name ‘Custom’ (or any name of your choice.).

Step 3cGive some meaningful name to the file & Save it.

Step 4Once saved, you can just apply that customized multiple complex effect on any other object with In a second by selecting effect from effect.

This will have following advantages:

1)      Saving of lots of time.(creating complex combine effect may take lots of time, and professionally it would not be possible to spend time again and again…)

2)      Exact same effects(seamlessly) in other slides.

3)      As you have saved in external file, now that effect can be used in any other project very easily. By this way, in big organization, let Animator/graphic Visualizer design one by one complex effects and save that for future use. And let other person working on the project use it.

4)      As it is universal XML file, you can easily open in any text editor, and modify also!

 

The post Using Animation effects efficiently and professionally: appeared first on eLearning.

Mouse click on project slide finishes all animations on slide.

I have a Captivate project loaded from MS Power Point, linked with high fidelity and slide duration, set to advance automatically.

Power Point slide has no mouse-click transitions or animations.

Bullet 1 appears after 5 seconds, Bullet 2 appears after 10 seconds, Bullet 3 appears after 20 seconds.

When looking at the whole project, it looks fine, all animation works.

When the screen is clicked in the middle of the slide, the slide will advance to the last bullet animation – e.g. click at 3 seconds, all bullets appear, then slides transitions to next.

This occurs in the swf version and in the slide preview on Captivate, strangely not in the HTML5 version.  What is going on here?  There are no actions from mouse clicks anywhere in the project!

The post Mouse click on project slide finishes all animations on slide. appeared first on eLearning.

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.