Tutorial | A guide for flash lite 2.x beginners
© Photographer 2009
se-nse.net

In this tutorial I will discuss several Adobe Flash Lite 2.x funtions. Flash lite 2.x action script is based on Flash 8 action script 2.0, with several limitations applied.

The subjects I will discuss in this tutorial are:

• Date arrays
• Time
• Date and time formatting
• Analog clocks
• Animations interacting with time and date

Will be added later:

• Loading text from a txt file on the memory
• Loading images from files on the memory
• Catching ID3 tags
• Images interacting with music (Flash lite 2.0 only!)

Questions and answers:

Q: Is my phone Flash Lite 2.x compatible?
A: This is a chart of compatibility:
Flash lite 2.0: K630, K660, K850, W890,
W910, Z750, Z770

Flash lite 2.1: C510, C702, C902, C905,
G705, T700, W595, W705, W715,
W760, Z780

All functions explained in this tutorial are compatible with both 2.0 and 2.1 phones, except the trackID!

Q: What do I need for creating swf wallpapers?
A: Adobe Flash 8 pro or later, this is a payed application but you can download a 30 days trial version to see if you really want to buy this application.

Some notes:
1. In this tutorial I will from now on write flash instead of Adobe Flash Lite 2.x, for readability.

2. This tutorial is property of Photographer, and was written for se-nse.net.

Date arrays

An array means that you define several words or numbers in a row, separated with a comma and a space. The array function looks like this:

new Array();

Flash and days of the week
Inside the brickets () you can define your variables, in my case this will be the days of the week (flash is oldflashioned and still thinks the first day of the week is SUNDAY).

So now we have this:
new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");

Creating converting to output strings
To let flash know we’re busy with creating a date output, we have to set a new variable in the very beginning of our actionscript, like this:



You can set “today_date” to anything you want, it doesn’t matter.
Var means the following word on the line is the variable, :Date means that it’s a date.

So now we have this:


Interaction of arrays with the date
The array has to interact with the date, and is variable as well, so we convert it to the same layout as the first var, like this:


Again you can set dayOfWeek_array to anything, from now on we want to speak to the date array with the instance name dayOfWeek_array.
The output of the getDay command will be in numbers, 0, 1, 2, 3 till 6. Because our final output should be a string, we have to let the numbers and array interact, we can do that with this script:



Basically this new script binds the array and number together and sets the output to the date the array assigns to the numbers.
The var is called day_str, from now on we can talk to the date with day_str.



This defines that the textbox will be filled with text, and the text comes from the day_str variable!


Finished script:



Updating the date
To make sure that the date updates, we have to create a new keyframe on the 2^nd frame on the actionscript layer, in there write gotoAndPlay(1);


Time is a lot easier to accieve, we can still use the fscommand2(“getTimeHours”), fscommand2(“getTimeMinutes”) and fscommand2(“getTimeSeconds”) to define time, or of course the entire time in one line, fscommand2("GetLocaleTime").

I find the seconds a pretty useless addition for on wallpapers, so I want to format my time like this 21:16


To do this, we write:

CODE

h = fscommand2(“GetTimeHours”);
m = fscommand2(“GetTimeMinutes”);
time_tb.text = h+”:”+m

Explanation
The “:” part of the scripts adds the : mark in between time and minutes. Now all we have to do is create a text box, in my case called time_tb, and give it the instance name time_tb.

But hey… now when the minutes count is less than 10, it shows 21:9 instead of 21:09! We can fix this with the following script:

CODE

if (m < 10) {

m = "0"+m

}

Finished script:

CODE

h = fscommand2(“GetTimeHours”);
m = fscommand2(“GetTimeMinutes”);
if (m < 10) {  
               mf = "0"+m  
}
time_tb.text = h+”:”+mf

Voila now we have a text box that shows the time!

Date and time formatting

Expressing date
There are a lot of ways to express the date,
21/05/2009
Sunday 17 May
Sunday, May 17
17-05-2009

We can format the date with arrays and some additional script. I will explain the example that shows us Sunday 17 May.

We already have the Date script:

CODE

var today_date:Date = new Date();
var dayOfWeek_array:Array = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var day_str:String = dayOfWeek_array[today_date.getDay()];
dateTb.text = day_str

Which information will we use?
All we want to add is the number of the date and the month. The number of the day is very easy, we just write today_date.getDate(); for that later when we compile the string.

For the month we have to create a new array, in exactly the same format as we did for the day of the week.

CODE

var month_array:Array = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

and then define a string where it is being put in, according to the number that the var month_str:String = month_array[today_date.getMonth()]; command gives us.

So now we have this:

CODE

var today_date:Date = new Date();
var dayOfWeek_array:Array = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var day_str:String = dayOfWeek_array[today_date.getDay()];
var month_array:Array = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var month_str:String = month_array[today_date.getMonth()];
[code]

[b]Converting to one string[/b]
To set up one string that combines all of the input, we put a new variable inside the actionscript:

[code]
var date_str:String = (day_str+" "+today_date.getDate()+" "+month_str);

Now the entire date is put into date_str, the order of the 3 strings inside the () can be arranged by yourself.

Don’t forget to change the last line for the text box!

Finished script:

CODE

var today_date:Date = new Date();
var dayOfWeek_array:Array = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var day_str:String = dayOfWeek_array[today_date.getDay()];
var month_array:Array = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var month_str:String = month_array[today_date.getMonth()];
var date_str:String = (day_str+" "+today_date.getDate()+" "+month_str);

dateTb.text = date_str

Analog clocks

This is where actionscript is becoming pretty complicated. Too complicated to explain as precisely as I did with the date and time.

Therefore I added a fla for the analog clock to the attachments, copy it into your own fla and don´t forget to copy the the code dot! You can move the code dot outside of the visible part of your swf, it only contains code, no function. The white hands will listen to the code in the dot and rotate like a clock.




You can modify the hands by double clicking on them and editing the image there. You can also use the eraser tool and import your own image. I recommend using vector shapes (like in my fla) because regular png images turn out jagged and ugly when using them as rotating object )

Animations interacting with time and date

To add some funky elements to my wallpapers, as you can see in the example.

Example:



At 23:00 the moon shows up and the bird falls asleep. This looks funny and is not too hard to make!

OMG! What do we have to do for this!?
First of all you import your images to the stage with CTRL+R, preferably on a new layer. Place the images where you want, and convert them to a movieclip (F8). Now give it a name, I will call the movieclip with the awake duck and without moon awake and the movieclip with sleeping bird and moon asleep. Put the instance names of those movieclips to “awake” and “asleep” as well!

This is the script we will use:

CODE

h = fscommand2("GetTimeHours");
  
   if (h<8){
               asleep._visible = true;
               awake._visible = false;
   }
  
   else if (h<22){
                           asleep._visible = false;
                           awake._visible = true;
   }
  
   else if (h>21){
             awake._visible = false;
  
   }

Changing times
Now you can mess with the numbers and see what comes out. In this setting above, the moon and sleeping duck show when the hours is more then 21 (which means 22:00 till 23:59) AND the moon shows up from hours is 0:00 till 07:59 . The awake bird shows from 08:00 till 21:59.

Don’t forget to make the time update and put gotoAndPlay(1); on the 2nd frame of the layer where the previous actionscript is on.

Retrieving ID3 Tags (Added By Jockep

Using Flash lite and ID3 can be really fun, This script will help you get the music playing.

First as Joost said in the post below we will use


Updating
To get updates, then we add:



Finalisation
Wich loads MediaPlayer data into root, if you create a movieclip named mp to put text in change to _root.mp. Now we will add 3 strings (Title, Album & Artist). but first create 3 textboxes give them variable (Title, Album & Artist) and then add the following three lines:



Finished!
Now when music is playing the three textboxes will change to ID3 tags
Give the three text boxes the instance names Title, Album and Artist.


Changelog:
17-05-2009: Initial release 1.0
17-05-2009: Formatting changes
17-05-2009: ID3 tags added by Jockep (cheers!)
18-05-2009: Formatting changed
08-06-2009: Added Petike215's guide for rotating image [Removed by complaints]

if you put the code in this function


you don't need to use an extra keyframe with gotoAndPlay

Nice! Gonna try that one day. Just a quastion:
Catching ID3 tags is also possible with 1.x?

I can't open "time and date.fla", it says "Unexcepted file format".

Which version of flash are you using?

Woohoo! Finally I understand something in Flash

Added ID3 tags in bottom, Size tag don't work

I use CS4

Very cool Sander Good work

wow nice tutorial, i was looking for good flashlite tutorials for years.....
can u create a tutorial on how to create a flash menu, that would b gr8
or u can just add that section also here in this itself

I'm not interested in flash lite menus... they are complicated and get slow, I prefer menu.ml

but with that we can only change the icons in the menu not the whole menu format, am i right??????

correct.



That is my current menu.ml, with my own icons. Flashy effects and bulbs flying around will only harm the simplicity.

wow looks superb
the colours r really nice for the eyes

edit:
BTW have u seen any good tutorial on flash menus somewhere else on the web?

You might wanna add that the best designer program is Adobe Flash CS3


WHY??
Becoz if you ever get lost, the Flash CS3 HELP is fantastic and very knowledgeable. The CS4 one was pretty blank with regard to Flash Lite 2.0.

photo grapher can u n plz upload that flash wallpaper (the moon one)


it would be very nice of u

I prefer CS4 alot...

Well for beginners the Flash CS3 help would be invaluable.



Out of curiousity, does the Geforce CUDA stuff work with Flash CS4 ?? I mean does the whole thing work faster with a geforce graphic card ??

I know Photoshop CS4 supports it. I had not installed the CUDA drivers when I tried the Flash CS4, so I dont really know!

2

Ok lets not start world war three about the best flash cs version

flash 8 is still most easy for starters and doesnt ask much from your computer

hehe u said it

@ Photographer
When we will have the "Images interacting with music" section?

I'm trying to make a rotating wallpaper. It works fine on the computer like any of the others I downloaded from se-stuff.com but when I try it on my phone it's just a static image
It's a W595... do i have to use Flash Lite 2.1? It's the same result if I use either 2.0 or 2.1
I'm also using CS3... not that it matters... just to be safe

Did you converted the image to a movie clip and set the instance name?

why this script when is 9am or sth other time it always shows 00 20
i want to make bus line player*

You forgot the onFrameEnter

Does anyone know if you can set the phone on silent using flashlite?

Example: if the time is between 12am and 7am the phone to be on silent.

Thanks

thanks , but can you teach me, i dont understand format of this funciton



not working

Hello Photographer, great Tutorial but i have a question:

Is it possible an image loader in the Flash Wallpaper assembled, the background image change after 30 seconds?

Thanks

I don't understand. Why was my section removed?!

Ask Vorta a.k.a owner of SE-Stuff

Since I change my DB2020 and buy A2..

I can't do much with .png


Nice guide mr. photographer..


And then...

When you will publish script how to load image from file (ext. file)
And load text from text file..???




I'm waiting and looking update of this thread


Please share and teach me...

I might add it later, Photographer mods HTC Magic now

Cherrs Mr. Jockep..

Waiting..



Until now still don't have problemo..
Only waiting..

He said to you, guys, to remove it?

yes

Any updates on loading text and images from memory?

Can be added yes

As long as the total memory of the flash does not cross 2.2mb you are free to add as many pictures as you wish...

In short you can add as many pictures as you wish, as long as the total size of the all the images are less than 2.2mb, or else flash will crash.

Okay, waiting.

i'll do it soon, i just have some other things to fix

No prob'

Hi,
Thanks for a great tutorial. I'm new to Flash Lite and have just recently started to experiment with Flash Lite on mu phone (w890i).
In this tutorial i see that you can get info (read variables) from other applications on the phone (application: MediaPlayer MP, variables: data). In other tutorials I've seen application/focused and accelerometer/data. Out of curiosity i think that it would be interesting to find out what other applications variables I one could play around with. Do you know if there's any resources available on that or some other way to find out. Is the answer somewhere in the phone FS? If so, where should I look.

Kind regards,
Lårp!!

Still waiting jock.

I'm going to attempt this again Is Adobe Flash CS4 ok to use?

Yes it is. Any version higher than Macromedia Flash 8 is good enough to make flash lite 2 swf's.

See I have a theme and I want to change the language I used flare and changed the words but couldn't work the rest out so I thought to use this and start from the begining

Hi ,

can you please send me some link for tutorials for how to use the accelerometer ?
thanks !
avi

I need a little help.

Here's the actionscript I'm using.



When I publish onto my phone, the swf only says undefined where it should display the trackID.
Here's a screenshot of what I've done:



What did I do wrong?