Introduction
"How can I make Flash Lite content for my clix?" This was the first question I had in mind when I saw 'Flash Games' on the clix menu. From an optimistic perspective, I thought, "hey why not just download all those '.swf' games floating around the internet and play it through my clix?" Sure enough, when I tried to select the flash games, I saw the warning most of you saw as well, "unexpected file format." For time sake I'll show you the mathematical formula I derived,

So how will we ever get those great games/applications available to the clix? Well one way is to become a Flash Lite programmer - that's what I did. In this following tutorial, I hope you'll better understand how to go about creating a Flash Lite game and application.

A Word from the Author
Please be patient with me as this is only the first tutorial I have ever written in my life. I may have missed something and completely lose you by the end of the tutorial, please don't hesitate to ask questions. Stop me on my track, and I'll go back and clarify what was misunderstood.

The Building Blocks
Before you begin, you'll need the following applications:
Adobe Flash Professional 8 (A 30-day trial version is available here).
Adobe Flash Lite 2.1 plug-in (Download here) [21.0 MB] // Thanks Ceido!.
Adobe Device Properties (Download here) [8.8 MB].

Install all the programs in that order. If done correctly, you will be able to start authoring flash lite applications.
I'll also highly recommend these experiences (although not needed).
Programming knowledge (Will explain in tutorial)
A patient mindset (Sometimes, things won't work, bear through it)
A creative and open mind (Will help create great games/app)
Goal Oriented (Don't make anything for no reason - have a realistic goal)

For those of you wondering, this tutorial will assume the following:
You know the basics of installing/uninstalling
You can draw in Microsoft Paint
You are able to follow long instructions

The Goal
So what will we be learning from this tutorial? We'll go over basic Action scripting (The flash programming language), understand the performance issues, and other hidden things a non-programmer never knew.

I'll try my best to make the following game: A game where you control a ball and try to reach the finish zone; all the while avoiding the obstacles within a certain time period.

I'll also add a few design and performance tips along the way.

Enough chit-chat, let's begin.

The Setup
Flash's interface at first sight may seem a bit intimidating (for first-time users), but it's actually not that bad. Let's setup Flash so that the dimension and FPS will match that of the clix. Locate the properties panel, it's usually located on the center bottom, but if you can't find it press [control + F3] to load the panel. Find the Size/dimension button and click it.



Once you've clicked it, You should see the Document Properties.
Make the following changes:

Title: Give a meaningful title, but it will not effect in anyway your game.
Description: <See title>
Dimension Width: 320 px
Dimension Height: 240 px
Background Color: It's up to you, but I usually stick with white, but for the cool factor, I'll choose blue.
Frame Rate: 30
Ruler Units: Pixels

Here's a picture,


Click OK to confirm.

Now the dimension is set, but the file it will output will not be in Flash Lite format unless you set the publish properties. Once again, locate the properties panel and click on the Publish/Settings button.

The only change you should focus on is the Version tab, select Flash Lite 1.1



Click OK to confirm.

Wow, hold your horses, why did we select Flash Lite 1.1? When we could've done 2.1? To tell you the truth, I myself prefer 2.1 over 1.1, but there are a few reasons for my madness:

1. FL 1.1 is universal, in that it will allow you to play these games on all devices (u10,clix,clix2)
2. FL 1.1 is less complex in syntax versus FL 2.1, but will require a painstaking cumbersome orderly scripts.
3. FL 1.1 can do everything FL 2.1 in terms of computation.
4. FL 1.1 will make you appreciate OOP (Object Oriented Programming) and the "advance-ness" of FL 2.1
5. FL 1.1 is slightly easier when trying to implement the +/- keys.

I digress... Back to our setup.
Flash works like Photoshop. There are layers and frames. Anything on the lowest layer will be covered up by the higher layers. Here's the analogy, Look at your monitor, that's your highest frame. What's behind your monitor? For me it's the wall. The wall in that case, will be my lowest layer.

Let's make some layers in Flash. Locate the time line of Flash, you can't miss it as it is centered on the top. To the left of the time line there should be an eye, a lock, and a square box. Under that, there are layers -usually named Layer 1 by default. To add more layers, press the corner bent Paper with the blue plus sign on the left to add more layers. Keep adding until you have 6 layers. Once you have all 6, let's name them all for a better upkeep of our game. Name each layer respectively top to bottom:

Action
Frame Label
Buttons
Object
Text
Background

If you did everything right, you should have something like this.



The lock next to the Action Layer is applied by clicking on the middle black dot on the Action Layer. This will prevent anything to be modified on the Action Layer, which is good because all we need to do on the Action Layer is add Actionscript.

If you've installed the Device properties properly, this should work out all smooth. If not you can get it here,

Adobe Device Properties (Download here) [8.8 MB].

Once you've installed it, select device/setting button. You should see the Device Settings windows. Make sure that content type is at Standalone Player. Then navigate through the file tree MP3 > iriveru10 and add it to the right column.

Pic here

Choose Make Default, as it will be your only device for the time being, then OK to confirm.

Give yourself a pat on the back, you have successfully finished setting up the workspace to match the clix standard.

NOW this is probably the most important thing to do!
Always. ALWAYS. Save your work. It's happened to often, while working on your project, Flash decides to crash. Do yourself a huge favor and save your work every 5-10 minutes.

To test what you have at anytime, press Control + Enter to test your file.

If for some reason, your stuck or in need of the source code up until now, you can grab it here


Text-Extravaganza!
A game is never a game without texts. Let's give our game a text, press 'T' the shortcut for text field, or the 'A' on your toolbar to your left.

Before you add a text, go check your layer and make sure the 'Text' Layer is selected, failure to do so will cause unnecessary mixups.

Let's make a Title text, with the text tool selected add a text on the text field. Type a special title for yourself, when finished you'll notice that you have a lot of options available in the properties panel. Feel free to mess around with the font, size, and color, but leave everything else alone for now.

Now add a 'play' and a 'Quit' on the screen for a familiar menu setup.



As of now you have a game that says play and quit, but the sad fact is it can't. How sad. Well that's why we have buttons! Let's move on to the next section.

Buttons, Buttons, and Buttons
Buttons will allow you to navigate, around your flash game. Let's create one for the game, on your tool bar there's a 'rectangle' right under the 'A', or you can just press 'R' for the Rectangle tool. Make a small rectangle, this will act as a pseudo-button.

Once you've made your rectangle, select it and press F8. Pressing F8 will bring you to a convert to symbol window.

Let's name it: D-Click Button (It won't matter what you name it, but it's a good idea to name it something you can easily recall).

Before you click OK, select the Button radio button.



Once you click OK, the button will have a property of a symbol - a button symbol. Having one button is cool, but let's make it more clix-like by adding three more. When creating a symbol, it will automatically store itself in the library. To open the library press Control + L, the library panel should open.

Locate the D-Click Button and drag it over to the main work area.
Notice in the picture below, the buttons are located on the Gray area, this will hide the button from view when playing.



Now with four pseudo-buttons, you'll be able to create the actions for each button.

If for some reason, your stuck or in need of the source code up until now, you can grab it here

Give Life to the Motionless
Soulless and indeed motionless, let's give a the buttons a few power by working on our first script.

Select the bottom-most button, this will be our quit button.
with it selected, press F9 and you will be prompted to the Action script panel. While one would wish a simple command such as quit would simply be, "When I press quit, quit" The computer has no idea what you mean by that. So in order for us to communicate with the computer, we'll have to talk in "Actionscript."
Type this in the empty script area:



This code seems daunting, but it's actually quite simple to understand.

This 'on' tells us on an event occurring do the following action.

keyPress "<Down>" you guessed it, when the key 'Down' is pressed it will do the following action.

The fscommand2("quit") is a special feature exclusive to the mobile devices.

Now something you may have noticed, what were all those " (, ),{, }, ;, " doing in the code? Those symbols are there to help the computer understand what you wrote and must be there in order to function properly.

If done correctly, your quit button will work correctly.

Now let's add the play button. Go back to the main menu and select the right-most button and press F9 again to bring up the ActionScript Menu.

Type this in:
It's a bit longer than the last code, but again a very simple command.
The tellTarget() function directs Flash to the area you want it to go. It is similar to that of the file tree: C:\My Documents\Flash\ This will direct you to the Flash folder on My Documents located on the C drive.

Likewise,
Tells Flash to go to level0 the root area / main screen and preform the following action there.

This allows Flash to jump to the frame labeled "play."

Before you test out, our little game needs a little more tweaking. While the Down button now quits our game, our right button will not go anywhere because we don't have a frame labeled 'play.'

Go back to the main work area, and create more frames for each label. To do this press F6 at frame 6 for each layer.



If you notice carefully at the action layer, there is a small a next to the first frame from the picture above. The small a means there was an action applied to it, let's do that right now.

Press F9 again while selecting frame 1 of the Action Layer. Type this:

This will stop your game on frame one, preventing it to continue across the frames. Now let's make this game rewarding by replacing the texts with a new one on frame 5. Type a rewarding message on the 5th frame.



Remember a few minutes ago we added the code line

To make that code work, we'll need to name the 5th frame "play"
To do this, go to the Frame Label Layer, and locate on the bottom properties <Frame Label> and type "play"



Almost done, we'll also need another stop(); command at the 5th frame.
Select the 5th frame on the Action Layer, press F9 and type in You have just finished a really basic button game. Don't forget to save your work!

If for some reason, your stuck or in need of the source code up until now, you can grab it here


Where to go from here?
I've always loved adventure games and choose your own adventure stories. With the knowledge you currently possess you can create a decent adventure game.

Take a look at this choose your own adventure game I have here

I hope you found this tutorial helpful. This is only Part one of the many more to come...

If you have any more question, feel free to post here. I'll answer as much as I can here.

You can visit my website here

-Santoki

For Discussion on this Topic, please visit this Thread:

Flashlite Creation Discussion