Simple avatar (Flash tutorial) - Revision history

Dragawn: Reverted edits by 47.134.149.30 (talk) to last revision by Whirled vox

2018-09-09T09:29:37Z

Reverted edits by 47.134.149.30 (talk) to last revision by Whirled vox

← Older revision		Revision as of 09:29, 9 September 2018
Line 1:		Line 1:
	~~suckig~~ on your ~~dogs penis sometimes help~~ with ~~imagination~~		{{Infobox tutorial
			\|type=Flash
			\|difficulty=Beginner
			\|description=Create an avatar based on a downloaded avatar framework.
			\|requirements=[[Image:Icon-Flash.png\|20px]] [[Adobe Flash CS3]], Whirled SDK
			\|other=Next tutorial: [[Advanced avatar (Flash tutorial)]]
			\|item=avatar
			}}
			[[Image:Icon-highlighted-avatar.png\|left]]Making your own Flash avatar gives you total control of the look and feel of your avatar. With our template you just create, animate and save, and you're ready to upload! No code required.
			{{clearleft}}

			== Download and open the template ==
			#Download the [[Whirled SDK]]. "SDK" stands for Software Development Kit, and it contains handy tools for Whirled creators.
			#[[Whirled_SDK#Install_and_Set-up_the_Whirled_SDK_in_Flash_CS3\| Configure your Flash CS3 to use the Whirled SDK ]]
			#Open the Whirled Avatar Template, found in ...\whirled\templates\avatar.fla (this is included among the files in the SDK that you installed)

			Note: This tutorial assumes you'll be working right over the template file and saving in the same folder as the template. Otherwise you will need to manually set up the required code.<br>
			<small>See [[Advanced avatar (Flash tutorial)]] for setting up the base Whirled code from scratch (without template).</small>

			== Create ==
			=== Sketch in your avatar ===

			# Avatars' various actions and animations are organized into "scenes" in the Flash file. If you do not already have a Scene window, hit '''Shift-F2''' (Window -> Other Panels -> Scene) to bring it up.[[Image:avatar_scene_window.png\|none\|frame\|Shift F2 brings up the Scene Window.]]
			# In the '''Scene''' window, click "state_Default" to create your avatar's standard view. The "main" scene just holds the code, which we won't need to change.
			# Sketch a simple avatar (a body with two legs and two arms) facing left, with the feet as close to the bottom of the scene as possible without leaving the scene. Center the sketch horizontally in the scene to make sure it flips properly when it faces the other way.[[Image:avatar_sketch.png\|none\|frame\|Use a light color to sketch your avatar so you can clearly draw over it.]]

			<small>See [[Advanced avatar (Flash tutorial)]] for configuring the scene size, avatar size or the standing point.</small>

			=== Draw your avatar parts ===
			#Click the dot in the '''lock''' column to lock the sketch layer so you don't mess it up while drawing in the clean version.[[Image:avatar_lock_insert_layers.png\|none\|frame\|The dot in the lock column locks the layer. The page icon inserts a new layer.]]
			#Now you'll draw the separate parts of the avatar (body with head, right leg, left leg, right arm, left arm) on different layers, so that you can animate them.
			##Click the '''page icon''' to make a new layer and double-click its name to change it to "arm right".
			##Draw a clean version of your avatar's right arm, shoulder to fingertips, right over the sketch.
			##Select the entire arm drawing by hitting '''Ctrl-a'''.
			##Hit '''F8''' to turn the arm drawing into a Movie clip "symbol" and name it "arm right". Symbols are how Flash bundles up lines and fills into a single unit for animating.
			##Using the Selection Tool, double-click the new symbol to edit its contents.
			##Select all (Ctrl-a) and move the arm so that the shoulder joint lines up over the crosshatch. This is the rotation point for the symbol, so we want it to line up with the rotation we intend. This will move the arm away from the sketch, but that's fine.[[Image:avatar_move_arm.png\|none\|frame\|Move the arm art so the shoulder is under the crosshatch.]]
			##Click "state_Default" to back out of the symbol and return to the full scene.
			##Use the Free Transform Tool [[Image:Flash_free_transform.png]] to move the transformation point to the same spot as the crosshatch. This will make it easier for you to rotate the limbs during animation.[[Image:Avatar_set_transformation_point.png\|none\|Line up the transformation point with the crosshatch.]]
			##Now switch back to the Selection Tool and move the "arm right" ''symbol'' so that it lines up over the sketch again. This brings the arm ''and its rotation point'' back to where it belongs.[[Image:avatar_move_symbol.png\|none\|frame\|Move the arm symbol so the arm lines up with the sketch again.]]
			##Repeat the above steps for "leg right", "body", "leg left", and "arm left".[[Image:avatar_clean.png\|none\|frame\|All the parts of the avatar.]]
			#Click and drag to rearrange any layers that are out of order so that your avatar looks right with the correct body parts on top of or below other parts.[[Image:avatar_rearrange_layers.png\|none\|frame\|His legs belong under his jacket.]]
			#Select the sketch layer (Layer 1) and use the trashcan icon to delete it now that you don't need it.
			<small>See [[Advanced avatar (Flash tutorial)]] for multiple and jointed limbs.</small>

			== Animate ==

			=== Setup the scene and keyframes ===
			#Duplicate the "state_Default" scene and name the new one "state_Default_walking". This creates and selects a new scene for our walk cycle.[[Image:avatar_scene_duplicate.png\|none\|frame\|Duplicate the selected scene.]]
			#Click the top layer at frame 20 and drag down to select the whole column of frames. [[Image:avatar_select_frames.png\|none\|frame\|Click and drag to select the frames at 20.]]
			#Hit '''F6''' to make a keyframe at frame '''20''' for all the layers in the scene. Even though nothing actually moves yet, you now have short animation.
			#Now set keyframes at frame '''5''', '''10''' and '''15''' using the same technique. These will be the points of action in our walk cycle. [[Image:avatar_keyframes.png\|none\|frame\|Set periodic keyframes for a regular walk cycle.]]
			*Note: The walk in this tutorial inherits the standing pose (state_Default) for frames 1, 10, and 20.

			=== Pose the avatar in the keyframes ===
			#Since we're on Frame 15, we'll start animating here.
			##Hit '''Ctrl-a''' to select all the parts at this frame.
			##Hit '''Shift-Down Arrow''' to move the whole avatar down a little on this frame. This will be one point in the natural bob of the walk cycle.
			##Use the '''Free Transform tool''' [[Image:Flash_free_transform.png]] and rotate the left leg symbol forward and the right leg symbol back, to give the avatar a stride.
			##Rotate the arms so that the ''right'' is forward and the ''left'' arm is back. When you walk, you swing your arms in the opposite direction of your legs, to keep balance.[[Image:avatar_rotate_limbs.png\|none\|frame\|Rotate the legs and arms in opposite directions to set a walking pose.]]
			#Click Frame 5 to pose the opposite end of the walk cycle.
			##Select all ('''Ctrl-a''') and hit Shift-Down Arrow''' to bob the avatar here too.
			##Rotate all the limbs the opposite from before: left leg back, right leg forward, right arm back, left arm forward.[[Image:avatar_rotate_limbs_opposite.png\|none\|frame\|Swing the legs and arms to the other end of their cycles on frame 5.]]
			#Flash can fill in all the frames between our keyframes automatically. '''Click and drag''' to select all the active frames of all the layers. [[Image:avatar_select_all_frames.png\|none\|frame\|Click and drag to select all the animation frames.]]
			#At the bottom of the screen under <b>Properties</b>, set "Tween" to "'''Motion'''". This makes Flash automatically animate be''tween'' the keyframes you just set. [[Image:flash_set_motion_tween.png\|none\|frame\|Set "Tween" to "Motion".]]
			#Hit '''Enter''' to watch your animation. Select and tweak any frames or symbols you think need improving.
			<small>See the [[list of Flash tutorials]] for more complex animation.
			See [[Advanced avatar (Flash tutorial)]] for handling transitional, states, or random alternate animations.</small>

			== Save ==
			#'''Save As''' your file with a convenient name. This is your source file for creating this avatar. Make sure you save your file in the same folder as the template.
			#Choose '''File &rarr; Publish''' to output a swf file of the avatar. '''This is the file you'll upload to Whirled.'''
			#[[Create_avatars#Upload.21\|Upload your avatar]]

			Ready for the next step? Try the [[Advanced avatar (Flash tutorial)]].

			== Finished Example ==
			The example used in this tutorial can be found in ...\whirled\examples\avatars\FATexample\FATexample.fla (this is included among the files in the SDK that you installed) and can be seen in the shop at http://www.whirled.com/#shop-l_5_251.

			== More Information ==
			* [[Avatar creation FAQ]]
			* {{groups\|Whirled Builders\|11}}
			* {{groups\|Whirled Coders\|79}}

47.134.149.30: Replaced content with "suckig on your dogs penis sometimes help with imagination"

2018-09-09T08:08:34Z

Replaced content with "suckig on your dogs penis sometimes help with imagination"

← Older revision		Revision as of 08:08, 9 September 2018
Line 1:		Line 1:
	~~{{Infobox tutorial~~		suckig on your dogs penis sometimes help with imagination
	~~\|type=Flash~~
	~~\|difficulty=Beginner~~
	~~\|description=Create an avatar based~~ on ~~a downloaded avatar framework.~~
	~~\|requirements=[[Image:Icon-Flash.png\|20px]] [[Adobe Flash CS3]], Whirled SDK~~
	~~\|other=Next tutorial: [[Advanced avatar (Flash tutorial)]]~~
	~~\|item=avatar~~
	}}
	~~[[Image:Icon-highlighted-avatar.png\|left]]Making~~ your ~~own Flash avatar gives you total control of the look and feel of your avatar. With our template you just create, animate and save, and you're ready to upload! No code required.~~
	~~{{clearleft}}~~

	~~== Download and open the template ==~~
	~~#Download the [[Whirled SDK]]. "SDK" stands for Software Development Kit, and it contains handy tools for Whirled creators.~~
	~~#[[Whirled_SDK#Install_and_Set-up_the_Whirled_SDK_in_Flash_CS3\| Configure your Flash CS3 to use the Whirled SDK ]]~~
	~~#Open the Whirled Avatar Template, found in ...\whirled\templates\avatar.fla (this is included among the files in the SDK that you installed)~~

	~~Note: This tutorial assumes you'll be working right over the template file and saving in the same folder as the template. Otherwise you will need to manually set up the required code.<br>~~
	~~<small>See [[Advanced avatar (Flash tutorial)]] for setting up the base Whirled code from scratch (without template).</small>~~

	~~== Create ==~~
	~~=== Sketch in your avatar ===~~

	# Avatars' various actions and animations are organized into "scenes" in the Flash file. If you do not already have a Scene window, hit '''Shift-F2''' (Window -> Other Panels -> Scene) to bring it up.[[Image:avatar_scene_window.png\|none\|frame\|Shift F2 brings up the Scene Window.]]
	~~# In the '''Scene''' window, click "state_Default" to create your avatar's standard view. The "main" scene just holds the code, which we won't need to change.~~
	# Sketch a simple avatar (a body with two legs and two arms) facing left, with the feet as close to the bottom of the scene as possible without leaving the scene. Center the sketch horizontally in the scene to make sure it flips properly when it faces the other way.[[Image:avatar_sketch.png\|none\|frame\|Use a light color to sketch your avatar so you can clearly draw over it.]]

	~~<small>See [[Advanced avatar (Flash tutorial)]] for configuring the scene size, avatar size or the standing point.</small>~~

	~~=== Draw your avatar parts ===~~
	#Click the dot in the '''lock''' column to lock the sketch layer so you don't mess it up while drawing in the clean version.[[Image:avatar_lock_insert_layers.png\|none\|frame\|The dot in the lock column locks the layer. The page icon inserts a new layer.]]
	~~#Now you'll draw the separate parts of the avatar (body with head, right leg, left leg, right arm, left arm) on different layers, so that you can animate them.~~
	~~##Click the '''page icon''' to make a new layer and double-click its name to change it to "arm right".~~
	~~##Draw a clean version of your avatar's right arm, shoulder to fingertips, right over the sketch.~~
	~~##Select the entire arm drawing by hitting '''Ctrl-a'''.~~
	~~##Hit '''F8''' to turn the arm drawing into a Movie clip "symbol" and name it "arm right". Symbols are how Flash bundles up lines and fills into a single unit for animating.~~
	~~##Using the Selection Tool, double-click the new symbol to edit its contents.~~
	~~##Select all (Ctrl-a) and move the arm so that the shoulder joint lines up over the crosshatch. This is the rotation point for the symbol, so we want it to line up~~ with ~~the rotation we intend. This will move the arm away from the sketch, but that's fine.[[Image:avatar_move_arm.png\|none\|frame\|Move the arm art so the shoulder is under the crosshatch.]]~~
	~~##Click "state_Default" to back out of the symbol and return to the full scene.~~
	##Use the Free Transform Tool [[Image:Flash_free_transform.png]] to move the transformation point to the same spot as the crosshatch. This will make it easier for you to rotate the limbs during animation.[[Image:Avatar_set_transformation_point.png\|none\|Line up the transformation point with the crosshatch.]]
	##Now switch back to the Selection Tool and move the "arm right" ''symbol'' so that it lines up over the sketch again. This brings the arm ''and its rotation point'' back to where it belongs.[[Image:avatar_move_symbol.png\|none\|frame\|Move the arm symbol so the arm lines up with the sketch again.]]
	~~##Repeat the above steps for "leg right", "body", "leg left", and "arm left".[[Image:avatar_clean.png\|none\|frame\|All the parts of the avatar.]]~~
	#Click and drag to rearrange any layers that are out of order so that your avatar looks right with the correct body parts on top of or below other parts.[[Image:avatar_rearrange_layers.png\|none\|frame\|His legs belong under his jacket.]]
	~~#Select the sketch layer (Layer 1) and use the trashcan icon to delete it now that you don't need it.~~
	~~<small>See [[Advanced avatar (Flash tutorial)]] for multiple and jointed limbs.</small>~~

	~~== Animate ==~~

	~~=== Setup the scene and keyframes ===~~
	#Duplicate the "state_Default" scene and name the new one "state_Default_walking". This creates and selects a new scene for our walk cycle.[[Image:avatar_scene_duplicate.png\|none\|frame\|Duplicate the selected scene.]]
	~~#Click the top layer at frame 20 and drag down to select the whole column of frames. [[Image:avatar_select_frames.png\|none\|frame\|Click and drag to select the frames at 20.]]~~
	~~#Hit '''F6''' to make a keyframe at frame '''20''' for all the layers in the scene. Even though nothing actually moves yet, you now have short animation.~~
	#Now set keyframes at frame '''5''', '''10''' and '''15''' using the same technique. These will be the points of action in our walk cycle. [[Image:avatar_keyframes.png\|none\|frame\|Set periodic keyframes for a regular walk cycle.]]
	*Note: The walk in this tutorial inherits the standing pose (state_Default) for frames 1, 10, and 20.

	~~=== Pose the avatar in the keyframes ===~~
	~~#Since we're on Frame 15, we'll start animating here.~~
	~~##Hit '''Ctrl-a''' to select all the parts at this frame.~~
	~~##Hit '''Shift-Down Arrow''' to move the whole avatar down a little on this frame. This will be one point in the natural bob of the walk cycle.~~
	~~##Use the '''Free Transform tool''' [[Image:Flash_free_transform.png]] and rotate the left leg symbol forward and the right leg symbol back, to give the avatar a stride.~~
	##Rotate the arms so that the ''right'' is forward and the ''left'' arm is back. When you walk, you swing your arms in the opposite direction of your legs, to keep balance.[[Image:avatar_rotate_limbs.png\|none\|frame\|Rotate the legs and arms in opposite directions to set a walking pose.]]
	~~#Click Frame 5 to pose the opposite end of the walk cycle.~~
	~~##Select all ('''Ctrl-a''') and hit Shift-Down Arrow''' to bob the avatar here too.~~
	##Rotate all the limbs the opposite from before: left leg back, right leg forward, right arm back, left arm forward.[[Image:avatar_rotate_limbs_opposite.png\|none\|frame\|Swing the legs and arms to the other end of their cycles on frame 5.]]
	#Flash can fill in all the frames between our keyframes automatically. '''Click and drag''' to select all the active frames of all the layers. [[Image:avatar_select_all_frames.png\|none\|frame\|Click and drag to select all the animation frames.]]
	#At the bottom of the screen under <b>Properties</b>, set "Tween" to "'''Motion'''". This makes Flash automatically animate be''tween'' the keyframes you just set. [[Image:flash_set_motion_tween.png\|none\|frame\|Set "Tween" to "Motion".]]
	~~#Hit '''Enter''' to watch your animation. Select and tweak any frames or symbols you think need improving.~~
	~~<small>See the [[list of Flash tutorials]] for more complex animation.~~
	~~See [[Advanced avatar (Flash tutorial)]] for handling transitional, states, or random alternate animations.</small>~~

	~~== Save ==~~
	~~#'''Save As''' your file with a convenient name. This is your source file for creating this avatar. Make sure you save your file in the same folder as the template.~~
	~~#Choose '''File &rarr; Publish''' to output a swf file of the avatar. '''This is the file you'll upload to Whirled.'''~~
	~~#[[Create_avatars#Upload.21\|Upload your avatar]]~~

	~~Ready for the next step? Try the [[Advanced avatar (Flash tutorial)]].~~

	~~== Finished Example ==~~
	The example used in this tutorial can be found in ...\whirled\examples\avatars\FATexample\FATexample.fla (this is included among the files in the SDK that you installed) and can be seen in the shop at http://www.whirled.com/#shop-l_5_251.

	~~== More Information ==~~
	* [[Avatar creation FAQ]]
	* {{groups\|Whirled Builders\|11}}
	* {{groups\|Whirled Coders\|79}}

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

2018-09-05T11:40:21Z

Text replacement - "<" to "<"

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

2018-09-04T11:27:01Z

Text replacement - """ to """

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

2018-09-02T23:07:39Z

Text replacement - ">" to ">"

Dragawn: Created page with "{{Infobox tutorial |type=Flash |difficulty=Beginner |description=Create an avatar based on a downloaded avatar framework. |requirements=20px Adobe F..."

2018-08-26T15:00:21Z

Created page with "{{Infobox tutorial |type=Flash |difficulty=Beginner |description=Create an avatar based on a downloaded avatar framework. |requirements=20px Adobe F..."

New page

{{Infobox tutorial
|type=Flash
|difficulty=Beginner
|description=Create an avatar based on a downloaded avatar framework.
|requirements=[[Image:Icon-Flash.png|20px]] [[Adobe Flash CS3]], Whirled SDK
|other=Next tutorial: [[Advanced avatar (Flash tutorial)]]
|item=avatar
}}
[[Image:Icon-highlighted-avatar.png|left]]Making your own Flash avatar gives you total control of the look and feel of your avatar. With our template you just create, animate and save, and you're ready to upload! No code required.
{{clearleft}}

== Download and open the template ==
#Download the [[Whirled SDK]]. "SDK" stands for Software Development Kit, and it contains handy tools for Whirled creators.
#[[Whirled_SDK#Install_and_Set-up_the_Whirled_SDK_in_Flash_CS3| Configure your Flash CS3 to use the Whirled SDK ]]
#Open the Whirled Avatar Template, found in ...\whirled\templates\avatar.fla (this is included among the files in the SDK that you installed)

Note: This tutorial assumes you'll be working right over the template file and saving in the same folder as the template. Otherwise you will need to manually set up the required code. 
See [[Advanced avatar (Flash tutorial)]] for setting up the base Whirled code from scratch (without template).

== Create ==
=== Sketch in your avatar ===

# Avatars' various actions and animations are organized into "scenes" in the Flash file. If you do not already have a Scene window, hit '''Shift-F2''' (Window -> Other Panels -> Scene) to bring it up.[[Image:avatar_scene_window.png|none|frame|Shift F2 brings up the Scene Window.]]
# In the '''Scene''' window, click "state_Default" to create your avatar's standard view. The "main" scene just holds the code, which we won't need to change.
# Sketch a simple avatar (a body with two legs and two arms) facing left, with the feet as close to the bottom of the scene as possible without leaving the scene. Center the sketch horizontally in the scene to make sure it flips properly when it faces the other way.[[Image:avatar_sketch.png|none|frame|Use a light color to sketch your avatar so you can clearly draw over it.]]

See [[Advanced avatar (Flash tutorial)]] for configuring the scene size, avatar size or the standing point.

=== Draw your avatar parts ===
#Click the dot in the '''lock''' column to lock the sketch layer so you don't mess it up while drawing in the clean version.[[Image:avatar_lock_insert_layers.png|none|frame|The dot in the lock column locks the layer. The page icon inserts a new layer.]]
#Now you'll draw the separate parts of the avatar (body with head, right leg, left leg, right arm, left arm) on different layers, so that you can animate them.
##Click the '''page icon''' to make a new layer and double-click its name to change it to "arm right".
##Draw a clean version of your avatar's right arm, shoulder to fingertips, right over the sketch.
##Select the entire arm drawing by hitting '''Ctrl-a'''.
##Hit '''F8''' to turn the arm drawing into a Movie clip "symbol" and name it "arm right". Symbols are how Flash bundles up lines and fills into a single unit for animating.
##Using the Selection Tool, double-click the new symbol to edit its contents.
##Select all (Ctrl-a) and move the arm so that the shoulder joint lines up over the crosshatch. This is the rotation point for the symbol, so we want it to line up with the rotation we intend. This will move the arm away from the sketch, but that's fine.[[Image:avatar_move_arm.png|none|frame|Move the arm art so the shoulder is under the crosshatch.]]
##Click "state_Default" to back out of the symbol and return to the full scene.
##Use the Free Transform Tool [[Image:Flash_free_transform.png]] to move the transformation point to the same spot as the crosshatch. This will make it easier for you to rotate the limbs during animation.[[Image:Avatar_set_transformation_point.png|none|Line up the transformation point with the crosshatch.]]
##Now switch back to the Selection Tool and move the "arm right" ''symbol'' so that it lines up over the sketch again. This brings the arm ''and its rotation point'' back to where it belongs.[[Image:avatar_move_symbol.png|none|frame|Move the arm symbol so the arm lines up with the sketch again.]]
##Repeat the above steps for "leg right", "body", "leg left", and "arm left".[[Image:avatar_clean.png|none|frame|All the parts of the avatar.]]
#Click and drag to rearrange any layers that are out of order so that your avatar looks right with the correct body parts on top of or below other parts.[[Image:avatar_rearrange_layers.png|none|frame|His legs belong under his jacket.]]
#Select the sketch layer (Layer 1) and use the trashcan icon to delete it now that you don't need it.
See [[Advanced avatar (Flash tutorial)]] for multiple and jointed limbs.

== Animate ==

=== Setup the scene and keyframes ===
#Duplicate the "state_Default" scene and name the new one "state_Default_walking". This creates and selects a new scene for our walk cycle.[[Image:avatar_scene_duplicate.png|none|frame|Duplicate the selected scene.]]
#Click the top layer at frame 20 and drag down to select the whole column of frames. [[Image:avatar_select_frames.png|none|frame|Click and drag to select the frames at 20.]]
#Hit '''F6''' to make a keyframe at frame '''20''' for all the layers in the scene. Even though nothing actually moves yet, you now have short animation.
#Now set keyframes at frame '''5''', '''10''' and '''15''' using the same technique. These will be the points of action in our walk cycle. [[Image:avatar_keyframes.png|none|frame|Set periodic keyframes for a regular walk cycle.]]
*Note: The walk in this tutorial inherits the standing pose (state_Default) for frames 1, 10, and 20.

=== Pose the avatar in the keyframes ===
#Since we're on Frame 15, we'll start animating here.
##Hit '''Ctrl-a''' to select all the parts at this frame.
##Hit '''Shift-Down Arrow''' to move the whole avatar down a little on this frame. This will be one point in the natural bob of the walk cycle.
##Use the '''Free Transform tool''' [[Image:Flash_free_transform.png]] and rotate the left leg symbol forward and the right leg symbol back, to give the avatar a stride.
##Rotate the arms so that the ''right'' is forward and the ''left'' arm is back. When you walk, you swing your arms in the opposite direction of your legs, to keep balance.[[Image:avatar_rotate_limbs.png|none|frame|Rotate the legs and arms in opposite directions to set a walking pose.]]
#Click Frame 5 to pose the opposite end of the walk cycle.
##Select all ('''Ctrl-a''') and hit Shift-Down Arrow''' to bob the avatar here too.
##Rotate all the limbs the opposite from before: left leg back, right leg forward, right arm back, left arm forward.[[Image:avatar_rotate_limbs_opposite.png|none|frame|Swing the legs and arms to the other end of their cycles on frame 5.]]
#Flash can fill in all the frames between our keyframes automatically. '''Click and drag''' to select all the active frames of all the layers. [[Image:avatar_select_all_frames.png|none|frame|Click and drag to select all the animation frames.]]
#At the bottom of the screen under Properties, set "Tween" to "'''Motion'''". This makes Flash automatically animate be''tween'' the keyframes you just set. [[Image:flash_set_motion_tween.png|none|frame|Set "Tween" to "Motion".]]
#Hit '''Enter''' to watch your animation. Select and tweak any frames or symbols you think need improving.
See the [[list of Flash tutorials]] for more complex animation.
See [[Advanced avatar (Flash tutorial)]] for handling transitional, states, or random alternate animations.

== Save ==
#'''Save As''' your file with a convenient name. This is your source file for creating this avatar. Make sure you save your file in the same folder as the template.
#Choose '''File &rarr; Publish''' to output a swf file of the avatar. '''This is the file you'll upload to Whirled.'''
#[[Create_avatars#Upload.21|Upload your avatar]]

Ready for the next step? Try the [[Advanced avatar (Flash tutorial)]].

== Finished Example ==
The example used in this tutorial can be found in ...\whirled\examples\avatars\FATexample\FATexample.fla (this is included among the files in the SDK that you installed) and can be seen in the shop at http://www.whirled.com/#shop-l_5_251.

== More Information ==
* [[Avatar creation FAQ]]
* {{groups|Whirled Builders|11}}
* {{groups|Whirled Coders|79}}

← Older revision		Revision as of 11:40, 5 September 2018
Line 15:		Line 15:
	#Open the Whirled Avatar Template, found in ...\whirled\templates\avatar.fla (this is included among the files in the SDK that you installed)		#Open the Whirled Avatar Template, found in ...\whirled\templates\avatar.fla (this is included among the files in the SDK that you installed)

	Note: This tutorial assumes you'll be working right over the template file and saving in the same folder as the template. Otherwise you will need to manually set up the required code.~~<~~br>		Note: This tutorial assumes you'll be working right over the template file and saving in the same folder as the template. Otherwise you will need to manually set up the required code.<br>
	~~<~~small>See [[Advanced avatar (Flash tutorial)]] for setting up the base Whirled code from scratch (without template).~~<~~/small>		<small>See [[Advanced avatar (Flash tutorial)]] for setting up the base Whirled code from scratch (without template).</small>

	== Create ==		== Create ==
Line 25:		Line 25:
	# Sketch a simple avatar (a body with two legs and two arms) facing left, with the feet as close to the bottom of the scene as possible without leaving the scene. Center the sketch horizontally in the scene to make sure it flips properly when it faces the other way.[[Image:avatar_sketch.png\|none\|frame\|Use a light color to sketch your avatar so you can clearly draw over it.]]		# Sketch a simple avatar (a body with two legs and two arms) facing left, with the feet as close to the bottom of the scene as possible without leaving the scene. Center the sketch horizontally in the scene to make sure it flips properly when it faces the other way.[[Image:avatar_sketch.png\|none\|frame\|Use a light color to sketch your avatar so you can clearly draw over it.]]

	~~<~~small>See [[Advanced avatar (Flash tutorial)]] for configuring the scene size, avatar size or the standing point.~~<~~/small>		<small>See [[Advanced avatar (Flash tutorial)]] for configuring the scene size, avatar size or the standing point.</small>

	=== Draw your avatar parts ===		=== Draw your avatar parts ===
Line 42:		Line 42:
	#Click and drag to rearrange any layers that are out of order so that your avatar looks right with the correct body parts on top of or below other parts.[[Image:avatar_rearrange_layers.png\|none\|frame\|His legs belong under his jacket.]]		#Click and drag to rearrange any layers that are out of order so that your avatar looks right with the correct body parts on top of or below other parts.[[Image:avatar_rearrange_layers.png\|none\|frame\|His legs belong under his jacket.]]
	#Select the sketch layer (Layer 1) and use the trashcan icon to delete it now that you don't need it.		#Select the sketch layer (Layer 1) and use the trashcan icon to delete it now that you don't need it.
	~~<~~small>See [[Advanced avatar (Flash tutorial)]] for multiple and jointed limbs.~~<~~/small>		<small>See [[Advanced avatar (Flash tutorial)]] for multiple and jointed limbs.</small>

	== Animate ==		== Animate ==
Line 63:		Line 63:
	##Rotate all the limbs the opposite from before: left leg back, right leg forward, right arm back, left arm forward.[[Image:avatar_rotate_limbs_opposite.png\|none\|frame\|Swing the legs and arms to the other end of their cycles on frame 5.]]		##Rotate all the limbs the opposite from before: left leg back, right leg forward, right arm back, left arm forward.[[Image:avatar_rotate_limbs_opposite.png\|none\|frame\|Swing the legs and arms to the other end of their cycles on frame 5.]]
	#Flash can fill in all the frames between our keyframes automatically. '''Click and drag''' to select all the active frames of all the layers. [[Image:avatar_select_all_frames.png\|none\|frame\|Click and drag to select all the animation frames.]]		#Flash can fill in all the frames between our keyframes automatically. '''Click and drag''' to select all the active frames of all the layers. [[Image:avatar_select_all_frames.png\|none\|frame\|Click and drag to select all the animation frames.]]
	#At the bottom of the screen under ~~<~~b>Properties~~<~~/b>, set "Tween" to "'''Motion'''". This makes Flash automatically animate be''tween'' the keyframes you just set. [[Image:flash_set_motion_tween.png\|none\|frame\|Set "Tween" to "Motion".]]		#At the bottom of the screen under <b>Properties</b>, set "Tween" to "'''Motion'''". This makes Flash automatically animate be''tween'' the keyframes you just set. [[Image:flash_set_motion_tween.png\|none\|frame\|Set "Tween" to "Motion".]]
	#Hit '''Enter''' to watch your animation. Select and tweak any frames or symbols you think need improving.		#Hit '''Enter''' to watch your animation. Select and tweak any frames or symbols you think need improving.
	~~<~~small>See the [[list of Flash tutorials]] for more complex animation.		<small>See the [[list of Flash tutorials]] for more complex animation.
	See [[Advanced avatar (Flash tutorial)]] for handling transitional, states, or random alternate animations.~~<~~/small>		See [[Advanced avatar (Flash tutorial)]] for handling transitional, states, or random alternate animations.</small>

	== Save ==		== Save ==

← Older revision		Revision as of 11:27, 4 September 2018
Line 11:		Line 11:

	== Download and open the template ==		== Download and open the template ==
	#Download the [[Whirled SDK]]. ~~"~~SDK~~"~~ stands for Software Development Kit, and it contains handy tools for Whirled creators.		#Download the [[Whirled SDK]]. "SDK" stands for Software Development Kit, and it contains handy tools for Whirled creators.
	#[[Whirled_SDK#Install_and_Set-up_the_Whirled_SDK_in_Flash_CS3\| Configure your Flash CS3 to use the Whirled SDK ]]		#[[Whirled_SDK#Install_and_Set-up_the_Whirled_SDK_in_Flash_CS3\| Configure your Flash CS3 to use the Whirled SDK ]]
	#Open the Whirled Avatar Template, found in ...\whirled\templates\avatar.fla (this is included among the files in the SDK that you installed)		#Open the Whirled Avatar Template, found in ...\whirled\templates\avatar.fla (this is included among the files in the SDK that you installed)
Line 21:		Line 21:
	=== Sketch in your avatar ===		=== Sketch in your avatar ===

	# Avatars' various actions and animations are organized into ~~"~~scenes~~"~~ in the Flash file. If you do not already have a Scene window, hit '''Shift-F2''' (Window -> Other Panels -> Scene) to bring it up.[[Image:avatar_scene_window.png\|none\|frame\|Shift F2 brings up the Scene Window.]]		# Avatars' various actions and animations are organized into "scenes" in the Flash file. If you do not already have a Scene window, hit '''Shift-F2''' (Window -> Other Panels -> Scene) to bring it up.[[Image:avatar_scene_window.png\|none\|frame\|Shift F2 brings up the Scene Window.]]
	# In the '''Scene''' window, click ~~"~~state_Default~~"~~ to create your avatar's standard view. The ~~"~~main~~"~~ scene just holds the code, which we won't need to change.		# In the '''Scene''' window, click "state_Default" to create your avatar's standard view. The "main" scene just holds the code, which we won't need to change.
	# Sketch a simple avatar (a body with two legs and two arms) facing left, with the feet as close to the bottom of the scene as possible without leaving the scene. Center the sketch horizontally in the scene to make sure it flips properly when it faces the other way.[[Image:avatar_sketch.png\|none\|frame\|Use a light color to sketch your avatar so you can clearly draw over it.]]		# Sketch a simple avatar (a body with two legs and two arms) facing left, with the feet as close to the bottom of the scene as possible without leaving the scene. Center the sketch horizontally in the scene to make sure it flips properly when it faces the other way.[[Image:avatar_sketch.png\|none\|frame\|Use a light color to sketch your avatar so you can clearly draw over it.]]

Line 30:		Line 30:
	#Click the dot in the '''lock''' column to lock the sketch layer so you don't mess it up while drawing in the clean version.[[Image:avatar_lock_insert_layers.png\|none\|frame\|The dot in the lock column locks the layer. The page icon inserts a new layer.]]		#Click the dot in the '''lock''' column to lock the sketch layer so you don't mess it up while drawing in the clean version.[[Image:avatar_lock_insert_layers.png\|none\|frame\|The dot in the lock column locks the layer. The page icon inserts a new layer.]]
	#Now you'll draw the separate parts of the avatar (body with head, right leg, left leg, right arm, left arm) on different layers, so that you can animate them.		#Now you'll draw the separate parts of the avatar (body with head, right leg, left leg, right arm, left arm) on different layers, so that you can animate them.
	##Click the '''page icon''' to make a new layer and double-click its name to change it to ~~"~~arm right~~"~~.		##Click the '''page icon''' to make a new layer and double-click its name to change it to "arm right".
	##Draw a clean version of your avatar's right arm, shoulder to fingertips, right over the sketch.		##Draw a clean version of your avatar's right arm, shoulder to fingertips, right over the sketch.
	##Select the entire arm drawing by hitting '''Ctrl-a'''.		##Select the entire arm drawing by hitting '''Ctrl-a'''.
	##Hit '''F8''' to turn the arm drawing into a Movie clip ~~"~~symbol~~"~~ and name it ~~"~~arm right~~"~~. Symbols are how Flash bundles up lines and fills into a single unit for animating.		##Hit '''F8''' to turn the arm drawing into a Movie clip "symbol" and name it "arm right". Symbols are how Flash bundles up lines and fills into a single unit for animating.
	##Using the Selection Tool, double-click the new symbol to edit its contents.		##Using the Selection Tool, double-click the new symbol to edit its contents.
	##Select all (Ctrl-a) and move the arm so that the shoulder joint lines up over the crosshatch. This is the rotation point for the symbol, so we want it to line up with the rotation we intend. This will move the arm away from the sketch, but that's fine.[[Image:avatar_move_arm.png\|none\|frame\|Move the arm art so the shoulder is under the crosshatch.]]		##Select all (Ctrl-a) and move the arm so that the shoulder joint lines up over the crosshatch. This is the rotation point for the symbol, so we want it to line up with the rotation we intend. This will move the arm away from the sketch, but that's fine.[[Image:avatar_move_arm.png\|none\|frame\|Move the arm art so the shoulder is under the crosshatch.]]
	##Click ~~"~~state_Default~~"~~ to back out of the symbol and return to the full scene.		##Click "state_Default" to back out of the symbol and return to the full scene.
	##Use the Free Transform Tool [[Image:Flash_free_transform.png]] to move the transformation point to the same spot as the crosshatch. This will make it easier for you to rotate the limbs during animation.[[Image:Avatar_set_transformation_point.png\|none\|Line up the transformation point with the crosshatch.]]		##Use the Free Transform Tool [[Image:Flash_free_transform.png]] to move the transformation point to the same spot as the crosshatch. This will make it easier for you to rotate the limbs during animation.[[Image:Avatar_set_transformation_point.png\|none\|Line up the transformation point with the crosshatch.]]
	##Now switch back to the Selection Tool and move the ~~"~~arm right~~"~~ ''symbol'' so that it lines up over the sketch again. This brings the arm ''and its rotation point'' back to where it belongs.[[Image:avatar_move_symbol.png\|none\|frame\|Move the arm symbol so the arm lines up with the sketch again.]]		##Now switch back to the Selection Tool and move the "arm right" ''symbol'' so that it lines up over the sketch again. This brings the arm ''and its rotation point'' back to where it belongs.[[Image:avatar_move_symbol.png\|none\|frame\|Move the arm symbol so the arm lines up with the sketch again.]]
	##Repeat the above steps for ~~"~~leg right~~"~~, ~~"~~body~~"~~, ~~"~~leg left~~"~~, and ~~"~~arm left~~"~~.[[Image:avatar_clean.png\|none\|frame\|All the parts of the avatar.]]		##Repeat the above steps for "leg right", "body", "leg left", and "arm left".[[Image:avatar_clean.png\|none\|frame\|All the parts of the avatar.]]
	#Click and drag to rearrange any layers that are out of order so that your avatar looks right with the correct body parts on top of or below other parts.[[Image:avatar_rearrange_layers.png\|none\|frame\|His legs belong under his jacket.]]		#Click and drag to rearrange any layers that are out of order so that your avatar looks right with the correct body parts on top of or below other parts.[[Image:avatar_rearrange_layers.png\|none\|frame\|His legs belong under his jacket.]]
	#Select the sketch layer (Layer 1) and use the trashcan icon to delete it now that you don't need it.		#Select the sketch layer (Layer 1) and use the trashcan icon to delete it now that you don't need it.
Line 47:		Line 47:

	=== Setup the scene and keyframes ===		=== Setup the scene and keyframes ===
	#Duplicate the ~~"~~state_Default~~"~~ scene and name the new one ~~"~~state_Default_walking~~"~~. This creates and selects a new scene for our walk cycle.[[Image:avatar_scene_duplicate.png\|none\|frame\|Duplicate the selected scene.]]		#Duplicate the "state_Default" scene and name the new one "state_Default_walking". This creates and selects a new scene for our walk cycle.[[Image:avatar_scene_duplicate.png\|none\|frame\|Duplicate the selected scene.]]
	#Click the top layer at frame 20 and drag down to select the whole column of frames. [[Image:avatar_select_frames.png\|none\|frame\|Click and drag to select the frames at 20.]]		#Click the top layer at frame 20 and drag down to select the whole column of frames. [[Image:avatar_select_frames.png\|none\|frame\|Click and drag to select the frames at 20.]]
	#Hit '''F6''' to make a keyframe at frame '''20''' for all the layers in the scene. Even though nothing actually moves yet, you now have short animation.		#Hit '''F6''' to make a keyframe at frame '''20''' for all the layers in the scene. Even though nothing actually moves yet, you now have short animation.
Line 63:		Line 63:
	##Rotate all the limbs the opposite from before: left leg back, right leg forward, right arm back, left arm forward.[[Image:avatar_rotate_limbs_opposite.png\|none\|frame\|Swing the legs and arms to the other end of their cycles on frame 5.]]		##Rotate all the limbs the opposite from before: left leg back, right leg forward, right arm back, left arm forward.[[Image:avatar_rotate_limbs_opposite.png\|none\|frame\|Swing the legs and arms to the other end of their cycles on frame 5.]]
	#Flash can fill in all the frames between our keyframes automatically. '''Click and drag''' to select all the active frames of all the layers. [[Image:avatar_select_all_frames.png\|none\|frame\|Click and drag to select all the animation frames.]]		#Flash can fill in all the frames between our keyframes automatically. '''Click and drag''' to select all the active frames of all the layers. [[Image:avatar_select_all_frames.png\|none\|frame\|Click and drag to select all the animation frames.]]
	#At the bottom of the screen under <b>Properties</b>, set ~~"~~Tween~~"~~ to ~~"~~'''Motion'''~~"~~. This makes Flash automatically animate be''tween'' the keyframes you just set. [[Image:flash_set_motion_tween.png\|none\|frame\|Set ~~"~~Tween~~"~~ to ~~"~~Motion~~"~~.]]		#At the bottom of the screen under <b>Properties</b>, set "Tween" to "'''Motion'''". This makes Flash automatically animate be''tween'' the keyframes you just set. [[Image:flash_set_motion_tween.png\|none\|frame\|Set "Tween" to "Motion".]]
	#Hit '''Enter''' to watch your animation. Select and tweak any frames or symbols you think need improving.		#Hit '''Enter''' to watch your animation. Select and tweak any frames or symbols you think need improving.
	<small>See the [[list of Flash tutorials]] for more complex animation.		<small>See the [[list of Flash tutorials]] for more complex animation.

← Older revision		Revision as of 23:07, 2 September 2018
Line 15:		Line 15:
	#Open the Whirled Avatar Template, found in ...\whirled\templates\avatar.fla (this is included among the files in the SDK that you installed)		#Open the Whirled Avatar Template, found in ...\whirled\templates\avatar.fla (this is included among the files in the SDK that you installed)

	Note: This tutorial assumes you'll be working right over the template file and saving in the same folder as the template. Otherwise you will need to manually set up the required code.<br~~>~~		Note: This tutorial assumes you'll be working right over the template file and saving in the same folder as the template. Otherwise you will need to manually set up the required code.<br>
	<small~~>~~See [[Advanced avatar (Flash tutorial)]] for setting up the base Whirled code from scratch (without template).</small~~>~~		<small>See [[Advanced avatar (Flash tutorial)]] for setting up the base Whirled code from scratch (without template).</small>

	== Create ==		== Create ==
	=== Sketch in your avatar ===		=== Sketch in your avatar ===

	# Avatars' various actions and animations are organized into "scenes" in the Flash file. If you do not already have a Scene window, hit '''Shift-F2''' (Window -~~>~~ Other Panels -~~>~~ Scene) to bring it up.[[Image:avatar_scene_window.png\|none\|frame\|Shift F2 brings up the Scene Window.]]		# Avatars' various actions and animations are organized into "scenes" in the Flash file. If you do not already have a Scene window, hit '''Shift-F2''' (Window -> Other Panels -> Scene) to bring it up.[[Image:avatar_scene_window.png\|none\|frame\|Shift F2 brings up the Scene Window.]]
	# In the '''Scene''' window, click "state_Default" to create your avatar's standard view. The "main" scene just holds the code, which we won't need to change.		# In the '''Scene''' window, click "state_Default" to create your avatar's standard view. The "main" scene just holds the code, which we won't need to change.
	# Sketch a simple avatar (a body with two legs and two arms) facing left, with the feet as close to the bottom of the scene as possible without leaving the scene. Center the sketch horizontally in the scene to make sure it flips properly when it faces the other way.[[Image:avatar_sketch.png\|none\|frame\|Use a light color to sketch your avatar so you can clearly draw over it.]]		# Sketch a simple avatar (a body with two legs and two arms) facing left, with the feet as close to the bottom of the scene as possible without leaving the scene. Center the sketch horizontally in the scene to make sure it flips properly when it faces the other way.[[Image:avatar_sketch.png\|none\|frame\|Use a light color to sketch your avatar so you can clearly draw over it.]]

	<small~~>~~See [[Advanced avatar (Flash tutorial)]] for configuring the scene size, avatar size or the standing point.</small~~>~~		<small>See [[Advanced avatar (Flash tutorial)]] for configuring the scene size, avatar size or the standing point.</small>

	=== Draw your avatar parts ===		=== Draw your avatar parts ===
Line 42:		Line 42:
	#Click and drag to rearrange any layers that are out of order so that your avatar looks right with the correct body parts on top of or below other parts.[[Image:avatar_rearrange_layers.png\|none\|frame\|His legs belong under his jacket.]]		#Click and drag to rearrange any layers that are out of order so that your avatar looks right with the correct body parts on top of or below other parts.[[Image:avatar_rearrange_layers.png\|none\|frame\|His legs belong under his jacket.]]
	#Select the sketch layer (Layer 1) and use the trashcan icon to delete it now that you don't need it.		#Select the sketch layer (Layer 1) and use the trashcan icon to delete it now that you don't need it.
	<small~~>~~See [[Advanced avatar (Flash tutorial)]] for multiple and jointed limbs.</small~~>~~		<small>See [[Advanced avatar (Flash tutorial)]] for multiple and jointed limbs.</small>

	== Animate ==		== Animate ==
Line 63:		Line 63:
	##Rotate all the limbs the opposite from before: left leg back, right leg forward, right arm back, left arm forward.[[Image:avatar_rotate_limbs_opposite.png\|none\|frame\|Swing the legs and arms to the other end of their cycles on frame 5.]]		##Rotate all the limbs the opposite from before: left leg back, right leg forward, right arm back, left arm forward.[[Image:avatar_rotate_limbs_opposite.png\|none\|frame\|Swing the legs and arms to the other end of their cycles on frame 5.]]
	#Flash can fill in all the frames between our keyframes automatically. '''Click and drag''' to select all the active frames of all the layers. [[Image:avatar_select_all_frames.png\|none\|frame\|Click and drag to select all the animation frames.]]		#Flash can fill in all the frames between our keyframes automatically. '''Click and drag''' to select all the active frames of all the layers. [[Image:avatar_select_all_frames.png\|none\|frame\|Click and drag to select all the animation frames.]]
	#At the bottom of the screen under <b~~>~~Properties</b~~>~~, set "Tween" to "'''Motion'''". This makes Flash automatically animate be''tween'' the keyframes you just set. [[Image:flash_set_motion_tween.png\|none\|frame\|Set "Tween" to "Motion".]]		#At the bottom of the screen under <b>Properties</b>, set "Tween" to "'''Motion'''". This makes Flash automatically animate be''tween'' the keyframes you just set. [[Image:flash_set_motion_tween.png\|none\|frame\|Set "Tween" to "Motion".]]
	#Hit '''Enter''' to watch your animation. Select and tweak any frames or symbols you think need improving.		#Hit '''Enter''' to watch your animation. Select and tweak any frames or symbols you think need improving.
	<small~~>~~See the [[list of Flash tutorials]] for more complex animation.		<small>See the [[list of Flash tutorials]] for more complex animation.
	See [[Advanced avatar (Flash tutorial)]] for handling transitional, states, or random alternate animations.</small~~>~~		See [[Advanced avatar (Flash tutorial)]] for handling transitional, states, or random alternate animations.</small>

	== Save ==		== Save ==