Adobe Flash chuyên nghiệp - p 28 ppt

ptg adobe fLash professionaL Cs5 CLassroom in a book 261 3 Select the words Avalon Green, and in the Character section of the Properties inspector, change the color from black to blue. e selected words become blue and remain underlined, which is the standard visual cue for a hyperlinked item in a browser. However, you are free to display your hyperlink in any fashion, just as long as your user can recognize it as a clickable item. 4 Choose Control > Test Movie > in Flash Professional. Click the hyperlink. A browser opens and attempts to load the fictional Web site at www. avalongreen.org. Creating User-input Text Next, you’ll create the Mortgage Calculator, which accepts input from the user through the keyboard and displays estimated monthly payments based on those inputs. You create user-input text with Editable TLF Text. User-input text can be used to create sophisticated customized interactions that gather information from the viewer and tailor the Flash movie based on that information. Examples include applications requiring a login and password, surveys and forms, or quizzes. Adding the static text elements Start by creating all the text that doesn’t change or can’t be edited—the static ele- ments of the mortgage calculator. 1 Select the Text tool. Download from Library of Wow! ebook ptg 262 LESSON 7 Using Text 2 In the Properties inspector, select TLF Text and Read Only. In the Character section, choose Times New Roman for Family, Regular for Style, 12.0 for Size, 12.0 for Leading, and black for Color. 3 Click in the dark brown area under the Mortgage Calculator text and insert five separate lines of text for TERM: 30 Year Fixed, PRICE: $350,000, RATE, PERCENT DOWN, and MONTHLY PAYMENTS. Adding the display fields For Rate and Percent Down, you’ll add Editable text boxes so your user can enter their own numbers and customize the mortgage calculations to evaluate their buy- ing decision. 1 Select the Text tool. 2 In the Properties inspector, select TLF Text and Editable. Keep the other font information the same as the previous text you created. 3 Click and drag out a small text box next to Rate. Download from Library of Wow! ebook ptg adobe fLash professionaL Cs5 CLassroom in a book 263 4 In the Container and Flow section of the Properties inspector, choose a white color and 75% Alpha value for the Fill. e Editable text box next to Rate displays a semitransparent white background. You can also add a stroke to the text box to give it more definition if you desire. 5 Create a second Editable text box next to Percent Down with the same semitransparent white background. 6 Create a third text box next to Monthly Payments with the same semitransparent white background, but make this text box Read Only. e text box next to Monthly Payments is Read Only because it will display a number calculated based on the user-inputted Rate and Percent Down. e user does not need to edit the information in that box. Download from Library of Wow! ebook ptg 264 LESSON 7 Using Text 7 In the Editable text box next to Rate, enter 5.25. In the Editable text box next to Percent Down, enter 20. Entering initial text in Editable text boxes often guides users in knowing what kind of text is expected. Embedding fonts For any text that may be edited during runtime, you should embed the fonts. Since the user can enter any kind of text in Editable text boxes, you need to include those characters in the final SWF to ensure that text appears as you expect it, with the same font that you’ve chosen in the Properties inspector. 1 Select the first Editable text box next to Rate. Device Fonts Use device fonts as an alternative to embedding fonts. Device fonts are three generic options grouped at the top of the Character Family pull-down menu. You can also choose the Use device fonts option from the Anti-alias pull-down menu. The three device fonts are _sans, _serif, and _typewriter. These options find and use the fonts on a user’s computer that most closely resemble the specified device font. When you use device fonts, you don’t have to worry about embedding fonts, and you can be assured that your viewer sees text that is similar to the text that you see in the authoring environment. Download from Library of Wow! ebook ptg adobe fLash professionaL Cs5 CLassroom in a book 265 2 In the Character section of the Properties inspector, click the Embed button. You can also choose Text > Font Embedding. e Font Embedding dialog box appears. e font that is used in the selected text box appears on the left. 3 In the Character ranges section, select Numerals. All the number characters of the current font, Times New Roman Regular, will be included in the published SWF. Click OK.  Note: Embedding fonts dramatically increases the size of your final SWF, so exercise caution when doing so, and limit the number of fonts and characters when possible. Download from Library of Wow! ebook ptg 266 LESSON 7 Using Text Naming the text boxes For Flash to control what text to display in a text box or to know what has been entered in an Editable text box, the text box must be given an instance name in the Properties inspector. Just as you named button instances in Lesson 6, naming text boxes on the Stage allows ActionScript to reference them. e same naming rules apply for text boxes as they do for buttons. 1 Select the first Editable text box next to Rate. 2 In the Properties inspector, enter rate_txt for the instance name. e suffix _txt is the convention for text boxes. 3 Select the next Editable text box next to Percent Down. 4 In the Properties inspector, enter down_txt for the instance name. 5 Select the Read Only text box next to Monthly Payments. 6 In the Properties inspector, enter monthly_txt for the instance name. Changing the contents of text boxes e contents of a text box are represented by its text property. You can dynami- cally change a text box’s contents by assigning new text to the text property. In this section, you’ll add ActionScript that reads the text entered in the Editable text boxes next to Rate and Percent Down, perform some mathematical calculations, and then display new text in the Read Only text box next to Monthly Payments. Download from Library of Wow! ebook ptg adobe fLash professionaL Cs5 CLassroom in a book 267 1 Select the Calculate button on the Stage, and in the Properties inspector, enter calculate_btn for the instance name. 2 Insert a new layer and rename it actionscript. 3 Select the first keyframe of the actionscript layer and open the Actions panel. 4 You must first create a few variables to hold numerical information. e variables will help you make the mortgage calculations. Variables are created, or “declared,” using the var keyword. Enter the code as follows: var term:Number=360; var price:Number=350000; var monthlypayment:Number; 5 Create an event listener and function for the Calculate button. You should be familiar with event listeners from Lesson 6, but if not, you should review the concepts in that lesson before moving on. e event listener and function should appear as follows: 6 Enter code within the function to make the mortgage calculations and display the results. e completed code for the event listener and function should be as follows: calculate_btn.addEventListener(MouseEvent.CLICK, calculatemonthlypayment); function calculatemonthlypayment(e:MouseEvent):void { var loan:Number=price-Number(down_txt.text)/100*price; var c:Number=Number(rate_txt.text)/1200; monthlypayment = loan*(c*(Math.pow((1+c),term)))/(Math. pow((1+c),term)-1); monthly_txt.text=String(Math.round(monthlypayment)); } Download from Library of Wow! ebook ptg 268 LESSON 7 Using Text Don’t get too discouraged looking at the code! Take your time to copy it exactly, or you can copy and paste it from the 07End.fla file in the 07End folder. It may look complicated, but there are only two important concepts to identify. First, the contents of text boxes are referenced by the text property. So down_ txt.text refers to the contents in the text box named down_txt, and rate_txt. text refers to the contents in the text box named rate_txt. Second, text boxes contain text, or String data. To make numeric calculations, you must first convert the text to a number using Number(). To convert a number back to text, use String(). e rest of the surrounding code is algebraic manipulation according to a straight- forward mortgage payment formula. Testing the calculator Now test your movie to see how Flash controls the contents of the named text boxes. 1 Choose Control > Test Movie > in Flash Professional. 2 In the preview movie that appears, enter new values in the text boxes next to Rate and Percent Down, and then click the Calculate button. Flash reads the values in the text boxes next to Rate and Percent Down, calculates a monthly payment, and displays new text in the text box next to Monthly Payments. Try different values to see how much you can afford! Loading External Text So far, you’ve created an attractive layout with interactive tools for this property listing for the realtor. However, the realtor has many more listings, and it would be convenient to use the same format to display the information without re-creating a new layout for each property. You can load new text from an external file and dis- play it in an existing text box, replacing its contents. To display additional listings, simply maintain additional text files and load them to be displayed as needed. is Download from Library of Wow! ebook ptg adobe fLash professionaL Cs5 CLassroom in a book 269 is an example of dynamic content—content that changes at runtime (in the SWF file) rather than being fixed during authortime (in the FLA file). In this section, you’ll load new content from external text files to replace the prop- erty address, information, and description. Naming the text boxes To change the contents of the text boxes, you first need to give them instance names so they can be referenced in ActionScript. You’ll provide instance names for the address, information, and description of the property listing. 1 Select the text box at the top of the Stage that contains the address of the property listing. 2 In the Properties inspector, enter address_txt for the instance name. 3 Select the text box below the address that contains the details of the property listing. 4 In the Properties inspector, enter info_txt for the instance name. Download from Library of Wow! ebook ptg 270 LESSON 7 Using Text 5 Select the first linked text box of the description of the property. 6 In the Properties inspector, enter description_txt for the instance name. Embedding the fonts When text changes at runtime, you need to embed all the characters of the font that the text would potentially use to make sure that the text displays properly. 1 Select the first linked text box named address_txt. 2 In the Character section of the Properties inspector, click the Embed button. e Font Embedding dialog box appears. You can also choose Text > Font Embedding to display the dialog box. Download from Library of Wow! ebook . Calculator, which accepts input from the user through the keyboard and displays estimated monthly payments based on those inputs. You create user-input text with Editable TLF Text. User-input text can. fonts are three generic options grouped at the top of the Character Family pull-down menu. You can also choose the Use device fonts option from the Anti-alias pull-down menu. The three device. Library of Wow! ebook ptg adobe fLash professionaL Cs5 CLassroom in a book 263 4 In the Container and Flow section of the Properties inspector, choose a white color and 75% Alpha value for the Fill. e