[Tutorial] How to create an Dynamic Theme with rotation element inside.|PS3 Themes|Forum|PS3 Themes

[Tutorial] How to create a Dynamic Theme with rotation element inside.

Well in this tutorial I will show you how to create an dynamic theme with a rotation element inside. This is very, very simple to do using the raf tools. This time the theme will contain an animated secuence as backgrownd and one element rotating in the theme nothing more. But you can make it with a static backgrownd and the element rotating only if you want. Even you can add more elements rotating there or combine elements with diferents animations. I will be using only one to make it more easy to understand.

** This is not hard to achieve and is safe but if you modify the code in a wrong manner you can get a XML-Brick. All the files given here are safe to use following this tutorial. Without manipulations on the files this is safe. But if you make changes I will not be responsible for your mistake. No one here including PS3_themes staff and myself will be held responsible for any damage caused. This can cause semi-bricks and for more than a semi-brick is very easy to fix no one will want to pass from a situation like that. Don’t modify the files is you don’t know what your doing. If you decide to try and modify the files an get a semi-brick go to recovery menu to repair your mistake. **

Let’s start with this process

Tools you will need to create your theme :

1-Photoshop or Gimp to manipulate the video and the images. I prefer for this Photoshop but with Gimp and some plugings you can do the job.

2- NVIDIA DDS plugins for Photoshop to save the images bgs to dds (DXT1 RGB 4 bpp | no alpha)
https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop

If you don't have photoshop you can use this to convert jpg to DDS : http://www.mediafire.com/download/l2o84cckklh1e6p/DDS+Converter+1.4.zip

3-Notepad ++ for edit .xml and .js
http://notepad-plus-plus.org/download/v5.9.3.html

4- And the exes and files to compile the raf. Are the same tools used for the creation of SlideShow, Animated or Dynamic themes. Nothing is new here.

5. Finally our DCC application in this case “Blender” and Why ? Blender, because is a free open source 3D content creation suite that you can use without problems to save your files in DAE format needed for our purpose.
http://www.blender.org/download/get-blender/

6. Example files or material nedeed to be used to finally create your animated-dynamic theme :
Download : http://www.mediafire.com/?5s2nf542s5qsho1

7. (Opcional) For safety reasons I recommend to download, install and use this special .p3t called : “Raf_loader.p3t” is needed in cases that you don’t want to install the theme everytime to test it. The theme will load everytime directly from the USB. So if something goes wrong you never be able to get a XML-Brick. The only problem is that only works in consoles with CFW from 3.55 to 4.30.

Download : http://www.mediafire.com/?mwacxx4poe2xltx

Install the .p3t like always you do with any .p3t and put the anim_1.jpg in the root of a USB. Then run the USB_raf_loader.p3t with the USB incerted in the PS3 with the file in the root of the pendrive. Automatically will load the theme from the USB.

** this process still to be an trial and error method because we have to test the elements localizations and movements more than once and for that this special .p3t are very usefull. But if you can’t use it you have to compile everytime you need to test.**

Things you will have to know :

As others tutorials you need to know a few things first to finally achieve a theme like this.

**I recomed to start learning slideshows first but you can start from the animated process directly if you want :

1. This process envolve the animated theme creation so you will have to learn this first and for that you can follow a few tutorials written or created in videos from here :

Writed tutorial :

a. http://www.ps3-themes.com/forum/ps3-themes/how-to-create-animated-themes-tutorial

Video tutorials :

b. http://www.ps3-themes.com/forum/ps3-themes/animated-theme-video-tutorial

c.

(Yes; my video tutorial is old but works )

2. How to create an animated theme and add static images to that theme with the corresponding dae. This is the “part 1” of this tutorial and you can get it here :

a. http://www.ps3-themes.com/forum/ps3-themes/tutorial-how-to-create-an-animated-theme-and-add-static-images-to-that-theme-with-the-corresponding-dae

b. (Opcional) the “part 2” of my tutorials.
http://www.ps3-themes.com/forum/ps3-themes/tutorial-how-to-create-an-animateddynamic-theme-part-2-of-x

If you follow all those tutorials this process will be very easy to you at end.
Ok; To create a theme animated with some dynamic elements rotating inside of it you have first to have all the DDS files from your video part extracted and ready to use. If you follow the prerequisites you will not have problems to do this.

Then find those additional pictures (jpgs) that you will be using in your theme for the dynamic elements and open it the individual pictures or images in Photoshop to create an alpha channel in that images. This part is important and you need to do this because if you not create the alpha channel in the image or in any static element that you are using that’s element dynamic will not be seen in the XMB. Finally once you create the alpha channel for your image export the images the same as your “frames” in a DDS format with this settings :

http://img35.imageshack.us/img35/9623/ddssettings.jpg

Use photoshop to see and write somewhere all the size for the individual image in “cm” because you will need that info. later to finally create the dae file (model) of the individual image with the DCC application in this case using Blender.
Once you have the static image in DDS format with the alpha channel created is time to create the .dae files for those images with blender.

For this tutorial I will be building only one dae according to my element dynamic in this case the Skyrim logo rotating.
The theme will consist in :

1. The animated secuence as backgrownd.
2. And the logo of the dragon rotating.

If you follow the tutorial to the creation of the dae you can continue with the process if not read this :
I will show you how to build two dae files , always will be the same process for 2d or 3d objects. Nothing will change and the only different thing here always will be images, locations, sizes, etc. And for the backgrownd (static or Animated) you can use this dae file perfectly that is extracted from the animated method. You don’t have to waste time on something that is already done. BTW : You can use this bg.dae to others backgrownds projects in a near future without problems. Its already inside the pack with the others files but I will leave it here again :

For the backgrownd part use this dae : http://www.mediafire.com/?4ud0n6dz15ibe62

As you can see if you follow the previous tutorials you can note that the process is basicly the same always.
I will explain this other part in a video because is better to follow and a few important steps are not seen in another tutorial. What can I say the creation of the dae involve a few important steps that you have to do right to work … So open you DCC application and follow this video :

The final part will be the explanation of the xml and the PSJS needed in the process and creation of our raf file to learn how to add those animated elements there. Writing a little code for the localization of the elements in the XMB and for the animations in the PSJS.

I will leave you an example image of the XML file and the lines added for the Skyrim theme example with the element dynamics inside. The first lines in the XML as always will be the animated secuence. There you will only change like always the number of images according to your animated secuence. The backgrownd secuence “animated” will have a resolution of 800x456 with a maximum of 71 frames. You can use a static image as background if you want to see the the logo only rotating and the only thing you have to do is remove those lines that are the code for the animated secuence.
Then the only thing you need to add there is the code for the dynamic element. Check this image example :

http://img856.imageshack.us/img856/8514/91337790.png

I rename the dynamic component cube and is for a reason I will leave you in a folder called “extra” a dds for a 3d object “cube” that you can use as example too with a 3d rotating element.

**You can find in the pack with the files a folder called extra : inside you will get the XML and JS used for this theme. You can download it from the six dot in the tools needed.**

Well as you can see in the picture of the XML for the raf I added one additional elements there according to my dynamic elements that I want animate or use as dynamic element. If you want to add more elements there with that you can get the idea because will be the same. The only diference with different sizes, location, etc. If you see I writed an additional code for the “position : x,y,z ” the rest are the same and is very important because with that code there you can be able to move and locate your element in the XMB as you desire.

**You can play with those values in position = x,y,z and this concept is good for locate images in a 3D space for example changing the "z" value you will be able to move the picture back or front as desire making a 3D effect in static images for example.**

// Other thing if you want to resize the image you have to add : scale = x,y,z and play with those values to get the size desire.

Example : scale = 1,1,1 Check the example image :

http://img823.imageshack.us/img823/2730/68134349.jpg

Ok now you have your video secuence in DDS, the element dynamic and the XML for your raf so you are ready to go for the fun part, the PSJS that will contain the parameters of the animation of the frames (animated part) and the parameters for the dynamic element of the theme.

Let’s start with the frame secuence in the PSJS :

Check this picture :

http://img843.imageshack.us/img843/2350/1imgc.jpg

That’s is the code for the “frames” and that part is the “video” element that will run in the back like a little short secuence of action. What you need to know or what you need to change there :

a. The number of frames used that will be a maximum of 71 frames and in a resolution of 800x456 in a dds format like always you do when you create an animated theme.

b. The second and most important part is the animation speed. You can change the animation speed in : Var Duration = 0.09 ; If you want to slow the animation try values like : 0.100, 0.110, 0.120,, 0.130, etc or if you want to speed up the animation on the video secuence try values : 0.09, 0.08, 0.07, 0.06, etc.

c. Do not touch nothing more there.

d.(Opcional) If you want to use a static image only as a backgrownd remove those parameters of the code that are the animated secuense of frames and leave only the code for the dynamic element.

Ok its time to know what to do and what is the code that is needed for the dynamic elements.

**Again if you don’t know exactly what you are doing and you can’t test the theme with “ raf_loader.p3t” be carefull because any
code or even any bad .dae can cause a XML-Brick. Its easy to fix but don’t puch it. **

If you see in the PSJS example of this theme there are only inside that PSJS a code for the elements we need animated or Dynamic. If one object or image is not animated you don’t have to write that piece of code to add that there. Example if you want one “Image” backgrownd static you have to write that code in the XML but not inside the PSJS because is not animated or dynamic.
What you need to write there is all the parameters for the dynamic elements nothing more, including the animation secuence as you saw before. The PSJS deals with the parameters of the animation nothing more. We will be working with the element rotating code according to our movements.

Check this picture :

http://img594.imageshack.us/img594/1341/35290176.png

This is the only code you have to write there for the dynamic rotating element. You can add more element if you want there but in this example will be using only one.

What you need to know or what you will need to change will be parameters or values for the start and end of the animation, parameters for the movements of our objects in x,y,z, speed animation on the objects, etc.

For example in Function cube_rotation :

1. Changes in the “X” parameter will move an object horizonlally.
2. Changes in the “Y” parameter will move an object Vertically.
3. Changes in the “Z” parameter will move an object Front or Back (3D movements).

**Remember for localization of the images in the XMB use the XML and for the parameters of the animation in the scene “space” use the PSJS. This process is an try an a fail process so you have to test a few times to get the animation desire **

For the speed of movement you have to deal with the “1” that you can see for example changing it at the same number tree times. If you see there are for logo 1 in position start, in position end and in interval timer. So you can change it to 2 or 3,… for example but you have to do it with the same number if you choose 4 you will have to put the four in the 3 parameters.

Anyway I leave you in the pack the most important files I used to create this Skyrim theme, so you can play with those files but following rules and responsibility with the files. As I said before if you don’t know what youre doing don’t play with the codes. And if you don’t know what yor doing don’t add or delete parameters for safty reasons.

The final step on this tutorial once you have all ready is the compilation and the only thing you have to do is copy all those elements DDS, DAE, js and XML in the same folder that you have the raf tools and other DDS "frames" for your animated secuence, etc and compile the theme like you always do. Or simply drag an drop the XML to the folder that you have all the raf tools.

1. raf_anim.exe
2. raf_compiler.exe
3. raf_compiler.inf
4. raf_geom.exe
5. raf_pack.exe
6. raf_script.exe
7. dds2gtf.exe

Remember cero spaces in the name of the folders of any tool or file folder. At end you will get your ".raf" file that is your backgrownd dynamic. Copy that file (raf) to your theme folder where you have the icons, xml for the p3t, etc and rename it acording to the name you have for that file in the XML for your .p3t. Finally compile your theme as always you do.

The final product will look like this :

My next tutorial will be how to create a dynamic theme without writing the elements dynamics in a PSJS.