Sliding Menu

Intro 

This post is meant as an answer to a thread posted in the eLearning community. "I want to create a menu that slides on and off the screen, like a door that moves to the left and right, when the user clicks a button." I invite you to read the comment by Greg Stager who is posting some links to blogs he wrote where JS is used to create slider solutions. As you know, I often try to use only Captivate features to solve similar use cases instead of JS. This is a new example. You'll find a step-by-step workflow to recreate the example I show. The shape (which I use as 'box') is not having a menu, I invite you to (re-)read my post about Hyperlinks for the creation of a Dropdown menu. They are a great way to avoid creating multiple interactive objects in the 'box'. 

If you don't like creating advanced actions, I have an offer at the end of the post to make your life easier...

Example

Watch this short file, only three slides after the 3 seconds long Title slide. They have two buttons (from the Assets panel in 11.5): a Next button on top, and the Slide toggle button below it. You can use the toggle button as many times as you wish on a slide. To restart, refresh the browser.


Step-by-step workflow

Step 0: Next button on master slide

I used only one master slide in this project, which made it easy to put the Next button on that master slide. I kept the default option 'Pause project until user clicks' (Actions tab). That will result in having each slide paused at its last frame.

Step 1: Sliding assets

Two assets have to be created and put on the first slide where you want to use the sliding box:

  • Sliding Box: I used a rectangular shape, labeled SS_slider. You can add content to it, but make sure that you check the Options tab, because you will need both the size and the exact x/y coordinates. Here a screenshot of my setup, since it was in a non-responsive project you see both size and location in px. If it was a responsive project, it would have been in %. Put the box in the wanted position after sliding in.

  • Toggle button (SB_Slider): will be used both for slide in and out. You need to create an extra custom state for this button, I labeled it Out. Remember that Rollover nor Down state can change when you switch from the Normal to the Out state, hence make those states neutral (I did not add text to them).

Time the Sliding Box and the Toggle button for the rest of the project, with the option 'Always on top'. The Timeline of that slide will look like this:


Step 2: Custom Out Effect

Create a time-based effect to get the sliding box out of the stage. Do not use an Exit effect, but a simple motion path. I added an AlphaFromTo effect as well (100% to 0%), and reduced the duration of both effects to 1 second. 

Workflow to save this effect as a custom effect is described in detail in this post. Do use that method after you have done step 3:

Step 3: Create Guides

Show the Rulers (View menu) and create two vertical guides, through the start and end point of the motion path. See this screenshot:

They will be needed to create the In Effect, to be exactly the opposite of the Out effect. Now you can save the custom effect, and take it out from the slider box.

If you didn't use a horizontal motion path, you'll need also horizontal guides. If you need more information about using Guides and Rulers, look at 'Guides Rule'.

Step 4: Move slider box in Out position

Use the guide in the scratch area to move the slider box to the correct position. I mostly use shortcut key (SHIFT or CTRL combined with left arrow) to keep that movement horizontal. For a non-horizontal movement, you use vertical and horizontal guide. You'll see a screenshot of the new position in step 5

Step 5: Custom In Effect

Create this effect using the two guides (or four if you needed also horizontal guides). In the screenshot you see this effect, where I combined a motion path effect with an AlphaFromTo effect (0 to 100%). Save the effect, same as for the Out custom effect. 

Step 6: Hide Slider box

Use the On Enter action of the slide to hide the Slider box. 


Pause

Now comes the hard work: you could skip steps 7-9 and scroll immediately to the bottom for an offer. 

Step 7: Variable v_slider

Create a user variable, which I named v_slider. It will be used to track the status of the Slider box: in or out? Similar logic you'll be able to see for all the Toggle buttons in this older post.

Step 8: Advanced Action ResetSlide

Create this advanced action (conditional):

The items marked by in this action will be parameters if you convert it to a shared action. Beware: the name of the custom effect cannot be a parameter! I used TestIn and TestOut as names, you can replace them by your names if they are different.

Step 9: Advanced Action ToggleSlider

Create this conditional action. Like with the previous actin, I indicated the 4 parameters if converted to a shared action.

 

Step 10: Attach the actions to events

The action ResetSlide has to be triggered by the Success event of the Next button, whereas ToggleSlider has to be linked to the Success event of the toggle button.

Offer

You can obtain the described actions as shared actions for free, including a short explanation of how to use them. You could skip steps 7 to 9, but still have to do the other steps.

How? Visit my website (lilybiri.com), fill in the contact form with your request, and a small comment on my blogs or website. You'll get everything by mail. I probably will post more offers in the near future, if you don't want to hear about them, you can indicate that as well (I am European, respect the GDPR).

Playing with Captivate 9

Intro

Version 9 has been released about 10 days ago, while I was on vacation. My fans know that I seldom will post immediately a 'full' review, because I want first to play around a little bit, to try out some reported new features before offering my personal reflections and tips. You will not read anything about the new Quiz features, nor about the enhancements to Responsive projects today, maybe later on in another article. There is too much to write about!

First project

No better way to get the feeling of new features than to create a real project from scratch. In the following movie (only one slide) you'll see that I recreated a slide that was posted in the first article about shared actions. I didn't upgrade the project, didn't use the objects, nor the actions/variables from the old project. If you watch it closely, you'll detect that I used:

  • new states work flow, both for static and interactive objects
  • imported SVG's and roundtripping with Adobe Illustrator
  • Effects 2.0 with custom curved motion paths
  • new commands in Advanced/Shared actions

I will offer some tips about those 4 major new features when you have played with this slide. Refreshing the browser will allow you to restart the movie. Of course I discovered also some little gems hidden between the big diamonds, while exploring. 

Example movie

Multiple States

In Captivate 8 it was possible to create 3 states for shape buttons, both in the Object Style Manager or individually using the Properties panel, Style tab. In this example you did see that the 'default button states' (Normal, Rollover, Down) can even have a different label, not only a fill and a stroke applied to them. Look at this screenshot of the Object State panel for the central oval shape button in the movie. Watch the default states (marked by red rectangle) and the extra 4 states I added to end up with 7 different states. 

For the four extra states I used SHIFT-CTRL-ALT-Z to Duplicate State a couple of times. You'll find the option also in the right-click menu on a state.

Drag&Drop objects also have InBuilt states, but will blog about Drag&Drop in a future post.

Hidden gem

In the Object Style Manager (I saved the style for that central shape button) the different default states for shape buttons show up, just like for any normal button. They were also saved in the OSM for Captivate 8, but not displayed in this 'cool' way :)

SVG - Illustrator roundtripping

I call this the (until now) missing link in the beautiful bracelet of Adobe applications that allow you to create amazing eLearning courses: Captivate, Photoshop, Audition, Edge Animate, Edge Inspect and now finally Illustrator!! Scalable Vector Graphics, contrary to bitmap images, do not suffer from quality loss on re-scaling. Moreover for simple graphics the file size is incredibly low, which is certainly an advantage when you are creating for mobile devices. Beware: file size can be large if you have complicated graphics. Look at this screenshot: I used 8 SVG's - they end up in a dedicated folder in the Library:

You see the usage in the Library as for other assets. Example: the SVG ManGreen has been used 4 times, in the 4 states of the central shape button.
The man-SVG's are very small, but the lightboxes with text are using a complicated filter and size is much bigger. The settings used in Illustrator to save these files as SVG are visible in the next screenshot. To preserve the font, you have to convert it to outlines.

Effects 2.0

The previous Effects panel is gone! Effects timelines are now embedded under the object to which they apply. Live preview with the Play button in the Timeline (or use Space bar), you can have all motion paths on different objects visible at the same time. That makes life so much easier. Curved motion paths are possible. When you hover over an effect in the Effects part of the Timeline panel, you'll see a preview of that effect. This works even with custom saved effects:


Hidden gems

  1. You can use the same shortcut keys for effect timelines as for the object timelines to increase/decrease its length. That is a valid alternative for typing in a value in the Timing panel or for dragging with the mouse. Example: right arrow key will move the whole effect timeline 0.1sec to the right, CTRL-Right will move over 1sec, SHIFT-Right will increase the timeline duration with 0.1sec. All arrow combinations shortcut keys described in this old article: TinyTimeline Tidbits are functional. I regret that CTRL-E, which extends the duration till the end of the slide has not been included for Effect Timelines. Neither does CTRL-L move the effect timeline to the playhead position, it will move the object timeline with the Effect timeline even if the Effect timeline is the selected one.

  2. For the custom motion effects (scribble, curved, line) start with the cursor over the present location of the object, and the beginning of the path will snap to the center point of that object (more precise: the center point of the bounding box).

  3. You can uncheck 'Show motion paths' if your screen is getting too crowded, look in the Timing panel just above the fields for Effect Start and Effect Duration. BTW you can increment the values in those fields using arrow keys: UP for 0,1sec, SHIFT-UP increments to the next full second. Field has to be selected in that case. If field is not selected you can use the typical Adobe scrubber.

New Commands

These commands have been added:

  1. Go to Next State: only available in the list for simple actions, for all events

  2. Go to Previous State: only available for simple actions, for all events

  3. Change State: available for simple, advanced and shared actions. This command needs two paramaters: the object and the state; for a shared action both will be compulsory parameters. I used this command a lot in the example movie, both in a conditional advanced action (on the central shape button) as in a shared action triggered by the four bubble shape buttons.



  4. Delay Next Actions by: finally you will be able to time commands in the sequence for standard/conditional advanced and shared actions. This new command takes one parameter: the amount of time which can be a literal or a variable. In the next screenshot you see that I used it to play the audio clip after the custom effect (with a duration of 1.2secs) has been finished. That parameter is a 'candidate' parameter, not compulsory, when you use it in a Shared action. For more information about parameters see the article Parameters in shared actions. The situation is the same in Captivate 9 as it was in Captivate 8.

    Personally I am very excited about the this new command, which allows better control over timing by advanced/shared actions. 

Hidden gem

Also about timing, not a new command but an improvement of the command Apply Effects in an advanced/shared action: you can now add values for the Start time and the duration of the effect.

More Small Gems

  1. Drag&Drop until Captivate 8 didn't have a Success Caption by default. I explained a workaround in Drag&Drop Tips. You can forget about that tip in Captivate 9, Success caption is now available. It uses the default Success Shape or Success Caption style, depending on your Preferences and theme.


    Objects used in Drag&Drop similar to interactive objects, have also 'Inbuilt states'. That is not a little gem, will post a new Drag&Drop Tips article for version 9 in the future


  2. Intelligent naming of copy/duplicate. In former versions, a copy or duplicate of an object in the same file or in another file would get a generic name. In Captivate 9 if you copy/duplicate an object with a meaningful name the copy will keep that name with an added underscore+number. Big improvement, and now you have even more reasons to set up a good naming convention for your projects. Look at this screenshot: this is a copy of the central shape button to another file:



  3. Simple action feature: another popular post (and a Youtube video) can be dropped in the trash can for Captivate 9 but I don't regret it at all. You no longer have to create a standard oneline advanced/shared action (or use micro navigation) to prevent the playhead from continuing. Just check the box that is highlighted in this screenshot:





Editing Motion Paths and Reusing Customized Effects

One of the new features in Captivate 5 are Effects. Krishna Kiran posted an interesting introduction to those effects in the Captivate blog. Here is the link:
Effects allow you to apply special formating such like dropdown shadows and bevel and to create simple animations without having to use Flash. In this tip I will show how you can adapt motion paths when using motion effects. It is possible to save customized effects and use them again in the same project or in another one. Once you have re-used a customized effect, it will be added in the dropdown-lists to a special category, labeled  Custom. If you want to see the custom effect also in the Advanced actions dropdown list, you'll have first to apply it in a time-based version to an object.
 
It is also possible to reorganize the effects in folders, but this involves deleting the Preferences folder in order to have this reorganisation reflected in the dropdown lists of the Effects panel.
 
I created this demonstration SWF to show how to customize a motion effect, to save and to reuse it.