IPB
4 Pages V   1 2 3 > »   
Reply to this topicStart new topic
> Tutorials For The Beginners, ...learn How To Make Themes, make a simple theme using carbide ui { any version }
san-sagar
post Dec 3 2011, 05:58 AM
Post #1



Group Icon

Group: Rising Themer
Posts: 3390
Joined: 28-March 11
From: India,maharastra-mumbai
Member No.: 9008745



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

(IMG:style_emoticons/default/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..



(IMG:http://i30.tinypic.com/30ky2yw.jpg)
Step 2
Choose your programs

(IMG:http://i25.tinypic.com/155768i.jpg)
(IMG:http://i31.tinypic.com/2reiip5.jpg)

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


(IMG:http://i19.tinypic.com/2q3ocqs.jpg)

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.


(IMG:http://i9.tinypic.com/2jeeq04.jpg)

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.


(IMG:http://i19.tinypic.com/2uijk2r.jpg)

**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**


(IMG:http://i17.tinypic.com/2ew0hf5.jpg)

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


(IMG:http://i19.tinypic.com/29dwvh3.jpg)

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


(IMG:http://i16.tinypic.com/2rqykw9.jpg)

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


(IMG:http://i19.tinypic.com/2gtagy9.jpg)

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


(IMG:http://i15.tinypic.com/2rqby1i.jpg)

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 ^
Go to the top of the page
 
+Quote Post
neda_25
post Dec 3 2011, 12:58 PM
Post #2



Group Icon

Group: Gifted Themer
Posts: 543
Joined: 22-January 11
From: IRAN
Member No.: 8703002



nice Tutorials ... thanks for shear sagar
Go to the top of the page
 
+Quote Post
protsenko2006
post Dec 3 2011, 02:30 PM
Post #3



Group Icon

Group: TMC Manager
Posts: 2711
Joined: 30-March 09
From: Ukraine
Member No.: 4837671



Very interesting tutorials, useful information! (IMG:style_emoticons/default/rockon.gif) (IMG:style_emoticons/default/wow.gif)
Go to the top of the page
 
+Quote Post
gdass
post Dec 3 2011, 03:01 PM
Post #4





Group: Partial Members
Posts: 12
Joined: 22-July 11
Member No.: 9535976



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.
Go to the top of the page
 
+Quote Post
gdass
post Dec 3 2011, 03:02 PM
Post #5





Group: Partial Members
Posts: 12
Joined: 22-July 11
Member No.: 9535976



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.
Go to the top of the page
 
+Quote Post
gdass
post Dec 3 2011, 03:03 PM
Post #6





Group: Partial Members
Posts: 12
Joined: 22-July 11
Member No.: 9535976



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.
Go to the top of the page
 
+Quote Post
gdass
post Dec 3 2011, 03:03 PM
Post #7





Group: Partial Members
Posts: 12
Joined: 22-July 11
Member No.: 9535976



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.
Go to the top of the page
 
+Quote Post
san-sagar
post Dec 3 2011, 10:58 PM
Post #8



Group Icon

Group: Rising Themer
Posts: 3390
Joined: 28-March 11
From: India,maharastra-mumbai
Member No.: 9008745



thanks guys in future i will add more tutorials...!
Go to the top of the page
 
+Quote Post
san-sagar
post Dec 3 2011, 11:19 PM
Post #9



Group Icon

Group: Rising Themer
Posts: 3390
Joined: 28-March 11
From: India,maharastra-mumbai
Member No.: 9008745



* HERE is tutorial for making flash clock for nokia s40 series ...*

Create an Analogue Clock (Screen Saver) in Flash Lite


(IMG:http://www.republicofcode.com/tutorials/flash/liteclock/flashliteclock.jpg)

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

(IMG:http://www.republicofcode.com/tutorials/flash/liteclock/new-from-template.gif)

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.

(IMG:http://www.republicofcode.com/tutorials/flash/liteclock/properties-inspector.gif)

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. (IMG:style_emoticons/default/smile.gif)

(IMG:http://www.republicofcode.com/tutorials/flash/liteclock/assets-on-stage.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.


(IMG:http://www.republicofcode.com/tutorials/flash/liteclock/broken-hands.gif)

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).

(IMG:http://www.republicofcode.com/tutorials/flash/liteclock/hours-mc-converted-to-symbol.jpg)

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.

(IMG:http://www.republicofcode.com/tutorials/flash/liteclock/instance-name.gif)

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.

(IMG:http://www.republicofcode.com/tutorials/flash/liteclock/reg-point-bottom.gif)

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


(IMG:http://www.republicofcode.com/tutorials/flash/liteclock/reg-point-proper-place.gif)

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.

(IMG:http://www.republicofcode.com/tutorials/flash/liteclock/move-reg-point.gif)

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


(IMG:http://www.republicofcode.com/tutorials/flash/liteclock/position-hands.gif)

You should end up with this sort of alignment.


(IMG:http://www.republicofcode.com/tutorials/flash/liteclock/stage-ready.gif)

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.

(IMG:http://www.republicofcode.com/tutorials/flash/liteclock/insert-frame.gif)

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.


(IMG:http://www.republicofcode.com/tutorials/flash/liteclock/almost-done.jpg)
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!


(IMG:http://www.republicofcode.com/tutorials/flash/liteclock/finally-done.jpg)

How it simple go and practise- download our clock from here
Go to the top of the page
 
+Quote Post
Ajay0ajay0
post Dec 3 2011, 11:31 PM
Post #10





Group: Partial Members
Posts: 6
Joined: 16-July 10
Member No.: 7739673



thankss bro
Go to the top of the page
 
+Quote Post
san-sagar
post Dec 3 2011, 11:38 PM
Post #11



Group Icon

Group: Rising Themer
Posts: 3390
Joined: 28-March 11
From: India,maharastra-mumbai
Member No.: 9008745



(IMG:style_emoticons/default/byebye.gif) anyone can requist here tutorial ? or question i will help him fastly ? and honestly ..!!!
Go to the top of the page
 
+Quote Post
san-sagar
post Dec 4 2011, 03:27 AM
Post #12



Group Icon

Group: Rising Themer
Posts: 3390
Joined: 28-March 11
From: India,maharastra-mumbai
Member No.: 9008745



(IMG:style_emoticons/default/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.* (IMG:style_emoticons/default/byebye.gif)

making panes transparent

This post has been edited by san-sagar: Dec 4 2011, 03:28 AM
Go to the top of the page
 
+Quote Post
shalvinCalicut
post Dec 5 2011, 01:42 PM
Post #13



Group Icon

Group: Rising Themer
Posts: 1056
Joined: 2-July 11
From: Calicut , Kerala , India
Member No.: 9436797



Thanks.......Nice Tuts
Go to the top of the page
 
+Quote Post
nikz123
post Dec 5 2011, 03:08 PM
Post #14





Group: Super Members
Posts: 513
Joined: 3-May 11
From: calicut,Kerala,India
Member No.: 9169740



sagar, thanks for this nice tutorial.. (IMG:style_emoticons/default/10.gif)
(IMG:style_emoticons/default/thumbsup.gif)
Go to the top of the page
 
+Quote Post
san-sagar
post Dec 5 2011, 11:55 PM
Post #15



Group Icon

Group: Rising Themer
Posts: 3390
Joined: 28-March 11
From: India,maharastra-mumbai
Member No.: 9008745



(IMG:style_emoticons/default/byebye.gif) glad you find this helpfull...!
Go to the top of the page
 
+Quote Post

4 Pages V   1 2 3 > » 
Reply to this topicStart new topic

 

Lo-Fi Version Time is now: 28th November 2014 - 11:10 AM