Customs Effects Cancelling One Another Out

Here’s another question related to a project I previously asked a question about.

I’m trying to make an object slide off the page to the right, change it’s state, and then slide back on to the page from the right.  The problem is that one effect seems to be cancelling out the other.  Here is the preview of the action:

Note that LefttoRight and RighttoLeft are both “custom” actions because I needed them to move specific distances.  I loaded the custom actions I saved (slideIn and slideOut), but the names changed when I saved the action.

Before I added the “Delay Next Action” command, the first effect (left to right, duration .4 sec) couldn’t be seen executing…instead the object seemed to disappear and then the object, with the state changed, would slide in from right to left.  After I added the delay, the object slides off the page (left to right) but never comes back (no right to left).

Any idea what I’m missing?

Thanks.

Jay

The post Customs Effects Cancelling One Another Out appeared first on eLearning.

Adobe Captivate – Card Flip Effect

In this video tutorial, I show you how you can use effects in Adobe Captivate to create the effect of a baseball card flip. For example, on one side of the card you have the image of the baseball player and on the back side, you have the player’s statistics. This could also be used to simulate what recipe cards might look like or used in credit card training that teaches employees to check for the signature of a client, and so on.

In this example, I used the baseball card for Bo Obama, President Barack Obama’s pet dog. Don’t ask me why they made a baseball card for the family pet, but like all government photography, it’s in the public domain so I’m free to use it for this example.

My Patreon subscribers can download the project file for this video.
https://patreon.com/paulwilsonlearning

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:

 

 

#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).

Webinar: Simple Steps to Create Stunning Interactions in Adobe Captivate

Captivate Webinar by Dr. Pooja JaisinghThe best way to beat the boredom in eLearning courses is to make them engaging and interactive. But adding learner interactivity in the courses can be time-consuming, and to some extent, challenging as well. These interactions also need to be relevant to the learning goals as well as help make the learning experience interesting.

During this session, you will learn simple ways to add interactivity in your eLearning courses using interactive objects, multi-state objects, drag and drops, effects, and actions in Adobe Captivate. You will also learn about the best practices to quickly convert drab and boring content to vibrant interactive eLearning.

Webinar title: Simple Steps to Create Stunning Interactions in Adobe Captivate

Date and time: Wed, Sep 06, 2017 at 9 AM Pacific / 12 PM Eastern

Registration link

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:

 

Built in States for Drag&Drop objects

Intro

With Captivate 9 multistate objects was one of the most welcome new features. In previous versions only buttons and shape buttons had states like ‘Rollover’ (hover) and ‘Down’. Interactive objects like buttons/shape buttons have InBuilt States: ‘Normal’, ‘Rollover’, Down and with Captivate 2017 a fourth InBuilt state was added: ‘Visited’. For all objects, static or interactive, you can create custom states..

Less known is the presence of InBuilt states for all objects in a Drag&Drop slide, both for drag sources and for drop targets. Custom states can be added as well. Both InBuilt states and custom states have some limitations similar to the Inbuilt states for buttons. Drag&Drop objects have also limitations for extra custom states.

Example Movie

Watch this movie. Beware: it will open in a separate browser window. When closing that window you’ll be back in this post. After watching interactive explanation slides about all the InBuilt State, you’ll be able to play with two Drag&Drop  use cases:

  1. The first use case has only two drag sources, one of them being correct, the other incorrect. There is one drop target, the cup. Watch the different InBuilt states both for the two drag sources which have identical InBuilt states and for the drop target. All objects also have one extra custom state. Because of my manipulation of the states on Submit, the default Reset button will not return you to a fresh start if you have used the Submit button. You’ll have to use the custom ‘My Reset’ button in that case.
  2. In the second use case you’ll see 7 drag sources and 2 target objects: the box and the trashcan. You are supposed to drag all sources to the appropriate target. You’ll find the ‘My Reset’ button here as well.

Drag Sources: states

The Drag Sources have 5 InBuilt States (see slide 2 in movie). Common to all those states and to the custom states is that you cannot add any object in a state. All the options on the Big Button Bar (horizontal toolbar) are dimmed with the exception of the Record button (for audio): no Text objects, no Shapes, no Higlight boxes (under Objects), no Media can be added to any state. Here is a short description of each state, of its functionality and limitations. As a visual reminder have a look at the Gallery, which shows those states for the first use case

  1. Normal state (InBuilt): is the Default state. This state will appear before dragging, and will re-appear if a drag source is sent back to its original position as well (for an incorrect object). The size of this state is important, because several states are locked to the same size. You can rotate the Normal state (watch the rotate handle at the top), which will also lock some of the states to the same rotation.
  2. Dragover state (InBuilt): this state appears when the drag source is over a drop target and will remain so until the object is dropped on or moved away from the target. This state is not locked, it can be resized and rotated.
  3. DropAccept state (InBuilt): will appear after dropping a drag source on the drop target, it will replace the Dragover state and become permanent. It is totally locked (watch the lock symbol bottom right): will keep the same size as the Normal state, cannot be rotated. Be careful: if you allow all drag sources, both correct and incorrect, to be dropped on the target, the DropAccept state will also appear for correct and incorrect objects! If you only allow the correct drag sources to be dropped, this state will only appear for them.
  4. DropReject state (InBuilt):  will appear after dropping an incorrect drag source on the drop target if the target is not set to allow All objects to be dropped. It will replace the Dragover state. When the incorrect object is sent back to its original position, the DropReject state is replaced by the Normal state. Like the DropAccept state this state is totally locked: no resizing, no rotation possible
  5. DragStart state (InBuilt): this state appears when you start the dragging movement until you are over a drop target, where it will be replaced by the DragOver state. The state is not locked, it can be resized and rotated.
  6. Custom state: this state is also fully locked to the rotation and size of the Normal state. As written before, you cannot even add objects in this state (which is possible for buttons). That is a limitation, in many cases you’ll want to revert to the old method of hide/show objects. For this example it seems as if I added the image of the wings, but I’m just cheating: for all states I used smart shapes. That way I was able to change the form of the shape (Replace shape), to change its fill and stroke. For the InBuilt states I used gradients or solid colors as Fill, for this custom state I used Image Fill. Since a shape can also be used as Text container, it was possible to change the labels of the states as well. If you are not yet member of the Smartshape fan-club, maybe…

Drop Targets: states

The Drop Targets have 6 InBuilt States (see slide 3 in movie). Three of those states have a name that is identical to an existing state for the drag sources: DragOver, DropAccept and DropReject. For Drop Targets you can add objects to all states, both InBuilt and custom states. Some states appear immediately, other states only appear after Submitting the exercise. Here is the overview, again with a visual reminder from the first use case in the example movie.

  1. Normal state (InBuilt): is the Default state. This state will be the main state before the Submit button is clicked. It can be replaced by another state but that will only be for a short duration. The size of this state is important, because several states are locked to the same size. You can rotate the Normal state, which will also lock some of the states to the same rotation.
  2. Dragover state (InBuilt): this state appears when a drag source is over the drop target and will remain so until the object is dropped on or moved away from the target. This state is not locked, it can be resized and rotated.
  3. DropAccept state (InBuilt): will appear after dropping a drag source on the drop target, it will replace the Dragover state. However this state will remain visible only for a short duration. Then the Normal state will re-appear. The reason is that a drop target can accept multiple drag sources, and has to be ready to ‘accept’ or ‘reject’ the next drag source.  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
  4. DropReject state (InBuilt):  will appear after dropping an incorrect drag source on the drop target if the target is not set to allow All objects to be dropped. It will replace the Dragover state. The state will appear for a short duration before reverting to the Normal state. State is  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
  5. DropCorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
  6. DropIncorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are not all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
  7. Custom state: this state is also fully locked to the rotation and size of the Normal state which is limiting even though you can add objects.

Reset – My Reset

The default Reset button has been added to both use cases (slide 4-5). This button can only be used to reset before submitting the result. I added an extra button ‘My Reset’, which is really the Replay2 button described in a previous blog post. If a D&D slide is not included in a quiz, has not score it will be reset when you re-enter the slide. This is what I’m doing, getting back to the last frame of the previous slide, then continue. That may result in some flickering, depending on the bandwidth, but the D&D will be totally reset. The mentioned blog post explains the need for a user variable v_enter to store the first frame number of each slide with an On Enter action.

Setup Use Case 1

Have a look at the Timeline of this slide:
There is only one correct answer: DragSource1 to Target1. There is an object action for this correct answer, to change the state of the other drag source to the Custom state, as you can see here:

Setup is almost the default set up: Snap behavior will change the size and the opacity of the dropped object to 70% (size) and 80% (Opacity), and snaps to the center (Anchor). There is one attempt allowed, and the actions on Success and Failure are visible here:

The advanced action SuccessDD4 has three commands:

  • Change State of Target1 to AfterDD
  • Hide Gr_Draggers
  • Continue                                            to release the playhead

Due to hiding the drag sources with this Success event, the On Enter action of the slide has to ‘reset’ the situation by showing the group Gr_Draggers again. This was combined with the assignment of the user variable v_enter for this slide in the action:

  • Assign v_enter with cpInfoCurrentFrame        for the Replay action
  • Show Gr_Draggers

Use Case 2 ?

I hope you can figure out the setup of this slide. This article is a refurbished version of an older article which I wrote for Captivate 9. Feel free to visit that original post. This second use case has been modified: I edited the SVG’s by roundtripping with Adobe Illustrator, and the surprise at the end is no longer a Xmas surprise.

My plans are to upgrade important older blog posts to CP2017 and HTML5 output. At least if you let me know if this would be appreciated 

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

 

 

 

Have fun with.. While loop

Introduction

In a previous blog post I explained the ins and outs of the new Advanced Actions dialog box. If you feel confused about my terminology in this more practical blog post, please read that first article. A decision block of type ‘While’ is totally new in version 2017. It has some similarities with the Conditional decision block (IF, Then, Else) but offers new possibilities as you’ll see in this simple game.  The While loop can be used to create a looping sequence of commands. That loop can be infinite, or limited in number of executions, based on one condition or a combination of conditions.  Mohana Das from the Adobe team published recently this article demonstrating the infinite While loop. Please read that article, for users familiar with advanced actions the used condition ‘IF 1 is equal to 1’ will be easily recognized, since this was the condition needed to create a mimicked standard action decision in older versions. It means that the sequence of commands will continue to be done, since that condition always results in True. In a future blog post, I will offer some tips about breaking such an infinite loop.
The present article  will focus on using the While loop, based on a condition which results in having the commands sequence repeated a limited number of times. It is a very simple game, every object was created within Captivate. One exception: the color shift in the Characters was achieved using roundtripping with Photoshop.
It is not a responsive project, to avoid a too long article (should have to explain setup in fluid boxes with logic of the variables and advanced actions). Maybe in a next article?

Play first!

Dice Game

It is a small game: when you click on the Play button, a dice will be rolled and you’ll see one of the faces of the dice, indicating a (random) number. The girl is supposed to climb the stairs, she will go up as many steps as the number you won. The goal is to reach the top. When the girl reaches the top of the stairs, clicking on the Play button will result in another scenario, and a Reset button will appear.
On entering the Game slide you’ll see two looping animations, with added randomness and a possibility to stop the the looping. You’ll see this action in Preview, but I will not provide details.

Cheat with Reference points!

Intro

The origin of this article is (again) due to a forum question: “I want to rotate a triangle around a certain point” using the Rotation effect. It is time to explain the importance of the reference or registration point for objects in Captivate. In other Adobe applications like Illustrator, InDesign, Animate you have lot of control over that point. Look at this small screenshot: it shows that reference point in two different locations. Sorry for the low resolution, it is very small in Illustrator: left image shows the reference point in the left center, the right image at the bottom right. It was that last point that was wanted by the OP in the forum, but … Captivate doesn’t allow changing the reference point.

Reference points Captivate

The Reference/registration point in Captivate is used in different situations. In some situations it is located at the top left corner of the bounding box, in other situations in the center of the bounding box. The ‘bounding box’ is the rectangle surrounding the object or the object group. You’ll see it during editing, when selecting an object or a group.  The visual presentation of that box on the stage is not looking always exact, it can look larger than it really is. The correct size (px) of that box can only be seen in the Options tab of the Properties panel.

Location, resizing, rotating “1” or “2”?

The X and Y value in the Options tab are the coordinates of one of the registration points: the top left corner of the bounding box, as you can see in this screenshot:

The red lines in this screenshot are guides. The dotted square is the bounding box. The blue circle indicates the first reference point, which is top left and has its coordinates in X and Y in the Options tab. If you uncheck the ‘Constrain Proportions’ option, and increase the Width (W) or the Height (H) you’ll see that the reference point will not move, increasing width will move the right border of the bounding box, increasing height will move the bottom border.

However, if you use the Rotation button on the stage, or the Rotation option in the Options tab, the used reference point is no longer the one indicated by the blue circle, but the center of the bounding box, which is indicated with a white circle in the screenshot. Same point is used for Flipping and 90° rotation buttons in the Options tab. The reference point will (weirdly) not change in the X, Y coordinates when you rotate an object as is visible in the next screenshot: you see that the X/Y still references to the blue circle center, which is no longer part of the bounding box of the shape:

Aligning “?”

If you align two or more objects (use the Align Toolbar which you can open by Window menu) the result can be surprising. Have a look at this first screenshot: I kept the rotated arrow, added a rectangle with exactly the same width (300px), and having the reference point at the same X value. That means that the center point of both shapes has the same X value as well, centering the shape will not move them.  In a first test, I selected the arrow first for alignment (see right image in screenshot).

The result for left align is to be seen in the left image: the most left point of the bounding box of the arrow has been used as reference. When the bounding box is turned off, there seems to be no ‘alignment’ between the shapes. The second image looks better.

Same alignment rules when you use grouped objects instead of single objects. The bounding box of the group is what matters.

Effects “2”

For all effects the center point of the bounding box (white circle in the very first screenshot) is the absolute reference point. It is the case for all categories of Effects. Especially for motion effects, the new Guides are very handy to locate the start, end and intermediate points of the motion path as I showed in this post: Guides Rule!.

That was the original question which I mentioned in the introduction: how can you rotate an object, not around its center but around another point.  Since version 9 it is possible to apply an effect to a group. You cannot have individual effects for objects that are grouped (which is a pity). But in this case effect on a group provided a workaround for this particular question:

  • Add an object that is ‘invisible’ to the end user, like a shape with a Fill Alpha = 0 and a stroke = 0.
  • Group that object with the object to be rotated, in such a way that the center of the group bounding box coincides with the rotation point you want to use.

This sounds more complicated than it is really. Have a look at this visual presentation: the wanted rotation point was the right bottom point of the triangle. Duplication of the triangle with rotation provided me with that ‘dummy’ object which I made invisible to the user (here I added a light grey border to make it visible):

Cheat this way:

The red lines are guides which will not be visible on publishing. You see in this screenshot that the bounding box looks bigger than it really is, because its exact size is indicated by the red guides.

Conclusion

If you followed my blog, you know that I love cheating on Captivate. But in this case I would be more than happy if we could control the reference point for a lot of use cases. Imagine having to rotate that triangle again around another rotation point? Or having to rotate a hexagon around one of its points? It is fun to use workarounds, but it takes …..time.

Please help supporting this request by entering it, which can be done right from this portable, look to the right, under Contribute!