- Hi, in this video I'll
share with you how I've build
a Space Invaders game
in Articulate Storyline.
And I'll show you how I've
used the motion paths feature
to animate all the moving
elements in my game.
(gentle music)
I'm Mark Spermon from
Upward Online Learning,
where I teach you how you can
create e-learning yourself
with Articulate Storyline.
And are you new here?
Then don't forget to
hit the subscribe button
and the bell notification icon
so you won't miss any
of my upcoming videos.
Are you ready?
Then let's get started.
So let's have a quick look
at my Space Invaders game
before we dive in the
storyline file to see
how thing set up.
This is my start screen
and when you click start,
there's a countdown, three, two, one,
and the game begins.
Now you see I have my starship
and the enemies come from above,
and I can shoot the
enemies by pressing a key
and also move my starship.
And all the animations
are done with motion paths
in Articulate Storyline.
Now let's open the storyline file
to see how I set things up.
Now, my game consists of two slides.
One start screen, and a 2nd
slide where the game is.
Now let's look at my 1st slide.
Now on my 1st slide,
there is one motion path
to animate the start button.
My start button is now
underneath my screen.
But if you're not on the animation step,
you can't see the motion path.
So let's click the animation step on top,
and you now see a dotted line
with one end, a green circle,
and the other end, a red circle.
And the red circle is the
end point of the motion path.
And the green circle is the beginning.
Now, if I select the motion
path and you see my motion path
turns blue now, and you'll
see the start position
and the end position of the motion path.
Now you see also some
settings here, the duration,
the name of the motion path,
the X and Y coordinates,
and also the length of the motion path.
And this helps you to
set up your motion path
very precisely in Articulate Storyline.
And the motion path also
has settings or options
and you can click them to--
Under path options, you see
for instance that the direction
of my motion path is up.
So it moves from under to up on my screen.
You can set it unlocked,
so then it's always in this position.
And you have some easing
options, for instance direction.
And this means that the
motion path is starts
a little bit slower, if you
choose in, it ends faster.
Now if you choose out, it
starts normal and ends faster.
And with in and out it's
faster at the beginning,
normal at the middle point,
and faster at the end.
And there are also another
options under path options
but I will further explain
these on my 2nd slide.
So let's go to the 2nd slide now.
So now, here's my 2nd slide.
And on the 2nd slide you
see several motion paths.
So let's start with the
motion path of our battleship.
So (mutters)
(mouse clicks)
I hide my enemies so
it will be a little bit
more clearer now.
So let's preview this slide.
Three, two, one, and you see
that I can move my battleship
or starship from left to right and back.
And this are two motion
path and they are triggered
when a user presses a key on my keyboard.
Now let's see the motion path.
So click on animations.
I see the motion path here.
So here, this is the motion path.
Move left, and what it does
is it moves my starship
104 pixels to the left every
time a user presses a key.
And under path options, you
see it's going to the left.
And it also has a relative start point,
and what it means with a
relative starting point
is it isn't a locked starting point,
but if my motion path
moves from here to here,
and you click the key again,
now the object on my slide
is here and you can execute
the motion path again.
So it will be executed again
and my starship will be moved
104 pixels to the left.
Now and there's also a motion path
for moving it to the right,
as that's the same options.
The only thing that is
different is that my starship
is moving to the right 104
pixels, instead of to the left.
I've also on the direction,
chosen for in and out.
So let's preview my slide again.
And I have a countdown.
And I'll press the key and you see,
I don't know if you can see it again.
It's fast normal fast,
and this is done the time,
the timing is now (mouse clicks)
Let's see it says two seconds
and preview my slide again.
You can see better I think.
So you see it starts relatively
slow and then it goes faster
and ends slow.
Let's set this one to 075
again, so my game won't break.
And now let's check the
motion path of my enemies.
So I will now hide my starship and show--
So you see that there
are seven enemies aligned
on top of my screen.
And they go from top to bottom.
And now it looks like
it's the other way around,
but there's also a laser
shooting, and that's on top
of my motion path toward the enemies.
So I have now executed,
hidden the laser, so here
you see an enemy.
It starts here and ends here.
So it goes from the top of
the screen to the bottom
of my screen.
It has no direction so it means it moves
the whole motion path at the same speed.
Now there are also multiple
layers on the screen.
So that these dots here.
There's a user press key,
a laser will fire it.
And they have motion paths that
start slow and ends faster.
Now, but how trigger you
something in Storyline
when the laser hits
the enemy or when enemy
hits our starship before we
fired laser for instance?
Now, you can do this with
the intersection option
under when in a trigger.
For instance, when the enemy
intersects our starship,
the state of the battleship
is set to explosion.
And then we lose one
life and also 25 points.
So let's check this action.
So you see here, change
the state of my starships
to explosion, when an object intersects
with the target object.
So this is your enemy L3.
If it hits my starship, and then starship,
the state of the starship
will changes to explosion.
So let's see where my starship is here.
And you see it goes from this to this.
So then it's exploded.
So let's preview this again.
Three, two, one.
And let's see, if there's another enemy.
No there is not, so
let's replay the slide.
Three, two, one.
And now there's an enemy,
I do nothing and you'll see
then there is an explosion.
So the enemy intersects our starship
and then there is an explosion.
Now in the same we do when the
laser intersects the enemy.
So-- (mouse clicks)
I change the state of a enemy
to hidden when the object
intersects the enemy and
thus is enemy error three,
this is this enemy on top.
Here when laser R3, this
laser does this here,
hits the enemy, and then I get 100 points
and we can continue this game.
And the same way, it's
possible to execute triggers
in Storyline when an object leaves a slide
or enters a slide.
So this way you can set up animations
and build your own game.
Do you have any questions
about motion paths
or Articulate Storyline in common?
Then leave a comment below this video
and I'll promise to answer it.
And if you want to create
great e-learning yourself,
then make sure you get my
free guide on how to make
engaging e-learning in
Articulate Storyline.
And I'll know for sure it will help you
because it shows you my
exact process that I teach,
that I use for every e-learning module
that i create in Articulate Storyline.
If this video was useful to you
then hit the like button below.
And don't forget to hit
the subscribe button
and the bell notification item
so you won't miss any
of my upcoming videos.
Thanks for watching and
have a great day, bye.
