FLASH CS3 BUTTON组件应用开发(二)

| |
[2007/06/27 18:36 | 分类: Flash技术 | by gdgzboy ]
    上一篇是讲到,按钮有浮雕效果,并且怎样让标签字体变的更加清晰.今天继续.
-------------------------------------------------------------------------------------------
进一步了解按钮中的图标 1

import fl.controls.Button;
import fl.controls.ButtonLabelPlacement;

var sheepLeft:Button = new Button();
sheepLeft.label = "羊在左";
sheepLeft.labelPlacement = ButtonLabelPlacement.LEFT;
sheepLeft.setStyle("icon", sheep);
sheepLeft.setSize(200, 40);
sheepLeft.move(10, 10);
addChild(sheepLeft);

var sheepRight:Button = new Button();
sheepRight.label = "羊在右";
sheepRight.labelPlacement = ButtonLabelPlacement.RIGHT;
sheepRight.setStyle("icon", sheep);
sheepRight.setSize(200, 40);
sheepRight.move(10, 60);
addChild(sheepRight);

var sheepBottom:Button = new Button();
sheepBottom.label = "羊在下";
sheepBottom.labelPlacement = ButtonLabelPlacement.TOP;
sheepBottom.setStyle("icon", sheep);
sheepBottom.setSize(200, 60);
sheepBottom.move(10, 120);
addChild(sheepBottom);

var sheepTop:Button = new Button();
sheepTop.label = "羊在上";
sheepTop.labelPlacement = ButtonLabelPlacement.BOTTOM;
sheepTop.setStyle("icon", sheep);
sheepTop.setSize(200, 60);
sheepTop.move(10, 190);
addChild(sheepTop);


讲解: 要上ICO起作用首先要为在库里的ICON 图标Linkage.接着就是调整labelPlacement的属性了,要先导入ButtonLabelPlacement,只要相对与图标的位置就行了.
---------------------------------------------------------------------------------
---------------------------------------------------------------------------------
进一步了解按钮中的图标 2

import fl.controls.Button;
import fl.controls.ButtonLabelPlacement;

var sheepNear:Button = new Button();
sheepNear.label = "羊很近";
sheepNear.labelPlacement = ButtonLabelPlacement.LEFT;
sheepNear.setStyle("icon", sheep);
sheepNear.setSize(200, 40);
sheepNear.move(10, 10);
addChild(sheepNear);

var sheepFar:Button = new Button();
sheepFar.label = "羊很远";
sheepFar.labelPlacement = ButtonLabelPlacement.LEFT;
sheepFar.setStyle("icon", sheep);
sheepFar..setStyle("textPadding", 45);
sheepFar.setSize(200, 40);
sheepFar.move(10, 60);
addChild(sheepFar);


讲解:要让文字与图标保持距离就简单了,只要加上setStyle("textPadding", 距离),就搞定了。简单.

-------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------
进一步了解按钮中的图标 3

import fl.controls.Button;
import fl.controls.CheckBox;

var myButton:Button = new Button();
myButton.label = "icons";
myButton.enabled = true;
myButton.toggle = true;
myButton.setStyle("upIcon", BulletCheck);
myButton.setStyle("overIcon", BulletWarning);
myButton.setStyle("downIcon", BulletCritical);
myButton.setStyle("disabledIcon", IconCheck);
myButton.setStyle("selectedUpIcon", BulletCheckSelected);
myButton.setStyle("selectedOverIcon", BulletWarningSelected);
myButton.setStyle("selectedDownIcon", BulletCriticalSelected);
myButton.setStyle("selectedDisabledIcon", IconCheckSelected);
myButton.setSize(120, 40);
myButton.move(10, 10);
addChild(myButton);

var enabledCheckBox:CheckBox = new CheckBox();
enabledCheckBox.label = "enabled";
enabledCheckBox.selected = myButton.enabled;
enabledCheckBox.move(10, 60);
enabledCheckBox.addEventListener(Event.CHANGE, enabledChangeHandler);
addChild(enabledCheckBox);

var toggleCheckBox:CheckBox = new CheckBox();
toggleCheckBox.label = "toggle";
toggleCheckBox.selected = myButton.toggle;
toggleCheckBox.move(10, 80);
toggleCheckBox.addEventListener(Event.CHANGE, toggleChangeHandler);
addChild(toggleCheckBox);

function enabledChangeHandler(event:Event):void {
  myButton.enabled = enabledCheckBox.selected;
}

function toggleChangeHandler(event:Event):void {
  myButton.toggle = toggleCheckBox.selected;
}


讲解:这里我用了原教程的代码,因为基本没什么可以补充的了。我唯一能做的就是把这个程序讲清楚.在setStyle("状态","库里Linkage里Class里的名字"),这个很重要,只有这样设置清楚了,才会看到当你鼠标移动到按钮上是是什么的,按下是什么样的,离开是什么样的。而其中toggle是表示按钮是否为选中状态,当你按下第一次是,按钮表示选中,那么你就可以看到,当你再次把鼠标移动到按钮上是什么样的,是跟刚才的完全不一样,图标全部变灰.这就是区别,你要仔细的琢磨下.
    

            


作者:gdgzboy@牛C网
地址:http://www.niuc.net/post/216/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明!



评论(0) | 引用(0) | 阅读(329)
发表评论
昵称 [注册]
密码 游客无需密码
网址
电邮
打开HTML 打开UBB 打开表情 隐藏 记住我