APP下载

基于Flash的超文本链接技术设计及其实现

2013-05-29郑凤婷田素贞

中州大学学报 2013年1期
关键词:超文本图层鼠标

郑凤婷,田素贞

(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.

猜你喜欢

超文本图层鼠标
为《飞舞的空竹龙》加动感
基于HTML5静态网页设计
解密照片合成利器图层混合模式
基于新闻翻译试析翻译中的超文本成分
对超文本版《喧哗与骚动》的解析
思维的模拟外化:概念超文本建构
鼠标折叠笔
用Photoshop图层技术制作精美邮票
随心所欲制作逼真阴影效果
45岁的鼠标