[Tutorial] How to Make Manila 2.5 Animated Wallpaper

[xpressyourcell]

I've been making a few of these and I decided after a couple of requests that I should make a tutorial. I will try to be as thorough as possible. If I missed a step, please let me know and I will correct it. Thanks!
This tutorial will be for the Circles Animated Wallpaper. If I have time, I will add the Brush and Light Wallpapers later.
Things you will need:
1. A .png picture editor - Photoshop, Gimp, Paint.Net etc.
2. CFC_gui editor http://forum.xda-developers.com/showpost.php?p=3164600&postcount=1[/URL]
3. A file explorer that will allow you to overwrite files in the Windows folder : Total Commander, Resco Explorer etc.
Step 1.
Create a folder on your Desktop PC Called Circles.
Step 2.
Open the file explorer on your phone that you will be using and go to the "Windows" folder.
Step 2a.
Locate, copy, and paste the following files to your storage card:
1f3e9503_manila
2bfd66c8_manila
2c0f7f49_manila
2c33b04b_manila
2c45c8cc_manila
2c2197ca_manila
5ad77c2b_manila
199e77cf_manila
4256a2d4_manila
42448a53_manila
423271d2_manila
Step 3.
Go to the "Windows>Animated Wallpaper" folder.
Step 3a.
Copy the file _RAW_Circle.png to your storage card
Step 4.
Copy these files to the "Circles" folder on your PC that you have created.
Step 5.
Open CFC_gui.exe
Step 6.
Select "File>Select Folder>Circles (Wherever you saved your Circles folder)
Step 7.
Select "Tools>Export to PNGs". To keep things simple, export the PNGs to the Circles folder.
Step 8.
Now open your photo editing software and begin editing your pictures.
_RAW_Circle.png is the thumbnail veiw that you will use to select your Wallpaper when you are finished.
5ad77c2b_manila is a 512x1024 image of your background
To make the next two images (199e77cf_manila and 1f3e9503_manila) you will need to start out with a 480x640 wall that you are using. These two images when combined, need to match up perfectly.
The rest are simply the circles that you can replace with any image you desire.
Be sure to replace and save all of the pngs with the same name in the circles folder.
Step 9.
Go back to CFC_gui. Select the first file in the window on the left. Hit the "Replace with" button on the lower right. Select the png from the "Circles" folder that has the corresponding name. This will overwrite the manila file with that name in the "Circles" folder. Do this with all of the files in the window on the left.
Step 10.
Now hit: Tools>Finish Up. The wizard that follows will CFC Compress, Pad, and Trim your files to optimize them for use on your device.
Step 11.
Move all of the manila files in the folder and the _Raw_Circle.png back to your storage card.
Step 12.
Copy all of the manila files in step 11 over to your Windows folder on your device. If asked to overwrite the existing files, click yes
Step 13.
Copy the file _RAW_Circle.png to the "Windows>Animated Wallpaper" folder. Again, if asked to overwrite the existing files, click yes
Now restart your device, go to Settings tab>Personalize>Home tab wallpaper>animated wallpaper and select your new wallpaper!

[InvincibleLiving]

Impressive writeup much props to you for this!

Nice! Also a note that 011f4a3f is a m9/xml that you can easily control the pattern and speed of each moving item if you get tired of them just falling down the same way!

[xpressyourcell]

Originally Posted by DavidMMorley

Nice! Also a note that 011f4a3f is a m9/xml that you can easily control the pattern and speed of each moving item if you get tired of them just falling down the same way!

Thanks for that, would you mind explaining how to do that exactly? Not much of one to play with code,

Originally Posted by xpressyourcell

Thanks for that, would you mind explaining how to do that exactly? Not much of one to play with code,

You will need m9converter http://forum.xda-developers.com/show...54&postcount=2

Convert your file to a XML using that tool (dos command line tool)

Now you can edit your XML, Notepad++ is perfect


snippet of lines 539-563

<Object Type="GLESSprite2D">
<Property Name="Center" X="8.0" Y="-8.0" Z="0.0" />
<Property Name="Position" Animated="true">
<Keyframes>
Each moving item has 5 positions it moves to during the animation time. Change the X and Y values to tell it where to go on your screen. 0,0 is top left.
<Keyframe Frame="180" X="0.0" Y="-550.0" Z="0.0" />
<Keyframe Frame="250" X="300.0" Y="-450.0" Z="0.0" />
<Keyframe Frame="479" X="0.0" Y="-380.0" Z="0.0" />
<Keyframe Frame="480" X="50.0" Y="-180.0" Z="0.0" />
<Keyframe Frame="550" X="300.0" Y="0.0" Z="0.0" />
</Keyframes>
</Property>
<Property Name="Opacity" Animated="true">
<Keyframes>
You can control the transparancy of each step also, why their is a extra one I do not know
<Keyframe Frame="220" Value="50.0" />
<Keyframe Frame="250" Value="50.0" />
<Keyframe Frame="479" Value="50.0" />
<Keyframe Frame="480" Value="50.0" />
<Keyframe Frame="520" Value="50.0" />
<Keyframe Frame="550" Value="50.0" />
</Keyframes>
</Property>
<Property Name="Texture Path" Value=".\Assets\Images\Home\WVGA\circle01.qtc" />
You can stretch your image if you want also here:
<Property Name="Size" Width="76.0" Height="76.0" />
How long do you want this particular one to last:
<Property Name="Duration" Value="956" />
</Object>
Lots of trial and error in there to play with, have some fun. I have ones that go around the screen and ones that fall upwards.

Now use the m9converter and turn back into a manila file and place in your windows directory.

[xpressyourcell]

Wirelessly posted (Opera/9.7 (Windows Mobile; PPC; Opera Mobi/35432; U; en) Presto/2.2.1)

Originally Posted by DavidMMorley

You will need m9converter http://forum.xda-developers.com/show...54&postcount=2

Convert your file to a XML using that tool (dos command line tool)

Now you can edit your XML, Notepad++ is perfect


snippet of lines 539-563

<Object Type="GLESSprite2D">
<Property Name="Center" X="8.0" Y="-8.0" Z="0.0" />
<Property Name="Position" Animated="true">
<Keyframes>
Each moving item has 5 positions it moves to during the animation time. Change the X and Y values to tell it where to go on your screen. 0,0 is top left.
<Keyframe Frame="180" X="0.0" Y="-550.0" Z="0.0" />
<Keyframe Frame="250" X="300.0" Y="-450.0" Z="0.0" />
<Keyframe Frame="479" X="0.0" Y="-380.0" Z="0.0" />
<Keyframe Frame="480" X="50.0" Y="-180.0" Z="0.0" />
<Keyframe Frame="550" X="300.0" Y="0.0" Z="0.0" />
</Keyframes>
</Property>
<Property Name="Opacity" Animated="true">
<Keyframes>
You can control the transparancy of each step also, why their is a extra one I do not know
<Keyframe Frame="220" Value="50.0" />
<Keyframe Frame="250" Value="50.0" />
<Keyframe Frame="479" Value="50.0" />
<Keyframe Frame="480" Value="50.0" />
<Keyframe Frame="520" Value="50.0" />
<Keyframe Frame="550" Value="50.0" />
</Keyframes>
</Property>
<Property Name="Texture Path" Value=".\Assets\Images\Home\WVGA\circle01.qtc" />
You can stretch your image if you want also here:
<Property Name="Size" Width="76.0" Height="76.0" />
How long do you want this particular one to last:
<Property Name="Duration" Value="956" />
</Object>
Lots of trial and error in there to play with, have some fun. I have ones that go around the screen and ones that fall upwards.

Now use the m9converter and turn back into a manila file and place in your windows directory.

awesome explanation! Thanks. Do you know which manila files control the brush and light animations?

Originally Posted by xpressyourcell

Wirelessly posted (Opera/9.7 (Windows Mobile; PPC; Opera Mobi/35432; U; en) Presto/2.2.1)



awesome explanation! Thanks. Do you know which manila files control the brush and light animations?

They should all be in that same one, I am pretty sure...

[stuge123]

Originally Posted by xpressyourcell

I've been making a few of these and I decided after a couple of requests that I should make a tutorial.

great write up, can you post the wallpapers you have done so others can enjoy?

Thanks!

[xpressyourcell]

Originally Posted by stuge123

great write up, can you post the wallpapers you have done so others can enjoy?

Thanks!

Go to the TP2>Themes>Dusk add ons thread. They are all in there.

[Tink]

Thank you so much for this - you rock!!