Customizing UI Components With ActionScript

Chia sẻ: Qweqwdasd Qweqdasda | Ngày: | Loại File: PDF | Số trang:6

Thêm vào BST

Báo xấu

54
lượt xem 4
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Với thành phần tùy biến giao diện người dùng phải đối mặt với ActionScript Let's it-hầu hết lập trình không thể chăm sóc ít hơn về khía cạnh thiết kế của một ứng dụng. Họ chỉ muốn nhìn thấy nó làm việc. Tuy nhiên, không có nhận được xung quanh một thực tế là trong thế giới thực, một ứng dụng tuyệt vời, tìm kiếm cũng quan trọng như là một động đúng chức năng một. Bởi vì các thành phần giao diện người dùng là yếu tố trực quan...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Customizing UI Components With ActionScript

< Day Day Up > Customizing UI Components With ActionScript Let's face it—most coders couldn't care less about the design aspects of an application. They just want to see it work. However, there's no getting around the fact that in the real world, a great-looking application is just as important as a properly functioning one. Because user interface components are visual elements, their appearance must fit in well with the overall design of your application. Fortunately, they have the built-in capability to be styled and customized in various ways using ActionScript. This allows you to easily change visual features such as colors, fonts, margins, and more. NOTE The look of components can also be changed in more dramatic ways by using Flash's drawing tools to tinker with the graphical elements that make up a component. Because the focus of this book is ActionScript, in this section we'll look only at visual aspects that can be changed using a script. Following are some of the visual aspects of components that can be changed: borderColor fontSize fontStyle fontWeight marginLeft marginRight textAlign textDecoration
For a complete listing and definitions of style properties that can be changed, look for "Supported Styles" in Flash's Help documentation. Components can be styled on several different levels, including individually and globally. Components can also be styled as a class (such as RadioButton, CheckBox, or Button) so that all instances of that class share the same attributes. Although this strategy may be useful in some cases, individual and global styling are likely to be more commonly used, so we'll focus on those techniques. When an individual component instance is styled a certain way, only that instance's appearance changes. When components are styled globally, all component instances are affected. NOTE Individual styling changes applied to an instance will override global styling changes in relation to that instance. To set a style property for an individual component instance such as fontSize, you use the following syntax: myComponentInstance.setStyle("fontSize", 14); To set its border color, you use the following syntax: myComponentInstance.setStyle("borderColor", 0x006633); When setting color styles, which would include any style property whose name ends with Color, there is the built-in capability to use color names instead of hexadecimal values: myComponentInstance.setStyle("borderColor", "green");
TIP Most common color names (black, red, green, blue, and so on) can be used. For greater versatility, use hex values. For more information about hex values, see Lesson 4, "Using Object Classes." Scripting global styling changes is similar to scripting individual components; however, instead of naming the individual component instance, you reference the global style object: _global.style.setStyle("fontSize", 14); This script will cause all component instances to use a font size of 14. In the following exercise, we'll use both individual and global styling to give our application its final beautiful appearance. 1. Open Components5.fla. This project continues from where we left off in the preceding exercise. We'll insert several lines of code at the end of the existing code on Frame 1. 2. With the Actions panel open and Frame 1 selected, add the following script at the end of the current script: 3. 4. listURL_lb.setStyle("fontStyle", "italic"); 5. 6. listURL_lb.setStyle("color", 0x006699); 7. These two lines of script set the fontStyle and color properties of the listURL_lb instance. Setting the fontStyle property to italic causes text in the component to appear italicized; the color property determines the color of the text. Yes, it seems as though the property for changing the font color should be called fontColor, but it's not. It's simply color.
NOTE For items in a List component instance, the color property refers to the color of text when the item is not selected. 3. Add this script at the end of the current script: 4. 5. deleteURL_pb.setStyle("color", 0x990000); 6. 7. openURL_pb.setStyle("fontWeight", "bold"); 8. The first line causes the text on the Delete button to appear red, as a proper Delete button should. The next line boldfaces the text on the Open button. One more global change and our application will be finished. 4. Add the following line of script at the end of the current script: 5. 6. _global.style.setStyle("themeColor", "haloOrange"); 7.
As you've probably noticed during the testing phases of this project, all the component instances are highlighted in a greenish tint whenever you interact with them. This tint is known as haloGreen. With this line of script, we've set the global themeColor property of all component instances to haloOrange, causing them to take on an orange tint when you interact with them. TIP A third possible value for this property is haloBlue. Time for one final test. 5. Choose Control > Test Movie. When the application appears, you'll notice that the Add button glows orange when manipulated. Add some URLs. As you interact with the other elements, they also glow orange. In addition, the word Delete appears on the Delete button in red, and the word Open appears bold on the Open button. Items in the URL list appear
italicized at all times, in addition to appearing blue when not selected. This is just a small sampling of the dozens of style changes that can be made using ActionScript. 6. Close the test movie to return to the authoring environment. Save this file as Components6.fla. This step completes this exercise and the lesson. < Day Day Up >