| flash Action应用 |  |
您当前的位置是：首页 >> 技术文档 >> flash Action应用 >> 详细内容 | ||
准备:
首先你得有台电脑.其次是要装上Windows系统和Flash8.
XML基础:
既然是处理XML文档.就要先来了解下XML文档.下面是我所了解的,有些是在Flash中用不到的.
XML扩展标记语言(Extensible Markup Language)是SGML(Structured Generalized Markup Language)的子集.
XML是由World Wide Web Consortium(W3C)的XML工作组定义的.
下面开始了解XML的结构:
XML是由序言和文档元素组成的.
序言包括:
Actions层在第一帧中输入以下代码:
//xml-003.fla.
//使用系统编码.防止乱码.
System.useCodepage = true;
//实例化一个xml对象.
var myxml:XML = new XML();
//分析时忽略xml文档中的空格.
myxml.ignoreWhite = true;
//加载xml-002.xml文档.
myxml.load("xml-003.xml");
//调用XML.onLoad事件.
myxml.onLoad = function(success:Boolean)
{
//如果加载成功,success=true;否则success=false;
if (success) {
trace("加载成功!");
login_btn.onRelease = function()
{
//用一个数组来引用顶层节点中子级节点的数组.
var child_arr:Array = myxml.firstChild.childNodes;
//用UserData指定xml文档节点的attributes对象.
var UserData:Object;
//这个for遍历的是顶层节点下的子级节点.
for (var i = 0; i<child_arr.length; i++) {
//这个for遍历的是顶层节点下的子级节点下的子级节点.
for (var j = 0; j<child_arr[i].childNodes.length; j++) {
//用UserData指定child_arr[i].childNodes[j].attributes对象
UserData = child_arr[i].childNodes[j].attributes;
//判断用户名和密码.
//这里的UserData.username其实就是child_arr[i].childNodes[j].attributes.username的简写.UserData.password同理.
//username和password是xml文档节点中的属性.因为xml和Flash区分大小写.所以在输入时要注意大小写.
if ((username_txt.text == UserData.username) && (password_txt.text == UserData.password)) {
//Post这个是顶层节点下子级节点的Post属性.
status_txt.text = child_arr[i].attributes.Post+":"+UserData.username+"登录成功";
//如果用户名和密码正确就退出for.这个重要.如果不用这个,就会一直重复判断用户名和密码.直到将xml文档节点遍历完.那样就不是我们想要的.所以一有正确的就退出for;
return;
} else {
status_txt.text = "用户名或密码错误";
}
}
}
};
} else {
trace("加载失败!");
}
};
实例4:
利用List组件做个mp3播放列表.
新建一个xml文档.在记事本中输入下面的代码.然后保存为 xml-004.xml
<?xml version="1.0" encoding="gb2312"?>
<mp3List>
<mp3 path="jmzcg.mp3">啊桑-寂寞在唱歌</mp3>
<mp3 path="jmjywsls.mp3">寂寞是因为思念谁</mp3>
<mp3 path="szwspdxd.mp3">老狼-睡在我上铺的兄弟</mp3>
<mp3 path="qf.mp3">誓言-求佛</mp3>
<mp3 path="xyzth.mp3">下一站天后</mp3>
<mp3 path="nswdxfm.mp3">伊能静-你是我的幸福吗</mp3>
<mp3 path="aqfx.mp3">爱情复兴(容祖儿)</mp3>
<mp3 path="qrlg.mp3">水木年华-秋日恋歌</mp3>
<mp3 path="qnyh.mp3">张国荣-倩女幽魂</mp3>
<mp3 path="a.mp3">皇缀馨舻挠⑽母?酒吧里常放)</mp3>
</mp3List>
xml结构:
<mp3List>xml文档中的顶层节点.
<mp3 path="jmzcg.mp3">啊桑-寂寞在唱歌</mp3>顶层节点下的子级节点.path是mp3节点下的属性."啊桑-寂寞在唱歌"是mp3的节点值.
//xml-004.fla.
//使用系统编码.防止乱码.
System.useCodepage = true;
//实例化一个xml对象.
var myxml:XML = new XML();
//分析时忽略xml文档中的空格.
myxml.ignoreWhite = true;
//加载xml-004.xml文档.
myxml.load("xml-004.xml");
//调用XML.onLoad事件.
myxml.onLoad = function(success:Boolean)
{
//如果加载成功,success=true;否则success=false;
if (success) {
trace("加载成功!");
//用一个数组来引用顶层节点中子级节点的数组.
var child_arr:Array = myxml.firstChild.childNodes;
//这个for遍历的是顶层节点下的子级节点.
for (var i = 0; i<child_arr.length; i++) {
//将歌曲添加到List组件中.
//child_arr[i].firstChild.nodeValue这个是xml节点的节点值.
//child_arr[i].attributes.path这个是xml节点下的path属性.
mp3_list.addItem({label:(i+1)+"."+child_arr[i].firstChild.nodeValue, data:child_arr[i].attributes.path});
}
} else {
trace("加载失败!");
}
};
//listEvent函数是执行List组件中change事件
function listEvent():Void
{
//这个就是歌曲地址.用Sound类的loadSound方法就可以播放歌曲了.例:mysound.loadSound(mp3_list.selectedItem.data);详细请看帮助文档.
trace(mp3_list.selectedItem.data);
}
//添加帧听器.
mp3_list.addEventListener("change", listEvent);
ASP
ASP生成XML文档.常用的是利用ASP将数据库中的数据用XML文档格式显示.方便Flash调用或应用在其它方面.
ASP基础这里就不做说明了,不过会尽量让大家都明白(不明白的请提问).
说明:
因为是访问ASP,需要通过IIS,Flash默认是访问本地文件的.不能访问网络.所以要将访问本地改成访问网络.
在 文件-->发布设置-->Flash 选项卡的最下面的"本地回放安全性"选项中的"只访问本地文件"改成 "只访问网络",
下面发布的Flash,如没特殊说明,都按此设置.
实验5:
先做一个简单的实验.用ASP生成XML文档.
打开记事本,输入下面的代码,然后保存为 xml-005.asp
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<%
'xml-005.asp
'设置文档类型
Response.ContentType="text/xml"
'输出XML文档,用一个Response.Write()就可以做到的.这样写便于大家理解.
Response.Write("<?xml version='1.0'?>")
Response.Write("<!--xml-005.asp-->")
Response.Write("<firstNode name='1'>")
Response.Write("<childNode name='1.1' />")
Response.Write("<childNode name='1.2' />")
Response.Write("<childNode name='1.3' />")
Response.Write("</firstNode>")
%>
打开IIS新建一个网站,别名xml,路径为刚才的asp文件的目录.
然后在IIS中浏览刚才的asp文件,看到的就是一个xml文档,不同的就是后缀名,写法.
那现在怎样在Flash中调用呢?
很简单.打开之前的 xml-001.fla 文件,
将加载xml的地址改成 xml-005.asp 文件的地址就行了.
例:
myxml.load("http://localhost/xml/xml-005.asp");
但这样还不行.还要加上个随机数,防止调用缓存.改成下面这样.
myxml.load("http://localhost/xml/xml-005.asp?ran="+Math.random(9999));
这个效果跟之前做的xml-001.fla效果是一样的.只是xml文档换成asp生成的了.
实验6:
这个实验跟上面的差不多.但数据是从数据库中调出来的.这样做就能很方便的更新数据了.
数据库:
打开Access数据库,新建一个空白数据库,命名为 Data.mdb,保存到之前asp文件的目录中.
再点 使用设计器创建表,新建二个表,表名分别为:
--------------------------------------------------
first
child
--------------------------------------------------
first表中:
输入二个字段,分别为:
--------------------------------------------------
firstID 自动编号
name 文本
--------------------------------------------------
在 firstID 字段点右键-->主键,保存,
打开first表.在name字段输入一条数据,数据为:
--------------------------------------------------
1
--------------------------------------------------
保存.
child表中:
输入二个字段,分别为:
--------------------------------------------------
childID 自动编号
name 文本
--------------------------------------------------
在 childID 字段点右键-->主键,保存.
打开child表.在name字段输入三条数据,数据分别为:
--------------------------------------------------
1.1
1.2
1.3
--------------------------------------------------
保存.关闭数据库.
数据库到这可以了.下面是ASP:
打开记事本,输入下面的代码,然后保存为 xml-006.asp
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<%
'xml-006.asp
dim conn,rs,sqlcom
'设置文档类型
Response.ContentType="text/xml"
Response.Write("<?xml version='1.0'?>")
Response.Write("<!--xml-006.asp-->")
'创建连接对象
Set conn=Server.CreateObject("Adodb.Connection")
'这里用字符串方法连接数据库.
'"Provider=Microsoft.Jet.OLEDB.4.0; 这个是数据库驱动.
'Data Source="Server.MapPath("Data.mdb") 数据库文件的相对路径.
conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="& Server.MapPath("Data.mdb")
'创建记录集对象.
Set rs=Server.CreateObject("Adodb.RecordSet")
'查询数据库的sql语句.因为 first 是SQL中的关键字,所以要用[]中括号括起来.
sqlcom="select * from [first]"
'执行sql语句.
'1,1 只读.
'1,3 可读可写.
rs.Open sqlcom,conn,1,1
'如果记录集中有数据.
if not rs.eof then
'输出XML节点,rs("name")是first表中字段name的数据.
Response.Write("<firstNode name='"&rs("name")&"'>")
end if
'关闭记录集
rs.Close
'查询数据库的sql语句.
sqlcom="select * from child"
'执行sql语句.
rs.Open sqlcom,conn,1,1
'用for语句将数据库中的数据循环出来.
for k=1 to rs.RecordCount
'输出XML节点,rs("name")是child表中字段name的数据.
Response.Write("<childNode name='"&rs("name")&"' />")
'移到下一条数据
rs.MoveNext
Next
'结束firstNode节点
Response.Write("</firstNode>")
'关闭记录集
rs.Close
'释放记录信对象
Set rs=nothing
'关闭连接
conn.Close
'释放连接对象
Set conn=nothing
%>
然后在IIS中浏览xml-006.asp文件,会跟实验5的asp输出xml文档一样的.
在Flash中还是跟实验5一样调用.
实验7:
重新做实验3,不过XML文档数据从数据库中调用.
用户登录不推荐使用XML.推荐在ASP或其它语言中,做隐式判断.
了解:
ASP请点:
JSP请点:
这个还是要讲的.便于理解下一个实验.
数据库:
打开Data.mdb数据库.新建二个表.
表名分别为:
--------------------------------------------------
post
user
--------------------------------------------------
post表中:
输入二个字段:分别为:
--------------------------------------------------
postID 自动编号
postName 文本
--------------------------------------------------
在 postID 字段点右键-->主键,保存.
打开post表,在postName字段输入二条数据,数据分别为:
--------------------------------------------------
经理
职员
--------------------------------------------------
保存.
user表中:
输入四个字段,分别为:
--------------------------------------------------
userID 自动编号
username 文本
password 文本
postName 文本
--------------------------------------------------
在 userID 字段点右键-->主键,保存.
打开user表,分别在username,password,postName字段输入四条数据,数据分别为:
--------------------------------------------------
username password postName
MChooseFlash01 MChooseHappiness 经理
MChooseFlash02 MChooseHappiness 经理
EChooseFlash01 EChooseHappiness 职员
EChooseFlash02 EChooseHappiness 职员
--------------------------------------------------
保存.关闭数据库.
数据库到这可以了.下面是ASP:
打开记事本,输入下面的代码,然后保存为 xml-007.asp
<
放置的内容是有限的.这个实验就可以用来扩展侧边菜单.
利用Accordion组件做容纳多内容的网站侧边菜单.
效果图:
下面开始:
数据库:
打开Data.mdb数据库.新建二个表.
表名分别为:
--------------------------------------------------
column
columnData
--------------------------------------------------
column表中:
输入三个字段:分别为:
--------------------------------------------------
columnID 自动编号
columnName 文本
columnIndex 数字
--------------------------------------------------
在 columnID 字段点右键-->主键,保存.
打开column表,分别在columnName,columnIndex字段输入五条数据,数据分别为:
--------------------------------------------------
columnName columnIndex
专题栏目-01 0
专题栏目-02 1
专题栏目-03 2
专题栏目-04 3
专题栏目-05 4
--------------------------------------------------
保存.
columnData表中:
输入四个字段,分别为:
--------------------------------------------------
cdID 自动编号
cdName 文本
cdURL 文本
columnIndex 数字
--------------------------------------------------
在 cdID 字段点右键-->主键,保存.
打开columnData表,分别在cdName,cdURL,columnIndex字段输入下面的数据:
--------------------------------------------------
cdName cdURL columnIndex
ChooseFlash-01.1 http://www.happiness01.com 0
ChooseFlash-01.2 http://www.happiness02.com 0
ChooseFlash-01.3 http://www.happiness03.com 0
ChooseFlash-01.4 http://www.happiness04.com 0
ChooseFlash-01.5 http://www.happiness05.com 0
ChooseFlash-02.1 http://www.happiness01.com 1
ChooseFlash-02.2 http://www.happiness02.com 1
ChooseFlash-02.3 http://www.happiness03.com 1
ChooseFlash-02.4 http://www.happiness04.com 1
ChooseFlash-02.5 http://www.happiness05.com 1
ChooseFlash-03.1 http://www.happiness01.com 2
ChooseFlash-03.2 http://www.happiness02.com 2
ChooseFlash-03.3 http://www.happiness03.com 2
ChooseFlash-03.4 http://www.happiness04.com 2
ChooseFlash-03.5 http://www.happiness05.com 2
ChooseFlash-04.1 http://www.happiness01.com 3
ChooseFlash-04.2 http://www.happiness02.com 3
ChooseFlash-04.3 http://www.happiness03.com 3
ChooseFlash-04.4 http://www.happiness04.com 3
ChooseFlash-04.5 http://www.happiness05.com 3
ChooseFlash-05.1 http://www.happiness01.com 4
ChooseFlash-05.2 http://www.happiness02.com 4
ChooseFlash-05.3 http://www.happiness03.com 4
ChooseFlash-05.4 http://www.happiness04.com 4
ChooseFlash-05.5 http://www.happiness05.com 4
ChooseFlash-05.6 http://www.happiness06.com 4
ChooseFlash-05.7 http://www.happiness07.com 4
--------------------------------------------------
保存.关闭数据库.
数据库到这可以了.下面是ASP:
打开记事本,输入下面的代码,然后保存为 xml-008.asp
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<%
'xml-008.asp
dim conn,rs,sqlcom,name_arr,index_arr
'设置文档类型.
Response.ContentType="text/xml"
'输出XML文档.
Response.Write("<?xml version='1.0' encoding='gb2312'?>")
Response.Write("<!--xml-008.asp-->")
Response.Write("<ColumnList>")
'创建连接对象.
Set conn=Server.CreateObject("Adodb.Connection")
'这里用字符串方法连接数据库.
'"Provider=Microsoft.Jet.OLEDB.4.0; 这个是数据库驱动.
'Data Source="Server.MapPath("Data.mdb") 数据库文件的相对路径.
conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="& Server.MapPath("Data.mdb")
'创建记录集对象.
Set rs=Server.CreateObject("Adodb.RecordSet")
'查询数据库的sql语句.column是SQL中的关键字.要用[]中括号括起来.
sqlcom="select * from [column]"
'执行sql语句.
'1,1 只读.
'1,3 可读可写.
rs.Open sqlcom,conn,1,1
'重定义数组.
'rs.RecordCount 记录集中总的记录数.
Redim name_arr(rs.RecordCount)
Redim index_arr(rs.RecordCount)
'用for语句将column表中的数据循环出来.
'Ubound数组的最大上标.
for i=1 to Ubound(name_arr)
'将column表中的columnName字段中的值存入数组name_arr.
name_arr(i)=rs("columnName")
'将column表中的columnIndex字段中的值存入数组index_arr.
index_arr(i)=rs("columnIndex")
'移到下一条数据.
rs.MoveNext
Next
'这里用了嵌套for语句,
'第一个for j是将name_arr和index_arr数组中的数据读出来.也就是column表中的数据.
'第二个for k是将columnData表中的数据读出来.
'用for语句将name_arr和index_arr数组中的数据循环出来.
for j=1 to Ubound(name_arr)
'关闭记录集.
rs.Close
'查询数据库的sql语句.
'根据index_arr(j)数组中的值为条件来重复执行sql语句.
sqlcom="select * from columnData where columnIndex="&index_arr(j)&""
'执行sql语句.
rs.Open sqlcom,conn,1,1
'输出XML节点.
Response.Write("<Column name='"&name_arr(j)&"'>")
'用for语句将column表中的数据循环出来.
for k=1 to rs.RecordCount
'输出XML节点.
Response.Write("<ColumnData name='"&rs("cdName")&"' url='"&rs("cdURL")&"' />")
'移到下一条数据.
rs.MoveNext
Next
'结束Column节点.
Response.Write("</Column>")
Next
'结束ColumnList节点.
Response.Write("</ColumnList>")
'释放记录信对象.
Set rs=nothing
'关闭连接.
conn.Close
'释放连接对象.
Set conn=nothing
%>
在IIS中浏览xml-008.asp文件.可以看到xml文档的结构跟实验7中的xml文档结构一样.
下面就是Flash了
Flash中:
打开Flash,新建一个Flash文档,大小200*230,命名 xml-008.fla ;
新建一个图层,命名为:Actions
--------------------------------------------------
新建一个影片剪辑,命名为:btn_over ;此影片剪辑用来装饰鼠标滑过时的效果.
新建二个图层.分别命名为:
--------------------------------------------------
Actions
cont
--------------------------------------------------
在图层cont的第一帧画一个200*18,没有边框的矩形,填充颜色为#0099FF;透明度为0,x,y值为0,
在第三帧按[F6],选中该帧的矩形,将透明度调为50;再选中第一帧,打开属性面板,在补间那选形状.
在图层Actions的第三帧按[F6],在该帧输入代码: stop();
完成如图:
回到主场景,新建一个按钮.命名为:btn ;
在'指针经过','按下'帧按[F6].
将库中的 btn_over 影片剪辑拉到'指针经过'帧,x,y值为0,
再在'按下'帧画一个200*18,没有边框的矩形,填充颜色为#FFF3CC; 透明度为50, x,y值为0,
回到主场景,新建一个影片剪辑.命名为:columnItem,
在高级选项那 标识符为:columnItem,在勾选上 '为ActionScript导出','第一帧导出'.
新建三个图层,分别命名为:
--------------------------------------------------
btn
text
line
--------------------------------------------------
在图层line的第一帧画一条100*1的虚线.填充颜色为#660000; 透明度为80 ; x值为0,y值为18;
在图层text画一个动态文本框,大小为200*18; 文本颜色为:#660000; x,y值为0, 实例名为: cName ;
在图层btn中,将btn按钮元件拉到第一帧.x,y值为0,实例名为: btn ;
完成如图:
回到主场景.
打开组件面板,拉一个Accordion组件到库中;
在Actions图层的第一帧输入下面的代码:
//导入类.
import mx.core.View;
import mx.containers.Accordion;
//===========================================
//使用系统编码.防止乱码.
System.useCodepage = true;
//隐藏按钮的鼠标手形.
Button.prototype.useHandCursor = false;
//===========================================
//实例化一个xml对象.
var columnData:XML = new XML();
//分析时忽略xml文档中的空格.
columnData.ignoreWhite = true;
//加载http://localhost/xml/xml-008.asp.
columnData.load("http://localhost/xml/xml-008.asp?ran="+Math.random(9999));
//调用XML.onLoad事件.
columnData.onLoad = function(success:Boolean)
{
//如果加载成功,success=true;否则success=false;
if (success) {
//执行dragColumn函数.
dragColumn(columnData.firstChild.childNodes);
}
};
//==========dragColumn函数用来绘制专栏数据===========
function dragColumn(column_arr:Array):Void
{
//创建Accordion组件的实例.
//createClassObject(类名称,"实例名",深度,{初始对象});
createClassObject(Accordion, "column", 0, {_x:0, _y:0, _width:200, _height:240});
//执行columnStyle函数.
columnStyle();
//获取数组的长度.
var columnLen:Number = column_arr.length;
//专栏的子菜单数组.
var columnChild:Array;
//引用专题栏目的对象.
var MainItem:Object;
//循环创建专题栏目.
for (var i = 0; i<columnLen; i++) {
//创建专题栏目.MainItem引用新创建的对象.
//createSegment(类名称,值或实例名称,显示的标题);
MainItem = column.createSegment(View, i, column_arr[i].attributes.name);
//获取专栏的子菜单数组.
columnChild = column_arr[i].childNodes;
//循环创建专题栏目的子菜单.
for (var j = 0; j<columnChild.length; j++) {
//使用with语句简写代码.
//创建专题栏目的子菜单.
//createChild("库中的链接名","实例名称",{初始对象});
//18.5是columnItem影片剪辑的高度和行距.
with (MainItem.createChild("columnItem", "columnItem", {_x:0, _y:18.5*j})) {
//显示子菜单.
cName.text = columnChild[j].attributes.name;
//获取点击的URL;
btn.cURL = columnChild[j].attributes.url;
//btn.onRelease事件.
btn.onRelease = btnEvent;
}
}
}
}
//========执行btn.onRelease事件的函数=========
function btnEvent():Void
{
//连接点击的URL.
getURL(this.cURL, "_blank");
}
//=======columnStyle函数设置专栏的样式=========
function columnStyle():Void
{
//文本颜色.
column.setStyle("color", 0x660000);
//字体.
column.setStyle("fontFamily", "隶书");
//主题.
column.setStyle("themeColor", "haloOrange");
//点击专栏的动画.
column.setStyle("openEasing", mx.transitions.easing.Bounce.easeOut);
}
现在大家就可以测试影片了.
教程源文件:点击这里下载源文件