Skip to main content
K
kristinkittyko
Inspiring
April 28, 2017
Answered

"Go Back" on content in the new window?

  • April 28, 2017
  • 2 replies
  • 756 views

Hi, everyone,

I am building a "quilt" full of clickable thumbnails. I've put a click box over each thumbnail (and I've arranged the thumbnails on a large rectangle that looks like a quilt), and clicking a thumbnail takes the user to a video. This is the only way I know to accomplish this:

1. Put a click box over each thumbnail.

2. The click box's action is to play the video in a new window or tab.

The problem is that the only way for the user to get back to the "quilt" to click more thumbnails and watch more clips is to close the window of the movie they just watched. While most younger users may understand this, I am designing this for some folks who may be older. They are likely to click a thumbnail, watch a movie clip, and not know how to get back to the quilt.

Is there a way to put a "go back" on the movie clip they are watching? The clips were edited in iMovie, if that makes a difference. As you can tell, I have limited design experience, just fyi, so I won't have the background to understand if your answer involves coding or something like that.

Thanks!

Kris

    This topic has been closed for replies.
    Correct answer Lilybiri

    Which version do you use? Is it a normal or a responsive project?

    Personally I would put the thumbnail images in a shape button to avoid having two objects (click box + image), but that is off topic.

    I really think that the easiest way would be to have each video on a different slide and use the click box (or shape button) to navigate to that slide. You can use a dedicated master slide for those video slides, on which you have a shape button (no other interactive object is possible on the master slides) that triggers the action 'Jump to Slide' and navigates back to the quilt slide. Label that shape button as 'Back' or 'Back to Quilt' and everything will be very clear to the users. No coding, not even advanced actions. Make sure that all your click boxes (or shape buttons) have their pausing point at the same time.

    2 replies

    S
    sdwarwick
    Participating Frequently
    April 30, 2017

    With respect to your video display issue,  what I think you are looking for is a way to overlay the video in the same window as your "quilt"  The widely used convention is the equivalent of a "light box" where the background is greyed out,  the video is centered and a "dismiss" button ( typically an "X") is displayed in the top right corner.  when one hits the escape key,  it  also disappears.   

    I haven't tried to implement this directly in Captivate, but is of course is doable in JavaScript.  

    Not sure about Captivate 8,  but in 9 I think what you are looking for is the "insert media" -> video object.  If using adavanced actions, you could have one of these objects per video and have them all start hidden.  At the right time,  you could display the right video object using an advanced action. You could also create a grey filled shape object that sat in front of your quilt but behind the video objects that had a trigger to hide the videos and the grey shape itself.    with advanced actions,  there would be some tedium as you'd need to signal to hide all of the video objects one by one. 

    Lilybiri
    LilybiriCorrect answer
    Legend
    April 28, 2017

    Which version do you use? Is it a normal or a responsive project?

    Personally I would put the thumbnail images in a shape button to avoid having two objects (click box + image), but that is off topic.

    I really think that the easiest way would be to have each video on a different slide and use the click box (or shape button) to navigate to that slide. You can use a dedicated master slide for those video slides, on which you have a shape button (no other interactive object is possible on the master slides) that triggers the action 'Jump to Slide' and navigates back to the quilt slide. Label that shape button as 'Back' or 'Back to Quilt' and everything will be very clear to the users. No coding, not even advanced actions. Make sure that all your click boxes (or shape buttons) have their pausing point at the same time.

    K
    kristinkittykoAuthor
    Inspiring
    April 28, 2017

    Thanks! Yes, this is working. I am using Captivate 8 and I chose responsive project because many users will be using tablets or phones.

    I will use images because this is for a local animal shelter, and the pics will be of successful adoptions. People can click on the pic of the cute labrador puppy, for example, and see her adoption story, which will be a brief video of the puppy playing in her new home or whatever. Then they can go back to the quilt and keep watching other clips.

    I just graduated with a master's in instructional design, and I'm building a portfolio of something that's more than just homework assignments. I asked a local shelter if I could construct this for them on their website, and they said yes. It will be my first "real" client project--although I am doing it for free at this point.

    Anyway, thanks again!

    Kris

    Lilybiri
    Lilybiri
    Legend
    April 29, 2017

    Thanks, Lieve. That worked great. My version is a tad different for finding the image option; the image option was under the gradient dropdown, but I found it.

    Well, regarding time to complete the project--since this was my idea to put this together for the shelter (vs. being approached to do a job), there is no timeline. My understanding (maybe I'm off?) is that a responsive project is chosen when users will likely use various kinds of devices, so I am making a "dummy" version right now to sort out what I know and what I need to learn. Your tip works like a charm, of course.

    I'm not sure how many thumbnails yet--that will depend on how many adoption stories the shelter would like to feature and how many I am able to go film (maybe 15 or so when it's all done, which will take quite a while). It's ok that it will take quite a bit of time. I imagine I will finally learn the things I've been wanting to learn...and hopefully, if it all looks great, it will be featured on a website with enormous amounts of traffic, which will be great for my portfolio. I will also be completing a much simpler project in the meantime.

    My next task is to learn to save my photos (the ones that will be used to trigger the vid clips) in a size that more closely matches the shape/button size. I am using Photoshop Elements 11 and taking a Lynda course, which is helping tremendously. Just now I made them the same size (exactly) in Captivate by highlighting both then selecting align-->resize to same size. They were pretty close, but that helped even them perfectly.

    Thanks again,

    Kris


    It is never recommended to resize in Captivate (for several reasons, quality and file size being the most important). Use Photoshop Elements (I use Photoshop) to get the correct size for the thumbnails.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices