Help - Search - Members - Calendar
Full Version: Tutorials For The Beginners, ...learn How To Make Themes
mobile9 Forum > ThemeMaking > Chat, Tutorials & Resources
san-sagar
These's tutorials which i collected to share for you, who want to make theme by urself..
Credits to chungviet.. :-bd


**Download the latest version of Carbide.ui S60 Theme Edition here

byebye.gif

All previews are for a theme in 176x208px. So if you create a theme in another screensize, then are also other sizes for any new image needed what you want to change. The correct sizes would always shown in the properties window.

Step 1
Create a 'new theme', selec
t basic graphic/ S60 theme, then click on 'Preferences' to select the programs which you want to use to edit bitmaps, vector graphics and sounds..




Step 2
Choose your programs




Step 3
click on 'gallery' to select how much images you want to see on the right site in the preview window, carbide need more time to start if you use to much previews




Step 4
Begin with the background images for the Active and Idle background. Use the correct size, here as example 176x208px for the 3250 or N91, all newest nokia mobiles have 240x320px.
You can use all images per drag and drop.




Step 5
Now change the navi pane if you want. To make them transparent for different background images go to edit/ animate, use new layer and select clear layer for the first.




**Here an example if you want to use the navipane (size here for a 176x208px theme), the needed size stand always in the properties window**




Step 6
Change the text colour, use a colour which looks nice and works with the theme/ backgrounds




Step 7
In the colour mode of the mainarea you can change the colour of the status indicators, this colour would also used for the date in the analogue clock




Step 8
Select and change the colour for the 'Highlighted Items'




Step 9
The list text colour is the same as the inactive highlights




Step 10
The colour settings for the softkeys need no illustration.


So... what are you waiting for??! whip.gif Go and practice! I know you can do it! wink.gif smile.gif

thanks to gadgetgreek also

^tutorial by sagar ^
neda_25
nice Tutorials ... thanks for shear sagar
protsenko2006
Very interesting tutorials, useful information! rockon.gif wow.gif
gdass
Many thanks for a nice and helpful tutorial dear San ! ! I want to make Flash Clocks for S40 and S60 phones is there any tutorial for the same. If so please post the same, it will be of great help.
gdass
Many thanks for a nice and helpful tutorial dear San ! ! I want to make Flash Clocks for S40 and S60 phones is there any tutorial for the same. If so please post the same, it will be of great help.
gdass
Many thanks for a nice and helpful tutorial dear San ! ! I want to make Flash Clocks for S40 and S60 phones is there any tutorial for the same. If so please post the same, it will be of great help.
gdass
Many thanks for a nice and helpful tutorial dear San ! ! I want to make Flash Clocks for S40 and S60 phones is there any tutorial for the same. If so please post the same, it will be of great help.
san-sagar
thanks guys in future i will add more tutorials...!
san-sagar
* HERE is tutorial for making flash clock for nokia s40 series ...*

Create an Analogue Clock (Screen Saver) in Flash Lite




Our tutorial will be divided into two parts, in the first we will import and set up the graphics, and the second we will code the clock.

Importing and Setting Up the Graphics


We are not going to create the graphics for this clock from scratch to save time. Download this file to get the graphics saved in an SWF file. Unzip the contents (the SWF file) and put them somewhere accessible.

We are going to start off by creating a new FLA. Open Flash and go through File>New, the New Document window should pop up, click on the Templates tab, click on Global Hand, select Nokia S60 - 240x320 and click OK



If you like to test on your actual phone and it does not have the aspect ratio we selected then feel free to select that ratio, our movie will work nonetheless because we will set the ActionScript version to Flash Lite 1.1, which is guaranteed to work on practically all models running the Flash Lite player.

To do this last part, access the Properties Inspector and click on the Settings... button, from there simply change the Version to Flash Lite 1.1.



It's time now to import the graphics, go through File>Import>Import to Stage, browse for the SWF file you unzipped from our assets zip archive and click OK. You should see all the graphics on the stage now. smile.gif


Our clock is going to move its hands around to show the time. In order for us to manipulate any asset on the stage we need to have this asset converted to a movie clip symbol and then assign an instance name to it to be able to refer to it from ActionScript. We are going to convert our clock hands one by one.

If you attempt to select any of the clock hands you will notice that all of them are grouped together. Simply hit Ctrl+B to break up the group into the three clock hands.




Click on an empty spot on the stage and then select the hours hand (the shortest one in the middle). We are going to convert it to a symbol by pressing F8. The Convert to Symbol window should pop-up, assign the name Hours MC to it, set the type to Movie Clip, and the Registration Point to the lower middle point (We will discuss the Registration Point more in a bit).



We need to assign an instance name to our newly created movie clip in order to be able to refer to it via ActionScript. While the Hours Hand is selected on stage, access the Properties Inspector and assign the instance name hours_mc to it.



The Registration Point is the center of our movie and it will be used as the pivot for rotation when the clock functions later. We have now put this point on the lower tip of the hours clock, which is the exact point at which the hand should revolve but it is very close. If we were to rotate our clock hand now it will look something similar to this because the pivot is at its very lowest tip.



Realistically the pivot would be a bit higher than this and more in between the four sharp points of the clock hand.




We can manually alter the position of our graphic over the registration point of the movie clip by double clicking the hours hand movie clip on stage to edit its own timeline. You should see your clock hand dotted once again now. Simply Zoom-In and then move the hand using the arrow keys on your keyboard so that the Plus Sign is a bit higher than the absolute bottom in the position we showed in the image earlier.



That should do it. Now our clock hand will rotate from the right pivot point! Double click on an empty spot on the stage to go back to your main timeline. You will now need to repeat this process for the Minutes Hand and the Seconds Hands. In summary, here is what you will have to do for the minutes hand:

1. Select the Minutes Hand then press F8 to convert to a Movie Clip Symbol, name it Minutes MC, and the set the Registration Point to the lower bottom.
2. Assign the instance name minutes_mc to this movie clip.
3. Double Click the minutes hand to edit its timeline and move the hands so that the registration point is at the right position (a bit above its absolute lowest tip). Once you are done double click an empty spot to go back to the main timeline.

And then once again for the seconds hand:

1. Select the Seconds Hand then press F8 to convert it to a Movie Clip Symbol, name it Seconds MC.
2. Assign the instance name seconds_mc to this movie clip.
3. Double Click the seconds hand to edit its timeline and move the hands so that the registration point is at the right position (a bit above its absolute lowest tip). Once you are done double click an empty spot to go back to the main timeline.

You should end up with the three hands as movie clips with assigned instance names on the stage. All we need to do now is just put them on the proper place on stage. Move the clock graphic to the middle of the stage and then position the clock hands over the center of the clock. A trick that you can use to make sure that registration point of all your hands is right on top of the center of your clock is to select them one at a time and use the Properties Inspector to set their transparency to 20% and then try to put the Plus Sign right on top of the center of clock. (You can zoom in to make things much easier as well!) - You will obviously have to remove the transparency effect when you are done




You should end up with this sort of alignment.




All of our graphical assets are now ready and set for our clock. All we need to do now is script this. Right-click the top layer in your timeline and select Actions to start coding
.

[b]important coding -


Coding the Clock

Our clock code is pretty simple. The Flash Lite player can retrieve the time of the device it is running on by using the FSCommand2 method along with the parameters GetTimeHours, GetTimeMinutes, and GetTimeHours. We are going to retrieve these three values and save them in variables with corresponding names. Simply paste the code below to do so:
myHours = FSCommand2("GetTimeHours");
myMinutes = FSCommand2("GetTimeMinutes");
mySeconds = FSCommand2("GetTimeSeconds");

The Flash Lite Player outputs the hours as a value between 0 and 24, the minutes between 0 and 60, and the seconds between 0 and 60 - which are the regular units of time. However, we need to translate these into a rotation degree. A full revolution around the clock is 360 degrees to find the multiplier to covert our values into a degree we simply divide 360 by the maximum value of each of our time units.
// Hours: 360 divide by 24 = 15
// Minutes: 360 divide by 60 = 6
// Seconds: 360 divide by 60 = 6

This will work properly for minutes and seconds, but clocks usually show hours in the 12 hour format, so we are going to get our hour multiplier by dividing 360 by 12.
// Hours: 360 divide by 12 = 30
// Minutes: 360 divide by 60 = 6
// Seconds: 360 divide by 60 = 6

We are going to apply this into our code now by using our multipliers to convert our time into degrees:
myHours = FSCommand2("GetTimeHours");
myMinutes = FSCommand2("GetTimeMinutes");
mySeconds = FSCommand2("GetTimeSeconds");

myHours = myHours*30;
myMinutes = myMinutes*6;
mySeconds = mySeconds*6;

And now we will assign these degrees as the value for the rotation properties of our clock hands:
myHours = FSCommand2("GetTimeHours");
myMinutes = FSCommand2("GetTimeMinutes");
mySeconds = FSCommand2("GetTimeSeconds");

myHours = myHours*30;
myMinutes = myMinutes*6;
mySeconds = mySeconds*6;

hours_mc._rotation = myHours;
minutes_mc._rotation = myMinutes;
seconds_mc._rotation = mySeconds;
Identifiers ending with _mc refer to the movie clips we have on stage, the other identifies refer to the variables in which we stored the time.[/b]

Believe it or not, our code is practically done. However, we need this code to be executed repeatedly, to do this, we are going to use a manual timeline loop, to close the Actions panel and access the Timeline. Right-click on the only frame you have on your upper layer and Insert a Frame. Repeat this process for the other layer as well.



By adding another frame we are making the movie play from frame 1 to 2, and then back to 1, 2, 1, 2, and so on. This way our code will be repeatedly executed each time frame 1 is played once again. To test your clock simply press Ctrl+Enter.



Our clock should function well now, but it is not perfect, because the hours hand will point at the current hour and will step suddenly onto the next hour when it comes, while in reality, the hours hand moves gradually bit by bit as time passes and will end up at the next hours smoothly. To mimic this in our clock we will need to add the number of minutes to our hours value. We can do this by adding one line to our code:

myHours = FSCommand2("GetTimeHours");
myMinutes = FSCommand2("GetTimeMinutes");
mySeconds = FSCommand2("GetTimeSeconds");

myHours = myHours + (myMinutes/60);

myHours = myHours*30;
myMinutes = myMinutes*6;
mySeconds = mySeconds*6;

hours_mc._rotation = myHours;
minutes_mc._rotation = myMinutes;
seconds_mc._rotation = mySeconds;


Test your movie once again to view your fully functional clock!




How it simple go and practise- download our clock from here
Ajay0ajay0
thankss bro
san-sagar
byebye.gif anyone can requist here tutorial ? or question i will help him fastly ? and honestly ..!!!
san-sagar
byebye.gif Here is video tutorial for * A short tutorial to make Status Area Background, Idle Status Area Background, Navi Pane & Idle Navi pane to transparent.* byebye.gif

making panes transparent
shalvinCalicut
Thanks.......Nice Tuts
nikz123
sagar, thanks for this nice tutorial.. 10.gif
thumbsup.gif
san-sagar
byebye.gif glad you find this helpfull...!
kaifiki
one of the awesome thread i got in m9..........
thnxxx mate......
kaifiki
thumbsup.gif
san-sagar
thanks plz dont double post man..!
kaifiki
oooopz
i will see to it..
san-sagar
i gonna report you , if you agaain do it ..~ !
_Daniel_02
really nice tutorial bro...very useful for the new themers... 10.gif smile.gif
san-sagar
smile.gif thanks danial ...!

@ fiki you gonna punished for this..! tongue.gif
mkraj25
very very good work Sagar bro 10.gif10.gif
san-sagar
Thanks . . .raj if you have any q-a i will try to help you out?
RuthCR
grouphug.gif THANKS YOU SO MUCH!
san-sagar
Welcome ruth
AJISHOOMMEN
Thank u very much for sharing............. clap.gif clap.gif 10.gif10.gif10.gif
san-sagar
most welcome AJISHOOMMEN ...! smile.gif
soumyadeepbshn
Oh , how could I missed this wonderful thread , really great work Sagar , keep it up . thumbsup.gif notworthy.gif
san-sagar
thanks soumy. ....! Glad you master like it ...! thumbsup.gif
aliciawwp
Very nice tutorial. Thanks! smile.gif
san-sagar
QUOTE (aliciawwp @ Jan 12 2012, 06:49 AM) *
Very nice tutorial. Thanks! smile.gif



thanks alica ...hope people find this help full...!
Aeronitor
Thanks Sagar
san-sagar
QUOTE (Aeronitor @ Jan 16 2012, 07:45 PM) *
Thanks Sagar

notworthy.gif welcome aero notworthy.gif
paran0ia
Cool share!

If i want to create my own music player with the theme how do i proceed?
AJISHOOMMEN
Nice Tutorial........... clap.gif clap.gif
abhijeetsvr
Very Helpful topc for every new themers!!! thumbsup.gif
zachlock
10.gif VERY HELPFULLLL!!!
Rakes_love
byebye.gif hey san.....
i want a theme creator which allows me to get a preview of my creation. then what is the best for me???(s40 5th editon).plz help me....... grouphug.gif
Leafjohn
10.gif Wonderful work by sansagar
soumikatoz
nice info my bro.i like it
iffat_rais
QUOTE (san-sagar @ Jan 27 2012, 03:56 PM) *
QUOTE (Aeronitor @ Jan 16 2012, 07:45 PM) *
Thanks Sagar

notworthy.gif welcome aero notworthy.gif


nice tutorial.....but i still cant seem to get it....i downloaded carbide 3.4...in one of the screenshots u have shown to choose basegraphics under preferences....but when i open preferences i dont see any such option....i would love to use carbide.....sadly i dont seem to get it!
iffat_rais


the tutorial u have uploaded is for carbide 3.1 and now the latest version of carbide 3.4 is available...thats y the difference....what u have shown in ur very first pic choosing base graphics does not appear in the new edition of carbide...
humera27
clap.gif thanx
kamrananjumsoj
QUOTE (iffat_rais @ Sep 16 2012, 08:33 PM) *
the tutorial u have uploaded is for carbide 3.1 and now the latest version of carbide 3.4 is available...thats y the difference....what u have shown in ur very first pic choosing base graphics does not appear in the new edition of carbide...

dear carbide 6 is also available now
lalji1561
Great thread san-sagar, hope people find this help full !

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.