manualshive.com logo in svg

MACROMEDIA FLASH 8-FLASH, Tutorials Manual, Page: 190 / 292

Share
Download
MACROMEDIA FLASH 8-FLASH Tutorials Manual Download Page 190

190 Creating Graphics: Applying Gradients

14.

Drag the Gradient Scale control downward until it touches the top of 
the highlight shape.

The Gradient Scale control

Dragging the Gradient Scale control downward to touch the highlight 
shape

15.

Select the Selection tool from the Tools panel. 

16.

Double-click outside the Stage twice to deselect the highlight group.

The finished Flash illustration looks like this:

17.

Select File > Save to save your FLA file. 

Summary of Contents for FLASH 8-FLASH

Page 1: ...Flash Tutorials...

Page 2: ...ware ASA and its suppliers All rights reserved Macromedia Flash 8 video is powered by On2 TrueMotion video technology 1992 2005 On2 Technologies Inc All Rights Reserved http www on2 com Visual SourceS...

Page 3: ...ructure 22 Test the document 23 Find help 23 Summary 23 Chapter 2 Basic Tasks Creating a banner Part 1 25 Examine the completed FLA file 27 Creating a new document 29 Changing document properties 30 I...

Page 4: ...aders ignore elements in your document 83 Change static text to dynamic text for accessibility 83 Control the tab order and reading order 84 About testing your document with screen readers 87 Summary...

Page 5: ...15 Summary 115 Chapter 9 Basic Tasks Create Symbols and Instances 117 Set up your workspace 118 About creating symbols 118 Create a graphic symbol 119 Duplicate and modify an instance of a symbol 120...

Page 6: ...6 Select options to create a polygon 147 Draw a polygon 147 Rotate the shape 148 Use the cutout feature 148 Transform the shape of your drawing 149 Copy strokes 149 Draw with the Line tool 150 Select...

Page 7: ...200 Create an expanding width text block 201 Create a fixed width text block 202 Edit text and change font attributes 202 Select device fonts 203 Add an input text field 203 Copy a text field 204 Ass...

Page 8: ...scene 237 Move between scenes 238 Control the document with a stop action 238 Link a button to a scene 239 Add navigation to return to Scene 1 239 Play a movie clip 240 Use a behavior to play an MP3...

Page 9: ...265 Summary 267 Chapter 23 Data Integration Overview Flash Professional Only 269 Chapter 24 Data Integration Using the Macromedia Tips Web Service Flash Professional Only 271 Connect to a public web...

Page 10: ...10 Contents...

Page 11: ...ation by using ActionsScript and behaviors The lessons are targeted toward beginners to intermediate level Flash designers and developers who want to get up to speed quickly Each lesson focuses on a s...

Page 12: ...12 Introduction...

Page 13: ...go fl_documentation In this tutorial you will complete the following tasks Take a tour of the user interface 14 Select panel sets and arrange panels 15 Change background and Stage size 17 Change your...

Page 14: ...s and Tutorials Tutorial Assets Basic Tasks Create a Document and double click document_start fla The document opens in the Flash authoring environment The document already includes two layers in the...

Page 15: ...l by dragging the lower right edge out to enlarge the panel Use tools to create Flash content The white rectangular Stage area is where you can arrange objects as you want them to appear in your publi...

Page 16: ...by default is set to undo 100 of your changes in reverse order of execution You can change the default setting in Preferences To change your preferences see Setting preferences in Flash in Getting Sta...

Page 17: ...ned for a larger Stage and you ll change the background color of the Stage 1 In the Tools panel click the Selection tool 2 On the Stage click anywhere in the gray workspace that surrounds the Stage or...

Page 18: ...the Stage in dimensions that correspond to the size of the published Flash content View the Library panel Flash content that you import or that is a symbol is stored in your Library panel To learn mor...

Page 19: ...map graphics in Using Flash 2 With the Content layer still selected drag the text symbol from the Library panel to Stage and align it with the Trio ZX2004 text that s already in place as a guide You c...

Page 20: ...attributes in the Property inspector 3 In the Instance Name text box of the Property inspector enter video as the instance name Add video control behaviors Behaviors let you add complex functionality...

Page 21: ...e Video dialog box again select the video movie clip and click OK 6 On the Stage click the Rewind movie clip instance to select it In the Behaviors panel click Add and select Embedded Video Rewind 7 I...

Page 22: ...he Movie Explorer and select Show Movie Elements and Show Symbol Definitions if they re not already selected 3 Configure the filtering buttons along the top of the Movie Explorer so the only ones sele...

Page 23: ...ing the SWF content close the SWF file window to return to the authoring environment Find help The lessons provide an introduction to Flash and suggest ways that you can use features to create exactly...

Page 24: ...ic Tasks Create a Document View object properties Add video control behaviors Use the Movie Explorer to view the document structure Test the document Find help To learn more about Flash take another l...

Page 25: ...ur web pages This is Part 1 of a three part tutorial on how to build a simple animated banner in Flash and add it to a web page using Macromedia Dreamweaver You ll learn how to create a file and modif...

Page 26: ...ted Flash document Creating a new document on page 29 shows you how to create a FLA file that you ll use to create the banner throughout the three parts of this tutorial Changing document properties o...

Page 27: ...mples and Tutorials folder in the Flash installation folder For many users particularly in educational settings this folder is read only Before proceeding with the tutorial you should copy the entire...

Page 28: ...he end of Part 1 By the end of Part 3 of this tutorial you will add the graphics animation and interactivity to the banner Then you ll insert the banner on a website using Dreamweaver Close the comple...

Page 29: ...file can contain video MP3 sound animations images data and so forth The benefit of using an SWF file over other formats is that the Flash Player plug in is incredibly common Let s start building a ba...

Page 30: ...nded by many controls see the next figure The large white square is called the Stage and it s where you place assets you want to display in the SWF file such as images buttons text or animations The S...

Page 31: ...ow to make selections in these tutorials A panel near the bottom of the Flash application is titled Properties Select Window Properties Properties if you don t see the panel This panel is called the P...

Page 32: ...n change several document wide properties such as the Stage dimensions color and document frame rate 2 Type 160 into the Width text box and 600 into the Height text box When you type new values into t...

Page 33: ...ve a company logo or graphics that a designer has provided for your work You can import a variety of assets into Flash including sound video bitmap images and other graphic formats such as PNG JPEG AI...

Page 34: ...ect Window Library to open the Library panel You ll see the image you just imported gnome png in the document s library 5 Select the imported image in the library and drag it onto the Stage Don t worr...

Page 35: ...ct on the Stage you can see and modify the current coordinates in the Property inspector see the following figure The X and Y coordinates match the registration point which is the upper left corner of...

Page 36: ...h documents can play over a length of time like movies or sound which is measured using frames Layers are like transparencies that stack on top of one another and each layer can contain images text or...

Page 37: ...r objects to the Stage You cannot add new objects to a locked layer 2 Select the Selection tool in the Tools panel and double click the name Layer 1 When you double click a layer name you can modify t...

Page 38: ...ted above the background layer see the following figure Click Insert Layer to insert a new layer above the currently selected layer 2 Double click the name of the new layer so the layer s name becomes...

Page 39: ...t File Import Import to Stage The Open dialog box appears where you can select an image from your hard disk Find the folder of this tutorial s source files on your hard disk 3 Select star png in the t...

Page 40: ...Flash Doing so tests the SWF file in Flash Player For example you can see how your code works in Flash Player how animations play on the Timeline test user interactivity and more It s much faster than...

Page 41: ...tool to create a new document add assets and manipulate the file using a variety of tools In a very short period of time you learned how to use the Flash workspace to accomplish the following tasks Se...

Page 42: ...42 Basic Tasks Creating a banner Part 1...

Page 43: ...nner to a website using any tool See the introduction to Basic Tasks Creating a banner Part 1 on page 25 for a desecription of Part 1 2 and 3 of this tutorial You do not need any prerequisite knowledg...

Page 44: ...g document on page 163 Review the completed FLA file on page 45 Close the completed FLA file on page 46 In subsequent sections you ll go through the steps to create the application yourself starting w...

Page 45: ...older you will find a Flash file called banner2_complete fla Double click the file to open it in Flash You now see the completed tutorial file in the Flash authoring environment Review the completed F...

Page 46: ...lose the completed FLA file To close the document select File Close If you prefer to keep the finished file open as a reference while working with your banner file be careful not to edit it or save an...

Page 47: ...ke sure Static Text appears in the Text type pop up menu 6 Change the font of the text to whatever font you prefer You change the font using the Font pop up menu next to the A icon seen in the followi...

Page 48: ...resemble the first figure in this tutorial that displays the complete file for Part 2 13 Optional Open the Align panel Window Align to align the text to the center of the Stage Select a text block on...

Page 49: ...nner2 fla select the star png image imported in Part 1 and select Modify Convert to Symbol from the main menu The Convert to Symbol dialog box opens see the following figure where you can name a symbo...

Page 50: ...the Movie clip option and click OK This means that you will convert the graphic image into a movie clip symbol Movie clip symbols have their own timelines This means you can animate each movie clip i...

Page 51: ...ation When you create a frame by frame animation every frame is a keyframe In a tweened animation you define keyframes at significant points in the animation and let Flash create the contents of frame...

Page 52: ...ears normal while other items on the Stage are dimmed Changes that you make in this mode apply to every instance of the symbol in your FLA file Notice how the edit bar above the Timeline in this figur...

Page 53: ...means you can modify the content on that frame to create animation Currently the content on Frame 15 is duplicated from the content on Frame 1 When you modify Frame 15 in a future step the modificati...

Page 54: ...nd the animation starts again 11 Select the instance on the Stage at Frame 15 again and then select the Free Transform tool in the Tools panel Select the lower right handle and drag it towards the cen...

Page 55: ...ween pop up menu in the Property inspector The span of frames changes color and an arrow appears between Frames 1 and 15 see the following figure Notice how the options in the Property inspector are d...

Page 56: ...n either have a graphic with rollover graphics sounds and even animations of their own Or you can create an invisible button Invisible buttons are useful when you want to create hot spots on your webs...

Page 57: ...lect it A cross hatch pattern appears over the rectangle when you select it 8 Open the Property inspector Window Properties Properties 9 Change the value in the W width text box to 160 and the H heigh...

Page 58: ...se button while you drag the keyframe to the Hit frame see the following figure Drag the rectangle keyframe from the Up frame to the Hit frame on the Timeline Now the entire area of the banner is clic...

Page 59: ...s motion tween continually loops when you test it By default the playhead on the Timeline loops if you have content on more than one frame Therefore if you have content on several frames in a movie cl...

Page 60: ...ction getURL http gnome deseloper com _blank Notice how you target the inv_btn instance in the first line of code The event is the onRelease event in your ActionScript code which refers to the action...

Page 61: ...owser on your computer opens and displays the banner By default the banner appears at the upper left corner of the HTML document 2 Click the banner to open the web page A new browser window should ope...

Page 62: ...his tutorial you learned how to use the Flash workspace to accomplish the following tasks Create text Create symbols Create an animation Create buttons Write ActionScript You now have a banner that yo...

Page 63: ...reamweaver you can complete the first part of this article and use the HTML that Flash outputs with a different HTML editor However you won t be able to enjoy some of the benefits of using Flash and D...

Page 64: ...o make further modifications of your FLA file Checking for Flash Player on page 74 shows you how to add a Dreamweaver behavior that detects if your visitor has Flash Player installed Test the applicat...

Page 65: ...find the Flash Banner tutorial folder in the following locations In Windows boot drive Program Files Macromedia Flash 8 Samples and Tutorials Tutorial Assets Basic Tasks FlashBanner On the Macintosh...

Page 66: ...3 By the end of Part 3 of this tutorial you will add the banner that you created which contains graphics animation and interactivity to a website using Dreamweaver Close the completed project To clos...

Page 67: ...mes you have to consider other rules about the kinds of media you can use button code you use in the FLA file and so forth You have created the banner and resized its dimensions When doing so you actu...

Page 68: ...r with a detection system is fine You set your Flash Player and add a Flash Player detection system using Dreamweaver in upcoming sections Checking your publish settings Often you need to save banners...

Page 69: ...File Publish settings The Publish Setting dialog box opens where you can change many different settings for publishing your files 4 Click the Formats tab and then make sure that the Flash swf check bo...

Page 70: ...When you check the SWF file again the file size is smaller There are other ways to reduce the file size of a SWF file If you need to design a file to a specific maximum file size make sure you publis...

Page 71: ...cument in the website folder of this article s source files Look inside the start folder FlashBanner Part3 website start 2 Save a copy of gnome html in the same directory as the SWF file you published...

Page 72: ...he banner you created 8 Select the banner3 swf file which should be in the same folder your web page is in see Step 2 9 Click OK The SWF file is inserted into the web page See the gnome html document...

Page 73: ...tor Flash opens the associated FLA file in the Flash authoring environment or opens a window for you to locate the associated FLA file 3 Make your edits in Flash Notice that Editing From Dreamweaver d...

Page 74: ...isitor to the Macromedia website to download the latest version 1 In gnome html click inside the body tag click between the y the closing angle bracket and open the Behaviors panel in Dreamweaver Wind...

Page 75: ...or 7 Click OK When you finish Dreamweaver adds the following code to the body tag body id container onLoad MM_checkPlugin Shockwave Flash noflash html true return document MM_returnValue 8 Save your c...

Page 76: ...thin a browser window 1 Click the gnome html document that you modified in the previous exercises to open the web page that contains your banner A new browser window opens and display the gnome websit...

Page 77: ...h and Dreamweaver to accomplish the following tasks Modify publish settings for a SWF file Publish a SWF file Insert a SWF file on a web page using Dreamweaver Use roundtrip editing to open modify and...

Page 78: ...78 Basic Tasks Creating a banner Part 3...

Page 79: ...a PDF version of it from the Macromedia Flash Documentation page at www macromedia com go fl_documentation In this tutorial you will complete the following tasks Make your document accessible to scre...

Page 80: ...torial Assets Basic Tasks Create Accessible Content and double click accessibility_start fla On the Macintosh browse to Macintosh HD Applications Macromedia Flash 8 Samples and Tutorials Tutorial Asse...

Page 81: ...screen reader Make Child Objects Accessible allows Flash Player to pass accessibility information nested inside a movie clip to a screen reader If this option is selected for the entire document you c...

Page 82: ...sibility panel still open select the Dealers button on the Stage Information in the Accessibility panel changes to reflect Accessibility options for the selected object In the Accessibility panel for...

Page 83: ...nested within a movie clip You ll now do the latter so that users will know the web page contains an animation and the animation won t cause the screen reader to constantly refresh 1 On the Stage cli...

Page 84: ...b and reading order using the tabIndex property in ActionScript In ActionScript the tabIndex property is synonymous with the reading order If you have Flash Professional 8 you can use the Accessibilit...

Page 85: ...anel open select the logo_mc instance at the top of the Stage In the Accessibility panel enter 1 in the Tab Index text box 2 Continue to select each instance on the Stage and enter a tab order number...

Page 86: ...tance in the document 3 If you re using Flash Basic 8 or if you re using Flash Professional 8 and you did not create the tab index using the Accessibility panel delete the and in the script to uncomme...

Page 87: ...Testing accessible content in Using Flash Summary Congratulations on creating accessible Flash content In a few minutes you learned how to accomplish the following tasks Specify that your document is...

Page 88: ...88 Basic Tasks Create Accessible Flash Content...

Page 89: ...p background art on one layer and navigational buttons on another Additionally you can create and edit objects on one layer without affecting objects on another layer You can print this tutorial by do...

Page 90: ...and Tutorials Tutorial Assets Basic Tasks Work with Layers and double click layers_start fla 2 Select File Save As and save the document with a new name in the same folder to preserve the original st...

Page 91: ...active layer is highlighted in the Timeline and the pencil icon indicates it can be edited 1 In the Tools panel click the Selection tool 2 On the Stage select the red car A pencil icon in the Timelin...

Page 92: ...t you show or hide the contents of a layer Lock a layer When you ve placed content as desired on a layer you can lock the layer to avoid inadvertent changes to the content by you or by others working...

Page 93: ...the background graphic symbol and drag it to the Stage Because the Background layer is above all layers except the Mask layer objects on that layer appear over objects on lower layers Change the order...

Page 94: ...s a simple way to selectively reveal portions of the layer or layers below it Masking requires making one layer a mask layer and the layers below it masked layers You ll use the rectangular shape on t...

Page 95: ...y of the lesson FLA files contain placeholders which indicate where to place a Stage object on guide layers You ll create a guide layer now 1 In the Timeline select the Background layer and click Inse...

Page 96: ...Delete Layer button Summary Congratulations on learning how to work with layers in Flash In just a few minutes you learned how to accomplish the following tasks Select a layer Hide and show layers Lo...

Page 97: ...by downloading a PDF version of it from the Macromedia Flash Documentation page at www macromedia com go fl_documentation In this tutorial you will complete the following tasks Copy input and dynamic...

Page 98: ...Macromedia Flash 8 Samples and Tutorials Tutorial Assets Basic Tasks Create an Application and double click calculator_start fla 2 Select File Save As and save the document with a new name in the sam...

Page 99: ...e area Name text fields Before you can specify values for the text fields in ActionScript you first need to give each text field an instance name in the Property inspector Appending the instance name...

Page 100: ...h Settings 2 On the Flash tab of the Publish Settings dialog box select ActionScript 2 0 in the ActionScript Version pop up menu if it s not already selected 3 In the Timeline click the Components lay...

Page 101: ...car part prices The parallel slashes indicate that the text that follows is a comment As a best practice always add comments that offer an explanation of your ActionScript 3 Press Enter Windows or Ret...

Page 102: ...tial values for the quantity text fields 2 Press Enter or Return and type the following qty1_txt text 0 qty1_txt is the instance name that you gave the first input text field under the QTY column The...

Page 103: ...the script this onEnterFrame function 3 Type the following ActionScript to specify how the function should multiply the values in the input text fields for the airplane price1_txt text Number qty1_tx...

Page 104: ...type the following comment Calculates total price 3 After the comment press Enter Windows or Return Macintosh and type the following to create a handler for the PushButton component that you placed o...

Page 105: ...ent and select Control Test Movie 2 In the test version of your movie that appears in Flash Player type numbers in the QTY fields to see what appears in the Price fields 3 Click Calculate to see the t...

Page 106: ...106 Basic Tasks Create an Application...

Page 107: ...mplete the following tasks Use guides to align an object 108 Change the Stage size 109 Resize objects to match the Stage size 110 Specify snap alignment settings 111 Align an object using the alignmen...

Page 108: ...ginal start file 3 Select Window Workspace Layout Default to set up your workspace for taking lessons 4 In the Stage View pop up menu in the upper right side of the Timeline select Show Frame to view...

Page 109: ...icates that snapping is engaged 7 If you want to remove the guides select View Guides Clear Guides Change the Stage size The Stage size of your document is 750 x 500 pixels You ll change the Stage siz...

Page 110: ...es of alignment options 3 In the Align panel select To Stage then under Match Size select Match Width The size of the selected art changes to match the width of the Stage 4 Still in the Align panel cl...

Page 111: ...l and Vertical Snap Tolerance text boxes Snap tolerance determines how close an object must be to another object or alignment tool before it snaps into place 5 Click OK Align an object using the align...

Page 112: ...each other and in relation to the Stage 1 With the Selection tool click the text on the Stage that reads Introducing the World s First Hybrid 4WD 2 Shift click the second line of title text 2004 Trio...

Page 113: ...ing In the submenu select Snap to Objects if it s not already selected 2 In the Timeline select the Nav layer 3 From the Library panel drag the nav graphic to any area of the Stage below the blue bann...

Page 114: ...o 1 In the Timeline select the Top layer 2 From the Library panel Window Library drag the logo to an empty area of the Stage 3 In the Property inspector with the logo still selected enter 20 in the X...

Page 115: ...few minutes you learned how to accomplish the following tasks View the workspace rulers Use guides to align objects Change the Stage size Resize objects to match the Stage size Align an object using...

Page 116: ...116 Basic Tasks Use Layout Tools...

Page 117: ...nces of the symbol update to reflect the edits Another benefit of symbols is that they allow you to create sophisticated interactivity You can print this tutorial by downloading a PDF version of it fr...

Page 118: ...ols and Instances and double click symbols_start fla The document opens in the Flash authoring environment 2 Select File Save As and save the document with a new name in the same folder to preserve th...

Page 119: ...c as the name and select Graphic as the behavior 5 The Registration grid uses a small black square to indicate where within the symbol bounding box the registration point is located A registration poi...

Page 120: ...bol later the instance retains its modified properties in addition to acquiring the symbol edits You ll now duplicate the instance of the car and change the tint for the duplicate 1 On the Stage selec...

Page 121: ...top of the workspace the name of the symbol appears which indicates that you re in symbol editing mode for the named symbol 2 In the Tools panel select the Free Transform tool and drag around the bot...

Page 122: ...Stage to select it and select Modify Convert to Symbol 2 In the Convert to Symbol dialog box enter MCWheel as the name and select MovieClip as the behavior 3 In the Registration grid this time select...

Page 123: ...the Effect Duration text box to specify that the effect spans 60 frames in the Timeline 4 In the Spin text box enter 1 and verify that 360 populates the Rotate text box 5 Click Update Preview to view...

Page 124: ...124 Basic Tasks Create Symbols and Instances...

Page 125: ...and modifying buttons including adding animation to a button You can print this tutorial by downloading a PDF version of it from the Macromedia Flash Documentation page at www macromedia com go fl_do...

Page 126: ...plications Macromedia Flash 8 Samples and Tutorials Tutorial Assets Basic Tasks Add Button Animation and Navigation and double click buttons_start fla 2 Select File Save As and save the document with...

Page 127: ...o Symbol dialog box name the symbol BTNLogo and select Button as the behavior 3 In the Registration grid verify that the square in the upper left corner is selected as the registration point and click...

Page 128: ...e clickable as indicated when the pointer changes to a hand are the text area and the logo The white space around the text and logo are not clickable 3 Select Control Enable Simple Buttons again to de...

Page 129: ...hape of the rectangle that you drew 8 Select Control Enable Simple Buttons to deselect that feature Align buttons You can align buttons along horizontal and vertical axes using the Align panel 1 In th...

Page 130: ...or a button state You ll create a movie clip within the Over state of Button 1 and create a shape tween in the movie clip The shape tween creates an effect that changes the color from gray to red 1 On...

Page 131: ...keyframe to Frame 15 by pressing F6 3 Open the Actions panel Window Actions and if necessary enlarge it to view both the Actions toolbox and the Script pane 4 With Frame 15 of the Actions layer selec...

Page 132: ...l Window Behaviors click Add Behavior and select Web Go to Web Page 3 In the Go to URL dialog box select _blank in the Open In pop up menu to open the URL in a new browser window In the URL text box e...

Page 133: ...ecified 4 If you added navigation to the other two buttons test those buttons as well 5 When you finish viewing the SWF file close the SWF file and web browser windows Summary Congratulations on learn...

Page 134: ...134 Basic Tasks Add Button Animation and Navigation...

Page 135: ...te through the slides at runtime you ve imagined exactly how easy it is to create a presentation with slide screens You can print this tutorial by downloading a PDF version of it from the Macromedia F...

Page 136: ...le click presentation_start fla On the Macintosh browse to Macintosh HD Applications Macromedia Flash 8 Samples and Tutorials Tutorial Assets Basic Tasks Presentation with Screens and double click pre...

Page 137: ...en and all screen content loads on the first frame For more information about screens see Working with Screens Flash Professional Only in Using Flash 1 If the Screen Outline pane is not visible select...

Page 138: ...pen Window Timeline Select another slide in the Screen Outline pane to view the Timeline for that screen Each screen has its own Timeline The main Timeline for a document with screens however is never...

Page 139: ...65 in the Y text box to place the button 4 Enter forwardBtn in the Instance Name text box 5 Drag PrevBtn to the slide and use the Property inspector to enter 245 in the X text box and 165 in the Y tex...

Page 140: ...ide select the forwardBtn instance In the Behaviors panel Window Behaviors click Add and then select Screen Go to Next Slide from the menu 2 On the presentation slide select the backBtn instance In th...

Page 141: ...and name the slide features Select and move slides You can copy cut paste and drag screens in the Screen Outline pane to change their order in the presentation You ll select three screens cut them and...

Page 142: ...t box and 130 in the Y text box to place the instance Add transition behaviors Although your presentation is fairly complete you ll add transition behaviors to make the presentation more interesting S...

Page 143: ...reen 8 In the Behaviors panel click the second event in the list which is the one you just added In the pop up menu select hideChild Test your presentation Your presentation is now complete and ready...

Page 144: ...144 Basic Tasks Create a Presentation with Screens Flash Professional Only...

Page 145: ...mparable bitmap images This tutorial shows you how to create vector art of a bolt and logo You can print this tutorial by downloading a PDF version of it from the Macromedia Flash Documentation page a...

Page 146: ...k drawing_start fla Flash opens in the authoring environment 2 Select File Save As and save the document with a new name in the same folder to preserve the original start file As you complete this les...

Page 147: ...lect options to create a polygon The PolyStar tool offers options that let you specify the number of sides in a polygon you can also use options for the tool to create a star You ll specify that your...

Page 148: ...or Return Macintosh Use the cutout feature When you create one shape on top of another on the same layer and the two shapes are ungrouped the shape on top cuts out the area of the shape underneath Yo...

Page 149: ...form tool Double click the hexagon on the Stage to select both the stroke and the fill 2 Drag the upper middle handle of the Free Transform tool down to transform the hexagon into the following shape...

Page 150: ...dragged down as shown in the following illustration Select and add a different fill color You can use the Paint Bucket tool to change an existing color and to fill empty areas surrounded by lines You...

Page 151: ...nts on curved line segments You can adjust the segments by adjusting points on the line You ll use the Pen tool to create the logo 1 In the Tools panel select the Pen tool 2 Click the dot next to the...

Page 152: ...logo which you can drag to create various curved lines the pointer appears as follows Summary Congratulations on learning how to use some of the various drawing tools in Flash In a few minutes you le...

Page 153: ...me There are two types of tweening that you can create in Flash a motion tween and a shape tween The main difference between motion tweening and shape tweening is that motion tweening operates on grou...

Page 154: ...h 8 Samples and Tutorials Tutorial Assets Creating Graphics Timeline Animation and double click animation_start fla 2 Select File Save As and save the document with a new name in the same folder to pr...

Page 155: ...Timeline Window Timeline double click the Layer 1 title and type TireAnim Press Enter Windows or Return Macintosh to rename the layer 2 With the TireAnim layer still selected drag the Tire movie clip...

Page 156: ...es for a shape in one keyframe and then modify the shape or draw another shape in a subsequent keyframe As with motion tweening Flash creates the animation in the frames between the keyframes You ll n...

Page 157: ...16 and 29 Again use the Tween pop up menu in the Property inspector to select Shape Copy and paste keyframes in an animation For the tire to look realistic as it bounces it should compress slightly o...

Page 158: ...29 of the TireAnim layer and press F6 to insert a keyframe 9 In Frame 30 of the TireAnim layer right click Windows or Control click Macintosh and select Paste Frames from the context menu 10 Select Co...

Page 159: ...a constant speed With easing you can create a more realistic rate of acceleration and deceleration Positive values begin the tween rapidly and decelerate the tween toward the end of the animation Nega...

Page 160: ...on learning how to animate objects in Flash In just a few minutes you learned how to accomplish the following tasks Create an animation using motion tweening Create an animation using shape tweening C...

Page 161: ...graphic from the top of the Stage to the bottom Flash Professional also lets you exercise fine control over how the tweened property values are calculated so you can easily create more complex animat...

Page 162: ...ed Flash file In the process you will become familiar with the construction of the animation example and what you will be building in this tutorial Open the starter document on page 165 lets you begin...

Page 163: ...his folder is read only Before proceeding with the tutorial you should copy the entire Animation Easing tutorial folder to the writable location of your choice On most computers you will find the Anim...

Page 164: ...ght ball with a shadow beneath it on a green background The illustration looks like this The completed FLA file There are two tweens in the document A motion tween of the ball bouncing down to the gre...

Page 165: ...file be careful not to edit it or save any changes to it Open the starter document Now that you have seen the completed file it is time to create your own Flash document To get started you ll open a...

Page 166: ...ames from 1 to 60 in all four layers Selecting multiple frames in the Timeline 2 Select Insert Timeline Frame You should see the frames added to all four layers in the Timeline The frames added to the...

Page 167: ...t 60 frames and a different position for the keyframe in Frame 61 When you define the motion tween Flash calculates the positions in each frame for the eight ball that is between its original position...

Page 168: ...ts motion When slowing an animation at the end it is said to be easing out Flash also allows you to perform easing in the middle of a tween with its custom easing controls Ease in the eight ball anima...

Page 169: ...n speed 4 In the Timeline select the entire Ball layer 5 In the Property inspector drag the Ease slider down until the value is 0 This will remove the easing from the animation Flash also provides mor...

Page 170: ...al axis and the percentage of change is represented by the vertical axis The Custom Ease In Ease Out dialog box 3 In the Custom Ease In Ease Out dialog box Control click Windows or Command click Macin...

Page 171: ...gging the control point to the top of the graph 5 Drag the left vertex handle of the new control point to the right until it touches the control point Drag the right vertex handle to the left until it...

Page 172: ...drag the new point downward to approximately 76 along the vertical axis Dragging the point at Frame 32 7 Drag the vertex handles so that the line connecting them to the control point is horizontal an...

Page 173: ...distance from the control point The completed Ease In Ease Out curve You have now created a complex easing curve that represents a bouncing eight ball instead of a simple one way motion tween You can...

Page 174: ...ve you created in the previous section Create the tween of the alpha value for the shadow 1 In the Timeline select Frame 61 of the layer called Shadow 2 Select Insert Timeline Keyframe 3 Drag the play...

Page 175: ...the Property inspector select Motion from the Tween menu 14 Click Edit next to the Ease slider 15 In the Custom Ease In Ease Out dialog box press Control V Windows or Command V Macintosh to paste the...

Page 176: ...test mode as it does in authoring mode 1 Select File Save to save your FLA file 2 Select Control Test Movie 3 When you finish viewing the application close the SWF file by clicking the close box in th...

Page 177: ...can create two main types of gradients linear and radial Linear gradients change color along a single axis such as horizontal or vertical A radial gradient changes color in an outward direction start...

Page 178: ...al workflow includes the following tasks Examine the completed FLA file on page 179 allows you to look at the completed Flash document Open the starter document on page 181 lets you begin the tutorial...

Page 179: ...ucational settings this folder is read only Before proceeding with the tutorial you should copy the entire gradient tutorial folder to the writable location of your choice On most computers you will f...

Page 180: ...oks like this There are five gradients in the illustration A gradient from black to green on the background A gradient from black to green to black on the bottom of the eight ball Another from white t...

Page 181: ...apply gradients 1 In Flash select File Open 2 Navigate to the following directory In Windows Hard Disk Program Files Macromedia Flash 8 Samples and Tutorials Tutorial Assets Creating Graphics On the...

Page 182: ...ight gradient color swatch in the Color Mixer Selecting the color green 006600 in the Color Picker 6 Double click the left gradient color swatch and select the color black 000000 7 Select the Gradient...

Page 183: ...Timeline to prevent further changes to this layer 10 Select File Save to save your FLA file Create a radial gradient Next you will add a radial gradient to the black eight ball 1 Double click the bla...

Page 184: ...k 000000 5 Double click the right gradient color swatch and type 002200 into the color text box Press Enter 6 Drag the left gradient color swatch to the right about three fourths of the way as shown i...

Page 185: ...of the circle shape 11 Select the center control point and drag the entire gradient upward a short distance as shown in the following illustration The mirrored overflow gradient is at the bottom of th...

Page 186: ...y to the left and one all the way to the right 6 Double click the left swatch and select the color black 000000 in the Color Picker 7 Double click the right swatch to display the Color Picker 8 Select...

Page 187: ...a gradient to the white circle on the eight ball graphic 1 Select the Selection tool from the Tools panel 2 Double click the eight ball group to edit the group 3 Double click the white circle group 4...

Page 188: ...andle approximately 120 clockwise The gradient rotated 120 15 Select the Selection tool in the Tools panel 16 Double click the Stage twice to exit the white circle group and the eight ball group 17 Se...

Page 189: ...e for the left swatch to 0 9 Drag the right gradient color swatch all the way to the right and double click it 10 Select the color white from the Color Picker 11 Set the Alpha value for the right swat...

Page 190: ...ght shape The Gradient Scale control Dragging the Gradient Scale control downward to touch the highlight shape 15 Select the Selection tool from the Tools panel 16 Double click outside the Stage twice...

Page 191: ...oes in authoring mode 1 Select File Save to save your FLA file 2 Select Control Test Movie 3 When you finish viewing the application close the SWF file by clicking the close box in the test window You...

Page 192: ...192 Creating Graphics Applying Gradients...

Page 193: ...or you can apply a drop shadow filter to an object to make it appear with a shadow behind it A blend mode is a method of making the colors of a graphic object interact with the colors of other graphi...

Page 194: ...in the foreground and background will appear out of focus as if seen through a camera The completed FLA file To see the completed FLA file Filters Blends_finished fla browse to one of the following lo...

Page 195: ...ends 3 Select the file named Filters Blends_start fla and click Open Apply filters and blends In the following sections you will apply blends and filters to the 9ball and CueBall movie clips found in...

Page 196: ...This makes the 9ball instance appear larger than the 8ball instance on the Stage 11 Reposition the 9ball instance so it slightly overlaps the right edge of the 8ball instance on the Stage Apply a filt...

Page 197: ...nu A Brightness Amount slider appears to the right of the Color menu 4 Drag the Brightness Amount slider until the value is 48 5 Enter the following values in the W H X and Y text boxes W 105 H 115 X...

Page 198: ...198 Creating Graphics Apply Graphic Filters and Blends Flash Professional Only...

Page 199: ...on criteria you specify For example you might use a dynamic text field to add values stored in other text fields such as the sum of two numbers This tutorial shows you how to add text and text fields...

Page 200: ...browse to Macintosh HD Applications Macromedia Flash 8 Samples and Tutorials Tutorial Assets Text Add Text to a Document and double click text_start fla 2 Select File Save As and save the document wit...

Page 201: ...Arial For Font Size enter 13 Click the text color box and select the gray with a hexadecimal value of 666666 Select Align Left if it isn t already selected 4 In the Timeline select the Static Text lay...

Page 202: ...t block has a round handle in the upper right corner and a fixed width static text block has a square handle 5 Inside the text block that you created type Want to learn more 6 If necessary align the t...

Page 203: ...e submit your contact information text still selected on the Stage in the Font pop up menu in the Property inspector select _sans 2 In the Property inspector select Use Device Fonts You will not see a...

Page 204: ...how Border Around Text indicates the boundaries of the text field with a visible border 5 On the Stage drag the pointer in the area to the right of the First Name text to create an input text field 6...

Page 205: ...tField object see Working with Text in Using ActionScript in Flash Create a dynamic text field Dynamic text can display text from external sources at runtime Next you ll create a dynamic text field th...

Page 206: ...e same folder as your document The ActionScript is set up to load the text into a field named newFeatures_txt Specify format options The Format Options dialog box allows you to specify margin and inde...

Page 207: ...yfeatures txt function onText success Boolean if success newFeatures_txt text features_lv safetyfeatures else newFeatures_txt text unable to load text file 3 Close the Actions panel Test the SWF file...

Page 208: ...you finish checking spelling save your document Summary Congratulations on learning the basic ways in which to add text to your document In a few minutes you learned how to accomplish the following ta...

Page 209: ...ample instead of writing your own script you can select a language element from the Actions toolbox or the Add command on the toolbar drag it onto the Script pane and then use Script Assist mode to he...

Page 210: ...ile a Flash file with the fla extension that has the elements to which you ll use Script Assist mode to add ActionScript Add a script to a button by using Script Assist mode on page 213 shows you how...

Page 211: ...er For many users particularly in educational settings this folder is read only Before proceeding with the tutorial copy the entire Script Assist tutorial folder to the writable location of your choic...

Page 212: ...gation links Home About Products Contact The Menu and Menu tween movie clips which display the primary navigation links buttons and together create an animation when the application is run The applica...

Page 213: ...Open the scriptassist_start fla file Add a script to a button by using Script Assist mode In this section you ll use Script Assist mode to add a script to the Home button When the sample application...

Page 214: ...or the functions that you add to the selected button The parameters are displayed when you add an ActionScript function 5 To add a function to the button click Add on the toolbar Clicking the Add butt...

Page 215: ...e on event handler is selected by default You ll use the release event to trigger the script action when the user clicks Home N OT E An alternative method of adding ActionScript functions is to browse...

Page 216: ...handler In other words when the Home button is pressed the on handler and released the release event the goto action is executed When the Home button is clicked the movie clip should move to and stop...

Page 217: ...lay the title Home in the Title movie clip indicating that the Home frame is currently displayed Clicking the Home button displays Home in the Title movie clip You could repeat this process for the Ab...

Page 218: ...ovie Button Events and locate the on release event handler Double click the on release event handler to insert it into the ActionScript editor Using the Actions toolbox to insert functions into the sc...

Page 219: ...Target Path dialog box Selecting the target object from the Insert Target Path dialog box 6 Select the About button about_btn from the tween_mc movie clip 7 Make sure that the Relative Path option is...

Page 220: ...In the Script Assist pane select the Go To and Stop option 3 Set the Type to Frame Label by selecting it from the Type pop up menu 4 In the Frame text box enter about The completed Timeline script Re...

Page 221: ...leted 1 From the Library panel select the Title movie clip and its timeline is displayed Selecting the Title movie clip timeline to add a script to the last frame 2 With the Actions layer selected sel...

Page 222: ...lick the Insert Target Path button 9 In the Insert Target Path dialog box click the _root object and click OK 10 In the Frame text box enter home 11 Deselect the Expression checkbox Now when the Title...

Page 223: ...the SWF file by closing the test window You have now successfully added scripts to a button and both the main and Title movie clip timelines You can use Script Assist mode in many ways as you work wit...

Page 224: ...224 ActionScript Use Script Assist mode...

Page 225: ...ou can reuse ActionScript is an object oriented scripting language that offers control over how your Flash content plays In subsequent lessons you ll see how ActionScript has evolved into ActionScript...

Page 226: ...e 3 Select Window Workspace Layout Default to set up your workspace for taking lessons Create an instance of a symbol You ll drag an instance of an animated movie clip from the library to the Global P...

Page 227: ...he Stage type screen_mc in the Instance Name text box of the Property inspector Window Properties Flash is designed to present code hints when you name your instances with the appropriate suffix When...

Page 228: ...visible when the SWF file first plays 1 Select Frame 1 of the Actions layer If the Actions panel isn t open select Window Actions Actions Frame appears at the top of the panel which indicates that you...

Page 229: ...ot syntax which means that the period links parts of a script Other ActionScript syntax elements include the following A semicolon in an ActionScript statement like a period in an ordinary sentence in...

Page 230: ...nality so that other developers can understand your script but you can also use comments to deactivate sections of your script when debugging As a best practice always add comments that explain your s...

Page 231: ...p of the Actions panel Select onButton_btn from the hierarchical tree and click OK 3 In the Script pane type a period and double click onRelease from the list of code hints that appears 4 In the Scrip...

Page 232: ...e the insertion point after the last line of code Then press Enter Windows or Return Macintosh twice and paste the text as you normally would using Control V Windows or Command V Macintosh 3 In the co...

Page 233: ...ge appears stating the script contains errors the Output panel opens and displays information about the error 2 Click OK to close the syntax message 3 After you ve verified that your ActionScript does...

Page 234: ...lish the following tasks Name instances following recommended practices Initialize a document Apply ActionScript syntax Locate ActionScript reference documentation Add comments to ActionScript Write a...

Page 235: ...fl_documentation In this tutorial you will complete the following tasks Set up your workspace 236 Name button instances 237 Add a scene 237 Move between scenes 238 Control the document with a stop ac...

Page 236: ...Tutorial Assets ActionScript Add Interactivity and double click interactivity_start fla The document opens in the Flash authoring environment 2 Select File Save As and save the document with a new na...

Page 237: ...tton and use the Property inspector to give the button an instance name of playSound_btn Add a scene You can use scenes in Flash to organize your document into discrete sections that can contain conte...

Page 238: ...Scene panel 1 To open the Scene panel select Window Other Panels Scene 2 Select Scene 1 Control the document with a stop action When you test or publish a Flash document that contains more than one s...

Page 239: ...dStop function is a timeline control function that lets you specify the scene and frame number In this case you specified Frame 1 Add navigation to return to Scene 1 The function that you ll add to th...

Page 240: ...that are exported for use with ActionScript load by default before the first frame of the SWF file that contains them This can create a delay before the first frame plays When you assign a linkage ide...

Page 241: ...depth that determines the stacking order of a movie clip within its parent SWF file or movie clip When you use the attachMovie method to create a new movie clip at runtime you always specify a depth f...

Page 242: ...ds the movie clip when the function runs so that the movie clip does not continue to play when the user goes to Scene 2 unloadMovie trio_mc Your entire function for the goScene_btn should appear as fo...

Page 243: ...ify that ping mp3 appears in the Identifier text box and click OK 4 On the Stage select the playSound_btn instance 5 In the Behaviors panel Window Behaviors click Add and select Sound Load Sound from...

Page 244: ...a few minutes you learned how to accomplish the following tasks Create a new scene Write ActionScript to navigate between scenes Write ActionScript to play an animated movie clip at runtime Use a beh...

Page 245: ...Tutorials Basic Tasks Create an Application You can print this tutorial by downloading a PDF version of it from the Macromedia Flash Documentation page at www macromedia com go fl_documentation In thi...

Page 246: ...leForm_start fla 2 Select File Save As and save the document with a new name in the same folder to preserve the original start file 3 Select Window Workspace Layout Default to set up your workspace fo...

Page 247: ...field to the right of the http text 6 If necessary use the Selection tool to drag the text field or use the arrows keys to adjust the position 7 With the input text field still selected in the Proper...

Page 248: ...alog Boxes layer Right click Windows or Control click Macintosh the selected layer and select Insert Blank Keyframe from the context menu 3 From the Library panel drag the Dialog Box error movie clip...

Page 249: ...movie clip to the center of the Stage 3 Close the Library panel Add a stop action When a Flash application loads in Flash Player it automatically plays in a continuous loop You use ActionScript to con...

Page 250: ...on what is entered in the text field Labeling a frame helps you reference it in ActionScript easily This is helpful for sending the playhead to a specific frame Next you ll add frame labels to help y...

Page 251: ...n 3 In the Actions panel click Insert a Target Path located at the top of the panel 4 In the Insert Target Path dialog box verify that Relative is selected Click submit_btn on the hierarchical tree an...

Page 252: ...e in this lesson you send data to a web server to load a web page in the browser After the else statement you ll add the ActionScript to have Flash go to the URL the viewer enters in the input text fi...

Page 253: ...s layer 2 In the Script pane type the following comment button function returns user to Frame 1 Press Enter Windows or Return Macintosh 3 Type tryAgain_btn onRelease function and then press Enter or R...

Page 254: ...conditional logic and send data In a few minutes you learned how to complete the following tasks Add an input text field to a document Create a button symbol Add a stop action Write a script that val...

Page 255: ...This tutorial will show you how to create and modify classes You can print this tutorial by downloading a PDF version of it from the Macromedia Flash Documentation page at www macromedia com go fl_do...

Page 256: ...Select Window Workspace Layout Default to configure your workspace Learn about classes and object types A class also referred to as an object type is like a blueprint An object doesn t exist until yo...

Page 257: ...ions panel 4 Create or instantiate an object from the Date class named myDate var myDate Date new Date 5 Create a variable called currentMonth equal to the getMonth method var currentMonth Number myDa...

Page 258: ...isplay today s date in the form Today is mm dd yyyy Use the currentMonth variable you already created plus the getDate and getFullYear methods of the Date object currentDate_txt text Today is currentM...

Page 259: ...ction Product id Number prodName String price Number this id id this prodName prodName this price price To properly define a class in ActionScript 2 0 you must surround all classes by the class keywor...

Page 260: ...data type for both a method s return value and any parameters that are passed to the method when it is called Specify the data type for method return values You must indicate data types for values re...

Page 261: ...n to create an ActionScript file 2 Create a constructor for a Product class by creating a function called Product that takes the arguments id prodName and description function Product id Number prodNa...

Page 262: ...tID id setProdName prodName setDescription description public function setID id Number Void this id id public function setProdName prodName String Void this prodName prodName public function setDescri...

Page 263: ...u created the objects as follows var handleBars Product new Product 1 ATB Available in comfort and aero design var pedals Product new Product 0 Clipless Pedals Excellent cleat engagement 5 Trace the d...

Page 264: ...es and methods from the existing MovieClip class and you can use MovieClip properties and methods anywhere within the class definition as in the following example class Drag extends MovieClip construc...

Page 265: ...5 In the AS 2 0 Class text box enter Drag Click OK This associates the movie clip with the Drag class that you ll create 6 Using the Property inspector assign the movie clip an instance name then sav...

Page 266: ...ting movie clip methods startDrag and stopDrag class Drag extends MovieClip function Drag onPress doDrag onRelease doDrop private function doDrag Void this startDrag private function doDrop Void this...

Page 267: ...ActionScript 2 0 In a few minutes you learned how to accomplish the following tasks Create and use objects from existing classes Create a custom class Create a property within a custom class Create a...

Page 268: ...268 ActionScript Work with Objects and Classes...

Page 269: ...ofessional Only These tutorials are working models that illustrate how to use the data components XMLConnector WebServices Connector RDMBSResolver and XUpdateResolver with data binding in Flash Profes...

Page 270: ...270 Data Integration Overview Flash Professional Only...

Page 271: ...iles see TechNote 13686 at www macromedia com support general ts documents downfiles htm The finished FLA file for this tutorial is installed with Flash The following list provides the typical paths t...

Page 272: ...ake sure your computer is connected to the Internet 2 Open the Web Services panel Window Other Panels Web Services and click Define Web Services 3 In the Define Web Services dialog box that appears cl...

Page 273: ...next step you bind this parameter with a ComboBox instance in your application 6 Right click the getTipByProduct method and select Add Method Call from the context menu An instance of the WebServiceC...

Page 274: ...perty inspector enter the instance name products_cb 2 In the Components panel select UI Components Button Drag a Button component to the Stage In the Property inspector enter the instance name submit_...

Page 275: ...ld type Tips Now add a binding for the WebService connector component from the Macromedia Tip web service to ComboBox component that allows the user to choose a product and return a tip about the prod...

Page 276: ...eld In the Bound To dialog box select ComboBox products_cb for the component path and value String for the schema location Click OK Bound To field in the Component inspector Selecting the component pa...

Page 277: ...igger method to trigger the service You use the trigger method to attempt to retrieve a tip whenever you click the button 10 Open the Actions panel and add the following ActionScript on Frame 1 of the...

Page 278: ...ice Flash Professional Only 13 Test the application Control Test Movie Select Flash from the ComboBox instance and click Get Tip The results should look similar to the following screen shot 14 Select...

Page 279: ...ia com go fl_documentation In this tutorial you will complete the following tasks Create the user interface 280 Edit the data 288 This tutorial uses a public web service and therefore requires that yo...

Page 280: ...Timesheet data xml Create the user interface You will begin by creating a user interface which displays the information in the XML file Add XMLConnector and DataSet Components First you will add the c...

Page 281: ...om a Sample XML File on the upper right side of the Schema tab 6 Browse to where you saved the data xml file and select the file The Schema tab now shows the structure of the data in the file The row...

Page 282: ...its value You need to give Flash some additional information to encode this value correctly NO T E The XMLConnector component stores information internally as strings When a request is made for the d...

Page 283: ...ndling data types in data binding Flash Professional only in Using Flash 9 Select the encoder parameter for the Date schema field and change it to Date Select the encoder options parameter and select...

Page 284: ...uble click the Encoder Options field 12 In the Boolean Encoder dialog box that appears enter true in the Strings That Mean True text box and enter false in the Strings That Mean False text box 13 Sele...

Page 285: ...mponent It applies the settings you selected as the data is copied so that the DataSet component receives ActionScript Date Boolean and Number fields for the date billable and duration attributes Next...

Page 286: ...t appears enter MM DD YYYY in the Format text box Add DataGrid and Button components Next you will add components for displaying the data 1 From the Components panel open the User Interface category a...

Page 287: ...To dialog box click the Data Set component and then select the selectedIndex Number schema location and click OK 14 Leave the Direction property set to In Out 15 Drag a Button component to the Stage a...

Page 288: ...ou will modify the application so that you can edit data through the DataGrid component 1 On the Stage select the DataGrid component Then click the Parameters tab in the Component inspector 2 Set the...

Page 289: ...to the server to update the data You can print this tutorial by downloading a PDF version of it from the Macromedia Flash Documentation page at www macromedia com go fl_documentation In this tutorial...

Page 290: ...e you created in the Data Integration Using XML for a Timesheet Flash Professional Only tutorial 2 In the Components panel open the Data category and drag an XUpdateResolver component to the Stage 3 I...

Page 291: ...expression datapacket row id id 7 In the Component inspector click the Bindings tab 8 Click the Add Binding button 9 In the Add Binding dialog box click the deltaPacket property and click OK 10 In th...

Page 292: ...el to Show Updates 21 With the button selected open the Actions panel F9 and enter the following code on click _parent timeInfo_ds applyUpdates 22 Test the application Control Test Movie Load the data...

Reviews:

No comments