用滑块控制文字移动

建议先把原文件下载下来,打开以便对照下面的讲解
  1.我们要用一个按纽来拖动文字,那么就要有一个放文字的mc(mc是指影片剪辑),在场景中写一段文字,选种文字,按F8把他转变成mc,mc的名称为:宣传口号,同时把他的实例名称设为:wby。
  2.新建一个mc,取名为:主场景的mc,其实例名称设为:any。那么我们在这个mc里主要放些什么呢???
  别急,我们来放一个空的mc和一个按纽,(空的mc???没听说过吧??呵呵,等一下你就知道他的作用了。)按Ctrl+F8键,新建一个mc,取名为:空的mc,不用为它取实例名称。
  既然是空的mc,那么它是没有任何图形和文字的,但是注意它还是有内容的,不然我们要它干吗??它的内容就是——————代码,别怕,我一定会给你讲清楚的,但是我们还是先讲怎么做,好吗??
  在这个空的mc里面,我们共放两个空白关键桢(即它的第一第二桢都是空白关键桢),在第一桢上我们加入下列代码:

tellTarget(_root.any){
setProperty(wbh, _y, wbyy - (_y - ans) / anh * (getProperty(wbh, _height) / 1.300000));
}

  我翻译一下:告诉在场景中的“主场景的mc”(实例名称设为:any的那个)设置一个叫做wbh的对象的纵坐标的属性,后面wbyy - (_y - ans) / anh * (getProperty(wbh, _height) / 1.300000)是这个叫做wbh的对象的纵坐标的值。(参见金闪客论坛http://goldflash.lpscn.com的见首页 >> >> 网页技术区 >> 技术交流区 [求助]代码不懂)

  我们在第二桢上我们加入下列代码:

gotoAndPlay(1);

  好了这个空的mc搞定了。

  回到影片剪辑——主场景的mc中来,(注意不是回到主场景)
这个空的mc我们不管它,下面做一个按纽取名为:按纽,不用为它设置实例名称。在按纽上加入以下代码:

on (press)
{
startDrag("", false, _x, ans, _x, anw);
}

on (release, releaseOutside)
{
stopDrag();
}

  拖动命令的格式可以写成
startDrag(target,[lock ,left , top , right, bottom])
或target.startDrag([lock ,left , top , right, bottom])
其中参数
target 是指拖动的影片剪辑的目标路径。
lock 是一个逻辑值,指定可拖动影片剪辑是锁定到鼠标位置中央 (true),还是锁定到用户首次单击该影片剪辑的位置上 (false)。此参数是可选的。
left、top、right、bottom 相对于影片剪辑父级坐标的值,这些值指定该影片剪辑的约束矩形。这些参数也是可选的。

  我翻译一下:当鼠标按下时,开始拖动这个(""是指这个东东,既按纽)false表示可拖动影片剪辑锁定到用户首次单击该影片剪辑的位置上。呵呵,有点不好懂是吧??我是这样理解的:就是每次打开这个文件该按纽的位置是都是一样的,不会因为你这次拖动了它,下次打开这个文件就跑到拖动后的位置去了。
  拖动按纽是有一个范围限制的,看看有两个 _x,表明它的横坐标已经限死,只能是按纽的当前横坐标,也就是说,这个按纽只能上下移动了。
  当鼠标放下,停止拖动。

  下面我们发现有一些怪怪的值,比如 ans, anw,wbh, wbyy 等,好象我们还没有给他们定义,是吧?
  
  接着我们来定义这些值,是在什么地方定义这些值呢,在影片剪辑——主场景的mc中我们新建一层,在这一层的空白关键桢上放代码来定义这些值,代码如下:

anh = 313;//用来规定鼠标上下拖动按纽的长度(长度值自己定)
ans = _y;//将此时的鼠标所在位置的纵坐标付值给变量ans,即按纽拖动前的纵坐标
anw = Number(ans) + Number(anh);//仔细想想,一定不难猜到这是鼠标可以拖动的底限
wbh = _root.wby;
wbyy = getProperty(wbh, _y);

  这最后两句
  wbh = _root.wby;是将主场景中的wby,也就是文字mc定义给变量wbh
  因为我们的文字是可以动的,你可以将它理解为把场景中的文字mc,那个不会动的文字mc放到影片剪辑——主场景的mc中来,并且顺便给了它个变量名:wbh
  呵呵,现在你知道

setProperty(wbh, _y, wbyy - (_y - ans) / anh * (getProperty(wbh, _height) / 1.300000));

  中的wbh是谁了吧??

  那么wbyy = getProperty(wbh, _y);意思就是将随时获取到的wbh的纵坐标的值付值给变量wbyy;
  现在你知道为什么文字会动了吧??
   
  最后把这个影片剪辑——主场景的mc拖到场景中就ok了! 

时间: 2024-11-03 21:06:33

用滑块控制文字移动的相关文章

javascript实现控制文字大中小显示

  javascript实现控制文字大中小显示           网页上可以自由改变字体大小是个非常有助于用户体验的小功能,现在许多网站上都有此功能,今天我们来简单实现下. 部分网站内容页通常会看到有控制文字分别以 大,中,小 三种方式显示,下面就把这个小功能做一下记录,对提高网站用户体验度还是有一些帮助的哦! ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <html> <head> <meta http-equiv=&

CSS控制文字溢出时的自动隐藏方法

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

js控制文字大中小显示代码

js控制文字大中小显示  代码如下 复制代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js控制文字大中小显示</title> </head> <body> <script language="javascript"&g

javascript实现控制文字大中小显示_javascript技巧

部分网站内容页通常会看到有控制文字分别以 大,中,小 三种方式显示,下面就把这个小功能做一下记录,对提高网站用户体验度还是有一些帮助的哦! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js控制文字大中小显示</title> </head> <body&g

jQuery实现控制文字内容溢出用省略号(…)表示的方法_jquery

本文实例讲述了jQuery实现控制文字内容溢出用省略号(-)表示的方法.分享给大家供大家参考,具体如下: jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(".text").each(function(){ var maxwidth=23; if($(this).text().length>maxwidth){ $(this).text($(this).text().substring(0,maxwidth)); $(this).html($(th

css控制文字长度:css 控制文字定位

以下内容为程序代码  <style>    p.double {line-height: 2}    p.right {text-align: right}    p.center {text-align: center}    p.justify {text-align: justify}    p.indent {text-indent: 1cm}    p.capitalize {text-transform: capitalize}    p.up {text-transform: u

CSS奇特技巧:控制文字竖排

css|技巧|控制 样式表的文字处理属性中有两个重要的属性:writing-mode和text-align.让我们先看看它们的用法: 1. writing-mode(设置对象书写方向) 语法:writing-mode : lr-tb.tb-rl 参数:lr-tb:从左向右,从上往下 tb-rl:从上往下,从右向左 示例:div { writing-mode: tb-rl; } 2. text-align(设置对象中文本的对齐方式) 语法:text-align : left.right.cente

CSS控制文字的显示与隐藏引出的BUG

css|控制|显示 这一段CSS代码相当简单,目的就是想用CSS来控制某段文字的显示与隐藏.起初我采用了下面的代码,令人不可思议的是,它们在我的IE6.0上居然没有任何反应,大家不信可以亲自试验一下. <style type="text/css">a {font-size:12px;text-decoration:none;height:50;}a:hover {text-decoration:none;}a span {font-size:12px;display:non

Word中灵活控制文字的方向

Word中的文字方向是可以灵活控制的.以前段时间有位朋友向我求助,要在Word中使文字如图1所示进行排版. 图1 其实,要想做到这样,只需使用Word中的"文字方向"功能即可.但直接在文档中右键单击,并选择弹出菜单上的"文字方向"命令,你会发现在"文字方向"对话框上有五种方向选择,但是只能选用其中三种,另外两种不能被选用. 这三种能选用的方向却做不出图1所示的排版.那我们怎么办呢?其实,在图形和文本框中的文字就可以应用所有的文字方向. 下面我就详