"Go Back" on content in the new window?

[kristinkittyko]

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

[Lilybiri · Accepted solution]

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.

[kristinkittyko]

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]

Responsive? OMG, in that case I strongly recommend to replace the click boxes over images by shape buttons filled with the image. It will save you a lot of time and frustration, because having to keep them together on all devices is really a pain that can be avoided that way. Have a look at my article:

Turn an Image into a Button - Captivate blog

Do not underestimate the extra time needed to create a responsive project! At least double the time needed for a normal project. Less objects will make it a lot easier.

[kristinkittyko]

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

[Lilybiri]

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.

[kristinkittyko]

Thanks for the tip. Today I figured out how to get an exact size in Photoshop Elements, and it works perfectly, as you said, to import it into Captivate and make it the same size as the smart shape.

I made a "dummy" brief video clip (which was exported to a file from iMovie and then imported to Captivate) and viewed it in the different device options. From what I understand, I can manipulate the video position for every device setting and it will not affect the other ones. The issue I'm having is that the computer screen size setting (1024) makes the video very zoomed in during preview--and the video clip, which I've placed on the slide to play upon entry, goes way over the boundaries of the slide for all devices. There must be a way to resize the clips to fit into the slide, but I have not been able to figure that out. Do you (or anyone reading this) know how to stop this from happening or how to adjust the size?

Thanks,

Kris

[Lilybiri]

Can you start a new thread, because this is a totally different question.

[kristinkittyko]

Sure – I was wondering about that. Thanks.

Kris

[Lilybiri]

If you really want lightboxes, have several examples on my blog. I tried to offer you the easiest way, because lightboxes do need more insight in advanced actions.

[kristinkittyko]

Yes, I had a little time this morning so I was messing around with the lightbox idea just for fun. However, your idea is simplest for me, and that's what I'm going to go with right now. I'm not going to spend much more time on the lightbox idea at this point, but one problem I did run into is that once I reinserted a second video it would not play. It did work wonderfully for one video, though. But that's an issue for another time.

I'm going to go back to the issue of trying to get the video to be the proper viewing size. I started a new thread and will keep working on it. Thanks!

Kris

[Lilybiri]

I'm not sure that I would use a lightbox for a heavy item like a video. Multiple videos can als be stored in a multistate object, and you could use a shared action for the shape buttons on the quilt to show the appropriate state. That could be another approach.

[sdwarwick]

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.