Video Tutorial - How to create overlays or pop-ups

Knowledge Base

Intro

Welcome to this Barisco tutorial! In this tutorial we are going to create an overlay in Barisco. It is important that you have basic working experience with Barisco in order to understand this tutorial.

An overlay is a general term for a group of objects that can be displayed at some point in time when it becomes necessary to display it. An overlay is can be implemented in many slightly different ways through which it can be named differently. For example in some instances an overlay could be called a popup, dialog or window.

 

Part 1 – How to create an overlay

Generally an overlay consists of 4 objects: the background, the content wrapper, the content background and the close button. Depending on what type of overlay you are creating, this can of course be different. But for the purpose of this demo, we will create an overlay that consists of 4 objects.

The first part; the background can be made using a rectangle. So what we will do first is draw a rectangle.The size of the rectangle doesn’t really matter, since that we need to modify the position constraints, so that they will maintain a top, left, right and bottom position.

So let’s set up the background with those position constraints, and make sure that all the position constraints will be set to 0. Let’s also name our rectangle “background”.

The background is currently black, but you can of course give the background any desired color. We should also add some opacity to the background so that the content behind the overlay can be seen through the background.

Next we need to create a Group, which will serve as the wrapper for the whole overlay. To do this, you need to make sure that you have the Background selected. Then click on Group at the Ribbon Menu.

As you can see at the Layers Panel; our background has been wrapped inside the newly created group. Let’s name the wrapper; Overlay. As you can see; the position constraints of our Overlay are not correct. These should be the same as those of the background. So let’s also set up the Overlay with the top, left, right and bottom, constraints.

The next thing to do would be to make the content wrapper. To make the content wrapper, we need to use a group. But to make a group you first need to select an object. Because of this we will make the content background first. Once again, we will use the rectangle tool, to draw a rectangle.

Let’s also immediately name our rectangle “Content Background.” Now that our rectangle is here, let’s move on the content wrapper.

Making the content wrapper means that we need to select the content background, and then click on Group at the Ribbon Menu. And let’s name it correctly. Now that our Content wrapper has been created, let’s move on the close button. For our close button we will use a cross icon, which we will place at the top-right corner of our content wrapper.

In my Library I have the icon, and what I will do now is drag the icon onto the Stage Area inside of the Content Wrapper. Of course you can use your own icon, or even just use a text-based X, instead of using an image.

We need to make sure that the icon will be positioned at the top-right corner of our content wrapper. This will also be convenient in case we need to resize the content wrapper. So let’s change the position constraints to top and right and then set both properties to 10 pixels.

Again I’m going to name the icon. As you can see now our overlay is really starting to take shape. The content of the overlay will be placed here in the center of the content wrapper. Next let’s go and add the interactions that we need to for our overlay. If you are not familiar with interactions in Barisco, please watch our interactions tutorial. To close our overlay we need to add 2 interactions: the first interaction we need to add to the close button. And the second interaction needs to be added to the Background.

So make sure that the close button is selected and then click on the add interaction icon at the interactions section of the property panel. The interaction that we want to use is Mouse Click and this is the default interaction when adding an interaction. So we will just leave it like this. The target is the overlay, because the overlay is what we want to close. So I will select overlay as the target. And the action that we want to use is the Visibility action. By default the visible property at the visibility action is not enabled. That basically means that the target will be set to invisible. And that is exactly what we want to do.

The last thing to do for the basic form of the overlay is to disable the visible property of the Overlay. We need to do this because we want the overlay to be hidden at first. And then when we click on something, the overlay should be made visible.

So what I will do now is select the Overlay from the Layers Panel; and then disable the visible property. As you can see the overlay is still here. This is because the visible property is not the same as showing or hiding a layer or object. Now that this is done, the basic setup for the overlay is ready.

If we look at the preview now, the page shows up entirely empty. This is of course because we disabled the visible property. All we now need is a button which will trigger the interaction that will make the overlay appear. So I will now add an image to the Stage Area that will serve as a button.

Also make sure that the overlay is at the top of the layers panel. We don’t want the button to end up on top of our overlay when we open it. The interaction that we need to add will trigger the visibility action. But this time we will set the visible property at the action to: enabled.

So now we need click on the add interaction icon. The interaction that we need again is mouse click.

The target again is Overlay. The action that we need is visibility. But this time we will enable the visible property. Let’s click on Apply go and test our overlay. Now when I click on the button, the overlay will appear. We can now close the overlay by clicking on the close button. Our overlay is current empty. So let’s add some content to our overlay.

Content that you want to add should be added inside the content wrapper. This way the content will always stay in the right position, no matter the size of the user’s browser. You can add the contents of the overlay directly to the content wrapper. But if you want to be able to scroll through the contents, you should add a Scroller instead and then add the contents to the Scroller.

Let’s call our Scroller: Scroller. And set the position constraints to top, left, right and bottom, so that the Scroller will always adapt to the size of the content wrapper, in case we want to change the size of the content wrapper. Next we need to add some content to our Scroller so that we can see how our overlay with the scroller will look like.

I’ve used Lipsum.com to generate some random Lorem ipsum paragraphs. So I will just select and copy this text and then create a text object and paste the text into the text object. This will give us some nice long text. Actually, it might be a little too long. Let’s split the text in 2 parts. And let’s add a few images.

OK, now that our Overlay has some contents. Let’s test it. Let’s click on our button. OK, so there it is. Our overlay with contents!

 

Part 2 – Animating an overlay

Animating overlays can be in various different ways. In this tutorial we’re going to animate the overlay using a timeline animation. The first thing that we need to do is to add the timeline animation to the overlay.

We can do this by selecting the overlay and then opening the Animation panel. By default the animations panel opens in the preset animation mode. Since we’re going to use the timeline animation mode, we first need to click on switch to the Timeline.

First we need to add a second keyframe at 1 second. Next we need to set the opacity on the first keyframe to 0 percent. The timeline that we have set up now, will start with 0 percent and then transition to 100 percent opacity by the time the second has passed.

We also need to make sure that the timeline does not start playing by itself. To do this we need to disable Auto Play. The next thing to do is to add the Play at Frame action to the existing interaction of the red button. So at the interactions dialog, we will enable the Play at Frame action. The frame that we want to play is frame 0. And this has already been selected, so we don’t need to change the frame property.

If we preview the page now, and click on the red button, you will see that the overlay will appear and the overlay will fade in.