[Tutorial] How to create an animated+dynamic theme part 2 of X.|PS3 Themes|Forum|PS3 Themes

[Tutorial] How to create an animated+dynamic theme part 2 of X.

Well in this tutorial I will try to show you how to create an animated+dynamic theme. This method is considered advanced if you not know nothing about the creation of a theme using the raf tools is time to stop reading this and learn the basics first like : How to create single static themes, slideshows, animated, animated + static images and then try this. It’s a little complicated for a beginner and is a little "risky". Once you learn all the basics you will be prepared to create and edit files without problems. We need to start the learning process by the basics to finally achive a theme animated with some dynamic components inside of it. I’m not a pro making tutorials and my English is not the best but I will try to do my best. I told to “ uLtRaMa6nEt1c” that I will be giving this information, so I'm feel like in a duty to do this job in some way like I said before. Sorry “ uLtRaMa6nEt1c” for the late response but my free time it’s a little complicated.

** I insist that this is a little complicated for a noob and you can get semi-brick or get a XML-brick in your console if you don’t know what your doing. So if you don’t know nothing please stop reading and don’t try to modify the files provided by this tutorial or use any file. 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, if any is caused. In scence no body have to have problems if is do with patient and responsability. This can cause semi-bricks in noobs hands and for more than a semi-brick is very easy to fix no one will want to pass from a situation like that. If you decide to try and modify an get a semi-brick go to recovery menu to repair your mistake.**

This tutorial is more extensive than the previous because is consisted of the part 1 plus the new material. If you follow the first tutorial you will see some steps again. So be patient my young padawan and let start with a simple exersise :

http://imageshack.us/scaled/landing/11/waxonwax.jpg

Ok now …..

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 pluggings you can do the job.
2- NVIDIA DDS pluggins for Photoshop to save the images bgs to dds (DXT1 RGB 4 bpp | no alpha)
https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop
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/?g617aroisaqd54f

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

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

Once you learn how to create an animated theme and the last variation you can continue with the process :

Ok; To create a theme animated with some dynamic elements on 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 all the individual pictures or images in Photoshop to create an alpha channel in all those individual images one by one. This part is important and you need to do this because if you not create the alpha channel in the images or in any static element that you are using that’s element will not be seen in the XMB. Finally once you create the alpha channel for your images 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 sizes for all the individual images in “cm” because you will need that info. later to finally create the dae file (model) of all the individual images with the DCC application in this case using Blender.
Once you have all the static images 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 a theme like the theme created by Glowball for Hitman because is the perfect choice to show this process and because I want a version of this theme for me without the lazer and with different animations in the logos.
Well I will use tree images to be exact as my static images in this example and those parts would be :

1. One to be complement to the animation of the backgrownd.
2. Other will be one part of the logo.
3. And finally the other part of the logo.

I will show you how to build two dae files for the two parts of the logo, because always will be the same process. Nothing will change and the only different thing here always will be images, locations, sizes, etc. And for the backgrownd 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.

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 before like the creation of the DDS files or the alpha channel that you can get it in the Glowball 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 files and the lines added for the Hitman theme example with the added elements dynamics logo and logo 2. The first one is the backgrownd an image with resolution 1920x1080 and is static so is only coded/writed in the file XML only and not in the PSJS.

http://img819.imageshack.us/img819/1253/xmlforraf.png

**You can find the XML and JS used for this in the pack that contain the files needed in the six dot in the tools needed.**

Well as you can see in the picture of the XML for the raf I added tree additional elements there according to my static elements that I want animate or use as dynamic element : Image for the complement of the backgrownd are static, logo and logo 2 are dynamic. If you want to add more elements there with that you can get the idea because will be the same. You have to follow a few restrictions only that I will explain at end. If you see in the logo and logo 2 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.**
// 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

You have now to change the number of frames used with a maximum of 71 images with a resolution of 800x456. For example if you have 30 frames you will have to write 30 times the code for your images. The same thing with 50 or 60 frames. If you follows the prerequisites and you know how to create animated themes you understand perfectly what I said. If not its time to go back and learn that.

Ok now you have your video secuence in DDS, the bg image, the DDS logo, logo 2 and the XML for your raf 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 parameters for the dynamic elements of the theme logo and logo 2.
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.

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 all 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 our “Image” backgrownd is a component static and 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 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 logo and logo 2 code according to our movements in the XML.

Check this picture :

http://img688.imageshack.us/img688/6181/37867285.jpg

This is the only code you have to write there for the logo and logo 2.

What you need to know or what you will need to change for your own creations is changes 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 logo_position :

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 XML 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 “3” that you can see in the logo for example changing it at the same number tree times. If you see there are for logo 3 in position start, in position end and in interval timer. So you can change it to 4 or 5 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 the Hitman variation theme, so you can play with 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 and XML in the same folder that you have the raf tools and other DDS "frames" for your animated secuence, .js "script, etc and compile the theme like you always do. Or simply drag an drop the XML to the folder that you have of the raf tools. Remember cero spaces in the name of the folders of any tool or file folder. The final product will look like this :

Theme recreated to be used in this part 2 of the tutorial for the Dynamic-Animated method. Created following the same concept used in the first tutorial based in a Hitman theme, the only difference this time for the new HD trilogy game.

Icons created by Glowball.

My next tutorial will be How to create a dynamic theme with zoom effect like my transformer theme :

I'm working right now with the Day/Night effect let see if I can do it.