Slider / Swipe / Drag like the iPhone Slide to Unlock 'Button"

Hi all.

This is my very first tutorial so please be kind in your comments.

Revision

Here is a working sample...

dl.dropboxusercontent.com/u/139486255/index.html

Revison done

If you find a mistake or you think something could be better,

PLEASE PM ME.

This tutorial has only 7 events total, and I use the latest Beta release ( as of today), so to open the capx you will need the r150 version of C2 or newer. If you don't want to do that, simply follow along with the tutorial, should take 10 to 20 minutes to complete.

This tutorial is for upper beginners who know the basics.

For example, if you know how to:

1. insert new objects, sprites etc, and you are able

2. to manipulate Imagepoints and origins

3. and if you know what System > Compare two values means then I think you can easily figure this out.

I first want to thank

OneMuppet

for his slider tutorial, from which I learned how to make this in the first place. Thanks again.

I think, (I hope I have) made it easier for the beginner to understand with fewer events, There are No instance variables and I think I have corrected the 'getting stuck' bug.

The slider looks like this:

Sprites

There are only two sprites, they are named: Arrow and Slide_Holder.

Upload the sprites to your computer and insert into game.

(see top left side of this page for capx and image files to download)

The Arrow 'box' size is bigger than the actual image so that there is a larger area

for the finger to 'grab' onto.

oh,

and make sure the the Z order of the Arrow is above the Slide_Holder.

( or just insert the Slide_holder first, then insert the Arrow afterwards)

Now Resize the sprites:

Size Arrow to 150, 150

Size Slide_Holder to 350, 109

The Slider Holder has two Imagepoints.

ImagePoint 1 will position the Arrow to the correct location at start of layout

and

it also provides a location ( via 'code') so the Arrow will not move past that 'start' point, and

ImagePoint 2 provides a location ( via 'code') so that the arrow does not move past the 'end' position.

So, on Slide_Holder sprite, make two imagepoints:

Imagepoint 1 > should be at position X = 54 and Y = 65

Imagepoint 2 > X = 301 and Y = 65

and finally on sprites....

The Arrow sprite origin is a tiny bit 'off' so change the origin to X= 110, and Y = 111

Functions

There is only one function and its job is to position the Arrow at start of layout.

So:

In Layout View > Double Click > Insert new object > Functions

Now go to the Event Sheet

Add event > System > On start of layout > Done

Add action > Function > Call function > type in "start_position" > Done

This makes sure the function is called at the start of layout

now

lets create what that function does:

Add event > Function > On function > type in "start_position" > Done

Add Action > Arrow > Set position to another object > Slide_Holder , at the bottom of this window it says Image point (optional) change that to 1 > Done

Your event sheet should look like this:

.

.

So now you are able to position the Slide_Holder anywhere on the screen and the Arrow will automatically position itself exactly where it needs to go, which is Imagepoint 1 of the Slide_Holder.

If you like, why not test it? , Run Layout.

Touch

Now lets add Touch:

Go to Layout View > Double Click > Insert New Object > Touch > Insert

Now,

Go to the Event Sheet:

Add event > Touch > Is touching object > Arrow > Done

Add action > Arrow > Set X > Touch.X > Done

Now lets add the event / action when touch is released (or NOT in touch) :

Add event > Touch > Is touching object > Arrow > Done

You will notice that this event is exactly the same as the above event,

so lets invert it (make it the opposite)

Right click on the event you just made > right click your mouse > press Invert

Now there should be a large red X in that event.

This just means: When touch is NOT touching.

Question: What do we want to happen to the Arrow when the touch is released?

Answer: We want the Arrow to move back to its Start Position automatically.

So to that Event, now lets:

Add action > Arrow > Move at angle > Make Angle 180, Make Distance 10

Angle 180 is 'straight left' in Construct 2, and Distance is pixels per tick. (I think)

Your Event Sheet should look like this now:

If you Run Layout now, the arrow will move to the left and just keep going,

so lets fix that..

More Arrow Control

First, we will tell the arrow to stop moving infinitely to the left.

We want it to stop at Image point 1 of the Slide_Holder sprite.

So lets,

Add event > System > Compare two values >

First value: Arrow.X

Comparison: Less than

Second Value: Slide_holder.ImagePointX(1) >

Done

Now,

Add action > Arrow > Set X > Slide_holder.ImagePointX(1)

Now try to Run Layout.

The Arrow should be positioned on the left of the Slide_Holder sprite

at the start position

( specifically it should be at Slide_holder.ImagePointX(1) )

and

you should be able to move the Arrow to the right and when

touch is released, the Arrow will smoothly move back to the start position.

But you still is able to move the Arrow way way to far to the the right ....

but before we fix that, lets add a 'click' sound. The click sound will be activated when the Arrow reaches the 'end' position ( Slide_holder.ImagePointX(2) )

Download or find your own any short click sound file ( for some reason I cannot upload sound files here)

Go to layout View > Double Click > Insert Audio

Now on the right side of the Interface you should see your Projects Bar

If you can't see your Projects bar or don't know what a Projects Bar is .....

go to: scirra.com/manual/39/project-bar

Right Click on the Sounds folder > Import Sounds > find the 'Click.wav file you just downloaded > Open

Now in the Event Sheet

Lets,

Add event > System > Compare two values >

First value: Arrow.X

Comparison: Greater than

Second Value: Slide_holder.ImagePointX(2) >

Done

Now,

Add action > Audio > Play > Click , not looping > Done

Add a conditional event:

Within the event itself > Right Click > Insert another condition > Trigger once while true.

If you don't add that conditional event, then when a player holds the Arrow at the 'end' position, the sound loops over and over and over and over ...

an it gets kind of irritating :-)

The Last Event

Now this last event is exactly the same as the one you just made,

but,

but,

,

but,

it needs to be separated from the prior event or it won't work properly.

In other words,

Playing the sound is ( should be) Event #6,

this last event needs to be event #7.

So,

Add event > System > Compare two values >

First value: Arrow.X

Comparison: Greater than

Second Value: Slide_holder.ImagePointX(2) >

Done

Add Action > Arrow > Set X > Slide_holder.ImagePointX(2)

Your event sheet should look like this:

Thanks, hope this helps.

Again, if you find a mistake or think something could be improved upon,

Please PM me.

If you know a easier way to do the same thing, please send me a capx.

Thanks for reading, hope this helps you guys.

oh, and one last thing ..

For all those who forgot to or don't know how to easily replace or change a sprite within an existing game ....

please see this tut..

scirra.com/tutorials/366/how-to-change-a-sprites-effortlessly

but

don't forget to add Imagepoints to the newly added 'holder' sprite.