纳金网

标题: [as3基础应用]AS3的TextField练习~FLASH制作动态注释类 [打印本页]

作者: . 时间: 2013-3-20 11:25
标题: [as3基础应用]AS3的TextField练习~FLASH制作动态注释类
http://hong-ming.cn/flash/notes%E8%8C%83%E4%BE%8B.swf 动画地址：http://hong-ming.cn/flash/notes%E8%8C%83%E4%BE%8B.swf
这天杀的服务器，居然不给下载！！只能把类贴到文章最后了~复制到文本文件名改为Notes.as，和源文件放在一个目录就可以用了^_^
写这个注释类的目的，呵呵~也没什么目的，看到html网站有悬停在按钮或者其他什么上可以出现一个注释，觉得挺实用，就打算自己也给flash做个类似的，以后做网站的时候用得着~
写这个注释类的难点在根据文本长度动态变化文本框的长度，在这个上面我也研究很很久，目前这方面仍然不算完善，字符数量增多就会出现误差~中文和英文差别也很大…头痛啊！
在前面那篇关于相册的文章中，那个所谓的相册类并不是真正的类，只是能实现类似于类的功能的库里面的影片剪辑，于是就有玩flex的童鞋批斗我说并不是真正的类，不能在flex里使用，鉴于满足部分玩flex的童鞋的需要~本次的Notes类使用的是地道的类的写法，代码基础的薄弱的童鞋只用知道怎么使用就好。
下面先看下这个Notes类的使用说明：
包：顶级
类：public class Notes
继承：Notes→Shape
语言版本：ActionScript 3
公共属性：
tFm:TextFormat 控制文本格式的属性，赋值后通过NotesInit()或者ResetText()可改变文字显示格式
con:MovieClip 文本和注释背景的父容器，鼠标跟随的对象就是这个容器
speedA:Number 用于控制透明度显示速度的参数，通过此代码起作用con.alpha+=(1-con.alpha)/speedA
speedB:Number 用于控制鼠标跟随速度的参数，通过此代码起作用
con.x+=(stage.mouseX-pointX-con.x)/speedB;
con.y+=(stage.mouseY-pointY-con.y)/speedB;
speedC:Number 用于控制注释形状变化速度的参数，通过此代码起作用tF.width+=(mWidth-tF.width)/speedC
pointX:Number 鼠标跟随时贴紧鼠标那个点的横坐标
pointY:Number 鼠标跟随时贴紧鼠标那个点的纵坐标
mWidth:Number 注释条的目标长度
公共方法：
Notes() 构造函数
NotesInit(mc:MovieClip,txt:TextField,movieClipX:Number=0,movieClipY:Number=0,notesTextX:Number=0,notesTextY:Number=0):void 初始化函数，mc是作为注释条背景的影片剪辑，txt是注释的文本框，movieClipX注释条背景相对于父容器的横坐标，movieClipY注释条背景相对于父容器的纵坐标，TextX注释文本框相对于父容器的横坐标，TextY注释文本框相对于父容器的纵坐标
Appear(px:Number=0,py:Number=0):void 使用此函数注释条将出现，px是鼠标跟随时贴紧鼠标那个点的横坐标，py是鼠标跟随时贴紧鼠标那个点的纵坐标，注释条在默认情况下隐藏
Disappear():void 将注释条隐藏
ResetText(txt:String) 重新设定注释条的内容，txt为新的要显示的内容
接下来我们要使用这个类了具体怎么布置舞台就不细讲了
在舞台上画一个灰色的背景~再在舞台上拖一个文本输入组件取实例名tbox，一个按钮组件取实例名bt
之后再第一帧插入代码如下：
stop();
import Notes;//导入注释类，因为注释类是自己写的，所以要放到根目录下，并用这个代码导入才能使用
var t:TextField=new TextField();//新建一个文本框实例
t.text="还没有内容";//给文本框添加默认显示的内容
var Nt:Notes=new Notes();//新建一个“注释”，此时这里面什么都没有
var num:Boolean=***e;//此变量是个中间变量，储存注释的朝向，默认是朝左的
Nt.NotesInit(new back(),t);//对注释进行初始化，虽然这个初始化函数有很多参数，不过其他参数默认均为0，不填也没有关系
stage.addChild(Nt);//将注释添加到舞台的显示列表
addEventListener(Event.ENTER_FRAME,ap);//添加不断触发的一个函数ap
Nt.pointX=-15;//
Nt.pointY=-15;//对注释的贴近点进行设置
function ap(e:Event):void {//一个不断被触发的函数
if ((stage.mouseX>=25)&&(stage.mouseX<=525)&&(stage.mouseY>=50)&&(stage.mouseY<=350)) {//如果鼠标在背景框框的区域内
if (Nt.con.visible==false) {//如果注释并没有显示
Nt.Appear(Nt.pointX,Nt.pointY);//那么就把注释显示，如果没有上面那个判断语句，那么显示函数就会被不断触发
}
} else {//如果鼠标没在灰色区域
if (Nt.con.visible==***e) {//而且注释是显示的
Nt.Disappear();//那么隐藏注释
}
}
if ((Nt.con.x+Nt.mWidth)>525) {//如果注释超出灰色区域右侧
num=***e;//将注释标记为朝左
} else if ((Nt.con.x)<25) {//如果注释超出灰色区域左侧
num=false;//将注释标记为朝右
}
if (num) {//如果标记朝左
Nt.pointX=Nt.mWidth+15;//贴近点设为超出注释右侧15像素位置，即设置注释朝左
} else {//如果不是标记朝左
Nt.pointX=-15;//设置贴近点为左侧超出15像素位置，即朝右
}
if ((Nt.con.y+16)>350) {//如果注释超出灰色区域下侧
Nt.pointY=16+15;//设置为朝上
} else if ((Nt.con.y)<50) {//如果注释超出灰色区域上侧
Nt.pointY=-15;//设置为朝下
}
}
bt.addEventListener(MouseEvent.CLICK,cha);//按钮添加动作
function cha(e:MouseEvent):void {//点击按钮执行的函数
if (tbox.text=="") {//如果输入组件内容为空
Nt.ResetText("请在文本框内输入内容再按触发");//将注释的内容设为"请在文本框内输入内容再按触发"
} else {//如果不为空
Nt.ResetText(tbox.text);//将注释内容设为用户输入的内容
}
}
-----------------------------------------------------------------------------------------------------------------------------------
package {
import flash.display.Shape;
import flash.display.MovieClip;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import flash.events.Event;
public class Notes extends Shape {
private var tF:TextField=new TextField;
private var mC:MovieClip=new MovieClip;
private var lrm:Number=5;
public var tFm:TextFormat=new TextFormat;
public var con:MovieClip=new MovieClip;
public var speedA:Number=4;
public var speedB:Number=2;
public var speedC:Number=2;
public var pointX:Number=0;
public var pointY:Number=0;
public var mWidth:Number=0;
public function Notes() {
}
public function NotesInit(mc:MovieClip,txt:TextField,movieClipX:Number=0,movieClipY:Number=0,notesTextX:Number=0,notesTextY:Number=0):void {
tF=txt;
mC=mc;
tFm.font="宋体";
tFm.size=12;
tFm.color=0xFFFFFF;
tFm.leftMargin=lrm;
tFm.rightMargin=lrm;
tFm.align=TextFormatAlign.CENTER;
mC.x=movieClipX;
mC.y=movieClipY;
tF.setTextFormat(tFm);
tF.selectable=false;
tF.x=notesTextX;
tF.y=notesTextY;
tF.height=16;
tF.width=tF.textWidth+2*lrm+tF.length;
mC.width=tF.width;
mWidth=tF.width;
con.visible=false;
con.addChild(mC);
con.addChild(tF);
}
public function Appear(px:Number=0,py:Number=0):void {
stage.addChild(con);
con.visible=***e;
con.alpha=0;
pointX=px;
pointY=py;
con.x=stage.mouseX - pointX;
con.y=stage.mouseY - pointY;
addEventListener(Event.ENTER_FRAME,appearMov);
addEventListener(Event.ENTER_FRAME,followMouse);
}
private function appearMov(e:Event):void {
con.alpha+=(1-con.alpha)/speedA;
}
private function followMouse(e:Event):void {
con.x+=(stage.mouseX-pointX-con.x)/speedB;
con.y+=(stage.mouseY-pointY-con.y)/speedB;
tF.width+=(mWidth-tF.width)/speedC;
mC.width=tF.width;
}
public function Disappear():void {
removeEventListener(Event.ENTER_FRAME,appearMov);
removeEventListener(Event.ENTER_FRAME,followMouse);
con.visible=false;
}
public function SetDirection(px:Number=0,py:Number=0):void {
pointX=px;
pointY=py;
}
public function ResetText(txt:String) {
tF.text=txt;
mWidth=tF.textWidth+2*lrm+tF.length;
tF.setTextFormat(tFm);
}
}
} 【来源：互联网】
更多精彩教程，尽在web3D纳金网http://www.narkii.com/college/ 动画地址：http://hong-ming.cn/flash/notes%E8%8C%83%E4%BE%8B.swf
这天杀的服务器，居然不给下载！！只能把类贴到文章最后了~复制到文本文件名改为Notes.as，和源文件放在一个目录就可以用了^_^
写这个注释类的目的，呵呵~也没什么目的，看到html网站有悬停在按钮或者其他什么上可以出现一个注释，觉得挺实用，就打算自己也给flash做个类似的，以后做网站的时候用得着~
写这个注释类的难点在根据文本长度动态变化文本框的长度，在这个上面我也研究很很久，目前这方面仍然不算完善，字符数量增多就会出现误差~中文和英文差别也很大…头痛啊！
在前面那篇关于相册的文章中，那个所谓的相册类并不是真正的类，只是能实现类似于类的功能的库里面的影片剪辑，于是就有玩flex的童鞋批斗我说并不是真正的类，不能在flex里使用，鉴于满足部分玩flex的童鞋的需要~本次的Notes类使用的是地道的类的写法，代码基础的薄弱的童鞋只用知道怎么使用就好。
下面先看下这个Notes类的使用说明：
包：顶级
类：public class Notes
继承：Notes→Shape
语言版本：ActionScript 3
公共属性：
tFm:TextFormat 控制文本格式的属性，赋值后通过NotesInit()或者ResetText()可改变文字显示格式
con:MovieClip 文本和注释背景的父容器，鼠标跟随的对象就是这个容器
speedA:Number 用于控制透明度显示速度的参数，通过此代码起作用con.alpha+=(1-con.alpha)/speedA
speedB:Number 用于控制鼠标跟随速度的参数，通过此代码起作用
con.x+=(stage.mouseX-pointX-con.x)/speedB;
con.y+=(stage.mouseY-pointY-con.y)/speedB;
speedC:Number 用于控制注释形状变化速度的参数，通过此代码起作用tF.width+=(mWidth-tF.width)/speedC
pointX:Number 鼠标跟随时贴紧鼠标那个点的横坐标
pointY:Number 鼠标跟随时贴紧鼠标那个点的纵坐标
mWidth:Number 注释条的目标长度
公共方法：
Notes() 构造函数
NotesInit(mc:MovieClip,txt:TextField,movieClipX:Number=0,movieClipY:Number=0,notesTextX:Number=0,notesTextY:Number=0):void 初始化函数，mc是作为注释条背景的影片剪辑，txt是注释的文本框，movieClipX注释条背景相对于父容器的横坐标，movieClipY注释条背景相对于父容器的纵坐标，TextX注释文本框相对于父容器的横坐标，TextY注释文本框相对于父容器的纵坐标
Appear(px:Number=0,py:Number=0):void 使用此函数注释条将出现，px是鼠标跟随时贴紧鼠标那个点的横坐标，py是鼠标跟随时贴紧鼠标那个点的纵坐标，注释条在默认情况下隐藏
Disappear():void 将注释条隐藏
ResetText(txt:String) 重新设定注释条的内容，txt为新的要显示的内容
接下来我们要使用这个类了具体怎么布置舞台就不细讲了
在舞台上画一个灰色的背景~再在舞台上拖一个文本输入组件取实例名tbox，一个按钮组件取实例名bt
之后再第一帧插入代码如下：
stop();
import Notes;//导入注释类，因为注释类是自己写的，所以要放到根目录下，并用这个代码导入才能使用
var t:TextField=new TextField();//新建一个文本框实例
t.text="还没有内容";//给文本框添加默认显示的内容
var Nt:Notes=new Notes();//新建一个“注释”，此时这里面什么都没有
var num:Boolean=***e;//此变量是个中间变量，储存注释的朝向，默认是朝左的
Nt.NotesInit(new back(),t);//对注释进行初始化，虽然这个初始化函数有很多参数，不过其他参数默认均为0，不填也没有关系
stage.addChild(Nt);//将注释添加到舞台的显示列表
addEventListener(Event.ENTER_FRAME,ap);//添加不断触发的一个函数ap
Nt.pointX=-15;//
Nt.pointY=-15;//对注释的贴近点进行设置
function ap(e:Event):void {//一个不断被触发的函数
if ((stage.mouseX>=25)&&(stage.mouseX<=525)&&(stage.mouseY>=50)&&(stage.mouseY<=350)) {//如果鼠标在背景框框的区域内
if (Nt.con.visible==false) {//如果注释并没有显示
Nt.Appear(Nt.pointX,Nt.pointY);//那么就把注释显示，如果没有上面那个判断语句，那么显示函数就会被不断触发
}
} else {//如果鼠标没在灰色区域
if (Nt.con.visible==***e) {//而且注释是显示的
Nt.Disappear();//那么隐藏注释
}
}
if ((Nt.con.x+Nt.mWidth)>525) {//如果注释超出灰色区域右侧
num=***e;//将注释标记为朝左
} else if ((Nt.con.x)<25) {//如果注释超出灰色区域左侧
num=false;//将注释标记为朝右
}
if (num) {//如果标记朝左
Nt.pointX=Nt.mWidth+15;//贴近点设为超出注释右侧15像素位置，即设置注释朝左
} else {//如果不是标记朝左
Nt.pointX=-15;//设置贴近点为左侧超出15像素位置，即朝右
}
if ((Nt.con.y+16)>350) {//如果注释超出灰色区域下侧
Nt.pointY=16+15;//设置为朝上
} else if ((Nt.con.y)<50) {//如果注释超出灰色区域上侧
Nt.pointY=-15;//设置为朝下
}
}
bt.addEventListener(MouseEvent.CLICK,cha);//按钮添加动作
function cha(e:MouseEvent):void {//点击按钮执行的函数
if (tbox.text=="") {//如果输入组件内容为空
Nt.ResetText("请在文本框内输入内容再按触发");//将注释的内容设为"请在文本框内输入内容再按触发"
} else {//如果不为空
Nt.ResetText(tbox.text);//将注释内容设为用户输入的内容
}
}
-----------------------------------------------------------------------------------------------------------------------------------
package {
import flash.display.Shape;
import flash.display.MovieClip;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import flash.events.Event;
public class Notes extends Shape {
private var tF:TextField=new TextField;
private var mC:MovieClip=new MovieClip;
private var lrm:Number=5;
public var tFm:TextFormat=new TextFormat;
public var con:MovieClip=new MovieClip;
public var speedA:Number=4;
public var speedB:Number=2;
public var speedC:Number=2;
public var pointX:Number=0;
public var pointY:Number=0;
public var mWidth:Number=0;
public function Notes() {
}
public function NotesInit(mc:MovieClip,txt:TextField,movieClipX:Number=0,movieClipY:Number=0,notesTextX:Number=0,notesTextY:Number=0):void {
tF=txt;
mC=mc;
tFm.font="宋体";
tFm.size=12;
tFm.color=0xFFFFFF;
tFm.leftMargin=lrm;
tFm.rightMargin=lrm;
tFm.align=TextFormatAlign.CENTER;
mC.x=movieClipX;
mC.y=movieClipY;
tF.setTextFormat(tFm);
tF.selectable=false;
tF.x=notesTextX;
tF.y=notesTextY;
tF.height=16;
tF.width=tF.textWidth+2*lrm+tF.length;
mC.width=tF.width;
mWidth=tF.width;
con.visible=false;
con.addChild(mC);
con.addChild(tF);
}
public function Appear(px:Number=0,py:Number=0):void {
stage.addChild(con);
con.visible=***e;
con.alpha=0;
pointX=px;
pointY=py;
con.x=stage.mouseX - pointX;
con.y=stage.mouseY - pointY;
addEventListener(Event.ENTER_FRAME,appearMov);
addEventListener(Event.ENTER_FRAME,followMouse);
}
private function appearMov(e:Event):void {
con.alpha+=(1-con.alpha)/speedA;
}
private function followMouse(e:Event):void {
con.x+=(stage.mouseX-pointX-con.x)/speedB;
con.y+=(stage.mouseY-pointY-con.y)/speedB;
tF.width+=(mWidth-tF.width)/speedC;
mC.width=tF.width;
}
public function Disappear():void {
removeEventListener(Event.ENTER_FRAME,appearMov);
removeEventListener(Event.ENTER_FRAME,followMouse);
con.visible=false;
}
public function SetDirection(px:Number=0,py:Number=0):void {
pointX=px;
pointY=py;
}
public function ResetText(txt:String) {
tF.text=txt;
mWidth=tF.textWidth+2*lrm+tF.length;
tF.setTextFormat(tFm);
}
}
} 【来源：互联网】
更多精彩教程，尽在web3D纳金网http://www.narkii.com/college/

作者: kikkik7000 时间: 2014-8-4 12:37
感谢分享

欢迎光临纳金网 (http://c-www.narkii.com/club/)