FAT Pet Tutorial - Revision history

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

2018-09-04T06:33:58Z

Text replacement - """ to """

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

2018-08-31T17:04:30Z

Text replacement - ">" to ">"

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

2018-08-30T21:12:39Z

Text replacement - "<" to "<"

Dragawn: Created page with "{{Infobox tutorial |type=Flash |difficulty=Beginner |description=Create a pet based on a downloaded pet template. |requirements=20px Adobe Flash CS3..."

2018-08-25T18:46:21Z

Created page with "{{Infobox tutorial |type=Flash |difficulty=Beginner |description=Create a pet based on a downloaded pet template. |requirements=20px Adobe Flash CS3..."

New page

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

== Prep Step ==
'''IMPORTANT:''' There is one preparatory step required for making Flash pets. It's very easy and you only ever need to do it once (it works for avatars and other content that communicates with Whirled too). It also contains the template files used in this tutorial.
# Set up the [[Whirled SDK#Install and Set-up the Whirled SDK in Flash CS3|Whirled SDK]].

== Create ==

===Sketch in your pet===
[[Image:pet_scene_window.png|right|frame|Shift F2 brings up the Scene Window.]]
# Open the Whirled Pet Template (found in the Whirled SDK \whirled\examples\pets\FATexample\FATexample.fla) to start on a file with all the code already written. The folder also contains an example pet made from this tutorial.
# Pets' 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.
# In the '''Scene''' window, click "content_idle" to create your pet's standard view. The "main" scene just holds the code, which we won't need to change.
# Sketch a very simple pet (a body with two legs) 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:pet_sketch.png|center|frame|Use a light color to sketch your pet so that you'll be able to draw over it clearly.]]

See [[FAT Pet Advanced]] for configuring the scene size, pet size or the standing point.

[[Image:pet_lock_insert_layers.png|right|frame|The lock icon locks a layer. The page icon creates a new layer.]][[Image:pet_move_leg.png|right|frame|Move the leg art so the hip is under the crosshatch.]][[Image:pet_move_symbol.png|right|frame|Move the leg symbol so the leg lines up with the sketch again.]]

=== Draw your pet parts ===
#Click the '''lock icon''' to lock the sketch layer so you don't mess it up while drawing in the clean version.
#Now you'll draw the separate parts of the pet (body, right leg, left leg) 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 "leg right".
##Draw a clean version of your pet's right leg, hip to toe, right over the sketch.
##Select the entire leg drawing by hitting '''CTRL-A'''.
##Hit '''F8''' to turn the leg drawing into a "symbol" and name it "leg right". Symbols are how Flash bundles up lines and fills into a single unit for animating.
##Double-click the new symbol to edit its contents.
##Select all (CTRL-A) and move the leg so that the hip 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 leg away from the sketch, but that's fine.
##Click "content_idle" to back out of the symbol and return to the full scene.
##Now move the "leg right" ''symbol'' so that it lines up over the sketch again. This brings the leg ''and its rotation point'' back to where it belongs.
##Repeat the above steps for "body" and "leg left". [[Image:pet_clean.png|center|frame|The final image of the pet, with a bit of the sketch peeking out from underneath.]]
#Trash the sketch layer (Layer 1) now that you don't need it.
See [[FAT Pet Advanced]] for multiple and jointed limbs.

[[Image:pet_scene_duplicate.png|right|frame|Duplicate the selected scene.]]

== Animate ==

=== Setup the scene and keyframes ===
#Duplicate the "content_idle" scene and name the new one "content_walk". This creates and selects a new scene for our walk cycle.
#Click the top layer at frame 20 and drag down to select the whole column of frames. [[Image:pet_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 an 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:pet_keyframes.png|none|frame|Set periodic keyframes for a regular walk cycle.]]

[[Image:pet_rotate_legs.png|right|frame|Rotate the legs to set a walking pose.]] [[Image:pet_rotate_legs_opposite.png|right|frame|Set the legs in the opposite direction on frame 8.]]

=== Pose the pet 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 pet 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 your pet a stride.
#Click Frame 5 to pose the opposite end of the walk cycle.
##Select all ('''CTRL-A''') and hit '''SHIFT-Down''' to bob the avatar here too.
##Rotate the legs the opposite from before: left leg back, right leg forward.
#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:pet_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 [[FAT Pet Advanced]] for handling transitional or random alternate animations and pet moods.

== Save ==
#'''Save''' your file with a convenient name. This is your source file for creating this pet.
#Choose '''File -> Publish''' to output a swf file of the avatar. '''This is the file you'll upload to Whirled.'''

Ready for the next step? Try the [[FAT Pet Advanced]].

← Older revision		Revision as of 06:33, 4 September 2018
Line 19:		Line 19:
	[[Image:pet_scene_window.png\|right\|frame\|Shift F2 brings up the Scene Window.]]		[[Image:pet_scene_window.png\|right\|frame\|Shift F2 brings up the Scene Window.]]
	# Open the Whirled Pet Template (found in the Whirled SDK \whirled\examples\pets\FATexample\FATexample.fla) to start on a file with all the code already written. The folder also contains an example pet made from this tutorial.		# Open the Whirled Pet Template (found in the Whirled SDK \whirled\examples\pets\FATexample\FATexample.fla) to start on a file with all the code already written. The folder also contains an example pet made from this tutorial.
	# Pets' various actions and animations are organized into ~~"~~scenes~~"~~ in the Flash file. If you do not already have a Scene window, hit <b>Shift F2</b> (Window -> Other Panels -> Scene) to bring it up.		# Pets' various actions and animations are organized into "scenes" in the Flash file. If you do not already have a Scene window, hit <b>Shift F2</b> (Window -> Other Panels -> Scene) to bring it up.
	# In the '''Scene''' window, click ~~"~~content_idle~~"~~ to create your pet's standard view. The ~~"~~main~~"~~ scene just holds the code, which we won't need to change.		# In the '''Scene''' window, click "content_idle" to create your pet's standard view. The "main" scene just holds the code, which we won't need to change.
	# Sketch a very simple pet (a body with two legs) 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.		# Sketch a very simple pet (a body with two legs) 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:pet_sketch.png\|center\|frame\|Use a light color to sketch your pet so that you'll be able to draw over it clearly.]]		[[Image:pet_sketch.png\|center\|frame\|Use a light color to sketch your pet so that you'll be able to draw over it clearly.]]
Line 31:		Line 31:
	#Click the '''lock icon''' to lock the sketch layer so you don't mess it up while drawing in the clean version.		#Click the '''lock icon''' to lock the sketch layer so you don't mess it up while drawing in the clean version.
	#Now you'll draw the separate parts of the pet (body, right leg, left leg) on different layers, so that you can animate them.		#Now you'll draw the separate parts of the pet (body, right leg, left leg) 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 ~~"~~leg right~~"~~.		##Click the '''page icon''' to make a new layer and double-click its name to change it to "leg right".
	##Draw a clean version of your pet's right leg, hip to toe, right over the sketch.		##Draw a clean version of your pet's right leg, hip to toe, right over the sketch.
	##Select the entire leg drawing by hitting '''CTRL-A'''.		##Select the entire leg drawing by hitting '''CTRL-A'''.
	##Hit '''F8''' to turn the leg drawing into a ~~"~~symbol~~"~~ and name it ~~"~~leg right~~"~~. Symbols are how Flash bundles up lines and fills into a single unit for animating.		##Hit '''F8''' to turn the leg drawing into a "symbol" and name it "leg right". Symbols are how Flash bundles up lines and fills into a single unit for animating.
	##Double-click the new symbol to edit its contents.		##Double-click the new symbol to edit its contents.
	##Select all (CTRL-A) and move the leg so that the hip 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 leg away from the sketch, but that's fine.		##Select all (CTRL-A) and move the leg so that the hip 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 leg away from the sketch, but that's fine.
	##Click ~~"~~content_idle~~"~~ to back out of the symbol and return to the full scene.		##Click "content_idle" to back out of the symbol and return to the full scene.
	##Now move the ~~"~~leg right~~"~~ ''symbol'' so that it lines up over the sketch again. This brings the leg ''and its rotation point'' back to where it belongs.		##Now move the "leg right" ''symbol'' so that it lines up over the sketch again. This brings the leg ''and its rotation point'' back to where it belongs.
	##Repeat the above steps for ~~"~~body~~"~~ and ~~"~~leg left~~"~~. [[Image:pet_clean.png\|center\|frame\|The final image of the pet, with a bit of the sketch peeking out from underneath.]]		##Repeat the above steps for "body" and "leg left". [[Image:pet_clean.png\|center\|frame\|The final image of the pet, with a bit of the sketch peeking out from underneath.]]
	#Trash the sketch layer (Layer 1) now that you don't need it.		#Trash the sketch layer (Layer 1) now that you don't need it.
	<small>See [[FAT Pet Advanced]] for multiple and jointed limbs.</small>		<small>See [[FAT Pet Advanced]] for multiple and jointed limbs.</small>
Line 48:		Line 48:

	=== Setup the scene and keyframes ===		=== Setup the scene and keyframes ===
	#Duplicate the ~~"~~content_idle~~"~~ scene and name the new one ~~"~~content_walk~~"~~. This creates and selects a new scene for our walk cycle.		#Duplicate the "content_idle" scene and name the new one "content_walk". This creates and selects a new scene for our walk cycle.
	#Click the top layer at frame 20 and drag down to select the whole column of frames. [[Image:pet_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:pet_select_frames.png\|none\|frame\|Click and drag to select the frames at 20.]]
	#Hit '''F6''' to make a keyframe at frame <b>20</b> for all the layers in the scene. Even though nothing actually moves yet, you now have an animation.		#Hit '''F6''' to make a keyframe at frame <b>20</b> for all the layers in the scene. Even though nothing actually moves yet, you now have an animation.
Line 64:		Line 64:
	##Rotate the legs the opposite from before: left leg back, right leg forward.		##Rotate the legs the opposite from before: left leg back, right leg forward.
	#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:pet_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:pet_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~~"~~.]]		#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.		#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 17:04, 31 August 2018
Line 19:		Line 19:
	[[Image:pet_scene_window.png\|right\|frame\|Shift F2 brings up the Scene Window.]]		[[Image:pet_scene_window.png\|right\|frame\|Shift F2 brings up the Scene Window.]]
	# Open the Whirled Pet Template (found in the Whirled SDK \whirled\examples\pets\FATexample\FATexample.fla) to start on a file with all the code already written. The folder also contains an example pet made from this tutorial.		# Open the Whirled Pet Template (found in the Whirled SDK \whirled\examples\pets\FATexample\FATexample.fla) to start on a file with all the code already written. The folder also contains an example pet made from this tutorial.
	# Pets' various actions and animations are organized into "scenes" in the Flash file. If you do not already have a Scene window, hit <b~~>~~Shift F2</b~~>~~ (Window -~~>~~ Other Panels -~~>~~ Scene) to bring it up.		# Pets' various actions and animations are organized into "scenes" in the Flash file. If you do not already have a Scene window, hit <b>Shift F2</b> (Window -> Other Panels -> Scene) to bring it up.
	# In the '''Scene''' window, click "content_idle" to create your pet's standard view. The "main" scene just holds the code, which we won't need to change.		# In the '''Scene''' window, click "content_idle" to create your pet's standard view. The "main" scene just holds the code, which we won't need to change.
	# Sketch a very simple pet (a body with two legs) 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.		# Sketch a very simple pet (a body with two legs) 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:pet_sketch.png\|center\|frame\|Use a light color to sketch your pet so that you'll be able to draw over it clearly.]]		[[Image:pet_sketch.png\|center\|frame\|Use a light color to sketch your pet so that you'll be able to draw over it clearly.]]

	<small~~>~~See [[FAT Pet Advanced]] for configuring the scene size, pet size or the standing point.</small~~>~~		<small>See [[FAT Pet Advanced]] for configuring the scene size, pet size or the standing point.</small>

	[[Image:pet_lock_insert_layers.png\|right\|frame\|The lock icon locks a layer. <br~~>~~ The page icon creates a new layer.]][[Image:pet_move_leg.png\|right\|frame\|Move the leg art so the hip is under the crosshatch.]][[Image:pet_move_symbol.png\|right\|frame\|Move the leg symbol so the leg lines up with the sketch again.]]		[[Image:pet_lock_insert_layers.png\|right\|frame\|The lock icon locks a layer. <br> The page icon creates a new layer.]][[Image:pet_move_leg.png\|right\|frame\|Move the leg art so the hip is under the crosshatch.]][[Image:pet_move_symbol.png\|right\|frame\|Move the leg symbol so the leg lines up with the sketch again.]]

	=== Draw your pet parts ===		=== Draw your pet parts ===
Line 41:		Line 41:
	##Repeat the above steps for "body" and "leg left". [[Image:pet_clean.png\|center\|frame\|The final image of the pet, with a bit of the sketch peeking out from underneath.]]		##Repeat the above steps for "body" and "leg left". [[Image:pet_clean.png\|center\|frame\|The final image of the pet, with a bit of the sketch peeking out from underneath.]]
	#Trash the sketch layer (Layer 1) now that you don't need it.		#Trash the sketch layer (Layer 1) now that you don't need it.
	<small~~>~~See [[FAT Pet Advanced]] for multiple and jointed limbs.</small~~>~~		<small>See [[FAT Pet Advanced]] for multiple and jointed limbs.</small>

	[[Image:pet_scene_duplicate.png\|right\|frame\|Duplicate the selected scene.]]		[[Image:pet_scene_duplicate.png\|right\|frame\|Duplicate the selected scene.]]
Line 50:		Line 50:
	#Duplicate the "content_idle" scene and name the new one "content_walk". This creates and selects a new scene for our walk cycle.		#Duplicate the "content_idle" scene and name the new one "content_walk". This creates and selects a new scene for our walk cycle.
	#Click the top layer at frame 20 and drag down to select the whole column of frames. [[Image:pet_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:pet_select_frames.png\|none\|frame\|Click and drag to select the frames at 20.]]
	#Hit '''F6''' to make a keyframe at frame <b~~>~~20</b~~>~~ for all the layers in the scene. Even though nothing actually moves yet, you now have an animation.		#Hit '''F6''' to make a keyframe at frame <b>20</b> for all the layers in the scene. Even though nothing actually moves yet, you now have an 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:pet_keyframes.png\|none\|frame\|Set periodic keyframes for a regular walk cycle.]]		#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:pet_keyframes.png\|none\|frame\|Set periodic keyframes for a regular walk cycle.]]

Line 66:		Line 66:
	#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".]]		#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.		#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 [[FAT Pet Advanced]] for handling transitional or random alternate animations and pet moods.</small~~>~~		See [[FAT Pet Advanced]] for handling transitional or random alternate animations and pet moods.</small>

	== Save ==		== Save ==
	#'''Save''' your file with a convenient name. This is your source file for creating this pet.		#'''Save''' your file with a convenient name. This is your source file for creating this pet.
	#Choose '''File -~~>~~ Publish''' to output a swf file of the avatar. '''This is the file you'll upload to Whirled.'''		#Choose '''File -> Publish''' to output a swf file of the avatar. '''This is the file you'll upload to Whirled.'''

	Ready for the next step? Try the [[FAT Pet Advanced]].		Ready for the next step? Try the [[FAT Pet Advanced]].

← Older revision		Revision as of 21:12, 30 August 2018
Line 19:		Line 19:
	[[Image:pet_scene_window.png\|right\|frame\|Shift F2 brings up the Scene Window.]]		[[Image:pet_scene_window.png\|right\|frame\|Shift F2 brings up the Scene Window.]]
	# Open the Whirled Pet Template (found in the Whirled SDK \whirled\examples\pets\FATexample\FATexample.fla) to start on a file with all the code already written. The folder also contains an example pet made from this tutorial.		# Open the Whirled Pet Template (found in the Whirled SDK \whirled\examples\pets\FATexample\FATexample.fla) to start on a file with all the code already written. The folder also contains an example pet made from this tutorial.
	# Pets' various actions and animations are organized into "scenes" in the Flash file. If you do not already have a Scene window, hit ~~<~~b>Shift F2~~<~~/b> (Window -> Other Panels -> Scene) to bring it up.		# Pets' various actions and animations are organized into "scenes" in the Flash file. If you do not already have a Scene window, hit <b>Shift F2</b> (Window -> Other Panels -> Scene) to bring it up.
	# In the '''Scene''' window, click "content_idle" to create your pet's standard view. The "main" scene just holds the code, which we won't need to change.		# In the '''Scene''' window, click "content_idle" to create your pet's standard view. The "main" scene just holds the code, which we won't need to change.
	# Sketch a very simple pet (a body with two legs) 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.		# Sketch a very simple pet (a body with two legs) 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:pet_sketch.png\|center\|frame\|Use a light color to sketch your pet so that you'll be able to draw over it clearly.]]		[[Image:pet_sketch.png\|center\|frame\|Use a light color to sketch your pet so that you'll be able to draw over it clearly.]]

	~~<~~small>See [[FAT Pet Advanced]] for configuring the scene size, pet size or the standing point.~~<~~/small>		<small>See [[FAT Pet Advanced]] for configuring the scene size, pet size or the standing point.</small>

	[[Image:pet_lock_insert_layers.png\|right\|frame\|The lock icon locks a layer. ~~<~~br> The page icon creates a new layer.]][[Image:pet_move_leg.png\|right\|frame\|Move the leg art so the hip is under the crosshatch.]][[Image:pet_move_symbol.png\|right\|frame\|Move the leg symbol so the leg lines up with the sketch again.]]		[[Image:pet_lock_insert_layers.png\|right\|frame\|The lock icon locks a layer. <br> The page icon creates a new layer.]][[Image:pet_move_leg.png\|right\|frame\|Move the leg art so the hip is under the crosshatch.]][[Image:pet_move_symbol.png\|right\|frame\|Move the leg symbol so the leg lines up with the sketch again.]]

	=== Draw your pet parts ===		=== Draw your pet parts ===
Line 41:		Line 41:
	##Repeat the above steps for "body" and "leg left". [[Image:pet_clean.png\|center\|frame\|The final image of the pet, with a bit of the sketch peeking out from underneath.]]		##Repeat the above steps for "body" and "leg left". [[Image:pet_clean.png\|center\|frame\|The final image of the pet, with a bit of the sketch peeking out from underneath.]]
	#Trash the sketch layer (Layer 1) now that you don't need it.		#Trash the sketch layer (Layer 1) now that you don't need it.
	~~<~~small>See [[FAT Pet Advanced]] for multiple and jointed limbs.~~<~~/small>		<small>See [[FAT Pet Advanced]] for multiple and jointed limbs.</small>

	[[Image:pet_scene_duplicate.png\|right\|frame\|Duplicate the selected scene.]]		[[Image:pet_scene_duplicate.png\|right\|frame\|Duplicate the selected scene.]]
Line 50:		Line 50:
	#Duplicate the "content_idle" scene and name the new one "content_walk". This creates and selects a new scene for our walk cycle.		#Duplicate the "content_idle" scene and name the new one "content_walk". This creates and selects a new scene for our walk cycle.
	#Click the top layer at frame 20 and drag down to select the whole column of frames. [[Image:pet_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:pet_select_frames.png\|none\|frame\|Click and drag to select the frames at 20.]]
	#Hit '''F6''' to make a keyframe at frame ~~<~~b>20~~<~~/b> for all the layers in the scene. Even though nothing actually moves yet, you now have an animation.		#Hit '''F6''' to make a keyframe at frame <b>20</b> for all the layers in the scene. Even though nothing actually moves yet, you now have an 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:pet_keyframes.png\|none\|frame\|Set periodic keyframes for a regular walk cycle.]]		#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:pet_keyframes.png\|none\|frame\|Set periodic keyframes for a regular walk cycle.]]

Line 66:		Line 66:
	#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".]]		#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.		#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 [[FAT Pet Advanced]] for handling transitional or random alternate animations and pet moods.~~<~~/small>		See [[FAT Pet Advanced]] for handling transitional or random alternate animations and pet moods.</small>

	== Save ==		== Save ==