基于Flash的超文本链接技术设计及其实现
2013-05-29郑凤婷田素贞
郑凤婷,田素贞
(1.河南师范大学,河南 新乡 453007;2.商丘职业技术学院,河南 商丘 476000)
1.超文本及超链接技术
1.1 超文本
超文本又叫超媒体技术,是建立各种媒体信息之间的网状链接结构,与传统的线性文本结构有很大差别,它符合人类的“联想”式思维习惯。超文本以节点为信息单位,一个结点就是一个信息块,它可以是文本、图形、图像、动画、声音或它们的组合体,结点之间用链连接起来,这样便形成网状结构,是一种非线性的结构。[1]其特征主要体现在三个方面:
1.1.1 多媒体化
作为超文本的基本信息单元——节点,它可以包含文本、图形、图像、音频、视频和动画等多种媒体信息,而且节点的信息表现方式、大小都可根据主题自由选择、组合,不需要严格的定义。
1.1.2 网络结构
超文本是一种网状的信息结构体,这使它的信息表达接近现实世界。它把内容和形式都做为丰富的节点,按照它们在现实世界中的联系和人们的思维逻辑,有机的组织起来,构成有条理的、复杂的信息体。
1.1.3 交互性
多媒体和网络化是超文本静态组织信息的特点,而交互性是用户在浏览超级文本时,最为重要的动态特征。
1.2 超链接
超链接是www技术的核心,是网页中最重要、最根本的元素之一。超链接能够使多个孤立的网页之间产生相互联系,从而使单独的网页形成一个有机的整体。
所谓超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片、一个电子邮件地址、一个文件,甚至是一个应用程序[2]。而在一个网页中用来超链接的对象,可以是一段文本或是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。
(1)按链接路径的不同,超链接一般分为三种类型:内部链接、锚点链接和外部链接。
(2)按照使用对象的不同,可以划分为:文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链接等[3]。
2.函数及功能描述
Flash中可以利用getURL()的方式来设置超链接,或是与网页中的程序代码沟通,甚至可以将Flash中的数据传送到指定页面当中。目前,在网页中使用Flash,最常遇到的问题就是Flash动画与Html页面的互动[4]。例如在Flash中加入网页的超链接、邮件超链、甚至调用Html中所设置的JavaScript特效等动作。以下介绍几个经常使用的方法,说明网页中的超链接的应用[5]。
2.1 getURL函数
将指定URL的文件加载到窗口中,或是将变量传递到位于所定义URL的另一应用程序中。getURL()函数的基本语法如下:
getURL(URL[,窗口][,方法]);
函数参数说明
(1)URL:取得文件的 URL网址,如【http://www.baidu.com】。
(2)窗口:这是一个可选项,用来指定要加载文件的窗口或HTML页面框架。可以输入特定窗口的名称,或是从下列保留的目标名称中选择。
_self:指定目前窗口中的页面框架
_blank:指定新的窗口
_parent:指定目前页面框架的父窗口
_top:指定目前窗口中最上层的页面框架
(3)方法:用来传送变量的GET或POST方法。如果没有变量,则省略该参数。GET方法会将变量附加到URL网址的后方,适用于数目较少的变量。POST方法会用不同的HTTP文件头来传送变量,并用来传送较长串的变量。
2.2 常用的链接
2.2.1 网页超链接
网页超链接的方法一般为:getURL(“http://www.baidu.com”,“_blank”);此链接会打开一个新窗口,显示【http://www.baidu.com】百度页面。
2.2.2 邮件超链接
邮件超链接的格式为:getURL(“mailto:指定电子邮件[?subject=标题]”);此链接会打开本机邮件软件,并将指定电子邮件填入收件人及标题内容(可省略),你只需填写信内容即可寄出。
2.2.3 文本超级链接
能在选择文字的同时打开相关浏览器窗口。在[属性]面板上输入网址及选择打开浏览器窗口的方式即可。
2.2.4 链接外部图片
能够打开链接相关的图片。这也是Flash在播放过程中进行链接的一个重要方面。其语法为:LoadMovie(“图片名”,影片剪辑名);
2.2.5 链接外部动画
在Flash页面打开链接的相关动画。其语法为:LoadMovieNum(“动画名”,层名this);
3.模块设计与相关实现
3.1 给按钮添加超链接
方法一:在Flash文件ActionScript 3.0中的实现方法:
(1)打开Flash,选择[文件]菜单下的[新建]命令,新建一个文件;
(2)在[窗口]菜单中选择[公用库],再在[公用库]中选择[按钮],选择其中一种按钮类型,在舞台上即出现所选的按钮图形;
(3)修改按钮上的文字为“按钮超链接”;
(4)选择该按钮,在[属性]面板中设置实例名称为“MyBtn”;
(5)在时间轴面板中,锁定图层1,新建图层2,双击该图层命名为“action”;
(6)选中“action”层的第1帧,按 F9键,打开[动作-帧]面板,向其中添加代码:
MyBtn:addEventListener(MouseEvent.CLICK,onMyBtnclick);
function onMyBtnclick(e:MouseEvent):void{
navigateToURL(new URLRequest(“http://www.baidu.com”),“_blank”);
}
代码说明:
①MyBtn:addEventListener(事件类型,处理事件的方法):为名为“MyBtn”的对象添加事件。
[事件类型]有很多种,在此介绍以下几种鼠标事件:
MouseEvent.click:鼠标单击事件;
MouseEvent.Mouse_Down:鼠标左键按下事件;
MouseEvent.Mouse_Up:鼠标左键弹起事件;
MouseEvent.Roll_Over:鼠标滑入事件;
MouseEvent.Roll_Out:鼠标滑出事件;
MouseEvent.Mouse_Move:鼠标移动事件;
MouseEvent.Mouse_Out:鼠标移出事件;
MouseEvent.Mouse_Over:鼠标移过事件;
MouseEvent.Mouse_LEAVE:鼠标移开舞台事件;
MouseEvent.Mouse_WHEEL:鼠标滚轮滚动事件;
MouseEvent.DOUBLE_click:鼠标双击事件;
当使用鼠标双击事件时,doubleclickEnabled(双击是否可用)必须为True。如MyBtn:doubleclick-Enabled=“True”[6]。
[事件处理方法]为处理事件的一些代码集合。如方法:
OnMyBtnClick:function OnMyBtnClick(e:MouseEvent):void{
鼠标处理相关事项
}
② navigateToURL(new URLRequest(链接地址),窗口类型):打开或替换一个窗口。
[链接地址]为指定要导航到哪个URL;
[窗口类型]可以使用_self、_blank、_parent或_top。
(7)制作完毕,Ctrl+Enter组合键测试。单击按钮即可在新的窗口中打开链接的网页http://baidu.com。
方法二:在Flash文件ActionScript 2.0中的实现方法:
(1)打开Flash,选择[文件]菜单下的[新建]命令,新建一个文件;
(2)设图层为“背景”层,选择一图片作为背景;
(3)新建一图层,修改名为“按钮超链接”;
(4)在[窗口]菜单中选择[公用库],再在[公用库]中选择[按钮],选择其中一种按钮类型,在舞台上即出现所选的按钮图形;
(5)修改按钮上的文字为“按钮超链接”;
(6)选中该按钮,按F9键,打开[动作-按钮]面板,向其中添加代码:
on(release){
getURL(“http://www.baidu.com”,“_blank”);
}
(7)Ctrl+Enter组合键测试。单击按钮即可在新的窗口中打开链接的网页。
3.2 添加邮件超链接
(1)新建一图层,修改名为“邮件超链接”;
(2)制作一邮件超链接按钮,选中该按钮,按F9键,打开[动作-按钮]面板,向其中添加代码如下:
on(release){
getURL(“mailto:zczft2005@126.com?subject=我要找郑凤婷!”);
}
(3)Ctrl+Enter组合键测试。单击按钮可打开outlook express邮件链接,如下图1所示:
其中,[zczft2005@126.com]自动填入收件人栏;[我要找郑凤婷!]填入标题栏;只需在在下面书写邮件的内容,点发送即可。
3.3 给文本添加超链接
(1)新建一图层,双击修改名为“文本超链接”;
(2)在工具栏上选择“文本工具”,在合适位置拖放鼠标,并输入文字“文本超链接”;
(3)选中“文本超链接”,在打开的[属性]面板中,点“选项”前的三角符号,在展开的“链接”项后面输入网址http://www.htu.edu.cn,在“目标”项后面可以使用_self、_blank、_parent或_top选择打开浏览器窗口的方式;
(4)Ctrl+Enter组合键测试。单击该文本即可打开链接的http://www.htu.edu.cn网页。
图1 outlook express邮件超链接
3.4 超链接图片
(1)新建一图层,双击修改名为“链接图片”;
(2)在该层的第一帧制作一个“超链接图片”按钮,在该层的第二帧制作一个“返回”按钮,并拖放到场景中;
(3)制作一个空的影片剪辑,拖到场景中,实例名是:mymc;
(4)在“超链接图片”图层之上,新建一动作图层为as,时间轴上第一帧上as的代码如下:
stop();
i=0;
(5)时间轴上第二帧上as的操作代码如下:
mymc._x=0;
mymc._y=0;
mymc._xscale=80;
mymc._yscale=82;
其功能是确定打开超链接图片的起始位置和图片的大小。
(6)在“超链接图片”层的第一帧,选中“链接图片”按钮,在[动作-按钮]面板中书写代码如下:
on(release){
gotoAndStop(2);
LoadMovie(“j1.jpg”,mymc);
}
(7)在“超链接图片”层的第二帧,选中“返回”按钮,在打开的[动作-按钮]面板中编写代码如下:
on(release){
UnLoadMovie(mymc);
gotoAndStop(1);
}
(8)Ctrl+Enter组合键测试。单击“链接图片”按钮即可打开链接的图片“j1.jpg”,单击左下角的“返回”按钮即可回到主页面。
注意事项:
①链接的图片类型除了.jpg类型外,还可以是.bmp、.gif;
②要链接的外部图片必须和正在编辑的Flash文件放在同一目录下,否则链接出错。
3.5 超链接动画
(1)新建一图层,双击修改名为“链接动画”;
(2)在该层的第一帧制作一个“超链接动画”按钮,并拖放到场景中;
(3)选中该按钮,打开[动作-按钮]面板,并添加代码如下:
on(release){
LoadMovieNum(“1.swf”,this);
}
(4)Ctrl+Enter组合键测试。单击“链接动画”按钮,右键选择“允许阻止的内容”,出现“安全警告”提示窗口(如下图2所示),点击“是(Y)”,即可打开链接的动画“1.swf”,点击动画页上的“PLAY”即可播放该动画。
注意:要链接的外部动画必须和正在编辑的Flash文件放在同一目录下,否则链接出错。
4.结束语
Flash中超文本链接功能非常强大,内容比较丰富。本文主要介绍了超文本链接技术中常用的getURL函数的功能及用法,结合具体实例制作并实现了按钮超链接、邮件超链接、文本超链接、外部图片及动画的超链接。内容具体、步骤详尽,希望能给Flash使用者提供一定的学习帮助。
图2 动画超链接安全警告提示窗口
[1]超文本与超媒体[EB/OL].http://www3.gdin.edu.cn/jpkc/dmtjs/old/duomeiti/super.htm.
[2]王英芬.超文本/超媒体模式组织网络信息资源研究[J].农业图书情报学刊,2009(12):43 ~45.
[3]邱均平,黄晓斌.WWW网页的链接分析及其意义[J].中国图书馆学报,2002(6):44~47.
[4]周国栋.Flash与数据库的连接技术[J].湖南广播电视大学学报,2005(4):48~50.
[5]郑华安.超文本链接在Authorware课件中的应用[J].教育信息化,2004,5.
[6]余明华.用 Flash开发多媒体 CAI课件[J].大众科技,2005(5):63~64.