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:

 

New course — Adobe Captivate 2017: Animations and Effects

I’m excited to announce that my new course on Adobe Captivate 2017: Animations and Effects is now available on Lynda.com and LinkedIn Learning. If you don’t have access to Lynda.com, you can use this link to get a free 30-day trial.

Adobe Captivate 2017 Animations and Effects

 

Course Description:
Adding animations and effects to your eLearning materials can help make your courses more engaging and interactive. Adobe Captivate 2017 boasts features that can help you create subtle animations and digital effects. In this intermediate-level course, learn how to leverage this functionality to make your eLearning content stand out. Pooja Jaisingh covers a variety of topics, including how to include SWF, GIF, and HTML5 animations, work with transitions, and add emphasis with object and text effects. In addition, she demonstrates how to apply the concepts and techniques covered in the course to build several different animations.

Topics Include:
Adding external animations
Using slide and object transitions
Applying timeline-based effects
Applying trigger-based effects
Applying effects to a group of objects
Creating and saving custom effects
Using while loops and delay actions
Creating an animated background and title page
Creating a moving car animation

Duration:
1h 18m

Lynda.com course link

LinkedIn Learning course link

 

 

 

Treasure map

Hello,

I am creating an eLearning game for a class and I am trying to see if Captivate has a feature for what I am trying to do. Before you read my question, check out the image I have attached. Basically, the kids will go through the treasure map to achieve the goal of the lesson. Each X in this picture is a button that leads to a new topic. Is there a way I can draw a line from X to X so that it keeps track of the student’s progress as they go through the game? I would prefer if the screen temporarily locked and the student could see a bold line going from one X and then over the dotted circles to the next X. Once the next X is reached by the line, the student could then click on the next X, which is the next lesson. Is this possible?

 

blog