Website Pet Builder

- Manual -

Display messages, notifications or various forms of animations using a tiny virtual pet.
Can act as a Guide or as a notification tool.

CONTENT

1. MAIN FEATURES
2. HOW IT WORKS
3. BUILD PET:

1. New Pet
2. New Animation
3. New Frame
4. Add Elements
5. Add an Image
6. Update the Element Content

4. ADD MESSAGES

1. Simple Messages
2. Guide Mode Message

5. GUIDE MODE

1. Create a Guide Animation

6. ADVANCED BEHAVIOUR
7. IMPORT DEFAULT PRESETS
8. IMPORT / EXPORT PET CODE
9. NOTES

1.Main Features

• Simple Messages - add the messages you wish to show to your visitors.
• Pet Builder & Animator - create and add animations for your pet using a special build editor.
• Presets, save & import - comes with default presets and support for importing and saving new ones.
• Site Guide - Make the pet act as a Guide by pointing page elements and display messages or/and animations to present or highlight site features.
• Message & Animations navigation - Menu that lets you play all the messages or special animations the Pet has.
• Animations Types - animations that can be set to be used depending on pet status

• Stationed
• Walking
• User Drag
• Talking
• Special*

• Various options - to customize the pet behaviour

2.HOW IT WORKS

The Pet content uses “Animations” that contain “Frames” which can contain elements that can be added or edited in order to create animations.

Every Animation can have one or more Frames.

Every Frame can have elements that can be positioned, scaled or have custom color & transparency.

Elements can be represented by images, texts, characters or font icons. Font Awesome is used to provide a vast library of icons.

To edit an element you must first select it. After that you will see controls near it.

The Pet can have any number of animations. The animations you provide can be set to be displayed when pet goes in various modes - talks, walks, is dragged or is stationed.

3.BUILD a PET

3.1. New Pet

To add a pet icon on the preset box, you need to add an image path in the input field that appears when you Hover the mouse over the image icon near the photo area.

3.2. New Animation

3.3. New Frame

3.4. New Element

You can add a shape using the shapes present in the Font Awesome icons gallery OR create elements using images, texts or html code.

3.5.Add an Image

To add an image you need to add an image path in the input area then click the ADD button.

The images you add are good to be in png or gif format so you can have a transparent background. JPG images don’t have transparency.

Transparent png image used for Doge:

3.6 Update the Element Content

Sometimes you will probably need to update the images or the content of an element but you already create the animations with it. To replace the instance of that element in all the places is used… you can use the “Replace Selected Element” option.

4.Messages

The pet has the option to show simple messages.

Any message you add in the Messages Area will be displayed by the pet when the probability is met. The messages will be shown in order and looped.

The users can also see those messages by navigating them using the Mini Menu that appears at when you hover the mouse on the Pet.

The messages that are present in the “Special” animations are handled differently. Those will appear only when the Special animation starts.

5.Guide Mode - Special Animations

The Pet can have “Special Animations” that can be played at special times. This feature lets the Pet act as a Guide for your website. See the “Boy - Guide” preset to see how it works.

A “Special Animation” features:

• Can target a page element

• If the pet finds page element you specified for that animation, it will go near that element and play that animation.

• It appears as animation in the Pet menu - when you hover over the pet.
• Has the option to be played anyway, even if you don’t set a target.
• Has the option to show a message when it starts playing.

Create a Guide Animation - Special Animation

STEP 1: Make an Animation to be “Special”

To create a Guide Animation you need to create a new animation and set it to be “Special” from the Animation Type Selector. This will make the Pet know that this animation has special features.

STEP 2: Add a target element.

To set what element needs to be targeted by the Special animation, you need to provide the #ID of that element or a text that is contained in that element in the field “Target Page Element”

When the Pet reaches near the page element, it can be set to display a message or an animation.

6.Advanced Behaviour

Use the “Advanced Options” area to set the behaviour of the Pet depending on how you need to behave. There you will find description for every option.

• Starting position
• Walk area
• Jump ability
• Visibility depending on website page
• Etc

7.Import Default Presets

To import the presets that come with the plugin, you must use the Wordpress Importer from admin area and point to the file “website_pet_builder.presets.xml” you will find in the pack you receive with the plugin.

You can import the default presets if you delete or you want to get the default look for the pets.

8.Import/Export Code

You can see the generated code used for the pet in this area.

Possible Use:

• Export the code

• Copy it from here and save it where you need

• Import code

• Import the code generated in other places or by other people.
• After you paste the new code here, click “IMPORT CODE” button.

9.Notes

• This plugin is available only on CodeCanyon.net as part of wickedpixel’s portfolio: http://codecanyon.net/user/wickedpixel/portfolio?ref=wickedpixel 
• Any questions questions related to support need to be filled with the help of the contact form that is present on this page: http://codecanyon.net/user/wickedpixel#message
• For simple questions you have the Comments area in the Item’s page on codecanyon.net
• Updates - Any updates on this file will be announced on the item’s page