立体贴图【基于AS3的网络立体贴图应用】
立体贴图技术是利用服装假三维CAD技术和计算机网络技术生成服装的面料图案及纹理,使得服装的各部位达到逼真的效果。本文将重点讨论利用时下兴起的ActionScript 3.0编程技术与服装CAD立体贴图技术相结合,通过XML的数据存储功能、深度、遮罩等实现应用于互联网的立体贴图技术。
1AS3实现网络立体贴图
为了实现网络立体贴图的效果,本文选用Flash技术的脚本语言ActionScript3.0与XML相结合,利用XML来存储实现立体贴图所需的全部数据,如图片信息、布料信息、遮罩数据等,通过ActionScript3.0与XML通信来读取数据,加强展示服装的多样性和真实性,提高模块运行的高效性及可维护性,并利用网络立体贴图的交互性和响应性来提高用户体验的丰富性。
1.1利用XML存储数据
实现网络立体贴图技术需要大量相关信息,如原始图片、面料图片、颜色数据、遮罩数据等,本文利用XML来存储这些数据信息。利用XML文档存储数据时,根据网络立体贴图实现的数据需要,将数据分为了底图,面料,服装,遮罩等 4 类数据,用BaseImage、Texture、MaskTexture、Masks来表示 4 种数据在XML中的元素名称。XML语言中,元素和属性是XML的重要组成部分。为使得XML简单清晰,本文根据每种元素的不同需求设定了其属性,如元素Masks,该元素是用来存储数字化遮罩区域,我们则希望通过XML来获取这些遮罩的数据。
因此在元素Masks下设有以下几个属性:(1)MaskName,以字符串形式存储遮罩的名称,如Neckline,表示领子区域的遮罩名称;(2)MaskPointNumber ,存储每一遮罩区域的点的个数;(3)XArray,遮罩点的X坐标,存储从绘制起点到结束点的坐标,各坐标间以“,”分隔;(4)YArray,遮罩点的Y坐标,存储方式与XArray一致。
1.2利用AS3读取XML中的数据
对ActionScript 3.0而言,要充分展现富媒体软件的交互性与多媒体性需要用到大量的数据信息,这些数据信息将要从XML文件中来读取。加载XML文档的方法如下。
首先,建立URLLoader实例,通过URL来加载数据,将dataFormat属性设为DataFormat.Text,从而指示URLLoader以纯文本方式加载数据。然后,添加complete事件监听器,用来监听数据是否下载完成。最后,调用URLLoader.load()方法来加载进程。
在程序设计的过程中,需要读取XML文本节点及其值。大多的数据信息在ActionScript 3.0中都使用toString()方法,将节点的值转换成字符串,当遇到数字型数据,如当文档内数据MaskPointNumber=“22”,在读取的过程中则可以使用诸如int()或Number()的转换函数,把值转换成另一种数据类型。
1.3遮罩显示处理
在ActionScript 3.0显示编程中,遮罩显示对象是其中较为重要的部分,遮罩可以用于创建独特的形状或视觉效果。在网络立体贴图设计的过程中,主要就是用到了遮罩层的原理,通过在原图之上建立多个特殊形状的遮罩图形,并将其设置为遮罩层,从而实现为服装局部换颜色换面料的效果。
本文将图 1 中的服装分成了 7 个局部,包括背心,领圈,短裤左右片,左右裤口以及腰带,分别绘制出这 7 个部位的形状,并用不同的颜色表示出来。
在ActionScript 3.0编程中,遮罩显示对象通过指明一个显示对象是另一个显示对象的遮罩,将遮罩对象设置为被显示对象的mask属性,方法如下:mySprite.mask = maskSprite。本文需要解决和考虑的问题是利用ActionScript 3.0编程实现多层遮罩的显示及在程序运行中遮罩层自动绘制的方法。
1.3.1利用深度来解决遮罩层的问题
在学习ActionScript 3.0编程的过程中,需要了解显示列表及深度管理方面的知识。一般我们把显示类分成交互类和非交互类,在交互类中又分为容器类和非容器类,可以在容器类的实例中添加其他的实例。
MovieClip作为一个容器类,可以创建多个影片剪辑实例,这些实例通常是按照创建的先后顺序来显示的,越晚创建的实例显示越靠舞台顶部。从深度角度来说,后创建的影片剪辑实例的深度要比先创建的影片剪辑实例深度大。因此,深度可以理解为显示实例的显示层次,深度越大,显示实例显示的层次就越高,其中最底层为 0 层。
在网络立体贴图设计中,希望系统能够调出任意一张底图,而底图中可能有多个可更换的部位,如一件滑雪服就可能会有好几十个不同颜色的部位,因此在程序设计的过程中就需要考虑到系统自动根据遮罩个数建立所需要的遮罩层。
1.3.2绘制遮罩形状
利用服装CAD立体贴图软件(e � Draping Std)产生存贮遮罩X,Y坐标数据的XML文档,通过绘制短距离的直线来绘制出想要的遮罩形状。在ActionScript 3.0中,将坐标数据存放在数据中,同样利用绘制直线及用实色填充的方法来绘制所需的遮罩。
1.4事件处理
交互方式实现是本网络功能模块的关键,要使得本功模块能够实现真正意义上的网络立体贴图效果,需要利用事件处理来完善其交互功能,从而提高用户体验的丰富性。
1.4.1显示所要改变的服装局部
由于每款服装中其可改变的服装局部可能包括多个区域,为了方便操作者能够清楚了知道自己作选择的区域,本文在各遮罩上使用了鼠标事件MouseEvent,通过MOUSE_OVER和MOUSE_OUT改变遮罩形状的alpha值,实现选中区域的标记显示。
1.4.2改变服装局部面料和颜色
根据用户要示,本模块为每款服装设计出一定数量的面料或颜色,当用户点击任意一款面料或颜色,则可改变对应的服装局部,使得用户能够看到更为直观真实的搭配效果。本文通过MouseEvent.CLICK事件调用函数Change_material过程,通过getChildIndex方法返回鼠标所点击的服装局部的深度值(由于遮罩已经通过ActionScript 3.0设定好,鼠标点击将不会返回遮罩所在的深度值),最后添加新的完成立体贴图的纹理图片到该层即可。运行结果如图 2 所示。
1.5 网上发布
关于Flash的发布,大多情况是将Flash的内容放在万维网上,通过Web浏览器去查看,也就是说要将SWF嵌入到[X]HTML页面中去。但是仍然存在着一些问题需要注意:首先,Web页面浏览Flash需要有Flash Player插件,由于各浏览器的不同,其所需要的插件架构也不同;其次,由于Flash Player播放器的版本问题,可能导致旧版Flash Player无法读取内用含有ActionScript内容的Flash;最后,Flash Player的自动升级问题。
针对这些问题,已经出现了多种解决的方法和脚本,包括Geoff Stearns的SWFObject和Bobby van der Sluis的UFO,他们都经常更新,以解决浏览器和Flash Player中的bug,及时修补bug。
2结论
网络立体贴图的发展在国外已经发展得较为成熟,如zazzle就利用AJAX技术较为成功地建立起一种成功的eBay模式;北京服装学院的张辉博士曾经利用Java Applet来实现网络立体贴图并应用于中国服装设计师协会的官方网站,并取得了很好的效果。但是,随着Windows XP SP2之后,对Java Applet支持受到一定的影响。同时,随着ActionScript 3.0的出现,使得Flash功能越来越强大,Flash技术在Web中得到了广泛的应用和肯定。现在,越来越多的曾以Java Applet为主要开发工具的网上应用逐渐被Flash技术取代。如电子地图,目前均改为使用Flash技术开发。
本文将服装CAD技术与Web技术相结合,利用ActionScript 3.0技术及XML成功实现了网络立体贴图,提高了用户体验的丰富性,它的实现目前在国内鲜见应用。本研究为后续进行网络立体贴图的RIA开发提供了技术上的支持。网络立体贴图技术的发展,不仅可以应用到服装行业中,也可应用到装潢、家居、汽车等行业中去,成为网络营销的重要组成部分。
参考文献(略)
