`
hgfghww6
  • 浏览: 42116 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

超酷滚动公式实现自定义滚动条

阅读更多

此教程是webstudio的预计将在11月底出版的新书[1b]>[/1b]第八章最后一节中的内容,以此用作示范,使更多的flash网友了解这本书.webstudio专为此书开设了[1b]
[url=http://www.webstudio.com.cn/forum/forumdisplay.php?f=26]
在线问答
[/url]
[/1b]版块.同时也希望在此版块中倾听网友的建议和意见,以使我们可以做的更好.
Scrollbar即滚动条,对我们来说再熟悉不过了,从我们开始使用Windows操作系统那一天开始就已经知道滚动条了,它可以帮助我们在较小的区域内显示更多的内容,这也是它非常实用的主要原因。在我们创建Flash站点时,总会或多或少的用到它。下面将研究滚动条的应用。
[1b]1.文本滚动[/1b]
首先来看一个简单的文本滚动,最简单的滚动就是我们常见的上下箭头,它同样可以达到滚动的效果,如下图所示。

当然你可以任意对它的位置进行变换,它的应用是比较简单的,只是TextField.scroll方法的应用而已。
范例11
[1b]
[url=/Files/BeyondPic/2006-11/16/scroll_external_text.swf]
演示文件
[/url]
[/1b]

范例11源文件
booksource/第8章/scrollbar/scroll_external_text.fla
(1)重新创建好了一个FLA文档,将它存为scroll_external_text.fla。
(2)准备两个按钮,例如一个向上和一个向下的MovieClip,这里准备使用的是MovieClip,当然你可以使用按钮。将它们放在第一层上,摆好位置,并在属性面板上分别为其命名为down_btn和up_btn。
(3)选中场景中上的第1帧,按下F9键,打开ActionScript面板,在其中写入如下脚本。
[1b]代码:[/1b] 
//载入外部文本
var my_lv = new LoadVars();
my_lv.onLoad  = function(success){
    if(success){
        my_txt.text = this.mytext;
        my_txt.setTextFormat(my_fmt);
    }else{
        trace("error load the external files");
    }
}
my_lv.load("hello.txt");
//创建字体各式实例对象
var my_fmt = new TextFormat();
my_fmt.bullet = true;
my_fmt.bold = true;
my_fmt.color ="0x669933";
//创建动态文本并指定文本格式
this.createTextField("my_txt",this.getNextHighestDepth(),10,10,530,120);
my_txt.wordWrap = true;
my_txt.multiline = true;
my_txt.border = true;
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//滚动
//向上滚动
down_btn.onRelease = function(){
    my_txt.scroll--;
}
//向下滚动
up_btn.onRelease = function(){
    my_txt.scroll++;
}
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
前面的一大段代码都是介绍过的内容,最后一段是应用的滚动方式,如my_txt.scroll--和my_txt.scroll++,这两句中的scroll是TextField的滚动方法,至于++和--实际上相当于my_txt.scroll =my_txt.scroll+1和my_txt.scroll = my_txt.scroll-1。
(4)测试影片,点击按钮MovieClip,文本就可以上下滚动了。
(5)可能你还希望两个滚动按钮能够在被按下去不放时一直让内容不停地滚动,那么只要找一种方法让scroll不断地循环执行就可以了,首选当然是onEnterFrame。
只需要将滚动代码改写如下即可。
范例12
[1b]
[url=/Files/BeyondPic/2006-11/16/scroll_external001_text.swf]
演示文件
[/url]
[/1b]
范例12源文件
booksouce/第8章/scrollbar/ scroll_external001_text.fla
本文转自:http://www.5uflash.com/flashjiaocheng/Flashyingyongkaifa/396.html
分享到:
评论

相关推荐

    超酷纹理滚动条-js实现

    本篇文章将深入探讨如何使用JavaScript(JS)来实现一种“超酷纹理滚动条”的效果,让滚动条不仅实用,而且美观。 首先,我们需要了解JavaScript的基本语法和DOM操作。JavaScript是一种解释型的、动态类型的脚本...

    超酷带纹理网页滚动条效果

    在提供的"超酷带纹理网页滚动条效果.htm"文件中,可以预览和学习如何实现这种效果。这个HTML文件应该包含了相关的CSS和可能的JavaScript代码,展示了如何将上述知识点应用于实际项目中。通过查看和分析源代码,我们...

    纵向超酷滚动菜单超酷版

    【标题】:“纵向超酷滚动菜单超酷版”这一标题暗示了我们正在讨论的是一种用于网页设计的交互式菜单,这种菜单沿着垂直方向(纵向)滚动,并且具有吸引人的视觉效果,可以提升用户界面的酷炫程度。在网页设计中,...

    超酷带纹理网页滚动条效果.rar

    在“超酷带纹理网页滚动条效果”这个主题中,我们将深入探讨如何利用JavaScript(JS)实现独特且吸引人的滚动条特效,为网站增添视觉魅力。 一、滚动条的基本概念 滚动条是当网页内容超出可视区域时,提供一种浏览...

    滚动代码 滚轮可控制 滚动条可以用图片

    本文将详细探讨如何实现“滚动代码,滚轮可控制,滚动条可以用图片”的技术,以及如何创建超酷带纹理的网页滚动条效果。 首先,让我们了解一下滚动代码的工作原理。在HTML和CSS中,滚动条通常是自动产生的,但通过...

    基于Velocity.js的超酷滚动页面特效

    这款库尤其适合用于创建复杂的页面滚动特效,如在给定的“基于Velocity.js的超酷滚动页面特效”项目中所示。 该项目包含7种独特的滚动效果,每一种都能为用户带来丰富的视觉体验: 1. **缩放**:页面元素随着滚动...

    超酷横向滚动带倒影的照片展示代码.rar

    在这个案例中,"超酷横向滚动带倒影的照片展示代码"是一个利用JavaScript实现的创新性图片展示解决方案。这种效果常见于现代网站的设计中,为用户提供独特的视觉体验,提升网站的吸引力。 首先,我们要理解这个代码...

    超酷带纹理网页滚动条效果特效代码

    本资源提供了“超酷带纹理的网页滚动条效果特效代码”,旨在帮助开发者实现独特且吸引人的滚动条样式。 首先,我们需要了解HTML5和CSS3在创建自定义滚动条中的关键作用。HTML5提供了更多的结构元素,而CSS3则带来了...

    超酷带纹理网页滚动条效果.htm

    下拉,黑色背景,彩字,看着不错,转自:lanrentuku.com

    QQ 界面风格 自定义控件

    6. **自定义事件和属性**:为了实现QQ特有的功能,例如好友列表的拖放操作、聊天窗口的滚动条、消息发送反馈等,开发者需要定义和处理一系列自定义事件,并提供相应的属性供外部访问和设置。 7. **布局管理**:QQ...

    超酷横向滚动带倒影的照片展1

    标题中的“超酷横向滚动带倒影的照片展1”指的是一个网页设计或网站展示效果,这种效果常见于图片展示类的网页,用户可以水平滚动浏览图片,同时图片带有倒影,增强了视觉效果和互动性。这种设计技术通常涉及到HTML...

    超酷横向滚动带倒影的照片展

    【超酷横向滚动带倒影的照片展】是一种利用JavaScript库jQuery(简称JQ)实现的交互式网页设计技术。在网页设计中,这种效果能够使照片展示区域以水平滚动的方式呈现,同时配合倒影效果,增加视觉吸引力,提升用户...

    jQuery超酷滚动背景图片视觉差特效插件

    Parallax ImageScroll是一款效果非常炫酷的滚动背景图片视觉差特效jQuery插件。该背景图片视觉差插件使用css3 transform来制作动画效果,并在不支持CSS3属性的浏览器上提供回退方案。

    jQuery.dropdown.js插件实现超酷的自定义扇形排列下拉列表框动画特效源码.zip

    《jQuery.dropdown.js插件:构建超酷自定义扇形下拉列表框动画特效》 在网页设计中,下拉列表框是一种常见的交互元素,用于提供多个选项供用户选择。然而,传统的HTML `<select>` 元素往往样式单一,无法满足现代...

    超酷横向滚动带倒影的相册展示

    在IT行业中,创建一个“超酷横向滚动带倒影的相册展示”涉及到多项技术和设计概念,这通常是为了提供一种视觉上吸引人的用户体验。在这个项目中,我们可以关注以下几个关键知识点: 1. **响应式设计**:为了实现...

    5种超酷自定义鼠标样式特效

    这篇关于“5种超酷自定义鼠标样式特效”的内容,显然旨在介绍如何利用CSS和JavaScript技术来创新性地改变鼠标的视觉效果,使得网页交互更加吸引人。 首先,我们要了解CSS(Cascading Style Sheets)是一种样式表...

    仿MAC苹果系统跟随滚动条飘浮网页下方菜单

    仿MAC苹果系统跟随滚动条飘浮网页下方的菜单,超酷,美观大方。

    一组超酷的自定义网页表单元素(复选框单选框下拉列表)效果.zip

    本资源“一组超酷的自定义网页表单元素(复选框单选框下拉列表)效果.zip”提供了创新的表单元素设计,包含复选框、单选框以及下拉列表的定制样式,将传统的HTML元素进行了美化和功能增强。 首先,我们来详细了解这些...

    基于js的超酷横向滚动带倒影的照片展.rar

    【标题】中的“基于js的超酷横向滚动带倒影的照片展”是一个使用JavaScript实现的交互式图片展示项目,它具备动态的横向滚动效果,并且照片具有倒影效果,为用户带来独特的视觉体验。这个项目可能是一个网页应用,...

Global site tag (gtag.js) - Google Analytics