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.

Articulate Storyline 360 – Publish as video – Review

In an eLearning course, the content is presented in chucks with page navigations and interactions. If you already have eLearning courses and you want to upload them to online course sites then it can be a challenge. There are many online course sites like Lynda, Skillshare, CreativeLive, Udemy, etc., that accepts video based content. To…

How to Animate Buttons (and lots of other cool Javascript stuff!)

Preamble

Something that I noticed with Captivate’s built in effects is that you cannot (or at least it is challenging) animate buttons.  In other words, a user clicks on a button, that button animates, and at the end of the animation, it fires off a function or advanced action. There might (or might not be) ways of doing this with invisible buttons, objects, and effects but this is one method.

Please note that if you are very uncomfortable using javascript, or absolutely hate any kind of programming this might not be ideal for you.  This blog is also LONG because I wanted to explain as much as I could at a beginner level.  I hope it will be useful.  In addition, I have posted some helpful links and the .cptx file at the bottom of this blog.

Step 1: Find and modify your cool animation

Head over to http://animista.net/play and find your perfect animation. Copy and then modify the code to your liking.  I modified the ‘wiggle’ animation and put it into the Web Animation API (WAAPI) format.

The animation script I used created was:

var options = {
iterationStart: 0,
endDelay: 100,
duration: 700,
fill: ‘forwards’,

}

var keyframes = [
{ transform: ‘translateY(0) rotate(0)’},
{transform: ‘translateY(-30px) rotate(-6deg)’},
{transform: ‘translateY(15px) rotate(6deg)’},
{transform: ‘translateY(-15px) rotate(-3.6deg)’},
{transform: ‘translateY(9px) rotate(2.4deg)’},
{transform: ‘translateY(-6px) rotate(-1.2deg)’}
];

All of this script goes into the slide’s on ‘enter slide execute javascript’.

A few notes about this animation script.  There are two variables: ‘options’ and ‘keyframes’.  ‘Keyframes’ basically specifies WHERE the object will move – like x and y position and rotation.  The ‘Options’ variable states HOW the object will move, like timing and repetitions.  If you copy and paste any .css animation code, just make sure it is exactly in the correct format.

 

Step 2: Create Your Buttons

For this example I created 3 buttons. Just basic smart shapes converted into buttons. I turn off ‘continue playing the project’, the clicking noise, and delete the ‘rollover’, and ‘down’ states. Each button will have it’s own function but the same applied animation.

I gave my buttons the ID ‘btn’, ‘btn1’, and ‘btn2’.

Oh – I also created a second slide with a button going back to the first slide.

Step 3: Create Your Buttons Functions

I don’t want to go into too much in detail about javascript functions, but essentially I want each button to ‘do’ something different.  If you really hate javascript you could always create advanced actions on a button and call them through javascript (that’s for another blog).  I’ll run through each function here briefly:

All of these function also go into the

Function 1:

function nextSlide(){
window.cpAPIInterface.next();
}

The function is titled ‘nextSlide’. It uses the captivate API interface to jump to the next slide.

Function 2:

function message(){
alert(“You pressed the Message Button”)
}

The function is titled ‘message’. When the function is called it creates an alert message with the “You pressed the Message Button” text.

Function 3:

function unHide(){
t = !t
if(t ==true){
cp.show(‘hidden’)
}
else
{
cp.hide(‘hidden’)
}
}

Ok this one is a bit trickier but it still uses some of Captivate’s built in function.  The function is titled ‘unHide’. When called it toggles the variable ‘t’ (which I’ll mention later) from ‘true’ to ‘false’. In other words, if ‘t’ initially equals ‘true’, the “t =!t” toggles ‘t’ to equal ‘false’.  Then it checks if t == true (the double ‘==’ means ‘is it equal to’. If ‘t’ is true it will “cp.show(‘hidden’) which means it will show an object I have given the ID name  ‘hidden’.  If ‘t’ is not equal to true “else” it will hide the object with the ID ‘hidden’

Step 4: Create the Animation Function

Here is the function that will trigger the animation. This also goes into the ‘enter slide execute javascript’ window.

function playAnim(e,f,g){

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

This one gets really complicated if you are a beginner at functions but I believe in you .  The function is titled ‘playAnim’ and it ‘passes through’ three bits of information ‘e’, ‘f’, and ‘g’.  I declare what those bits of information are when I ‘call’ (ask to start) the function.

pAnim = e.animate(keyframes, options);  This creates a new variable titled pAnim.  It states that whatever bit of information ‘e’ is, it will create an animation (.animate) ‘e’ with the ‘keyframe’ and ‘options’ variables.

pAnim.play() starts the animation

pAnim.onfinish = function(){   This means that when pAnim finishes it’s animation it will call a new function which is titled function and does…

cp.enable(f);  The function enables whatever bit of information ‘f’ is and…

g();   Launch whatever bit of information ‘g’ is.

 

Step 5: Program your buttons

Now you need to execute javascript for each button. But because we did all the work on ‘on enter frame execute javascript’ window, the rest is easy.

For button 1, I put this code in and that’s it.

playAnim(btnc,’btn’,nextSlide)

cp.disable(‘btn’)

playAnim(btnc,’btn’,nextSlide)    This is calling the function playAnim (the one that had e,g, and f)  If you look at that code you can replace ‘e’ with ‘btnc’, f with ‘btn’ and ‘g’ with ‘nextSlide’ to see how it all works.

You might be asking what is ‘btnc’.  If you ever want to animate something in Captivate, just add a ‘c’ to the end of the ID and it should work.  That could be a discussion for next time.

So playAnim(btnc,’btn’,nextSlide)  will essentially animate ‘btnc’, will enable ‘btn’ and will call the function ‘nextSlide’ when the animation ends.

The second line of the code: cp.disable(‘btn’) tells Captivate to disable the button.  It’s annoying if a user can click a button multiple times before the animation ends and it looks bad.  That’s why it nice to disable the button, play the whole animation, and then re-enable the button.

For button 2, the code is this:

playAnim(btn1c,’btn1′,message)

cp.disable(‘btn1’)

 

And button 3, it is this:

playAnim(btn2c,’btn2′,unHide)

cp.disable(‘btn2’)

 

Step 6: Add the ‘t’ Variable

Add the top of the execute on enter frame script add:

t = true;

This will declare the variable ‘t’ as true and will alternate when the toggle function is called.

_____________________________

 

That is all.  I hope that you find some or all of this useful.  All the best,

Jeremy

 

All the Execute on Enter Frame Code (in one place)

t = false
var options = {
iterationStart: 0,
endDelay: 100,
duration: 700,
fill: ‘forwards’,

}

var keyframes = [
{ transform: ‘translateY(0) rotate(0)’},
{transform: ‘translateY(-30px) rotate(-6deg)’},
{transform: ‘translateY(15px) rotate(6deg)’},
{transform: ‘translateY(-15px) rotate(-3.6deg)’},
{transform: ‘translateY(9px) rotate(2.4deg)’},
{transform: ‘translateY(-6px) rotate(-1.2deg)’}
];

function playAnim(e,f,g){

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

function nextSlide(){
window.cpAPIInterface.next();
}
function message(){
alert(“You pressed the Message Button”)
}

function unHide(){
t = !t
if(t ==true){
cp.show(‘hidden’)
}
else
{
cp.hide(‘hidden’)
}
}

 

Useful WAAPI Animation Sites

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Web_Animations_API_Concepts

https://css-tricks.com/css-animations-vs-web-animations-api/

 

The .cptx file

animateBtns

eCard created in Adobe Captivate 2017

Having created eCards in the past using Flash, I wondered how far I could go in Captivate to create a animated video eCard.  Since Captivate features a timeline and includes effects and motion paths I thought I could create a sequence and output to video.  With a few concepts outlined in a storyboard I began work in Captivate to see what was possible. Although this is not really what Captivate was meant to do, it allowed me to get creative and dive deeper into features I don’t always use on a day to day basis when creating eLessons.

Let me know if you are interested in how this was put together, as I plan on posting the details on my blog.

What would better way to kick off my YouTube channel that with a holiday eCard! You can view it here:

 

 

Rotate Objects with JQuery

Learn JQuery Rotate,

Also some basic javascript programming, embedding external javascript libraries into your projects, and more!

 

 

Here are the basic steps to creating the ‘seesaw – type’ object:

1. Create the object and give it an id name ‘bar’

2. Create two variables ‘sRot’, and ‘eRot’. Give both a value of 0

3. Create two buttons that execute javascript.  (unclick advance project )

Javascript code for right button is:

sRot = eRot;
eRot = eRot + 7;
$(“[id=’barc’]”).rotate({angle:sRot,animateTo:eRot,easing:$.easing.easeInOutExp});

Javascript code for left button is:

sRot = eRot;
eRot = eRot – 7;
$(“[id=’barc’]”).rotate({angle:sRot,animateTo:eRot,easing:$.easing.easeInOutExp});

 

4. Download jQueryRotate.js at http://jqueryrotate.com

5. Publish your project

6. Paste jQueryRotate.js in ‘assets/js’ folder

7. Edit index.html file (I use Sublime Text Editor)

Change the var lJSFile to include the jQueryRotate.js file

var lJSFiles = [  ‘assets/js/jquery-1.11.3.min.js’,’assets/js/CPM.js’,’assets/playbar/playbarScript.js’,’assets/js/jQueryRotate.js’ ];

8. Save index.html and launch the index.html in your browser.  Enjoy your rotating bar!

 

 

 

How to make an animated Carousel as header like with Bootstrap, for responsive and non responsive projects

This video shows how to make an animated carousel as header for responsive and non responsive projects like we can do it with Html/Css frameworks like Bootstrap or Foundation, or JQuery plugins.

This video shows:

– how to design the pictures,

– how to make the carousel by using a Multi-state Object,

– how to animate the created pictures with the effects panel,

– how to use the While advanced action enabling the final carousel to run in loop indefinitely.
This video shows an example from scratch from a non responsive project first then its application to a responsive project.

#AdobeCaptivate #eLearning #Livestream – Making An Awesome Title Page 10/10/2017 10 AM EDT

In this Adobe Captivate eLearning Livestream, I will share with you some of my best practices for creating a really great title page for your eLearning project.

As per usual, I will also be taking questions if time permits so get your Captivate Questions ready for the Live Chat.

Follow the link right now to set up a reminder to get notified when this event becomes live on October 10th, 10 AM EDT.

#AdobeCaptivate #eLearning #Livestream – Making An Awesome Title Page

If you enjoy my LIVE STREAMS, please share them with your colleagues and don’t forget to subscribe to my YouTube channel to make sure you’re notified of all my upcoming events. If you subscribe to my YouTube channel you will receive my Adobe Captivate 2017 – Responsive Custom Quiz Questions online course from Udemy for only $10 (a $50 value).

Loop animation with Captivate 9 / Illustrate a background with a scenery running in loop

I know that a lot of users still use Captivate 9, so I put this video that shows a way to make a loop animation with Captivate 9.

The purpose of this video consists in showing how to illustrate a background with a loop animation.

The process shows a scenery running in loop and the way to design it: by creating visual cycles within a picture as we do in cartoons, then by applying an animation effect to this created picture, and finally by editing a Captivate script.

A lot of people have already found this video very useful for their projects.

 

For Captivate 2017 users: even if the way to make loop animations is now easier with the new “While” action, you will be able to see the way we can create visual cycles within a picture in order to reuse it, if you want to animate a background/scenery filling all the wide of your screen.

You can watch this video from the following link: