写在前面的话:回顾自己的博客,从最开始的“揭开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的属性面板如下图:
和面板对应的相关属性有:(继承属性我不列了)
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,顾名思义,就是格式化文本用的。里面的相关属性,也都是用于设置或修改文本的格式。
(1)TextFormat包含的内容
再一次把属性面板图给搬过来,嘿嘿:
和面板对应的相关属性有:
font:设置文本的字体名称,以字符串形式表示。
size:设置文本的字体大小,以磅值表示。
color:设置文本的字体颜色。
bold:设置文字是否为粗体。
italic:设置文字是否为斜体。
align:设置文本对齐方式。包括左端对齐、居中对齐、右端对齐、两端对齐。
indent:设置文本第一个字符的缩进像素。
leading:设置文本之间的行间距。
leftMargin:设置文本段落的左边距。
rightMargin:设置文本段落的右边距。
letterSpacing:设置文本的字间距。
kerning:设置是否启用自动调整字距功能。
url:设置文本的超链接地址。
target:设置超链接打开目标窗口的方式。
其他还有4个属性,是属性面板没有提供的设置,但是也几乎没有什么作用,所以我就不列出来了。
(2)TextFormat的用法
使用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",即可实现屏蔽鼠标右键的功能了。