Make A Sliding Marquee In One Action!

I wanted to make a sort of sliding marquee for the splash page of my game, something that could give the player a few tips on how to navigate, etc. I didn't want to just list the tips on the screen- that would be boring. And I didn't want it take up a ton of actions, since I'm rolling with the free version, and every action counts.

Here's a REALLY QUICK video on what to expect:

I'm sure that with the right mathematics, you could add just about as many frames as you like, but that would make things a lot more complicated.

I would only recommend using this technique if you have 3-4 slides. Things can get complicated quickly...

So we're going to do this with three slides. If you want to do four, try the three slide version first, as it will help you understand how a fourth could be achieved. Also, the coordinates for this are specific to where I need them... you'll need to do a little math to figure out where you'd like them. But it's just simple addition and subtraction, so no worries.

Step One: Naming Conventions

This is how I named my .png images.

SlideCOLLECT tells you that you need to collect things.

SlideLEFT tells you what happens if you click the left button.

SlideRIGHT tells you what happens if you click the right button.

Step Two: Slide Creation

Create these slides. I used MS Paint and created 3 .pngs at 128x64px each. For the purposes of this tutorial, you should do the same- otherwise things won't line up properly.

Drop the slides into your splash screen layout and give them all the following behaviors:

Bullet

Fade x2 (rename to Fade A and Fade B)

In the Properties tab, you'll need to adjust the settings of each slide.

Bullet

    speed          0
    accel          0
    gravity        0
    bounce         no
    s. angle       yes

FadeA

    active/start   No
    Fade in Time   1
    Wait Time      5
    Fade Out Time  1
    Destroy        After Fade Out

FadeB

    active/start   No
    Fade in Time   0
    Wait Time      0
    Fade Out Time  1
    Destroy        After Fade Out

Step Three: ACTION!

Now, I know I said this is only going to take one action, but to be completely truthful, it will take two.

HOWEVER! You will probably already have an "On Start of Layout" action, so if you do... and you probably already do, then now is the time to pull it up and add the following event:

System > On Start of Layout

    System Create Object > SlideCOLLECT on Layer 1 at (200,225)

That was easy! Now for the ONE ACTION TO RULE THEM ALLLLLL!!!!!

Step Four: The Big Idea

Alright, so the idea is simple- create a loop that will carry on into infinity, but not bog the system down in doing so. I have NO PROOF that this will not bog down at some point, but I'm fairly certain it won't. I left it on for days, and everything was just fine when I came back.

If you noticed in the last step, we used the layout start to create SlideCOLLECT. But what do we do with it once it's created?

Without further ado:

SlideCOLLECT > On Created

    SlideCOLLECT > Set Opacity to 0
    SlideCOLLECT > Set Bullet Speed to 0
    System > Create Object SlideRIGHT on layer 1 at (200,225)
    SlideRIGHT > Set Opacity to 0
    SlideRIGHT > Set Bullet Speed to 200
    SlideRIGHT > FadeA: restart fade
    System > WAIT 1.0 seconds
    SlideRIGHT > Set Bullet Speed to 0
    System > Wait 4 seconds 
    SlideCOLLECT > Set Bullet Speed to 200
    SlideCOLLECT > FadeA: restart fade
    SlideRIGHT > Set Bullet Speed to 200
    SlideRIGHT > FadeB: start fade 
    System > Create Object SlideLEFT on layer 1 at (200,225)
    SlideLEFT > Set Opacity to 0
    SlideLEFT > Set Bullet Speed to 0
    System > Wait 1.0 seconds
    SlideCOLLECT > Set Bullet Speed
    System > Wait 4 seconds
    SlideCOLLECT > Set Bullet Speed to 200
    SlideCOLLECT > FadeB: start fade
    SlideLEFT > Set Bullet Speed to 200
    SlideLEFT > FadeA: restart fade
    System > Wait 1.0 seconds
    SlideLEFT > Set Bullet Speed to 0
    System > WAIT 3.9 seconds
    SlideLEFT > Set Bullet Speed to 200
    SlideLEFT > FadeB: start fade
    System > Wait 0.1 seconds
    System > Create object SlideCOLLECT on Layer 1 at (200,225)

EDITED: I took a picture for you guys, just in case my syntax seemed weird... 2/11/13

After-words

Believe it or not, you're done! You can now format it to your desires.

To make things cleaner, I made an overlay to sort of frame the slides a bit. It's just a .png with a hole cut in it, placed on the next layer up...

I wish I had a capx available to give you a more in-depth demonstration, but my internet time and bandwidth is limited. Once the game this was intended for is finished, however, I gladly hand it out!

If this helped you at all, like it, thumb it up, google plus it, or whatever it is you kids are doing these days. Much love to the Scirra Community! I await your feedback.

EDITED: Added video and the background image used to frame the slides. 2/11/13