Forum Discussion
Rise - Popup boxes tip
Hi, I have created a quick Rise example where you can use the labeled graphic block as a popup box. I have put a couple of examples in the demo link below. One idea is to use an icon/marker for help or further information. The marker is placed between a couple of text boxes and when clicked, a popup window appears. You can display a image, or video or use the embed option. You can also play an audio file (need to click the play button though).
The other examples has a conditional Continue attached to it, so you must view all three popups to continue.
cheers
Gerry
Attached are some images to play with for those interested. You'll see with the 1000x30, if you go to swap the image, the box is cutoff. Which is OK as long as you know that you won't be able to edit.
Thanks Tom :-)
Hi Tom,
Thanks for the extra tip on height. I had noticed the edit problem, but simply got round it by deleting and re-inserting. However, a slightly larger box in the first place makes more sense.
We showed some ideas in a recent workshop. In our examples, we created short images that were only a few pixels high but wide.
You have to play with height because if it gets too short, the box to swap images doesn't show so you can't make edits. I use 1000x90 and that seems to work just about right
The other cool feature is if you save it as a template, it is so easy to just insert a new one each time without having to recreate it. :)
Hey Gerry
how are you getting just the icon of the labelled graphic - I can't remove the image
Hi Wendy,
I'm not sure if this is the way that Gerry has done this, but here is one option:
a. In Storyline, insert a rectangle and adjust the size to the width of the slide and a height of 50px (or whatever similar size you wish).
b. Format the rectangle to have a white fill and no outline.
c. Right click the rectangle and select Export Shape as Picture.
d. Edit your Labelled Graphic and import your new image.
If you want to have a coloured background as in Gerry's conditional pop-ups example, just make sure that the background of your rectangle exactly matches the colour of the background of any surrounding blocks.
Thanks Ned,
I thought of doing that but the way Gerry had written It I thought he was doing it all in Rise so was curious how he achieved the icon on its own.
Hi Wendy,
I am in Perth so just saw your question this morning. I see there has also been a couple of comments overnight. Both Ned and Tom are correct, I have used a small shape as the image and then placed the markers onto the image. I actually used PowerPoint to create the shape and set both the fill and outline to 'no fill' then right clicked on the shape and saved as PNG (transparent). The main benefit of the shape being transparent is that you can change the background colour of the block without the shape affecting it.
cheers Gerry
Hi Gerry,
Thanks for the tip on the transparency. It makes complete sense and saves any hassle over colour matching.
I guess with you being in Perth, me on the Mornington Peninsula and Wendy on Bribie Island, I should take this opportunity to welcome Tom to the Australian Connection !! :)
Would love to do DevLearn, but currently not an option. As for the Articulate Roadshow in Sydney, this is the first I have heard about it. I have just checked it out on the web and it certainly looks like a good idea.
I will keep you guys posted on my intentions as it would be great to meet up and maybe also grab dinner together one evening.
I see there is also one to be held in Melbourne next year as well Ned so if I can't make Sydney...
I had also spotted the Melbourne one, but the problem is, if I do make Sydney, there is no point in going to the Melbourne event as it will apparently be the same one with the same workshops.
Perhaps we could persuade them that an annual event in Oz would be a good idea :) :) !!
Would love to see you all at one of the events. David and I do like to grab a beer while on the road, too.
In my experience I find that's where the best knowledge sharing is done Tom!
Agreed :)
Hi Tom,
It would be great to catch up, hopefully in Sydney, and I'm sure we could find a beer or two somewhere. You realise, of course, that Aussies aren't renowned for drinking very much :) :) !!
Yeah, we found that out last time we were there.
Thanks for this tip. It is helpful. The only challenge I am getting with this is the flexibility to adapt to different screen sizes where the course will be viewed. Will the placement of the "?" above the intended text be the same even if we change the size of the screen? Thanks
Good question, Ram. If you open Garry's example here and adjust the width of the browser window, you'll see that the text changes position as the window gets smaller.
Gerry-
I'm curious as to how you right-aligned the transparent image/? marker in your first example.
Hi James,
As I am using a labelled graphic block, I can place the marker basically anywhere within the 'blank' image. I describe how I created this back in the early comments of this post.
Cheers Gerry
I do not understand this at all. I wish there were better instructions.
