萌萌妈妈 发表于 2015-1-15 22:42:55

来谈谈:Flash互动电子舆图制造手册――进门实例

最新的零售版本为AdobeFlashProfessionalCC(2013年发布)。AdobeFlashProfessionalCC为创建数字动画、交互式Web站点、桌面应用程序以及手机应用程序开发提供了功能全面的创作和编辑环境。
 今朝网上出现出浩瀚电子舆图,这些电子舆图操纵便利,具有数据查询、间隔丈量乃至准确定位等传统舆图所不具有的壮大功效。
  现有的电子舆图多半用Java开辟的,功效壮大,操纵便利。对照典范就是Mapbar(mapbar.com)与Mapabc(mapabc.com)、灵图(lingtu.com)。
  别的,另有一部分是用Flash制造的电子舆图,好比网格深圳(wanggesz.com)、九江电子舆图(jjmap.cn)、江门(五邑)舆图(5emap.com)、衡阳电子舆图(hyemap.com)等。

  Java与Flash比拟具有分明的上风,是电子舆图手艺的支流偏向。不外利用Java舆图的客户端必需安装Java假造机,关于没有安装相干插件的电脑用户来讲,其实不能当即利用Java电子舆图。

  但关于非专业的喜好者来讲,Flash比Java更简单把握一些。出格关于绘制楼盘、小区或是小乡村的舆图,并没有太多太强的功效请求,利用Flash制造已充足了。
  关于Flash电子舆图来讲,几近一切的团体电脑都安装了FlashPlayer插件,只需翻开扫瞄器便可一般利用。因而关于非专业的喜好者来讲,不管利用或是进修制造Flash电子舆图更加实际一些。只需把握了必定FlashActionScript的基本常识,都能够经由过程进修制造出本人中意的互动电子舆图。
  
  本系列专题将为人人慢慢体系地先容利用MacromediaFlashProfessional制造Flash电子舆图的常识,以供人人交换进修。
  明天我们就从最复杂的电子舆图入手下手,我们以制造某区域的舆图为例慢慢由浅进深解说制造步骤。完效果果以下。

最复杂的Flash电子舆图
点击右边五个功效按钮能够失掉响应功效
测距时用鼠标在舆图中必要测距的出发点单击按住拖动到尽头松开便可
  1、断定舆图功效

  起首,我们必需断定这个电子提图必要完成的功效。一样平常说来,最经常使用的功效不过是对舆图的缩放、挪动、按地名查询和丈量间隔等。在这里我们只拔取对照复杂的“缩小”、“减少”、“挪动”、“复位”和“测距”。

  2、制造舆图的底图
  舆图的底图能够经由过程良多的图形图象处置软件来制造,固然也能够用Flash制造,在这里不做详解。
  翻开MacromediaFlashProfessional,导进做好的舆图图片作为底图。(本例中利用一个用FlashProfessional制造完成的底图。)
  三、制造功效按钮
  新建一个新的图层,定名为“按钮”,在该层顺次创立“缩小”、“减少”、“挪动”、“复位”和“测距”5个按钮。以下图所示。


创立基础功效按钮
  4、为按钮分派AS功效代码

  进进“举措面板”,为各个按钮配上以下ActionScript功效把持代码。
<P>  1、“缩小”的ActionScript代码以下:

  on(release){//当鼠标开释时实行以下举措
    map_mc._xscale*=1.2;//舆图的X轴坐标缩小20%
    map_mc._yscale*=1.2;//舆图的Y轴坐标缩小20%
  }
  注:个中的_xscalet和_yscale是断定从影片剪辑注册点入手下手使用的影片剪辑程度及垂直缩放比例(percentage)。默许注册点为(0,0)。同时调剂这两个属性的值能够到达改动舆图巨细的目标。
<P>  固然,我们还可使用以下ActionScript代码:

  on(release){//当鼠标开释时实行以下举措
    map_mc._width*=1.2;//舆图的宽度缩小20%
    map_mc._height*=1.2;//舆图的高度缩小20%
  }
  注:_width和_height影片剪辑的宽度和高度,单元为像素。
  2、“减少”按钮的ActionScript代码以下:


  on(release){//当鼠标开释时实行以下举措
    map_mc._xscale*=0.8;//舆图的X轴坐标减少20%
    map_mc._yscale*=0.8;//舆图的Y轴坐标减少20%
  }

  大概:


  on(release){//当鼠标开释时实行以下举措
    map_mc._width*=0.8;//舆图的宽度减少20%
    map_mc._height*=0.8;//舆图的高度减少20%
  }

  3、“挪动”的ActionScript代码以下:


 on(release){//当鼠标开释时实行以下举措
  move();//挪用move()函数
 }
 functionmove(){//界说move()函数
   map_mc.onMouseDown=function(){//当鼠标左键按下时
   startDrag(map_mc);//入手下手拖动舆图map_mc
   }
   map_mc.onMouseUp=function(){//当鼠标左键开释时
   stopDrag();//中断拖动舆图map_mc
   }
 }//停止move()函数的界说

  注:此地方挪用的全局函数startDrag可使影片剪辑在影片播放过程当中拖动。一次只能拖动一个影片剪辑。实行startDrag()操纵后,影片剪辑将坚持可拖动形态,直到用stopDrag()显式中断拖动为止,或直到对别的影片剪辑挪用了startDrag()举措为止。
  4、“复位”按钮的功效是将舆图恢复到文件开启时的初始形态,其ActionScript代码以下:


 on(release){//当鼠标开释时实行以下举措
  map_mc._xscale=100;//将舆图map_mc的X轴缩放比率复原至原始巨细
  map_mc._yscale=100;//将舆图map_mc的Y轴缩放比率复原至原始巨细
  map_mc._x=200;//将舆图map_mc的注册点X坐标复原至中央点
  map_mc._y=150;//将舆图map_mc的注册点Y坐标复原至中央点
 }

  注:缩放当地坐标体系将影响_x和_y属性设置,这些设置是以整像素界说的。
  5、“测距”按钮的功效是丈量舆图上某两点间的间隔,其ActionScript代码以下:


 on(release){//当鼠标开释时实行以下举措
  measure();//挪用measure()测距函数
 }
 functionmeasure(){//界说measure()函数
  this.createEmptyMovieClip("canvas_mc",this.getNextHighestDepth());
  //创立名为“canvas_mc”的影片剪辑
  varmouseListener:Object=newObject();//创建一个mouseListener侦听器工具
  mouseListener.onMouseDown=function(){//当鼠标左键按下时
  this.isDrawing=true;//入手下手画线
  this.orig_x=_xmouse;//纪录此时的鼠标指针的X坐标
  this.orig_y=_ymouse;//纪录此时的鼠标指针的Y坐标
  this.target_mc=canvas_mc.createEmptyMovieClip("",canvas_mc.getNextHighestDepth());
 }
  mouseListener.onMouseMove=function(){//当鼠标挪动时
  if(this.isDrawing){//当入手下手画线时
   this.target_mc.clear();//扫除上一次所画的线条
   this.target_mc.lineStyle(1,0xFF0000,100);//设定线条的式样
   this.target_mc.moveTo(this.orig_x,this.orig_y);//设定所画线条的出发点
   this.target_mc.lineTo(_xmouse,_ymouse);//设定所画线条的尽头
  }
  updateAfterEvent();
  }
  mouseListener.onMouseUp=function(){//当鼠标左键开释时
   line_width=_xmouse-this.orig_x;//画线尽头与原点X轴坐标的间隔
   line_height=_ymouse-this.orig_y;//画线尽头与原点Y轴坐标的间隔
   this.isDrawing=false;//中断画线
   varl:Number=Math.sqrt(Math.pow(line_width,2)+Math.pow(line_height,2))*2500/map_mc._xscale; //盘算出线条的长度,并换算成实践长度
  line_mc.createTextField("length"+nextDepth+"_txt",canvas_mc.getNextHighestDepth(),(this.orig_x+_xmouse)/2-10,this.orig_y+_ymouse)/2-20,1,1);//创立文本框,以显现所丈量的长度了局
  line_mc.text=Math.round(l);//显现丈量了局
  }
 };
  Mouse.addListener(mouseListener);
}

  注:createEmptyMovieClip办法是创立一个空影片剪辑作为现有影片剪辑的子级;
  Math.sqrt办法是盘算并前往指定命字的平方根。
  Math.round办法是将参数的值向上或向下舍进为最靠近的整数并前往该值。
  Math.pow(x:Number,y:Number)办法是盘算并前往x的y次幂。
  经由过程以上3种办法,使用三角形的勾股定理换算出丈量长度。
  5、标注地名
  再加上地名标注就组成了一个最基础的电子舆图框架,效果以下。


最复杂的Flash电子舆图
点击右边五个功效按钮能够失掉响应功效
测距时用鼠标在舆图中必要测距的出发点单击按住拖动到尽头松开便可
  假如只是一个小区或是小乡村的舆图,好比九江电子舆图,间接在新建图层上注标地名便可,但假如是要制造相似网格深圳、中国电子舆图网等年夜型乡村的舆图,其标注内容太多,并且必要常常更新,就不合适在Flash内标注,而要挪用内部数据库来完成。

  下一讲中我们将先容怎样经由过程加载内部XML文件完成海量标注及背景办理的办法。

Flash动画制作软件是一款可以帮助设计者制作和设计动画Flash介绍、Flash标识、Flash广告、Flash弹出菜单以及任何其它Flash动画的Flash文本效果工具。

若相依 发表于 2015-1-17 18:27:07

flash的优缺点可以如何运用呢?

飘灵儿 发表于 2015-1-26 21:32:00

缺点方面~有些技术不能实现,不过FLASH技术在发展在进步,相信在以后FLASH可以取代,大部分的视频编辑软件,视频制作软件。

小妖女 发表于 2015-2-5 02:57:21

富媒体广告的概念:富媒体 Rich Media,是由英文翻译而来,从字面上很难理解Rich Media到底是什么。

变相怪杰 发表于 2015-2-11 03:43:57

用户在观看广告的时候,无法通过正常点击鼠标来查看广告的尺寸、字节数、所链接的URL广告本身信息。

兰色精灵 发表于 2015-3-1 21:09:14

随着动画的日益发展壮大,动画片在世界范围影响里越来越大,广告、网页、电影各个方面都应用到了动画。

再现理想 发表于 2015-3-11 02:04:29

单纯的做动画而言,flash动画与传统动画有很多差别,这里会为你介绍什么是flash与flash与传统动画相比具有的优点和缺点,而进一步了解flash动画

乐观 发表于 2015-3-17 19:12:07

流技术让用户在下载的同时看到动画(与全部下载后再观看相反)。但是这也不是什么新技术 - Web一出现就有这种技术了。

金色的骷髅 发表于 2015-3-24 23:30:19

流技术让用户在下载的同时看到动画(与全部下载后再观看相反)。但是这也不是什么新技术 - Web一出现就有这种技术了。
页: [1]
查看完整版本: 来谈谈:Flash互动电子舆图制造手册――进门实例