PRACTICAL NO.

9 Create a dynamic textbox using UI Scrollbar Component

1. Open a new Flash document. 2. Select the Text tool (T). Go to the Property inspector panel and make the following choices :2.1. Choose the _sans font family, which can be found on top of the fonts list. 2.2. Select a standard font size 18. 2.3. Choose black for the text color or any other you like. 2.4. Make the text field Center-aligned by clicking on the appropriate icon. 2.5. In the menu that governs the rendering of your text, select the Use device font option. 2.6. In the Line type menu, select the Single line option. 3. Click anywhere on the stage and start dragging your mouse. When you have made a rectangle of a reasonable size, release the mouse button. 4. Press Esc on your keyboard to exit from the text field-editing mode. A blue border will appear, delineating your dynamic text field. 5. Go to the Property inspector again and find the Instance name option on its left side. Type HEADING inside it and press Enter. 6. Again select the Text tool (T). Go to the Property inspector panel and make the following choices :6.1. Choose the _sans font family, which can be found on top of the fonts list. 6.2. Select a standard font size 12. 6.3. Choose black for the text color or any other you like. 6.4. Make the text field Justify-aligned by clicking on the appropriate icon. 6.5. In the menu that governs the rendering of your text, select the Use device font option. 6.6. In the Line type menu, select the Multiline option. 7. Click anywhere on the stage and start dragging your mouse. When you have made a rectangle of a reasonable size, release the mouse button. 8. Press Esc on your keyboard to exit from the text field-editing mode. A blue border will appear, delineating your dynamic text field. 9. Go to the Property inspector again and find the Instance name option on its left side. Type MYTEXT inside it and press Enter. 10. Double-click on the label of the first layer to change it. It is called Layer 1. Change that to CONTENT. Press Enter to exit the layer name-editing mode. 11. Click the Insert Layer icon to create a new layer and rename it as ACTION. 12. Click on the first keyframe of the ACTION layer to select it. 13. Select Window > Actions to open the Actions panel. 14. Insert the following code into the ActionScript pane: myText.text = "dummy text here"; 15. Click on the CONTENT layer to select it. 16. Select the Selection tool (V). 17. Go to the Tools panel and make sure that the Snap to Objects option is turned on. This will make it easier for you to position the scrollbar exactly next to your text field. 18. Select Window > Components to open the Components panel.

27

19. Click on the little plus icon next to the User Interface section to expand it. 20. Click on the UIScrollBar component and drag it out onto the stage, over the text field. Once that you are over it, release your mouse button. The scrollbar will automatically become associated with the dynamic text field and its height will match that of the text field. 21. Press CTRL + ENTER to test the movie.

28

OUTPUT SCREEN:-

29