April 27, 2011

Creating Custom Adobe Captivate 5 Buttons

The first step to create good-looking eLearning content is to create good-looking course assets, and buttons are an integral part of it. So, let’s see how we can dress up Captivate buttons and make them look pretty! :)

A lot of button images come packaged with Adobe Captivate. But if you want to get creative in how the buttons should look like, here’s the way to go!

It’s just a three step process to add custom buttons to your courses:

  1. Create button graphics in ‘x_up’, ‘x_over’ and ‘x_down’ states. You can have the same button saved with these three names, or you can change some properties of the image like color, effects, etc. and save it as different version.
  2. Insert Image button in Captivate and browse to the button image you created.
  3. Adjust the location and size of the button on the screen.

Here’s a screen full of custom buttons… I’ve used stock images from Fotolia to create these buttons.

Let me show you a demo on how I created the page curl button and then you can try the rest.

Want to be more creative with the buttons? Check out Allen’s blog post on Custom Adobe Captivate 5 Buttons with Sounds.

Happy Captivating! :)

 

Posted by poojajaisingh3:22 PM
  • booncoon

    Hi Allen
    Easy as pie, as it’s usual with your posts mon ami, but I miss your YouTube voice! One question: why the posts on this blog and the archived webinars cannot be downloaded in contrast to the YouTube postings?

  • booncoon

    Sorry, Dr. Pooja. In my rush I missed the tagline. My apologies! It is a great tutorial just like your full length webinars which open up the hidden portals of the Captivate as well as of my mind.

    • poojajaisingh

      No problem! I’m glad you like the posts and webinars :)

  • Dr Naveen Bhatia

    I have just completed my training in Captivate 5. I want to create “Quit” and “Menu” buttons so that the trainee could either exit whenever they want to from the project (demonstration) or go to the “Menu” to choose a different module in the project. From the drop-down menu for button “Action” tab, I cannot choose anything that will meet these requirements. I’ve been told that ‘javascript’ option will do the trick, but I am not an expert in Java either. Could you please help? Many thanks. Naveen

    • poojajaisingh

      Hello Dr. Bhatia,

      For the Menu button, select the Jump to Slide option and link it to the menu page. Alternately, you can use the Table of Contents.

      For the Quit button, here’s a simple workaround:
      1. Add a blank slide as the last slide with duration of 0.1 sec.
      2. Set the action for Quit button as Jump to Slide and link the last slide to it.
      3. Click Edit > Preferences > Project > Start and End.
      4. For Project End Options, select Close project.

      Let me know if this helps.

      Pooja

      • kim.g

        Hi Pooja,
        I just tried to do the workaround for the Quit button using Captivate 5.5 and it doens’t seem to work for me. Do you have any suggestions for what I might be doing wrong?

        Kim

        • http://twitter.com/poojajaisingh Dr. Pooja Jaisingh

          Hi Kim,

          Please share your project with me at pjaising at adobe dot com

  • http://www.iste.org Marshelle

    I tried this, but in my Captivate 5, it does not work. I’m working on a Windows 7 environment. Is there a known issue with this? Also my Jump to Slide option is disabled. Are there plug ins or updates that need to be installed for this to work?

    • http://blogs.adobe.com/captivate/ Allen Partridge

      Marshelle. My guess based on your comment is that you don’t actually have the button itself selected, or that you are trying to add the button to a quiz slide (which is disallowed.) Can you try again on a blank slide or non-quiz slide? LMK if that helps – Allen

  • poojajaisingh

    Hi Marshelle, this should work well in the Windows 7 environment. We can do a Connect session to understand the issue better. I’ll mail you…

    Regarding the Jump to Slide option, this is usually disabled if you have just one slide in your project.

  • Tcoole

    Hi All: I am trying to find away to have captivate 5 stop or exit a project. I have 2 slides at the end of th epresdentation that I do not want to be shown, except for special occasions. How do I stop captivate in mid stream?

  • Steve

    How do you change the default graphics on the Quiz Answer buttons? All templates seem to use the same round/blue buttons…would like to customize to fit my color scheme.

  • http://www.facebook.com/jamie.carmichael.56 Jamie Carmichael

    I am attempting to create an “exit” button to allow users to leave the training before it is completed. The problem I am having is that the button is presented in the first part of the training (after the objectives are covered) and the objectives are covered in part one of an aggregated project. I have tried creating my “closing” slide as a seperate project and adding the action Open another project to route the user to the closing project (which is at the end of the aggregated project). That didn’t work. I have also tried (based on my limited Java script knowledge) a java script command: System.exit(0); but that won’t work either. Any ideas?

    • http://twitter.com/poojajaisingh Dr. Pooja Jaisingh

      Hi Jamie,

      Create an advanced action with one line script: “Assign rdcmndExit with 1″ and assign it to the Exit button. This will allow you to exit the course. Please share the project with me at pjaising at adobe dot com if you are still not able to make it work.

  • shaft

    I want to create several buttons on a page to link to external URLs. But I want the page to stay paused while a user does this. They can manually forwards to next page when ready. Right now when they click on the buttons, it opens the URL, but also advances the page. How do you pause the page and have multiple buttons? Captivate 6.

  • Nora

    Hello. I am trying to have a user jump to a URL and then return to the course. No matter what I do with the action buttons [New, unclicking continue playing the project], I cannot return to the Captivate course. Any suggestions? Thank you.

  • Subscribe to RSS feeds
  • Loading

  • Categories

  • Archives

  • Authors

  • Recent Comments

    • Stacie DaPonte: I am trying to combine drag and drop with image rollovers. I have a small square in the bottom of...
    • Dr. Pooja Jaisingh: Yes, it is :)
    • Lo' Roz: Please, is the new Drag and drop HTML5 compatible? It would be wonderful.
    • Jack Hampton: Congrats! It is good news and also that video is very good
    • Clint Elliott: I purchased multiple copies of Captivate 6 for our online school, and since we are now considered...

  • Captivate & eLearning Videos

    Subscribe to Adobe eLearning on YouTube.

    Check out the latest eLearning Videos on AdobeTV