Scrolling Marquee Sign

I was having some fun with creating one of those signs that scrolls messages across the display and thought I would share it with you.

As with all projects – there is usually more than one way to approach them but I hope this will simply provide some inspiration for some of your own projects.
Tackle it however you choose. Here is my rendition…

My little message board is made up of several states, a couple variables, and some buttons.

Image States
Of course, I had to create enough image states to represent all the updates in the display. My example has a display with a digital readout and total  of 33 states. Basically it was nothing more than doing a one-off of each of the letters so it did not take too long to create them. I did spend a little time trying to get what I thought was a decent glow on the letters for aesthetic purposes only.

Variables
I have two variables. One to track whether the display is on or off and one for helping to adjust the speed of the scrolling.

Buttons
I have four buttons. Two speed buttons – one to increase speed and one to decrease along with two buttons for turning the display on and off.

Function
Once started, the message will continue to scroll over and over until stopped. I wrestled a bit with immediately “powering off” the display and letting it finish the message and simply not repeat again. I decided to just stop it cold in order to reduce confusion over whether the button worked or not. The speed buttons will increase or decrease the speed of the scrolling by a hundredth of a second for each click of the respective arrow.

JavaScript
I decided to run with JavaScript on this, although I did make a version using advanced actions as well. I stayed with the JavaScript on this one because I felt it offered better control over the speed. The ‘Delay Next Action’ option is too clunky for me when timing is more critical. I will admit, though, that it was quicker in this case to simply create an advanced action with a ‘While’ condition to go to the next state.

On the green power button, the JavaScript itself is a simple repeating of a setTimeout function called scroll that changes the state of the display. The final setTimeout calls the first one as long as the variable for power is flagged. Here is an example of what they look like so you can see the pattern. I am sure there is a better way to script this but I can only work with what I know for the moment. We are also setting the go variable to 1, calling the scroll function,  and disabling the green button so that the scrolling is not initiated on top of itself.

function scroll() {
cp.changeState(“display”,”w”);
if (window.go==0) {
cp.changeState(“display”,”Normal”);
}
else if(window.go==1) {
setTimeout(scroll2, speed);
}
}

function scroll2() {
cp.changeState(“display”,”we”);
if (window.go==0) {
cp.changeState(“display”,”Normal”);
}
else if(window.go==1) {
setTimeout(scroll3, speed);
}
}

On the red power button we are simply changing the go variable to 0 and re-enabling the green button.

On the speed buttons, the code simply increases or decreases the speed variable by a value of 10. The setTimeout part of the javascript uses a value in milliseconds which means a value of 1000 represents 1 second. I have the default scrolling set for 100. It is worth noting that in order to decrease the speed of the scroll, I am actually increasing the speed variable while decreasing the speed variable in order to make it go faster.

If you have any questions about this please do not hesitate to post them.

I have included a working sample below.

Play

The post Scrolling Marquee Sign appeared first on eLearning.

Accessing Image by ID containing a specific word via an external JS file?

Hi everyone, I’m working in Captivate 2017 on a responsive project. What I’m trying to accomplish is take a piece of code which ‘zooms’ (translates position and scale via GSAP API) images via one function that targets all images by whether or not their id contains the word ‘image’. I’ve created something that ‘zooms’ images using GSAP already, but the difference is I made each image page a .zip file containing an html, css, and js page. This was nice as I could control the css and html of the images, however, loading a .zip file on each slide with an image can take a minute and sometimes images don’t load right away.
I’m wondering if I can do the same effect, however with one external JS file that I’ll load into my index.html file after publish. I’m having a hard time calling/accessing images with an id that contains the word ‘image’ however. I’m not an expert coder by any means and I’ve had a lot of help from forums to get as far as I am, but essentially the code I’m using looks like this:

var targets = document.querySelectorAll(‘[id^=”image”]’);

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

var tl = new TimelineMax({ paused: true, reversed: true });

tl.to(targets[i], 0.6, { x: 100, y: 100 }, 0);

targets[i].anim = tl;

targets[i].addEventListener(“click”, function() {

this.anim.reversed() ? this.anim.play() : this.anim.reverse();

});

}

This method using document.querySelectorAll returns the variable ‘target’ in the console log as a node list with the length of 0 (even when on a slide that has an image on it). So I’ve tried another method:

var targets = $(“img[id*=”image”]”);

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

var tl = new TimelineMax({ paused: true, reversed: true });

tl.to(targets[i], 0.6, { x: 100, y: 100 }, 0);

targets[i].anim = tl;

targets[i].addEventListener(“click”, function() {

this.anim.reversed() ? this.anim.play() : this.anim.reverse();

});

}

I’ve tried this using $(“img …. and $(“div …. as I’m not sure what HTML tag captivate assigns to images? Neither of them seem to pick up my image with the id of “image43”  however. In the console log it returns as “m.fn.init [prevObject: m.fn.init(1), context: document, selector: “img[id*=”image”]”]” with a length of 0.
Anyone have an idea as to how I can call my images based off of their id and if it contains the word image? Or if I could do the same thing by calling whatever class name captivate assigns to images (how would I figure out what that is)? Thanks!

The post Accessing Image by ID containing a specific word via an external JS file? appeared first on eLearning.

Three Learning Interactions from One JavaScript Function

Click to Launch Project: Play

Learning Interactions are components of Adobe Captivate 2019 that provide the learner with a specific way of viewing information or interacting with published courses. For example, a Glossary is a Captivate Learning Interaction that presents terms in a list and allows learners to search the list using an input field or scrollbar. A number of contributors have created videos and blog posts on Learning Interactions, and I’ve listed them in the reference section, should you want to view them yourself.

You may be tempted to call Learning Interactions “widgets”, and you wouldn’t necessarily be wrong. However, as Leive Weymeis notes,  within the Captivate environment a “Widget” refers specifically to components compatible with Adobe Flash (.swf) while Learning Interactions refer to those compatible with both Flash and HTML5. A subtle, but important distinction when you’re developing courses.

Learning Interactions have a number of advantages, including improving engagement through the organized presentation of content and increased opportunities for user interactivity. Another advantage is that you don’t have to create them, as there are a number of Learning Interactions in Captivate ranging from a simple Table to games, such as Jeopardy and Who Wants to be a Millionaire.

While Captivate’s Learning Interactions provide great features and functions, you could find yourself in a situation where you don’t need all the bells and whistles or want greater control over slide layout and content. Learning Objects require that you cover the entire slide, and while some configuration and use of alternative themes is available, the basic slide layout is standardized.

Recently, I found myself in a situation where I wanted some of the functionality that Learning Interactions provide, but couldn’t find a Learning Interaction that was consistent with my overall graphic design concept. After giving it some thought, I decided to create my own, and while they don’t contain all the functions of the onboard Captivate Learning Interactions, they worked for me. JavaScript is a personal preference for me, and you could likely create something similar with Captivate’s Shared Actions.

This article presents three simple interactions created with Captivate 2019 and JavaScript:  A Tabs interaction, a Timeline interaction and a Process interaction. The code is set up in such a way that all three interactions used the same JavaScript function, provided a structured naming scheme was used for a relatively common set of multi-state objects.

If you’re familiar with JavaScript and multi-state objects, you can jump to the JavaScript code later in the post. I’ve included comments that explain how it works. If you’d like more detail on the reasoning behind the code, I’ve included additional detail and pictures in the following sections.

Component Objects: Multi-State Rectangles and Circles

The fundamental components of the interactions in this article are multi-state rectangles and circles, with one dedicated object each for titles, text and pictures. Each multi-state object was a container of sorts for all the content of its type. In the figure below, the highlighted rectangle (ttp2_pic) contains a series of states each having a picture corresponding to a “Milestone” in the Timeline interaction. For example, “pic_1” corresponded to a picture for “2010” while “pic_9” corresponded to picture for “2014”.

In order to make the JavaScript function work, without resorting to additional scripting, each Learning Interaction was limited to one multi-state object for title, text and pictures. In other words, all content for a single interaction was displayed in the same objects, a “single” display of sorts.

In contrast, there were as many buttons in each interaction as needed, with each button serving as a trigger for a specific state. For example, there were 9 buttons in the Timeline with each corresponding to a specific point in time. When a button was clicked, such as the “2010” button (i.e., ttp2_button_1), it would change the state of the related title, text and picture objects to the state associated with 2010 (i.e., title_1, text_1 and pic_1).

Naming Conventions

In order for the buttons to “call” the appropriate title, text and picture states, a standard naming scheme was used. While the end result was that there was no need to use variables in Captivate, it did mean that care had to be taken in naming each multi-state object and button across the three interactions. The general scheme is shown in the figure below.

In short, the slide was the name of the Learning Interaction, with “ttp” signifying “Tabs, Timeline and Process”. To ensure each interaction had a unique name, a number was added to the end. For example, the Timeline was the second interaction so it was named “ttp2”.

In turn, the Learning Interaction name (e.g., “ttp2”) served as a prefix of sorts for all display objects and buttons on the slide. This ensured they could be uniquely identified by Captivate and the JavaScript function. In addition to the Learning Interaction name prefix, each button received a number at the end to distinguish them from other buttons on the screen.

Invoking JavaScript

Clicking on a button resulted in calling the f_tabTimeProcSing() function, named for interactions “Tab”, “Timeline” and “Process”. The “Sing” text string indicates a single set of display objects (i.e., title, text, picture). The function sends three key arguments:

  • numberButtons: The number of buttons used in the specific interaction (e.g., “9” for the Timeline)
  • charWidgetName: The number of characters in the “prefix” of the button name corresponding to the “widget” (Learning Interaction) name (e.g., “4” for “ttp2”)
  • numbCharStem: The number of characters excluding the number at the end of the button name (e.g., “12” for “ttp2_button_”).

Example: f_tabTimeProcSing(“9”,”4”,”12”);

For the three interactions in this post, much depends on correctly naming the objects, especially the buttons. While a bit tedious, it resulted in only about 12 lines of code and allowed for the creation of a  large number of independent Learning Objects within the same project.

JavaScript Execution

There are three general areas of execution in the JavaScript:

  1. Extracting the active button’s name, its “prefix” (i.e., interaction name) and “suffix” (i.e., ending number)
  2. Change state of all button states to “inactive” using a loop limited by the number of buttons (numberButtons).
  3. Change state of all objects associated with the button “prefix” and “suffix” to “active

Invoking JavaScript Function

//Invoke Function via Button Click

f_tabTimeProcSing(numberButtons,charWidgetName,numbCharStem);

Executing JavaScript Function

/*

Tab, Timeline and Process Widget – Single Set of Display Objects

Parameters: Number of Buttons, Widget Name, Number of Characters Excluding Number at end of Button Name

*/

function f_tabTimeProcSing(numberButtons,charWidgetName,numbCharStem) {

//Extract Active Button Name, Widget Name and State Number

var v_buttonName = this.document.activeElement.getAttribute(“id”);  //Get Id of active button

var v_widgetName = v_buttonName.slice(0,charWidgetName);  //Extract widget name from button

var v_contentNumber = v_buttonName.slice(numbCharStem);  //Slice state number off  button’s end

//Deactivate Previously “active” Button by Setting all Buttons States to “inactive”

//Note: Number of Buttons is Used to Limit the Loop

var i=1;

while (i<=numberButtons){

cp.changeState(v_widgetName+”_button_”+i,”inactive”);

i++;

}

//Set State of Clicked Button to Active

cp.changeState(v_buttonName,”active”);

//Create Target Names of Multi-State Display Objects Using Widget Name and Content Type

//Create State Using State Type and Unique Number at End of Button Name

cp.changeState(v_widgetName+”_title”,”title_”+v_contentNumber);

cp.changeState(v_widgetName+”_pic”,”pic_”+v_contentNumber);

cp.changeState(v_widgetName+”_text”,”text_”+v_contentNumber);

}

Conclusion

While the Learning Interactions created weren’t as sophisticated as the those within Captivate 2019, they did serve the requirements of the project, especially in terms of creating a common graphic design theme across the slides. While some of the additional Captivate features, such as animated process boxes or a responsive design, would have been nice, they weren’t needed.

References

Adobe eLearning | Create learning interactions in Adobe Captivate

Lieve Weymeis | Tips – Learning Interactions

The Captivate Team | Introduction to Drag-and-Drop interactions

Allen Partridge Ph.D. – Adobe eLearning | Smart Learning Interactions Tutorial

Paul Wilson | Adobe Captivate – Make Your eLearning Interactions Experiential

Media

Daniel Jacobs | Sydney Opera House

Jeremy Galliani | Sydney Opera House

Wallpaper Flare | Green and Black Floral Textile, Colorful, Abstract

The post Three Learning Interactions from One JavaScript Function appeared first on eLearning.

Using javascript to jump to last slide in project (not based off of slide index or name)

Hi there, I’m wondering if anyone knows a way to use javascript to jump to the last slide of the project if you don’t know the amount of slides in the project? Obviously I can look at how long the project is everytime and put in the slide index number like –

window.cpCmndGotoSlide = 15;

but I’m wondering if there isn’t some way to identify the last slide of the project, so that if the number of slides changes I don’t have to go back and change my code?

Any help is much appreciated.

Thanks.

The post Using javascript to jump to last slide in project (not based off of slide index or name) appeared first on eLearning.

Navigation between two Captivate projects (stop a page from reloading?)

I’m working in Captivate 2017 in a non-responsive project. I have multiple projects that I’d like to ‘link’ together, which I’ve been able to do using my custom next and back navigation buttons built in Adobe Animate. The code for loading up a new project looks like this –

window.parent.window.location.href(“https:/www.urlfornextpagehere/index.html”);

(If you know a better piece of code for doing this, please let me know, I’m new to javascript).

This works well for loading up the next project, however for going back to a previous project (the goal is for users to have complete navigational control going back and forth as much as they want), I’ve used the same method, but I want the “previous” course to open up to it’s last slide, so that it feels more fluid (even though the lack of autoplay allowed in browsers kind of kills the fluidity, not much I can do about that). So I’ve used a # at the end of the URL to identify when the users is clicking backwards in the project. Something like this –

window.parent.window.location.href(“https://www.urlforpreviouspagehere/index.html#load-stuff”);

Then on the first slide of the previous project I have some code –

function pageLoad(){

if (window.location.hash === “#load-stuff”) {

// jump to last slide

window.cpCmndGotoSlide = 21;

}

}

pageLoad();

This sends the user to the last slide. The issue now is that the #load-stuff is still on the end of the URL, so now if the user goes through the Table of Contents and navigates to the first slide of that project, they will be sent to the last slide of it instead.

I’ve tried clearing out the #load-stuff tag when reaching the last slide of the project, by adding this to the final slide –

function getRidHash(){

window.location.href = location.href.replace(location.hash, “”);

}

getRidHash();

Which does clear the tag, however, then the page reloads entirely without the tag and returns back to the first slide.

Is anyone familiar with a better method for accomplishing this? Or is there a way I can stop the page from refreshing after executing my code on the last slide?

I did try adding window.stop(); to my code, but then it doesn’t complete loading all the web objects I have on the slides (some web objects I just place on the first slide and then set to last for the rest of the project).

Any advice is much appreciated.

The post Navigation between two Captivate projects (stop a page from reloading?) appeared first on eLearning.

Presenting Event Video with Portable Network Graphics and JavaScript

Play

Click to Play Project

Some time ago I pitched a presentation design to a potential client who worked in video post production. Though they ultimately went “in house”, I really liked the final design as it relied heavily on their award winning videos and graphics. This showcase presents an Adobe Captivate 2019 presentation based on that design.

Central to the design was including a video player within the presentation. While experimenting with the graphics and video, I found that the content of the background graphic really drove the best position for the video player in order to get a pleasing effect. In the end, I found that three positions for the video player worked for all background graphics: middle-left, middle-center and middle-right.

With the design in mind, I set to work creating the Captivate project. However, getting the project to reflect my design resulted in some challenges in terms of both the control and “look and feel” of Event Video. I’m sure there are other ways of putting this material together, but the solutions I found are below.

Portable Network Graphics (PNGs)

I really wanted a “clean” design, with subdued controls, in order to focus on the graphics and video. This presented the first couple of challenges. First, I couldn’t find and onboard Skin that looked and functioned as I wanted. Second, while video playback is likely optimized for the specific requirements of Captivate, I didn’t want the “black bars” (a.k.a. Letter Box) to show.

A search of the Adobe forums and web provided some suggestions, including using a streaming service that allowed more control over the interface. In the end, I remembered a brief comment from a discussion thread that basically suggested covering the black bars up with a graphic frame. My solution was similar, though I used a large page-sized PNG with a window cut in it. This allowed for a very slim video frame.

Controlling Playback with JavaScript

While the effect I got with the PNG overlay looked good, using an Event Video without a skin resulted in a couple of issues that needed to be addressed: the video automatically played when entering a Captivate slide and without a skin there were no playback controls.

Dealing with Auto Play: If you use an onboard Skin for playing video, you are given the option to disable “Auto Play”. However, if you don’t use a Skin, the video will automatically play when the user navigates to a slide. The solution I found was to “pause” the video on slide Enter using JavaScript in an Advanced Action. To make it work, however, I needed to delay the execution of the JavaScript using the “Delay Next Actions By” method to allow the video to finish loading, otherwise the pause script wouldn’t work.

The downside of the “Delay” method is that when you enter a slide, a short amount of video is played resulting in movement within the playback frame and an audio “pop”. My solution involved editing the videos so the first couple of seconds were occupied with a still image with no audio track.

JavaScript Code for Pausing Video Playback

document.getElementsByTagName(“video”)[0].pause();

Creating Playback Controls: The general method used for the playback controls involved using a smart shape as a button and then adding JavaScript to the button as an action. A good overview of this technique is documented by Adobe and presented in a video by Paul Wilson.

My twist was to call an external JavaScript function and use the Pause-Play button’s ID to control playback and change the button state. The upside was I didn’t need to create an additional variable in Captivate.

JavaScript Code for Pause-Play Button

//Video Pause-Play Toggle Button

function videoPausePlay() {

//Retrieve ID of pause-play button and assign to variable

var v_buttonID = this.document.activeElement.getAttribute(“id”);

//Retrieve TagName of the video

var video = document.getElementsByTagName(“video”)[0];

//If video is paused, play the video and change the button state

if (video.paused) {

// Play the video

video.play();

//Show the state with the “pause” icon

cp.changeState(v_buttonID,”Pause”);

}

//If video is playing, pause the video and change the button state

else {

// Pause the video

video.pause();

//Show the state with “play” icon

cp.changeState(v_buttonID,”Normal”);

}

}

Rewind, on the other hand, was a bit more problematic. While rewinding the video was pretty straight forward, managing the state of the Play-Pause was an issue since it was no longer the “active” element. My solution was to use an intelligent naming scheme for all video control buttons and then piece together the Play-Pause ID in JavaScript.

For example, all Play-Pause buttons in the project started with “g_playPause” and ended with a text string corresponding to the presentation section (e.g., “g_playPause_maven”). Since I used this scheme on the Rewind button, as well, I simply “sliced” the “_maven” text off the Rewind button and added it to “g_playPause”.

JavaScript Code for Rewind Button

//Replay

function videoReplay() {

//Retrieve TagName of the video

var video = document.getElementsByTagName(“video”)[0];

//Construct name of playPause button

var str1 = “g_playPause”; //Common text to all Play Pause buttons

var str2 = this.document.activeElement.getAttribute(“id”); //Rewind button ID

var str3 = str2.slice(8); //Slice off text that identifies presentation section

var v_playPause = str1.concat(str3); //Construct name of Play Pause button

// Pause the video

video.pause();

//Show the Play-Pause button state with “play” icon using constructed name for button

cp.changeState(v_playPause,”Normal”);

//Rewind to Beginning

video.currentTime=0;

}

Conclusion

In the end, the Captivate project came out very close to my intended design. I’m sure there are other solutions that would have worked, as well. But this one worked for me. I really enjoyed creating the original proposal for my client, and this version, as well. I’m “all about the graphics” and this particular design really capitalized on graphic and video content.

References

Jeremy Shimmerman  | Turn off ‘autoplay’ on embedded(event) video when it has no playbar skin

Paul Wilson | Control Event Video with JavaScript

Chris Ching | HTML5 Video pause and rewind

Matt West | Building Custom Controls for HTML5 Videos

Media

NASA GSFC Conceptual Image Lab | Bennu’s Journey

Walt Feimer and Michael Lentz (Animators)

Macrovector – Freepik | Laptop tablet desktop mobile 

NASA.gov | Searching for Signs of Life on Mars

NASA.gov | Shields Up! (Dynamic Earth)

Aries Keck,  Patrick Lynch and Greg Shirah (Visualizer)

NASA.gov | Maven Targeting Mars

The post Presenting Event Video with Portable Network Graphics and JavaScript appeared first on eLearning.

Mars Colony 01: A Journey Into JavaScript and Gamification

Launch the Mission: Mars Colony 01 Project: Play

Adobe Captivate 2019 incorporates a rich variety of accessible features and functions that allow developers to produce effective eLearning courses. However, whether the result of client requirements, or your own professional development goals, you may want to extend Captivate’s capabilities through the use of JavaScript or JQuery.

My interest in using JavaScript and JQuery was twofold. First, I wanted to brush up on my JavaScript skills, as I don’t specialize in JavaScript programming. I use JavaScript when a communication or training solution requires it, and sometimes its just not needed.

Second, I wanted to explore how JavaScript and JQuery worked within Captivate 2019. As I said, you may not need to use JavaScript, as Advanced Actions and Shared Actions within Captivate may get the job done quite nicely. However, there might be situations in the future when using JavaScript could work for me.

This showcase presents “Mission: Mars Colony 01”, a Captivate 2019 project created to explore using JavaScript to create simple Gamification functions. As my objectives were mainly professional development, I kept the style more on the “fun” side. Key feature highlights include a:

  1. Learner selected avatar and name
  2. System assigned performance “Level” based on quiz performance
  3. Timed perceptual speed task that includes automatic scoring

The main focus of the project was a perceptual speed task based on an ability test that measures how quickly a person can scan objects and detect similarities and differences. In this case, the user reads a pair of 6 digit numbers and must determine if they are the same or different. This section of the project required the most coding in order create the functions for the countdown timer, the toggle buttons used in the test and the calculation of test performance.

General Strategy

The general scripting strategy was, to the extent possible, to call all JavaScript and JQuery functions within an Advanced Action created for each slide. Back in the day, this was basically how we set up OpenScript within the Toolbook object hierarchy.

Once the Advanced Action is created and assigned to a slide for the “On Enter” event, the Advanced Action could be easily accessed, along with the JavaScript. This made updating and debugging the JavaScript code easier.

The bulk of the JavaScript was contained in the “my_java_code.js” file and linked to the Captivate “index.html” file via an include, as described by TLC Media Design. The .js file was written with Atom, with debugging accomplished with a combination of the Python Tutor and Developer Tools within Google. Note: I backed up my “index.html” file before altering it.

Avatars, Timers and Quizzes

It is worth noting that the coding for the project was based on the strategy or actual code for a number of Adobe Community contributors.

Selecting Avatars: To setup the avatars, avatar name and performance level, I used a method similar to that recommended by Paul Wilson that involved setting the state of a multi-state smart object based on a variable’s value. However, where Paul Wilson used advanced actions, I used a combination of advanced actions and JavaScript.

Countdown Timers: The script for the timers was based on Greg Stager’s 10-Second Timer 3000, with some modifications. First, since it was used to set a time limit for the perceptual speed task, some of the buttons weren’t needed. However, as I found out, the script for the “Cancel” task was essential for ensuring the timer was reset prior to continuing navigation. Second, in addition to the countdown clock, I included a countdown bar.

The Perceptual Speed Task: My original concept was to use radio buttons for the perceptual speed task, but I couldn’t find a solution. I did find a great article by Steven Warwick where he used JavaScript to create a custom true / false quiz using toggle buttons and this code did the trick. It is worth noting that Quiz slides contain very special objects that Captivate uses to communicate with the LMS. Its best to avoid deleting slides or objects, rather use the onboard options to hide objects or hide them within the screen using formatting or other objects.

Wrapping it Up

All in all I enjoyed creating the Mars Colony 01 project. I certainly brushed up on my JavaScript tools and learned a thing or two about JQuery in the process.

Files for Download

Captivate 2019 .cptx document: Mars Colony 01

JavaScript Code: my_java_code

References

TLCMediaDesign | Using External JavaScript libraries in Adobe Captivate

JavaScript.Info | Debugging in Chrome

Paul Wilson | Adobe Captivate – Allow Learners To Select Their Own Avatar

Greg Stager | Countdown Timer

Steven Warwick – Health Decisions | Building a fully custom quiz in Adobe Captivate using JavaScript

Graphics

BiZkettE1 – Freepik | Arabic Night Landscape 

Vectorpocket – Freepik | Set of Cartoon Spaceman Kid

Vectorpocket – Freepik | Set with Cartoon Astronaut Girl

Vectorpocket – Freepik | Cartoon Spaceman

Vectorpocket – Freepik | Spaceman Family with Space Ship

Vectorpouch – Freepik | Cartoon Solar System

NASA- JPL Caltech – MSSS | Telephoto Vista from Ridge in Mars’ Gale Crater

Sound

Mark DiAngelo | Wind Sound 

The post Mars Colony 01: A Journey Into JavaScript and Gamification appeared first on eLearning.

Image hit boxes not resizing/repositioning with image animation via GSAP

Hi there, I have a bit of a niche question regarding using the GSAP javascript library within Captivate. I’ve used GSAP within Captivate to a small extent and I really like the flexibility it gives to create smooth and unique animations pretty quickly (downside being you have to publish the Captivate project each time you want to preview it).

I should add I’m working in Captivate 9 and working in a non-responsive project (no breakpoints or fluid boxes. Initially I thought this might have to be exported as a SWF).

Here’s a summary of my question – how does Captivate determine the hit box of images and is there a way to adjust to hitbox via javascript?

Here’s the longer version – I have a slide with two images on it and I would like the user to be able to click on each image to have it enlarge and center in the screen, almost like a lightbox effect. I have used GSAP to animate the tweening of images to scale them up and center them on the screen. I have written it so the image scales up and re-positions on click, then scales back down and moves back to it’s original position once clicked again. At first I had an issue with the Z Index of the images (seeing as they are two separate images on two separate layers), but thanks to another forum post I was able to learn how to call to the Z Index and change it. I then had an issue of both images scaling up even though one of them already was, so I changed some things around so that the image will only scale up if the other images are still ‘minimized’ (i.e. the two images can’t be enlarged at the same time). My final issue and the one I am struggling to fix is that the hit boxes for my images stay at the same size and position that the image is originally placed at. So when the user clicks on an image and it enlarges and re-positions, it will only scale back down if the user clicks in the area of the images original hitbox. The hitbox is not scaling and re-positioning with the image. I image this has something to do with using GSAP to animate the image, and for some reason the hitbox isn’t tracking it?

Is there a way I can call to the images hitbox and have that tween too?

I have tried adding another event listener to the window to have the images scale back down with a mousedown event on the window itself, if the image is enlarged. However this resulted in the animation not working at all. I also tried that method with an invisible ‘hidden’ shape (alpha set to 0), but that did nothing either.

Like I said, this is a pretty niche question. I’m not sure how many users out there are using GSAP within Captivate, but I would appreciate any advice or points in the right direction.

Thanks!

Here is my code for that slide if it is helpful – my images are named Image_18 and Image_19.

cp.disable(“text_content_35”);

var reImage19 = document.getElementById(“re-Image_19c”);
reImage19.style.zIndex = 1000;

var reImage18 = document.getElementById(“re-Image_18c”);
reImage18.style.zIndex = 1000;

function myFunction(){
reImage19.style.zIndex = 1000;
}

function myFunction2(){
reImage18.style.zIndex = 1000;
}

var image19 = document.getElementById(“Image_19c”);
var tl = new TimelineMax({paused:true, reversed:true, onReverseComplete:myFunction});
tl.to(image19, .8, {x:-185, y:-200, scaleX:1.5, scaleY:1.5, ease:Quad.easeInOut});

var image18 = document.getElementById(“Image_18c”);
var tl_2 = new TimelineMax({paused:true, reversed:true, onReverseComplete:myFunction2});
tl_2.to(image18, .8, {x:-210, y:50, scaleX:1.5, scaleY:1.5, ease:Quad.easeInOut});

window.addEventListener(“mousedown”, function(e){
if(e.target.id==”Image_19″ && reImage18.style.zIndex == 1000){
tl.reversed() ? (reImage19.style.zIndex=5000, tl.play()) : tl.reverse();
}
});

window.addEventListener(“mousedown”, function(e){
if(e.target.id==”Image_18″ && reImage19.style.zIndex == 1000){
tl_2.reversed() ? (reImage18.style.zIndex=5000, tl_2.play()) : tl_2.reverse();
}
});

The post Image hit boxes not resizing/repositioning with image animation via GSAP appeared first on eLearning.

How to bring or use an external javascript library into captivate 2019

  1. I am trying to use the javascript library 3djs.

I created a map using html and the javascript 3djs library, but  when I bring it into captivate as a web object

it does not work. I try many different way to see if the map show up but nothing seems to work.

I know that Jquery and Bootstrap are integrated into captivate.

How to integrate the 3djs into captivate?

The post How to bring or use an external javascript library into captivate 2019 appeared first on eLearning.