AS3.0的元素处理

写在前面的话:回顾自己的博客,从最开始的“揭开AS程序的面纱”到现在的“AS3.0的元素处理”,包括刚刚完成的“AS3.0中的显示编程”和月前完成的“常用事件方法与技巧”。已经陆续写下了近四十篇博文。除了一篇有关XMLSocket类的文章,因为某些原因暂时搁浅外(只是暂时搁浅,绝不会太监的),个人还是比较满意的,也希望能对大家有所帮助。

这个月,我会尽量结束Flash相关内容的介绍,然后写一些和网页游戏相关的文章,毕竟,自己现在从事的主业和自我发展的方向是游戏。到时候,也希望大家能多多捧场,多提宝贵意见,先谢谢了。


第一篇,就从静态文本开始吧。静态文本是少数几个只能用Flash创作工具创建,而不能使用ActionScript以编程方式实例化的元素。

为了便于下面的说明,我们新建一个Flash文件,然后在舞台上创建一个静态文本,输入“测试文本”四字。

虽然我们不能实例化静态文本,但依然可以使用StaticText类来获取静态文本的内容,代码如下:

var tt:DisplayObject = this.getChildAt(0); //从显示列表中获取静态文本

var mytext:StaticText = StaticText(tt); //静态文本赋值

trace(mytext.text); //返回静态文本内容

最后输出结果:测试文本


然后我再给大家介绍一下TextSnapShot类,该类最大的作用是获取所加载的外部swf中,静态文本的内容(当然限于AS3脚本的SWF文件)。但我这里为了方便说明,还是用当前文件做示例,道理是一样的,代码也差不多的。

还是以上面的Flash文件为例,我们将代码修改一下,如下:

var mytext:TextSnapshot = this.textSnapshot;

trace(mytext.getText(0, this.textSnapshot.charCount));

返回结果同上。


下面我介绍一下该类的常用用法:

(1) charCount

核心用法。返回TextSnapshot对象中的字符数(也就是静态文本的总字数)。

(2) getText()

格式:getText(beginIndex:int, endIndex:int, includeLineEndings:Boolean = false):String

返回静态文本的内容。第一第二个参数指定范围,第三个参数一般都省略,会自动插换行符,很奇怪。

示例:mytext.getText(0,5);

(3) findText()

格式:findText(beginIndex:int, textToFind:String, caseSensitive:Boolean):int

从指定的范围搜索文本内容。第一个参数指定从哪里开始搜索,第二个参数是搜索内容,第三个参数是否忽略大小写。

示例:mytext.findText(0, “文本”, false);

文本这一块内容,算不上是Flash的重头戏,但也是不可缺少的一块内容。TextField的属性和方法众多,我们不用全部记住。但我们需要知道能实现哪些功能。

TextField的属性面板如下图:

1124544520.jpg


和面板对应的相关属性有:(继承属性我不列了)

text:文本内容。

htmlText:存储HTML文本的内容。如果要使用HTML文本时,请参阅帮助,了解支持哪些HTML元素,Flash支持的元素不多的。别指望实现太复杂的功能。可能也就<img>标签会比较有用些,可以插入外部的图片和SWF文件。

type:设置文本为动态文本还是输入文本。默认为动态文本。

textColor:设置字体颜色。

autoSize:对齐方式,只有无(默认)、左端对齐、居中对齐、右端对齐。没有两端对齐。

multiline:文本是否为多行文本。

wordWrap:文本是否自动换行。

displayAsPassword:输入的字符以密码形式显示。

border:是否具有边框。

selectable:文本字段是否可选。

maxChars:用户可输入的最大字符数。


属性面板不提供的常用设置属性:

background:是否具有背景填充色。

backgroundColor:当background属性设置为true时,设置背景颜色。

borderColor:当border属性为true时,设置边框颜色。

restrict:在输入文本中,限制用户可输入的字符集。


常用文本类编程属性:

length:获取文本所含字符数。

numLines:获取多行文本的总行数。

caretIndex:获取输入光标所在的位置(插入字符的那条一闪一闪的竖线)。

selectionBeginIndex:所选择文本的起始位置。

selectionEndIndex:所选择文本的结束位置。

textWidth:获取文本区域实际宽度。

textHeight:获取文本区域实际高度。

scrollH:当前水平滚动位置。设置该值可以实现文本水平滚动效果。

maxScrollH:scrollH的最大值。

scrollV:当前垂直滚动位置。设置该值可以实现文本垂直滚动效果。

maxScrollV:scrollV的最大值

bottomScrollV:返回当前可见文本区域的底部ScrollV值。


有关文本定位的相关方法:

(1)根据提供的字符索引值获取:

getCharBoundaries():获得某一个字符的具体位置矩阵(该字符的x、y坐标,以及宽、高)。

getFirstCharInParagraph():获取某一个字符所在段落的第一个字符索引值。

getParagraphLength():获取某一个字符所在段落包含的字符个数。

getLineIndexOfChar():获取某一个字符所在的行号。

(2)根据坐标获取:

getCharIndexAtPoint():根据点坐标,获得当前位置的字符索引值。

getLineIndexAtPoint():根据点坐标,获取当前行号。


和文本行相关的方法:

getLineLength():获取某一行的字符个数。

getLineOffset():获取某一行第一个字符的索引号。

getLineText():获取某一行的文本内容。


接下来的两篇,也和TextField类有比较密切的关系。分别是TextFormat类和styleSheet对象。

TextFormat,顾名思义,就是格式化文本用的。里面的相关属性,也都是用于设置或修改文本的格式。

1TextFormat包含的内容

再一次把属性面板图给搬过来,嘿嘿:

1124502893.jpg


和面板对应的相关属性有:

font:设置文本的字体名称,以字符串形式表示。

size:设置文本的字体大小,以磅值表示。

color:设置文本的字体颜色。

bold:设置文字是否为粗体。

italic:设置文字是否为斜体。

align:设置文本对齐方式。包括左端对齐、居中对齐、右端对齐、两端对齐。

indent:设置文本第一个字符的缩进像素。

leading:设置文本之间的行间距。

leftMargin:设置文本段落的左边距。

rightMargin:设置文本段落的右边距。

letterSpacing:设置文本的字间距。

kerning:设置是否启用自动调整字距功能。

url:设置文本的超链接地址。

target:设置超链接打开目标窗口的方式。

其他还有4个属性,是属性面板没有提供的设置,但是也几乎没有什么作用,所以我就不列出来了。


2TextFormat的用法

使用TextFormat之前,需要先实例化。具体代码如下:

var format:TextFormat = new TextFormat(); //定义textFormat对象

format.font = "Verdana"; //设置具体属性

tt.defaultTextFormat = format; //设置默认格式

tt.setTextFormat(format,1,8); //设置格式


defaultTextFormat属性可以设置文本的默认格式。也就是说,当文本发生变化时,会自动应用设置的格式。但当前存在的文本是不会变化的。

setTextFormat()方法刚好相反,可以设置当前文本的格式,或者具体设置其中一部分文本应用指定格式。但当文本发生变化时,是不会生效的。


3)关于TextFormat的一些自我看法

结合TextField和TextFormat的属性,我们可以实现属性面板的所有设置功能。不过,Adobe的开发团队,对于这两个对象的开发应该是独立的,所以两者之间也存在着一些矛盾。比如:TextField的autoSize和textColor属性,和TextFormat的align、color属性,明显是重复的。体现在AS代码上,就是谁后写,就生效谁的。但是这样子是很容易产生错误的。

所以我建议大家,还是用TextFormat对象来设置文本对齐方式和文本字体颜色,以免发生不必要的错误。毕竟,严格意义上来说,这两个属性也确实是TextFormat应该管的事。

另外还有一个小点,TextField的文本对齐方式是不支持两端对齐的,但TextFormat是支持的。所以以为AS代码不支持两端对齐的朋友,你们的看法是错的。

styleSheet和TextFormat类似,也是用来定义文本格式的,二者实现的效果也差不多。但是,styleSheet和TextFormat之间,是存在兼容冲突的,设置了styleSheet的文本,将无法再使用TextFormat类,否则编译时会产生报错信息。

那么,这两者之间的区别是什么呢,我大致归纳了下,有以下几点:

(1) styleSheet只能对HtmlText使用,如果没有设置该属性则无法使用。TextFormat则不受该限制影响。

(2) styleSheet可以通过修改外部CSS文件来变更文字格式,不用重新编译生成的SWF文件,这个也是styleSheet最大的优势。

(3) 设置了styleSheet的文本字段是不可以再编辑的。所以如果是一个输入文本的话,应该避免使用styleSheet

由上也可以看到,CSS虽然说可以在Flash文件中创建,但我觉得,只有外部加载的CSS文件才有意义,否则,真的体现不出styleSheet的优势了。同时,如果你要应用styleSheet的话,建议先看下帮助,因为Flash支持的styleSheet样式元素并不多。


下面我介绍下如何加载外部CSS文件,首先,我们要创建一个CSS文件,CSS文件我就完全不懂了,所以只好抄袭一段代码来,大家把下面这段代码复制到文本文件,然后命名为example.css,和Flash文件放在同一个目录下:

p {

font-family: Times New Roman, Times, _serif;

font-size: 14;

}

h1 {

font-family: Arial, Helvetica, _sans;

font-size: 20;

font-weight: bold;

}

.bluetext {

color: #0000CC;

}


如果正确套用该CSS文件,文本会呈现蓝色字体。然后我们打开Flash,写入AS代码如下:

var loader:URLLoader = new URLLoader();

var req:URLRequest = new URLRequest("example.css");

loader.load(req);

loader.addEventListener(Event.COMPLETE, onLoaded);

function onLoaded(event:Event) {

var sheet:StyleSheet = new StyleSheet(); //定义styleSheet实例

sheet.parseCSS(loader.data); //解析外部CSS文件

var myText:TextField = new TextField();

myText.styleSheet = sheet; //调用styleSheet实例

myText.htmlText = "<span class='bluetext'>测试文本</span>"; //采用styleSheet

addChild(myText);

}


最后我再做点补充说明:

(1) 首先要创建styleSheet实例,然后用parseCSS()方法解析读取的外部CSS文件

(2) 必须在设置htmlText属性之前应用样式表,否则CSS样式是不会生效的。

(3) 在htmlText文件中调用CSS的方法和正式网页中相同。

一般我们管理Flash右键菜单是为了两个目的:第一个,编辑右键菜单,实现我们自己需要的某些功能;第二个,完全屏蔽右键菜单。前者可以通过AS代码来实现,而后者,Flash本身并不支持,需要借助一些外力实现。下面我分别介绍:

一、编辑右键菜单

从InteractiveObject类继承的每个对象,都可以具有唯一的上下文菜单,如Button、TextField、Sprite、MovieClip等。需要注意的是:Stage对象是其中一个例外,它并不接受contextMenu属性,但如果设置stage.showDefaultContextMenu = false,可以删除其他所有的菜单命令(包括默认的和自己定义的)。

管理右键菜单首先需要使用ContextMenu类,用于管理菜单。如以下代码:

var myContextMenu:ContextMenu = new ContextMenu(); //定义菜单实例

myContextMenu.hideBuiltInItems(); //隐藏默认的菜单项

this.contextMenu = myContextMenu; //应用菜单项


如果我们并不需要隐藏所有的默认菜单项,可以使用ContextMenuBuiltInItems类进行控制,该类的作用就是控制默认的右键菜单选项。比如我们要关闭其他的默认菜单,仅保留“打印”,代码如下:

var myContextMenu:ContextMenu = new ContextMenu();

myContextMenu.hideBuiltInItems(); //使用该行代码,设置所有默认项的属性为false

var defaultItems:ContextMenuBuiltInItems = myContextMenu.builtInItems;

defaultItems.print = true; //设置“打印”为true

this.contextMenu = myContextMenu;


最后我们使用ContextMenuItem类编辑自己的菜单项。在编辑之前,我先说下,编辑自己的菜单项是有一些限制的,比如:

(1) 自定义菜单项不得超过15个,每个标题必须至少包含一个可见字符。

(2) 标题字符不能超过100个,并且开头的空白字符会被忽略。

(3) 与任何内置菜单项相同的标题将被忽略。不过比较搞笑的是,内置菜单项比如打印,实际是“打印…”,所以如果取名“打印”是可以的。

代码如下:

var myContextMenu:ContextMenu = new ContextMenu();

myContextMenu.hideBuiltInItems();


var menuItem1:ContextMenuItem = new ContextMenuItem("第一个菜单项");

menuItem1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, func1);

myContextMenu.customItems.push(menuItem1);


var menuItem2:ContextMenuItem = new ContextMenuItem("第二个菜单项");

menuItem2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, func2);

myContextMenu.customItems.push(menuItem2);


this.contextMenu = myContextMenu;


function func1(event:ContextMenuEvent) {

trace(event.target.caption);

}

function func2(event:ContextMenuEvent) {

trace(event.target.caption);

}


ContextMenuItem类还有一些有用的属性,如:

caption:获取菜单项标题名称

enabled:菜单项是否启用(未启用为灰色不可点击状态)

separatorBefore:菜单项上方是否显示分隔条


二、完全屏蔽右键菜单

完全屏蔽右键菜单,一般有以下三种方法:

(1) 采用JS来实现屏蔽鼠标右键的功能

网上有提供现成的代码范例,地址如下:http://www.taoshaw.com/flash/link_add/youjian/youjian.rar


(2) 也是通过JS,利用透明gif+div网页层在Flash上添加链接的方法来实现的

代码相对简单些,如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Flash彻底屏蔽右键</title>

</head>


<body>

<table height=121 border=0 align="center" cellpadding=0 cellspacing=0>

<tr>

<td>

<div style="position:relative">

<EMBED style="position:absolute;z-index:0" src="http://www.taoshaw.com/flash/link_add/xiao.swf" quality=high height=196 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" wmode="opaque">

<a href="http://www.taoshaw.com" target="_blank" style="cursor:pointer">

<div style="position:relative;filter:alpha(opacity=0);-moz-opacity:0;left:0;top:0; background:#CDEAF6;;height:196px;z-index:10">

</div>

</a>

</div>

</td>

</tr>

</table>

</body>

</html>


(3) 利用swfobject模块自带的右键屏蔽功能

swfobject据说是Google工程师开发的,功能很强大,非常好用。

格式如下: <flash id="test" name="test" src="RightClick.swf" ;560" height="420" Version="10.0.0" param="{wmode:'opaque'}" rightclick="rightClick"/>

只要把最后一项改成rightclick="no",即可实现屏蔽鼠标右键的功能了。


你可能感兴趣的:(as3.0,元素处理)