收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 38936|回复: 40

[AS3] learning AS3.0 case by case(适合刚从AS2.0过渡到3.0的ASER)【棍棍节更新】

[复制链接]
发表于 2007-11-8 20:17:40 | 显示全部楼层 |阅读模式
首先声明:本人大菜鸟一个,刚接触AS3不久,许多理念还没来得及灌输,这些case都是从网上down的,但因为解说是英文的,不利我们学习,我就充当一个translater,顺便可以让自己巩固一下知识。

水平有限,错误难免,欢迎大虾小虾,大鸟小鸟指正。

下面进入正题:

案例1:熟悉新的事件机制和addChild的运用

说明:拖动小人到滑板上,然后拖动滑板,可以发现小人已经跟滑板粘在了一起。

演示http://www.live-my-life-with-yuyi.com/as3_cases/changing_parents/

代码


  1. boarder_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
  2. boarder_mc.addEventListener(MouseEvent.MOUSE_UP, drop);

  3. red_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
  4. red_mc.addEventListener(MouseEvent.MOUSE_UP, drop);

  5. blue_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
  6. blue_mc.addEventListener(MouseEvent.MOUSE_UP, drop);
复制代码


AS3采用了新的监听机制,而且注意到对每个mc的鼠标按下弹起都使用了相同的函数,这就需要在函数里判断事件的发生者,从而做出相应的处理。


  1. function drag(event:MouseEvent):void
  2. {
  3.         if(event.target.name == "boarder_mc")
  4.         {
  5.                 addChild(boarder_mc);
  6.                 event.target.startDrag(true);
  7.                 boarder_mc.x = mouseX;
  8.                 boarder_mc.y = mouseY;
  9.         }
  10.         else
  11.         {
  12.         event.target.startDrag();
  13.         }

  14. }
复制代码


通过event.target.name来取得事件发生的对象名,AS3里没有了root,addChild相当于把某个mc搬到了舞台上,其实是TimeLine0.addChild(mc),同时保证该mc是在舞台的最顶层(AS3里没有了深度管理)。
通过event.target来获取事件发生的对象

接着来看drop函数
  1. function drop(event:MouseEvent):void
  2. {
  3.         event.target.stopDrag();
  4.         if(boarder_mc.hitTestObject(red_mc))
  5.         {
  6.                 red_mc.addChild(boarder_mc);
  7.                 boarder_mc.x = 0;
  8.                 boarder_mc.y = 0;
  9.         }
  10.         else if(boarder_mc.hitTestObject(blue_mc))
  11.         {
  12.                 blue_mc.addChild(boarder_mc);
  13.                 boarder_mc.x = 0;
  14.                 boarder_mc.y = 0;
  15.         }
  16. }
复制代码


当鼠标弹起时,啥也不管,先停止拖动,如果小人和滑板有重合区域,则将小人放到滑板里,滑板就像一个container,boarder_mc成了red_mc的child,将boarder_mc的x坐标和y坐标清零是为了将小人放到滑板的正确位置。

如果小人已经成为了滑板的child,那么再次拖动滑板时,由于又执行了一次addChild(boarder_mc);所以滑板的父类又变成了舞台。

整个案例1的分析到此结束,涉及的知识点不多,主要是熟悉一下AS3的语法。


<我是分隔线>----------------------------------------------------------------------------------------------------</我是分隔线>


案例2:熟悉addChild和removeChild在不同的swf之间的运用,以及loader的用法

说明:点击picture会载入另一个swf,点击载入的swf上的一个按钮,该swf消失。

演示:http://www.live-my-life-with-yuyi.com/as3_cases/different_movies/

代码

swfA(也就是按钮所在的flash)

  1. var loader:Loader = new Loader();
  2. loader.load(new URLRequest("Popup.swf"));

  3. picture_btn.addEventListener(MouseEvent.CLICK, showPicture);

  4. function showPicture(event:MouseEvent):void
  5. {
  6.         addChild(loader);
  7. }
复制代码


AS3里用loader代替了loadMovie,load的时候不能直接添加路径名,需要通过URLRequest来载入。
整段代码都很简单,首先载入Popup.swf,然后给监听按钮的click事件定义一个showPicture函数,这个函数的功能很简单,通过addChild把刚刚载入的swf放到舞台上。

swfB(载入的flash->Popup.swf)

  1. close_btn.addEventListener(MouseEvent.CLICK, closeWindow);

  2. function closeWindow(event:MouseEvent):void
  3. {
  4.         this.parent.parent.removeChild(this.parent);
  5. }
复制代码

很简洁,监听close按钮的click事件,事件触发时调用closeWindow函数,这里用到了parent,简单分析一下,由于这个swf已经被载入到另一个swf里,所以this.parent应该指代的是loader,而this.parent.parent则指代的是TimeLine0,也就是舞台。所以这句话也就比较好理解了:从舞台上卸下载入该swf的loader。

案例2分析到此结束。


<我是分隔线>----------------------------------------------------------------------------------------------------</我是分隔线>

案例3:熟悉tween以及tweenEvent的运用

说明:点击标签载入特定的图片说明(其实是一个mc,只是坐标不同),同时还有渐隐渐现效果,没做loading,可能载入会有点慢。

演示:http://www.live-my-life-with-yuyi.com/as3_cases/dynamic_with_events/

代码

初始化,给一些变量赋值


  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.*;
  3. import fl.transitions.TweenEvent;

  4. var homeX:Number = -301;
  5. var homeY:Number = 110;

  6. var newsX:Number = -17;
  7. var newsY:Number = -777;

  8. var aboutX:Number = -1354;
  9. var aboutY:Number = -445;

  10. var xTween:Tween;
  11. var yTween:Tween;
  12. var inTween:Tween;
  13. var outTween:Tween;
复制代码


先是导入一些需要用到的类,然后定义几个坐标,这几个坐标都是一个大mc的不同位置。

然后是初始化tween类,并对tween类监听。


  1. xTween = new Tween(main_mc,"x",Strong.easeInOut,main_mc.x,homeX,2,true);
  2. yTween = new Tween(main_mc,"y",Strong.easeInOut,main_mc.y,homeY,2,true);

  3. inTween = new Tween(main_mc.home_mc,"alpha",None.easeNone,0,1,.5,true);
  4. outTween = new Tween(main_mc.home_mc,"alpha",None.easeNone,1,0,.5,true);

  5. xTween.addEventListener(TweenEvent.MOTION_FINISH,fadeIn);
  6. xTween.addEventListener(TweenEvent.MOTION_START,fadeOut);

  7. home_btn.addEventListener(MouseEvent.CLICK, navigate);
  8. news_btn.addEventListener(MouseEvent.CLICK, navigate);
  9. about_btn.addEventListener(MouseEvent.CLICK, navigate);
复制代码


实例化xTween,yTween后并不会马上就运行,如果在之后的代码发现了stop动作的话。这些参数跟AS2并没有多大差别。
xTween和yTween是实现mc的缓动效果,inTween和outTween是实现渐隐渐现效果的。
这里只监听xTween而没有监听yTween,因为这两个是同时进行的所以监听一个就行了。
最后是对3个按钮的click监听。

接下来就是最关键的上面提到的几个函数

  1. function navigate(event:MouseEvent):void
  2. {
  3.         if(event.target == home_btn)
  4.         {
  5.                 setTween(homeX,homeY,main_mc.home_mc);
  6.         }
  7.         else if(event.target == news_btn)
  8.         {
  9.                 setTween(newsX,newsY,main_mc.news_mc);
  10.         }
  11.         else
  12.         {
  13.                 setTween(aboutX,aboutY,main_mc.about_mc);
  14.         }
  15. }

  16. function setTween(tweenX:Number,tweenY:Number,tweenMC:MovieClip):void
  17. {
  18.         xTween.begin = main_mc.x;
  19.         yTween.begin = main_mc.y;
  20.         xTween.finish = tweenX;
  21.         yTween.finish = tweenY;
  22.         tweenMC.alpha = 0;
  23.         inTween.obj = tweenMC;
  24.         xTween.start();
  25.         yTween.start();
  26.        
  27. }

  28. function fadeIn(event:TweenEvent):void
  29. {
  30.         inTween.start();
  31.         outTween.obj = inTween.obj;
  32. }

  33. function fadeOut(event:TweenEvent):void
  34. {
  35.         outTween.start();
  36. }
复制代码


先来看看navigate函数,这是被3个按钮共同调用的函数,通过判断不同的target.name设置不同的setTween。
再来看看setTween,参数tweenX和tweenY是目标坐标,tweenMC是目标mc,通过设置begin,finish,obj参数来改变xTween和yTween的初始坐标,目标坐标,作用对象,最后调用start函数开始运动。

fadeIn函数的作用是使inTween开始,并且将inTween作用的对象赋予outTween,这样outTween被调用的时候就能作用在正确的mc上了。

[[i] 本帖最后由 lzyy 于 2007-11-11 21:20 编辑 ]

changing_parents_final.rar

16.86 KB, 下载次数: 490

案例1源文件

different_movies.rar

44.31 KB, 下载次数: 466

案例2源文件

dynamic_with_events.part1.rar

273.44 KB, 下载次数: 529

案例3源文件1

dynamic_with_events.part2.rar

177.66 KB, 下载次数: 510

案例3源文件2

评分

参与人数 1威望 +3 收起 理由
mirycat + 3 原创内容

查看全部评分

 楼主| 发表于 2007-11-8 20:21:42 | 显示全部楼层
占位待编
回复 支持 反对

使用道具 举报

发表于 2007-11-8 21:07:08 | 显示全部楼层
不错啊 谢谢LZ
回复 支持 反对

使用道具 举报

发表于 2007-11-8 21:58:55 | 显示全部楼层
案例1:熟悉新的事件机制和addChild的运用

说明:拖动小人到滑板上,然后拖动滑板,可以发现小人已经跟滑板粘在了一起。

演示:http://www.live-my-life-with-yuy ... g_Parents_Final.swf

奇怪了,这个案例在FF下有错误,小人拖不动。是怎么回事儿?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-11-8 22:07:28 | 显示全部楼层

回复 #4 blueid2 的帖子

不可能吧,我也是FF啊,没有问题啊,刷新一下试试
回复 支持 反对

使用道具 举报

发表于 2007-11-9 14:41:45 | 显示全部楼层
这个教程我也下了    听不懂  只能看代码了··
回复 支持 反对

使用道具 举报

发表于 2007-11-9 15:02:55 | 显示全部楼层
哈哈 有意思 ~ 一个很典型的显示列表层级应用
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-11-10 12:59:23 | 显示全部楼层
更新了个案例,小顶一下
回复 支持 反对

使用道具 举报

发表于 2007-11-10 15:04:43 | 显示全部楼层

回复 #5 lzyy 的帖子

还真是不错,前几天我的FF也不知道是怎么了 今天又没事儿了~~
回复 支持 反对

使用道具 举报

发表于 2007-11-11 16:29:23 | 显示全部楼层
中文资料够多了,学什么英文的
手册+殿堂之路这两样就够人学个一年半载了
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-11-11 21:27:05 | 显示全部楼层
手册+殿堂之路这两样就够人学个一年半载了

你是喜欢通过听故事去学讲故事,还是喜欢老师教你,故事应该这么讲:故事要有时间、地点、人物、事情......。
当然手册里也有不少example,但是对于倾向于快速人们的人来说,这样的case教学岂不是捷径?

中文资料够多了,学什么英文的

确实中文资料是挺多的,但是没有找到合适我的(可能是我比较懒,没仔细找),正好看到有英文版的,正合我意,于是就消化了一下,拿了出来。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-11-17 04:42:21 | 显示全部楼层
很遗憾,我不能再编辑这个帖子了,所以从标题也看不出更新时间了,但教程还是会继续,直到translte完毕。

我不太明白蓝色一个小时后不让编辑的原因,但肯定有他的道理,不多对于我来说确实挺别扭的。

牢骚发完了,继续

__________________________________________________________________________________________________


案例4:熟悉xml的运用

说明:一个简单的相册,先载入xml,然后载入xml列表里的images缩略图,点击缩略图出现大图以及大图的说明。这个案例较前面几个复杂了一些,不过如果熟悉了AS3的语法,还是比较容易理解的。

演示:http://www.live-my-life-with-yuyi.com/as3_cases/gallery_tween/

代码:


  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.*;

  3. var imageText:TextField = new TextField();
  4. var fadeTween:Tween;
  5. var imageLoader:Loader;
  6. var xml:XML;
  7. var xmlList:XMLList;
  8. var xmlLoader:URLLoader = new URLLoader();
  9. xmlLoader.load(new URLRequest("data/images.xml"));

  10. xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
复制代码

跟之前的一样,先导入几个包,这是为了实现图片的渐入渐出效果。然后是定义几个变量,这里xmlList可能比较陌生,这个变量的作用主要是获得xml的child列表,下面具体运用的时候,它的作用就一目了然了。
通过URLLoader载入xml,然后监听xml,一旦载入完成,就触发xmlLoaded函数。


  1. function xmlLoaded(event:Event):void
  2. {
  3.         xml = XML(event.target.data);
  4.         xmlList = xml.children();
  5.         for(var i:int = 0; i < xmlList.length(); i++)
  6.         {
  7.                 imageLoader = new Loader();
  8.                 imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
  9.                 imageLoader.x = 25;
  10.                 imageLoader.y = i * 150 + 25;
  11.                 imageLoader.name = xmlList[i].attribute("source");
  12.                 addChild(imageLoader);
  13.                 imageLoader.addEventListener(MouseEvent.CLICK, showPicture);
  14.         }
  15.                                                                                
  16. }
复制代码

这里有一些地方需要注意,比如第一句
  1. xml = XML(event.target.data);
复制代码

如果直接
  1. xml = event.target.data
复制代码

会报错,因为两个变量的类型不一样。

这里可以看到xmlList,它是取得xml的children,对于使用xml非常方便。
然后实例化imageLoader,并载入xmlList里定义的缩略图,注意这里的写法。
调整一下坐标,并给imageLoader添加了一个name属性,这个属性的值就是xml文件里的图片地址,这有利于下面的showPicture函数。
然后将缩略图放到舞台上,并监听它的鼠标点击事件。


  1. function showPicture(event:MouseEvent):void
  2. {
  3.         imageLoader = new Loader();
  4.         imageLoader.load(new URLRequest(event.target.name));
  5.         imageLoader.x = 200;
  6.         imageLoader.y = 25;
  7.         addChild(imageLoader);
  8.         imageText.x = imageLoader.x;
  9.         imageText.y = 351;
  10.         for(var j:int = 0; j < xmlList.length(); j++)
  11.         {
  12.                 if(xmlList[j].attribute("source") == event.target.name)
  13.                 {
  14.                         imageText.text = xmlList[j];
  15.                 }
  16.         }
  17.         fadeTween = new Tween(imageLoader,"alpha",None.easeNone,0,1,1,true);
  18. }
  19. imageText.autoSize = TextFieldAutoSize.LEFT;
  20. addChild(imageText);
复制代码


这个点击后显示大图的函数,由于前面已经给name属性添加了图片地址,所以这里直接拿来用就可以了。
大图载入后分配一下坐标,添加到舞台上,接下来就该显示图片的说明了。
这里的做法是循环xmlList,然后比较xml里source是否与这里的name相等,是的话,将该xml的值赋予imageText,不过显然有更简单的做法,就是在上面的xmlLoaded函数中为imageLoader添加一个text属性,然后在showPicture里直接拿来用就可以了。
然后给图片来一个渐入效果,这个之前已经讲过了。
最后两行是定义imageText的对齐方式,这里是左对齐,然后放到舞台上。

整个案例到此结束。

gallery_tween.rar

78.71 KB, 下载次数: 453

案例4源文件

回复 支持 反对

使用道具 举报

发表于 2007-11-18 20:53:03 | 显示全部楼层
支持。理论反映在实际的案例中要比纯粹的理论跟容易理解。
感谢lzyy的无私。
我们需要这些鲜活的实例。
回复 支持 反对

使用道具 举报

发表于 2007-11-20 09:20:21 | 显示全部楼层
非常感谢楼主的教程,学习
回复 支持 反对

使用道具 举报

发表于 2007-11-20 18:18:33 | 显示全部楼层
顶一个
回复 支持 反对

使用道具 举报

发表于 2007-11-20 20:01:34 | 显示全部楼层
LZ真是会找资料。赞一个。希望能如LZ所言,持续更新!等待新贴。

[[i] 本帖最后由 yalewu 于 2007-11-20 20:03 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-11-24 12:22:47 | 显示全部楼层
案例5:熟悉AS3的package,以及多个package之间的相互通信

说明:一个很简单的demo,有4个按钮,当鼠标划过和移开时会呈现出不同的状态,单击后变成disabled,再点击其他的按钮时,之前disabled的按钮恢复,被点击的按钮失效。

演示http://www.live-my-life-with-yuyi.com/as3_cases/communicating/

准备工作:打开源文件communicating_final.fla,点击属性里的发布设置,点击Actionscript3旁边的设置,在最下面的classpath里,引入classes的文件夹的路径,然后点击确定,前期工作就准备完了。

代码

源文件里的代码很简单:

  1. import todd.interactive.ButtonSet;
  2. var buttons:ButtonSet = new ButtonSet();
  3. buttons.addButtons([one_mc,two_mc,three_mc,four_mc]);
  4. addChild(buttons);
复制代码


导入ButtonSet类,实例化,然后调用里面的一个方法,最后将它放到舞台上。

classes文件夹下面的todd->interactive文件夹里有两个as文件,其中一个就是刚刚调用的ButtonSet,来看看ButtonSet的源码


  1. package todd.interactive
  2. {
  3.         //其实只需载入display和events就可以了,不过多载入几个并不影响文件大小和效率
  4.         import flash.display.*;
  5.         import flash.events.*;
  6.         import flash.filters.*;
  7.         import flash.net.*;
  8.         import flash.geom.*;
  9.         import flash.ui.*;
  10.         import flash.utils.*;
  11.         import fl.transitions.*;
  12.         import fl.transitions.easing.*;
  13.        
  14.         public class ButtonSet extends MovieClip
  15.         {
  16.                 public var buttons:Array;
  17.                
  18.                 public function ButtonSet()
  19.                 {
  20.                        
  21.                 }
  22.                
  23.                 public function addButtons(buttonSet:Array):void
  24.                 {
  25.                         buttons = buttonSet;
  26.                         for(var i:int = 0; i < buttons.length; i++)
  27.                         {
  28.                                 addChild(buttons[i]);
  29.                         }
  30.                 }
  31.         }
  32. }
复制代码

一个类应该被放在一个package里面,就像钱应该被放到钱包里一样。package后面定义的是该类的路径。然后一系列常用的类。
定义了一个全局变量buttons,在变量前面加一个public就可以了。这样就能在整个类中被访问到。
类名应该和文件名一样(区分大小写),然后定义一个同名函数,这个函数会在类被初始化时调用,就像php4的类一样。这里只是搭了个架子,没有具体内容。
然后定义了一个函数addButtons,它的作用就是将一些mc或者sprites放到自己的container里(addChild)。

还有一个类:DisablingButton,也是位于todd->interactive文件夹下,这也是这个案例的核心。对了,之前已经将RectButton的linkage里的baseClass设置为todd.interactive.DisablingButton。

代码稍微有点长,且听我细细道来

  1. package todd.interactive{
  2.         import flash.display.*;
  3.         import flash.events.*;
  4.         import todd.interactive.ButtonSet;

  5.         public class DisablingButton extends MovieClip {
  6.                 var labels:Array;
  7.                 var thisParent:*;
  8.                 var thisIndex:int;

  9.                 public function DisablingButton() {
  10.                         labels = this.currentLabels;
  11.                         this.addEventListener(MouseEvent.CLICK, disableButton);
  12.                         this.addEventListener(MouseEvent.ROLL_OVER, over);
  13.                         this.addEventListener(MouseEvent.ROLL_OUT, out);
  14.                         this.addEventListener(Event.ADDED,setParent);
  15.                 }
  16.                 function disableButton(event:MouseEvent):void {
  17.                         for (var i:int = 0; i < labels.length; i++) {
  18.                                 if (labels[i].name == "disable") {
  19.                                         this.gotoAndPlay("disable");
  20.                                 }
  21.                         }
  22.                         this.removeEventListener(MouseEvent.CLICK, disableButton);
  23.                         this.removeEventListener(MouseEvent.ROLL_OVER, over);
  24.                         this.removeEventListener(MouseEvent.ROLL_OUT, out);
  25.                         enableOthers();
  26.                 }
  27.                 function enableButton():void {
  28.                         this.addEventListener(MouseEvent.CLICK, disableButton);
  29.                         this.addEventListener(MouseEvent.ROLL_OVER, over);
  30.                         this.addEventListener(MouseEvent.ROLL_OUT, out);
  31.                         this.gotoAndStop(1);
  32.                 }
  33.                 function over(event:MouseEvent):void {
  34.                         for (var j:int = 0; j < labels.length; j++) {
  35.                                 if (labels[j].name == "over") {
  36.                                         this.gotoAndPlay("over");
  37.                                 }
  38.                         }
  39.                 }
  40.                 function out(event:MouseEvent):void {
  41.                         for (var k:int = 0; k < labels.length; k++) {
  42.                                 if (labels[k].name == "out") {
  43.                                         this.gotoAndPlay("out");
  44.                                 }
  45.                         }
  46.                 }
  47.                 function setParent(event:Event):void {
  48.                         if (this.parent is ButtonSet) {
  49.                                 thisParent=this.parent;
  50.                                 for (var w:int=0; w < thisParent.buttons.length; w++) {
  51.                                         if (this == thisParent.buttons[w]) {
  52.                                                 thisIndex=w;

  53.                                         }
  54.                                 }
  55.                         }
  56.                 }
  57.                 function enableOthers():void {
  58.                         for (var z:int=0; z < thisParent.buttons.length; z++) {
  59.                                 if (z != thisIndex) {
  60.                                         thisParent.buttons[z].enableButton();
  61.                                 }
  62.                         }
  63.                 }
  64.         }
  65. }
复制代码

载入了两个常用类后,又载入了刚刚定义的ButtonSet类,这样我们就能使用ButtonSet的一些方法了。
注意:这个类必须继承Movieclip类,因为该类的对象是一个mc。
然后定义了一些全局变量(默认均为public)。
创建析构函数DisablingButton,labels = this.currentLabels; 这句话的意思是取得当前mc的label属性,以array的形式返回,包含了label.frame,label.name等等的属性。
然后监听自己的鼠标点击、移入、移出事件。
this.addEventListener(Event.ADDED,setParent);这句话的意思是当自己被添加进一个容器时调用setParent函数。
disableButton这个函数作用是,将当前mc的状态变成disabled,然后取消监听事件,同时激活其他的按钮。
enableButton函数的作用就是激活自己的监听事件,并初始化自己的状态。
over和out函数很简单,就是设置自己当前的状态。
setParent函数的最终目的是捕获点击事件发生在哪个mc上(gotoAndPlay方法将触发EVENT.ADDED,所以over和out函数都将触发setParent函数,这也是一个待改进的地方)。
enableOthers函数顾名思义,激活其他的按钮。因为setParent已经记住了,最后的点击事件发生在哪个mc上,所以只要遍历一下buttons,然后激活其他的mc就可以了。

案例分析完毕。

communicating.rar

9.32 KB, 下载次数: 399

案例5源文件

回复 支持 反对

使用道具 举报

发表于 2007-11-24 18:28:31 | 显示全部楼层
顶你呀,帮我学好多东西,我正发愁帮助看不懂,到百度一下,又回蓝色了,很羡慕你
有空多写点教程,我们好好跟你学呀
回复 支持 反对

使用道具 举报

发表于 2007-11-24 20:54:37 | 显示全部楼层
感谢大虾对小虾的帮助!
回复 支持 反对

使用道具 举报

发表于 2007-11-26 15:44:43 | 显示全部楼层
严重支持的说,希望楼主继续。。。。。。。。。。。
回复 支持 反对

使用道具 举报

发表于 2007-11-26 22:11:06 | 显示全部楼层
很喜欢lz的文章,希望加油..再整点更精彩的出来..
回复 支持 反对

使用道具 举报

发表于 2007-11-26 22:43:59 | 显示全部楼层
支持一下..好文章..
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-12-3 08:44:30 | 显示全部楼层
案例7:通过类来实现一个gallery

说明:一个比较简单的相册,通过类来实现。

演示http://www.live-my-life-with-yuyi.com/as3_cases/gallery_class/

准备工作:打开源文件class_final.fla,点击属性里的发布设置,点击Actionscript3旁边的设置,在最下面的classpath里,引入classes_final的文件夹的路径,然后点击确定,前期工作就准备完了。

代码
唯一的一个类文件:ImageGallery.as

  1. package interactive.gallery
  2. {
  3.         import flash.display.*;
  4.         import flash.events.*;
  5.         import fl.transitions.*;
  6.         import fl.transitions.easing.*;
  7.         import flash.filters.*;
  8.         import flash.net.*;

  9.         public class ImageGallery extends MovieClip
  10.         {
  11.                 var xml:XML;
  12.                 var xmlList:XMLList;
  13.                 var xmlLoader:URLLoader = new URLLoader();
  14.                 var container:MovieClip = new MovieClip();
  15.                 var imageLoader:Loader;
  16.                 var segments:Number;
  17.                 var currentSegment:int;
  18.                 var fullLoader:Loader = new Loader();
  19.                 var xmlPath:String;
  20.                 var thumbAtt:String;
  21.                 var fullAtt:String

  22.                 public function ImageGallery(path:String,thumb:String, full:String)
  23.                 {
  24.                         section1
  25.                 }


  26.                 function xmlLoaded(event:Event):void
  27.                 {
  28.                         section2
  29.                 }

  30.                 function changeThumb(event:MouseEvent):void
  31.                 {
  32.                         section3
  33.                 }

  34.                 function showPicture(event:MouseEvent):void
  35.                 {
  36.                         section4
  37.                 }

  38.         }
  39. }
复制代码


section1代码:

  1. xmlPath = path;
  2. thumbAtt = thumb;
  3. fullAtt = full;

  4. container.x = 25;
  5. container.y = 25;
  6. fullLoader.x = 200;
  7. fullLoader.y = 25;

  8. container.addEventListener(MouseEvent.MOUSE_MOVE, changeThumb);
  9. container.addEventListener(MouseEvent.CLICK, showPicture);

  10. xmlLoader.load(new URLRequest(xmlPath));

  11. xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

  12. container.filters = [new DropShadowFilter()];
  13. addChild(container);
  14. addChild(fullLoader);
复制代码

这段代码的功能就是在初始化类时,给一些以后会用到的变量赋值,因为这些变量是全局变量,所以后面的function都能用。
对container添加了监听事件,监听鼠标移动和点击。
然后载入xml文件,当xml载入完成后,执行xmlLoaded函数
然后对container应用了阴影滤镜,这个container就是将来我们要载入图片的mc。
然后将container和fullLaoder放到舞台上,fullLoader将来会载入大图。

section2

  1. xml = XML(event.target.data);
  2. xmlList = xml.children();
  3. for (var i:int = 0; i < xmlList.length(); i++)
  4. {
  5.         imageLoader = new Loader();
  6.         imageLoader.load(new URLRequest(xmlList[i].attribute(thumbAtt)));
  7.         container.addChild(imageLoader);

  8. }
复制代码

当xml载入完成后就会执行这个函数,先是获取xml对象列表,然后获取xml的子元素。这个在前面的教程提及过。
遍历子元素,然后通过Loader载入图片,并将imageLoader添加到container里。

section3

  1. segments = container.width / container.numChildren;
  2. currentSegment = Math.floor(container.mouseX / segments);
  3. if (currentSegment <= container.numChildren - 1)
  4. {
  5.         for (var j:int = 0; j < container.numChildren; j++)
  6.         {
  7.                 container.getChildAt(j).visible = false;
  8.         }
  9. container.getChildAt(currentSegment).visible = true;
  10. }
复制代码

这个函数是响应鼠标在缩略图上移动的事件,有一个算法在里面。
将mc的宽除以载入的缩略图的数量,得到一个平均数。
然后将当前鼠标的x位移除以刚刚得到的平均数就得到了当前鼠标所在的图片(听着有点别扭)
然后先将所有container里的child隐藏起来,再显示当前的图片。

section4

  1. fullLoader.unload();
  2. fullLoader.load(new URLRequest(xmlList[currentSegment].attribute(fullAtt)));
复制代码

这个是响应缩略图点击事件,当点击后先去掉先前载入的大图,然后再去载入缩略图对应的大图。
其实也不难,不是吗?

再拉看一下完整的代码

  1. package interactive.gallery
  2. {
  3.         import flash.display.*;
  4.         import flash.events.*;
  5.         import fl.transitions.*;
  6.         import fl.transitions.easing.*;
  7.         import flash.filters.*;
  8.         import flash.net.*;

  9.         public class ImageGallery extends MovieClip
  10.         {
  11.                 var xml:XML;
  12.                 var xmlList:XMLList;
  13.                 var xmlLoader:URLLoader = new URLLoader();
  14.                 var container:MovieClip = new MovieClip();
  15.                 var imageLoader:Loader;
  16.                 var segments:Number;
  17.                 var currentSegment:int;
  18.                 var fullLoader:Loader = new Loader();
  19.                 var xmlPath:String;
  20.                 var thumbAtt:String;
  21.                 var fullAtt:String

  22.                 public function ImageGallery(path:String,thumb:String, full:String)
  23.                 {
  24.                         xmlPath = path;
  25.                         thumbAtt = thumb;
  26.                         fullAtt = full;

  27.                         container.x = 25;
  28.                         container.y = 25;
  29.                         fullLoader.x = 200;
  30.                         fullLoader.y = 25;

  31.                         container.addEventListener(MouseEvent.MOUSE_MOVE, changeThumb);
  32.                         container.addEventListener(MouseEvent.CLICK, showPicture);

  33.                         xmlLoader.load(new URLRequest(xmlPath));

  34.                         xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

  35.                         container.filters = [new DropShadowFilter()];
  36.                         addChild(container);
  37.                         addChild(fullLoader);
  38.                 }


  39.                 function xmlLoaded(event:Event):void
  40.                 {
  41.                         xml = XML(event.target.data);
  42.                         xmlList = xml.children();
  43.                         for (var i:int = 0; i < xmlList.length(); i++)
  44.                         {
  45.                                 imageLoader = new Loader();
  46.                                 imageLoader.load(new URLRequest(xmlList[i].attribute(thumbAtt)));
  47.                                 container.addChild(imageLoader);

  48.                         }
  49.                 }

  50.                 function changeThumb(event:MouseEvent):void
  51.                 {
  52.                         segments = container.width / container.numChildren;
  53.                         currentSegment = Math.floor(container.mouseX / segments);
  54.                         if (currentSegment <= container.numChildren - 1)
  55.                         {
  56.                                 for (var j:int = 0; j < container.numChildren; j++)
  57.                                 {
  58.                                         container.getChildAt(j).visible = false;
  59.                                 }
  60.                                 container.getChildAt(currentSegment).visible = true;
  61.                         }
  62.                 }

  63.                 function showPicture(event:MouseEvent):void
  64.                 {
  65.                         fullLoader.unload();
  66.                         fullLoader.load(new URLRequest(xmlList[currentSegment].attribute(fullAtt)));
  67.                 }

  68.         }
  69. }
复制代码


类说完了,接下来就来看看fla里面都是怎么写的。
这个就简单多了

  1. import interactive.gallery.ImageGallery;
  2. var gallery:ImageGallery = new ImageGallery("data/images.xml","thumb","full");
  3. addChild(gallery);
复制代码

我不说了,聪明的你一看就明白了。

案例7分析到此结束。

源文件下载: gallery_class.rar (103.78 KB, 下载次数: 425)
回复 支持 反对

使用道具 举报

发表于 2007-12-4 22:02:20 | 显示全部楼层
顶到你不发贴为止.
回复 支持 反对

使用道具 举报

发表于 2007-12-6 14:53:59 | 显示全部楼层
17楼的例子是错误的 会报错 多打了个'}'

[[i] 本帖最后由 jevin 于 2007-12-6 14:56 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-12-7 10:30:45 | 显示全部楼层
首先说下,楼主辛苦了!我觉的是个不错的帖子。对于我们这些习惯了MC在时间轴上运动的人来说,你的实例反而让我更加容易的接受AS3带给我的新感觉,非常感谢楼主的帖子,希望楼主可以继续。
回复 支持 反对

使用道具 举报

发表于 2007-12-15 21:48:29 | 显示全部楼层

案例五为什么一直有错误呢

1087: Syntax error: extra characters found after end of program.
错误提示如上?
怎么修改呢
回复 支持 反对

使用道具 举报

发表于 2007-12-15 21:49:31 | 显示全部楼层

案例五还有个问题想请教一下楼主

gotoAndPlay方法将触发EVENT.ADDED
这是为什么呢
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-12-17 08:41:04 | 显示全部楼层
@nicekids
谢谢你提出问题,把65行的大括号去了就行了。jevin 已经在之前说过了。

关于gotoAndPlay方法将触发EVENT.ADDED,这个我也是在测试的时候发现的,至于为什么,我也不太清楚

[[i] 本帖最后由 lzyy 于 2007-12-17 08:43 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2008-1-15 02:44:53 | 显示全部楼层
楼主,你的解释真的很形象。而且循序渐进,看起来不费力。比起一些书,刚刚开始基础的让人想睡觉,然后突然一翻页,又讲得是云里雾里,又有一大堆新的东西不解释,或者说“参考XX章”舒服多了!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 京ICP备05002321号  

GMT+8, 2017-5-28 11:20 , Processed in 0.217521 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表