纳金网

标题: [as3基础应用]AS3模拟iPhone/iPad图片抽出效果 [打印本页]

作者: . 时间: 2013-3-19 17:30
标题: [as3基础应用]AS3模拟iPhone/iPad图片抽出效果
http://boycy.webs.com/iphoneTween.swf 动画地址：http://boycy.webs.com/iphoneTween.swf
源文件地址：http://boycy.webs.com/iphoneTween.rar
昨天同学生日，去K歌。。（扯远了）其实事情是这样的。。去KTV的时候，发现KTV里面的点歌系统换了，换成触屏，系统界面貌似是Flash做的。里面有个搜索版块弹出的时候，模仿了iphone/ipad中图片抽出的效果。
从前在iphone上看过那个效果，愣是没看明白怎么做的。这次倒是仔仔细细的观察了一番，心中有了七八分把握，晚上回到宿舍就开始尝试，终于给试出来了哈！
效果中涉及到位图的扭曲，在flash9时代，位图的扭曲需要自己切三角形，麻烦无比。到了flash10时代，由于3D乃大势所趋，adobe多少也提供了一些更加方便的位图扭曲方法。
这里我就介绍我们今天用到的，在flash10中新增加的Graphics.drawTriangles方法。
drawTriangles字面理解，就是画三角形。当然adobe不会因为你需要画三角形才给你提供这个方法吧。其真正的作用是通过快速批量的画三角形来实现位图的扭曲。
这里我就贴API中对这个方法的介绍，来帮助大家理解这个方法的用途。
drawTriangles () 方法
public function drawTriangles(vertices:Vector, indices:Vector = null, uvtData:Vector = null, culling:String = "none"):void
语言版本:  ActionScript 3.0
运行时版本:  Flash Player 10

呈现一组三角形（通常用于扭曲位图），并为其指定三维外观。drawTriangles() 方法使用一组 (u,v) 坐标将当前填充或位图填充映射到三角形面。
可以使用任何类型的填充，但如果填充有转换矩阵，则将忽略该转换矩阵。
在使用位图填充时，uvtData 参数可改善纹理映射。参数
vertices:Vector — 一个由数字构成的矢量，其中的每一对数字将被视为一个坐标位置（一个 x, y 对）。vertices 参数是必需的。

indices:Vector (default = null) — 一个由整数或索引构成的矢量，其中每三个索引定义一个三角形。如果 in***s 参数为 null，则每三个顶点（vertices 矢量中的 6 对 x,y）定义一个三角形。否则，每个索引将引用一个顶点，即 vertices 矢量中的一对数字。例如，in***s[1] 引用 (vertices[2], vertices[3])。in***s 参数是可选的，但 in***s 通常会减少提交的数据量和计算的数据量。

uvtData:Vector (default = null) — 由用于应用纹理映射的标准坐标构成的矢量。每个坐标引用用于填充的位图上的一个点。每个顶点必须具有一个 UV 或一个 UVT 坐标。对于 UV 坐标，(0,0) 是位图的左上角，(1,1) 是位图的右下角。
如果此矢量的长度是 vertices 矢量长度的两倍，则使用标准坐标而不进行***校正。
如果此矢量的长度是 vertices 矢量长度的三倍，则将第三个坐标解释为“t”（即在视角空间中从视点到纹理的距离）。这有助于呈现引擎在三维中映射纹理时正确应用***。
如果 uvtData 参数为 null，则将应用普通填充规则（和任何填充类型）。

culling:String (default = "none") — 指定是否呈现面向指定方向的三角形。此参数可防止呈现在当前视图中看不见的三角形。此参数可设置为由 TriangleCulling 类定义的任何值。
代码中已经有注释，大家下来看吧。
【来源：互联网】
更多精彩教程，尽在web3D纳金网http://www.narkii.com/college/ 动画地址：http://boycy.webs.com/iphoneTween.swf
源文件地址：http://boycy.webs.com/iphoneTween.rar
昨天同学生日，去K歌。。（扯远了）其实事情是这样的。。去KTV的时候，发现KTV里面的点歌系统换了，换成触屏，系统界面貌似是Flash做的。里面有个搜索版块弹出的时候，模仿了iphone/ipad中图片抽出的效果。
从前在iphone上看过那个效果，愣是没看明白怎么做的。这次倒是仔仔细细的观察了一番，心中有了七八分把握，晚上回到宿舍就开始尝试，终于给试出来了哈！
效果中涉及到位图的扭曲，在flash9时代，位图的扭曲需要自己切三角形，麻烦无比。到了flash10时代，由于3D乃大势所趋，adobe多少也提供了一些更加方便的位图扭曲方法。
这里我就介绍我们今天用到的，在flash10中新增加的Graphics.drawTriangles方法。
drawTriangles字面理解，就是画三角形。当然adobe不会因为你需要画三角形才给你提供这个方法吧。其真正的作用是通过快速批量的画三角形来实现位图的扭曲。
这里我就贴API中对这个方法的介绍，来帮助大家理解这个方法的用途。
drawTriangles () 方法
public function drawTriangles(vertices:Vector, indices:Vector = null, uvtData:Vector = null, culling:String = "none"):void
语言版本:  ActionScript 3.0
运行时版本:  Flash Player 10

呈现一组三角形（通常用于扭曲位图），并为其指定三维外观。drawTriangles() 方法使用一组 (u,v) 坐标将当前填充或位图填充映射到三角形面。
可以使用任何类型的填充，但如果填充有转换矩阵，则将忽略该转换矩阵。
在使用位图填充时，uvtData 参数可改善纹理映射。参数
vertices:Vector — 一个由数字构成的矢量，其中的每一对数字将被视为一个坐标位置（一个 x, y 对）。vertices 参数是必需的。

indices:Vector (default = null) — 一个由整数或索引构成的矢量，其中每三个索引定义一个三角形。如果 in***s 参数为 null，则每三个顶点（vertices 矢量中的 6 对 x,y）定义一个三角形。否则，每个索引将引用一个顶点，即 vertices 矢量中的一对数字。例如，in***s[1] 引用 (vertices[2], vertices[3])。in***s 参数是可选的，但 in***s 通常会减少提交的数据量和计算的数据量。

uvtData:Vector (default = null) — 由用于应用纹理映射的标准坐标构成的矢量。每个坐标引用用于填充的位图上的一个点。每个顶点必须具有一个 UV 或一个 UVT 坐标。对于 UV 坐标，(0,0) 是位图的左上角，(1,1) 是位图的右下角。
如果此矢量的长度是 vertices 矢量长度的两倍，则使用标准坐标而不进行***校正。
如果此矢量的长度是 vertices 矢量长度的三倍，则将第三个坐标解释为“t”（即在视角空间中从视点到纹理的距离）。这有助于呈现引擎在三维中映射纹理时正确应用***。
如果 uvtData 参数为 null，则将应用普通填充规则（和任何填充类型）。

culling:String (default = "none") — 指定是否呈现面向指定方向的三角形。此参数可防止呈现在当前视图中看不见的三角形。此参数可设置为由 TriangleCulling 类定义的任何值。
代码中已经有注释，大家下来看吧。
【来源：互联网】
更多精彩教程，尽在web3D纳金网http://www.narkii.com/college/

欢迎光临纳金网 (http://wwww.narkii.com/club/)