一组超酷的AS3音频频谱波形 (2009-4-23)
这是从一个老外的站上找到的,不过我现在都忘记那网址了。
写得很不错,不仅算法值得研究,而且整个架构以及OOP思想都很值学习。调用方法也都做好了,可以很方便地用在任何你想用到的地方。之前我的那个MP3播放器里用的就是其中的一个效果。
点击左键可切换效果。
这是从一个老外的站上找到的,不过我现在都忘记那网址了。
写得很不错,不仅算法值得研究,而且整个架构以及OOP思想都很值学习。调用方法也都做好了,可以很方便地用在任何你想用到的地方。之前我的那个MP3播放器里用的就是其中的一个效果。
点击左键可切换效果。
今天在天地会上看到有位朋友发了个模似波浪的效果,正好有点东西想用用这个,就下了下来。其实很多时候我们下的一些源码都是单独写的,效果是有了,可是要想用到自己的项目中的话一时半会还整不到一块来。不过,不要忘记了OOP的思想之一——封装,自己做了个简易的接口,用起来就方便啦。
用法很简单,在想要用的地方:
var wave:Wavef=new Wavef(600,200,600,1,3000);
//Wavef(stage_w,stage_h,num,mouse_diff_ratio,auto_interval)
your_obj.addChild(wave);
接上一篇,现在说说AS的写法了。在AS中主要要实现的功能就是对XML的读取以及表单数据的提交,只要实现了这两个功能,其余的表现手法什么的都可以自由发挥咯。
在这里我只把主要的帖出来说一下,稍后我会附上源码的。
先是读取XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | private function loadxml() { var Requesturl:URLRequest=new URLRequest("getinfo.asp?page="+page+"&"+Math.random()* 10);//路径可以是绝对也可以是相对,后面加随机数是解决数据刷新问题。 loader=new URLLoader(Requesturl); loader.addEventListener(Event.COMPLETE,xmlcomplete); } private function xmlcomplete(e:Event) { listxml=new XML(e.target.data); add_list(); listxml.@page>1 ? add_page() : 0;//如果页数大于1,显示分页 } private function add_list() {//list_block为一个元件,里面有分别命名为book_title,book_name,book_date的三个动态文本。 for (var i=0; i<listxml.item.length(); i++) { list_block=new list_mc; list_block.y=25* i; list_block.visible=false; list_block.book_title.text=listxml.item.@book_title[i].toString(); list_block.book_name.text=listxml.item.@book_name[i].toString(); list_block.book_date.text=listxml.item.@book_date[i].toString(); } } |
当然,在显示列表的时候可以加一些视觉效果,这个就可以自行发挥咯。
接下来是表单提交的部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | private function send_book(e:MouseEvent) { //在这里可以先对表单进行验证 var request:URLRequest=new URLRequest("sendinfo.asp"); var variables:URLVariables=new URLVariables(); variables.book_name=input_boxs.input_name.text; variables.book_qq=input_boxs.input_qq.text; variables.book_mail=input_boxs.input_mail.text; variables.book_title=input_boxs.input_title.text; variables.book_info=input_boxs.input_info.text; request.data=variables; var loader:URLLoader=new URLLoader(); loader.dataFormat=URLLoaderDataFormat.TEXT; loader.addEventListener(Event.COMPLETE,send_complete);//提交成功后运行send_complete loader.load(request); } } |
一个完整的留言版也会牵涉到很多东西,在这里附上源码,由于写得比较急,也没加什么注释,欢迎大家指正以及讨论。
有不少朋友问起flash留言版的问题,其实说白了flash跟数据库的交互并不是什么高深的技术,只要掌握了原理,便可一通百通。我很少写教程,也不太会写,我是属于那种会做但不太会说的人,但现在网络上相关的资料也不多,我也试着写一个吧。一个简易的AS3留言版。
大家应该都知道,flash与数据库交互的话要借助第三方语言,在这里我们需要的是一个生成XML格式的动态页。本例用的是ASP+ACCESS,因为本民工只对ASP比较熟罢了,熟悉PHP的朋友完全可以改成PHP+MYSQL的,因为AS3读的只是XML的格式,至于用何种语言来生成都没有关系。ACCESS我就不讲了,相信大家都会用,对照一下下面的字段名就好了。
先建配置文件
conn.asp
1 2 3 4 5 6 | <% on error resume next datapath = "date/book_data.mdb"//数据库的路径 set conn=Server.Createobject("adodb.connection") connstr = "Provider=Microsoft.Jet.OLEDB.4.0;"&"Data Source=" & Server.MapPath(datapath) conn.open connstr %> |
接下来是获取数据的动态页,也就是生成XML的页面
getinfo.asp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!--#include file="conn.asp"--> <% set rs=server.createobject("adodb.recordset") sql="select * from book order by book_id desc" rs.open sql,conn,1,1 rs.pagesize=8 i=1 mypage=request("page") if mypage="" then mypage=1 else mypage=cint(mypage) end if pages=rs.pagecount rs.absolutepage=mypage %> <?xml version="1.0" encoding="utf-8"?> <guestbook page="<%=pages%>"> <% do while not rs.eof%> <item book_name="<%=rs("book_name")%>" book_mail="<%=rs("book_mail")%>" book_qq="<%=rs("book_qq")%>" book_title="<%=rs("book_title")%>" book_time="<%=rs("book_time")%>" book_date="<%=rs("book_date")%>" ><![CDATA[<%=rs("book_info")%>]]></item> <% if i=rs.pagesize then exit do end if i=i+1 rs.movenext loop %></guestbook> |
在这里把分页功能也做了进来,也就是在AS3中通过加载getinfo.asp?page=XX来获取分页。而留言内容部分用CDATA,是为了能正常显示一些特殊字符。生成的XML格式如下
1 2 3 4 5 | <?xml version="1.0" encoding="utf-8"?> <guestbook> <item book_name="姓名" book_mail="16955732@qq.com" book_qq="16955732" book_title="标题名称" book_time="2009-1-13 下午 10:36:21" book_date="2009-1-13" ><![CDATA[留言内容]]></item> </guestbook> |
最后是把从flash里传递出来的表单参数写入数据库的页面
sendinfo.asp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!--#include file="conn.asp"--> <% Dim book_name,book_qq,book_mail,book_title,book_info book_name=request("book_name") book_qq=request("book_qq") book_mail=request("book_mail") book_title=request("book_title") book_info=request("book_info") set rs = server.createobject("adodb.recordset") sql = "select top 1 * from book" rs.open sql,conn,1,3 rs.addnew rs("book_name") = book_name rs("book_qq") = book_qq rs("book_mail") = book_mail rs("book_title") = book_title rs("book_info") = book_info rs.update rs.close:set rs = nothing %> |
现在准备工作都做好了,下一篇再讲解在AS3中的应用。
这个并非原创,在AS2时代有位高人写过一个很牛的水波效果,后来大家都用那个。前阵子弄个游戏想用用这个水波的效果,不过AS2的不能直接用,所以花了点时间翻译了一下,算法还是跟那位前辈一样的。另外再提一下,这个算法其实蛮耗资源的,如果图片尺寸比较大的话,会很卡,也是因此我的游戏最终没有用到这个效果。 阅读全文 »
说到深度管理,不由得想起了那万恶的AS2年代-_-! 至少本人觉得在AS2中的深度管理很是混乱,不仅有断层还会有冲突……总之麻烦多多。而在AS3中,一切都是这么的清晰与明朗,深度值断层不见了、有冲突的时候会自动调整,而我们只是记住以下几个语句的用法而已。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | numChildren : int //返回此对象的子项数目。 getChildAt(index:int):DisplayObject //返回位于指定索引处的子显示对象实例。 getChildIndex(child:DisplayObject):int //返回 DisplayObject 的 child 实例的索引位置。 setChildIndex(child:DisplayObject, index:int):void //更改现有子项在显示对象容器中的位置。 swapChildren(child1:DisplayObject, child2:DisplayObject):void //交换两个指定子对象的 Z 轴顺序(从前到后顺序)。 swapChildrenAt(index1:int, index2:int):void //在子级列表中两个指定的索引位置,交换子对象的 Z 轴顺序(前后顺序)。 removeChildAt(index:int):DisplayObject //从 DisplayObjectContainer 的子列表中指定的 index 位置删除子 DisplayObject。 |
那么接下来我们来看一个简单的小例子吧,这里我就不罗列代码了,只把主要的写一下,关键是思路跟思想嘛,源码附在后面。有四个圆,可以点击与拖动,实现每点击其中一个圆,就把它调到最上面来。
这个其实很简单,要调整到最上层的话,只要用setChildIndex把鼠标点击对象的深度值设为(容器.numChildren-1)就可以啦。setChildIndex常用有以下几种:
1 2 3 4 5 6 7 8 | 置顶: 容器.setChildIndex(对象A,容器.numChildren-1); 置底: 容器.setChildIndex(对象A,0); 插入对象B的前面: 容器.setChildIndex(对象A,容器.getChildIndex(对象B)); 插入对象B的后面: 容器.setChildIndex(对象A,容器.getChildIndex(对象B)-1); |
是不是太简单点了呢?那我们再加深一点点吧,我们把上例中的圆换成立方块,再点击拖动下看看……
在这里我们想要达到一种空间立体的效果的话,就要对这些方块进行深度的排序,也就是说要让我们视觉上看起来靠前的物体挡住后面的物体。解决方法应该是多种多样的,在这里本民工只说说自己的解决方案了。简单说来,物体的前后顺序可以通过Y轴坐标的大小来区分,Y轴坐标值大的深度值就越大,在拖动后用一个数据记录下每个对象以及该对象的Y值,再把该数组以Y值的大小排序,最后setChildIndex一遍就可以了。
1 2 3 4 5 6 7 8 9 10 11 12 | //以下代码是放在MOUSE_UP的事件里。 var obj_box:Array=new Array;//新建立数组。 for (var i=0; i<block_box.numChildren; i++) { var aa:Object={objs:block_box.getChildAt(i),depth_y:block_box.getChildAt(i).y}; obj_box.push(aa); //这里可以说是一个简单的JSON应用,把对象以及Y值添加到数组里。 } ***************************************************************************** for (i=0; i<block_box.numChildren; i++) { block_box.setChildIndex(obj_box.sortOn("depth_y",Array.NUMERIC)[i].objs,i); //重新排序后再指定索引位置。其中sortOn是按指定的属性来排序。 } |
最后再加个吸附功能吧,看看效果咯。
源码是临时写的,比较简单,都写在时间轴上咯。