License:
Ok so derivative work of this tutorial or of the P3tz development is copyright to the original author of P3tz and this tutorial.
For more information about copyright and what this means you should look it up for your jurisdiction on the internet – use FireFox not ie because ie is bad.
Introduction:
This tutorial is a step by step guide to creating a new Pet type to provide on your site. I also encourage you to share your creations on www.p3tz.com that way we can all trade and share and have a huge variety of P3tz for our members to choose from! Please read every step in order, if you skip something it may not work properly.
To create P3tz you need to have Macromedia Flash, version MX 7 or above, installed and running. If you need more information about the studio suite visit www.macromedia.com.
I will be detailing how to create a decent looking pet, by my standards, for P3tz. I do assume you have some knowledge of the pen tool, the brush tool, the fill can tool, the select tool, the scale and transform tool, and some copy and paste skills. If you don’t then you should try some very basic Flash tutorials, I recommend trying www.google.com. I will not be detailing advanced changes or altering the animated sequences. I will guide you through quickly editing the symbols and you can apply the same technique to all the animation files. However, I won't be detailing how to edit the battle animations. Basicly the same technique to edit the main P3tz can be applied to easily create new battle animations. I will show you how to use the copy and paste to replace some symbols in the library which is useful for quickly editing the Cast/Spell/Bot animations.
Let Us Begin:
First of all you will have to unzip the Development Kit archive.
It’s a good idea to choose a name now. I have chosen the name Woof.
Rename the freshly unzipped folder to reflect the name. In my case I renamed it woof.
Open the folder and open the Flash folder. We are going to start with the main P3tz image. This is displayed pretty much everywhere the Pet appears in P3tz. So open the petz folder. You will see a file thukat.fla rename the file to reflect the new name. In my case it is renamed to woof.fla. Now open that file in Flash by double clicking the icon.
Ok so Flash loads up. The screen may seem a little daunting if you aren't used to Flash. The program is pretty hard to get used to, fear not, since you are using a template you don’t need to understand the program fully. However, you will need to know the highlighted stuff in the following screenshot as I will be referring to the panels later in the tutorial by the name I give them in figure 1.
Figure 1:
If your Flash layout isn't looking like this then:
In the Window menu, expand the Workspace Layout submenu, and click Default.
Now you may need to expand the Color panel on the right by clicking the Black Arrow next to the panel title.
Dr Frankenstein:
Ok so now we need to lock the Layers we aren't going to use (1).
Then select the Frame in the Timeline that we are going to edit (2).
Then double click the Instance on the Stage to open it for editing (3).
These steps are shown in figure 2.
When you finish the steps your screen should look like figure 3. If it doesn't try again!
Figure 2:
Follow the steps in order 1, 2, 3.
Figure 3:
This is the creative bit. I can't tell you how to draw a new pet type so your on your own for this bit!
Play God:
Ok so now for the fun stuff. Use the Tools to draw a new pet. If you have a pen tablet then it is really easy to use that with either the brush or the pen to draw an outline. You will notice that drawing works slightly differently in Flash. Flash is a vector based program so image data is saved as mathematical equasions rather than pixels. That is why the file size is so much better. The effect is usually a stylized image. Personally I like the whole vector thing - especially for cartoons. You may find you have to select and delete the image already there. If you really need a guide. Create a new Layer above the existing one. Lock the existing layer and start drawing on the new layer. When you have finished. Simply delete the layer you don't want.
There is alot of scope to add some animation by making use of either symbols from the Library or by using the timeline. There is also the opportunity to use ActionScript to do some clever stuff. You can also use aditional layers here. Do Not just import a jpg, bmp or gif. This will create a horrible pet, especially for animation. Plus you will be wasting alot of the capabilities of vector animation in Flash.
Make sure you don't draw the eyes or facial features yet, unless your creation has a snout in which case you should draw the snout now!
Remember this is only the Base. Your base should be similar to figure 4 although it should be a different creature!
Figure 4:
After taking this screen shot I fixed the sticky out bit on the face because it looked odd!
Maybe it's Maybeline:
Ok so by now I am hoping that you are getting more used to how I have structured the file. It's relatively simple and easy to modify.
For the next step return to the Scene 1 Stage.
To do this double click with the selector tool on some empty area in the Stage.
Now in the Layer panel Lock the base layer you just finished.
Then Unlock the status layer folder.
Now click the frame in the timeline of the Feyes layer.
You will see a blue outline around the eyes on the stage. Double click the eyes on the stage to edit them.
It's easiest just to reposition and maybe rescale the eye symbols as shown in figure 5. If you feel adventurous double click on an eye to edit the eye animation.
Figure 5:
The scale and transform tool may be useful here!
Ground Hog Day:
Return to Scene 1 again by double clicking some blank area on the stage.
Now Lock the Feyes layer and unlock the Meyes layer.
Click the frame in the timeline.
Then double click the eyes* which are outlined on the stage to edit them. *The eyes are actually transparent on the main stage but you can still double click them, when they are being edited they will be visible.
Edit them as illustrated in figure 6. They should be changed in the same way as the Female eyes.
Figure 6:
Again the scale and transform tool is useful here.
De Ja Vous:
Again return to Scene 1 by double clicking some blank area on the stage.
Now Lock the Meyes layer and unlock the StatusOK layer.
Click the frame in the timeline.
Then double click the face, which will be outlined, on the stage to edit it.
Edit the happy face as I have in figure 7.
Figure 7:
That nose is cute!
Almost Done:
Ok so it is a little repetitive. But you must follow the same steps to redo each of the Status Layers so that they fit the new Pet.
There are only six more to go!
Baby
StatusEW
StatusOW
StatusET
good
evil
It is good practice to use the Layer Lock function as shown in figure 8.
Figure 8:
The end is near!
Finalise:
By now you should have edited all the status layers and the base. And your new pet should be looking pretty good.
Now you just need to Export the movie.
In the File menu, open the Export submenu, and select Export Movie... as shown in figure 9.
Save the file in the same folder as the .fla but as a .swf file. I used woof.swf for mine.
Then click save and make the export options on the popup match those shown in figure 10.
Figure 9:
Yay at last!
Figure 10:
Ka Blam!
Testing:
Minimise Flash and open the folder you just exported the movie to. it should have been in the petz/ folder.
Now open the swf in FireFox, or if you don't have FireFox download FireFox and open the swf in FireFox.
Cool... You can change the address bar to test the different status' the bit you change is highlighted in figure 11.
Here are some good configs:
Easy Bit:
Ok now then just to replace the base in the bots, battle/cast, and battle/spell folders.
Then you need to edit the Library Symbols in the battle/attack, battle/defend, and battle/miss folders. Then you have finished a new pet type!
To finish this tutorial I will explain how to replace the Bot. Repeat the exact same steps on the cast and spell. In the spell file you will probably need to edit some spell effects in the same way that the status layers where edited earlier on.
First rename the bots/thukat.fla to your new pet name (woof.fla) and open it up in Flash.
You should have two tabs for the two flash files that are open. Go to the first tab - the main animation we edited above.
Follow these steps:
Lock all the layers by clicking the padlock in the Layers panel.
Click the select tool (1)
Unlock the StatusOK, Meyes, and base Layer (2)
Click (3) and drag to (4) then release. To select the unlocked layers.
Press Ctrl+C or Edit menu, then Copy. These steps are shown in figure 12.
Figure 12:
You should have two Flash files open. *Notice the tab bar*
Computers are cool:
Ok so now the stuff is copied to clipboard so select the other flash file tab.
Click on the stage and press Ctrl+V or Edit menu, then Paste.
Click Replace on the alert as in figure 13.
When it is pasted press the Delete key or the Backspace key.
Your screen should look like figure 14. Export the movie as an swf in the same way you did in figure 9, with the same settings as figure 10.
Figure 13:
Switch to the other Tab in the tab bar first!
Figure 14:
Simple!
End Of The Line:
Yes you still have a bit more to do. However, if you have got to this stage you should have the neccessary knowledge to finish off unaided.
If you get stuck anywhere then refer back to this tutorial.
If you are really stuck somewhere you are welcome to post questions about P3tz Packz Development on the P3tz website at: www.p3tz.com.
Have fun!
