In this video, I’ll show you step-by-step how you can create a fancy looking start screen with background video for your next e-learning project.
cta under video
Create a new slide
Let’s start to recreate the slide, and the first step is to create a fully new blank slide. So I’ll go to new slide, basic layout and choose a blank slide. Now, I already adjusted the slide dimensions, but if I start a new project, the first thing that I do is change the slide dimensions to what I want and changing the slide dimensions, you can do this under design, story size. And for this one, I chosen the slide dimensions of 1280 by 720, and that is a 16 by 9 screen resolution, and then your video will automatically fit your screen. So this was the first step.
Video to Storyline
The second step is to add my video. Therefore, we go to insert, videos and now to search video window will open. Now what I’ve done I’ve typed in computer here and storyline found videos that have something to do with computers or people typing on computer or computer screens. And I chose this video. So let’s double click it and storyline will place it on my slide and you’ll see that it will fit my slide completely.
Now, we want that the video automatically plays when the slide starts. So by play video, we set it to automatically. And the next step is to add a new layer because I find the video somewhat too bright and I want it a little bit more darken. So what I’ll do, I’ll go to insert, go to shape, create a rectangle shape that is the size of my slide and will cover my video. I’ll choose a shape fill of black, and now I’ll press Enter on my keyboard. And for the transparency I set it to a transparency of 70%. So my video is a little bit darkened right now. So let’s preview the slide how this looks like.
Circle shapes
Now the next step is to draw the circles on my slide. So therefore I go to insert, to shape and draw a circle. So on where you hold your Shift key the circle is perfectly in dimensions and I want a circle that is 150 pixels wide and 150 pixels in height and let it set in the middle right now. And I don’t want it to have a fill, and I want a white outline and this outline, I find it a little bit hard. So what I’ll do now is press Control Enter again, go to my line color, let’s select circle, go to the line color, and set the line color transparency to 50%. And you’ll see that circle color is less hard right now.
Now I’ll add the other circles and every circle is 300 pixels larger than the previous circle. So let’s add the other circles. So I’ve added all my circles right now, and the next step is, if we look at the example is to create the square with rounded circles where my logo will be in.
Shape for my logo
So the next step is to create the rectangle with the round circles. So therefore I’ll go to insert again, to shape and choose this one the rounded rectangle. And I press Shift and draw my rectangle on my slide. And I want it 190 by 190 pixels. So that’s okay. And I have chosen a color. I’ll go to format, shape fill, more fill colors, fill in this color, add to custom colors and click on okay. And you’ll see that the shape has the right color right now.
Logo startslide
Now, the next step is to add my logo and I want a rocket as a logo. So what I’m going to do now is go to insert, choose icons. So the search icon menu will appear. I type in rocket and I’ll choose a rocket right now. So for instance, this one, so click on insert and you’ll see my rocket is now black. So I want it to have a white fill and I want it here and the drawing and it can be a little bit bigger. We’re going to animate it later on, but what we’ll do now is we will first get all the objects to my slide.
So the next thing is to add a slide title. So what I’ll do now, there are two options. I can go to insert and choose for text box, or I can press Control T and start typing. So slide type. Let me check if I typed it right. So I go to Home, choose for white and I’ll [inaudible 00:05:21] slide title and I could make it bigger and choose another font. And in my example, I chose Articulate Extrabold. I can create it a little bit bigger, all as caps, so what I do I uppercase. I want them a little bit more loose so that the letters stand a little bit more apart and I can create it a little bit bigger right now. So I think this is okay and I will position it here.
Start the course button
The next step is to start the course button. So therefore I go to insert, to shape again. I choose my rounded rectangle again, draw around the rectangle. I can type start course and I want this button to have an outline with the same color as this object. And I want it six pixels and I wanted to have a white fill, but I want to give it the transparency. So I’ll press Control Enter again, go to my fill color. I’ll select my block and I’ll set the transparency to 95%. So there’s a little bit transparency. I’ll choose the Articulate Extrabold. I want it all upper case and I want it loose like the example. Could be a little bit smaller. So this is okay right now. And I will position it in the middle. So let’s select it and choose this one.
Animate all objects
The next step is to animate everything. So in the next step is to animate everything that is on my slide. So let’s start with rectangles and I want them to grow from the middle. So what I can do now is here select all my… sorry, not the rectangles, but the circles. So I’ll select all my circles. On the animation step go to animations, choose grow, want it to be half a second. And this is okay. So what I can do now is [inaudible 00:07:56] at the beginning is a half a second. This at one second, one and a half, and this as two seconds.
Now, let’s check it out and let’s move this one a little bit back. And now let’s preview this slide and see how it look likes. For my rounded rectangle I want to animate it, but I’ll choose the white animation and that can be one second. And it is from left so the round rectangle will be created from left. So if we’re placing this one a little bit back, so let’s preview my slide again, to see how it look likes. The next step is to add the rocket and the slide title. You saw the rocket it is as a fly in animation, but it doesn’t fly in from the left corner. And therefore there is a trick. So what I’m going to do now is I’m going to create a scrolling panel.
Add scrolling panels to Storyline for masking
So let’s select a scrolling panel and I drop the scrolling panel right here. And I’ll drag it on timeline here. And what I’m going to do now is I’m going to insert my rocket inside my scrolling panel. The rocket on my slide into my scrolling panel. So you’ll see, there is now an arrow. Before the scrolling panel if I unfold it, you’ll see that rocket is in it. I have to make the scrolling panel a little bit bigger and I have to position the rocket a little bit. So what I can do now is create a fly in animation. So I have the rocket selected. So I go to animations, choose fly in. Let’s say [inaudible 00:09:52] of a second. And I want it that it flies in from the bottom left. And let’s see what it does if we set it here.
So let’s preview my slide again. So you see the circles, you see this one and you see my rocket. So the rocket’s going to be a little bit more back. I’m not going to preview it. We’ll do it again. And I want the slide title to fly in, but I don’t want it to fly in from here, but I want to start from here. So therefore I’ll create a new scrolling panel again. So I draw my scrolling panel and I’ll select it here. And what a scrolling panel does, it creates a sort of mask over your slide. So you will see only what is in your scrolling panel. So all the animations that are outside of your scrolling panel, you don’t see it. I’ll pick the scrolling panel here. Underneath it, I’ll select my slide course and my slide title. I select it here. So it’s now in my scrolling panel and what I can do now is create an animation.
I’ll choose the animation to fly in from left. And it will animate from here but because this here there’s no scrolling panel, you won’t see it. And here’s the scoring panel starts. So it looks like the title comes out of this box. And the next step that we have to animate… Let’s first set the scrolling panel take it here five seconds. And now the last step is to select start course button. So I’ll see there’s something with the font and also with alignment of the text so it can go to top. And what I’ll do for animations here is I’ll go to insert, now I’ll go to animate, choose fly in. So I select my course button. I’ll go to animations. I’ll choose fly in, and I want to fly it in from the bottom. So from bottom that’s okay.
I think it’s okay right now. So let’s look at the preview of my slide, how the start slides will look like. So preview slide and you’ll see the circles. You’ll see this one with the rocket, you’ll see the slide title and you’ll see the start course. And the video background at the background. So this is how you can create a custom start slide with a video background for your next e-learning course.
