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.

JavaScript Motion Effect Problem

OK…I’m on a roll this week with JavaScript questions.

I’m attempting to use JavaScript to move an object off the side of the page and then back on when you select a button.

Here’s the code I used:

var obj = document.getElementById( ‘re-txtField_2c’ );

var posX = parseInt( obj.style.left );

obj.style.transition = “.4s”;
obj.style.left = (posX + 910) + ‘px’;

I had code to bring the button back as well, but it doesn’t seem like I need it.  Through troubleshooting one problem, I learned that this will move my object off the screen, and then it slide back to it’s original position.

Here the problem I’m having…select the button the first time and everything works fine.  Select it a second time in a row, and it moves the object off the screen but doesn’t bring it back.  Select it a third time in a row and nothing happens.

I put the same code on a second button.  Now, if I alternate between selecting button One and Two everything seems to work fine….but if I select either button more than once in a row things break….but, they are fixed if I then select the other button.

I’m very, very new to trying to work with JavaScript (especially within Captivate) so I’m sure there is some nuance or rule that I’m unaware of that is causing me difficult.

Thanks in advance for the help!

Jay

The post JavaScript Motion Effect Problem appeared first on eLearning.

Set Variables With Interactive Sliders – Part 5 Additional Resources

This is the fifth and final part of the series for adding a slider to your project that will update your variables.

If you have not seen the first four, you may want to get caught up.

Part 1 – Introduction

Part 2 – HTML and CSS

Part 3 – Adding File to the Stage

Part 4 – The JavaScript

In this post I just wanted to share the complete project so that you will have something else to play with. The complete project, of course, extends the usage of this idea to two sliders on one screen which control different variables. I also thought I would share some websites that I spent a significant amount of time on in order to get this figured out as well as some other resources I mentioned over the last four postings.

Project Items – zip file contents – approx 650K
projectFiles

The Money HTML File – This is the code for the slider that sets the dollar amount
The Percent HTML File – You will notice that it is exactly the same as the money file but with a different range, step value, and named ID
The JavaScript Text – You should notice that the two sliders have essentially the same code. What changes is the variable name  frame vs frame2  for example, and the addition of the formula for calculating the new price with sales tax added on. Remember – this is placed as an OnEnter action.
The CPTX File – This was made with Captivate 2017 so, I guess, don’t try to open it with an older version. You can, however, use the other files to recreate it in your own version, if different.

Websites and Other Items

I am no expert in this JavaScript stuff. I had to study hard and perform lots of trial and error to get things to eventually work.
Here are some websites that I used pretty extensively to learn stuff during this project. Maybe you can gain from them as well.

W3Schools – Amazing resource! Covers HTML, CSS, JavaScript, jQuery, and more! Like a “One-Stop” shop! I spent most of my time here by far. The little windows to test things is helpful.

jQuery UI – This project did not require anything from the jQuery-UI specifically but did use some jQuery but I learned a great deal from this site.

7-Zip  –  This is the program I use for creating and extracting zip files. The price is right – FREE!

Notepad++  –  This is my editor of choice. I started using it during my undergrad courses in HTML, CSS, PHP, and JavaScript and haven’t switched yet. And again, it is FREE!

Ninite – I did not mention this site in my posts but it is the place I go to get my free downloads. It will automatically pick the right versions and install them with out all the need to go to a million different sites and click NEXT, NEXT, NEXT just as many times. It also strips out any freeware that piggybacks on a lot of free stuff out there.

Also a big thanks to one of my colleagues who spent two hours performing trial and error runs with me.

I had a great time making this and sharing it with all of you.
I hope you will get something out of it and be willing to share your ideas related to their use for us to see.

The post Set Variables With Interactive Sliders – Part 5 Additional Resources appeared first on eLearning.

Set Variables With Interactive Sliders – Part 4 The JavaScript

This is the fourth part of the series for adding a slider to your project that will update your variables.

If you have not seen the first three, you may want to get caught up.

Part 1 – Introduction

Part 2 – HTML and CSS

Part 3 – Adding File to the Stage

In this post we are going to add the JavaScript that reads the HTML5 Animation that we added in the last step. I don’t intend to teach this but hopefully I can explain it well enough for you to see what is happening with it.

Setup A Captivate Variable

Let’s begin this by creating a Captivate variable to assign. For this walk-through I will just call it  varSlider.
Go ahead and create a smart shape and have your variable display within the box by using the   $$varSlider$$   format.

Renaming the Web Object

This is not required by I am going to do it because I personally do not like underscores in my naming if I can help it. The HTML5 Animation we added to the stage would have a default name of   Web_1   and I will change it to   web1   which removes the underscore and goes lowercase with the ‘W’.

**The name, however, is very important. Whatever you decide to name yours – remember what it is.**

The JavaScript Itself

The JavaScript will be added to the slide as an  OnEnter action.

setTimeout(function() {
var frame =$(‘#myFrame_web1c’);
var frameRange = frame.contents().find(‘#slideRange’);
frameRange.on(‘change’,function(event)
{
varSlider = frameRange.val();
});
},1000);

As you can see not much is needed but it will be important to explain some of it.

Basically, we just have a single timing event…

setTimeout(function, milliseconds);

which will run the function after a set time of 1000 milliseconds or just one second after we enter the slide. This is important as it allows enough time for the HTML5 Animation to fully render before we try to access it.

The function part has three things to be executed. Two variable assignments and an event handler assignment which does another function. Let’s look at each one separately.

var frame =$(‘#myFrame_web1c‘);

This assigns a variable we are calling  frame  to equal the ID of the iframe that is created when we place the HTML5 Animation on the stage. It seems that Captivate is using the same convention to do the naming. The convention is   myFrame_objectNamec   where objectName is the name we gave the object – in my case it is  web1  (see why we need to remember that?) –  and places a  c  at the end. So the code here is jQuery as indicated by the dollar sign. The hashtag is what we use to refer to an ID name.  So now we have pulled our iframe into a variable.

var frameRange = frame.contents().find(‘#slideRange’);

The next line assigns a variable we are calling  frameRange  to equal the value of our input range that we created. Remember that we gave our input range an ID name of   slideRange?
So we utilize the   frame   variable we just created with   frame.contents().find   which says to go look at that iframe and search the contents to find an ID called   slideRange

frameRange.on(‘change’,function(event)
{
varSlider = frameRange.val();
});

For the final piece to be executed, we reference our last variable again and indicate what is to happen anytime our   frameRange   changes. For this purpose we want to perform another function.  That function is to assign our Captivate variable   varSlider   to be equal to the   frameRange   value.  If you make a different Captivate variable name be sure to change this part accordingly.

Now that the code is in place, we can test this out to see how it works. When we drag the handle and release, we should see our variable update in the smart shape and that means we can do all sorts of other advanced actions based on the value of that variable.

I am sure there is probably a more efficient way to handle this but this worked so I decided to stick with it.
Hopefully you can get this working, too, and find some neat ways to implement it in your own projects. I would be happy to hear about them.
Be sure to check back for the final post where I will share my complete tax calculator code with two working sliders on the stage at the same time along with some additional resources.

The post Set Variables With Interactive Sliders – Part 4 The JavaScript appeared first on eLearning.

Set Variables With Interactive Sliders – Part 1 Introduction

One of the things I have enjoyed greatly about being a part of a community such as this is the opportunity to be challenged and inspired.

I also enjoy sharing the fruits of my own growth with the rest of you in the hopes that you will also find inspiration.

I have seen a great number of postings that do one or more of the following…

  1. Ask about something related to drag and drop
  2. Ask about draggable elements within fixed areas.
  3. Ask about sliders and dials like what Articulate has.
  4. Refer to the use of HTML5 Animations to get certain jobs done.

I found some hope in these things. So I set out on the research trail for the last couple weeks and have made what I think is a pretty neat achievement.

It started with making a slider with just a small chunk of CSS and HTML followed by getting it on the Captivate stage as an HTML5 Animation. OK, that was pretty cool but I found it to be rather lackluster since there really wasn’t anything useful to do with it at that point. ooooohhhh….. drag the handle back and forth…. The interaction needed some sort of purpose.

That meant finding a way to use the slider as a means of populating Captivate user variables so we can do some actions. Back to the research trail. After many hours of  trial and error and sifting through code, studying, and more trial and error, I finally have a working solution.

I will be sharing my first slider interaction with you in this post.

Over the next few posts, I will outline the work that it took to come up with this and I will warn you that it is not for the faint of heart, but I think if you start with what I give you over the next few postings and perhaps take a brave new step out of your comfort zone that you can come up with some amazing things.

This project is basically just a sales tax calculator. You utilize one slider to select the amount of money being spent from $1 to $100 and the other slider to select the sales tax rate from 1% to 10%. As you adjust the sliders, your total amount including the tax is calculated and populated in the box automatically. Now we have purpose and potential for sliders in Captivate. There are three variables…  varMoney,  varPercent,   and  varTotal. The sliders set two and a little math in the code populates the total. More on all that to come.

Here is the link and please stay tuned for the next part where I will continue by covering the HTML and CSS needed to create the slider itself.

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

I am really excited and pumped about this. I hope to hear about all the neat ideas each of you has for using sliders in your own projects. I think we are only scratching the surface with this. Captivate is an extremely powerful tool, I think, limited only by our creativity.

The post Set Variables With Interactive Sliders – Part 1 Introduction appeared first on eLearning.

Radio Buttons From Scratch

In this little project, I thought I would highlight something that seems to pop up from time to time and that is the use of radio buttons.

OK, yeah, I know there is a radio button widget but personally, I prefer to stay away from the widgets if I can.
With these radio buttons you can have as many as you want with as many variables as you need on the same screen but you’ll have to make sure you have the logic right.

Now – to be clear – these will not be your best choice if you need to have some LMS recorded scoring going on but I find the greater flexibility and control to be rewarding. I do create a lot of SCORM packages to upload to Adobe Captivate Prime but quiz scoring is not needed for the majority of our training so these are great for employee professional development and customer product training reviews and such.

At any rate, I give you a simple “magic trick” so you can use the home-made radio buttons for yourself and an opportunity to learn more.

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

Perhaps you can think of some interesting ways to use something like this in your own projects. I’d love to hear about them.

Feel free to ask any questions you may have.

The post Radio Buttons From Scratch appeared first on eLearning.

Keypad With Shifting Digits

In this project I will help you to create a keypad where the digits on the display shift to the left as you enter them.

In addition to the digit shifting effect – this keypad also serves as a lock to the next page, so you’ll need to do some beginner puzzle solving to get the right code.

I do use javascript in this project but you can also use advanced actions. However, you would need to spend a lot more time pulling off the display to change states without the concatenation that the javascript provides.

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

I could see this as a sort of fun way to have younger students key in answers to low level math problems. The pop-up error message could contain specialized feedback. On the corporate side of things, this idea could be modified for equipment training that requires user input.

What things can you think of?

Please feel free to ask any questions that you may have.

The post Keypad With Shifting Digits appeared first on eLearning.

Countdown Timer

I have periodically seen questions related to timers and thought I would put something together that might be useful to the community at large.

Without further ado, I present to you the 10-Second Timer 3000! Never before seen on TV… LOL

Anyway, this timer does not have lots of bells and whistles and it only goes to 10 seconds for the sake of the demo.

In this project, I utilize the concatenate technique I have posted on in order to update the display but I also introduce another piece of javascript that executes the same code every second.

setInterval(function, time);
This will repeat the function every set amount of time. In this case, I reduce a variable by 1 for every second and use that variable for my display.

Here is the link to the working demo.

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

Try it out and think about how you might employ things like this into your own projects.
I kinda want to make a microwave and cook up a TV Dinner…

I have included the code and a little bit of explanation so you can study it a bit if you so desire.

Feel free to ask any questions you may have.

The post Countdown Timer appeared first on eLearning.

Expanding on the Concatenate Technique

In my last post on concatenating, we looked at how to change states based on two variables.

This time, I wanted to expand on the technique a little bit to show another usage and application to fuel your own creative thinking.

In this example, the scenario is that we have a new employee joining the team and they need to access all of their training materials within the locked briefcase – they just need to open it.

Now – you could create whatever clever means for the new person to acquire the codes to unlock each side of the briefcase but I will simply give them to you.

The left lock is code 348

The right lock is code 682

This project has two concatenations going on.

  1. I concatenate the word “dial” with the value 0 through 9 to create “dial0, dial1, dial2, etc” for each of the number wheels.

    cp.changeState(“wheel1″,”dial”.concat(dialA));

  2. Then I concatenate the three variables for the the wheels on the left and the three wheels on the right separately.

    window.comboLeft=String(window.dialA).concat(window.dialB).concat(window.dialC);

    This is so that I can have a check for the whole code to unlock that side.

    If (comboLeft==348) {
    cp.changeState(“leftLock”,”open”);
    }

As you can see, the concatenation portion of this looks different which is one reason I wanted to have this second example.

In this case, I take the number values from the variables and convert them to a string so they can be easily put together.

I do the same for comboRight on the other side but with dialD, dialE, and dialF.

window.comboRight=String(window.dialD).concat(window.dialE).concat(window.dialF);

Here is the link  to see the briefcase in action.

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

As always, I am interested to know how you might implement a technique such as this.

The post Expanding on the Concatenate Technique appeared first on eLearning.