妙网科技 妙网科技 首页 妙网科技 电子杂志 妙网科技 如何制作iebook文字模板中滚动的文本框

如何制作iebook文字模板中滚动的文本框

所属栏目: 电子杂志 | 更新时间:2015-12-12 | 阅读:3354 次

下面讲一下如何制作滚动文本框,一个仿制IEBOOK的滚动文本框,我是使用ActionScript2.0编写的。其基本思路是在文本放一个遮罩层,当鼠标移动到上下箭头按钮时,文本作反向运动。

首先,新建一个新Flash文档。

第二步,插入一个空白的“影片剪辑元件”命名为“Box”以备后用。(当然你也可以有自己的命名,下面讲解中的命名也一样)

第三步,插入“影片剪辑元件”,命名为“txt”,然后在元件“txt”用“文本工具”画一个文本框,文本必须是动态文本,然后实例化为“txtson”坐标为(0,0),宽度根据实际需要调整,高度应设置尽量高,为今后有一些长文本留下空间,不过需要指出的是文本框的高度并不是可以设置无限大的,我在制作时发现文本框高度超过3000,遮罩就会出现问题。然后在文本框输入一段长一些的文字。

第四步,插入“影片剪辑元件”,命名为“BlackCover”,然后用“矩形工具”,画出一个任意大小的矩型,笔触为无色,填充色可以是除无色外的任意色。坐标为(0,0),这个元件一会将作为遮罩。

第五步,建立两个“按钮元件”,分命名为“UpArrow”,“DownArrow”。然后在“UpArrow”中画一个笔触为黑色,填充色为无的小框框,然后在用“多角星形工具”,分别画一两个尖角朝上的三角形,将三角形放到小框框中心。全选“UpArrow”的框框与三角形,将坐标设为(0,0),在全选的情况下将复制框框与三角形,将它们粘贴到“DownArrow”。在“DownArrow”将框框与三角形同时旋转180度,之后同样也将二者全选,设置坐标为(0,0)。(我将框框的长宽设为(13,13),三角形设为(10,8.7)).至此除“Box”,所有元件均以准备好了。

第六步,打开那个空白的元件“Box”。拖入元件“txt”,坐标(0,0),实例化为“Txt1”接着插入一个图层,命名为图层2,将元件“BlackCover” 拖入,坐标(0,0),实例化为“BlackCover1”,并使“BlackCover1”的宽与“Txt1”的宽相同,高度根据实际应用的情况设定。接着将图层2设为遮罩层。继续插入一个图层,命名为btn,将“UpArrow”、“DownArrow” 拖入。分别实例化为BtnUp1、BtnDown1位置可以任意,因为按钮位置将根据“BlackCover1”自动适应。插入最后一个图层,代码层,命名as。

第七步,编写代码。在as层的第一祯按[F9],编写动作,代码如下

if (Txt1.txtson.textHeight+5<=BlackCover1._height)

{

BtnDown1._visible=false

BtnUp1._visible=false

}

else

{

BtnDown1._x=BlackCover1._width-10

BtnDown1._y=BlackCover1._height+20

BtnUp1._x=BlackCover1._width-33

BtnUp1._y=BlackCover1._height+20

}

这段代码的意思是设置“BtnUp1”、“BtnDown1”的位置,并且如果当Txt1的文本高度低于BlackCover1时,(注意是文本的高度,而非文本框的高度)。按钮被隐藏,也就是文本没有遮罩高时,不需要滚动。

接着选中btn层的“BtnUp1”,[F9]进入编写代码,代码如下

on (rollOver) {

onEnterFrame = function ()//重复执行一个动作

{

if (Txt1._y<=0)

{

Txt1._y = Txt1._y+1;

}

else

{

delete onEnterFrame

}

};

}

on (rollOut) {

delete onEnterFrame;

}

这个代码意思是当鼠标移动到“BtnUp1”,让”Txt1”作反向运动,向下移动,因为遮罩“BlackCover1”是不动的,所以运行时,看起来,文本就好像向下移了。当然,这并不是无限移动的,当鼠标离开或文本框到末尾时就停止移动。下面“BtnDown1”的原理也一样,只不过移动方向正好相反。选择“BtnDown1”[F9]进入编写如下代码。

on (rollOver) {

onEnterFrame = function ()//重复执行一个动作

{

if (Txt1._y>BlackCover1._height-(Txt1.txtson.textHeight+5))

{

Txt1._y = Txt1._y-1;

}

else

{

delete onEnterFrame

}

};

//if (Txt1._y>BlackCover1._height-Txt1._height)

// {

// Txt1._y = Txt1._y-20;

// }

}

on (rollOut) {

delete onEnterFrame;

}

最后,返还到舞台,将box拖入舞台,测试影片,文字移动了。在今年的应用中,我们只要将“库”中的“box”复制到需要的flash文档的库中,然后根据排版需要,先调整“Txt1”的宽,“BlackCover1”的高,并且使“BlackCover1”的宽等于“Txt1”的宽就OK了。