Advanced avatar (Flash tutorial): Difference between revisions

From Whirled Club Wiki
Jump to navigation Jump to search
No edit summary
(Replaced content with "To be fixed")
Tag: Replaced
 
Line 1: Line 1:
{{Infobox tutorial
To be fixed
|type=Flash
|difficulty=Advanced
|description=Learn how to add actions to the avatar created from the previous tutorial.
|requirements=[[Image:Icon-Flash.png|20px]] [[Adobe Flash CS3]], Whirled SDK
|other=Previous tutorial: [[Simple avatar (Flash tutorial)]]<br>
Next tutorials: [[Remixable avatar (Flash tutorial)]], [[Color remixable avatar (Flash tutorial)]]
|item=avatar
}}
[[Image:Icon-highlighted-avatar.png|left]]If you have never created an avatar for Whirled, you probably want to look into our [[Simple avatar (Flash tutorial)]]. If you feel sufficiently experienced, feel free to move forward with the more advanced steps below.  After becoming familiar with this tutorial, move on to the [[Remixable avatar (Flash tutorial)]].
{{clearleft}}
 
== Basic Settings ==
You can configure your basic document properties under '''Modify → Document...'''.
*'''Dimensions''': An avatar may be any size under the maximum of 600(wide)x450(tall) pixels.
*'''Frame rate''': All Whirled avatars must be 30 frames per second.
*'''Background color''': You can use any background color you like, but it won't appear in Whirled.
 
== Avatar Scenes ==
An avatar's actions and states are all controlled by scenes and the names you give them.  There's no code involved - just use the right naming convention, and Whirled will automatically incorporate your scenes into the avatar's menu of options.  Look at the examples in each category to see how scene naming defines what a scene does.
*All scenes should depict the avatar '''facing left'''.  Whirled will handle flipping the avatar if it faces the other way.
*All scenes run exactly their frame duration.  If you're bringing over an avatar from the '''old method''', you'll have to either break your movieclips out into the scene, or just make your scenes as long as the movieclips they hold.
 
=== States ===
States are avatar behaviors that persist until you change them.  If you walk or play an action, the avatar will return to the selected state.  If someone else enters the room, she will see your avatar in the same state that you see.
*State names are case-sensitive and '''must be capitalized'''.
*States automatically loop.
 
Some example states:
*state_Default
*state_Dancing
*state_Sitting
*state_Fighting
 
=== Walking ===
Walking scenes are triggered whenever your avatar traverses space in the room.  Walking scenes can be associated with specific states, in order to have unique walks for various states.  If you have a state with no associated walk, Whirled will just move your avatar without the walk.
 
Some example walks:
*state_Default_walking
*state_Dancing_walking
*state_Fighting_walking
 
=== Idle ===
Idle scenes are triggered when you are not active for several minutes in a row.  Idle scenes can be associated with specific states and should be named state_StateName_sleeping (where StateName is the name of the associated state).  If you have a state with no associated idle state, Whirled will show the avatar's current state.  In either case, animated ZZZs will be shown coming out of the top of the avatar. 
 
Some example idles:
*state_Default_sleeping
*state_Sitting_sleeping
 
=== Actions ===
Actions are avatar behaviors that play once and then return to the current state.  Actions are once-off animations that don't persist.  Whirled assumes that actions should be run from the Default state.  If you want an action to run straight from a non-default state, it will need its own transition.
 
Some example actions:
*action_Laugh
*action_Attack
*action_Gasp
 
[[Image:transitions_example.gif|right|frame|The upper chimp jumps from standing to walking.  The lower chimp uses transitions to blend the change.]]
 
=== Transitions ===
Transitions are special scenes that smooth the change from one scene (state, walk, or action) to another.  They will be played through once before beginning the scene called.  For example, if the player decides to start dancing, Whirled will play Default_to_Dancing once through before beginning state_Dancing.
 
You don't need transitions for all or even any of your states.  Just transition the ones you want.  However, note that the naming convention is different for walking transitions than it is for state or action transitions.
 
Some example transitions:
*Transitioning to and from a walk:
**state_Default_towalking
**state_Default_fromwalking
*Transitioning between two states:
**Default_to_Dancing
**Dancing_to_Default
*Transitioning to and from an action:
**Default_to_Attack
**Attack_to_Default
**Dancing_to_Attack
**Attack_to_Dancing
*Transitioning to and from idle
**state_Default_tosleeping
**state_Default_fromsleeping
 
=== Incidentals ===
Sometimes you want a state to run normally most of the time, but sometimes to play an alternate animation.  For instance, in an idle animation, you want the avatar to yawn every so often.  Or you may want your dance state to mix up three different looping moves.  These are called incidentals, and can be handled with scene naming, just like other animations.  Essentially, you split up the state into multiple numbered versions (01, 02, 03...) and then assign each numbered version a percent probability (:05, :80, :66...) so that the versions' probabilities add up to 100.  When a given scene is finished, Whirled will randomly choose the next version of the state to be played, based on these probabilities.
 
Some example incidentals:
*A standard Default with an occasional variation:
**state_Default_01:95
**state_Default_02:05
*A Dance that mixes three different moves:
**state_Dance_01:34
**state_Dance_02:33
**state_Dance_03:33
 
== Avatar Code ==
Just as a typical Whirled avatar is built in [[Adobe Flash CS3]], the code to handle avatar events is written in Flash's ActionScript.  Moving beyond the basic avatar template doesn't require complex code writing.  Setting up new actions for your avatar is usually as easy as cut and paste.
#If you haven't yet, download and setup the [[Whirled SDK]].
 
[[Image:AS3_preferences.png|right|frame|Choose '''ActionScript''', then '''ActionScript 3.0 Settings...''']]
 
=== Required ActionScripts ===
Whirled avatars require some ActionScript to communicate with Whirled's servers and let each other know what's going on.  The basic code tells the avatar which way it's facing and whether or not it's walking.  This avatar foundation code is a combination of imported scripts from the [[Whirled SDK]] and a few lines of ActionScript in the main scene.  In the template we already did this for you.  If you make an avatar from scratch, or open the source file for someone else's avatar, you'll need a basic understanding of how to set it up yourself.
 
==== Classpaths to Import Whirled's Server Code ====
{{:Whirled SDK/Classpaths}}
 
==== Basic ActionScript for the Main Scene ====
The Main scene of your avatar file should contain all the code for handling avatar behavior in Whirled.  For a basic avatar, this is a simple copy and paste.
 
#Select the scene '''main'''.  If this is a new file, double-click Scene 1 to rename it main.
#Open the '''Actions''' window (F9).
#Paste in this code:
<actionscript>import flash.events.Event;
import com.whirled.AvatarControl;

Latest revision as of 16:53, 26 August 2018

To be fixed

Retrieved from "https://wiki.whirled.club/index.php?title=Advanced_avatar_(Flash_tutorial)&oldid=2074"