tag:blogger.com,1999:blog-34799353921550189132024-03-05T08:32:50.454-08:00Flash PotentialFlash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.comBlogger26125tag:blogger.com,1999:blog-3479935392155018913.post-63073425007663482942013-08-07T19:18:00.001-07:002013-08-07T19:18:23.312-07:00Learn How To Use Flash CS5 - Tutorials for BeginnersHello! Thanks for visiting my page. If you're looking to learn how to use Flash CS5, then check out my Flash CS5 tutorials for beginners. I've organized them into different chapters, which you can see below. These are a mix of text and video tutorials, and I hope that you'll find them engaging and enriching. Have fun learning how to use Flash CS5!<br />
<br />
<h4>Chapter 1 - Getting Started</h4><ol><li><a href="http://www.flashpotential.com/2011/10/part-1-creating-new-flash-document-and.html">Getting Started with Flash CS5</a></li>
<li><a href="http://www.youtube.com/watch?v=GjR0p6HedJQ">The Properties Panel</a></li>
</ol><h4>Chapter 2 - Drawing in Flash</h4><ol><li><a href="http://www.flashpotential.com/2011/11/fill-color-vs-stroke-color-flash-cs5.html">The fill color vs the stroke color</a></li>
<li><a href="http://www.flashpotential.com/2011/10/understanding-difference-between-object.html">Understanding the difference between object drawing mode and merge drawing mode</a></li>
</ol><h4>Chapter 3 - The Flash Timeline Window</h4><ol><li><a href="http://www.flashpotential.com/2011/11/working-with-layers-flash-cs5-beginners.html">Working with Layers in Flash</a></li>
<li><a href="http://youtu.be/72RY2db3HwI">Creating a frame by frame animation in Flash</a></li>
<li><a href="http://www.flashpotential.com/2011/07/understanding-when-to-insert-frames.html">Understanding when to insert frames, keyframes, and blank keyframes</a></li>
</ol><h4>Chapter 4 - Symbols in Flash</h4><ol><li><a href="http://www.flashpotential.com/2011/11/part-1-what-is-symbol-introduction-to.html">Introduction to Flash symbols</a></li>
</ol><h4>Chapter 5 - Tweens</h4><ol><li><a href="http://www.flashpotential.com/2013/08/learn-all-about-flash-cs5-classic-tween.html">Working with Classic Tweens</a></li>
<li><a href="http://youtu.be/KtkHIvyMw94">Adding a Layer Mask in Flash</a></li>
<li><a href="http://youtu.be/wOxAbVTFq_Y">Adding a Classic Motion Guide</a></li>
</ol><h4>Chapter 6 - Nesting</h4><ol><li><a href="http://youtu.be/IC3EHCfm8yo">Creating a Nested Animation</a></li>
</ol><br />
Thank you for visiting my Flash CS5 tutorials for beginners page. I hope you were able to learn a lot about how to use Flash CS5. If you know other people who also want to learn, feel free to share this page with them.<br />
<br />
Link:<br />
<textarea rows="1" cols="70" readonly="readonly" onclick="this.focus();this.select();">http://www.flashpotential.com/2013/08/learn-how-to-use-flash-cs5-tutorials-beginners.html</textarea><br />
Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com1tag:blogger.com,1999:blog-3479935392155018913.post-45941726885515570932013-08-07T19:08:00.000-07:002013-08-07T19:08:23.407-07:00Learn All About The Flash CS5 Classic TweenWelcome to my Flash CS5 classic tween tutorial page. Here, you'll find a collection of video tutorials that will teach you how to create classic tweens in Flash CS5. Each video explains a specific topic, and shows simple examples that you can easily follow. So now, let's begin learning all about the Flash CS5 classic tween.<br />
<br />
<h4>
PART 1 - Introduction to Classic Tweens</h4>
Let's start off with an introduction explaining what Flash CS5 Classic Tweens are. And I'll also show you how to create a very simple example.<br />
<a href="http://www.youtube.com/watch?v=Twlr90_59-g">[WATCH THE VIDEO TUTORIAL]</a><br />
<br />
<h4>
PART 2 - Adding More Keyframes</h4>
In part 2 of this video series on the Flash CS5 classic tween, we're going to edit the animation that we made in part 1. We'll be adding a few more keyframes to make the circle move in a few more different directions.<br />
<a href="http://www.youtube.com/watch?v=1GO6hyHkEko">[WATCH THE VIDEO TUTORIAL]</a><br />
<br />
<h4>
PART 3 - Editing the Position of an Object in Each Keyframe</h4>
Here in part 3 of this video series on the Flash CS5 classic tween, we're going to edit the animation that we finished in part 2. But instead of adding more keyframes, we're just going to make use of the existing keyframes, and simply change the position of the circle in each of them. That way, we'll still end up with a different animation where the circle is moving in a different direction.<br />
<a href="http://www.youtube.com/watch?v=Yqd3SWh6FFI">[WATCH THE VIDEO TUTORIAL]</a><br />
<br />
<h4>
PART 4 - Adding a Keyframe in Between Two Existing Keyframes</h4>
In part 4 of this video series on the Flash CS5 classic tween, I'll show you how to quickly add a keyframe in between 2 keyframes that already have a classic tween. I'll also show you how to remove a keyframe.<br />
<a href="http://www.youtube.com/watch?v=sCzChAfapd4">[WATCH THE VIDEO TUTORIAL]</a><br />
<br />
<h4>
PART 5 - Adjusting the Distance Between Keyframes</h4>
Here in part 5 of this video series about classic tweens in Flash CS5, I'll show you how to adjust the distance between the keyframes of your classic tweens. Adjusting the distance between keyframes will allow you to edit the speed of your tweens.<br />
<a href="http://www.youtube.com/watch?v=ZYG9ZjZHVtA">[WATCH THE VIDEO TUTORIAL]</a><br />
<br />
<h4>
PART 6 - Tweening 2 or More Objects at the Same Time</h4>
In part 6, I'll show you the number one rule to follow when tweening two or more objects at the same time.<br />
<a href="http://www.youtube.com/watch?v=ye248QEh00w">[WATCH THE VIDEO TUTORIAL]</a><br />
<br />
<h4>
PART 7 - Creating a Scaling Animation</h4>
In part 7 of this video series on the Flash CS5 classic tween, I'll show you how to create a scaling animation. In this example, we'll learn how to make a circle grow using a classic tween.<br />
<a href="http://www.youtube.com/watch?v=T20AvO0v2F8">[WATCH THE VIDEO TUTORIAL]</a><br />
<br />
Thanks for visiting this page. If you know other people who'd also like to learn all about the Flash CS5 Classic Tween, feel free to share this page with them!Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com0tag:blogger.com,1999:blog-3479935392155018913.post-27922808363003860072012-09-22T01:36:00.001-07:002012-09-22T01:36:37.756-07:00Making Flash Buttons - An Introduction to Creating Button Symbols in Flash CS5One of the types of symbols in Flash is the Button symbol. Button symbols are ones that respond to user-based interaction via the mouse. And in conjunction with ActionScript programming, they enable you to add interactivity to your Flash movie. <br />
<br />
But we won't be tackling ActionScript in this introductory lesson. Instead, we'll first get know the basics of making buttons in Flash.<br />
<br />
Let's begin.<br />
<br />
<span class="tutorialSectionTitle">Creating a Button Symbol</span><br />
<br />
<span class="tutorialStep">Step 1</span><br />
<br />
Create a new Flash Document. <br />
<br />
<span class="tutorialStep">Step 2</span><br />
<br />
Use the Oval tool to draw a circle in the center of the stage. You can choose any color want. I'm going to use blue.<br />
<br />
<span class="tutorialStep">Step 3</span><br />
<br />
Select your circle (if your circle has a fill and a stroke, make sure that both parts are selected), then right-click on it and choose <b>Convert to Symbol</b>. Convert your circle into a button symbol by selecting <b>Button</b> as the symbol type. Name your button <b>MyButton</b> and click OK.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj7pcbFRSyOrB55HaasoP0XuN6Og9PFWgolyaMPnPBf7SC8PHitEKQzmIyt9u0puimCQptCxM0Z8msqkoO3mzaN4RhgiAOmYYM7Ee8tC9OeBknGqlk50TCawp9W0ZDz7SMQiGNuibVvzlL/s1600/01-convert-to-symbol.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj7pcbFRSyOrB55HaasoP0XuN6Og9PFWgolyaMPnPBf7SC8PHitEKQzmIyt9u0puimCQptCxM0Z8msqkoO3mzaN4RhgiAOmYYM7Ee8tC9OeBknGqlk50TCawp9W0ZDz7SMQiGNuibVvzlL/s1600/01-convert-to-symbol.jpg" /></a></div><br />
You have now created a button symbol.<br />
<br />
<span class="tutorialStep">Step 4</span><br />
<br />
Choose <b>Control > Test Movie > in Flash Professional</b> to test your movie. Alternatively, you can press <b>ctrl + enter</b> (pc) or <b>command + return</b> (mac) on your keyboard as a shortcut to testing the movie. When your SWF test movie launches, move your mouse pointer over the button you just created. You will notice that your pointer turns into a hand icon.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgR5Q5XKDH7hSNf7Hc9MCla4_pzDYBb6HBKaECAu2-Bc_sKozoYSYNTyo2uP4sPp3BiUVUQRdn33WH6_t3HYATwva5AfnCrMBFtdIp7X__WZgw3N3Y2rZ60N6PEvD7-kAWS-nJRJzlZKK/s1600/02-hand-cursor.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgR5Q5XKDH7hSNf7Hc9MCla4_pzDYBb6HBKaECAu2-Bc_sKozoYSYNTyo2uP4sPp3BiUVUQRdn33WH6_t3HYATwva5AfnCrMBFtdIp7X__WZgw3N3Y2rZ60N6PEvD7-kAWS-nJRJzlZKK/s1600/02-hand-cursor.jpg" /></a></div><br />
This happens when your pointer is on a button's active area. A button's active area refers to the part of the button that responds to button presses and mouse overs. Typically, the button's active area is the entire visible area of the button itself. But in Flash, you can actually edit a button so that a different area becomes the active area. We'll talk about that later on.<br />
<br />
Right now, nothing else happens when you mouse over or press the button. As I've mentioned earlier, we'll need ActionScript to be able to add interactivity to buttons, and that's something that we're not going to tackle in this tutorial. However, there are some basic things we can do to make this button a little more interesting without the need for ActionScript. In this example, we'll make it so that the button changes color when we mouse over and press it. But before we do that, let's learn about the different states of a button symbol in Flash. <br />
<br />
<span class="tutorialSectionTitle">The 4 States of a Button Symbol in Flash</span><br />
<br />
In Flash, a button symbol has what you call states. There are 4 of them. These states refer to the different interactions that a button has with the mouse pointer. These 4 states are:<br />
<br />
<b>UP</b> - This is default state of the button symbol. This is how the button looks like when the mouse pointer is not interacting with it.<br />
<br />
<b>OVER</b> - This is the state of the button when the mouse pointer is hovering over its active area. When you move the mouse OVER the button, then it goes into the OVER state.<br />
<br />
<b>DOWN</b> - This is the state of the button when the pointer is over the active area AND you are pressing DOWN the mouse button. Take note that pressing is different from clicking. When you click, this denotes that you press AND THEN release. When you release the mouse button, then your button is no longer in the DOWN state.<br />
<br />
<b>HIT</b> - This defines the area of your button that is active. The active area refers to the part of the button that responds when ever you press or mouse over it. We'll talk more about this later.<br />
<br />
You can modify these button states by going inside the button's timeline and editing the button. Let's go ahead and do that.<br />
<br />
<span class="tutorialSectionTitle">Editing a Button Symbol</span><br />
<br />
<span class="tutorialStep">Step 1</span><br />
<br />
Close your SWF test movie window and go back to the stage of your Flash document.<br />
<br />
<span class="tutorialStep">Step 2</span><br />
<br />
Go inside the button symbol's timeline by double-clicking on it. In the edit bar, you should see the name of your symbol right next to the Scene 1 link.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzp0Lq1WIK14v0SMYBXZhErlt0Ivp7fHNo2Rrbn1Cx3630PaQAb9WfkR8YSHtyF8P2xGQDazEvUBHHMEkmVaPqlDSaMcFBJkeqMZGwM7i_fxETYJSD8xKlJmMjB9PGAS0KLV8IknrDpaCt/s1600/03-edit-bar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzp0Lq1WIK14v0SMYBXZhErlt0Ivp7fHNo2Rrbn1Cx3630PaQAb9WfkR8YSHtyF8P2xGQDazEvUBHHMEkmVaPqlDSaMcFBJkeqMZGwM7i_fxETYJSD8xKlJmMjB9PGAS0KLV8IknrDpaCt/s1600/03-edit-bar.jpg" /></a></div><br />
This means that you are no longer in the main timeline, but are now inside the button symbol's timeline instead. So you can now edit the symbol.<br />
<br />
You will notice that your button symbol has a different kind of timeline. Instead of having numbered frames, you'll see that you only have 4 frames. These are the frames for the 4 button states, and you'll see that they are labeled accordingly - UP, OVER, DOWN and HIT.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgMNpvbQDyZmshEehCs8s3Ymk5U8EHOdMFrR2tFuE5kzT2TX_hnb1qZKLB_0ZTtREappSFe-y3NhHlv900I57dtkw9BzttkOk2yILsTaBLd4FHu1N07ATOBcgUboC3osrupiZNOr0hqi0k/s1600/04-button-timeline.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgMNpvbQDyZmshEehCs8s3Ymk5U8EHOdMFrR2tFuE5kzT2TX_hnb1qZKLB_0ZTtREappSFe-y3NhHlv900I57dtkw9BzttkOk2yILsTaBLd4FHu1N07ATOBcgUboC3osrupiZNOr0hqi0k/s1600/04-button-timeline.jpg" /></a></div><br />
To get a better idea of how these button states work, let's edit the button. Well make it so that the button changes color depending on the state that it's in.<br />
<br />
<span class="tutorialStep">Step 3</span><br />
<br />
Select the Over frame and insert a keyframe by right-clicking on it and choosing Insert Keyframe. Alternatively, you can press F6 on your keyboard to add a keyframe. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix-FBJP0cd7EZOeHdSCuLKQ56pYyg4OOMgWt4XfHxTOqc-9eINouP1sFg3j_ES-8IhSPF1aWAtc3DTMByTNP5gqw0FA9evU5MQB6RptixMoqTNdqt6qF_prsvtRlfcIzkTkjJQrBGln295/s1600/05-insert-kf.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix-FBJP0cd7EZOeHdSCuLKQ56pYyg4OOMgWt4XfHxTOqc-9eINouP1sFg3j_ES-8IhSPF1aWAtc3DTMByTNP5gqw0FA9evU5MQB6RptixMoqTNdqt6qF_prsvtRlfcIzkTkjJQrBGln295/s1600/05-insert-kf.jpg" /></a></div><br />
Add a keyframe on the Down and Hit frames as well.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZKwuEiGB6pr0ToRqvAe1ee0nXzR7RKV5QDC0OCM50kchvTNqWAEZpEmEC7FMC35F56FzUqEZ5WQOpf275mUuCLKHjKMsv9SZclCBr68NPT8M1Jzmsv1MP5LTdLPwJ2KVsU6f-mCXy4Vcp/s1600/06-kf-all-states.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZKwuEiGB6pr0ToRqvAe1ee0nXzR7RKV5QDC0OCM50kchvTNqWAEZpEmEC7FMC35F56FzUqEZ5WQOpf275mUuCLKHjKMsv9SZclCBr68NPT8M1Jzmsv1MP5LTdLPwJ2KVsU6f-mCXy4Vcp/s1600/06-kf-all-states.jpg" /></a></div><br />
We want to insert keyframes on all of the button states so that we can make independent changes to the properties of the circle shape in each of the different states.<br />
<br />
<span class="tutorialStep">Step 4</span><br />
<br />
Move the playhead back to the Over keyframe and then select the circle on the stage.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie7ujco1uUx9jr-_rE_o0ca1TyeWsh6Z6frnRRzKkh-si7VMQhLjlSPdGgGiJb8yCjq4H6uL0SpIZq2LVCawo769ntAyrgwdqf80tuLR4GQYRYSn8gZNKlkEySClnInCCsUpsWKb3LC8Oj/s1600/07-back-to-over.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie7ujco1uUx9jr-_rE_o0ca1TyeWsh6Z6frnRRzKkh-si7VMQhLjlSPdGgGiJb8yCjq4H6uL0SpIZq2LVCawo769ntAyrgwdqf80tuLR4GQYRYSn8gZNKlkEySClnInCCsUpsWKb3LC8Oj/s320/07-back-to-over.jpg" width="320" /></a></div><br />
Then change the shape's fill color to a different one. To change the fill color, select a new color from the Fill color box found in the toolbar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjISYTm0DZhuGgxYLkLSrOXQCP6KTq2Iu-PLiSnaahv2Gh4f9C-H23csSwwz5HtCgzuF-L7NWDkl1AAjQhRa4MhrkhpQgvlAhUn2FhFKAxuuxh6j7QQ9VbBoPS6lRIpN03bcOVLboPJ4I-R/s1600/08-choose-new-fill.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjISYTm0DZhuGgxYLkLSrOXQCP6KTq2Iu-PLiSnaahv2Gh4f9C-H23csSwwz5HtCgzuF-L7NWDkl1AAjQhRa4MhrkhpQgvlAhUn2FhFKAxuuxh6j7QQ9VbBoPS6lRIpN03bcOVLboPJ4I-R/s1600/08-choose-new-fill.jpg" /></a></div><br />
You can choose whatever color you want. I'm going to choose red.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcO-MrthsX7AkwjB_rTkfCWwD3IFaDKlNsyroE2eqgl1hKyjve3nZNbtnq0gJ2ypfFcZEL4BDF8Uc95DvcHHy7q_YeZvlCkYgJdsO398hZlGDIoNsdo4K8fjUNpmvSwAW36XVoafR6VDaw/s1600/09-red-button.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcO-MrthsX7AkwjB_rTkfCWwD3IFaDKlNsyroE2eqgl1hKyjve3nZNbtnq0gJ2ypfFcZEL4BDF8Uc95DvcHHy7q_YeZvlCkYgJdsO398hZlGDIoNsdo4K8fjUNpmvSwAW36XVoafR6VDaw/s1600/09-red-button.jpg" /></a></div><br />
<span class="tutorialStep">Step 5</span><br />
<br />
After you've changed the circle's fill color in the Over state, go ahead and change the color of the circle in the Down state as well. To do this, move the playhead to the Down keyframe of the button symbol's timeline.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbS0DTARa9U8aSrngiy4z8Box9zUhhk-C7-tOW5RXSjG8iynbv2qfj5ujS8O6J6KHCCZn9z33Z6_dVrfDI0a2Ez_O2Ob0tA7jYfIlsLczVLee56I62iqflcr9lVYw2ExvrXn2rGvNpkbJ1/s1600/10-go-to-down-kf.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbS0DTARa9U8aSrngiy4z8Box9zUhhk-C7-tOW5RXSjG8iynbv2qfj5ujS8O6J6KHCCZn9z33Z6_dVrfDI0a2Ez_O2Ob0tA7jYfIlsLczVLee56I62iqflcr9lVYw2ExvrXn2rGvNpkbJ1/s320/10-go-to-down-kf.jpg" width="320" /></a></div> <br />
Now select the circle on the stage, and change this one's fill color to a different one also. You can choose whatever color you want. I'm going to choose yellow.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdkVKgRfiCtgZDIFrg6tE6C6nBKnRbf-NtOwYDLsWAfE04YDpzHLjuH8MzPl-zX8EpmVjTqBrx2LA2nYkWa31K2R-IjeT-QtWC-M2FNlnMiu2GVhDOM-yHFNaSI2W_XNH0Da-XVcR9cxa9/s1600/11-yellow-button.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdkVKgRfiCtgZDIFrg6tE6C6nBKnRbf-NtOwYDLsWAfE04YDpzHLjuH8MzPl-zX8EpmVjTqBrx2LA2nYkWa31K2R-IjeT-QtWC-M2FNlnMiu2GVhDOM-yHFNaSI2W_XNH0Da-XVcR9cxa9/s1600/11-yellow-button.jpg" /></a></div><br />
So now, the circle has a different color for the Up, Over, and Down states. There's still the Hit keyframe, but we'll talk about that later.<br />
<br />
<span class="tutorialStep">Step 6 </span><br />
<br />
For now, let's test the movie by pressing <b>ctrl + enter</b> (pc) or <b>command + return</b> (mac).<br />
<br />
<span class="tutorialStep">Step 7 </span><br />
<br />
When the test movie comes out, make sure that your mouse pointer does not touch the button. This would be the button's UP state. It is the default appearance of the button when the mouse does not interact with it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2zZHIUM-ictIN8oa1miXZoTCqM1ehqh8mEP-UNTQ3RpsBpyddeCV_l5RUtYLnTiktH3pzjjWxGkHH_N1j-dK6ukruJv83NjmnrSBz96jdorLZmFiKe0Wz4lhe8r25Zwu3zXYYmqE2vZHg/s1600/12-up.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2zZHIUM-ictIN8oa1miXZoTCqM1ehqh8mEP-UNTQ3RpsBpyddeCV_l5RUtYLnTiktH3pzjjWxGkHH_N1j-dK6ukruJv83NjmnrSBz96jdorLZmFiKe0Wz4lhe8r25Zwu3zXYYmqE2vZHg/s1600/12-up.jpg" /></a></div><br />
<span class="tutorialStep">Step 8</span><br />
<br />
Next, move the mouse pointer on top of the button. This would be the buttons OVER state. Once your pointer hovers over the button, you should see it change color to whatever color you picked for the OVER state.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgX-DSpyl4PHXBpn_9JhEmqnTsS6HKN1jY7bB1vM1Y04FDMmwSfar-0xWU0TeG6BsMQvA4rnuq_4aYIzo-hN30hV8sN54EteNBPLJCuBwyyuvn5dR69-yBdU1kF7HzVcXyxEp3xjhK4rd4/s1600/13-over.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgX-DSpyl4PHXBpn_9JhEmqnTsS6HKN1jY7bB1vM1Y04FDMmwSfar-0xWU0TeG6BsMQvA4rnuq_4aYIzo-hN30hV8sN54EteNBPLJCuBwyyuvn5dR69-yBdU1kF7HzVcXyxEp3xjhK4rd4/s1600/13-over.jpg" /></a></div><br />
<span class="tutorialStep">Step 9 </span><br />
<br />
Next, make sure your mouse cursor is still over the button, and then press it. This would now be the DOWN state, and you should see the circle change to the color that you picked in the DOWN keyframe.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqO3FRbhiZD5wV5JPv5KPs6vnQHrQliLstD_5E97g-buPQxocCfyVYrKMzJEw16DySnDr2BOraE7j5ymmCFxNfcXQh3vCqwmicAkg1MAvBaMxFZnJeGPavGslXfYfWZS4tI0p9QxC3GtRC/s1600/14-down.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqO3FRbhiZD5wV5JPv5KPs6vnQHrQliLstD_5E97g-buPQxocCfyVYrKMzJEw16DySnDr2BOraE7j5ymmCFxNfcXQh3vCqwmicAkg1MAvBaMxFZnJeGPavGslXfYfWZS4tI0p9QxC3GtRC/s1600/14-down.jpg" /></a></div><br />
So now we've seen an example of the first 3 button states in action. To make more changes to the appearance of the button, you can go back to editing it in the UP, OVER, and DOWN keyframes. You're not just limited to changing the color. You can change the size and shape so that it's different on each state, and you can even add some text. <br />
<br />
And now, let's move on to the Hit state.<br />
<br />
<span class="tutorialSectionTitle">The Hit State</span><br />
<br />
The Hit state defines the button symbol's active area. When the mouse pointer "hits" that area, then the button will respond.<br />
<br />
The Hit keyframe is where you will draw the area that will determine which parts or portions of the button will respond to mouse interaction. You can design it so that the button's responsive area is different from the button that you can actually see. This "hit" area can be bigger or smaller than the actual button. It can be a different shape. It can even be in a spot that's away from the actual button.<br />
<br />
Let's see how that works.<br />
<br />
<span class="tutorialStep">Step 1</span><br />
<br />
Close your SWF test movie window and go back to your FLA document. You will now edit the button's Hit state.<br />
<br />
<span class="tutorialStep">Step 2</span><br />
<br />
Select the Hit keyframe.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9ePad7sRupLCzFOmhg77-aUf3VSJpeTdXXnOGXVGNjxDbgouzgdCSi77LlHRHCAoHVNluQxr2yTxlJ_vWhT0ok-CpjBElLBQ1p0H_EiqQTgz-xFvYv9gQrbtWlTbqra2Q5SynJGnUSyT/s1600/15-hit-kf.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9ePad7sRupLCzFOmhg77-aUf3VSJpeTdXXnOGXVGNjxDbgouzgdCSi77LlHRHCAoHVNluQxr2yTxlJ_vWhT0ok-CpjBElLBQ1p0H_EiqQTgz-xFvYv9gQrbtWlTbqra2Q5SynJGnUSyT/s320/15-hit-kf.jpg" width="320" /></a></div><br />
And then observe the circle on your stage. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Xa-LeZ0gMWxnp04IQ6kj5lrLdftFUYNZKaFolUVYLSabEPxUhOGs6y-EjaT-N6eoiVKayfvOfnFI4IbL9friCAoey_WxMFUTowANoV1YT5cKLpcn22Q9n4kuDjrWjgX8U6PC4z34xenM/s1600/16-observe-hit-shape.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Xa-LeZ0gMWxnp04IQ6kj5lrLdftFUYNZKaFolUVYLSabEPxUhOGs6y-EjaT-N6eoiVKayfvOfnFI4IbL9friCAoey_WxMFUTowANoV1YT5cKLpcn22Q9n4kuDjrWjgX8U6PC4z34xenM/s1600/16-observe-hit-shape.jpg" /></a></div><br />
When you're dealing with the Hit state, the color of the shape on your stage does not matter, because the hit area can't actually be seen. What matters is the size and shape. The size and shape determine which areas will make the button responsive.<br />
<br />
Right now, the circle in the Hit keyframe is exactly the same size and shape as the circles in the other keyframes.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNeQ4pan3HxH7mASUnebHNPes7PXKLM2bP40W8V3YcEWVvo-bxh4aqFfqZMYUByQ_tH1zmEBE8ryLC_AQsqTbgdAy0_TrE7CNNsMN2z8-NBXTrYS3nmMeytzKKcxnvtZ0ixAsvabQIzzH2/s1600/17-color-comparisons.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNeQ4pan3HxH7mASUnebHNPes7PXKLM2bP40W8V3YcEWVvo-bxh4aqFfqZMYUByQ_tH1zmEBE8ryLC_AQsqTbgdAy0_TrE7CNNsMN2z8-NBXTrYS3nmMeytzKKcxnvtZ0ixAsvabQIzzH2/s1600/17-color-comparisons.jpg" /></a></div><br />
So what we will do then is change the circle's size in the Hit keyframe. And then let's see what happens when we do that.<br />
<br />
<span class="tutorialStep">Step 3</span><br />
<br />
Make sure you are still on the Hit keyframe and select the entire circle on your stage. If it has a fill and a stroke, then make sure you select both of those.<br />
<br />
<span class="tutorialStep">Step 4</span><br />
<br />
Then choose the Free Transform tool from your Tools panel and resize the circle. Make it about 50% bigger than the original size. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXsu5AKgGjNkACfMK7C869Hl5EpkaTpKnOnlGsdx6P6rEWINPuzacbsWkHObTDKN3bpIcqzIeCL1eK4n_Iohb_NkavefPCWbAhmuRhpSPVgb4ArvE2pSe8MPbSQokJkx08Do7kenhNmt7X/s1600/18-scale-up.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXsu5AKgGjNkACfMK7C869Hl5EpkaTpKnOnlGsdx6P6rEWINPuzacbsWkHObTDKN3bpIcqzIeCL1eK4n_Iohb_NkavefPCWbAhmuRhpSPVgb4ArvE2pSe8MPbSQokJkx08Do7kenhNmt7X/s320/18-scale-up.jpg" width="320" /></a></div><br />
So now, the circle on the Hit keyframe is bigger than the circle in the other keyframes. Go to the Up, Over and Down keyframes to get another look at the circles on those keyframes. Then go back to the Hit keyframe and take note of the bigger circle again. Keep in mind the area that this bigger circle occupies. I'll ask you to try and recall that later on.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ph7phSKJeAk3uNPuLQvqHrGnYAoypnbPkQQvWiYw4kTjkmDidjy_t7tQNlQ0G9pc2-X0ikB8eB1Gwez5IDKtU6X56-Q71ONP3w76VFVT5M-ZrUcweU1dS3f9SK_jdK285aKleD4AgYW-/s1600/19-size-comparisons.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ph7phSKJeAk3uNPuLQvqHrGnYAoypnbPkQQvWiYw4kTjkmDidjy_t7tQNlQ0G9pc2-X0ikB8eB1Gwez5IDKtU6X56-Q71ONP3w76VFVT5M-ZrUcweU1dS3f9SK_jdK285aKleD4AgYW-/s400/19-size-comparisons.jpg" width="400" /></a></div><br />
<span class="tutorialStep">Step 5</span><br />
<br />
Now test your movie.<br />
<br />
When it comes out, make sure that your pointer is far away from the button. Move it outside of the test movie window if you can. We don't want any mouse interactions just yet.<br />
<br />
When you see the button, you won't see the bigger circle that you drew in the Hit area. That's OK. That's really how it's supposed to be. As I've mentioned earlier, the hit area can't be seen. So right now, it doesn't appear as if anything has changed.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBlC2-BEG-vVHJWNDqD_7v9wKCJRG4AUZaWxCg2pzteGlsHVPIIlTgZ-mkJgcwJB1F1sMiHl-uxwljNqPZtPiACtTIoZ_kTOkyKtBAps_O4uApxZJhsolCmLQuOkzvIRR5JDlZSsXbmXB2/s1600/20-no-diff.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBlC2-BEG-vVHJWNDqD_7v9wKCJRG4AUZaWxCg2pzteGlsHVPIIlTgZ-mkJgcwJB1F1sMiHl-uxwljNqPZtPiACtTIoZ_kTOkyKtBAps_O4uApxZJhsolCmLQuOkzvIRR5JDlZSsXbmXB2/s1600/20-no-diff.jpg" /></a></div><br />
<span class="tutorialStep">Step 6</span><br />
<br />
Now try to recall the area that the larger circle in your Hit keyframe occupies. That would be your button's hit area. In the one that I made, it should be somewhere around here (denoted by the circle with the red dashed outline):<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFYP8zaYjrhJuleNT1z-Woiulq_42ydKEmRpo_d2CONn6uwskE7G_nmlnYtMqutFDjpJylolyvpLbfIZnjKtvy5DtDqPZnrwUCVBROjloWSPwFFPlhbmlx61wCGYxaR9Pq7yAonQzMNmfr/s1600/21-recall-hit-area.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFYP8zaYjrhJuleNT1z-Woiulq_42ydKEmRpo_d2CONn6uwskE7G_nmlnYtMqutFDjpJylolyvpLbfIZnjKtvy5DtDqPZnrwUCVBROjloWSPwFFPlhbmlx61wCGYxaR9Pq7yAonQzMNmfr/s1600/21-recall-hit-area.jpg" /></a></div><br />
And again, we won't be able to actually see it. But watch what happens if you place your mouse pointer within the hit area, but without touching the actual button.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAHp5uotsJ8s6DaMt6BvimM5_Sa4OEo-XyMxqbdC5w4BOZXdO4uDYK7ifiXfQuK_ZWb_GRg5WVXpf5V6d_sVLiDjbeH2hYabgEQG2jmGVCyEc1TvpH-sq9QuiZzhiNlh4KAgaWnxNqPf2m/s1600/22-place-it-there.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAHp5uotsJ8s6DaMt6BvimM5_Sa4OEo-XyMxqbdC5w4BOZXdO4uDYK7ifiXfQuK_ZWb_GRg5WVXpf5V6d_sVLiDjbeH2hYabgEQG2jmGVCyEc1TvpH-sq9QuiZzhiNlh4KAgaWnxNqPf2m/s1600/22-place-it-there.jpg" /></a></div><br />
You'll see that your mouse pointer turns into the hand icon, and the color of the button changes to the color of the over state. Which means that your button is actually responding to a mouse over. You're not over the actual visible area of the button, but you are over the button's hit area as defined in the Hit keyframe. This is the reason why the button is responding.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuc4kP5GtQlWc1Hcvrw76ZXvM3RmwtUQHjDBqbvc3XzpBlgnscwfYMqUzFGn6u4w6j7Wk3uO02mk_VqtIpQ-ztdBDxZB5VDHoyC3I5FdKX1YtfrFz29vrvouY_TeTszN1MiWx4uloi8uQb/s1600/23-already-in.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuc4kP5GtQlWc1Hcvrw76ZXvM3RmwtUQHjDBqbvc3XzpBlgnscwfYMqUzFGn6u4w6j7Wk3uO02mk_VqtIpQ-ztdBDxZB5VDHoyC3I5FdKX1YtfrFz29vrvouY_TeTszN1MiWx4uloi8uQb/s1600/23-already-in.jpg" /></a></div><br />
So that is what the Hit state is. The Up, Over, and Down states refer to the appearance of the button, but the Hit state refers to the actual area of the button that you can interact with using your mouse. This area can be the exact same size and shape as the actual visible button, but it doesn't have to be. As I've said, it can be bigger or smaller, it can be an entirely different shape, and it can even be in a different location. If you place the shape in the hit keyframe in an entirely different spot away from the position of whatever shape or object is in the other keyframes, then it will be like having a hidden button. When you try to click on the button that you can see, then nothing will happen. But when you find the hidden hit area, then the button responds. So it can be pretty interesting to play around with this feature of Button symbols. Try going back to your Flash document, and edit your button some more to see what you can come up with.<br />
<br />
And that concludes this introductory lesson on making Button symbols in Flash.Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com3tag:blogger.com,1999:blog-3479935392155018913.post-35592021986630342872012-05-11T06:24:00.000-07:002012-05-11T06:26:34.788-07:00The New Features of Adobe Flash Professional CS6The Adobe Creative Suite 6 was released last May 07, 2012, and with it comes Adobe Flash Professional CS6. Here are some of it's new features:<br />
<br />
<ul>
<li>the ability to create and export sprite sheets from symbols on the Stage and in the library</li>
<li>a new SWF compression type based on LZMA (Lempel-Ziv-Markov chain algorithm), which can reduce the file size by up to 40%</li>
<li>ability to export animations from Flash out to HTML5 through the Toolkit for CreateJS extension</li>
<li>captive AIR runtime support for Android, OS X, and Windows<br />
<iframe allowfullscreen="" frameborder="0" height="234" src="http://www.youtube.com/embed/Wpi00UAoFjE?rel=0" width="460"></iframe></li>
<li>the new Content Simulator, an AIR application that helps you simulate how your content will behave on a mobile device</li>
<li>Flash Professional CS6 projects are now compatible with AIR native extensions for advanced users with the advent of AIR 3.2</li>
<li>the ability to list additional languages that your application can be installed in</li>
<li>iOS debugging via wi-fi now lets you add breakpoints, step in and out of functions, and watch variables</li>
</ul>
<br />
If you're a beginner who's just purchased the Adobe Flash Professional CS6 program, check out the Adobe <a href="http://www.lynda.com/Flash-Professional-tutorials/Flash-Professional-CS-Essential-Training/96304-2.html?utm_medium=affiliate&utm_source=ldc_affiliate&utm_content=524&utm_campaign=CD1791&bid=524&aid=CD1791&opt=">Flash Professional CS6 Essential Training</a> course so that you can get the most out of this amazing program. You can get a <a href="http://www.lynda.com/promo/trial/Default.aspx?lpk35=1833&utm_medium=affiliate&utm_source=ldc_affiliate&utm_content=655&utm_campaign=CD1791&bid=655&aid=CD1791&opt=">free 7-day trial</a> for complete access to this entire 8-hour online video training course by <a href="http://www.lynda.com/?utm_medium=affiliate&utm_source=ldc_affiliate&utm_content=524&utm_campaign=CD1791&bid=524&aid=CD1791&opt=">lynda.com</a>.Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com0tag:blogger.com,1999:blog-3479935392155018913.post-83836477352629051372011-11-14T08:17:00.001-08:002012-05-23T02:38:11.481-07:00Creating Basic Tween Examples in Flash CS5Create a new Flash document. Follow the steps below to add different kinds of tweens to your Flash movie. <br />
<br />
By the end of this tutorial, you should have something like this: <a href="https://sites.google.com/site/flashpotentialfiles/demo-files-creating-basic-tween-examples-in-flash-cs5">[DEMO PAGE]</a><br />
<br />
<b>Movement - Classic Tween</b><br />
<ol><li>Draw a circle on the upper-left corner of the stage using the oval tool. </li>
<li>Select the whole shape using the selection tool, and then convert it into a graphic symbol named Circle.</li>
<li>On the timeline, right-click on the frame 40 box and choose Insert Keyframe.</li>
<li>Make sure you are still on frame 40 by clicking on the keyframe that you just added. </li>
<li>Then use the selection tool to move the circle to the upper-right corner of the stage.</li>
<li>On the timeline, right-click anywhere between frames 1 and 40 and choose Create Classic Tween.</li>
<li>Press ctrl + enter (PC) or cmd + return (Mac) to test your movie.</li>
<li>Save your work. </li>
</ol><br />
<b>Scaling Animation - Classic Tween</b><br />
<ol><li>Insert a new layer.</li>
<li>Make sure you are on frame 1 of this second layer by clicking on the blank keyframe on frame 1.</li>
<li>Use the rectangle tool to draw a square shape in the middle of the stage.</li>
<li>Select the whole shape using the selection tool, and convert it into a graphic symbol named Square.</li>
<li>On the timeline (layer 2), select frame 40 by clicking on it. Make sure that no other frames are highlighted except for frame 40 of layer 2.</li>
<li>Once it's selected, right-click on it and choose Insert Keyframe.</li>
<li>Make sure sure you are still on frame 40 of the second layer by clicking on the keyframe that you just added.</li>
<li>Then on the stage, right-click on the square and choose Free Transform. </li>
<li>Make the square bigger by clicking on any of the corner handles and dragging outward.</li>
<li>On the timeline (layer 2), right-click anywhere between frames 1 and 40 and choose Create Classic Tween.</li>
<li>Press ctrl + enter (PC) or cmd + return (Mac) to test your movie.</li>
<li>Save your work.</li>
</ol><br />
<b>Color Changing Effect - Classic Tween</b><br />
<ol><li>Insert a new layer (this will be the 3rd layer).</li>
<li>Make sure you are on frame 1 of this third layer by clicking on the blank keyframe on frame 1.</li>
<li>From the library, add another instance of the Circle symbol and place it on the lower-left corner of the stage.</li>
<li>On the timeline (layer 3), select frame 40 by clicking on it. Make sure that no other frames are highlighted except for frame 40 of layer 3.</li>
<li>Once it's selected, right-click on it and choose Insert Keyframe.</li>
<li>Make sure sure you are still on frame 40 of this third layer by clicking on the keyframe that you just added.</li>
<li>Then select this new instance of the circle symbol on the stage by clicking on it using the selection tool. Do this even if the instance already looks selected just to make sure that it's really selected. Make you sure you only click on it <b>ONCE</b>. Do <b>NOT</b> double-click on it. If you double-click on it, you will enter the symbol's timeline.</li>
<li>After selecting the instance, go to the Properties Inspector. If you don’t see the Properties Inspector, choose Window > Properties.</li>
<li>You should see the properties of the selected graphic instance in the Properties Inspector. Under Color Effect, click on the Style drop-down menu and choose Tint.</li>
<li>Click on the tint color box and choose a new color for the instance. Make sure that the tint amount slider below the drop-down menu is at 100%.</li>
<li>On the timeline (layer 3), right-click anywhere between frames 1 and 40 and choose Create Classic Tween.</li>
<li>Press ctrl + enter (PC) or cmd + return (Mac) to test your movie.</li>
<li>Save your work.</li>
</ol><br />
<b>Morphing Effect - Shape Tween</b><br />
<ol><li>Insert a new layer (this will be the 4th layer).</li>
<li>Make sure you are on frame 1 of this fourth layer by clicking on the blank keyframe on frame 1.</li>
<li>Draw a circle on the lower-right corner of your Stage. DO NOT CONVERT IT INTO A SYMBOL. We are going to add a shape tween, and it will not work if you convert the shape into a symbol.</li>
<li>On the timeline (layer 4), select frame 40 by clicking on it. Make sure that no other frames are highlighted except for frame 40 of layer 4. </li>
<li>Once frame 40 of layer 4 is selected, right-click on the frame and choose Insert BLANK Keyframe. You should see the circle disappear.</li>
<li>Make sure sure you are still on frame 40 of this fourth layer by clicking on the BLANK keyframe that you just added.</li>
<li>Then switch to the rectangle tool and draw a square shape on the same spot that the circle was on.</li>
<li>On the timeline (layer 4), right-click anywhere between frames 1 and 40 and choose Create <b>Shape</b> Tween.</li>
<li>Press ctrl + enter (PC) or cmd + return (Mac) to test your movie.</li>
<li>Save your work.</li>
</ol>Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com3tag:blogger.com,1999:blog-3479935392155018913.post-48416492843237875652011-11-14T06:08:00.001-08:002012-10-09T21:07:04.223-07:00PART 4 - Creating and editing a symbol - Introduction to Flash SymbolsYou can create a symbol out of any artwork that you draw or import onto the stage. In this tutorial, we'll draw a simple circle shape, convert it into a symbol, and then edit that symbol.<br />
<br />
<span class="tutorialStep">Step 1</span><br />
<br />
Create a new Flash document.<br />
<br />
<span class="tutorialStep">Step 2</span><br />
<br />
Select the oval tool and draw a circle on the stage. It can be in the merge drawing mode or object drawing mode. But I'll be drawing in the merge mode.<br />
<br />
<span class="tutorialStep">Step 3</span><br />
<br />
Switch to the selection tool and use it to select the circle on the stage. Make sure that you select the ENTIRE shape.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DU478C1bj4EpRLDGb-PskyIet2LviQaXLwhC7-a8jwcqKu-AhxcJhBa7GdIsLSlr3dzwxgAga76xMEKdU3ClxN-QQHpzZ4rlAoJCN3ZRyLqS-sjNJoKCkzeXO6TwvubFMv9TeCHY1X70/s1600/01-select-circle.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DU478C1bj4EpRLDGb-PskyIet2LviQaXLwhC7-a8jwcqKu-AhxcJhBa7GdIsLSlr3dzwxgAga76xMEKdU3ClxN-QQHpzZ4rlAoJCN3ZRyLqS-sjNJoKCkzeXO6TwvubFMv9TeCHY1X70/s400/01-select-circle.jpg" width="400" /></a></div><br />
<span class="tutorialStep">Step 4</span><br />
<br />
Once it's selected, right-click on the shape and choose Convert to Symbol.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgqsOqOVvzHnDvP6zAYA5LvJwhdr1pE-ModC4a0X3YpwBBqo8avRtCSqWsxU-_QslaSPdYXIpkhFzrivqm2tAlzgwu-dQeQ4k6qI7PDixz_JcdBuCFQI8ft5jbDr2r5Ntk7Yju6Tmd8Rf5/s1600/02-right-click-convert-to-symbol.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgqsOqOVvzHnDvP6zAYA5LvJwhdr1pE-ModC4a0X3YpwBBqo8avRtCSqWsxU-_QslaSPdYXIpkhFzrivqm2tAlzgwu-dQeQ4k6qI7PDixz_JcdBuCFQI8ft5jbDr2r5Ntk7Yju6Tmd8Rf5/s400/02-right-click-convert-to-symbol.jpg" width="302" /></a></div><br />
This will bring up the Convert to Symbol dialog box.<br />
<br />
<span class="tutorialStep">Step 5</span><br />
<br />
In the Convert to Symbol dialog box, change the name of the symbol to <b>Circle</b>. For the symbol type, click on the drop-down menu and choose <b>Graphic</b>. For the registration point, you can click on any of the nine tiny squares to select a point. We won't be discussing what the registration point is for in this tutorial, but for now, choose the <b>center registration point</b> by clicking on the tiny square that's in the center of all the tiny squares. The chosen registration point will turn black.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRYBBvbfE_IIHvPYa5Vv8cBkcp9-NvoanYhwzGkETHGtdn1aIDDrQWK1qvAv6ITAhEHEV6yU17J-_0uKQHcEREvob_6A_6HnjZ7tpWMzbj1QKDOfLfPyM_Rlv6Cq1UJBJLapFR14siTIFD/s1600/03-convert-to-symbol.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRYBBvbfE_IIHvPYa5Vv8cBkcp9-NvoanYhwzGkETHGtdn1aIDDrQWK1qvAv6ITAhEHEV6yU17J-_0uKQHcEREvob_6A_6HnjZ7tpWMzbj1QKDOfLfPyM_Rlv6Cq1UJBJLapFR14siTIFD/s400/03-convert-to-symbol.jpg" width="400" /></a></div><br />
Then click OK.<br />
<br />
The shape on the stage should now be converted into a symbol.<br />
<br />
<span class="tutorialStep">Step 6</span><br />
<br />
Open up the library to check that your new symbol is there. If you can't find the library, you can go to Window > Library or you can press ctrl + L (PC) or cmd + L (Mac) on your keyboard.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOpbR3JKF-mskTe67VXI5Rh06QX1dwz4Qjkpn7hfcQPKUxwNnTzE8gvRvBl6SXjBlr_El3cD6iw8A4Tlg5UWChVsw2VmIO_tWdUKr0PDeryQO4fCubFcVveCJkHVzhYEElsu_9WTXhl-oQ/s1600/04-lib.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="271" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOpbR3JKF-mskTe67VXI5Rh06QX1dwz4Qjkpn7hfcQPKUxwNnTzE8gvRvBl6SXjBlr_El3cD6iw8A4Tlg5UWChVsw2VmIO_tWdUKr0PDeryQO4fCubFcVveCJkHVzhYEElsu_9WTXhl-oQ/s400/04-lib.jpg" width="400" /></a></div><br />
<span class="tutorialStep">Step 7</span><br />
<br />
Add a few more instances of the symbol by clicking and dragging the symbol from the library down to the stage. In the image below, I've added a total of five instances to the stage.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgag2VAgh_dsiWXfTBj0GRJL6-GtBRTy6ZXJRYAUpCI8xFpd9vzlNbXmdttngI8MR67VUzn5PbKSmHdy1sAb6d9YACgzSwe9z3o4IBBiwlPlkXLNm51D43lrr6LRvzzwv2AKGtO-tGbRVoL/s1600/05-five-circles.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgag2VAgh_dsiWXfTBj0GRJL6-GtBRTy6ZXJRYAUpCI8xFpd9vzlNbXmdttngI8MR67VUzn5PbKSmHdy1sAb6d9YACgzSwe9z3o4IBBiwlPlkXLNm51D43lrr6LRvzzwv2AKGtO-tGbRVoL/s400/05-five-circles.jpg" width="400" /></a></div><br />
<span class="tutorialStep">Step 8</span><br />
<br />
Let's make some changes to the symbol by editing it. In the library, right-click on the symbol and choose Edit.<br />
<br />
<span class="tutorialStep">Step 9</span><br />
<br />
After clicking on Edit, take a look at the edit bar to make sure that you are inside the Circle symbol. The edit bar should say Scene 1 > Circle.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDIkI43QTIg73ERR-ZUSFFIzk0LjkhFGJiVhEeKq4ROC3_i6B6LsR6C2dmu5EbcRIFC1MlxDbwfBLTUD5qlM7nqyOGctu6Sf035i_g-sSswmYj3KTcZgcOxH0TdVhfhe6eVPZZt5UaoSyF/s1600/06-edit-bar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDIkI43QTIg73ERR-ZUSFFIzk0LjkhFGJiVhEeKq4ROC3_i6B6LsR6C2dmu5EbcRIFC1MlxDbwfBLTUD5qlM7nqyOGctu6Sf035i_g-sSswmYj3KTcZgcOxH0TdVhfhe6eVPZZt5UaoSyF/s1600/06-edit-bar.jpg" /></a></div><br />
<span class="tutorialStep">Step 10</span><br />
<br />
In the timeline, let's add another layer by clicking on the new layer button. So we should now have two layers.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAw2Q4GdUa9HC7qhiGHSbO8Ycpii_EgFP7dFerNNQJYrmis4CAqrGrGvNbbA3hKlqYJhJmzmyCv0fJYdeYCZ3qQ-GkecECm3tZsNVjrt3AZoWFUjXZeqj9i-L1ozTO8m00TeCLrbwamYG1/s1600/07-two-layers.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAw2Q4GdUa9HC7qhiGHSbO8Ycpii_EgFP7dFerNNQJYrmis4CAqrGrGvNbbA3hKlqYJhJmzmyCv0fJYdeYCZ3qQ-GkecECm3tZsNVjrt3AZoWFUjXZeqj9i-L1ozTO8m00TeCLrbwamYG1/s400/07-two-layers.jpg" width="400" /></a></div><br />
Remember! We are inside the Circle symbol so this means that the layer was added to the symbol's timeline and not the main timeline.<br />
<br />
<span class="tutorialStep">Step 11</span><br />
<br />
Select the brush tool and choose a color that's different from the color of the circle. Then make sure that the new layer that you just added is the active layer, and then draw a smiley face on top of the circle.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjC3S0ObXrOgFzdWy8eWYtq8HuzXyZk6d9snbEzO3FYqYkSEd14JjALMLJNG5FcTWZj0UaMqUZL7JOt_HHyTTcpG77LsHdvI9kCKLyQiNQ4QygVJafYMNeFeg-aNQpLOqIxfEnrvZpz6Gb/s1600/08-smileys.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjC3S0ObXrOgFzdWy8eWYtq8HuzXyZk6d9snbEzO3FYqYkSEd14JjALMLJNG5FcTWZj0UaMqUZL7JOt_HHyTTcpG77LsHdvI9kCKLyQiNQ4QygVJafYMNeFeg-aNQpLOqIxfEnrvZpz6Gb/s400/08-smileys.jpg" width="400" /></a></div><br />
<span class="tutorialStep">Step 12</span><br />
<br />
Go back to the main timeline by clicking on the Scene 1 link. You should see that all of the instances on the stage now have smiley faces.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM-Cd0ctFHbvAMq22T_HrYdLfUJjmvp2Nke69WdSBkCEmBSi1h7JO0JyEjhSi7xc_xANlQT-RpivutCjKcRx0dc2Atvk5KqhVoFxFPjeJXY1F089dMvD3K4RYdpnu4UQdbkscYvXYDfXPi/s1600/09-five-smileys.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM-Cd0ctFHbvAMq22T_HrYdLfUJjmvp2Nke69WdSBkCEmBSi1h7JO0JyEjhSi7xc_xANlQT-RpivutCjKcRx0dc2Atvk5KqhVoFxFPjeJXY1F089dMvD3K4RYdpnu4UQdbkscYvXYDfXPi/s400/09-five-smileys.jpg" width="400" /></a></div><br />
<div class="genericSeparator"></div><br />
Congratulations! You've just created and edited your own symbol. <br />
<br />
<span class='tutorialSectionTitle'>Try this on your own</span><br />
<br />
<ul><li>Draw two circles on the stage.</li>
<li>Convert each circle into a graphic symbol.</li>
<li>Go inside each symbol's timeline and draw a face on the circle.</li>
<li>Use multiple layers to separate the parts (eyes, nose, lips, etc...) of each face.</li>
</ul><br />
And that concludes this tutorial series on an Introduction to Flash symbols.<br />
<br />
<a href="http://www.flashpotential.com/2011/11/part-3-3-types-of-symbols-introduction.html"><b><< PREV:</b> The 3 types of symbols - Introduction to Flash Symbols PART 3</a>Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com1tag:blogger.com,1999:blog-3479935392155018913.post-75842511965666498452011-11-14T02:40:00.000-08:002011-11-14T06:29:51.186-08:00PART 3 - The 3 types of symbols - Introduction to Flash SymbolsThe three types of symbols in Flash are:<br />
<br />
<b>Graphic</b><br />
Use graphic symbols for static artwork and animation that you do not plan on adding any interactive functionality to. The reason for this is that you'll need ActionScript to add interactivity, and graphic symbols are not designed to work with ActionScript.<br />
<br />
<b>Button</b><br />
Use button symbols if you want to add mouse-related interactivity such as clicks and roll overs to your Flash movie. For example, you could create a button that plays a song whenever it is clicked. <br />
<br />
<b>Movie Clip</b><br />
The movie clip symbol is like a combination of graphics, buttons and more. It can be used for static artwork and animation, but it can also be used with ActionScript so that interactive functionality can be added to it. But unlike buttons, movie clips are capable of much more than mouse-related interactivity.<br />
<br />
<div class="genericSeparator"></div><br />
There's a lot more to learn about each type of symbol, but I will be covering them in later tutorials. For now, let's move on to the next part of this series where we will learn how to create a symbol from scratch.<br />
<br />
<a href="http://www.flashpotential.com/2011/11/part-2-going-inside-symbols-timeline.html"><b><< PREV:</b> Going inside a symbol's timeline - Introduction to Flash Symbols PART 2</a><br />
<br />
<div style="text-align: right;"><a href="http://www.flashpotential.com/2011/11/part-4-creating-and-editing-symbol.html">Creating and editing a symbol - Introduction to Flash Symbols - PART 4<b>: NEXT >></b></a></div>Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com5tag:blogger.com,1999:blog-3479935392155018913.post-69537999459394432012011-11-14T01:56:00.001-08:002011-11-14T02:42:22.783-08:00PART 2 - Going inside a symbol's timeline - Introduction to Flash SymbolsWhenever you create a symbol, it's automatically going to have it's own timeline. Inside a symbol's timeline, you can also add layers and frames the same way you would on the main timeline.<br />
<br />
Let's go ahead and take a look at the Car symbol's timeline.<br />
<br />
<span class="tutorialStep">Step 1</span><br />
<br />
Before we access the Car symbol's timeline, let's first take a look at the edit bar found at the top of the document window.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie3sPzxsP4fMJ0sAqvc0hvB3mX8y8w3s9nPVKsjLbIcBL0oSeDa9B0TeSRp1SpzKZS5vcg97CU6S5QVgxaFFHJ93iS_bUsR0irwceGc9unxgIBJlIKp_oLcxxGgY-cR7lWaguV0D3BCKJO/s1600/01-scene-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie3sPzxsP4fMJ0sAqvc0hvB3mX8y8w3s9nPVKsjLbIcBL0oSeDa9B0TeSRp1SpzKZS5vcg97CU6S5QVgxaFFHJ93iS_bUsR0irwceGc9unxgIBJlIKp_oLcxxGgY-cR7lWaguV0D3BCKJO/s1600/01-scene-1.jpg" /></a></div>
<br />
The edit bar tells you where you are in your Flash document. Right now, the edit bar says Scene 1, which means that we are on the main timeline.<br />
<br />
<span class="tutorialStep">Step 2</span><br />
<br />
To access a symbol's timeline, we'll need to edit it.<br />
<br />
Go to the library, right-click on the Car symbol then choose Edit.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDuLWA4o0KtX1b3jD2QkpTs_rll9mJg-uQO5e9R9H_agmpK9PqmOoTz3WwlhGB2hE7DYOOhwPT5MSwCYp_QzLYeWghgjdCNhtgeim4Lumj5RZHJO9wuxAQy81409A1_HjDr4D50o41Zm1Z/s1600/02-edit.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDuLWA4o0KtX1b3jD2QkpTs_rll9mJg-uQO5e9R9H_agmpK9PqmOoTz3WwlhGB2hE7DYOOhwPT5MSwCYp_QzLYeWghgjdCNhtgeim4Lumj5RZHJO9wuxAQy81409A1_HjDr4D50o41Zm1Z/s400/02-edit.jpg" width="302" /></a></div>
<br />
After you click on Edit, take a look at the edit bar again. You should now see that it says Scene 1 > Car. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVVZA6N44KvzdjfaKTT6Fwjdrranb-RO1x2hogqODfk7P7WQM7auOoJeXBbydnzp4t0Nwk2AV89Acggq6gqR320UKTwhJAt1qtZ2LMM02Aoi1Z6SkARQx9lzJtHy97Cx7kvpD1QifljKjs/s1600/03-inside-car-timeline.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVVZA6N44KvzdjfaKTT6Fwjdrranb-RO1x2hogqODfk7P7WQM7auOoJeXBbydnzp4t0Nwk2AV89Acggq6gqR320UKTwhJAt1qtZ2LMM02Aoi1Z6SkARQx9lzJtHy97Cx7kvpD1QifljKjs/s1600/03-inside-car-timeline.jpg" /></a></div>
<br />
This means that we are now inside the Car symbol's timeline. So whatever changes that we make here will apply to the Car symbol. If we draw something on the stage, it will become a part of the Car symbol. If we add layers to the timeline, then those layers will belong to the Car symbol.<br />
<br />
If you look at the symbol's timeline in our exercise file, you'll see that it already has a couple of layers.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXeW7-11lhFldOiQtKa5DMTHLGYBCmeNhyphenhyphennQKy4kbiP7xUgS8nx_GkUpGEGkuiuQqpe4oNl7V_tEKuiKbyKKJfiLSrpK9tQ-6rpcDXvj9qtIihz38r2TBqJjxLVa3mvjA2lbXaOsoRiwPE/s1600/04-car-layers.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXeW7-11lhFldOiQtKa5DMTHLGYBCmeNhyphenhyphennQKy4kbiP7xUgS8nx_GkUpGEGkuiuQqpe4oNl7V_tEKuiKbyKKJfiLSrpK9tQ-6rpcDXvj9qtIihz38r2TBqJjxLVa3mvjA2lbXaOsoRiwPE/s400/04-car-layers.jpg" width="400" /></a></div>
<br />
When this symbol was created, the artwork was separated into different layers within the symbol's timeline. This means that the layers that you see here, they belong to the Car symbol's timeline and NOT the main timeline.<br />
<br />
It's not a requirement to use multiple layers inside a symbol's timeline, but you do have that option if you wish to make things more organized. Managing layers inside a symbol's timeline is no different from managing layers on the main timeline. You can add, delete, rename, move, hide, and lock layers just like you would on the main timeline.<br />
<br />
<span class="tutorialStep">Step 3</span><br />
<br />
Let's make a small change to the symbol. Using the paint bucket tool, change the color of the car's body.<br />
<br />
First, select the paint bucket tool, and click on the fill color box to select any new color that you like. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0lkQhSg510aP2mu8wEO5hEaSom6HFR_8Zz11jB4NJYZ2PQV11N9uudoGzKiVSUdhPUl6JRqqN2jgH2yPQvJh5vR91H1JJbwgmH1xlACMkhJWsDqjS-iFw5NjpyhmpX8gFuwoopv48UOCS/s1600/05-paint-bucket.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="317" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0lkQhSg510aP2mu8wEO5hEaSom6HFR_8Zz11jB4NJYZ2PQV11N9uudoGzKiVSUdhPUl6JRqqN2jgH2yPQvJh5vR91H1JJbwgmH1xlACMkhJWsDqjS-iFw5NjpyhmpX8gFuwoopv48UOCS/s400/05-paint-bucket.jpg" width="400" /></a></div>
<br />
Then position the paint bucket tool over the car's red body and click on it to apply the new color. You don't have to worry about accidentally editing the contents of the other layers, because the other layers are currently locked.<br />
<br />
So now, you should have a new color for the car's body.<br />
<br />
<span class="tutorialStep">Step 4</span><br />
<br />
After we've made changes to the symbol, let's now go back to the main timeline. To go back to the main timeline, click on the Scene 1 link in the edit bar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrH7p8iMCAVCNwy82_pGAu0YRUC12emoNPmV954unUW6DxFGfR0pp1CXATzohdRpYFuPAGAfB3yOhMJ3fIOriHRljJAX0rFK4AHBShjlTUXdWkAOAqbROt_RUgT69GHGcLRTlCD5XbvJTu/s1600/06-scene-1-link.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrH7p8iMCAVCNwy82_pGAu0YRUC12emoNPmV954unUW6DxFGfR0pp1CXATzohdRpYFuPAGAfB3yOhMJ3fIOriHRljJAX0rFK4AHBShjlTUXdWkAOAqbROt_RUgT69GHGcLRTlCD5XbvJTu/s1600/06-scene-1-link.jpg" /></a></div>
<br />
When you go back to the main timeline, you'll notice a few things:<br />
<br />
<ol>
<li>The edit bar now says Scene 1, which confirms that we are back on the main timeline.</li>
<li>The timeline no longer shows the layers of the Car symbol's timeline, because we are now back on the main timeline.</li>
<li>All three instances of the Car symbol have the new color applied to them. Because we edited the Car symbol and changed the color of the car, all the instances will reflect the same changes as well. Since the symbol is the master copy of all the instances, making changes to the master copy affects all the instances that exist in the Flash document.</li>
</ol>
<br />
This is another benefit of working with symbols, if you decide to make changes to the symbol by editing it, then all the instances will reflect the changes, thus helping you save more time.<br />
<br />
<div class="genericSeparator">
</div>
<br />
In the next part of this tutorial series, we'll take a quick look at the different types of symbols.<br />
<a href="http://www.flashpotential.com/2011/11/part-1-what-is-symbol-introduction-to.html"><br />
<b><< PREV:</b> What is a symbol? - Introduction to Flash Symbols PART 1</a><br />
<br />
<div style="text-align: right;">
<a href="http://www.flashpotential.com/2011/11/part-3-3-types-of-symbols-introduction.html">The 3 types of symbols - Introduction to Flash Symbols PART 3<b>: NEXT >></b></a></div>Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com0tag:blogger.com,1999:blog-3479935392155018913.post-75995081098349013362011-11-14T01:27:00.000-08:002013-06-18T23:23:46.445-07:00PART 1 - What is a symbol? - Introduction to Flash Symbols<b>This article comes with exercise files. Click on the link below to download:</b><br />
<a href="https://sites.google.com/site/flashpotentialfiles/exercise-files-what-is-a-symbol---introduction-to-flash-symbols---part-1">[GO TO EXERCISE FILES DOWNLOAD PAGE]</a><br />
<br />
In this tutorial series, we're going to learn about Flash symbols. <br />
<br />
<span class="tutorialSectionTitle">What is a Flash symbol?</span><br />
<br />
In Flash, a symbol is a reusable object that is stored inside a Flash document's library. For example, you can draw a shape and then convert it into a symbol. Once converted, it gets stored in the Flash document's library. Then from the library, you can easily make multiple copies of the symbol without having to recreate it. You can turn anything that you draw into symbols. You can also import graphics from other sources and turn those into symbols as well.<br />
<br />
Let's learn more about symbols by working on an existing example. In this first part, we'll take a look at a symbol that's already been created for you.<br />
<br />
<span class="tutorialStep">Step 1</span><br />
<br />
Open up the <b>intro-to-symbols.fla</b> file. When the file launches, you won't see the symbol yet. Just move on to step 2.<br />
<br />
<span class="tutorialStep">Step 2</span><br />
<br />
Switch to the Small Screen workspace so that your layout becomes similar to the layout in the screenshots in this tutorial. This will help you follow along more easily.<br />
<br />
To switch to the layout, go to Window > Workspace > Small Screen.<br />
<br />
Then go to Window > Workspace > Reset 'Small Screen'.<br />
<br />
<span class="tutorialStep">Step 3</span><br />
<br />
Open up the library by clicking on the library panel icon.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkyamEKxHThAsraCG19SqAOxbGrnRg8SVjnoULUK-7bDQe6xupeJ7kXtqSnhC-nHMIBtG7g1tHRQQd1NGOST9fVYirH0mdpWsv7EUP4ddbnWDG_un5xzPmxFugDr249har4SpxbG1fKyp0/s1600/01-library-button.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkyamEKxHThAsraCG19SqAOxbGrnRg8SVjnoULUK-7bDQe6xupeJ7kXtqSnhC-nHMIBtG7g1tHRQQd1NGOST9fVYirH0mdpWsv7EUP4ddbnWDG_un5xzPmxFugDr249har4SpxbG1fKyp0/s400/01-library-button.jpg" width="400" /></a></div>
<br />
This will bring up the Flash document's library. Inside it is a symbol named Car. Click on the name in order to see the symbol in the library's preview window (the preview window is that white area below the Library tab, and it's where you'll be able to preview what the symbol looks like). <b>DO NOT DOUBLE-CLICK ON IT. JUST CLICK ON IT ONCE IN ORDER TO SELECT IT.</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0j-uaYtO1igBqy5ozixH3iIx_cUswIRJHrxhJ2u8gqMyjiT5hHg-1W_oytbOaCVCazJpgfRWUNOgsM3ywa9KLcKIUk3KvdGT2nwf-N6GaG7rItj51bQqQGMKfD4fHRvak4WqfDmTcOs8I/s1600/02-library.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0j-uaYtO1igBqy5ozixH3iIx_cUswIRJHrxhJ2u8gqMyjiT5hHg-1W_oytbOaCVCazJpgfRWUNOgsM3ywa9KLcKIUk3KvdGT2nwf-N6GaG7rItj51bQqQGMKfD4fHRvak4WqfDmTcOs8I/s400/02-library.jpg" width="282" /></a></div>
<br />
This symbol was created from artwork that was drawn on the stage using the drawing tools. The artwork was then converted into a symbol and it was given the name <b>Car</b>.<br />
<br />
<span class="tutorialStep">Step 4</span><br />
<br />
To use the symbol, click and drag it from the library down to the stage.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR3s9mBmSN90vhlLCBvIz4z0cDR9GRaIIhuwUVXzmXDhkLUAIkSIurlMau7tVFj_5kMi7F6wtGb4gd7HeFXCZdvIUNedF7fHnOmlojur4DjdZJgp6mNtqBxycPVOR6bHfK4fmpo5H_dUiM/s1600/03-drag-instance.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR3s9mBmSN90vhlLCBvIz4z0cDR9GRaIIhuwUVXzmXDhkLUAIkSIurlMau7tVFj_5kMi7F6wtGb4gd7HeFXCZdvIUNedF7fHnOmlojur4DjdZJgp6mNtqBxycPVOR6bHfK4fmpo5H_dUiM/s400/03-drag-instance.jpg" width="400" /></a></div>
<br />
Once you release the mouse, you should see the car on the stage. <br />
<br />
This car that you see on the stage is simply a copy of the symbol from the library. It is referred to as an <b>instance</b> of the symbol. If the instances on the stage are copies, then you can think of the symbol in the library as the master copy. So if you delete the master copy in the library, then all the instances will disappear. However, if you delete an instance on the stage, the master copy in the library remains.<br />
<br />
<span class="tutorialStep">Step 5</span><br />
<br />
You can add multiple instances of one symbol onto the stage. This is what it means when we say that symbols are reusable. You only need to draw them once, and then you can add them to your Flash movie as many times as needed.<br />
<br />
To add more instances of the Car symbol, just click and drag more instances from the library onto the stage. Let's add two more instances.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDF2AkNJNiYiyYIsw2CTrAgCSyT2PHlTH4egWl6GHa6v23x2-mat1El0i2kDjypHkDcxMS-tOPQIJ4viAUs6GOd91iLlAiHPqQCCkhQO8b75sdpZeNxuPsVaN_0n0eq9b9w6NE1EZ1bcva/s1600/04-more-instances.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDF2AkNJNiYiyYIsw2CTrAgCSyT2PHlTH4egWl6GHa6v23x2-mat1El0i2kDjypHkDcxMS-tOPQIJ4viAUs6GOd91iLlAiHPqQCCkhQO8b75sdpZeNxuPsVaN_0n0eq9b9w6NE1EZ1bcva/s400/04-more-instances.jpg" width="400" /></a></div>
<br />
This is one of the main benefits of working with symbols - you only need to create it once, but you can reuse it multiple times, so you end up saving time. Using symbols also helps save file space since multiple instances only come from a single copy. If, instead of using symbol instances, you decided to redraw the car three times, you would actually end up with a SWF file that has a larger file size. <br />
<br />
<div class="genericSeparator">
</div>
<br />
And that concludes the first part of this tutorial series. In the next part, we'll learn about the symbol's timeline. Each symbol that you make has it's own timeline where you can also add layers and frames. We'll take a look at how to access that timeline in the next part.<br />
<br />
<div style="text-align: right;">
<a href="http://www.flashpotential.com/2011/11/part-2-going-inside-symbols-timeline.html">Going inside a symbol's timeline - Introduction to Flash Symbols PART 2<b>: NEXT >></b></a></div>
Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com0tag:blogger.com,1999:blog-3479935392155018913.post-46466824573454764832011-11-09T07:44:00.000-08:002012-06-15T10:09:36.925-07:00Working with layers - Flash CS5 Beginners TutorialThe timeline, pictured below, allows you to separate your artwork into multiple layers. In the image below, you'll see that this timeline has 3 layers, each with a generic label - Layer 1, Layer 2, and Layer 3. In this tutorial, we'll learn what layers are all about.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU4dvJ-Mb5Jr6ZRzLyhYlen2krJo4MRZFTHLm-99i6J1ZxyeS39-IhHpzXeUPMzdayxHIsR13qCL-t5Xxb9J8Ksat6wzo8nVnvTk8ZbgoJoL74uvwkOqCg5sBErOXZmGT2Elj_Y6eJJlLA/s1600/01-timeline.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU4dvJ-Mb5Jr6ZRzLyhYlen2krJo4MRZFTHLm-99i6J1ZxyeS39-IhHpzXeUPMzdayxHIsR13qCL-t5Xxb9J8Ksat6wzo8nVnvTk8ZbgoJoL74uvwkOqCg5sBErOXZmGT2Elj_Y6eJJlLA/s400/01-timeline.jpg" width="400" /></a></div>
<br />
<b>What are layers?</b> <br />
Think of layers as separate sheets of transparent paper that you can draw on. Let's take a look at the images below and imagine that each image is a separate layer that has been drawn on.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYxIIReFZvPAVWkFFpzE35Et7FHhUCqUsreeFpQs7N9vHWTtcpo4F53BG1_NFFzQvLsZ4p0MbyXlZ4yaPAHpR9t2_COjzmWCf-YDgzAeguhXD7zq0r6HlUSRIqBkbNwNQflwREPp9P0kf9/s1600/02-01-clouds.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYxIIReFZvPAVWkFFpzE35Et7FHhUCqUsreeFpQs7N9vHWTtcpo4F53BG1_NFFzQvLsZ4p0MbyXlZ4yaPAHpR9t2_COjzmWCf-YDgzAeguhXD7zq0r6HlUSRIqBkbNwNQflwREPp9P0kf9/s400/02-01-clouds.jpg" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvsa8c7vCx2ZMqSrSyItzvL9NRmp0Rn2HzCLlt5Pyvy6WjUZdPpMunBhAfBzSLjB5TxInVFsQNGBH0FaKxJby6S8788BNA116Bbog_OLZ_aJWNoftsVMIIGgS0tOW94UmOcQCUMbR2mVtb/s1600/02-02-sun.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvsa8c7vCx2ZMqSrSyItzvL9NRmp0Rn2HzCLlt5Pyvy6WjUZdPpMunBhAfBzSLjB5TxInVFsQNGBH0FaKxJby6S8788BNA116Bbog_OLZ_aJWNoftsVMIIGgS0tOW94UmOcQCUMbR2mVtb/s400/02-02-sun.jpg" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5HJjqX4cGKnKgRXj5gBx5qU1-s7RQIY01APkA_J2eizckds-llr_djjm8T65xJd6BYE5DwVL6dgJ7_XSRDxjzlTHszTGocIbsKzTmY1e7mP9B9A6Mef9Ok5J_KWKpdLJ7Ba11EpM6jLET/s1600/02-03-water.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5HJjqX4cGKnKgRXj5gBx5qU1-s7RQIY01APkA_J2eizckds-llr_djjm8T65xJd6BYE5DwVL6dgJ7_XSRDxjzlTHszTGocIbsKzTmY1e7mP9B9A6Mef9Ok5J_KWKpdLJ7Ba11EpM6jLET/s400/02-03-water.jpg" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_klp7qVpzLqAmSIve6i8il3__0YIJOqDwtsbrRneRXN08-T2CoQhS7Y-wLYQLQZ8KBr0I7GENfYY6He2Wa2LdquZPqLZ9oYmgZ2JD5-3pnjAMdqsRdtUZwr8uEFNXU-qvJrkZAMyIns5i/s1600/02-04-ship.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_klp7qVpzLqAmSIve6i8il3__0YIJOqDwtsbrRneRXN08-T2CoQhS7Y-wLYQLQZ8KBr0I7GENfYY6He2Wa2LdquZPqLZ9oYmgZ2JD5-3pnjAMdqsRdtUZwr8uEFNXU-qvJrkZAMyIns5i/s400/02-04-ship.jpg" width="400" /></a></div>
<br />
The way layers work is that they are placed on top of each other to create the illusion that everything was drawn on one sheet. But in reality, they're all on separate layers. The image below shows how the layers above will look like if they were all stacked together.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNOkr9pTx1mOdbXjOwwpGKlvQv1zwcgkJG1gND7PE6Bc7Lj38mxd8Uv5xj8n5jdJvJKruuTTZpi3dCcz-BpKx6SQ1_fMYz8y_96abPPW__nH3wEadwmv2WMFrAhT-Q3uUf-ZStPbpP3WxD/s1600/03-ocean.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNOkr9pTx1mOdbXjOwwpGKlvQv1zwcgkJG1gND7PE6Bc7Lj38mxd8Uv5xj8n5jdJvJKruuTTZpi3dCcz-BpKx6SQ1_fMYz8y_96abPPW__nH3wEadwmv2WMFrAhT-Q3uUf-ZStPbpP3WxD/s1600/03-ocean.jpg" /></a></div>
<br />
It looks as if it's just one image, but in reality, we will be able to work on each layer separately. This is the benefit of working with multiple layers. Flash has features that allow you to lock and hide other layers so that you can focus only on the layers that you want to edit. Knowing how to work with layers will really help keep your Flash project more organized.<br />
<br />
<span class="tutorialStep">Adding layers</span><br />
<br />
By default, your timeline will already have one layer when you create a new Flash document. To add another layer, click on the new layer button at the bottom of the timeline.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCrxn1Q6VftW4LF5-0XMxu8BFWfV7Z0euQXluMW4T-3IooIoyFpO_roOouFNbIu4HMwrqyLdQJP4VVUZb6S757IyOigA_Q6ymfavYTsYvjoNbcQ3mPuDst0zl3LeNOh3YWQSc2XGfMIU4a/s1600/04-add-layer-button.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCrxn1Q6VftW4LF5-0XMxu8BFWfV7Z0euQXluMW4T-3IooIoyFpO_roOouFNbIu4HMwrqyLdQJP4VVUZb6S757IyOigA_Q6ymfavYTsYvjoNbcQ3mPuDst0zl3LeNOh3YWQSc2XGfMIU4a/s1600/04-add-layer-button.jpg" /></a></div>
<br />
Each time you click on the new layer button, one layer is added to the timeline.<br />
<br />
In the image below, there are 3 layers.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvvTmFYoui8D5m2iHFstXdadT5XuqkGbqBVcXUjVgwz_vxCQB-tRscTfH6JlpC8YM5v2F7lArItIyU3CsWCL-NnJEXnOwFuoMGOlh9OrtmIHkMJLzMgZHNliOApCxmzCOV5w63jtnuxhSC/s1600/05-3-layers.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvvTmFYoui8D5m2iHFstXdadT5XuqkGbqBVcXUjVgwz_vxCQB-tRscTfH6JlpC8YM5v2F7lArItIyU3CsWCL-NnJEXnOwFuoMGOlh9OrtmIHkMJLzMgZHNliOApCxmzCOV5w63jtnuxhSC/s1600/05-3-layers.jpg" /></a></div>
<br />
<span class="tutorialStep">Deleting layers</span><br />
<br />
To delete a layer, you must first click on it in order to select it. In the image below, I clicked on layer 2 in order to select it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3EANAXQZzW7PzOld_bP1zTaaiNr3aV1sMp7CeuNUZlRHQeg2nfSQryxqJylw3y7HYWAPQF4Wr-SRR7FaT_ZBdS3tTjF5x47_n5pard4WtuVWWhozWJi6FoNn_NsPJvFVhB1Rrygr_-x6L/s1600/06-select-layer-to-delete.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3EANAXQZzW7PzOld_bP1zTaaiNr3aV1sMp7CeuNUZlRHQeg2nfSQryxqJylw3y7HYWAPQF4Wr-SRR7FaT_ZBdS3tTjF5x47_n5pard4WtuVWWhozWJi6FoNn_NsPJvFVhB1Rrygr_-x6L/s1600/06-select-layer-to-delete.jpg" /></a></div>
<br />
Once the layer is selected, click on the trash can at the bottom of the timeline in order to delete the selected layer.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7W0JzWEs7-npSLC353zcVv8EehiDggUCiXBlH6mtiobJljILADYPY0XlHNM3UCEy-fZMVhqHErlAKFu9pSepfkXYUIc9Pt06c5nxM-lSCdPj36tovV_6WC2eGwvpwWht1yBkYKbbSWXcp/s1600/07-trash.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7W0JzWEs7-npSLC353zcVv8EehiDggUCiXBlH6mtiobJljILADYPY0XlHNM3UCEy-fZMVhqHErlAKFu9pSepfkXYUIc9Pt06c5nxM-lSCdPj36tovV_6WC2eGwvpwWht1yBkYKbbSWXcp/s1600/07-trash.jpg" /></a></div>
<br />
Once you delete a layer, all of its contents are delete along with it.<br />
<br />
<span class="tutorialStep">Selecting a layer to draw on</span><br />
<br />
To draw on a layer, you must make sure that it is selected by clicking on it. In the image below, layer 3 is selected and is therefore the active layer. You'll know that the layer is active because it's highlighted.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXVEPgAQ_iiP3rrtlNxv-AtYEe93r3rdWODculI6QEhm7opTtm293rYIj0GEJFpexgw-nENR0-QJ24UOqnACNe_HWI2_0Mcm8xyICXDGtsg6BtmRmqLQPZWRkFs8Ib6oQq9cDWBAMzaKsN/s1600/08-active+layer.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXVEPgAQ_iiP3rrtlNxv-AtYEe93r3rdWODculI6QEhm7opTtm293rYIj0GEJFpexgw-nENR0-QJ24UOqnACNe_HWI2_0Mcm8xyICXDGtsg6BtmRmqLQPZWRkFs8Ib6oQq9cDWBAMzaKsN/s1600/08-active+layer.jpg" /></a></div>
<br />
Once the layer is selected, you can then proceed to draw on the stage. Anything you draw will be placed in the active layer. In the image below, the circle was drawn while layer 3 was the active layer. So this means that the circle is on layer 3.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfK6sZH3psrVXqCtbaAVMnzRbc7j68Xf5QQUseSTl3Niyfig3ZmxZzHuyEs0gTp18mx9dMlRjZUNkkCCfErvXrkI4s4gxPfFrkLsiT810XiPcKMbBkkHtmZTcBe-vmyBJ8P5JbCpdW5w8T/s1600/09-circle-on-layer-3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfK6sZH3psrVXqCtbaAVMnzRbc7j68Xf5QQUseSTl3Niyfig3ZmxZzHuyEs0gTp18mx9dMlRjZUNkkCCfErvXrkI4s4gxPfFrkLsiT810XiPcKMbBkkHtmZTcBe-vmyBJ8P5JbCpdW5w8T/s400/09-circle-on-layer-3.jpg" width="400" /></a></div>
<br />
If you wish to draw on layer 2, then make sure that you click on layer 2 in order to make it the active layer. Then proceed to draw on the stage once the desired layer has been selected.<br />
<br />
<b>NOTE:</b> Always be mindful of which layer is currently active. It's quite common for Flash users to make the mistake of drawing on the wrong layer, so always check the timeline to see which layer is highlighted.<br />
<br />
<span class="tutorialStep">Renaming layers</span><br />
<br />
To rename a layer, position the mouse pointer on top of the layer name, and then double-click it in order to make it editable.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVGQKx2pbou9LRVgSfz5Pl-1KmvAt3N5supIbiMb7CWwv12TmNS2RaTDrG845NYBgkSKc-gpYw0Bby2jzhQ0c6H7GQ_IP1hdaQauH-UZFb0ffNOYzkXNrmUNE2cOS7YZniorilxHwvgPlG/s1600/10-double-click-layer-name.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVGQKx2pbou9LRVgSfz5Pl-1KmvAt3N5supIbiMb7CWwv12TmNS2RaTDrG845NYBgkSKc-gpYw0Bby2jzhQ0c6H7GQ_IP1hdaQauH-UZFb0ffNOYzkXNrmUNE2cOS7YZniorilxHwvgPlG/s1600/10-double-click-layer-name.jpg" /></a></div>
<br />
Once the text is editable, type in the new name and hit the enter (PC) or return (Mac) key.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsWUYfUnbdK5FGBp4NGBKzL7UBfwFZdGjDPC21pafjf6it4hhHPU9U1o7xBRZzhB-Lxro1-0AO40AbeE2jny7l1_M-kwa08_r-TZqE1OcYDyyr0lAKF4JfG8eHHNFqKaqW3LE5f6_s30IK/s1600/11-name-is-now-circle.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsWUYfUnbdK5FGBp4NGBKzL7UBfwFZdGjDPC21pafjf6it4hhHPU9U1o7xBRZzhB-Lxro1-0AO40AbeE2jny7l1_M-kwa08_r-TZqE1OcYDyyr0lAKF4JfG8eHHNFqKaqW3LE5f6_s30IK/s1600/11-name-is-now-circle.jpg" /></a></div>
<br />
It's a good idea to make the layer name descriptive of the layer's contents. If the layer contains a circle shape, then you might want to consider naming it circle as well. Using descriptive names will make layers easier to find and manage. Imagine having 100 layers named layer 1, layer 2, layer 3, all the way up to layer 100! That's going to make it difficult to find which objects are on which layers. <br />
<br />
<span class="tutorialStep">Reordering Layers</span><br />
<br />
In the image below, there are two shapes on the stage - a circle and a square. The circle is at the back, and the square is in front of it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSmesaGGuiR-v4hyphenhyphenLsGVcYVlPUm_uElbJIBBTklH7Fk0qfHs2X21kXU75jmmgPcN3Qe0x1dYfMZdgoW4iVhVGzdNMeL0BYizxiED5mqcJFAuXuIDmUB3g4EHUFBFkpvOxoSs4JFyL3m7Kn/s1600/12-circle-square.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSmesaGGuiR-v4hyphenhyphenLsGVcYVlPUm_uElbJIBBTklH7Fk0qfHs2X21kXU75jmmgPcN3Qe0x1dYfMZdgoW4iVhVGzdNMeL0BYizxiED5mqcJFAuXuIDmUB3g4EHUFBFkpvOxoSs4JFyL3m7Kn/s400/12-circle-square.jpg" width="400" /></a></div>
<br />
Each shape is on its own layer. The square shape was drawn on the layer named square, while the circle shape was drawn on the layer named circle.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQPm5MSdvsE95tncI-QhrIlwPzhkG1sA67M2ncPuKlXbTWf6SDzsAryv9YWlJ_JbhO0Q-P1wTijU19aFrTEu8NXexM9oBj5bpphRdeKysbPFQqobBPoZJJn-ezOTayOWPdEfXgFHME3h3N/s1600/13-circle-square-layers.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQPm5MSdvsE95tncI-QhrIlwPzhkG1sA67M2ncPuKlXbTWf6SDzsAryv9YWlJ_JbhO0Q-P1wTijU19aFrTEu8NXexM9oBj5bpphRdeKysbPFQqobBPoZJJn-ezOTayOWPdEfXgFHME3h3N/s1600/13-circle-square-layers.jpg" /></a></div>
<br />
Here, you see that the circle layer is below the square layer. That is why the circle appears behind the square on the stage - the contents of the lower layer always appear behind the contents of the higher layer.<br />
<br />
To move a layer, simply click and drag it. Drag up to move it higher or drag down to move it lower.<br />
<br />
Once you start dragging, you'll see a black bar appear on top of the selected layer. In the image below, I clicked on the circle layer and began dragging upward.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxc6nW7vOoSmeqh_vxSxlRkERQOxWSzxav39nzkKG5vzsCmEQdVQsdxXWoq0ER8uXKQiMWoyTjP7zEkasxLtsKkUxcreu8dDgNCB3uS1PCj1DX2SJBuMate_5VSZCkMt3kLlaoCNXTQh_1/s1600/14-black-bar-on-circle-layer.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxc6nW7vOoSmeqh_vxSxlRkERQOxWSzxav39nzkKG5vzsCmEQdVQsdxXWoq0ER8uXKQiMWoyTjP7zEkasxLtsKkUxcreu8dDgNCB3uS1PCj1DX2SJBuMate_5VSZCkMt3kLlaoCNXTQh_1/s1600/14-black-bar-on-circle-layer.jpg" /></a></div>
<br />
If you keep dragging higher or lower, then that black bar moves higher or lower as well. In the image below, I continued to drag upward so that the black bar is now on top of the square layer. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS9yb-YMilGyOvR3EaIyNHi6q59ycuDRmZ_5h5THAicOeNJ_UKL3-PDS-ta1x2gK9BaUlw2S4JL8bjc3xFvO-zfllH_sinnL6cx85u8RTR9Ri5iM2WChctGx9lybJULD4swks4jEBrNAbx/s1600/15-black-bar-on-square-layer.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS9yb-YMilGyOvR3EaIyNHi6q59ycuDRmZ_5h5THAicOeNJ_UKL3-PDS-ta1x2gK9BaUlw2S4JL8bjc3xFvO-zfllH_sinnL6cx85u8RTR9Ri5iM2WChctGx9lybJULD4swks4jEBrNAbx/s1600/15-black-bar-on-square-layer.jpg" /></a></div>
<br />
So when I release the mouse, the circle layer will now be on top of the square layer. And on the stage, the circle will now appear in front of the square.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6n4QcCrPvdjYGHcaejND-KvY2PLxgu-qcZdhYC03UzEmBPATGeHitd5jA8EwDbQwKgoFckr8yTcOD3Dzv7QVSUduuBBNN-rkW99alphFZJChaHefGpswmFAQdqVF6H4Z0fCV3ooeCoDHV/s1600/16-circle-now-in-front.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6n4QcCrPvdjYGHcaejND-KvY2PLxgu-qcZdhYC03UzEmBPATGeHitd5jA8EwDbQwKgoFckr8yTcOD3Dzv7QVSUduuBBNN-rkW99alphFZJChaHefGpswmFAQdqVF6H4Z0fCV3ooeCoDHV/s400/16-circle-now-in-front.jpg" width="400" /></a></div>
<br />
<span class="tutorialStep">Hiding layers</span><br />
<br />
If you want to hide a layer and all of its contents, look for the eye icon and click on the dot that corresponds to the layer that you want to hide.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF6Y3uZ6aZMRd-4tcF8kPd5635NrmjFnvbdxQoi1_u68bOhjNw6iDUt82CPh70lyqgs5Xnv98hbxqMYnV5FBYwxfB_xkBVL4I9grmMDIlqGAOB0G4gp-QfBzEGKI5IqoO600JwIuq7wNaH/s1600/17-click-on-dot.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF6Y3uZ6aZMRd-4tcF8kPd5635NrmjFnvbdxQoi1_u68bOhjNw6iDUt82CPh70lyqgs5Xnv98hbxqMYnV5FBYwxfB_xkBVL4I9grmMDIlqGAOB0G4gp-QfBzEGKI5IqoO600JwIuq7wNaH/s1600/17-click-on-dot.jpg" /></a></div>
<br />
Once you click on the dot, it's going to be replaced with an X. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpxMTGrBsY7EtgQxXb7gDiumU0p1_AVEWqoXGZupAGZMMlfjR9visAa3ZlN15NmQcqBn7GMdA3sY6BYD2xNynO2nbEV1oBUj66g33V_AhkNRCEMwmVDbejrR6fEANoaZw5hGucmgMn7H5Z/s1600/18-x.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpxMTGrBsY7EtgQxXb7gDiumU0p1_AVEWqoXGZupAGZMMlfjR9visAa3ZlN15NmQcqBn7GMdA3sY6BYD2xNynO2nbEV1oBUj66g33V_AhkNRCEMwmVDbejrR6fEANoaZw5hGucmgMn7H5Z/s1600/18-x.jpg" /></a></div>
<br />
This means that the contents of that layer are no longer visible. To make them visible again, click on the X to bring back the layer's visibility. The X will turn back into a dot.<br />
<br />
To hide all your layers at once, click on the eye icon itself. Then click on the eye again in order to make all the layers visible again.<br />
<br />
<b>TIP:</b> If you hold down the alt (PC) or option (Mac) key while clicking on a dot, it's going to make all the other layers invisible instead, so that only the layer that you clicked on will be visible.<br />
<br />
<span class="tutorialStep">Locking layers</span><br />
<br />
Beside the eye icon is a lock icon.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKN6CNHFRQNktKGPjHZ6A0MQfXOvyqQs7Kj4JVLLeOWck4-_SDCoYuxyrV63MCLRyNrM_J-hPpinCl5U_HmUMUAxu0WHe7CRaaboJZ5HEBiIH9RavBgO-4gW37puGqLbnzn89d_HcrhUxf/s1600/19-lock.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKN6CNHFRQNktKGPjHZ6A0MQfXOvyqQs7Kj4JVLLeOWck4-_SDCoYuxyrV63MCLRyNrM_J-hPpinCl5U_HmUMUAxu0WHe7CRaaboJZ5HEBiIH9RavBgO-4gW37puGqLbnzn89d_HcrhUxf/s1600/19-lock.jpg" /></a></div>
<br />
Clicking on the dots under this column will allow you to lock the layers. When a layer is locked, you won't be able to edit its contents. They will still be visible but they will be protected from any form of editing. You won't even be able to select the contents of a locked layer.<br />
<br />
<div class="genericSeparator">
</div>
<br />
Working with multiple layers may take a bit of getting used to, but the benefits of working with layers will help keep your Flash project more organized.Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com3tag:blogger.com,1999:blog-3479935392155018913.post-62936800303685808262011-11-08T01:09:00.000-08:002011-11-08T01:09:47.101-08:00The fill color vs the stroke color - Flash CS5 Beginners TutorialIn the toolbar, you'll find two color boxes - one for the <b>stroke</b> color and one for the <b>fill</b> color:<br />
<br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1GGJXKC-kbOHE3rn7pXontWqGUcEmJJ98bSkbJ7qUGyOpdsMi1JgOQja9ut26BfS8yvyr_6MAmm2HYHOzyRnTG4yYOSJec3lrt_h-VZ0hfRK7-DIRS5pHihuWE8is60vnqK12rHsZOB4m/s1600/01-stroke-fill.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1GGJXKC-kbOHE3rn7pXontWqGUcEmJJ98bSkbJ7qUGyOpdsMi1JgOQja9ut26BfS8yvyr_6MAmm2HYHOzyRnTG4yYOSJec3lrt_h-VZ0hfRK7-DIRS5pHihuWE8is60vnqK12rHsZOB4m/s320/01-stroke-fill.jpg" width="320" /></a></div>
<br />
The <b>stroke</b> color is for the pen, pencil, line and ink bottle tools:<br />
<br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij6_5TVR1jEBnQ984cvV8jyQPDalBKOMuAbDSzUDXAObaqVDSzIhz4b5a_liinv-IcWysnTJ8vA2e3dbJ_QP_w_lc7dqzTKkkuNLEsjAuuM1hK0_Y7V7Cup2uCp1ep8h6mjCRqPy-MXrjN/s1600/02-pen-pencil-line-ink-bottle.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij6_5TVR1jEBnQ984cvV8jyQPDalBKOMuAbDSzUDXAObaqVDSzIhz4b5a_liinv-IcWysnTJ8vA2e3dbJ_QP_w_lc7dqzTKkkuNLEsjAuuM1hK0_Y7V7Cup2uCp1ep8h6mjCRqPy-MXrjN/s400/02-pen-pencil-line-ink-bottle.jpg" width="400" /></a></div>
<br />
So if you want to choose a color for any of the tools pictured above, make sure that you're choosing one from the <b>stroke</b> color box, and NOT the <b>fill</b> color box.<br />
<br />
The <b>fill</b> color, on the other hand, is for the brush and paint bucket tools:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgyS9RnMZ7OZuOWQkXVI4PP24feFoE21ogUJxRnmLXcD6TOE3hCvo73owbg7LK5U3UH4jeI6aElUvOlA022zv3s3iVg8fbaaScNNcH0pSwu5m-npAFJt44Fewhif2arF3u6ZjMwVndN9om/s1600/03-brush-paint-bucket.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgyS9RnMZ7OZuOWQkXVI4PP24feFoE21ogUJxRnmLXcD6TOE3hCvo73owbg7LK5U3UH4jeI6aElUvOlA022zv3s3iVg8fbaaScNNcH0pSwu5m-npAFJt44Fewhif2arF3u6ZjMwVndN9om/s320/03-brush-paint-bucket.jpg" width="320" /></a></div>
<br />
And if you are using any of the shape tools, then BOTH the fill and stroke colors can be used.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDNmpu1B4Y2N2n03NAwC6TA3GGtw2FNVJ7c052BznSZSYLSUyH4sBEWoNS4PITZmYlgAXal-LYNsH31GFICQRenK3ciaIPRjJX0D15UMGvs2BuZOEbQaKX3BO5N0Y1356-VLSij1rSGsgL/s1600/04-shape-tools.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="261" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDNmpu1B4Y2N2n03NAwC6TA3GGtw2FNVJ7c052BznSZSYLSUyH4sBEWoNS4PITZmYlgAXal-LYNsH31GFICQRenK3ciaIPRjJX0D15UMGvs2BuZOEbQaKX3BO5N0Y1356-VLSij1rSGsgL/s400/04-shape-tools.jpg" width="400" /></a></div>
<br />
For shapes, the stroke color is for the outline of the shape, while the fill color is for the color inside the shape. In the image below, we see a circle with a black stroke and a red fill color.<br />
<br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz6zJDyXdmH4DRozM_K1V35SgIqV1Sg4wFdZCWaNwqdTGlNdFIn7QhFTZwRgmzLVzBpDCmwXJxwIZne9jUru_kKUXE7UJvgVF-MfHpPjYd9UBpQoZjm-SjFTj-I04uHaqduXiDAt2MkU8S/s1600/05-stroke-fill-circle.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz6zJDyXdmH4DRozM_K1V35SgIqV1Sg4wFdZCWaNwqdTGlNdFIn7QhFTZwRgmzLVzBpDCmwXJxwIZne9jUru_kKUXE7UJvgVF-MfHpPjYd9UBpQoZjm-SjFTj-I04uHaqduXiDAt2MkU8S/s400/05-stroke-fill-circle.jpg" width="400" /></a></div>
<br />
To choose a fill or a stroke color, click on the fill or stroke color box to bring up the color swatches.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrgcJH3iz_CK3Nq-hhKRzB1QmlPF-sLTSWeFa0ksVv45GZkFEoZ-VkQKf7_J2MphqWlbYuYsCTHAW0l5gmkKZkmHOLFoswxBYMc8-D13vVxezKTNBVN6kJRIq8ll2_-v-EAwaH7Sqi5331/s1600/06-swatches.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrgcJH3iz_CK3Nq-hhKRzB1QmlPF-sLTSWeFa0ksVv45GZkFEoZ-VkQKf7_J2MphqWlbYuYsCTHAW0l5gmkKZkmHOLFoswxBYMc8-D13vVxezKTNBVN6kJRIq8ll2_-v-EAwaH7Sqi5331/s400/06-swatches.jpg" width="400" /></a></div>
<br />
Then click on the desired color in order to select it.<br />
<br />
Once you have your color selected, you can then choose the desired tool and start drawing.<br />
<br />
To choose NO fill or stroke color, click on the fill or stroke color box to bring up the color swatches. And then click on the white square with a diagonal line that can be found at the top-right of the swatches.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPwfn8nFnmZ0WgwLHnaEd6afLVAoqrLDgBCB6KnK3S30rpewVKmzGBTlkT0uiQIp3_aOEnqDK_sqbCHLxogbN2o2ryQpo-xLjnxNLm2Clljcx1DhyumIE097RXhsb30duDaNMQRjkS6agM/s1600/07-apply-none.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPwfn8nFnmZ0WgwLHnaEd6afLVAoqrLDgBCB6KnK3S30rpewVKmzGBTlkT0uiQIp3_aOEnqDK_sqbCHLxogbN2o2ryQpo-xLjnxNLm2Clljcx1DhyumIE097RXhsb30duDaNMQRjkS6agM/s400/07-apply-none.jpg" width="400" /></a></div>
<br />Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com1tag:blogger.com,1999:blog-3479935392155018913.post-3916548309203344762011-11-07T03:14:00.000-08:002011-11-07T03:21:29.346-08:00PART 3 - Saving your Flash document and knowing the difference between the FLA and SWF files - Getting started with Flash CS5<ul class='articleMenuList'><li><a href='http://www.flashpotential.com/2011/10/part-1-creating-new-flash-document-and.html'>PART 1: Creating a new Flash document and choosing a workspace layout</a></li>
<li><a href='http://www.flashpotential.com/2011/11/part-2-document-window-toolbar-and.html'>PART 2: The document window, the toolbar, and drawing on the stage with the brush tool</a></li>
<li><a class='currentPage' href='http://www.flashpotential.com/2011/11/part-3-saving-your-flash-document-and.html'>PART 3: Saving your Flash document and knowing the difference between the FLA and SWF files</a></li>
</ul><br />
Now that we have some artwork on the stage, let's go ahead and save our work. And in the process, we'll also learn about the two main file types associated with a Flash project.<br />
<br />
<span class="tutorialStep">Step 1</span><br />
<br />
Let's first create a folder in which to save our document. Name this folder <b>my-flash-project-[insert-your-name-here]</b>. You can place this folder anywhere in your hard drive.<br />
<br />
<span class="tutorialStep">Step 2</span><br />
<br />
Let's now save our Flash document.<br />
<br />
To save your Flash document, go to <b>File</b> > <b>Save As</b>. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYSxzRaINniUi98RoJGdGPwVkD1UcmiIcyLSm7jG2CniSiZRa6C16s9az3eDbUgwYY7u0acE4YdGRoPEl3yPtqpLd05Gp1GlIxCrOjKJOlsgNg6Uej0cbHXAVbEVMn0bJvoICZG3euLoeT/s1600/01-save.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYSxzRaINniUi98RoJGdGPwVkD1UcmiIcyLSm7jG2CniSiZRa6C16s9az3eDbUgwYY7u0acE4YdGRoPEl3yPtqpLd05Gp1GlIxCrOjKJOlsgNg6Uej0cbHXAVbEVMn0bJvoICZG3euLoeT/s1600/01-save.jpg" /></a></div><br />
A dialog box for saving will come up. Let's name the file <b>my-flash-document-[insert-your-name-here].fla</b>. For format, make sure it says <b>Flash CS5 Document</b>. And then for the location in which to save the document, make sure you've selected the folder that you created in step 1. Then click on Save.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJelxJ_FZm2ZY8ORzNM97c1FwK8_5uwT7efwvFeZKZO42ZWPPU_YzybHqAZ_ExMeGrdZwT2cX2h2TaufEfu1Z-Ozgl4RppifZEKt36FG05jj3WiztrzQJHF645VCeDZ9sui3y7GK5t9BgI/s1600/02-save-window.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="307" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJelxJ_FZm2ZY8ORzNM97c1FwK8_5uwT7efwvFeZKZO42ZWPPU_YzybHqAZ_ExMeGrdZwT2cX2h2TaufEfu1Z-Ozgl4RppifZEKt36FG05jj3WiztrzQJHF645VCeDZ9sui3y7GK5t9BgI/s400/02-save-window.jpg" width="400" /></a></div><br />
<span class="tutorialStep">Step 3</span><br />
<br />
After you've saved your document, open up your <b>my-flash-project</b> folder and take a look at the file you just saved.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg81eqqIEjdcioMUFRb1jiLj2skNFLt3h9wcFwEfsaQ4dUjj0CFmiXeU8HsTWn2Q3stiakXt62g68wNxs_5v1ghyphenhyphen-GWf7oeYBTHzf_fUAF6e8VYkFreR4jYD7M87C3DQAfiUSCbe20WMWVG/s1600/03-FLA.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg81eqqIEjdcioMUFRb1jiLj2skNFLt3h9wcFwEfsaQ4dUjj0CFmiXeU8HsTWn2Q3stiakXt62g68wNxs_5v1ghyphenhyphen-GWf7oeYBTHzf_fUAF6e8VYkFreR4jYD7M87C3DQAfiUSCbe20WMWVG/s1600/03-FLA.jpg" /></a></div><br />
This is your Flash document, commonly referred to as the <b>FLA</b> file (pronounced ef-el-ey) because it uses the <i>.fla</i> extension name. This is your main document. From this main document, you can export your Flash project into a variety of different formats. Let's take a look at one of those formats in the next steps.<br />
<br />
<span class="tutorialStep">Step 4</span><br />
<br />
Go back to the Flash workspace where you have your Flash document open.<br />
<br />
From the main menu, choose <b>Control</b> > <b>Test Movie</b> > <b>in Flash Professional</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMOzsaQbGmZ0T2c4yZa9UtgQ7UWJVAkoVBUWgHl0bS2hJh-7vElrMvaTW5UYnBUHEypv7ykJYio9TgjXjkysRpxpW1G8f8_JifG0mYv_9x7nuMky9AEz2p5nNVlwNFUrWTxK5SgOEtxpne/s1600/04-test-movie.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMOzsaQbGmZ0T2c4yZa9UtgQ7UWJVAkoVBUWgHl0bS2hJh-7vElrMvaTW5UYnBUHEypv7ykJYio9TgjXjkysRpxpW1G8f8_JifG0mYv_9x7nuMky9AEz2p5nNVlwNFUrWTxK5SgOEtxpne/s1600/04-test-movie.jpg" /></a></div><br />
What we just did here is we previewed the movie. So you should see a preview window of your Flash project pop up.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ6Ix-l0CahQOTtTYc5q3irvAcgCXkM_Si625iKLujZOZBHqPqjjFKBWv8ebOV1IocuUYdfpms0bB6N2uU8A_j-r_C3X6PSHLn7WIyAJUCO7ea2WeyKhhhfd2YMAgWhlLpknUJvmx0Z4UX/s1600/05-test-swf.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="321" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ6Ix-l0CahQOTtTYc5q3irvAcgCXkM_Si625iKLujZOZBHqPqjjFKBWv8ebOV1IocuUYdfpms0bB6N2uU8A_j-r_C3X6PSHLn7WIyAJUCO7ea2WeyKhhhfd2YMAgWhlLpknUJvmx0Z4UX/s400/05-test-swf.jpg" width="400" /></a></div><br />
The keyboard shortcut for testing a movie is <b>ctrl</b> + <b>enter</b> (PC) or <b>cmd</b> + <b>return</b> (Mac).<br />
<br />
<span class="tutorialStep">Step 5</span><br />
<br />
Whenever you test a movie in Flash, you're actually generating a new file from that preview. Let's go back to the <b>my-flash-project</b> folder and open it up to view its contents. You should now see a second file inside the folder.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh21VB7wFwe3MV9PcVVZDsumCA2Ghod9nXsOKCAWsY2YWFzEFfxxvsjdmSgSWGCce-2SZYAWG7jawGLzy4bPNT6ktfqO1juARzSIXIS_N_wOgKOrN9xS_PeEigbxtt9Ql4p-UoloUwchIDu/s1600/06-SWF.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh21VB7wFwe3MV9PcVVZDsumCA2Ghod9nXsOKCAWsY2YWFzEFfxxvsjdmSgSWGCce-2SZYAWG7jawGLzy4bPNT6ktfqO1juARzSIXIS_N_wOgKOrN9xS_PeEigbxtt9Ql4p-UoloUwchIDu/s400/06-SWF.jpg" width="400" /></a></div><br />
This new file that you see here is commonly referred to as a <b>SWF</b> file (pronounced swif). The SWF file is the compiled version of the FLA file. This is the format that can be embedded on a webpage. The SWF file is automatically generated whenever you test your Flash movie. If you make changes to the FLA file and then test the movie again, then the existing SWF file automatically gets updated with the new changes.<br />
<br />
<div class="genericSeparator"></div><br />
So these are the two main file formats associated with each Flash project that you create. The <b>FLA</b> file is your main file, which you can edit using the Flash authoring application. And the <b>SWF</b> file is the compiled version of your FLA file, which you can embed on a web page.<br />
<br />
And that concludes this short tutorial series on <b>Getting started with Flash CS5</b>.<br />
<br />
<a href="http://www.flashpotential.com/2011/11/part-2-document-window-toolbar-and.html"><b><< PREV:</b> The document window, the toolbar, and drawing on the stage with the brush tool - Getting started with Flash CS5 - PART 2</a>Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com0tag:blogger.com,1999:blog-3479935392155018913.post-5453275669701942232011-11-07T03:08:00.000-08:002013-06-09T01:50:13.000-07:00PART 2 - The document window, the toolbar, and drawing on the stage with the brush tool - Getting started with Flash CS5<ul class="articleMenuList">
<li><a href="http://www.flashpotential.com/2011/10/part-1-creating-new-flash-document-and.html">PART 1: Creating a new Flash document and choosing a workspace layout</a></li>
<li><a class="currentPage" href="http://www.flashpotential.com/2011/11/part-2-document-window-toolbar-and.html">PART 2: The document window, the toolbar, and drawing on the stage with the brush tool</a></li>
<li><a href="http://www.flashpotential.com/2011/11/part-3-saving-your-flash-document-and.html">PART 3: Saving your Flash document and knowing the difference between the FLA and SWF files</a></li>
</ul>
<br />
So now that we have a new Flash document, let's take a look at some of the parts of the workspace. And then after that, we'll draw some artwork on the stage.<br />
<br />
<span class="tutorialSectionTitle">The Document Window</span><br />
<br />
First, switch to the <b>Small Screen</b> workspace layout by choosing <b>Window</b> > <b>Workspace</b> > <b>Small Screen</b> from the menu bar. And then go back to the menu bar and choose <b>Window</b> > <b>Workspace</b> > <b>Reset 'Small Screen'</b> to make sure that the layout is set to its default arrangement. I'm asking you to switch to this layout so that your Flash workspace will look similar to the screenshots in this tutorial.<br />
<br />
Let's now talk about the document window. The document window shows the Flash movie that you're currently working on. It contains the stage and the pasteboard.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_wC8oT8Pa0tLM1dyM4RzH96ditKjTJr3JWYw65Sw-ujQqMEkys7FJ0m_h1whIg2_q10WCG_Bl6Y2tlhl5EHq4YmAdczUZ7kSS3uOxzwMm8hbW9rER79zpN86JXg9PJLn_n44Dj_fNl19V/s1600/01-pb-stage.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_wC8oT8Pa0tLM1dyM4RzH96ditKjTJr3JWYw65Sw-ujQqMEkys7FJ0m_h1whIg2_q10WCG_Bl6Y2tlhl5EHq4YmAdczUZ7kSS3uOxzwMm8hbW9rER79zpN86JXg9PJLn_n44Dj_fNl19V/s400/01-pb-stage.jpg" width="400" /></a></div>
<br />
The <b>stage</b> is the white rectangular area (but you also have the option to switch to a different background color). The area surrounding the stage is called the <b>pasteboard</b>.<br />
<br />
The stage is your canvas. This is where you add the visual elements for your Flash movie. It can be artwork that you draw, text that you type, or graphics that you import.<br />
<br />
The pasteboard is just some extra space where you can draw or place elements that you don't want to be seen. You can add elements to the pasteboard and place them on the stage later on. Or perhaps you might have some artwork that you want to remove from the stage without deleting them entirely. If so, you can move it to the pasteboard for the time being and decide what to do with it later on. <br />
<br />
You can adjust the position of the stage by clicking and dragging the document window's scrollbars. I usually like to position the stage so that it's in the center of the document window.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLuYaYULl4dHobMdtplY39QvLi99PkVgd9l99W9ihqQhsYDscq8ePos8LArrkWvYsAFddDBBzGPDQHdqTlmuBZeo26S2B0p3krEbX8LRjjl2hWLKGas696cE-MSEb_snNiGTGs1BPhkRoP/s1600/02-scrollbars.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLuYaYULl4dHobMdtplY39QvLi99PkVgd9l99W9ihqQhsYDscq8ePos8LArrkWvYsAFddDBBzGPDQHdqTlmuBZeo26S2B0p3krEbX8LRjjl2hWLKGas696cE-MSEb_snNiGTGs1BPhkRoP/s400/02-scrollbars.jpg" width="400" /></a></div>
<br />
You can also adjust the zoom level by typing in the desired zoom value in the zoom input field.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0H8JmHSpEatOujDWXRtxs-RxySSR2toB6cZKzxeyl_lB5W_M4IBrjt6Xri_4O6eLjVbNDvQaYG4F9hb5xi55G4_O-fXdH3LyCM8dhfgexty7McJXZMqfid7KT65RqOLyCaAm6RtrmBAx_/s1600/03-zoom.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0H8JmHSpEatOujDWXRtxs-RxySSR2toB6cZKzxeyl_lB5W_M4IBrjt6Xri_4O6eLjVbNDvQaYG4F9hb5xi55G4_O-fXdH3LyCM8dhfgexty7McJXZMqfid7KT65RqOLyCaAm6RtrmBAx_/s400/03-zoom.jpg" width="400" /></a></div>
<br />
<span class="tutorialSectionTitle">The Toolbar</span><br />
<br />
The toolbar houses the tools that you need in order to create and edit the visual elements that you put on the stage. In the <b>Small Screen</b> layout, the toolbar can be found in the left side of the workspace.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLb8o6326bjDY1-maQNbX3r1exUo7uk5spubCfMcDr2VHtVGgBaWPzMttjcHJRZLM64TRuN7uUiyjLTFFeJTmQNz9MHPrrcwxb6vup5B35EbrQML7ph7hIQQ7deV319uwZDYFIKVzohW_e/s1600/04-toolbar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLb8o6326bjDY1-maQNbX3r1exUo7uk5spubCfMcDr2VHtVGgBaWPzMttjcHJRZLM64TRuN7uUiyjLTFFeJTmQNz9MHPrrcwxb6vup5B35EbrQML7ph7hIQQ7deV319uwZDYFIKVzohW_e/s320/04-toolbar.jpg" width="46" /></a></div>
<br />
Each tool is represented by an icon. To select a tool, simply click on it. For most of these tools, you'll be able to know what they do just by looking at the icon. You've got the brush tool, the text tool, and the eraser tool to name a few. Here's a closer look at some of the tool icons:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhofCNL6wDmpemzVNb3qtDiih8cN3RwcCQozc0iZl2-1xwCH62LgTtN0nEh5l-GeKvDQkA1SIX_gNHzabpHmRaOPQxYqJooe9wOVPH0bEPk-HrWFZ_NXoM965DQ4e9YvcftKkneXQvvad79/s1600/05-tool-icons-01-text.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhofCNL6wDmpemzVNb3qtDiih8cN3RwcCQozc0iZl2-1xwCH62LgTtN0nEh5l-GeKvDQkA1SIX_gNHzabpHmRaOPQxYqJooe9wOVPH0bEPk-HrWFZ_NXoM965DQ4e9YvcftKkneXQvvad79/s1600/05-tool-icons-01-text.jpg" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkMlpiGrBC3Dcw-x3-M2v_8dCOAmHz8vbHKKU2J3eneUlLNl64_b81oxOIlrwbeauLXAb-_fJFbqlAgEGeVviBfzk-0-gzbeXAbhtPGfYjdrPn1kNBPeYVraJp-cA7LmMcmpMZ5itwQwWE/s1600/05-tool-icons-02-brush.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkMlpiGrBC3Dcw-x3-M2v_8dCOAmHz8vbHKKU2J3eneUlLNl64_b81oxOIlrwbeauLXAb-_fJFbqlAgEGeVviBfzk-0-gzbeXAbhtPGfYjdrPn1kNBPeYVraJp-cA7LmMcmpMZ5itwQwWE/s1600/05-tool-icons-02-brush.jpg" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Kfzz1k-E35g_FNqdDUBsFU9vDwj7CI0u0J3eddPmDMgiH-d2S8wrhHppSMIgohCwxjBQJpSGsIKZscVMX90tu0nLyvKyj0mTPmvFxl6aNNo3ByaDmvra6cothpXBepdCL040mYOSTjk9/s1600/05-tool-icons-03-eraser.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Kfzz1k-E35g_FNqdDUBsFU9vDwj7CI0u0J3eddPmDMgiH-d2S8wrhHppSMIgohCwxjBQJpSGsIKZscVMX90tu0nLyvKyj0mTPmvFxl6aNNo3ByaDmvra6cothpXBepdCL040mYOSTjk9/s1600/05-tool-icons-03-eraser.jpg" /></a></div>
<br />
You'll notice that some tool icons have a tiny triangle on the lower-right corner. Whenever you see this, it means that you can click and hold the icon, and a menu containing more tools will pop up.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixIOoMYN4_ZClWY0ScZvDUlllId6W9FYBVBLQKTsgnuQBs9dxdwGSSduygJsz5y76DrUIKx8KLUbUyHSmYZJSi7AXfjEFUDccdVJnUQjg_KSh7uYviidxTlcDvm02xjij44xr05jy1rSvc/s1600/06-tiny-triangle.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixIOoMYN4_ZClWY0ScZvDUlllId6W9FYBVBLQKTsgnuQBs9dxdwGSSduygJsz5y76DrUIKx8KLUbUyHSmYZJSi7AXfjEFUDccdVJnUQjg_KSh7uYviidxTlcDvm02xjij44xr05jy1rSvc/s1600/06-tiny-triangle.jpg" /></a></div>
<br />
In the image below, I am clicking and holding the rectangle tool to reveal the other shape tools. If I want to switch to the oval tool, then I just have to click on it. As you've probably assumed, these shape tools allow you to draw different shapes.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzVF-1qSaWyyfd-YSR_Oy10xh23haCKNVcR88mP114VtfN1i24bCO8xi84Ne2rM5sTQpueuM-xnr8Xv1nlT0QmhdE6-Ed2SqdF9OeXnOlh5FWxm1HO86Qx5VsQI91y6XgB2pYtJ9n5Oy8L/s1600/07-click-hold-triangle.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzVF-1qSaWyyfd-YSR_Oy10xh23haCKNVcR88mP114VtfN1i24bCO8xi84Ne2rM5sTQpueuM-xnr8Xv1nlT0QmhdE6-Ed2SqdF9OeXnOlh5FWxm1HO86Qx5VsQI91y6XgB2pYtJ9n5Oy8L/s1600/07-click-hold-triangle.jpg" /></a></div>
<br />
<span class="tutorialSectionTitle">Drawing on the Stage</span><br />
<br />
Now let's go ahead and draw some artwork on the stage using the brush tool.<br />
<br />
<span class="tutorialStep">Step 1 - Selecting the brush tool</span><br />
<br />
Let's use the brush tool to draw a random object on the stage. To select the brush tool, go to the toolbar and click on the brush tool icon.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkMlpiGrBC3Dcw-x3-M2v_8dCOAmHz8vbHKKU2J3eneUlLNl64_b81oxOIlrwbeauLXAb-_fJFbqlAgEGeVviBfzk-0-gzbeXAbhtPGfYjdrPn1kNBPeYVraJp-cA7LmMcmpMZ5itwQwWE/s1600/05-tool-icons-02-brush.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkMlpiGrBC3Dcw-x3-M2v_8dCOAmHz8vbHKKU2J3eneUlLNl64_b81oxOIlrwbeauLXAb-_fJFbqlAgEGeVviBfzk-0-gzbeXAbhtPGfYjdrPn1kNBPeYVraJp-cA7LmMcmpMZ5itwQwWE/s1600/05-tool-icons-02-brush.jpg" /></a></div>
<br />
Or you can also press the <b>B</b> key on your keyboard. That's the keyboard shortcut to access the brush tool.<br />
<br />
<span class="tutorialStep">Step 2 - Setting the tool options</span><br />
<br />
Once you have the brush tool selected, you'll see some tool options at the bottom of the toolbar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8TLsGc-kEcmfZHzpqoXSNIZMkmtcDlh-abL5U4asPb5l_eAMYmf6LROBGs_IjdxmTRqc4zn7HoXLi2-PUqvGfg_CEFUt8I06nkEkFHZwTw4iqfUwiB4yIx3SYSQHKQvOAVyqykb42yRi/s1600/08-tool-options.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8TLsGc-kEcmfZHzpqoXSNIZMkmtcDlh-abL5U4asPb5l_eAMYmf6LROBGs_IjdxmTRqc4zn7HoXLi2-PUqvGfg_CEFUt8I06nkEkFHZwTw4iqfUwiB4yIx3SYSQHKQvOAVyqykb42yRi/s1600/08-tool-options.jpg" /></a></div>
<br />
<b>NOTE:</b> It's possible that you'll only see 5 icons for the brush tool options, instead of the 7 icons depicted in the screen shot above. The last 2 icons are for systems that use pen tablets.<br />
<br />
Depending on which tool you have selected, you'll see a different set of options in this area. Since we have the brush tool selected right now, then what we see are the brush tool options.<br />
<br />
We've got the brush mode, which you can see in the image below. Click and hold the brush mode icon to see the different brush modes. We won't go through the different modes in this lesson so go ahead and just choose <b>Paint Normal</b> for now.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgelV4AmS1ObHW9GYJ_8WDtp0z44aRbMEKz6o_J_xDRvhi4mfX-PhubxyYy6FK0cuk2n-UlXD8UYKMp_lX-ZK6Sw-NsXos8is5CWm_90jdy1qwFXRHyoqryK0lKRsxOKv7b6TPRH52kfWqX/s1600/09-brush-mode.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgelV4AmS1ObHW9GYJ_8WDtp0z44aRbMEKz6o_J_xDRvhi4mfX-PhubxyYy6FK0cuk2n-UlXD8UYKMp_lX-ZK6Sw-NsXos8is5CWm_90jdy1qwFXRHyoqryK0lKRsxOKv7b6TPRH52kfWqX/s1600/09-brush-mode.jpg" /></a></div>
<br />
You can also choose from a set of brush sizes. Click and hold the brush size icon to bring up a menu of the different brush size options. Simply click on the desired brush size in order to select it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNW7KQsnZp1o9Oolkz_nD2YX_IUQ6Ll40dk016bW19lIL3xceiUZD2Y1VUzb-fpGJIgck1So_ERV4RJ2Ecb_-zy1qgUNEdCAtn4Zdkrp9Wg5c0r4WBjo6ixADIoii2_97cBuVV4gVR9PGb/s1600/10-brush-size.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNW7KQsnZp1o9Oolkz_nD2YX_IUQ6Ll40dk016bW19lIL3xceiUZD2Y1VUzb-fpGJIgck1So_ERV4RJ2Ecb_-zy1qgUNEdCAtn4Zdkrp9Wg5c0r4WBjo6ixADIoii2_97cBuVV4gVR9PGb/s1600/10-brush-size.jpg" /></a></div>
<br />
You can also choose from a set of brush shapes.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQb_KEAR_o4ZCKFg90J0JKEgOo9wx2N7o9S9PBQBwGg5kp9uSHDdOFgoMFDOEi-UjDpOUqIrxVV8hzqUayNRr8m83p82LVJwu91Q_c1NZUIgHRRjm1YmvAdEuqv30OAdm0MamgWyi1kXhf/s1600/11-brush-shape.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQb_KEAR_o4ZCKFg90J0JKEgOo9wx2N7o9S9PBQBwGg5kp9uSHDdOFgoMFDOEi-UjDpOUqIrxVV8hzqUayNRr8m83p82LVJwu91Q_c1NZUIgHRRjm1YmvAdEuqv30OAdm0MamgWyi1kXhf/s1600/11-brush-shape.jpg" /></a></div>
<br />
I'm going to use a small, round brush. You can choose whatever you like.<br />
<br />
<span class="tutorialStep">Step 3 - Choosing the color of your brush</span><br />
<br />
To choose the color for your brush tool, look for the <b>fill</b> color box, which can also be found in the toolbar. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgapTfulEUvn2LyRvoUyE0LgxOxItfYMNM_Lr1EoTSQrq1uFPvWALh8hmK_04BDxOpXmxmExc-ENeQXA3TpgnBj1YLXpPBpUIwok_RAQ5JZnDuXkK0Py2yQ5ryQQ2YfiaLzyQ5GG0tr8eTI/s1600/12-fill-color.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgapTfulEUvn2LyRvoUyE0LgxOxItfYMNM_Lr1EoTSQrq1uFPvWALh8hmK_04BDxOpXmxmExc-ENeQXA3TpgnBj1YLXpPBpUIwok_RAQ5JZnDuXkK0Py2yQ5ryQQ2YfiaLzyQ5GG0tr8eTI/s400/12-fill-color.jpg" width="138" /></a></div>
<br />
Click on the color box to bring up the color swatches.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZBLuqSTrpeoWVxzJzGKmGSYJ-hBhLDttZAYMlA1vsgBbN95sZCQfrTSzTcs0pFqDzs0FlNn4QieKslyUf_Z2qrSho9Nw-kv2UwFPPLiPyPB-f6jGu-e7GhVWTiVuKbeBfO3kt6fMm_SqZ/s1600/13-swatches.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZBLuqSTrpeoWVxzJzGKmGSYJ-hBhLDttZAYMlA1vsgBbN95sZCQfrTSzTcs0pFqDzs0FlNn4QieKslyUf_Z2qrSho9Nw-kv2UwFPPLiPyPB-f6jGu-e7GhVWTiVuKbeBfO3kt6fMm_SqZ/s1600/13-swatches.jpg" /></a></div>
<br />
At the top-right of the swatches, you'll see the <b>alpha</b> level controls for the color. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyEs_Rj2QquMXv6_f-AQCOfA8mBxfcTfiIJQ4eF61pk632ZYEXYHEPMCqP-h2ZSWf7spGo35aK643ayD5PVpC4riSf306jV7N66dcfXBfEBToVWw746G0YXQo0e72nEDRYJqCOu93gF7to/s1600/14-alpha.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyEs_Rj2QquMXv6_f-AQCOfA8mBxfcTfiIJQ4eF61pk632ZYEXYHEPMCqP-h2ZSWf7spGo35aK643ayD5PVpC4riSf306jV7N66dcfXBfEBToVWw746G0YXQo0e72nEDRYJqCOu93gF7to/s1600/14-alpha.jpg" /></a></div>
<br />
This controls the visibility of the color you choose. You can click on the number and type in a value anywhere from 0 to 100. A value of 100 means that the color is fully visible. As you bring the alpha level down, the color becomes less and less visible until it becomes completely invisible with a value of 0. You can change the value by clicking on the number and typing in a new one. For now, make sure it's at 100%. <br />
<br />
To choose a color, simply hover over the desired color and click on it.<br />
<br />
<span class="tutorialStep">Step 4 - Drawing the object</span><br />
<br />
Now that you've selected a color, go ahead and draw a random object on the stage. To draw with the brush tool, simply click and drag on the stage to make your brush strokes. I'm going to draw a car.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTDatzl02sz6kAjR_nN5bhKYWKkLNCtxZZwiO_yezPj5lehgegZ0KygoYfVWAFEXI6n8PYR9aqNMJBRuhnAyJEk1Z72bsKrHpEW0yogevDdbucGFKYP9_M53fyiTCHXnqAlHvOoWbs0wfV/s1600/15-car.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="295" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTDatzl02sz6kAjR_nN5bhKYWKkLNCtxZZwiO_yezPj5lehgegZ0KygoYfVWAFEXI6n8PYR9aqNMJBRuhnAyJEk1Z72bsKrHpEW0yogevDdbucGFKYP9_M53fyiTCHXnqAlHvOoWbs0wfV/s400/15-car.jpg" width="400" /></a></div>
<br />
<div class="genericSeparator">
</div>
After you've drawn your object, let's stop adding content for now. We'll cover the other drawing features in other tutorials. For now, let's move on to <a href="http://www.flashpotential.com/2011/11/part-3-saving-your-flash-document-and.html">part 3</a> of the <b>Getting started with Flash CS5</b> series.<br />
<br />
<a href="http://www.flashpotential.com/2011/10/part-1-creating-new-flash-document-and.html"><b><< PREV:</b> Creating a new Flash document and choosing a workspace layout - Getting started with Flash CS5 - PART 1</a><br />
<br />
<div style="text-align: right;">
<a href="http://www.flashpotential.com/2011/11/part-3-saving-your-flash-document-and.html">Saving your Flash document and knowing the difference between the FLA and SWF files - Getting started with Flash CS5 - PART 3<b>: NEXT >></b></a></div>
Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com3tag:blogger.com,1999:blog-3479935392155018913.post-22421048770458300422011-10-27T10:55:00.000-07:002011-11-07T03:18:18.680-08:00PART 1 - Creating a new Flash document and choosing a workspace layout - Getting started with Flash CS5<ul class='articleMenuList'><li><a class='currentPage' href='http://www.flashpotential.com/2011/10/part-1-creating-new-flash-document-and.html'>PART 1: Creating a new Flash document and choosing a workspace layout</a></li>
<li><a href='http://www.flashpotential.com/2011/11/part-2-document-window-toolbar-and.html'>PART 2: The document window, the toolbar, and drawing on the stage with the brush tool</a></li>
<li><a href='http://www.flashpotential.com/2011/11/part-3-saving-your-flash-document-and.html'>PART 3: Saving your Flash document and knowing the difference between the FLA and SWF files</a></li>
</ul><br />
Welcome to the <b>Getting started with Flash CS5</b> tutorial series by <a href="http://www.flashpotential.com/">flashpotential.com</a>. In the first part of this series, where going to learn how to create a new document, and we'll also get to know a little bit about workspace layouts.<br />
<br />
<span class="tutorialStep">Step 1 - Creating a new Flash document</span><br />
<br />
Launch the Flash CS5 application. <br />
<br />
To create a new document, go to the main menu and choose <b>File</b> > <b>New</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv0xJbRfHzCeAaHluaSNaWdVEftfjuCvVmauch3gKQ1V2qhPiODdxkY42dyG0cTZJccXIkh4ddgnZoFZQgUkI_85giECOF3v2q1-rzx2XPmHte3q_vwsFUMhaPC8gC7qKFgjKQq1VyPSl4/s1600/01-file-new.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv0xJbRfHzCeAaHluaSNaWdVEftfjuCvVmauch3gKQ1V2qhPiODdxkY42dyG0cTZJccXIkh4ddgnZoFZQgUkI_85giECOF3v2q1-rzx2XPmHte3q_vwsFUMhaPC8gC7qKFgjKQq1VyPSl4/s320/01-file-new.jpg" width="320" /></a></div><br />
Then from the <b>New Document</b> window, choose <b>ActionScript 3.0</b>, and click <b>OK</b>. Click on the image below to enlarge.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhyS_Uoti1lXp2HOA8bxMAjEcTkMdAa4hZVJfGNVlX6V3HNEJza1gOuIGzdY9sc07kmcCO6Kww_q2uCeXOSslfT4H4D_dcDOvS9HvYSUfkDKEPbBH8mMfcjNRNq-aCml6Gf2rO81hFpjRl/s1600/02-new-docu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhyS_Uoti1lXp2HOA8bxMAjEcTkMdAa4hZVJfGNVlX6V3HNEJza1gOuIGzdY9sc07kmcCO6Kww_q2uCeXOSslfT4H4D_dcDOvS9HvYSUfkDKEPbBH8mMfcjNRNq-aCml6Gf2rO81hFpjRl/s400/02-new-docu.jpg" width="400" /></a></div><br />
You should now see your new Flash document. Click on the image below to enlarge.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB7r8su1df01iQ7hNw8Hkhyphenhyphen7YKuGfLJ1_yQPCpZ6rXsWAd61gvD11msPLmF2Nku4KwSLto733IxYue5ANta15nc6vga2wtlvkqaupvFzAsRcAY3y-QGXXqGrsIoL20vZF2fTTyrUI7X8yJ/s1600/03-workspace.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB7r8su1df01iQ7hNw8Hkhyphenhyphen7YKuGfLJ1_yQPCpZ6rXsWAd61gvD11msPLmF2Nku4KwSLto733IxYue5ANta15nc6vga2wtlvkqaupvFzAsRcAY3y-QGXXqGrsIoL20vZF2fTTyrUI7X8yJ/s400/03-workspace.jpg" width="400" /></a></div><br />
This is your workspace. It's made up of different windows that each have specific functions. You'll see some of those windows highlighted in the image below. Click on the image below to enlarge.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE_VKZ9GwZsOW1G9h3q5mfHZYFciGRA7Rqk3NmjyPCtYZd8mLG5eSIPI05uVZkpMGWWs8BxA0lHB_7cudocPO7jCUDT2ix_yHDHnYNyXbKj4t8Cl3RRfGR3PZyaC6wXKdgUhzJix-THK6Y/s1600/04-windows.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE_VKZ9GwZsOW1G9h3q5mfHZYFciGRA7Rqk3NmjyPCtYZd8mLG5eSIPI05uVZkpMGWWs8BxA0lHB_7cudocPO7jCUDT2ix_yHDHnYNyXbKj4t8Cl3RRfGR3PZyaC6wXKdgUhzJix-THK6Y/s400/04-windows.jpg" width="400" /></a></div><br />
The windows that you see here are just some of the windows that you can work with when you open up a Flash document. You've got the toolbar, the timeline, the properties inspector, etc... But we won't go through each of them right now. There are a lot! We'll learn more about them in the other lessons. <br />
<br />
These windows that make up your workspace can be rearranged. You can move them to different locations, adjust the size, you can close some of them, or you can bring up other windows that are not yet visible, etc... The windows that you have open and the way you arrange these windows is referred to as your workspace layout. You can customize your workspace layout or you can choose from any of the preset layouts that are available.<br />
<br />
<span class="tutorialStep">Step 2 - Choosing a workspace layout</span><br />
<br />
To choose a new layout, go to the main menu and choose <b>Window</b> > <b>Workspace</b>. Here you'll see all the available layout presets that are available. You've got Animator, Classic, Debug, Designer, Developer, Essentials and Small Screen. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheiUupw1JFAPUIYjbMSBrirMagZHBU_X4-EYng-ejgT_axRiL4uNa4-U1OOK9i9mghkWclzhvSc4b8T0QqZPNrWbiB7msCNlqmt28SIhX4SyeYN2SnHZxgm9spJjtvbZGoUK-UPyTIx5vC/s1600/05-window-workspace-menu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheiUupw1JFAPUIYjbMSBrirMagZHBU_X4-EYng-ejgT_axRiL4uNa4-U1OOK9i9mghkWclzhvSc4b8T0QqZPNrWbiB7msCNlqmt28SIhX4SyeYN2SnHZxgm9spJjtvbZGoUK-UPyTIx5vC/s400/05-window-workspace-menu.jpg" width="395" /></a></div><br />
Click on the choices to see how they look like. You've got the Animator layout, which gives importance to the windows that are most often utilized when one is creating a Flash animation project. There's the Classic layout, which looks like the default layout of older versions of Flash. You've also got the Small Screen layout, which creates a workspace ideal for monitors with lower resolutions. Each workspace is designed to fit the needs of a certain type of user. It's a lot like how you fix your own study table or your room at home. You arrange your things in such a way that makes it easier for you to work, relax or play.<br />
<br />
<span class="tutorialStep">Step 3 - Moving, collapsing, expanding and adjusting the size of windows</span><br />
<br />
If you wish to move your windows around, you can do so by clicking on the window tabs and dragging the windows to the desired location.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjedWanZyB764-YWDYibuLBmAzI9trmIQzQ_47DDRVbyWmqbOHEMpaSl4Rf-yaF9mx0VylrBiOqSS8_uVGenfffLM0cHJ_zAwQx5V7P5ud7sVPSwj2pGl_V5I8P0coTUX6UHFjSRRXJt-lt/s1600/06-tabs.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjedWanZyB764-YWDYibuLBmAzI9trmIQzQ_47DDRVbyWmqbOHEMpaSl4Rf-yaF9mx0VylrBiOqSS8_uVGenfffLM0cHJ_zAwQx5V7P5ud7sVPSwj2pGl_V5I8P0coTUX6UHFjSRRXJt-lt/s400/06-tabs.jpg" width="400" /></a></div><br />
If you wish to collapse or minimize a window, just double-click the tab. To expand a window again, then just double-click the tab again.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqQJ1bP5B1czm4n2uJqPpANEu7XH8ghSagb4fKtqqsOFiaDEx7QzHItNupA5dtwDwg3uztkvYvHiL2FXIOyTd2e42SbqZYOYMEPNnHUFKIyS0Jc1i-qQP0AC8Bw355ltaLwq6RUekMx9RV/s1600/07-expand-collapse.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqQJ1bP5B1czm4n2uJqPpANEu7XH8ghSagb4fKtqqsOFiaDEx7QzHItNupA5dtwDwg3uztkvYvHiL2FXIOyTd2e42SbqZYOYMEPNnHUFKIyS0Jc1i-qQP0AC8Bw355ltaLwq6RUekMx9RV/s400/07-expand-collapse.jpg" width="336" /></a></div><br />
If you wish to adjust the size of a window, place your mouse pointer over the edge of the window until the pointer turns into a double-headed arrow.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZEkx0KSl-N5NjsbsfBN6GwmsoeBQ5wrakNgi2iaQECVAqeyVtd4YB6x8hmAJxcbUPE3F53yMrBSmJUXbONkvxuWZ-79sGpDfysfhKnBzVe7RoJiUWCi9dcLjPYSaSoNVw2hofWRLy88yl/s1600/08-resize-window.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZEkx0KSl-N5NjsbsfBN6GwmsoeBQ5wrakNgi2iaQECVAqeyVtd4YB6x8hmAJxcbUPE3F53yMrBSmJUXbONkvxuWZ-79sGpDfysfhKnBzVe7RoJiUWCi9dcLjPYSaSoNVw2hofWRLy88yl/s400/08-resize-window.jpg" width="400" /></a></div><br />
And then click and drag to adjust the window's size. You can adjust from the left or right sides to change the width. And you can also adjust from the top or bottom edges to change the height.<br />
<br />
Go ahead and try moving, resizing, collapsing and expanding the windows in your workspace. Don't worry about messing up the layout. We'll fix that in the next step.<br />
<br />
<span class="tutorialStep">Step 4 - Resetting a workspace layout</span><br />
<br />
If you find that you've messed up your workspace layout to a point where it's quite difficult for you to work, you can reset everything by going to <b>Window</b> > <b>Workspace</b> > <b>Reset</b> <i>[Active Layout]</i>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDciVfJ44EtwOVeBorH9Ib9CUoqZARTGnmgz0VL8hhSvEr8g_cJ2BMHoGcpky9SjPjF5wLFL8yvFNuTMuRmSJHfU04NzXrwFm8jiyJaNPO5auEkNVDM6mvBx4r3AdF1sbW7lpmnMcExAcs/s1600/09-reset-layout.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDciVfJ44EtwOVeBorH9Ib9CUoqZARTGnmgz0VL8hhSvEr8g_cJ2BMHoGcpky9SjPjF5wLFL8yvFNuTMuRmSJHfU04NzXrwFm8jiyJaNPO5auEkNVDM6mvBx4r3AdF1sbW7lpmnMcExAcs/s400/09-reset-layout.jpg" width="400" /></a></div><br />
This is going to reset whatever layout is currently active. So if you're using the Animator layout, it's going to reset your workspace back to the default Animator layout, and make everything neat and tidy again.<br />
<br />
<div class="genericSeparator"></div><br />
In <a href="http://www.flashpotential.com/2011/11/part-2-document-window-toolbar-and.html">part 2</a> of the <b>Getting started with Flash CS5</b> tutorial series, we're going to draw some artwork on the stage.<br />
<br />
<div style="text-align: right;"><a href="http://www.flashpotential.com/2011/11/part-2-document-window-toolbar-and.html">The document window, the toolbar, and drawing on the stage with the brush tool - Getting started with Flash CS5 - PART 2<b>: NEXT >></b></a></div>Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com3tag:blogger.com,1999:blog-3479935392155018913.post-66831357998414346832011-10-25T12:36:00.000-07:002011-10-25T12:52:21.315-07:00Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 5 - Flash CS5 Beginners Tutorial<ul class='articleMenuList'><li><a href='http://www.flashpotential.com/2011/10/understanding-difference-between-object.html'>Part 1</a></li>
<li><a href='http://www.flashpotential.com/2011/10/when-you-create-shapes-using-rectangle.html'>Part 2</a></li>
<li><a href='http://www.flashpotential.com/2011/10/understanding-difference-between-object_24.html'>Part 3</a></li>
<li><a href='http://www.flashpotential.com/2011/10/part-4-understanding-difference-between.html'>Part 4</a></li>
<li><a class='currentPage' href='http://www.flashpotential.com/2011/10/part-5-understanding-difference-between.html'>Part 5</a></li>
</ul><br />
Sometimes, you might make the mistake of drawing in the object mode when you really meant to draw in the merge mode. Or sometimes it might be the other way around. Instead of erasing your artwork and redrawing it, you can just convert your drawing into the opposite mode. That is what we'll learn in the last part of this tutorial series.<br />
<br />
<span class="tutorialSectionTitle">Converting Merge Drawings to Object Drawings</span><br />
<br />
<span class="tutorialStep">Step 1</span><br />
<br />
Select the merge drawing item that you'd like to convert.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiU-u-5wxNrIiQ7Ibz-YG9P7tK-VXKpnRra2kZ-dCXOYTwricR76TtmvXxOQCW3JqfqOtBjK-NAPdGqcsazuwnce48jXhIouDIkBrqIQj3mo0Yav1fsK0KT08kQHAO_KlQVKnWj9R62eB3/s1600/01-select-merge-drawing.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiU-u-5wxNrIiQ7Ibz-YG9P7tK-VXKpnRra2kZ-dCXOYTwricR76TtmvXxOQCW3JqfqOtBjK-NAPdGqcsazuwnce48jXhIouDIkBrqIQj3mo0Yav1fsK0KT08kQHAO_KlQVKnWj9R62eB3/s1600/01-select-merge-drawing.jpg" /></a></div><br />
<span class="tutorialStep">Step 2</span><br />
<br />
In the main menu, go to <b>Modify</b> > <b>Combine Objects</b> > <b>Union</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6crzEk23FLtlFbfBkq8Q_rYEfZjHRKtMkLu_QpGITcb49ZqBhhTw7mH5L5u5BDqnYDTMsdl_n9OJztmd-aNdK_ZUE9ZyQZqrh05KrIuQvTe3dHIJO5YhGtL4dKKzJjBmLuXD1Zc06cgOQ/s1600/02-union.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="189" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6crzEk23FLtlFbfBkq8Q_rYEfZjHRKtMkLu_QpGITcb49ZqBhhTw7mH5L5u5BDqnYDTMsdl_n9OJztmd-aNdK_ZUE9ZyQZqrh05KrIuQvTe3dHIJO5YhGtL4dKKzJjBmLuXD1Zc06cgOQ/s320/02-union.jpg" width="320" /></a></div><br />
And that's it. The selected merge drawing should now be an object drawing.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinfL0RcBqXC8DjFBTw9FOfyPpbTY0Vr2xzn8yBrejXO6ghpHJmJ7KRccSLMm-ak7gt75T7mTR92fd3bctwfAnv8iXRiQMr_ZCeeeH-Z32LUFoiQBo_DBQkXwGVKM-DL-ujLLecmtd4B56s/s1600/03-now-object.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinfL0RcBqXC8DjFBTw9FOfyPpbTY0Vr2xzn8yBrejXO6ghpHJmJ7KRccSLMm-ak7gt75T7mTR92fd3bctwfAnv8iXRiQMr_ZCeeeH-Z32LUFoiQBo_DBQkXwGVKM-DL-ujLLecmtd4B56s/s1600/03-now-object.jpg" /></a></div><br />
<span class="tutorialSectionTitle">Converting Object Drawings to Merge Drawings</span><br />
<br />
<span class="tutorialStep">Step 1</span><br />
<br />
Select the object drawing item that you'd like to convert.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6dC4RTUDwMSKvPeb1zhzfPtGyTIgzyNuK_HXyDmf_hGVKCmhiB7UH1iwzeu9zhQ03cxFt-kHIBHfMrXlr3KK7LdYX7C-K_c0IkhksrpOlAiU7DoEsPVxeIcYpd0MLyyM4lyMQznv5GG1J/s1600/04-select-object-drawing.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6dC4RTUDwMSKvPeb1zhzfPtGyTIgzyNuK_HXyDmf_hGVKCmhiB7UH1iwzeu9zhQ03cxFt-kHIBHfMrXlr3KK7LdYX7C-K_c0IkhksrpOlAiU7DoEsPVxeIcYpd0MLyyM4lyMQznv5GG1J/s1600/04-select-object-drawing.jpg" /></a></div><br />
<span class="tutorialStep">Step 2</span><br />
<br />
Right-click on the selected object and choose <b>Break Apart</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif5XWj7zWC9GD4zu01kcBu95s54QqSNZ6Ie_oaJTiA97V4DgiPQ7fpzPw7Fxz5Q8OSMdyxVBhG_ybc2X3XMJNczqGd5mYyXyyRrhG-JsXev1jYVibkIuXnmJzrqXBfYmlhAJ1K9ucRJQyj/s1600/05-break-apart.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif5XWj7zWC9GD4zu01kcBu95s54QqSNZ6Ie_oaJTiA97V4DgiPQ7fpzPw7Fxz5Q8OSMdyxVBhG_ybc2X3XMJNczqGd5mYyXyyRrhG-JsXev1jYVibkIuXnmJzrqXBfYmlhAJ1K9ucRJQyj/s320/05-break-apart.jpg" width="285" /></a></div><br />
And that's it. The selected object drawing should now be a merge drawing.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicIAvzm_v9FWXU_shFFNJiDBksmgbZsO4MZvDqIoyaDzX7mxPuUVO153p7QpE9WoHwFNsjPEV6CILQjfcvGFqzaF5t27m8sUhlwJ_I_wV7PouqE8xW2t2w4kWoY14V8oqV6kmO9MrpDY6x/s1600/06-now-merge.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicIAvzm_v9FWXU_shFFNJiDBksmgbZsO4MZvDqIoyaDzX7mxPuUVO153p7QpE9WoHwFNsjPEV6CILQjfcvGFqzaF5t27m8sUhlwJ_I_wV7PouqE8xW2t2w4kWoY14V8oqV6kmO9MrpDY6x/s1600/06-now-merge.jpg" /></a></div><br />
<div class="genericSeparator"></div><br />
And that concludes this tutorial series explaining the differences between the object drawing mode vs the merge drawing mode.<br />
<br />
<a href="http://www.flashpotential.com/2011/10/part-4-understanding-difference-between.html"><b><< PREV:</b> Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 4</a>Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com1tag:blogger.com,1999:blog-3479935392155018913.post-57729297442505920262011-10-25T08:25:00.000-07:002011-11-09T10:13:34.648-08:00Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 4 - Flash CS5 Beginners Tutorial<ul class="articleMenuList">
<li><a href="http://www.flashpotential.com/2011/10/understanding-difference-between-object.html">Part 1</a></li>
<li><a href="http://www.flashpotential.com/2011/10/when-you-create-shapes-using-rectangle.html">Part 2</a></li>
<li><a href="http://www.flashpotential.com/2011/10/understanding-difference-between-object_24.html">Part 3</a></li>
<li><a class="currentPage" href="http://www.flashpotential.com/2011/10/part-4-understanding-difference-between.html">Part 4</a></li>
<li><a href="http://www.flashpotential.com/2011/10/part-5-understanding-difference-between.html">Part 5</a></li>
</ul>
<br />
When you use the paint bucket tool to fill the inside of shapes, you'll find that it will sometimes behave differently depending on whether it was drawn in merge mode or object mode.<br />
<br />
Let's take a look at an example.<br />
<br />
In the image below, you'll see three separate segments drawn using the brush tool in the <b>merge</b> drawing mode. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8duL1Kge15TpebzOMswmXbeaG92okqTCFkzqPMDbPLUoBME6-PAZ33zGmnpO1OzJ5G3zUDOm0ovpCwbp0P0xmnDc7V33qQyAgznK-LX4MDcinRzt1BAuyv4G21yQxBd-i9ppZRhDwbylR/s1600/01-merge-segments.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8duL1Kge15TpebzOMswmXbeaG92okqTCFkzqPMDbPLUoBME6-PAZ33zGmnpO1OzJ5G3zUDOm0ovpCwbp0P0xmnDc7V33qQyAgznK-LX4MDcinRzt1BAuyv4G21yQxBd-i9ppZRhDwbylR/s400/01-merge-segments.jpg" width="400" /></a></div>
<br />
In the next image, the segments were moved closer so that they would intersect with each other - the two diagonal segments meet each other at the top, while the segment at the bottom touches both diagonal segments. So what we have is a closed area in the shape of a triangle.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifmpY2F1URUwy3R3aCQqv5omsjqlE_zFgeHFhhwKjRXk86h3SUmZFSnvl3260s5rQNEYms8oyQqcVReilo17wWwK0qf-bO97_JwV8jKml8W3ZaIQIhyudbBmg-ANoLMftBd_ef26vOI1lO/s1600/02-merge-triangle.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifmpY2F1URUwy3R3aCQqv5omsjqlE_zFgeHFhhwKjRXk86h3SUmZFSnvl3260s5rQNEYms8oyQqcVReilo17wWwK0qf-bO97_JwV8jKml8W3ZaIQIhyudbBmg-ANoLMftBd_ef26vOI1lO/s400/02-merge-triangle.jpg" width="400" /></a></div>
<br />
And because merge drawings combine when they intersect, what we have now is just one shape with an empty area inside it. We can then use the paint bucket tool to fill this empty area with any color we choose.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTzy7NUvs6L2XgFNbj7Fqa4rf53SJw31WZ3jgygyoizF2uBeYEXOoY5kdnp4B-SGFc7S_iBZy5BgL6fpSPI4cwwXV0yBlnlz4B_V3xuGKZmVivLUFPG9Va1B2BJYoSmNZFgb3ZheCBj2E/s1600/03-paint-bucket-in-merge-shape.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTzy7NUvs6L2XgFNbj7Fqa4rf53SJw31WZ3jgygyoizF2uBeYEXOoY5kdnp4B-SGFc7S_iBZy5BgL6fpSPI4cwwXV0yBlnlz4B_V3xuGKZmVivLUFPG9Va1B2BJYoSmNZFgb3ZheCBj2E/s400/03-paint-bucket-in-merge-shape.jpg" width="400" /></a></div>
<br />
Here's the shape with the empty area filled with red.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfhyIlawoAwEYjXiF0sHhalLTs-bwPaE4owNydzZ1FT77MRhiNbtT10sq3WfrKNpmzxjtoBqGMix33bQS1UjNHIr-Yk9O85FZRSorDZ0bmaZvpFKugafrpJiO3CRkx3HJs88z8ij5OQAEJ/s1600/04-red-fill.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfhyIlawoAwEYjXiF0sHhalLTs-bwPaE4owNydzZ1FT77MRhiNbtT10sq3WfrKNpmzxjtoBqGMix33bQS1UjNHIr-Yk9O85FZRSorDZ0bmaZvpFKugafrpJiO3CRkx3HJs88z8ij5OQAEJ/s400/04-red-fill.jpg" width="400" /></a></div>
<br />
This works because all the segments merged together to form one closed area. And the paint bucket tool is capable of filling empty areas that are closed. If there is a gap or opening that's too large, then the paint bucket will not be able to fill the area.<br />
<br />
Now in the next image, all the segments were drawn in the <b>object</b> drawing mode instead.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwB_gHL_bLhHsqPyjufzTF-Jj7MGAPBbDyjK_VfqDTc-4FIVLFxkjwwSX_m6VJ6BCHihBajPHS6L0OvfP5d-cukUSF-bwd9PFxu2CFoxHdhECcqvgTYYcbhYVvrT56G7_3zaukyQfbgiz4/s1600/05-object-drawing-segments.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwB_gHL_bLhHsqPyjufzTF-Jj7MGAPBbDyjK_VfqDTc-4FIVLFxkjwwSX_m6VJ6BCHihBajPHS6L0OvfP5d-cukUSF-bwd9PFxu2CFoxHdhECcqvgTYYcbhYVvrT56G7_3zaukyQfbgiz4/s400/05-object-drawing-segments.jpg" width="400" /></a></div>
<br />
If we move the segments to form a triangle, each segment will still be considered separate.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG8VL4HQSAvXYr-GP9mtfcsi_9ITrB3WNNPy7HdmJX1HjdF6CSJSqlzU7nkYGag_dOydq0p-V_4Zd5azUM0Uq_NpBrJTBM1tdENYBY3FgFVIbqIuJrXqI6qwod9nQnhz27Ix7R_zaF-CLX/s1600/06-object-triangle.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG8VL4HQSAvXYr-GP9mtfcsi_9ITrB3WNNPy7HdmJX1HjdF6CSJSqlzU7nkYGag_dOydq0p-V_4Zd5azUM0Uq_NpBrJTBM1tdENYBY3FgFVIbqIuJrXqI6qwod9nQnhz27Ix7R_zaF-CLX/s400/06-object-triangle.jpg" width="400" /></a></div>
<br />
Visually, we may have a triangle, but Flash still sees each segment as separate from each other because they were drawn in the object drawing mode. Therefore, the segments will NOT merge to form into one closed shape. And since we don't have a closed shape, the paint bucket tool will NOT be able to fill the inside.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj89rF4NbxSEsOejhqvbx5mkixUFMhHL4mjj0gi0Z3RKYfAs7dKIdKMMbRed7MZt8n0MUVIIzhSR8KeUE_G39xJPj115ZPxkrTguo3FnahmeLha-Ji_ICOqyjQPY6lN6J6dxXvtj1dRYaIQ/s1600/07-unable-to-fill.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj89rF4NbxSEsOejhqvbx5mkixUFMhHL4mjj0gi0Z3RKYfAs7dKIdKMMbRed7MZt8n0MUVIIzhSR8KeUE_G39xJPj115ZPxkrTguo3FnahmeLha-Ji_ICOqyjQPY6lN6J6dxXvtj1dRYaIQ/s400/07-unable-to-fill.jpg" width="400" /></a></div>
<br />
However, we can actually still use the object drawing mode to create closed areas that can be filled using the paint bucket tool. This can work provided that the shape is drawn in one continuous stroke. In the image below, the triangle was drawn in one continuous stroke instead of drawing three segments separately. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmXzcTKgGdZH5Km912vB4CHGDh2cCg-upDMT6J7p-SqPZQ0Kl-Yj56YafnBuQuCR6i48X5WMqZQDe44AmZ7pJwULevgplretYw6DyD7VXiXHO8WT-L5f-9LhNBSlZJ_W5ZFZ1kU4ykdG5/s1600/08-object-drawing-one-stroke.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmXzcTKgGdZH5Km912vB4CHGDh2cCg-upDMT6J7p-SqPZQ0Kl-Yj56YafnBuQuCR6i48X5WMqZQDe44AmZ7pJwULevgplretYw6DyD7VXiXHO8WT-L5f-9LhNBSlZJ_W5ZFZ1kU4ykdG5/s400/08-object-drawing-one-stroke.jpg" width="400" /></a></div>
<br />
You'll notice that the entire shape is enclosed within just one set of borders. This means that the shape is just one object, unlike the previous example which was made up of three different objects. Because of this, you will be able to fill the inside using the paint bucket tool.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1eoXkxwmzhNG6Ar-kTM2Ly4UDfdl2x1RlN21E7Z42IrmgVF0Y6-CSag5GpoAflbPDXTVtsqUnUpFHRIirpWtuwjnBMqsgLoG5fg-IW3EnyamnWxOa83ozkvjT1HHVhhUjdYzAUGEF25_z/s1600/09-object-red.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1eoXkxwmzhNG6Ar-kTM2Ly4UDfdl2x1RlN21E7Z42IrmgVF0Y6-CSag5GpoAflbPDXTVtsqUnUpFHRIirpWtuwjnBMqsgLoG5fg-IW3EnyamnWxOa83ozkvjT1HHVhhUjdYzAUGEF25_z/s400/09-object-red.jpg" width="400" /></a></div>
<br />
<div class="genericSeparator">
</div>
<br />
In the <a href="http://www.flashpotential.com/2011/10/part-5-understanding-difference-between.html">final part</a> of this series, we'll learn how to convert an object drawing into a merge drawing and vice versa.<br />
<a href="http://www.flashpotential.com/2011/10/understanding-difference-between-object_24.html"><br />
<b><< PREV:</b> Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 3</a><br />
<br />
<div style="text-align: right;">
<a href="http://www.flashpotential.com/2011/10/part-5-understanding-difference-between.html">Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 5<b>: NEXT>></b></a></div>Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com0tag:blogger.com,1999:blog-3479935392155018913.post-13063189931197938602011-10-24T07:20:00.000-07:002011-11-09T10:12:43.336-08:00Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 3 - Flash CS5 Beginners Tutorial<ul class="articleMenuList">
<li><a href="http://www.flashpotential.com/2011/10/understanding-difference-between-object.html">Part 1</a></li>
<li><a href="http://www.flashpotential.com/2011/10/when-you-create-shapes-using-rectangle.html">Part 2</a></li>
<li><a class="currentPage" href="http://www.flashpotential.com/2011/10/understanding-difference-between-object_24.html">Part 3</a></li>
<li><a href="http://www.flashpotential.com/2011/10/part-4-understanding-difference-between.html">Part 4</a></li>
<li><a href="http://www.flashpotential.com/2011/10/part-5-understanding-difference-between.html">Part 5</a></li>
</ul>
<br />
The merge drawing mode is referred to as such because when merge drawings that are of the same color overlap with each other, they will end up <b>merging</b> with each other. But with object drawings, each shape is treated as a separate object (hence the term <b>object</b> drawing mode), so they will not merge with each other when they overlap.<br />
<br />
Let's see how this works.<br />
<br />
<span class="tutorialStep">Step 1</span><br />
<br />
Create a new Flash document.<br />
<br />
<span class="tutorialStep">Step 2</span><br />
<br />
Select the oval tool. Make sure that the object drawing mode is <b>OFF</b>.<br />
<br />
<span class="tutorialStep">Step 3</span><br />
<br />
In the properties inspector, remove the stroke by clicking on the stroke color box and choosing no stroke color.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Ip3P_0DSs4r6O6rGmMk3SsLME8jpFaie5F2oY4DAVDoakF166meMNV5Ue4lzFowGmAldkkU4G23hmU4t9hYQJpW9ArnNWR3rnLg9bzEivelym075IUuYY3iaDo-Z62dTA5pv0rmSXhpt/s1600/01-remove-stroke-color.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Ip3P_0DSs4r6O6rGmMk3SsLME8jpFaie5F2oY4DAVDoakF166meMNV5Ue4lzFowGmAldkkU4G23hmU4t9hYQJpW9ArnNWR3rnLg9bzEivelym075IUuYY3iaDo-Z62dTA5pv0rmSXhpt/s1600/01-remove-stroke-color.jpg" /></a></div>
<br />
<span class="tutorialStep">Step 4</span><br />
<br />
Draw two circles on the stage. Both should be merge drawings, and both should have the same color. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLvtpyIvH7X7We75oAsD5Og4sHGU95F2S3-ZMHGE_Ia92pXkupTL1MiRnN9GIAibWZDPlnHRzPKsM11wItAniSw2w4L1B-oz7uWi1JDPjhrvtYeFXyax2m8cdP6r7mQhLGQafBAqMCTmQ/s1600/02-two-merge-circles.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLvtpyIvH7X7We75oAsD5Og4sHGU95F2S3-ZMHGE_Ia92pXkupTL1MiRnN9GIAibWZDPlnHRzPKsM11wItAniSw2w4L1B-oz7uWi1JDPjhrvtYeFXyax2m8cdP6r7mQhLGQafBAqMCTmQ/s400/02-two-merge-circles.jpg" width="400" /></a></div>
<br />
<span class="tutorialStep">Step 5</span><br />
<br />
Switch to the selection tool and then click and drag one of the circles so that it overlaps with the other circle.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi424JdlKqKqgikqUMKjL4wDbl1QjxS7SnPCjnBAPRs-0UUkby7S7b2TNbugok8H13ouAN_1HezCFVnRzed1TJ6dBA7oABHNGtLbhMwx2zjMu3VeF5xhCqt0hio5NdursyN7j-vkhvnXPja/s1600/03-drag-same-color-circle.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi424JdlKqKqgikqUMKjL4wDbl1QjxS7SnPCjnBAPRs-0UUkby7S7b2TNbugok8H13ouAN_1HezCFVnRzed1TJ6dBA7oABHNGtLbhMwx2zjMu3VeF5xhCqt0hio5NdursyN7j-vkhvnXPja/s400/03-drag-same-color-circle.jpg" width="400" /></a></div>
<br />
<span class="tutorialStep">Step 6</span><br />
<br />
Once they overlap, press <b>ctrl</b> + <b>shift</b> + <b>A</b> (PC) or <b>cmd</b> + <b>shift</b> + <b>A</b> (Mac) in order to deselect the selection.<br />
<br />
Check to see that the dotted pattern on top of the shape disappears. If it disappears, it means that the shape has been deselected. Another way of deselecting an object is to use the selection tool and then click on any empty area on the stage.<br />
<br />
<span class="tutorialStep">Step 7</span><br />
<br />
Then click anywhere on the newly overlapping shapes using the selection tool. You should see that both shapes are now merged together.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj6WM5SbwBrIwtZcu2sUAD1HVLLz9t55SvoTnbXzBow6k95SmiP-2v89TEDVh_9pb3BPMfdRKFq2BJmI7hk-H6TFjFlg73Xkoiap3F-pHivFnQ2YKrYKVqOFsIeV0Yh3njnUb_yKiN704p/s1600/04-merged.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj6WM5SbwBrIwtZcu2sUAD1HVLLz9t55SvoTnbXzBow6k95SmiP-2v89TEDVh_9pb3BPMfdRKFq2BJmI7hk-H6TFjFlg73Xkoiap3F-pHivFnQ2YKrYKVqOFsIeV0Yh3njnUb_yKiN704p/s400/04-merged.jpg" width="400" /></a></div>
<br />
This is now considered as one shape. If you click and drag it, then the whole shape will move to wherever you reposition it.<br />
<br />
<span class="tutorialStep">Step 8</span><br />
<br />
Now, let's find out what happens if you overlap merge drawings that have different colors.<br />
<br />
Select the oval tool again, and then go to the properties inspector and choose a new fill color. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDY3_5NO7qKeNTxPzDUVaN704NJ4xIu2aSUyDMY1a9KxqZUN4nwbqqXFshn5CrHlXC4GtQsZqbrVWjuGBWXJF-KlpdLuq9GbwWFtfAsHbZoss-jVXextWsDm1lxJ6-wjeedPkiuucLAnZ/s1600/05-pic-new-fill.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDY3_5NO7qKeNTxPzDUVaN704NJ4xIu2aSUyDMY1a9KxqZUN4nwbqqXFshn5CrHlXC4GtQsZqbrVWjuGBWXJF-KlpdLuq9GbwWFtfAsHbZoss-jVXextWsDm1lxJ6-wjeedPkiuucLAnZ/s400/05-pic-new-fill.jpg" width="400" /></a></div>
<br />
<span class="tutorialStep">Step 9</span><br />
<br />
Then draw another circle on the stage, and then use the selection tool to move this new circle so that it overlaps with the other two circles that were merged.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnD42N3Bqrs2rikw-kGPkRFB4fOd252Ntcg0BbyeLwiMO_EYDY8Ak_PlrptpsWwcMaN0Hr8y8EgDwd4HHJ4JsW0ERG_ECEqmV3k58t73DtcUEuIKUE5IpU6wKrzV3fNJXqfxtt0Pst9-qz/s1600/06-different-color-on-top.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnD42N3Bqrs2rikw-kGPkRFB4fOd252Ntcg0BbyeLwiMO_EYDY8Ak_PlrptpsWwcMaN0Hr8y8EgDwd4HHJ4JsW0ERG_ECEqmV3k58t73DtcUEuIKUE5IpU6wKrzV3fNJXqfxtt0Pst9-qz/s400/06-different-color-on-top.jpg" width="400" /></a></div>
<br />
<span class="tutorialStep">Step 10</span><br />
<br />
Then press <b>ctrl</b> + <b>shift</b> + <b>A</b> (PC) or <b>cmd</b> + <b>shift</b> + <b>A</b> (Mac) in order to deselect the selection.<br />
<br />
<span class="tutorialStep">Step 11</span><br />
<br />
Once the selection is deselected, click the new circle again and drag it away from the other shape.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb7R7g1VjY7PxmU6o_bOTN0PhBP1IZMpsR89LdaT92FoMVHN-xe1_mdhs2p5vjwexkA4_gggax_SSVl4E4-LYPHlSzbTYdgQWbR8ZOWfdB7yQQw3nocSELUU9-8uyTk8BaCudJNlBSz9gk/s1600/07-drag-circle-away.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb7R7g1VjY7PxmU6o_bOTN0PhBP1IZMpsR89LdaT92FoMVHN-xe1_mdhs2p5vjwexkA4_gggax_SSVl4E4-LYPHlSzbTYdgQWbR8ZOWfdB7yQQw3nocSELUU9-8uyTk8BaCudJNlBSz9gk/s400/07-drag-circle-away.jpg" width="400" /></a></div>
<br />
Once you've moved it to a new location, you'll see that it takes with it a chunk of the other shape. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2nPk26yRrelEI0PBn1L67S7RWmklhX4OWv8w20C4fVZhIfAA5mCiGrReLULlNTSPpIifyol0aKn6THIFXtwrtcZoCl3lJynTNuZ2xFiXOnroX_QOUtZpw8CdfqK-ZoeGzxuSij9vdmsCG/s1600/08-eaten.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2nPk26yRrelEI0PBn1L67S7RWmklhX4OWv8w20C4fVZhIfAA5mCiGrReLULlNTSPpIifyol0aKn6THIFXtwrtcZoCl3lJynTNuZ2xFiXOnroX_QOUtZpw8CdfqK-ZoeGzxuSij9vdmsCG/s400/08-eaten.jpg" width="400" /></a></div>
<br />
This is what happens when merge drawings of different colors overlap - the shape on TOP will <i>"eat up"</i> the parts of the shape underneath it.<br />
<br />
<div class="genericSeparator">
</div>
<br />
As I mentioned in the beginning of this tutorial, this only applies to merge drawings. Object drawings will not combine with each other if they overlap. This difference in behavior is probably one of the more important considerations you have to think of when choosing to work in the merge drawing mode or the object drawing mode. If you want to easily combine shapes just by overlapping them, then choose the merge drawing mode. If you want to make sure that each shape remains separate, then choose the object drawing mode.<br />
<br />
In <a href="http://www.flashpotential.com/2011/10/part-4-understanding-difference-between.html">part 4</a> of this series, we'll see how the paint bucket tool behaves depending on the drawing mode used to create closed shapes.<br />
<br />
<a href="http://www.flashpotential.com/2011/10/when-you-create-shapes-using-rectangle.html"><b><< PREV:</b> Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 2</a><br />
<br />
<div style="text-align: right;">
<a href="http://www.flashpotential.com/2011/10/part-4-understanding-difference-between.html">Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 4<b>: NEXT >></b></a></div>Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com0tag:blogger.com,1999:blog-3479935392155018913.post-36764566610260069232011-10-23T21:19:00.000-07:002011-10-25T12:51:19.596-07:00Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 2 - Flash CS5 Beginners Tutorial<ul class='articleMenuList'><li><a href='http://www.flashpotential.com/2011/10/understanding-difference-between-object.html'>Part 1</a></li>
<li><a class='currentPage' href='http://www.flashpotential.com/2011/10/when-you-create-shapes-using-rectangle.html'>Part 2</a></li>
<li><a href='http://www.flashpotential.com/2011/10/understanding-difference-between-object_24.html'>Part 3</a></li>
<li><a href='http://www.flashpotential.com/2011/10/part-4-understanding-difference-between.html'>Part 4</a></li>
<li><a href='http://www.flashpotential.com/2011/10/part-5-understanding-difference-between.html'>Part 5</a></li>
</ul><br />
When you create shapes using the rectangle, oval and polystar tools, you'll also have the option to work in either the object drawing or merge drawing mode. And just like in the examples we created in the first part of this tutorial series, these rectangles, ovals, polygons and star shapes will behave differently depending on the drawing mode used to create them.<br />
<br />
<span class="tutorialStep">Step 1</span><br />
<br />
Create a new Flash document.<br />
<br />
<span class="tutorialStep">Step 2</span><br />
<br />
Select the Oval tool.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnKpLdEf3QXVHcYGkRc6m3LKPpTTQMgJqgSf9sjW5HKsWk4t_6fVq2uuT3i9tcwobSBWzbeatyNtHRvEnppLsL0MIAO_LN9OMkzygZM-W1zKFWZR2EbtNhM-AwZJ35iqPyGxyRf55mj1EP/s1600/01-oval-odm-button.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnKpLdEf3QXVHcYGkRc6m3LKPpTTQMgJqgSf9sjW5HKsWk4t_6fVq2uuT3i9tcwobSBWzbeatyNtHRvEnppLsL0MIAO_LN9OMkzygZM-W1zKFWZR2EbtNhM-AwZJ35iqPyGxyRf55mj1EP/s320/01-oval-odm-button.jpg" width="320" /></a></div><br />
Once it's selected, you'll see the object drawing mode icon at the bottom of the toolbar as well. Just like with the brush tool, you can turn the object drawing mode on or off by clicking on it.<br />
<br />
<span class="tutorialStep">Step 3</span><br />
<br />
In the properties inspector:<br />
<ul><li>choose a stroke color and a fill color (make sure you choose different colors for each)</li>
<li>set a stroke height of 10</li>
<li>choose the solid style</li>
</ul><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIREUgdBEjP0I0RWJ2Li02Jl_YWsOFdNHSulzmfgjk8u9RNgJ76W6JXuEzIFBTLrwswC-PUVJ15mY-H5IEnRhIHnVbd2vrj6qMs61mGje2bjz0lx5RLEY6TERcOkQA61-6DGAZ0b0aO8eK/s1600/02-oval-properties.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIREUgdBEjP0I0RWJ2Li02Jl_YWsOFdNHSulzmfgjk8u9RNgJ76W6JXuEzIFBTLrwswC-PUVJ15mY-H5IEnRhIHnVbd2vrj6qMs61mGje2bjz0lx5RLEY6TERcOkQA61-6DGAZ0b0aO8eK/s320/02-oval-properties.jpg" width="320" /></a></div><br />
<span class="tutorialStep">Step 4</span><br />
<br />
Draw two circles on the stage - one on the left and one on the right. The one on the left side should be drawn in the merge drawing mode, while the one on the right side should be drawn in the object drawing mode.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEeJ4k3IHjkbuPSTvkHDuE9mvjwgsTLOmfQkXWzr3Ks0o7XoeDJSt6SuLW7XK70NMojK0XN5H2qjAC4dNlp2oIFS3MjEbgm9HNWH2JhdNiOkacZnMtEsmlQCqXa_Lg3S9aC-FXe2KP8o6c/s1600/03-two-circles.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEeJ4k3IHjkbuPSTvkHDuE9mvjwgsTLOmfQkXWzr3Ks0o7XoeDJSt6SuLW7XK70NMojK0XN5H2qjAC4dNlp2oIFS3MjEbgm9HNWH2JhdNiOkacZnMtEsmlQCqXa_Lg3S9aC-FXe2KP8o6c/s400/03-two-circles.jpg" width="400" /></a></div><br />
<span class="tutorialStep">Step 5</span><br />
<br />
Choose the selection tool, then click and drag the object drawing circle on the right side to a new location. Just move it anywhere you'd like as long as it does not cover the circle on the left.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjge_ApO8hWRmPwJZagh3tTGxj5JBeHmynTO4MBuQRKVBcrB6pihJ3OtjvBBqPownF_Z4uSFj52pGZXfxyl3ikxMD421afyMb90q8CZbKzctWaJKU-4SQK3tPEvss9h7W7zo1LRc3IiU2mL/s1600/04-move-right-circle.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjge_ApO8hWRmPwJZagh3tTGxj5JBeHmynTO4MBuQRKVBcrB6pihJ3OtjvBBqPownF_Z4uSFj52pGZXfxyl3ikxMD421afyMb90q8CZbKzctWaJKU-4SQK3tPEvss9h7W7zo1LRc3IiU2mL/s400/04-move-right-circle.jpg" width="400" /></a></div><br />
When you do this, nothing out of the ordinary happens. You'll be able to move the circle to a new location, just like you'd expect.<br />
<br />
<span class="tutorialStep">Step 6</span><br />
<br />
Now, let's try to move the merge drawing circle on the left.<br />
<br />
First, position the selection tool somewhere in the center of the circle.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQbGbrjkU6HyYIT4lbr4odw4qMCdcG6WrlFLsICsjk-OV3nDneWXE15gVbimlaouCCsiwUU0v_v2YjOpAJZKpyteH7PEbxF7oWF38UYtL1mOqDagMeHQBM_DiznPV21dCAOxqls8MxJta_/s1600/05-position-selection-center.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQbGbrjkU6HyYIT4lbr4odw4qMCdcG6WrlFLsICsjk-OV3nDneWXE15gVbimlaouCCsiwUU0v_v2YjOpAJZKpyteH7PEbxF7oWF38UYtL1mOqDagMeHQBM_DiznPV21dCAOxqls8MxJta_/s400/05-position-selection-center.jpg" width="400" /></a></div><br />
Then click and drag to move the circle to a new location. When you do this, you'll see that the stroke gets left behind.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhaIDRJxQMQAFc2S3LtDIiRI6xnEF37swaBVCZiZAabrC2Pvi6aAVQgR2FBg1oQSM0sgQ4mjY9hulD3QvIEJL5ktRSBG-7AR3yQ3EkGgPoLDvQOWjTGrvMJPbNUWBFXBLlXpnot8J5dBne/s1600/06-move-left-circle.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhaIDRJxQMQAFc2S3LtDIiRI6xnEF37swaBVCZiZAabrC2Pvi6aAVQgR2FBg1oQSM0sgQ4mjY9hulD3QvIEJL5ktRSBG-7AR3yQ3EkGgPoLDvQOWjTGrvMJPbNUWBFXBLlXpnot8J5dBne/s400/06-move-left-circle.jpg" width="400" /></a></div><br />
This is really how merge drawings will behave. With merge drawings, the stroke and the fill are treated separately. If you click on the fill, then it's only the fill that gets selected. If you click on the stroke, then its only the stroke that gets selected.<br />
<br />
With object drawings, all you have to do is click anywhere on the shape, and the fill and stroke are automatically included in the selection. However, if you double-click on it, then you end up going inside the object drawing where you can select the fill and the stroke separately. And as always, remember to go back to the main scene after you're done editing inside the object drawing.<br />
<br />
<span class="tutorialStep">Step 7</span><br />
<br />
So what do you do if you have a merge drawing, but you'd like to select both the fill and the stroke?<br />
To do this, you can use the selection tool to click and drag a selection area that covers the entire shape.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3YTeAZU9JVek6jkOPW4y_-e8VgJO4H1gE_ENlkyXXDRH6yKVmuWV072CHNJh3NBWsYmTKZ1LDrxyry4nt1YqI78NXB1iXOmQay3Fz34P3kYukxBn48LGj24hQpIFBsL32gbnM1DFpLI3A/s1600/07-click-drag-selection-area.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3YTeAZU9JVek6jkOPW4y_-e8VgJO4H1gE_ENlkyXXDRH6yKVmuWV072CHNJh3NBWsYmTKZ1LDrxyry4nt1YqI78NXB1iXOmQay3Fz34P3kYukxBn48LGj24hQpIFBsL32gbnM1DFpLI3A/s400/07-click-drag-selection-area.jpg" width="400" /></a></div><br />
Or you can also hold down the shift key on your keyboard, which lets you make multiple selections. While holding down the shift key, click on the fill, and then click on the stroke in order to select both.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_jgkatET4m3pqHpunjbtwinWV3f0xkMVakdm5cMrD5WrEC-PoOg3g_7uBIqwXJff5UKx2piwTtY_oN5v6XEWXiqC4d7J1iSUy-NyP_Ds75ZS6LN708THhsv2F9btIom1iP_ikXEEQ_xTM/s1600/08-shift-click-fill-stroke.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_jgkatET4m3pqHpunjbtwinWV3f0xkMVakdm5cMrD5WrEC-PoOg3g_7uBIqwXJff5UKx2piwTtY_oN5v6XEWXiqC4d7J1iSUy-NyP_Ds75ZS6LN708THhsv2F9btIom1iP_ikXEEQ_xTM/s400/08-shift-click-fill-stroke.jpg" width="400" /></a></div><br />
In <a href="http://www.flashpotential.com/2011/10/understanding-difference-between-object_24.html">part 3</a> of this series, we'll learn why the terms <b>merge</b> and <b>object</b> were used to define these drawing modes.<br />
<br />
<a href="http://www.flashpotential.com/2011/10/understanding-difference-between-object.html"><b><< PREV:</b> Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 1</a><br />
<br />
<div style="text-align: right;"><a href="http://www.flashpotential.com/2011/10/understanding-difference-between-object_24.html"> Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 3<b>: NEXT>></b></a></div>Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com0tag:blogger.com,1999:blog-3479935392155018913.post-24031225590919761312011-10-23T01:05:00.000-07:002011-10-25T12:50:34.386-07:00Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 1 - Flash CS5 Beginners Tutorial<ul class='articleMenuList'><li><a class='currentPage' href='http://www.flashpotential.com/2011/10/understanding-difference-between-object.html'>Part 1</a></li>
<li><a href='http://www.flashpotential.com/2011/10/when-you-create-shapes-using-rectangle.html'>Part 2</a></li>
<li><a href='http://www.flashpotential.com/2011/10/understanding-difference-between-object_24.html'>Part 3</a></li>
<li><a href='http://www.flashpotential.com/2011/10/part-4-understanding-difference-between.html'>Part 4</a></li>
<li><a href='http://www.flashpotential.com/2011/10/part-5-understanding-difference-between.html'>Part 5</a></li>
</ul><br />
When you use the drawing tools in Flash, you have the option to draw in two modes: <b>object drawing mode</b> vs <b>merge drawing mode</b>. This article will explain a few of the differences between the two.<br />
<br />
<span class="tutorialStep">Step 1</span><br />
<br />
Create a new Flash document.<br />
<br />
<span class="tutorialStep">Step 2</span><br />
<br />
Select the brush tool. You can use any brush size, color and shape that you'd like. But I recommend that you choose a brush size that's not too small so that what you draw will be thicker and more visible. Also, make sure that the color you choose is different from the background color of your document.<br />
<br />
<span class="tutorialStep">Step 3</span><br />
<br />
Once the brush tool is selected, take a look at the toolbar and look for the icon that shows a circle inside a square.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDjkmScf6G-rwCtIRMdP9oCnJIgzeRMWaqBJBYb5tttbjhgF2YxvB8Es1naPQtFOsXWsJ74Vn6xbpTLQ8-Gg_qfYvJpDYSG1f7DmDgDjsYeB1xoTsfsOzsbCWWghEolGXCjKsPFnxot3uo/s1600/01-object-drawing-button.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDjkmScf6G-rwCtIRMdP9oCnJIgzeRMWaqBJBYb5tttbjhgF2YxvB8Es1naPQtFOsXWsJ74Vn6xbpTLQ8-Gg_qfYvJpDYSG1f7DmDgDjsYeB1xoTsfsOzsbCWWghEolGXCjKsPFnxot3uo/s400/01-object-drawing-button.jpg" width="191" /></a></div><br />
You can click on this button, and it allows you to activate or deactivate the object drawing mode. If the icon appears to look inset, it means that the object drawing mode is <b>ON</b>. If not, then it means that the object drawing mode is <b>OFF,</b> and you are therefore on merge drawing mode instead.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Sr6xVsfc3ZHFR7oKgoV2SHD6ZU481ydSg1bTnbwzNHvELgwc5qAC3vIckl4qApszCnrhTwE3Ng_bNNg7qU624RY5jU9Ck8yIl9oA0FdUC3DeTJY_kdUjzPCrncT5zgH0Cs2vJDkQF0TZ/s1600/02-object-drawing-on-vs-off.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Sr6xVsfc3ZHFR7oKgoV2SHD6ZU481ydSg1bTnbwzNHvELgwc5qAC3vIckl4qApszCnrhTwE3Ng_bNNg7qU624RY5jU9Ck8yIl9oA0FdUC3DeTJY_kdUjzPCrncT5zgH0Cs2vJDkQF0TZ/s320/02-object-drawing-on-vs-off.jpg" width="320" /></a></div><br />
Clicking on this button lets you switch between object mode and merge mode. Check the object drawing mode button in your toolbar to see whether it's <b>ON</b> or <b>OFF</b>. If it's <b>ON</b>, then click on it to turn it <b>OFF</b>. If not, then leave it as is.<br />
<br />
<span class="tutorialStep">Step 4</span><br />
<br />
The best way to explain the differences between the two drawing modes is to create examples. So make sure that the object drawing mode is <b>OFF</b>. Then draw a line on the left side of the stage using the brush tool.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1zMmWkiSLBUomUevDmjsDv2OGp9SOOVQCZCaesEGiipVFKxzQ9tlMEeA1CKfs3z0_yn62VqOhzLhCtrORiA4RUSjBOdE0sF9HwQc7sCudxEK7OWFG_ezcrmmt1ge4PDOeO2jUivy93r5n/s1600/03-line-left-side.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1zMmWkiSLBUomUevDmjsDv2OGp9SOOVQCZCaesEGiipVFKxzQ9tlMEeA1CKfs3z0_yn62VqOhzLhCtrORiA4RUSjBOdE0sF9HwQc7sCudxEK7OWFG_ezcrmmt1ge4PDOeO2jUivy93r5n/s400/03-line-left-side.jpg" width="400" /></a></div><br />
Now remember, since the object drawing mode is <b>OFF</b>, this means that this line was drawn in merge mode.<br />
<br />
<span class="tutorialStep">Step 5</span><br />
<br />
Now let's switch to the object drawing mode. So this time, make sure that the object drawing mode is <b>ON</b>. And then draw another line on the right side of the stage using the brush tool.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWz261PdPve0RQ2EdXlQ1OCuQVdBveHViHXqJwlpFhkgALqwW8yt4aYJyDIPXO3vwpdUj-ODdbwVYA4XpiUCuh6oA2zVDrefPIJp7Fup1R8SX2DC3qdd3ZuBbIe6HK2a-Uuusewl7Rs25u/s1600/04-line-right-side.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWz261PdPve0RQ2EdXlQ1OCuQVdBveHViHXqJwlpFhkgALqwW8yt4aYJyDIPXO3vwpdUj-ODdbwVYA4XpiUCuh6oA2zVDrefPIJp7Fup1R8SX2DC3qdd3ZuBbIe6HK2a-Uuusewl7Rs25u/s400/04-line-right-side.jpg" width="400" /></a></div><br />
Immediately, you'll notice a difference. You'll see that this new line that you drew while you were in the object drawing mode is enclosed in a box. When it's enclosed in this box, it means that the artwork is currently selected. And when it's selected, this means that you can edit it (e.g. move it, change the color, modify the size). However, when you select something that was drawn in merge mode, it will <b>NOT</b> show a box or a border around it. In the next step, we'll see what happens instead.<br />
<br />
<span class="tutorialStep">Step 6</span><br />
<br />
Now let's select the other line to see how artwork drawn in merge mode will look like when it's selected.<br />
<br />
In the toolbar, choose the selection tool (it's the black arrow).<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5EniBCHsn3SsKRdh1nHFwOpUShQFbqaC72G2-dIl97TNcln4lN4Mf0PYoHU033dh-JAELG-cKRdWMm61zgCUTD-oci6S2CR4LCSMt_obBpZhYHcLVyv9ugkX0ojrRRf_8cqUiPotoS6mN/s1600/05-selection-tool.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5EniBCHsn3SsKRdh1nHFwOpUShQFbqaC72G2-dIl97TNcln4lN4Mf0PYoHU033dh-JAELG-cKRdWMm61zgCUTD-oci6S2CR4LCSMt_obBpZhYHcLVyv9ugkX0ojrRRf_8cqUiPotoS6mN/s200/05-selection-tool.jpg" width="168" /></a></div><br />
Then click on the line that you drew on the left side of the stage in order to select it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLDBq92u0lnnNtyO3wcDwIpJgRjdRZWIZrorofVloICJjc7enhQ3afKE_IInCkjKRBwt-9idcxE4vrL0enyF4agcF2ysoi69yJojChmLPo9fpa4fBgyK3odTzaQtPkAv7JX7uO7Rf4K_an/s1600/06-dotted-selection.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLDBq92u0lnnNtyO3wcDwIpJgRjdRZWIZrorofVloICJjc7enhQ3afKE_IInCkjKRBwt-9idcxE4vrL0enyF4agcF2ysoi69yJojChmLPo9fpa4fBgyK3odTzaQtPkAv7JX7uO7Rf4K_an/s400/06-dotted-selection.jpg" width="400" /></a></div><br />
Here, you'll see that the selection looks different (click on the image above to enlarge). Instead of being enclosed in a box, you'll see dots all over the artwork. So when you see this, this means that you currently have a merge type of drawing selected.<br />
<br />
So here we see that object drawings and merge drawings look different from each other when they are selected. This easily lets us know whether something is an object drawing or a merge drawing. <br />
<br />
<b>But aside from this, what other differences do they have?</b><br />
Another difference between a merge drawing and an object drawing is this:<br />
<br />
<b>Merge drawing</b> - you have the ability to directly select just a portion of the drawing<br />
<br />
<b>Object drawing</b> - if you try to select even just a small portion of the object drawing, the entire object drawing automatically gets selected<br />
<br />
To better understand this, let's practice it using our examples on the stage.<br />
<br />
<span class="tutorialStep">Step 7</span><br />
<br />
Make sure you're still using the selection tool. Let's first try to select a portion of the merge drawing on the left side of the stage. To select a portion, use the selection tool, then just click and drag a selection area that covers a small part of the artwork. Refer to the image below as a guide:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV8R5mNpTvWVWC8XK0Y8e8jNivPYu0eRG07A98pSh8q3EC7FqH4xpPjhdjNx_YvIWmnRWTW2_xrAXn_pF-7c0pIcAvvpuKWdJ7AlnDAG6cP741oJcddFmFn9s5sC6IJvoMplgU86c7Lid2/s1600/07-select-portion.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV8R5mNpTvWVWC8XK0Y8e8jNivPYu0eRG07A98pSh8q3EC7FqH4xpPjhdjNx_YvIWmnRWTW2_xrAXn_pF-7c0pIcAvvpuKWdJ7AlnDAG6cP741oJcddFmFn9s5sC6IJvoMplgU86c7Lid2/s400/07-select-portion.jpg" width="400" /></a></div><br />
Once you release the mouse and you've selected the portion, you'll see the dots appear only on top of the part that was selected. So this means that the parts that are not covered with dots are not included in the selection. <br />
<br />
<span class="tutorialStep">Step 8</span><br />
<br />
Now let's edit the currently selected portion. <br />
<br />
Go to the toolbar, and select a new color for the selected portion by picking one from the fill color box.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkFP_7Dka7JXxcaa_tJAsXwdr_fnfNGs54creslSgJMIl2QZnUC4b1Cf6CN7IMb7ldUifBXkfhSl94Bvi9ncumZxIFwlf_UMNwzeZapDsaX1P2FP_tfZNcNaNHfwQgl1PDK28Mf1Yy4B03/s1600/08-fill-color.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkFP_7Dka7JXxcaa_tJAsXwdr_fnfNGs54creslSgJMIl2QZnUC4b1Cf6CN7IMb7ldUifBXkfhSl94Bvi9ncumZxIFwlf_UMNwzeZapDsaX1P2FP_tfZNcNaNHfwQgl1PDK28Mf1Yy4B03/s320/08-fill-color.jpg" width="132" /></a></div><br />
Just click on the color box and select a different color. You'll then see that the new color only applies to the selected portion.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh5X5qb44eZ00BcHYhv83vUfbu9vwjjONuDn3NuIEnMsTBfLuud9gJzC_KFNKts7gegSZu-rmOa6_IQtTpi3MgO8l7R2k46Ckb16zpR4w2mq3GCwbH-RrCtBnwNKWUqb54JE3jjfiOPJar/s1600/09-half-red.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh5X5qb44eZ00BcHYhv83vUfbu9vwjjONuDn3NuIEnMsTBfLuud9gJzC_KFNKts7gegSZu-rmOa6_IQtTpi3MgO8l7R2k46Ckb16zpR4w2mq3GCwbH-RrCtBnwNKWUqb54JE3jjfiOPJar/s400/09-half-red.jpg" width="400" /></a></div><br />
So with merge drawings, you see that we can easily select just a portion of it. The selected portion can then be edited without affecting the rest of the drawing. You can change the selected portion's color, modify it's shape, move it to a different location, or you can even delete it if you'd like.<br />
<br />
In the next step, we'll see if we can do the same thing with the object drawing on the right.<br />
<br />
<span class="tutorialStep">Step 9</span><br />
<br />
So now, while still using the selection tool, we'll try to select just a portion of the drawing on the right.<br />
<br />
Go ahead and click and drag a selection area that just covers a portion of the shape, similar to what we did in step 7.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikjwtQb2s-44Mix30uHbQZqPkmoxWD9P5y0ue8yd7gQbQyzQajnuZS7f_6kd8Sc614St2n-cktoNFht-LKDPWm4hFYP3FzASp1d9uFmZyjaBCgv_0GhNVyBaRHHmptig9G7UrGZI_RUtsg/s1600/10-select-portion-object-drawing.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikjwtQb2s-44Mix30uHbQZqPkmoxWD9P5y0ue8yd7gQbQyzQajnuZS7f_6kd8Sc614St2n-cktoNFht-LKDPWm4hFYP3FzASp1d9uFmZyjaBCgv_0GhNVyBaRHHmptig9G7UrGZI_RUtsg/s400/10-select-portion-object-drawing.jpg" width="400" /></a></div><br />
Once you release the mouse, you'll see that even though you selected only a portion of the drawing, the entire shape still gets selected. That is what happens with object drawings. As long as you select even the tiniest portion of the drawing, the entire thing gets selected.<br />
<br />
But what can you do if you've got an object drawing, but you'd still like to be able to select only a portion of it? The next step will show you how.<br />
<br />
<span class="tutorialStep">Step 10</span><br />
<br />
With object drawings, it's still possible to select just a portion of the shape. There's just an extra step that you have to do.<br />
<br />
First, take note of the edit bar, which can be found above the stage. It should say <b>Scene 1</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOJXOFMfoU4Inl-3SpmYh3y-k2G_sykiOUOjpeSPKxDm6KTGpnpsF8IlIt3Q-922LkXbkedw3s-FtRql8Ndev-2q3mPa3vu_j0mqXS1r4tUTKDlaM2vR3Gok9YRFTuEDUBlyhJvF0rSWU2/s1600/11-edit-bar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOJXOFMfoU4Inl-3SpmYh3y-k2G_sykiOUOjpeSPKxDm6KTGpnpsF8IlIt3Q-922LkXbkedw3s-FtRql8Ndev-2q3mPa3vu_j0mqXS1r4tUTKDlaM2vR3Gok9YRFTuEDUBlyhJvF0rSWU2/s1600/11-edit-bar.jpg" /></a></div><br />
The edit bar tells you where you are. Right now, you are on scene 1.<br />
<br />
Now go ahead and double-click on the object drawing on the right side of the stage.<br />
<br />
After you double-click on it, look at the edit bar again. It should now say <b>Scene 1</b> followed by <b>Drawing Object</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV704tuSzgckdWy5d9NDVa7R3lt5ca-OrEZqlr6JqJ0H4IK5EnffXWneOzgg0K4hwoh6vvsYCkT25Lyj92B_SKLFtfbMlTQOCgId0zLjemDOThRe3wGYa7l2dLmOmGZTjYqBR_3NwK33t_/s1600/12-inside-drawing-object.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV704tuSzgckdWy5d9NDVa7R3lt5ca-OrEZqlr6JqJ0H4IK5EnffXWneOzgg0K4hwoh6vvsYCkT25Lyj92B_SKLFtfbMlTQOCgId0zLjemDOThRe3wGYa7l2dLmOmGZTjYqBR_3NwK33t_/s1600/12-inside-drawing-object.jpg" /></a></div><br />
What this means is that you are now inside the drawing object. You should see that you no longer have the box around your drawing. So in a way, it's as if you opened the box to get direct access to the artwork inside it. And now that you're inside the box, you'll be able to treat the artwork as a merge drawing. So you'll now have the ability to select just portions of it instead of the entire shape.<br />
<br />
<span class="tutorialStep">Step 11</span><br />
<br />
Once you're finished editing an object drawing, it's important that you go back to the main scene. Otherwise, you might end up inadvertently adding unwanted elements to the object drawing that you're currently editing.<br />
<br />
To go back to scene 1, just click on the <b>Scene 1</b> link in the edit bar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz14R0DT6ZUWiXQUF-hZBX-SGoyj8YfVLq-ZYUy7i94ATeuRiUFSof0LMicYJL_LnRoh6U5cRjtog8nfRkvlwhHe8e-AzuqxIzsWTC8-dvvzOudC8vJsRwwYp37pLIjIXp0q9s81ILZxKw/s1600/13-back-to-scene-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz14R0DT6ZUWiXQUF-hZBX-SGoyj8YfVLq-ZYUy7i94ATeuRiUFSof0LMicYJL_LnRoh6U5cRjtog8nfRkvlwhHe8e-AzuqxIzsWTC8-dvvzOudC8vJsRwwYp37pLIjIXp0q9s81ILZxKw/s1600/13-back-to-scene-1.jpg" /></a></div><br />
<b>NOTE:</b> Always be mindful of the edit bar. It's a common mistake for many to accidentally double-click on an object drawing, and then they fail to notice that they are no longer in the main scene, but continue to work as if they are.<br />
<br />
<div class="genericSeparator"></div><br />
In <a href="http://www.flashpotential.com/2011/10/when-you-create-shapes-using-rectangle.html">part 2</a> of this series, we'll create some object and merge drawing examples using the oval tool. <br />
<div style="text-align: right;"><br />
</div><div style="text-align: right;"><a href="http://www.flashpotential.com/2011/10/when-you-create-shapes-using-rectangle.html">Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 2<b>: NEXT >></b></a></div>Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com6tag:blogger.com,1999:blog-3479935392155018913.post-61281391714241483512011-08-22T04:44:00.000-07:002012-09-20T23:06:54.342-07:00Creating a Simple Animated Button - Flash Tutorial<b>This article comes with exercise files. Click on the link below to download:</b><br />
<a href="https://sites.google.com/site/flashpotentialfiles/exercise-files-creating-a-simple-animated-button">[GO TO EXERCISE FILES DOWNLOAD PAGE]</a><br />
<br />
<span class="tutorialStep">Step 1</span><br />
Open the <b>animated-button.fla</b> file. On the Stage, you will see a smiley face.<br />
<br />
<span class="tutorialStep">Step 2</span><br />
Use your selection tool to select the smiley face on the stage. <b><u>MAKE SURE YOU SELECT THE WHOLE ARTWORK</u>. Don't just click on it. Instead, use the selection tool to click and drag a selection area around the smiley face to ensure that the whole drawing is selected.</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpnN2wqlK3kErENZBNP3f3yvcEyP6aXpMNvn2p2yYtnooH689CzuKfmf9mjT8ZIqqxdQ05EPEMVw95us-IFrfiiOOw4SfMFvyJed2eBfaW8rXifUzeMb9D_1RSSM8gBUefOqbcMKt1UNJk/s1600/01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpnN2wqlK3kErENZBNP3f3yvcEyP6aXpMNvn2p2yYtnooH689CzuKfmf9mjT8ZIqqxdQ05EPEMVw95us-IFrfiiOOw4SfMFvyJed2eBfaW8rXifUzeMb9D_1RSSM8gBUefOqbcMKt1UNJk/s400/01.png" width="400" /></a></div>
<br />
Then convert it into a button symbol named ButtonSmiley.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjuyLki-8_9blBJnHkFndMjAHrfNC2vmr-3okauUGkQjnhbVAJ5XV6AN3ZwmrNyEmQ-cq11LjVGhQ0nJwEmS8x3cKR8CVIGg-Hx2c3M67Ytm-ykGIb-yro0MGbEopcsLltDQlruYjeMxEG/s1600/02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="121" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjuyLki-8_9blBJnHkFndMjAHrfNC2vmr-3okauUGkQjnhbVAJ5XV6AN3ZwmrNyEmQ-cq11LjVGhQ0nJwEmS8x3cKR8CVIGg-Hx2c3M67Ytm-ykGIb-yro0MGbEopcsLltDQlruYjeMxEG/s320/02.png" width="320" /></a></div>
<br />
<span class="tutorialStep">Step 3</span> <br />
Now double-click on the ButtonSmiley instance on the stage in order to enter symbol editing mode. In the edit bar, you should now see that you are inside the ButtonSmiley timeline.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Tpi_Okgut9tD31lMHhxtm_Dv46VHf3QyIobiK6-7dgUIqy5T99QvDtAubBNIm_JYNF2fzDePGD4FQLwjXcYryj1C3JEJNO9UM0Kvbmur1EVDCh7Gznil_W3u8fz8GAO2ZBmBX8UbdzZs/s1600/03.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Tpi_Okgut9tD31lMHhxtm_Dv46VHf3QyIobiK6-7dgUIqy5T99QvDtAubBNIm_JYNF2fzDePGD4FQLwjXcYryj1C3JEJNO9UM0Kvbmur1EVDCh7Gznil_W3u8fz8GAO2ZBmBX8UbdzZs/s320/03.png" width="320" /></a></div>
<br />
<span class="tutorialStep">Step 4</span><br />
You will see that the UP state already has a keyframe. Insert keyframes in the OVER, DOWN, and HIT states as well.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA4UJH9g9bFQoB7fjdWzUYca3nd6fzLPceIqrWMn6olHT6En_4kbgPrcINsxpTvZMOWeMlePBFj__5kSLqR_kNrVwObwFF7r1B9DwzfMpmunNzrzYfBfr5evnQX3ICfDyVS7uLcZCQN3hI/s1600/04.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="96" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA4UJH9g9bFQoB7fjdWzUYca3nd6fzLPceIqrWMn6olHT6En_4kbgPrcINsxpTvZMOWeMlePBFj__5kSLqR_kNrVwObwFF7r1B9DwzfMpmunNzrzYfBfr5evnQX3ICfDyVS7uLcZCQN3hI/s320/04.png" width="320" /></a></div>
<br />
<span class="tutorialStep">Step 5</span><br />
Then click on the OVER keyframe in order to select it. This is where we will place the animation so that the button becomes animated whenever the user mouses over it. The animation will actually be nested inside a movie clip that's going to be inside this OVER keyframe. We'll learn how to do that in the steps that follow. <br />
<br />
<span class="tutorialStep">Step 6</span><br />
Once the OVER keyframe is selected, go to the stage and make sure that the smiley face is selected. MAKE SURE THAT THE ENTIRE THING IS SELECTED. Then convert it into a movie clip symbol named SmileyAnimation. We are converting it into a movie clip symbol so that we can place the animation inside it.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtIwWEIkMtl9souL79ZpYKfrjSlPBcu2o5jrPDqZVrX168J36ep93VN2nRwrrFswo8YEX7kMSNmNJlCFROsR9uGs60m987jmB6TJSQJm1Ic-YyGBN7pVIyoJoV3ASKWbvVFIPNzYYyFEiD/s1600/05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtIwWEIkMtl9souL79ZpYKfrjSlPBcu2o5jrPDqZVrX168J36ep93VN2nRwrrFswo8YEX7kMSNmNJlCFROsR9uGs60m987jmB6TJSQJm1Ic-YyGBN7pVIyoJoV3ASKWbvVFIPNzYYyFEiD/s400/05.png" width="400" /></a></div>
<br />
<span class="tutorialStep">Step 7</span><br />
After converting it into a symbol, double-click on the SmileyAnimation instance on the stage in order go inside its timeline. In the edit bar, you should see that you are now inside the timeline of the SmileyAnimation movie clip.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJxVOnJUADp9izv8DCzMvvLRFMOuUgTjCfVCi55iiZq227UxVWdqg4_TA7hgmUQiDWsw8QBRyk8iJssyUCSoS0YaV9aB81l3Gur_YuTxRxu5MUrNAE3M-UuB5KvM4HxL2YwY-54u93rHXV/s1600/06.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJxVOnJUADp9izv8DCzMvvLRFMOuUgTjCfVCi55iiZq227UxVWdqg4_TA7hgmUQiDWsw8QBRyk8iJssyUCSoS0YaV9aB81l3Gur_YuTxRxu5MUrNAE3M-UuB5KvM4HxL2YwY-54u93rHXV/s320/06.png" width="320" /></a></div>
<br />
And remember, this movie clip instance is inside the OVER keyframe of the ButtonSmiley symbol.<br />
<br />
<span class="tutorialStep">Step 8</span><br />
To animate the smiley face, we can use classic tweens. But first, we'll need to convert the smiley face into a symbol again since we are now actually <b>inside</b> the timeline of the SmileyAnimation movie clip. Inside the SmileyAnimation movie clip, the smiley face on the stage is just a drawing. It's not yet a symbol. We'll need to convert into a symbol so that we can use classic tweens to animate it. So once again, make sure that the whole smiley face is selected and convert it into a movie clip symbol. This time, just name it Smiley.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn70DWr6wUuZu3IC3qdDb8gDx3_QaAIOl0HnZ1-Rfpq3tRyOUsCmF-e7JYMeKvLgrBLVqEFRfimipp-iYm9yJzW7GrnwzOEZGhSUn-fokwryBQogLsqiw7OTdlhhkBd2BhP6XzQJnSmXDy/s1600/07.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn70DWr6wUuZu3IC3qdDb8gDx3_QaAIOl0HnZ1-Rfpq3tRyOUsCmF-e7JYMeKvLgrBLVqEFRfimipp-iYm9yJzW7GrnwzOEZGhSUn-fokwryBQogLsqiw7OTdlhhkBd2BhP6XzQJnSmXDy/s400/07.png" width="400" /></a></div>
<br />
So now, we have the Smiley symbol, which is inside the SmileyAnimation symbol, which is inside the OVER keyframe of the ButtonSmiley symbol.<br />
<br />
<span class="tutorialStep">Step 9</span><br />
Then insert keyframes on frames 10 and 20 of the SmileyAnimation symbol's timeline.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg14CyQICWK-M1oBoLCbl3Z8oIx-MysadBupEm2LzOHwNWt8dj0nMlKROxYkObAFVcXzi9pYEpxNHHLiIJbR20Y1tPG5a-j74L9IK62pJOmqMEhEkhyphenhyphen_gG1-dZ1b3c_0nl6cB6s4BmiUhgv/s1600/08.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg14CyQICWK-M1oBoLCbl3Z8oIx-MysadBupEm2LzOHwNWt8dj0nMlKROxYkObAFVcXzi9pYEpxNHHLiIJbR20Y1tPG5a-j74L9IK62pJOmqMEhEkhyphenhyphen_gG1-dZ1b3c_0nl6cB6s4BmiUhgv/s320/08.png" width="320" /></a></div>
<br />
<span class="tutorialStep">Step 10</span><br />
Then go back to the keyframe on frame 10.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxR5Zr9Rhppkpl5Zkds1lf_6pAmmRnu3OeOCFJdQ4rSgcTrCzHrv2YfkCQqZa12Ad5FyCGbIW7bDQwBEMeGARmTWsuLBHtC-mWIe0R7DGNp6q90QAz0QidoCZ9KZ5pXmDeWewiEOzsFP9i/s1600/09.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxR5Zr9Rhppkpl5Zkds1lf_6pAmmRnu3OeOCFJdQ4rSgcTrCzHrv2YfkCQqZa12Ad5FyCGbIW7bDQwBEMeGARmTWsuLBHtC-mWIe0R7DGNp6q90QAz0QidoCZ9KZ5pXmDeWewiEOzsFP9i/s320/09.png" width="320" /></a></div>
<br />
<span class="tutorialStep">Step 11</span><br />
Once you are back on the keyframe on frame 10, increase the size of the instance of the Smiley symbol on the stage. Select the free transform tool to be able to scale the instance on the stage.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5K3-3VTXlH3bWYsbFNoX7qem5oh-bEdQPKvhnOy_ZXjkW1ROodAgps0v1pWrIyDK-r1NzHHfP_y9BMPUGslOCX12Aq-G3AnDdWafRnUtkjMDdIZIoTlG9zNgupnZk_b8VCboPBJLItNeB/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5K3-3VTXlH3bWYsbFNoX7qem5oh-bEdQPKvhnOy_ZXjkW1ROodAgps0v1pWrIyDK-r1NzHHfP_y9BMPUGslOCX12Aq-G3AnDdWafRnUtkjMDdIZIoTlG9zNgupnZk_b8VCboPBJLItNeB/s1600/10.png" /></a></div>
<br />
Once the free transform tool is selected, click on the Smiley instance on the stage to make sure that it's selected. DO NOT DOUBLE CLICK IT. Just click it once.<br />
<br />
You should then see adjustment handles on the corners and the sides of the instance.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCSwDJaPj4uSWgMuiaJwL2k-Db4dfGLDhnKBo5BVJ_a9ICubN8CB0LDHlbQXP8GxwoWXBbywFXFGSq9UVmBp16Msk5fLjqXVIlW5jrwTw5h-XjMMbIyDf8Dsc1rmkACY9dR2wZyYaoaXi/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCSwDJaPj4uSWgMuiaJwL2k-Db4dfGLDhnKBo5BVJ_a9ICubN8CB0LDHlbQXP8GxwoWXBbywFXFGSq9UVmBp16Msk5fLjqXVIlW5jrwTw5h-XjMMbIyDf8Dsc1rmkACY9dR2wZyYaoaXi/s320/11.png" width="320" /></a></div>
<br />
Place the cursor over any of the corner handles and click and drag outward in order to make the Smiley instance bigger. <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6adzGYd_OTL30g4q8zVRI61r-KPFzTqdcwWRuBKk4LHausCcWowbI4McfpNb0T1-2HdyrkATJf_FSVq3_1riFC51fObFBAWWxawj4Q1CiLH5oAA7tpkfH-Z7zBSMR6Veu4-ekDxR88L3N/s1600/12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6adzGYd_OTL30g4q8zVRI61r-KPFzTqdcwWRuBKk4LHausCcWowbI4McfpNb0T1-2HdyrkATJf_FSVq3_1riFC51fObFBAWWxawj4Q1CiLH5oAA7tpkfH-Z7zBSMR6Veu4-ekDxR88L3N/s320/12.png" width="320" /></a></div>
<br />
<span class="tutorialStep">Step 12</span><br />
Once you've increased the size, insert classic tweens in between all of the keyframes. We have 3 keyframes, so we'll insert a classic tween between the first and middle keyframes, and then we'll insert another one between the middle and last keyframes. To insert a classic tween, right-click anywhere in between the keyframes and choose <b>Create Classic Tween</b>.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcWSfEMAWjnHAzgUJBPJdaA1JRcGJ__th4JTfAF5jo-VZTXgmWGFBewL78QxqQbW9GlMWVuljLyjnPGK-UQ3l6wTHTkY2tHJyyz8aFUfium0s8WFK1SieQVSGlYQl2IiJe3QEprDkb3E8N/s1600/13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcWSfEMAWjnHAzgUJBPJdaA1JRcGJ__th4JTfAF5jo-VZTXgmWGFBewL78QxqQbW9GlMWVuljLyjnPGK-UQ3l6wTHTkY2tHJyyz8aFUfium0s8WFK1SieQVSGlYQl2IiJe3QEprDkb3E8N/s320/13.png" width="320" /></a></div>
<br />
Once the classic tweens have been added, your animation should now be complete.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuduY0Zk8H2nxpipVspcIcLKxN4dDy8cirn7OoA7PeJEW2mSjqIA3pkKvJTjWcKJBvKv2rC5Gast2wOBqZ_x38-o2v0hY2xLf7SeaCfj_QkHLuDav6I4HvRzBvDVSplfHtBNPjAaDU0pWL/s1600/14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuduY0Zk8H2nxpipVspcIcLKxN4dDy8cirn7OoA7PeJEW2mSjqIA3pkKvJTjWcKJBvKv2rC5Gast2wOBqZ_x38-o2v0hY2xLf7SeaCfj_QkHLuDav6I4HvRzBvDVSplfHtBNPjAaDU0pWL/s320/14.png" width="320" /></a></div>
<br />
To recap, you've created a nested animation inside the SmileyAnimation symbol. And since the SmileyAnimation symbol is inside the OVER keyframe of the ButtonSmiley symbol, this means that the animation is only going to come out when the user mouses over the button.<br />
<br />
<span class="tutorialStep">Step 13</span><br />
Test the movie by pressing ctrl + enter (PC) or cmd + return (Mac). Once the test movie comes out, mouse over the smiley face and watch it animate. When you mouse out of the button, then the animation will stop. Mouse over it again, and the animation starts again.<br />
<br />
Congratulations! You have just created an animated button.Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com0tag:blogger.com,1999:blog-3479935392155018913.post-38435565077692521152011-07-24T10:08:00.000-07:002011-07-30T23:30:34.734-07:00Understanding When to Insert Frames, Keyframes and Blank Keyframes - Flash Tutorial for Beginners<b>This article comes with exercise files. Click on the link below to download:</b><br />
<b><a href="https://sites.google.com/site/flashpotentialfiles/insert-f-kf-bkf">[GO TO EXERCISE FILES DOWNLOAD PAGE]</a></b><br />
<br />
In Flash, you have the option to insert frames, keyframes and blank keyframes in the timeline. In this article, I'll show you a couple of examples that will help you understand when you should be inserting which.<br />
<br />
<span class="tutorialSectionTitle">Inserting Frames</span><br />
<br />
<span class="tutorialStep">Step 1</span><br />
Open the insert-frame.fla file.<br />
<br />
<span class="tutorialStep">Step 2</span><br />
Test the movie by pressing ctrl + enter (PC) or cmd + return (Mac) on your keyboard.<br />
<br />
You'll see a jumping stickman animation, but you'll notice that the <i>"jump!"</i> title at the top only appears for a split second and then disappears (you might have to wait until it loops again to see it because it happens pretty fast).<br />
<br />
<b>Why is this happening?</b><br />
If you take a look at the timeline, you'll see a layer called <b>Jump</b>. This is the layer that contains the <i>"jump!"</i> title. You'll see that this layer only has one keyframe at the very beginning.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7XIrzVipZ2UiPmvXVpVCobyW0waGj_mXKiz6RQYIP3CBIW-mXc9Dx_jOGdlzzL_o9Srm_JJncu-dUQE-I7OEr9Cuw3O4GyJcL99joI1f8nUdAsrYOiWt-hCW3JFDrTAYze4_jCRjlVw4C/s1600/01-only-1-kf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="52" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7XIrzVipZ2UiPmvXVpVCobyW0waGj_mXKiz6RQYIP3CBIW-mXc9Dx_jOGdlzzL_o9Srm_JJncu-dUQE-I7OEr9Cuw3O4GyJcL99joI1f8nUdAsrYOiWt-hCW3JFDrTAYze4_jCRjlVw4C/s400/01-only-1-kf.png" width="400" /></a></div><br />
After that first keyframe, the layer doesn't have any more frames. This is why the <i>"jump!"</i> title only appears for a split second - it only appears in that first keyframe. After that, there are no more frames that show it, so it disappears.<br />
<br />
<b>How do we make the <i>"jump!"</i> title appear all throughout the animation? </b><br />
We'll need to insert more frames.<br />
<br />
<span class="tutorialStep">Step 3</span><br />
Position your mouse pointer over the empty box on the <b>Jump</b> layer that's right on top of the very last keyframe of the <b>Animation</b> layer, then right-click on it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifJt8QS3ZmSby7R9Tdht_5WbN-d4Qibobqo-DuGJfuEp-Xy9gZbvByV4ulVWxedPp_-2TC8oVI-wrm0LZkfgEip-KOcGSWNjoRMh4UUJlZBjgNHnkjcLflw1G5kyKU2KbLvU19nH2Sfi3K/s1600/02-pointer-over-box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifJt8QS3ZmSby7R9Tdht_5WbN-d4Qibobqo-DuGJfuEp-Xy9gZbvByV4ulVWxedPp_-2TC8oVI-wrm0LZkfgEip-KOcGSWNjoRMh4UUJlZBjgNHnkjcLflw1G5kyKU2KbLvU19nH2Sfi3K/s400/02-pointer-over-box.png" width="400" /></a></div><br />
From the context menu that pops up, choose <b>Insert Frame</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR3btp-fCtWgXStImbvQiny90C77d_FWmyo1Gjy5NZGv4FSvaUmarRMxB4lmvyJy0csKW85CyQDnDRGl2Y76f6LbcX1gGUHQBAv0AJ7RQhUxORnIzhIeANCOV60Um2wLGIZ6cTBtyt2Ym1/s1600/03-menu-insert-frame.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR3btp-fCtWgXStImbvQiny90C77d_FWmyo1Gjy5NZGv4FSvaUmarRMxB4lmvyJy0csKW85CyQDnDRGl2Y76f6LbcX1gGUHQBAv0AJ7RQhUxORnIzhIeANCOV60Um2wLGIZ6cTBtyt2Ym1/s400/03-menu-insert-frame.png" width="400" /></a></div><br />
This is going to insert frames starting at frame 2, all the way up to the frame that you right-clicked on.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV1iOtEqFKLvco4fXYPd5NpYHyCIwG3wuVAWzkXV4eosXXfO6G1wpFCjNYcKBvI_QBCgVFPiw8xwqoQeiYE3tG_YvR0YPup2qucf5ha7BEn20XlW-XMqylC4NVj8em-TaAbvyZOZon5HhB/s1600/04-frames-inserted.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV1iOtEqFKLvco4fXYPd5NpYHyCIwG3wuVAWzkXV4eosXXfO6G1wpFCjNYcKBvI_QBCgVFPiw8xwqoQeiYE3tG_YvR0YPup2qucf5ha7BEn20XlW-XMqylC4NVj8em-TaAbvyZOZon5HhB/s400/04-frames-inserted.png" width="400" /></a></div><br />
There is no need to insert the frames one by one. Flash will automatically fill the frames in between the empty box that you right-click on and the nearest keyframe to the left.<br />
<br />
<span class="tutorialStep">Step 4</span><br />
Test the movie and you should see the <i>"jump!"</i> title appear all throughout the animation.<br />
<br />
<b>So why did we have to insert frames?</b><br />
Think of frames as extensions of keyframes. Inserting frames will extend the duration of whatever content is on the keyframe that is to the left of the frames. So since we simply wanted to extend the duration of the <i>"jump!"</i> title on the first keyframe, then inserting frames after the first keyframe is what we needed to do.<br />
<br />
<span class="tutorialSectionTitle">Inserting Keyframes</span><br />
<br />
<span class="tutorialStep">Step 1</span><br />
Open the insert-keyframe.fla file.<br />
<br />
Just like in the previous section on inserting frames, the <b>Jump</b> layer in this file only has one keyframe, so the <i>"jump!"</i> title is only going to appear for a split second. We're going to extend the duration of the <i>"jump!"</i> title for this exercise as well. But aside from doing that, we'll also make some changes so that the title changes to a new location after every 1 second or so. To do this, we'll need to add keyframes.<br />
<br />
<span class="tutorialStep">Step 2</span><br />
This Flash document has a frame rate of 12 frames per second so that means that after every 12 frames, 1 second passes. So let's go ahead and insert a keyframe.<br />
<br />
In the <b>Jump</b> layer, position the pointer over empty box no. 13. You'll see numbers after every 5 frames at the top of the timeline, so you can use that as a guide to locate empty box no. 13 in the <b>Jump</b> layer. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDpQyUmiimbO9Cszq12x68c8L8I-qAFmaEbT5yeSt9mCPufCRvrWEHpGpBmy9DT8TA0NBJNuDWP-PWlMaHo2Gr3nvMvMN9TkxOzP-5e0PEPxY2ECljz3T7u9iM3pOIx-OGDwjm-HrGE-C3/s1600/01-pointer-over-13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDpQyUmiimbO9Cszq12x68c8L8I-qAFmaEbT5yeSt9mCPufCRvrWEHpGpBmy9DT8TA0NBJNuDWP-PWlMaHo2Gr3nvMvMN9TkxOzP-5e0PEPxY2ECljz3T7u9iM3pOIx-OGDwjm-HrGE-C3/s400/01-pointer-over-13.png" width="400" /></a></div><br />
Then right-click on it and choose <b>Insert Keyframe</b> from the context menu.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtg79L3JXmrKPacgY6LBXoMmyTKbWLvVxa9NPEU2Wkz1KlJH1TovYxqprhA03HRGjEwcrR1Kvz4jg_tYKalyYKeUBF3Vkfz8p6IfP_4bmnYxh2sPhEBI-ygc4W4jZ66jYqfdpm0-xUCOue/s1600/02-insert-kf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="139" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtg79L3JXmrKPacgY6LBXoMmyTKbWLvVxa9NPEU2Wkz1KlJH1TovYxqprhA03HRGjEwcrR1Kvz4jg_tYKalyYKeUBF3Vkfz8p6IfP_4bmnYxh2sPhEBI-ygc4W4jZ66jYqfdpm0-xUCOue/s320/02-insert-kf.png" width="320" /></a></div><br />
You should now see a keyframe on frame no. 13.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMz7-ZIgTNPZYkjfSqUmcWPipC_fyuKLE3E1WSrSM8UH0-N94DNNm8ktRAJ8TSM2Xk2lZPQvYsBbTKE2irJyz6BQBmcjvL6wgrgcvWmkcHAWlJk-ALE6c6e7xaLX2Vh5caIQ5x7FvZwUH0/s1600/03-kf-on-13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMz7-ZIgTNPZYkjfSqUmcWPipC_fyuKLE3E1WSrSM8UH0-N94DNNm8ktRAJ8TSM2Xk2lZPQvYsBbTKE2irJyz6BQBmcjvL6wgrgcvWmkcHAWlJk-ALE6c6e7xaLX2Vh5caIQ5x7FvZwUH0/s400/03-kf-on-13.png" width="400" /></a></div><br />
So we now have two keyframes in the <b>Jump</b> layer. There is a keyframe on frame 1 and another keyframe on frame 13. You'll also notice that Flash automatically adds frames in between the 2 keyframes.<br />
<br />
<span class="tutorialStep">Step 3</span><br />
Then let's add a couple more keyframes. Insert keyframes in the empty boxes for <b>nos. 13</b>, <b>25</b> and <b>37</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7qIHZQ1UjM1g0_Pi0UltwoGLE20TWBjPeIfjWF3kLD6GfpwsHdTeZ3_8ipF845GEcns31H-cPl1SyUUlmAtyT1dVQuyUrl7fnkGH9Pxi5wO_-Cb-YFfYEn831JuXuPIIzOEfZ8UcE3PHL/s1600/04-all-kfs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7qIHZQ1UjM1g0_Pi0UltwoGLE20TWBjPeIfjWF3kLD6GfpwsHdTeZ3_8ipF845GEcns31H-cPl1SyUUlmAtyT1dVQuyUrl7fnkGH9Pxi5wO_-Cb-YFfYEn831JuXuPIIzOEfZ8UcE3PHL/s400/04-all-kfs.png" width="400" /></a></div><br />
<span class="tutorialStep">Step 4</span><br />
Then position the pointer on empty box no. 48 of the <b>Jump</b> layer. Right-click on it, but instead of inserting a <b>keyframe</b>, just insert a regular <b>frame</b>. For this exercise, we don't need a keyframe at the end of the <b>Jump</b> layer. We just want to make sure that we have enough frames to match the keyframes in the <b>Animation</b> layer below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ZjhZRXefoAfHlQtci7kh9NxYixxrX_ybUrAmKeYw-6npNbcvOQe_kFAgRYpTy1ck2alyagpcg4rUFYpO6p_7mNdBu57TFHa5ikhG4bByE6uVxmAThkOcT_UjMZo9dTrRPjKo9ezshEhr/s1600/05-f-end.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ZjhZRXefoAfHlQtci7kh9NxYixxrX_ybUrAmKeYw-6npNbcvOQe_kFAgRYpTy1ck2alyagpcg4rUFYpO6p_7mNdBu57TFHa5ikhG4bByE6uVxmAThkOcT_UjMZo9dTrRPjKo9ezshEhr/s400/05-f-end.png" width="400" /></a></div><br />
<b>What happens when you insert a keyframe?<br />
</b>When you insert a keyframe, the contents of the previous keyframe (the objects that are on the stage) are copied to the newly inserted keyframe. So just like frames, inserting a keyframe will also end up extending the duration of the contents of the previous keyframe. But the difference is that you can make independent changes to the contents of each keyframe. This is not the case when you make changes to just regular frames. If you make changes to the contents of one frame, the contents of the frames connected to it will change as well. The concept of being able to make independent changes with keyframes will be illustrated in the next steps.<br />
<br />
<span class="tutorialStep">Step 5</span><br />
So now that we've added a total of 3 new keyframes, we'll go ahead and change the position of the <i>"jump!"</i> title on each of those new keyframes.<br />
<br />
First, click on the keyframe on frame 13 in order to select it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ7tbP70hngIZSMn3hIgrzAy2kogkzD_9sw7NjVOyxuIzq72wyv8_5Ophx1O2ecEhAEn1525V6ulVvFMx7fWJdYACSExRYTNqkmV5-TWZkDELR2D_fBBIqRGStBzF1iP5ny5MWtjZJxYIs/s1600/06-select-kf-13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ7tbP70hngIZSMn3hIgrzAy2kogkzD_9sw7NjVOyxuIzq72wyv8_5Ophx1O2ecEhAEn1525V6ulVvFMx7fWJdYACSExRYTNqkmV5-TWZkDELR2D_fBBIqRGStBzF1iP5ny5MWtjZJxYIs/s400/06-select-kf-13.png" width="400" /></a></div><br />
Then make sure you choose the <b>selection</b> tool from the tool bar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigAePG4ZnwqQbVGpX83FIegOHXfPvzvwU-z4QgIqGL8P3PU2SkcmsUz8K4oqVwUuiogOeQ4KjfnO2XG401hyQ7K4hBRQuDf4AFt4YFpOcpNF9oRZ4dAYFDirZ5yqRMo_ugvo9ERMYzV0U9/s1600/07-selection-tool.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigAePG4ZnwqQbVGpX83FIegOHXfPvzvwU-z4QgIqGL8P3PU2SkcmsUz8K4oqVwUuiogOeQ4KjfnO2XG401hyQ7K4hBRQuDf4AFt4YFpOcpNF9oRZ4dAYFDirZ5yqRMo_ugvo9ERMYzV0U9/s400/07-selection-tool.png" width="400" /></a></div><br />
<br />
Then click and drag the <i>"jump!"</i> title on the stage and move it to a new location anywhere on the stage.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA3E_it0HoRceXneiHiexd7mnamOYrAEtqsilpK9D0bKT2H82JhUqWQ4vjvXPtWP3iWOz2e3WI87D8Zo5Vya2-8FSlYYbQ7LS1kWsibCbJC0uCaAzHXKBdswVALEteq0Qb_SAxcpMqO2i7/s1600/08-move-jump.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA3E_it0HoRceXneiHiexd7mnamOYrAEtqsilpK9D0bKT2H82JhUqWQ4vjvXPtWP3iWOz2e3WI87D8Zo5Vya2-8FSlYYbQ7LS1kWsibCbJC0uCaAzHXKBdswVALEteq0Qb_SAxcpMqO2i7/s400/08-move-jump.png" width="400" /></a></div><br />
Then go to the keyframes on frames 25 and 37 and move the <i>"jump!"</i> title on these keyframes to new locations as well.<br />
<br />
So in all of the keyframes in the <b>Jump</b> layer, the <i>"jump!"</i> title should be in different locations.<br />
<br />
<span class="tutorialStep">Step 6</span><br />
Go ahead and test the movie, and you should see that every 1 second, the <i>"jump!"</i> title is going to move to a new location.<br />
<br />
<b>So when should we insert keyframes?</b><br />
Add a keyframe everytime you want to make some kind of change. Each keyframe is independent of the other keyframes. This means that if you make changes to the objects on the stage in one keyframe, the state of the objects in the other keyframes are unaffected. This is why when we move the location of the <i>"jump!"</i> title in one keyframe, the positions of the <i>"jump!"</i> title in the other keyframes are unaffected. So when we play the animation, the title moves to a new location each time the playhead gets to a new keyframe.<br />
<br />
<span class="tutorialSectionTitle">Inserting Blank Keyframes</span><br />
<br />
<span class="tutorialStep">Step 1</span><br />
Open the insert-frame.fla file.<br />
<br />
<span class="tutorialStep">Step 2</span><br />
Test the movie, and you will see that the <i>"jump!"</i> title appears all throughout the animation. In this section, we'll make the <i>"jump!"</i> title disappear when it gets to the middle of the animation.<br />
<br />
<span class="tutorialStep">Step 3</span><br />
Position the cursor over frame 25 of the <b>Jump</b> layer.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjXF3MP_t0Cu48PhayMGwKJsfSHoxs14DTw17mRo7a5eau6RuYaNT-N1NqpIsW94FVp1TQKKPRQFcEPObvwtK1swgfwajar_Li3zVNNWgYn_IhL7lMJhIRgeVT7rfZzIXBsHBZWsGsi6iB/s1600/01-pointer-over-25.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="66" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjXF3MP_t0Cu48PhayMGwKJsfSHoxs14DTw17mRo7a5eau6RuYaNT-N1NqpIsW94FVp1TQKKPRQFcEPObvwtK1swgfwajar_Li3zVNNWgYn_IhL7lMJhIRgeVT7rfZzIXBsHBZWsGsi6iB/s400/01-pointer-over-25.png" width="400" /></a></div><br />
Then right-click on it and choose <b>Insert Blank Keyframe</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnVDR68Fq8hxiiLLqHkZQGQuJP53qmGnL5pwxoad53XJELIaLdYT0i-seeK5cLzji8rO7HM3rntGBJwcGaPypms3oQA8wk9-4Jbj_6b8O5gE3HFI_Y4aGYgLAhI8AcEoqa6gCA0iQXQMqF/s1600/02-insert-bkf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="117" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnVDR68Fq8hxiiLLqHkZQGQuJP53qmGnL5pwxoad53XJELIaLdYT0i-seeK5cLzji8rO7HM3rntGBJwcGaPypms3oQA8wk9-4Jbj_6b8O5gE3HFI_Y4aGYgLAhI8AcEoqa6gCA0iQXQMqF/s320/02-insert-bkf.png" width="320" /></a></div><br />
You should immediately see the <i>"jump!"</i> title disappear from the stage. And you'll also see the remaining frames right after the blank keyframe become blank as well. This means that starting from the new blank keyframe, the <i>"jump!"</i> title will no longer be on the stage.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7MCMAFsQHAvDTBP-CzjAyzqNJ3VXhL1r9BbJ9w6VThIMsV3miAoL2csBi7KVuFtJPZR3DaUAnNUDSfUrJW3UNyohhGBYXXVLOH_-YjPbjboLYSJjas_Cjl03fYth5F_Cr7y78ZDozVt26/s1600/03-blanks.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7MCMAFsQHAvDTBP-CzjAyzqNJ3VXhL1r9BbJ9w6VThIMsV3miAoL2csBi7KVuFtJPZR3DaUAnNUDSfUrJW3UNyohhGBYXXVLOH_-YjPbjboLYSJjas_Cjl03fYth5F_Cr7y78ZDozVt26/s400/03-blanks.png" width="400" /></a></div><br />
<b>What is the difference between a keyframe and a blank keyframe?</b><br />
You can make independent changes with both a keyframe and a blank keyframe. The main difference is that with a blank keyframe, there is simply nothing on the stage (but only for the layer with the blank keyframe - the other layers are unaffected since they have their own set of frames, keyframes and blank keyframes). Whenever you insert a blank keyframe, you start off with a blank slate at that point of insertion. You can then keep it empty, or you can decide to add or draw something new on that blank keyframe. But once you draw something, then it's no longer a blank keyframe since there is already something on the stage. Conversely, if you have a keyframe, but you decide to remove the contents of that keyframe, then that keyframe becomes a blank keyframe.<br />
<br />
<span class="tutorialStep">Step 4</span><br />
Test the movie to see the <i>"jump!"</i> title disappear in the middle of the animation.<br />
<br />
<span class="tutorialSectionTitle">Summary</span><br />
<ul><li>Insert frames if you simply want to extend the duration of something that appears on the stage.</li>
<li>Insert keyframes if you want to make independent changes at certain points in the animation.</li>
<li>Insert blank keyframes if you want to make a keyframe that is empty.</li>
</ul><br />
<span class="tutorialSectionTitle">Try This On Your Own</span><br />
Create one Flash movie where the following things happen:<br />
<ol><li>When the Flash movie begins, a green circle appears for 1 second and then disappears. Place this green circle in the lower-left corner.</li>
<li>When the Flash movie begins, wait 1 second, and then a blue circle appears in the center of the stage and stays there for 2 seconds. After that, it will disappear for the next 2 seconds, and then it will reappear again in the exact same spot, and stay there for 1 more second.</li>
<li>When the flash movie begins, wait 3 seconds and then a red circle appears and stays there for 2 seconds, and then disappears again after that. Place this red circle in the lower-right corner.</li>
</ol>Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com5tag:blogger.com,1999:blog-3479935392155018913.post-49578545599653859752011-07-20T00:42:00.000-07:002012-12-13T07:03:40.506-08:00Creating a Frame by Frame Animation | Flash CS5 Video Tutorials for BeginnersIn this Flash CS5 video tutorial for beginners, you'll learn how to create a simple frame by frame animation.<br />
<br />
Topics covered in this short video:<br />
<br />
<ul class="regularUL"><li>Inserting blank keyframes</li>
<li>Onion skin</li>
<li>Copying, pasting and reversing frames</li>
<li>Previewing your Flash movie</li>
</ul><br />
<br />
<iframe allowfullscreen="" frameborder="0" height="442" src="http://www.youtube.com/embed/72RY2db3HwI?rel=0" width="550"></iframe><br />
<br />
Thanks for watching. If you liked the video, please share it with your friends.<br />
<br />
<b>Video transcript:</b><br />
<br />
0:06 an animation<br />
0:07 is really made up of a series of images<br />
0:10 these images<br />
0:11 referred to as frames<br />
0:13 are then played in rapid succession, creating the illusion of movement<br />
0:18 let's go ahead and learn how to create one in flash<br />
0:22 i've got a new flash document open<br />
0:24 and let's first take a look at the timeline<br />
0:28 here, you see a blank keyframe represented by this empty circle inside a box<br />
0:34 in flash<br />
0:35 you'll need a keyframe<br />
0:37 to be able to draw on the stage<br />
0:39 whenever you start a new flash document<br />
0:41 you'll always have one blank frame by default<br />
0:45 now let's go ahead and draw a stickman<br />
0:47 on the stage<br />
0:49 select the brush tool<br />
0:51 choose your desired color, size, and shape, and draw your stick man<br />
0:59 once you've drawn your stickman<br />
1:00 let's add another blank keyframe right after the first one<br />
1:05 right click on the next empty box<br />
1:07 and choose insert blank keyframe <br />
1:10 you'll see the stickman disappear<br />
1:12 that's because we are now on the second frame of our animation <br />
1:16 the stickman that we just made is on the first frame<br />
1:19 so now we start drawing the second frame of our animation<br />
1:25 before we continue<br />
1:26 let's activate the onion skin feature<br />
1:28 by clicking on this button right here<br />
1:31 after you click on the button<br />
1:33 you're going to see a lighter version of<br />
1:35 the stickman that you just drew appear on the stage<br />
1:39 the onion skin feature<br />
1:40 allows you to see what's the inside the other frames<br />
1:43 so that you can use it as a guide<br />
1:45 when you draw the rest of your animation<br />
1:48 so the stickman that you see here<br />
1:50 is not actually on the second frame<br />
1:52 so what we want to do here is<br />
1:54 draw over the stickman<br />
1:56 but make some small changes in order to make our character<br />
2:00 appear as if it's moving<br />
2:02 for this one, i'm simply going to raise one arm slightly higher to begin the<br />
2:06 waving action<br />
2:08 and then we simply repeat the same process of adding a blank keyframe and<br />
2:12 changing the position of the stickman's arm to complete the animation<br />
2:16 so now i've got six keyframes<br />
2:19 but my animation isn't complete yet<br />
2:22 i've only finished half of the needed frames<br />
2:25 what i have here so far<br />
2:27 is the stickman<br />
2:28 moving his arm up<br />
2:30 to complete the waving action i now need to draw the frames that show<br />
2:34 the stickman moving his arm down<br />
2:37 basically what i need to draw<br />
2:40 are the same frames i already have<br />
2:42 except that i need to draw them in reverse<br />
2:46 but instead of drawing the rest of the frames manually<br />
2:49 i'm going to show you a neat little trick<br />
2:52 that will help us finish the animation faster<br />
2:56 i'm first going to select all of the existing frames<br />
2:59 i'm going to click on the first one<br />
3:02 then i'll hold down the shift key on my keyboard<br />
3:05 and i'll click on the last one<br />
3:07 in order to select the entire range<br />
3:10 now that i have all these frames selected<br />
3:13 i'm going to right click on the selection<br />
3:16 and choose<br />
3:17 copy frames<br />
3:20 once the frames are copied<br />
3:22 i'm going to right click on the next available empty box<br />
3:26 and i'll choose<br />
3:27 paste frames<br />
3:29 and now that these new frames have been added<br />
3:32 i'm going to need to reverse them<br />
3:34 so that the arm will<br />
3:35 move in the opposite direction<br />
3:38 make sure that the new frames are selected<br />
3:41 then right click on the selection and choose reverse frames<br />
3:47 and now<br />
3:48 the animation is complete<br />
3:50 if we scrub through the timeline by clicking and dragging the playhead<br />
3:54 we'll see that the arm moves up until frame six<br />
3:58 and then moves down<br />
3:59 as we go through<br />
4:01 the next frames<br />
4:03 in order to preview the animation<br />
4:05 choose control test movie<br />
4:08 in flash professional<br />
4:10 or you can also press command + return on a mac or control + enter on a pc<br />
4:16 and there's the animation<br />
4:18 you'll notice that the animation keeps running even though we only have twelve frames<br />
4:23 that's because by default<br />
4:25 a flash animation is going to keep looping until you close the movieFlash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com0tag:blogger.com,1999:blog-3479935392155018913.post-15313029522884110042011-06-25T05:10:00.001-07:002011-06-25T05:17:14.300-07:00Nesting Animation Inside a Movie Clip Symbol - Flash CS5 Video TutorialIn this Flash CS5 video tutorial, I will explain the concept of nesting animation inside a Movie Clips symbol's timeline. I'll take you through the process of creating a very simple animation that will teach you how to do this.<br />
<br />
<iframe width="540" height="405" src="http://www.youtube.com/embed/IC3EHCfm8yo?rel=0" frameborder="0" allowfullscreen></iframe>Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com1tag:blogger.com,1999:blog-3479935392155018913.post-76692315872434296162011-06-21T04:10:00.001-07:002011-06-25T05:20:45.160-07:00Adding a Motion Guide - Flash CS5 Video TutorialA motion guide allows you to make an object move along a path, instead of on a straight line. In this Flash CS5 video tutorial, I'll show you how to use classic tweens and the pencil tool in order to add a classic motion guide layer to your Flash CS5 project.<br />
<br />
<iframe width="540" height="405" src="http://www.youtube.com/embed/wOxAbVTFq_Y?rel=0" frameborder="0" allowfullscreen></iframe>Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com0tag:blogger.com,1999:blog-3479935392155018913.post-904453153095418182011-06-21T04:03:00.000-07:002011-06-25T05:21:54.738-07:00Creating a Layer Mask - Flash CS5 Video TutorialIn this Flash CS5 video tutorial, I'll explain what a layer mask is, and I'll show you how to create one that's animated.<br />
<br />
<iframe width="540" height="435" src="http://www.youtube.com/embed/KtkHIvyMw94?rel=0" frameborder="0" allowfullscreen></iframe>Flash Potentialhttp://www.blogger.com/profile/13552523158094059171noreply@blogger.com0