tag:blogger.com,1999:blog-65690636430303439822024-03-13T10:07:09.356-07:00Flash TOTURIALSABA KHANhttp://www.blogger.com/profile/00138545267096132521noreply@blogger.comBlogger3125tag:blogger.com,1999:blog-6569063643030343982.post-82425494514807987592009-03-09T09:30:00.000-07:002009-03-09T09:31:08.508-07:00FLASH DESIGN<p align="left">In this tutorial I take you step-by-step through the process of creating this Flash Professional 8 movie. You will learn how to create graphics, work with layers, and add motion, sound, and text to your movie.</p> <p align="left">You will need Flash Professional 8 to take this tutorial. <a href="http://www.macromedia.com/software/flash/flashpro/" target="_blank"><span style="color:#0000ff;">If you do not have a copy of Flash Professional 8, you can download the trial version by clicking here</span>.</a> </p> <h3 align="left"><b><a name="Getting" id="Getting">Getting Started</a></b></h3> <p align="left">To begin, open Flash Professional 8. You will be presented with the screen shown here.</p> <p align="center"><img src="http://www.baycongroup.com/flash/images/0101entryscreen.gif" alt="Flash entry screen" width="375" height="281" /></p> <p align="left">Click Flash Document. The screen shown here appears:</p> <p align="center"><img src="http://www.baycongroup.com/flash/images/0102screen.gif" alt="Flash screen" width="375" height="281" /> </p> <p align="left">The upper left corner of the screen displays the Tools palette, which contains tools you can use to create or modify graphics and text. You select a tool by clicking on it. Tool modifiers for the selected tool display below the Tools palette. You use modifiers to set tool options.</p> <p align="left">The Timeline appears in the upper portion of the screen. You use the Timeline to lay out the sequence of your movie.</p> <p align="left">The Stage displays in the center of the screen. You create your movie on the Stage.</p> <h3 align="left"><a name="Movie" id="Movie">Movie Properties</a></h3> <p align="left">You start creating your movie by setting the Frame Rate, Dimensions, Background Color, and Ruler Units.</p> <div align="left"> <table align="center" border="1" cellpadding="7" cellspacing="0" width="450"> <tbody><tr> <td valign="top" width="50%"> <p>Frame Rate </p> </td> <td valign="top" width="50%"> <p>The speed of the movie </p> </td> </tr> <tr> <td valign="top" width="50%"> <p>Dimension </p> </td> <td valign="top" width="50%"> <p>The size of the Stage</p> </td> </tr> <tr> <td valign="top" width="50%"> <p>Background Color </p> </td> <td valign="top" width="50%"> <p>The color of the Stage</p> </td> </tr> <tr> <td valign="top" width="50%"> <p>Ruler Units </p> </td> <td valign="top" width="50%"> <p>The unit of measure the ruler displays</p> </td> </tr> </tbody></table> </div> <p align="left">You set these properties in the Movie Properties dialog box. To set the properties for the movie you are going to create:</p> <div align="left"> <ol><li>Choose <i>Modify > Document</i> from the menu. The Document Properties dialog box opens.</li></ol> </div> <div align="center"><img src="http://www.baycongroup.com/flash/images/0103properties.gif" alt="Document Properties" width="370" height="341" /> </div> <ol start="2"><li> <div align="left">Type <b>400 px</b> in the Width field.</div> </li><li> <div align="left">Type <b>400 px</b> in the Height field.</div> </li><li> <div align="left">Click the Background color box and choose white as the background color.</div> </li><li> <div align="left">Type <b>12</b> in the Frame Rate field.</div> </li><li> <div align="left">Choose Pixels from the drop-down menu in the Ruler Units field.</div> </li><li> <div align="left">Click OK.</div> </li></ol>SABA KHANhttp://www.blogger.com/profile/00138545267096132521noreply@blogger.com0tag:blogger.com,1999:blog-6569063643030343982.post-63190160609158265772009-03-09T09:29:00.000-07:002009-03-09T09:30:18.974-07:00The Grid<p align="left">In the exercises that follow, you will be creating graphics. When creating graphics, the grid is often helpful. To turn on the grid: </p> <ol><li> <div align="left">Choose <i>View > Grid > Edit Grid</i> from the menu. The Grid <span class="style1">dialog box opens.</span></div> </li></ol> <div align="center"> <p><img src="http://www.baycongroup.com/flash/images/0201grid.gif" alt="Grid" border="1" width="353" height="192" /> </p> </div> <ol start="2"><li> <div align="left">Click the Color box and select gray to <span class="style1">have the grid lines display</span> in gray.</div> </li><li> <div align="left">Choose Show Grid to cause the grid to display.</div> </li><li> <div align="left"> Choose Snap to Grid to cause the edges of your graphic to align with the grid lines.</div> </li><li> <div align="left">Set the Horizontal field <img src="http://www.baycongroup.com/flash/images/0202horizontal.gif" alt="Horizontal field" width="23" height="23" /> to <b>20 px</b> to separate horizontal lines by 20 pixels.</div> </li><li> <div align="left">Set the Vertical field <img src="http://www.baycongroup.com/flash/images/0203vertical.gif" alt="Vertical field" width="23" height="23" /> to <b>20 px</b> to separate vertical lines by 20 pixels.</div> </li><li> <div align="left">Set the Snap Accuracy to Normal.</div> </li><li> <div class="style1" align="left">Click OK.</div> </li></ol> <div align="left"> <h3><strong><a name="Inspector" id="Inspector"></a>The Property Inspector</strong></h3> <p><span class="style1">In the Property inspector, you can</span> set the attributes of objects as you work. You will use the Property inspector frequently when working in Flash Professional 8. To open the Property inspector:</p> </div> <ul><li> <div align="left"> <div align="left"> <p>Choose <i>Window > Properties> Properties</i> from the menu. The Property inspector appears at the bottom of the screen.</p> </div> </div> </li></ul> <p align="center"><img src="http://www.baycongroup.com/flash/images/0204propertyInspector.gif" alt="Property inspector" name="propertyInspector" id="propertyInspector" border="1" width="375" height="107" /></p> <div align="left"> <div align="left">The Property inspector is one of many panels found in Flash. When you are not working in a panel, you can collapse the panel. To collapse the <span class="style1">Property inspector, click</span> the Collapse icon. To open the Property inspector again, click the Expand icon.</div> </div> <h3 align="left"><b><a name="Oval" id="Oval">The Oval Tool</a></b></h3> <p align="left">In the exercise that <span class="style1">follows, you will </span>use the Oval tool to draw an ellipse. You will then turn the ellipse into a symbol. Symbols are reusable graphics you store in the Library. Later in the tutorial you will turn the ellipse into the button movie viewers press to start the movie.</p> <div align="left"> <p>To draw the ellipse:</p> </div> <ol><li> <div align="left">Choose the Oval tool. There are two <span class="style1">color boxes </span>on the Modifier panel. These color boxes are used to set the stroke and fill colors. The stroke color outlines your drawing. The fill color fills the center of your drawing.</div> </li></ol> <p align="center"><img src="http://www.baycongroup.com/flash/images/0206oval.gif" alt="Toolbar" width="141" height="312" /></p> <ol start="2"><li><div align="left">Click the Stroke Color box and then click the color black to choose black as your stroke color.</div> </li><li>Click the Fill Color box and then click the color navy to choose navy as your fill color.</li><li>If selected, click to deselect the Object Drawing option. The Object Drawing option enables you to draw your ellipse as a grouped object that will not merge with other objects you draw. You want this option turned off.</li></ol> <div align="left"> <p>You set the thickness of the Stroke line in the Property inspector. To set the thickness of the Stroke line:</p> </div> <ol><li> If the Property inspector is not open, choose <i>Window > Properties> Properties</i> from the menu. The Property inspector appears at the bottom of the screen. </li></ol> <p align="center"><img src="http://www.baycongroup.com/flash/images/0207propertyinspector.gif" alt="Property inspector" border="1" width="304" height="65" /></p> <ol start="2"><li>Choose Solid from <span class="style1">the drop-down menu</span> to select the type of line that will outline your drawing. </li><li> Type 3 in the Stroke Height field to set the line thickness. </li><li> <div align="left">Click on the Stage and drag diagonally to draw the ellipse.</div> </li></ol> <p align="center"><img src="http://www.baycongroup.com/flash/images/0208ellipse.gif" alt="Ellipse" border="1" width="167" height="100" /></p> <p align="left"><strong>Note:</strong> You can also use the Property inspector to set the stroke and fill colors.</p>SABA KHANhttp://www.blogger.com/profile/00138545267096132521noreply@blogger.com0tag:blogger.com,1999:blog-6569063643030343982.post-52156266261900563542009-03-09T09:28:00.000-07:002009-03-09T09:29:21.983-07:00Creating a Symbol<h3 style="font-weight: normal;" align="left"><span style="font-size:100%;"><a name="Symbol" id="Symbol"></a>You are now ready to turn the graphic (the ellipse) you created into a symbol and store the graphic in the Library. Items stored in the Library can be used later.</span></h3> <ol><li> <div align="left">Choose the Selection tool.</div> </li></ol> <p align="center"><img src="http://www.baycongroup.com/flash/images/0301selection.gif" alt="Selection tool" border="1" width="148" height="80" /></p> <ol start="2"><li>Click and drag to create a rectangle around the ellipse to select it.</li><li> <div align="left">Choose <i>Modify > Convert to Symbol</i> from the menu. The Convert to Symbol dialog box opens.</div> </li></ol> <p align="center"><img src="http://www.baycongroup.com/flash/images/0302convertsymbol.gif" alt="Convert to Symbol" border="1" width="405" height="133" /></p> <ol start="4"><li> <div align="left">Type <b>Start Button</b> in the Name field.</div> </li><li> <div align="left">Choose Button as the type of behavior.</div> </li><li> <div align="left">Click OK.</div> </li><li> <div align="left">Choose <i>Window</i> > <i>Library</i> from the menu. The Library <span class="style1">panel opens.</span> You should see Start Button in the Library window.</div> </li></ol> <p align="center"><img src="http://www.baycongroup.com/flash/images/0303library.gif" alt="Library" border="1" width="211" height="347" /></p> <ol start="8"><li> <div align="left">Press the Delete key to delete the ellipse from the Stage. Don�t worry. You have a copy of the Start Button in the Library.</div> </li></ol> <h3 align="left"><b><a name="Gradients" id="Gradients">Gradients</a></b></h3> <p align="left">When you click a Fill Color box, the Fill dialog box shown here opens<span class="style1">.</span></p> <p align="center"><img src="http://www.baycongroup.com/flash/images/0304gradient.gif" alt="Fill dialog box" border="1" width="304" height="241" /></p> <p align="left">Gradients show gradations of color. They display on the bottom row of the Fill dialog box. You will use a gradient to create the movie�s sky. But first, you must create the gradient you will use.</p> <p align="left">To create the gradient:</p> <ol><li> <div align="left">Click the first Color box on the gradient row.</div> </li><li> <div align="left">Choose <i>Window > Color Mixer </i> from the menu. The Color Mixer panel opens<span class="style1">.</span></div> </li></ol> <p align="center"><img src="http://www.baycongroup.com/flash/images/0305gradient2.gif" alt="Color mixer" border="1" width="207" height="276" /></p> <ol start="2"><li> <div align="left">Choose Linear from the drop-down menu.</div> </li><li>Double-click on the first Edit Gradient Range icon. <span class="style1"> Color boxes appear.</span></li></ol> <p align="center"><img src="http://www.baycongroup.com/flash/images/0306gradient3.gif" alt="Gradient Range Icon" width="301" height="226" /></p> <ol start="4"><li> <div align="left">Click the color blue to select blue.</div> </li><li>Double-click the second Fill Gradient Range icon. Click the color box and select white.</li></ol> <p align="center"><img src="http://www.baycongroup.com/flash/images/0307gradient4.gif" alt="Menu options" border="1" width="209" height="291" /></p> <ol start="6"><li>Click and drag the second Fill Gradient Range icon to the three-quarter point on the Gradient Range slider.</li><li>Click the Menu Options icon.</li><li>Click Add Swatch. Flash adds the gradient you created to the color box.</li></ol> <h3><b><a name="Rectangle" id="Rectangle">The Rectangle Tool</a></b></h3> <p>You use the Rectangle Tool to draw rectangles and squares. In this exercise you will create a rectangle and fill it with the gradient you just created. You will then turn the resulting graphic into a symbol and use it later to create the sky.</p> <ol><li>Choose the Rectangle tool.</li></ol> <p align="center"><img src="http://www.baycongroup.com/flash/images/0308rectangle.gif" alt="Rectangle tools" border="1" width="147" height="80" /></p> <ol start="2"><li>Move to the Property inspector. If the Property inspector is not open, choose<i> Window > Properties > Properties</i> from the menu to open it. </li><li> Select NoColor in the Stroke color box.</li></ol> <p align="center"><img src="http://www.baycongroup.com/flash/images/0309nocolor.gif" alt="No Color" border="1" width="302" height="133" /></p> <ol start="4"><li>In the Fill color box, select the gradient you created.</li><li>Click the Stage and drag diagonally to create a rectangle.</li></ol> <p align="center"><img src="http://www.baycongroup.com/flash/images/0310rectangle.gif" alt="Create rectangle" border="1" width="177" height="147" /></p> <p>Later you will use the graphic you just created. For now, turn it into a symbol.</p> <ol><li>Choose the Selection tool.</li><li>Click the graphic.</li><li>Choose <i>Modify > Convert to Symbol</i> from the menu. The Convert to Symbol dialog box opens.</li><li>Type <b>Sky</b> in the Name field.</li><li>Choose Graphic as the Behavior.</li><li>Click OK to store the graphic in the Library. If the Library is not already open, click <em>Window > Library</em> to open the Library. You can see the graphic in the Library.</li><li>Press the Delete key to remove the graphic from the Stage.</li></ol>SABA KHANhttp://www.blogger.com/profile/00138545267096132521noreply@blogger.com0