Create avatars - Revision history

Whirled vox: Text replacement - "<" to "<"

2018-09-05T20:28:56Z

Text replacement - "<" to "<"

Whirled vox: Text replacement - """ to """

2018-09-05T18:08:44Z

Text replacement - """ to """

← Older revision		Revision as of 18:08, 5 September 2018
Line 1:		Line 1:
	{{TOCright}}		{{TOCright}}
	[[Image:Icon-highlighted-avatar.png\|left]] Whirled avatars are animated characters that represent the personality, mood or style of the owner to the Whirled at large. Custom avatars are easy to make with the right tools, and let you create a truly unique appearance for yourself or sell your creations to the eager masses. Follow the tutorials below for both step-by-step guides to the basics of avatar creation and helpful techniques for more advanced creators. Some avatars have ~~"~~actions~~"~~ and ~~"~~states~~"~~ that make chatting more fun!		[[Image:Icon-highlighted-avatar.png\|left]] Whirled avatars are animated characters that represent the personality, mood or style of the owner to the Whirled at large. Custom avatars are easy to make with the right tools, and let you create a truly unique appearance for yourself or sell your creations to the eager masses. Follow the tutorials below for both step-by-step guides to the basics of avatar creation and helpful techniques for more advanced creators. Some avatars have "actions" and "states" that make chatting more fun!
	{{clearleft}}		{{clearleft}}

Line 9:		Line 9:
	[[Adobe Flash CS3]] is the tool that Three Rings' Whirled art department uses to make avatars. You can work from our pre-coded templates or create entire avatars from scratch. Adobe Flash CS4/CS5 is a newer version of the software, and can also be used. ([http://www.adobe.com/products/flash/ Adobe's Flash page])		[[Adobe Flash CS3]] is the tool that Three Rings' Whirled art department uses to make avatars. You can work from our pre-coded templates or create entire avatars from scratch. Adobe Flash CS4/CS5 is a newer version of the software, and can also be used. ([http://www.adobe.com/products/flash/ Adobe's Flash page])

	{\| border=0 width=~~"~~180px~~"~~ cellpadding=4 cellspacing=4 style=~~"~~border-collapse:collapse; margin:5em 5em 1em 1em~~"~~ style=~~"~~font-size:100%; text-align:center~~"~~		{\| border=0 width="180px" cellpadding=4 cellspacing=4 style="border-collapse:collapse; margin:5em 5em 1em 1em" style="font-size:100%; text-align:center"
	\|-		\|-
	\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_tutorial_icon.png\|link=http://wiki.whirled.com/Simple_avatar_(Flash_tutorial)}} [[Simple avatar (Flash tutorial)\| Simple<br>Tutorial]]		\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_tutorial_icon.png\|link=http://wiki.whirled.com/Simple_avatar_(Flash_tutorial)}} [[Simple avatar (Flash tutorial)\| Simple<br>Tutorial]]
Line 24:		Line 24:

	{\|		{\|
	\|- align=~~"~~center~~"~~		\|- align="center"
	\|{{extnavimg\|xsize=60\|ysize=60\|image=icon_rooster.png\|link=http://wiki.whirled.com/Simple_avatar_(ActionScript_tutorial)}}[[simple avatar (ActionScript tutorial)\| Simple AS3<br>Avatar Tutorial]]		\|{{extnavimg\|xsize=60\|ysize=60\|image=icon_rooster.png\|link=http://wiki.whirled.com/Simple_avatar_(ActionScript_tutorial)}}[[simple avatar (ActionScript tutorial)\| Simple AS3<br>Avatar Tutorial]]
	\|}		\|}
Line 34:		Line 34:

	{\| width=100%		{\| width=100%
	\|- valign=~~"~~top~~"~~		\|- valign="top"
	\|\|		\|\|

Whirled vox: Text replacement - ">" to ">"

2018-09-04T05:53:38Z

Text replacement - ">" to ">"

Dragawn: Created page with "{{TOCright}} left Whirled avatars are animated characters that represent the personality, mood or style of the owner to the Whirled at la..."

2018-08-25T18:03:42Z

Created page with "{{TOCright}} left Whirled avatars are animated characters that represent the personality, mood or style of the owner to the Whirled at la..."

New page

{{TOCright}}
[[Image:Icon-highlighted-avatar.png|left]] Whirled avatars are animated characters that represent the personality, mood or style of the owner to the Whirled at large. Custom avatars are easy to make with the right tools, and let you create a truly unique appearance for yourself or sell your creations to the eager masses. Follow the tutorials below for both step-by-step guides to the basics of avatar creation and helpful techniques for more advanced creators. Some avatars have "actions" and "states" that make chatting more fun!
{{clearleft}}

== Getting Started ==
The simplest way to make your own unique avatar is to buy a [[remixable item|remixable avatar]]. If you want to try your hand at some programming, you can make avatars either in [[Adobe Flash CS3]] or in standalone [[ActionScript 3.0]].

===[[Image:Icon-Flash.png]] Adobe Flash CS3/CS4/CS5===
[[Adobe Flash CS3]] is the tool that Three Rings' Whirled art department uses to make avatars. You can work from our pre-coded templates or create entire avatars from scratch. Adobe Flash CS4/CS5 is a newer version of the software, and can also be used. ([http://www.adobe.com/products/flash/ Adobe's Flash page])

{| border=0 width="180px" cellpadding=4 cellspacing=4 style="border-collapse:collapse; margin:5em 5em 1em 1em" style="font-size:100%; text-align:center"
|-
|{{extnavimg|xsize=60|ysize=60|image=avatar_tutorial_icon.png|link=http://wiki.whirled.com/Simple_avatar_(Flash_tutorial)}} [[Simple avatar (Flash tutorial)| Simple Tutorial]]
|{{extnavimg|xsize=60|ysize=60|image=avatar_advanced_icon.png|link=http://wiki.whirled.com/Advanced_avatar_(Flash_tutorial)}} [[Advanced avatar (Flash tutorial)| Advanced Techniques]]
|{{extnavimg|xsize=60|ysize=60|image=avatar_advanced_icon.png|link=http://wiki.whirled.com/Configurable_avatar_(Flash_tutorial)}} [[Configurable avatar (Flash tutorial)| Configuring Techniques]]
|{{extnavimg|xsize=60|ysize=60|image=avatar_advanced_icon.png|link=http://wiki.whirled.com/Remixable_avatar_(Flash_tutorial)}} [[Remixable avatar (Flash tutorial)| Remixing Techniques]]
|{{extnavimg|xsize=60|ysize=60|image=avatar_advanced_icon.png|link=http://wiki.whirled.com/Custom_Animation}} [[Custom Animation| Freestyle Techniques]]
|{{extnavimg|xsize=60|ysize=60|image=avatar_advanced_icon.png|http://wiki.whirled.com/Multi-directional_avatar_(Flash_tutorial)}} [[Multi-directional avatar (Flash tutorial)| Multi-directional]]
|}

===[[Image:Icon-Programming.png]] ActionScript 3.0===

Standalone [[ActionScript 3.0]] is targeted more at programmers. But don't be scared, just follow our tutorial! (A major plus of AS3 is that it's FREE!)

{|
|- align="center"
|{{extnavimg|xsize=60|ysize=60|image=icon_rooster.png|link=http://wiki.whirled.com/Simple_avatar_(ActionScript_tutorial)}}[[simple avatar (ActionScript tutorial)| Simple AS3 Avatar Tutorial]]
|}

*[[AS3 avatar notes|Notes on AS3 Avatars]]

== Code Examples ==
Learning by example is the easiest way, so make sure to check out our many avatar examples in our [http://code.threerings.net/svn/whirled/trunk/projects/avatars/ SVN server]. Some of these are created in Adobe Flash CS3 and some of these are created with standalone ActionScript 3.0.

{| width=100%
|- valign="top"
||

== Documentation ==
Whirled APIs
* [http://www.whirled.com/code/asdocs/ Whirled ASdocs] which contains the all important [http://www.whirled.com/code/asdocs/com/whirled/AvatarControl.html AvatarControl]
* [[Avatar creation FAQ | Avatar creation FAQ ]]

AS3 References
* http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/
* http://labs.adobe.com/wiki/index.php/ActionScript_3

There are also [http://www.amazon.com/s?url=search-alias%3Daps&field-keywords=actionscript&x=0&y=0 numerous paper books] available on the subject.
||
== Tutorials ==

* [[Simple game (Flash tutorial)|Using Adobe Flash CS3 to build games]]
* [[Setting up your programming environment]]
* [[Hello Whirled|Hello Whirled: making your first program in AS3]]
* [[:Category:Avatar tutorials|Avatar tutorials]]

== Other Useful Information ==
* [[List of bases‎]] - use various base files as resources
* [[List of AVRG Avatar States]] - create avatars compatible with your favorite [[AVR game]]s!
* {{groups|Whirled Builders|11}}
* {{groups|Whirled Coders|79}}
* [http://obaba.deviantart.com/art/Whirled-Avatar-Tutorial-138284785 Whirled Avatar Tutorial] on deviantART.com, by Obaba
* [[MovieClipBody.as]]
* [[Content_copying_and_derivation]] - Explains what materials by others you can and cannot use.
|}

==Upload!==
Once you are done creating an Avatar, you should upload it to Whirled!

{{:Upload/Avatar}}

==Sell!==
{{listing|avatar|avatars|Avatars|attribute}}

[[Category:Tutorials]][[Category:Avatar tutorials|*]]

← Older revision		Revision as of 20:28, 5 September 2018
Line 11:		Line 11:
	{\| border=0 width="180px" cellpadding=4 cellspacing=4 style="border-collapse:collapse; margin:5em 5em 1em 1em" style="font-size:100%; text-align:center"		{\| border=0 width="180px" cellpadding=4 cellspacing=4 style="border-collapse:collapse; margin:5em 5em 1em 1em" style="font-size:100%; text-align:center"
	\|-		\|-
	\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_tutorial_icon.png\|link=http://wiki.whirled.com/Simple_avatar_(Flash_tutorial)}} [[Simple avatar (Flash tutorial)\| Simple~~<~~br>Tutorial]]		\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_tutorial_icon.png\|link=http://wiki.whirled.com/Simple_avatar_(Flash_tutorial)}} [[Simple avatar (Flash tutorial)\| Simple<br>Tutorial]]
	\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|link=http://wiki.whirled.com/Advanced_avatar_(Flash_tutorial)}} [[Advanced avatar (Flash tutorial)\| Advanced~~<~~br>Techniques]]		\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|link=http://wiki.whirled.com/Advanced_avatar_(Flash_tutorial)}} [[Advanced avatar (Flash tutorial)\| Advanced<br>Techniques]]
	\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|link=http://wiki.whirled.com/Configurable_avatar_(Flash_tutorial)}} [[Configurable avatar (Flash tutorial)\| Configuring~~<~~br>Techniques]]		\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|link=http://wiki.whirled.com/Configurable_avatar_(Flash_tutorial)}} [[Configurable avatar (Flash tutorial)\| Configuring<br>Techniques]]
	\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|link=http://wiki.whirled.com/Remixable_avatar_(Flash_tutorial)}} [[Remixable avatar (Flash tutorial)\| Remixing~~<~~br>Techniques]]		\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|link=http://wiki.whirled.com/Remixable_avatar_(Flash_tutorial)}} [[Remixable avatar (Flash tutorial)\| Remixing<br>Techniques]]
	\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|link=http://wiki.whirled.com/Custom_Animation}} [[Custom Animation\| Freestyle~~<~~br>Techniques]]		\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|link=http://wiki.whirled.com/Custom_Animation}} [[Custom Animation\| Freestyle<br>Techniques]]
	\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|http://wiki.whirled.com/Multi-directional_avatar_(Flash_tutorial)}} [[Multi-directional avatar (Flash tutorial)\| Multi-directional]]		\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|http://wiki.whirled.com/Multi-directional_avatar_(Flash_tutorial)}} [[Multi-directional avatar (Flash tutorial)\| Multi-directional]]
	\|}		\|}
Line 25:		Line 25:
	{\|		{\|
	\|- align="center"		\|- align="center"
	\|{{extnavimg\|xsize=60\|ysize=60\|image=icon_rooster.png\|link=http://wiki.whirled.com/Simple_avatar_(ActionScript_tutorial)}}[[simple avatar (ActionScript tutorial)\| Simple AS3~~<~~br>Avatar Tutorial]]		\|{{extnavimg\|xsize=60\|ysize=60\|image=icon_rooster.png\|link=http://wiki.whirled.com/Simple_avatar_(ActionScript_tutorial)}}[[simple avatar (ActionScript tutorial)\| Simple AS3<br>Avatar Tutorial]]
	\|}		\|}

Line 38:		Line 38:

	== Documentation ==		== Documentation ==
	~~<~~b>Whirled APIs~~<~~/b>		<b>Whirled APIs</b>
	* [http://www.whirled.com/code/asdocs/ Whirled ASdocs] which contains the all important [http://www.whirled.com/code/asdocs/com/whirled/AvatarControl.html AvatarControl]		* [http://www.whirled.com/code/asdocs/ Whirled ASdocs] which contains the all important [http://www.whirled.com/code/asdocs/com/whirled/AvatarControl.html AvatarControl]
	* [[Avatar creation FAQ \| Avatar creation FAQ ]]		* [[Avatar creation FAQ \| Avatar creation FAQ ]]

	~~<~~b>AS3 References~~<~~/b>		<b>AS3 References</b>
	* http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/		* http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/
	* http://labs.adobe.com/wiki/index.php/ActionScript_3		* http://labs.adobe.com/wiki/index.php/ActionScript_3

← Older revision		Revision as of 05:53, 4 September 2018
Line 11:		Line 11:
	{\| border=0 width="180px" cellpadding=4 cellspacing=4 style="border-collapse:collapse; margin:5em 5em 1em 1em" style="font-size:100%; text-align:center"		{\| border=0 width="180px" cellpadding=4 cellspacing=4 style="border-collapse:collapse; margin:5em 5em 1em 1em" style="font-size:100%; text-align:center"
	\|-		\|-
	\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_tutorial_icon.png\|link=http://wiki.whirled.com/Simple_avatar_(Flash_tutorial)}} [[Simple avatar (Flash tutorial)\| Simple<br~~>~~Tutorial]]		\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_tutorial_icon.png\|link=http://wiki.whirled.com/Simple_avatar_(Flash_tutorial)}} [[Simple avatar (Flash tutorial)\| Simple<br>Tutorial]]
	\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|link=http://wiki.whirled.com/Advanced_avatar_(Flash_tutorial)}} [[Advanced avatar (Flash tutorial)\| Advanced<br~~>~~Techniques]]		\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|link=http://wiki.whirled.com/Advanced_avatar_(Flash_tutorial)}} [[Advanced avatar (Flash tutorial)\| Advanced<br>Techniques]]
	\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|link=http://wiki.whirled.com/Configurable_avatar_(Flash_tutorial)}} [[Configurable avatar (Flash tutorial)\| Configuring<br~~>~~Techniques]]		\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|link=http://wiki.whirled.com/Configurable_avatar_(Flash_tutorial)}} [[Configurable avatar (Flash tutorial)\| Configuring<br>Techniques]]
	\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|link=http://wiki.whirled.com/Remixable_avatar_(Flash_tutorial)}} [[Remixable avatar (Flash tutorial)\| Remixing<br~~>~~Techniques]]		\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|link=http://wiki.whirled.com/Remixable_avatar_(Flash_tutorial)}} [[Remixable avatar (Flash tutorial)\| Remixing<br>Techniques]]
	\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|link=http://wiki.whirled.com/Custom_Animation}} [[Custom Animation\| Freestyle<br~~>~~Techniques]]		\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|link=http://wiki.whirled.com/Custom_Animation}} [[Custom Animation\| Freestyle<br>Techniques]]
	\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|http://wiki.whirled.com/Multi-directional_avatar_(Flash_tutorial)}} [[Multi-directional avatar (Flash tutorial)\| Multi-directional]]		\|{{extnavimg\|xsize=60\|ysize=60\|image=avatar_advanced_icon.png\|http://wiki.whirled.com/Multi-directional_avatar_(Flash_tutorial)}} [[Multi-directional avatar (Flash tutorial)\| Multi-directional]]
	\|}		\|}
Line 25:		Line 25:
	{\|		{\|
	\|- align="center"		\|- align="center"
	\|{{extnavimg\|xsize=60\|ysize=60\|image=icon_rooster.png\|link=http://wiki.whirled.com/Simple_avatar_(ActionScript_tutorial)}}[[simple avatar (ActionScript tutorial)\| Simple AS3<br~~>~~Avatar Tutorial]]		\|{{extnavimg\|xsize=60\|ysize=60\|image=icon_rooster.png\|link=http://wiki.whirled.com/Simple_avatar_(ActionScript_tutorial)}}[[simple avatar (ActionScript tutorial)\| Simple AS3<br>Avatar Tutorial]]
	\|}		\|}

Line 38:		Line 38:

	== Documentation ==		== Documentation ==
	<b~~>~~Whirled APIs</b~~>~~		<b>Whirled APIs</b>
	* [http://www.whirled.com/code/asdocs/ Whirled ASdocs] which contains the all important [http://www.whirled.com/code/asdocs/com/whirled/AvatarControl.html AvatarControl]		* [http://www.whirled.com/code/asdocs/ Whirled ASdocs] which contains the all important [http://www.whirled.com/code/asdocs/com/whirled/AvatarControl.html AvatarControl]
	* [[Avatar creation FAQ \| Avatar creation FAQ ]]		* [[Avatar creation FAQ \| Avatar creation FAQ ]]

	<b~~>~~AS3 References</b~~>~~		<b>AS3 References</b>
	* http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/		* http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/
	* http://labs.adobe.com/wiki/index.php/ActionScript_3		* http://labs.adobe.com/wiki/index.php/ActionScript_3