[Guide] Customize S2U2 Battery Animation, Slider Button, Animation & Curtain

Search This thread

mushipkw

Senior Member
Jul 25, 2006
536
37
Pilkhuwa
www.wmskins.com
POST 1:
Customize S2U2 "Slide to Unlock" text Animation

POST 2:
Customize S2U2 Slider button
Customize S2U2 Curtains
Change S2U2 Battery Animation

Here I will tell you guys how to customize the "slide to unlock" text animation.

1. The Animation file is in \Program Files\S2U2\gfx Folder named "slideanis.png"
2. It is made up of several slides of images of size 112x12 pixels(IMPORTANT), each placed right next to the other.
3. Its like the GIF animation but the images here are placed in a single image.
4. The resulatant file can be of any width but a multiple of 112, the Height should only be 12pixels.
4. You can also make customized animations like I did.

Creating animations using only Paint & Irfanview

Designing Frames:
==============
1. Open Paint.
2. Goto Image --> Attributes(Ctrl+E)
3. Set Width to 112 & Height to 12(If values are altered thing will go hazy). Choose the pixels combobox in 'Units' group.
4. You will get a 112x12 pixels white page.
5. Zoom in it to make designing easy.
6. Design a frame to be used in the animation.
7. Save it in BMP Format. I recommend using any naming convention. If Saved in other formats quality will be decreased.
8. Got the first frame, now create each & every frame to be used repeating the steps.
9. Save all of them in BMP format.

Of course: Instead of designing frames u can use any image just resize them.

Designing Animation:
===============
1. Open IrfanView.
2. Goto Image --> Create Panorama Image.
3. Choose Horizontal in the 'Directions' group.
4. Click 'Add images' & Choose all the frames u wish to use.
5. Adjust them 'Up', 'Down' as you want them in the animation. Top frame comes first & Bottom frame comes last.
6. Uncheck 'Insert file name into image'.
6. Click Ceate Image.
7. Save it in PNG format.

PS: Animations play really fast if only one unique frame is used once, In the Loading animation I got 12 frames, each frame was used 3 times repeatedly, to make it slow. i.e each frame was added 3 times.

Use Them:
========
1. I recommend to backup the \Program Files\S2U2\gfx folder.
2. Rename the saved PNG to 'slideanis.png'
3. Copy it to the \gfx folder.
4. Run iLock2 to stop S2U2.
5. Run iLock2 to rerun it.

That's it, Design your own animations & Share them here.

Have a look at a couple of mine:


Here's how my S2U2 looks like:



'll post the screen shots of others later.

Unzip & Copy 'slideanis.png' to \Device\Program Files\S2U2\gfx
 

Attachments

  • Loading.zip
    3 KB · Views: 13,108
  • Slider.zip
    7.3 KB · Views: 13,442
  • 5_Starv3.zip
    5.3 KB · Views: 10,275
  • 5_Starv1.zip
    7.1 KB · Views: 8,560
Last edited:
  • Like
Reactions: HTC0017

mushipkw

Senior Member
Jul 25, 2006
536
37
Pilkhuwa
www.wmskins.com
Customize Slider Button

Here is a tutorial to customze the S2U2 Slider Button.

1. S2U2 Slider button image is in Device\Program Files\S2U2\gfx folder as Arrows.png.
2. It consists of two images each of size 47x30 pixels, that makes the original image 94x30 pixels.
3. The first image is used when Slide to unlock & second image is used when Slide to Answer.

Designing Buttons:
===============
1. Open Paint.
2. Goto Image --> Attributes
3. Change width to 47pixels & height to 30pixels.
4. Design button u want to use for slide to unlock.
5. When Done, save it in BMP format.
6. Repeat the process for the next button i.e. Slide to answer.
7. Open IrfanView.
8. Goto Image --> Create Panorama Image.
9. Choose 'Horizontal' in Directions Group.
10. Click Add Images & add the images (Remember the first file is for Slide to unlock & the second is for Slide to answer)
11. Untick 'Insert file names in images'.
12. Click Create Image.
13. This file should be of 94x30 pixels.
14. Save it in PNG format.

Use Them:
=========
1. Rename the file to arrows.png
2. Copy it to Device\Program Files\S2U2\gfx folder.
3. Stop S2U2 by running iLock2.
4. Start again by running iLock2
5. U are done.

Of course: Instead of designing buttons u can use any image just resize them.

For now have this @ end of post:
Copy it to \Device\Program Files\S2U2\gfx folder

==============================
Customizing the Curtains
===========================


Here how to customize the S2U2 curtains i.e Both Top & Bottom.

The files used for both curtains is topbar.png in the \Program FIles\S2U2\gfx\ folder.

To remove the curtains just delete the files topbar.png. PS: This will remove both the curatins.

1. Make any image of height 68 pixels, You can set any width. Note:- The width of PPC screen is 240 pixels. If the width is smaller it will be appended.
2. Save it as topbar.png.
3. Place it in GFX folder.
4. Stop S2U2 by running iLock.exe
5. Run S2U2.

That's it.

This file will be used for both curtains, but you can turn off top curtain from S2U2 settings.

============================================================================
Battery Animation:
==============
Screenshot:


With Text & Without Text
 

Attachments

  • arrows.png
    arrows.png
    1.6 KB · Views: 197,607
Last edited:
  • Like
Reactions: HTC0017

abumhmmd1

Senior Member
Nov 18, 2006
2,086
215
RIYADH
GOOD WK
I Lk it

:) :)

4 the S2U2 Slider Button >> it would be better if a dark red rose used

4 th BATTERY >> can it B WT or LiT GRAY instead off GREEN Color
it wll B GREAT !!!!

THNKS
 
Last edited:

mushipkw

Senior Member
Jul 25, 2006
536
37
Pilkhuwa
www.wmskins.com
Slider Border

Here I'll be posting a tutorial on how to edit the Slider box. But for now Im uploading the Slider Boxes I have got.
Just rename them slide.png & copy them to Device\Program Files\S2U2\gfx folder.
 

Attachments

  • slide1.png
    slide1.png
    2.8 KB · Views: 3,074
  • slide2.png
    slide2.png
    257 bytes · Views: 1,821

Azimuth21

Senior Member
Dec 11, 2006
229
2
San Jose, CA
do you mind if you pm me just the slider? it's the object that you slide across the bar. i'd like one that doesn't already have an icon on it, because i'm trying to figure out how to make my sliders have proper gradient work.

also, could you post here that sweet clock you have in the first post?

thanks for the themes, btw, i'm using the first one in the previous post (can't describe the wallpaper, lol.)
 

mushipkw

Senior Member
Jul 25, 2006
536
37
Pilkhuwa
www.wmskins.com
do you mind if you pm me just the slider? it's the object that you slide across the bar. i'd like one that doesn't already have an icon on it, because i'm trying to figure out how to make my sliders have proper gradient work.

also, could you post here that sweet clock you have in the first post?

thanks for the themes, btw, i'm using the first one in the previous post (can't describe the wallpaper, lol.)

I have already posted them in the 6th post in this thread http://forum.xda-developers.com/showpost.php?p=1768371&postcount=6
 

MrGalione973

Senior Member
Oct 15, 2007
50
0
Parkville
for the slider, you actually just have to follow the first and second post and you can actually make your own slider buttons, ive done so myself and made 2 - 3 acuatll arrows that i actually switch from time to time
 

Top Liked Posts

  • There are no posts matching your filters.
  • 5
    S2U2 Android Clocks + Icons by frambo88

    ***Special thankx to frambo88 who inspired me to carry on the work!

    These are for VGA devices. These should scale as normal on WVGA devices too. Else please let me know.

    QVGA = check here

    Note: I use only 24hr format. But i will include A/P/M (png files for the clock) in a later attachment. Thankx

    Screen03_resize.png
    Screen05_resize.png
    Screen07_resize-1.png
    Screen09-1.png


    Clocks Attached
    Orange
    White
    Black

    Android Slider, Notification Icons & System Icons by frambo88

    Slider as seen in the screenshot

    Wallpapers as in screenshot

    And WOW! The Android Analog Clock by frambo88 as in screenshot 4

    Use direct download from attachment if you think hotlinks are interchanged ;)
    5
    Hi crazy man!
    Could you share your lockscreen please. I find it really clean and modern. A nice one!

    Here is my modified gfx. I have more than one clock but i am not sure that all are looking good.

    Hope you like it. :) Hit the "thanks!: button if you do.
    3
    (W)QVGA_Stripes

    Another convertion of an iPhone theme.
    I hope you like it!

    Note: StripesLow will NOT display the next appointment-task info correctly.

    Wallpaper Source.
    2
    Someone know how to (or if is possible to) remove the topmost courtain with all the content? Thanks!


    Backup the old files first!


    Use the system file i attached to this post and replace the onein "s2u2\gfx".

    Name the "operator.png" file with the name of your network provider from "s2u2\gfx\operator" and replace.

    After this you will only have the signal bars.

    hey bro, could you share pls? :)

    could you make a version where the 'unlock' text is white pls .. thanks in advance..

    Sorry for the late reply, i had something to do.

    Everything you need is in the *.rar file.

    I made a lite psd for your lockscreen wallpaper.



    Hit the thanks button if this was helpful! Thanks!
    2
    Theme S3RN4M2 only for WQVGA resolution, only 240 x 400​

    In the download you will find the complete overwrite folder GFX to the original with a file explorer (not from PC could possibly mistake).
    The file theme.s2u2 for do all the settings automatically.
    In the end a small collection of wallpapers.


    GFX folder also contains the forecasts in the format HH_Weather, if you decide not to apply the theme files and settings you need to set the clock manually without curtain and left-aligned.

    Sorry for the translation with Google!
    If you think this post is useful not forget to press Thanks or Donate to Me!