设置线条样式的参数

象房村

 

 

<?xml version="1.0" encoding="utf-8"?><application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalalign="middle" backgroundcolor="white"><zoom id="zoom"></zoom><applicationcontrolbar dock="true"><button label="hide" click="panel.visible = false;" enabled="{panel.visible}"></button> <button label="show" click="panel.visible = true;" enabled="{!panel.visible}"></button> </applicationcontrolbar><panel id="panel" title="title" status="status" showeffect="{zoom}" hideeffect="{zoom}" width="100%" height="100%"><controlbar><label text="control bar"></label> </controlbar></panel></application> 如果你想加个easing 效果(Back, Bounce, Elastic, etc)，只要指定Zoom的easingFunction就可以了，像上边第2个演示那样，只要加上下边的代码就可以了 <script></script><zoom id="zoom" easingfunction="Bounce.easeOut"></zoom>

 

可以设置线条样式的参数，以更改笔触的外观。可以使用参数来更改线条样式的粗细、颜色、Alpha、比例因子和其它属性。

设置线条粗细

通过 MovieClip.lineStyle() 方法的 thickness 参数可以用点数指定所绘制线条的粗细。可以绘制粗细在 0 到 255 点宽之间的任意线条，但将粗细设置为 0 将创建所谓的极细 线条，其中无论如何缩放 SWF 文件或调整其大小，笔触始终为 1 像素。

下面的过程演示标准的 1 像素粗细线条与极细线条之间的差别。

创建极细笔触：

1. 创建一个新的 Flash 文档，并将它保存为 hairline.fla。
2. 将下面的 ActionScript 添加到时间轴中的第 1 帧：
   this.createEmptyMovieClip("drawing_mc", 10); // 创建一条红色的极细线条 drawing_mc.lineStyle(0, 0xFF0000, 100); drawing_mc.moveTo(0, 0); drawing_mc.lineTo(200, 0); drawing_mc.lineTo(200, 100); // 创建一条蓝色的粗细为 1 像素的线条 drawing_mc.lineStyle(1, 0x0000FF, 100); drawing_mc.lineTo(0, 100); drawing_mc.lineTo(0, 0); drawing_mc._x = 100; drawing_mc._y = 100;

   　　前面的代码使用 Drawing API 在舞台上绘制两条线。第一条线为红色，粗细为 0，表示极细，第二条线为蓝色，粗细为 1 像素。

3. 保存 Flash 文档，然后选择"控制">"测试影片"对该 SWF 文件进行测试。

   　　最初，红色和蓝色线条看上去完全相同。如果在 SWF 文件中右击，并从上下文菜单中选择"放大"，则红色线条始终显示为 1 像素宽的线条；但是，每当您在 SWF 文件中放大时，蓝色线条都将变粗。

设置线条颜色 (rgb)

通过 lineStyle() 方法中的第二个参数 rgb 可以将当前线条段的颜色作为数字来进行控制。默认情况下，Flash 将绘制黑色线条 (#000000)，但您可以使用 0xRRGGBB 语法通过设置新的十六进制颜色值来指定不同颜色。在此语法中，RR 是红色值（在 00 和 FF 之间），GG 是绿色值（00 到 FF），BB 是蓝色值（00 到 FF）。

例如，可将红色线条表示为 0xFF0000，绿色线条表示为 0x00FF00，蓝色线条表示为 0x0000FF，紫色线条表示为0xFF00FF（红色和蓝色），白色线条表示为 #FFFFFF，灰色线条表示为 #999999，等等。

设置线条 Alpha

通过 lineStyle() 方法中的第三个参数 alpha 可以控制线条的透明度 (alpha) 级别。透明度是在 0 到 100 之间的一个值，其中 0 表示完全透明的线条，而 100 表示完全不透明（可见）的线条。

设置线条像素提示 (pixelHinting)

用于 strokes 参数的像素提示 pixelHinting 表示线条和曲线锚记在完全像素中设置。对于任何笔触粗细，笔触都在完全像素中，这表示您从来看不到模糊的垂直或水平线条。将 pixelHinting 参数设置为布尔值（true 或 false）。

设置线条缩放 (noScale)

通过使用 String 值设置 noScale 参数，可以为线条指定缩放模式。可以以水平模式或垂直模式使用不可缩放的笔触，缩放线条（普通），或不使用缩放。

提示

在用户放大时为用户界面元素启用缩放将很有用，但是只垂直或水平缩放影片剪辑时，则不能这样做。

可以使用四种不同的模式之一指定何时应进行缩放，何时不应进行缩放。下面是 noScale 属性的可能值：

　　normal  始终缩放粗细（默认）。

　　vertical 如果对象垂直缩放，则不缩放粗细。

horizontal 如果对象水平缩放，则不缩放粗细。

none 从不缩放粗细。

设置线条端点 (capsStyle) 和联接点 (jointStyle)

可以为 capsStyle 参数设置三种类型的端点样式：

• round（默认）
• square
• none

下面的过程演示了这三种端点样式之间的差别。当您对 SWF 文件进行测试时，舞台上将出现每种端点样式的可视表示形式。

设置不同的端点样式：

1. 创建一个新的 Flash 文档，并将它保存为 capsstyle2.fla。
2. 将下面的 ActionScript 添加到时间轴中的第 1 帧：
   var lineLength:Number = 100; // round this.createEmptyMovieClip("round_mc", 10); round_mc.lineStyle(20, 0xFF0000, 100, true, "none", "round"); round_mc.moveTo(0, 0); round_mc.lineTo(lineLength, 0); round_mc.lineStyle(0, 0x000000); round_mc.moveTo(0, 0); round_mc.lineTo(lineLength, 0); round_mc._x = 50; round_mc._y = 50; var lbl:TextField = round_mc.createTextField("label_txt", 10, 0, 10, lineLength, 20); lbl.text = "round"; var lineLength:Number = 100; // square this.createEmptyMovieClip("square_mc", 20); square_mc.lineStyle(20, 0xFF0000, 100, true, "none", "square"); square_mc.moveTo(0, 0); square_mc.lineTo(lineLength, 0); square_mc.lineStyle(0, 0x000000); square_mc.moveTo(0, 0); square_mc.lineTo(lineLength, 0); square_mc._x = 200; square_mc._y = 50; var lbl:TextField = square_mc.createTextField("label_txt", 10, 0, 10, lineLength, 20); lbl.text = "square"; // none this.createEmptyMovieClip("none_mc", 30); none_mc.lineStyle(20, 0xFF0000, 100, true, "none", "none"); none_mc.moveTo(0, 0); none_mc.lineTo(lineLength, 0); none_mc.lineStyle(0, 0x000000); none_mc.moveTo(0, 0); none_mc.lineTo(lineLength, 0); none_mc._x = 350; none_mc._y = 50; var lbl:TextField = none_mc.createTextField("label_txt", 10, 0, 10, lineLength, 20); lbl.text = "none";

   前面的代码使用 Drawing API 绘制三条线，每条具有不同的 capsStyle 值。

3. 选择"控制">"测试影片"对该 Flash 文档进行测试。

可以为 jointStyle 参数设置三种不同类型的联接点样式：

• round（默认）
• miter
• bevel

下面的示例演示这三种联接点样式之间的差别。

设置不同的联接点样式：

1. 创建一个新的 Flash 文档，并将它保存为 jointstyles.fla。
2. 将下面的 ActionScript 添加到时间轴中的第 1 帧：
   var lineLength:Number = 100; // miter this.createEmptyMovieClip("miter_mc", 10); miter_mc.lineStyle(25, 0xFF0000, 100, true, "none", "none", "miter", 25); miter_mc.moveTo(0, lineLength); miter_mc.lineTo(lineLength / 2, 0); miter_mc.lineTo(lineLength, lineLength); miter_mc.lineTo(0, lineLength); miter_mc._x = 50; miter_mc._y = 50; var lbl:TextField = miter_mc.createTextField("label_txt", 10, 0, lineLength + 20, lineLength, 20); lbl.autoSize = "center"; lbl.text = "miter"; // round this.createEmptyMovieClip("round_mc", 20); round_mc.lineStyle(25, 0xFF0000, 100, true, "none", "none", "round"); round_mc.moveTo(0, lineLength); round_mc.lineTo(lineLength / 2, 0); round_mc.lineTo(lineLength, lineLength); round_mc.lineTo(0, lineLength); round_mc._x = 200; round_mc._y = 50; var lbl:TextField = round_mc.createTextField("label_txt", 10, 0, lineLength + 20, lineLength, 20); lbl.autoSize = "center"; lbl.text = "round"; // bevel this.createEmptyMovieClip("bevel_mc", 30); bevel_mc.lineStyle(25, 0xFF0000, 100, true, "none", "none", "bevel"); bevel_mc.moveTo(0, lineLength); bevel_mc.lineTo(lineLength / 2, 0); bevel_mc.lineTo(lineLength, lineLength); bevel_mc.lineTo(0, lineLength); bevel_mc._x = 350; bevel_mc._y = 50; var lbl:TextField = bevel_mc.createTextField("label_txt", 10, 0, lineLength + 20, lineLength, 20); lbl.autoSize = "center"; lbl.text = "bevel";

   Flash 使用 Drawing API 在舞台上创建三个三角形。每个三角形具有不同的联接点样式值。

3. 保存 Flash 文档，然后选择"控制">"测试影片"对该文档进行测试。

设置线条尖角 (miterLimit)

miterLimit 属性是一个数值，它指示切断尖角联接点（请参见设置线条端点 (capsStyle) 和联接点 (jointStyle)）时的限制。miterLimit 值通常是笔触值的倍数。例如，如果值为 2.5，则 miterLimit 在笔触大小的 2.5 倍处切断。有效值为 0 到 255（如果 miterLimit 的值为 undefined，则默认值为 3）。仅当 jointStyle 设置为 miter 时，才使用 miterLimit属性。

 

事件 引用 触发器名称 对应事件名称 事件描述 addedEffect added 当组件被添加到容器时触发 createCompleteEffect createComplete 当组件完成绘制时触发 focusInEffect focusIn 当组件获得光标焦点时触发 focusOutEffect focusOut 当组件失去光标焦点时触发 hideEffect hide 当组件变成不可见时触发 showEffect show 当组件变成可见时触发 mouseDownEffect mouseDown 当鼠标在组件上按下时触发 mouseUpEffect mouseUp 当鼠标在组件上松开时触发 rollOverEffect rollOver 当鼠标移动到组件上时触发 moveEffect move 当组件被移动时触发 resizeEffect resize 当组件改变大小时触发 Effect中 引用 <animateproperty>可实现拉伸效果 <blur>模糊效果 <dissolve>实现淡出淡入效果,与<fade>相似 <glow>外发光效果 <iris>以矩形方式出现或消失 <move>移动效果 <parallel>多种效果叠加 <pause>停止 mx.effects.easing.Bounce.easeOut可产生弹动效果 <resize>改变大小 <rotate>旋转角度 <soundeffect>声音效果 <wipedown>从上往下消失或出现 <wipeleft>从右往左消失或出现 <wiperight>从左往右消失或出现 <wipeup>从下往上消失或出现 <zoom>放大或缩小 不同state切换时的过渡效果 Charts(统计) <areachart>是一种以面积作为表示方式 <axisrenderer>是一种轴图,股票交易常以这种方式表示 <barchart>是柱状图 <bubblechart>气泡图 <candlestickchart>一种比较有趣的图,”涨”跟”跌”的颜色会不一样 <categoryaxis>跟AxisRenderer很像 <columnchart>跟<barchart>很像 <datetimeaxis>以日期为轴的折线图 <gridlines>多条线图 <hlocchart>跟AxisRenderer很像 <legend>图例,离散的点 <linearaxis>Axis系列 <linechart>折线图 <logaxis>Axis系列 <piechart>饼图 <plotchart>跟Legend很像 </plotchart></piechart></logaxis></linechart></linearaxis> </legend></hlocchart></gridlines></datetimeaxis></barchart></columnchart></categoryaxis></candlestickchart></bubblechart></barchart></axisrenderer></areachart></zoom></wipeup></wiperight></wipeleft></wipedown></soundeffect></rotate></resize></pause></parallel></move></iris></glow></fade></dissolve></blur></animateproperty>

 

 

 

[email protected]   [email protected]