在线观看免费亚洲,亚洲日韩AV一区二区三区中文,中文字幕无码精品亚洲资源网

[转蝲]如何学习(f��n)Flex Framework

Tue, 29 Jul 2008 06:46:00 GMT

最�q�由於種�E��P故又要開始做點教育訓�R�的事，先趁珑֜�有空把手邊的資料整理一下�?br />
�Q�Flex 的基�C�架�?br />
關於 flex 基本上常被問到的不外乎就是「如何可以學好它�Q�」，要瞭解這個問��的�{�案基本上只要看懂下面這圖��ok了�?br />

�Q�Actionscript 該學的重�?br />
從最底層看�v�Q�最下面�?actionscript 3是一切的基礎�Q�它�?flash/flex �R�程使用的唯一�E�式語言�Q�因此�Q何�h惛_��?flex �W�一件事�i�對是先摸熟 actionscript 這個語�a��Q�包含：(x��)

1. 它的基本語法與結�?array, hash, loop, if else…)

2. DisplayList (DisplayObject, DisplayObjectContainer)�?Event system(bubbling, propagating…)

3. Sound, Video, NetConnection �?Graphics class

掌握 as3 的精華後�Q�接下來��可以進入 flex framework�?br />
�Q�Flex framework 的重�?br />
基本�?flex framework ��是�?actionscript 寫成的框�Ӟ��因此也可以把它看成是 as3的最好示��，看著 framework source �?actionscript 也是��Z��錯的�Q�只是�\會變很長�?br />
Flex Framework 整個體�p�非常博大精深，通常一般�h不太可能完整把它學完�Q�只需要針��最常用到的部䆾熟�?zh��n)��好�Q�圖中列出的那三�?component, managers, style/skin)��是我個�h認為所有初學者最優先該學會的�?br />
�Q�Component 該學些什�?br />
Component 是整�?flex framework 的基�C�，�q�乎80% 的元素都是由 UIComponent �J�承而來�Q�例如最�Ҏ(gu��)��的的它本�w�就是一�?UIComponent�Q�因此，熟�?zh��n)?component ��成為學�?flex framework 最�Ҏ(gu��)��也最重要的基本功

Flex 內徏�?二十�q�ր?UI controls, 例如 Button, DataGrid, HBox�{�，以種��來分，這些 components 可以概分��Z��大類�Q?br />
-Controls: Button, DateChooser, Slider…
-Containers: Box, DividedBox, Panel…
-List: DataGrid, Tree, TileList…

初學者第一步至��該學會怎麼用這些元�g�Q�瞭解每個元件的 properties, events, styles, effects…�Q�知道怎麼在手冊裏查它�?API 文�g�Q�以�?qi��ng)何時該用何�E�元件�?br />
進階一點，則是學會怎麼修改這些元�g�Q�例如繼承一�?Button 下來加上不同的功能，或是寫不同的 skin border 來改變它的外觀�?br />
再更進階�Q�則是開始研�I�元件的生命週期�Q�瞭解每個元件是何時初始化，元�g內部有那些關鍉|��令與它們個別的功用，然後可以試著建立自已�?custom component�?br />
這一關看起來�Ҏ(gu��)��但實際上最困難�Q�因�?flex �?component framework 寫的非常龐大�Q�雖然亂中有序但要在��h��中看出隱藏的架構然後抓住重點整串提�v�Q�就非得有�h帶著指引正確的途徑才比較可能達成�?br />
�Q�manager 是什�?br />
圖中最上方的第二塊��是 manager�?br />
flex 裏有很多�?managers�Q�負責做各種不同的工�?廢話…)�Q�幾個比較重要的包含�Q?br />
-SystemManager:
它是每支 flex app 的根源，最先被下載�Q�也最早啟動，由它進行一連串�?app boot��程

-StyleManager:
它負責整支app �?css style 套用�?skin 生成�Q�如果想玩動�?css 載換也靠�?br />
-DragManager:
Flex最大的賣點��是 drag and drop�Q�這�?manager ��是背後的英雄，初學者至��要學會怎麼處理 drag 行為的五個事�Ӟ��以及(qi��ng)如何在不同元仉��做拖放；進階的玩家則應該深入研究這支 manager 是怎麼寫成的，詳細��p��它的 source 會得到意想不到的無窮樂趣(如果你讀完卻沒有這種感覺�Q�呃�Q�那代表你該再多讀�q�次�Q�如果還是沒有，那請�U�下聯絡�?:D)

-ModuleManager:
使用 Flex 開發大型應用�E�式時，往往會將�E�式切割成許多小�?module, 這�?manager ��是負��K載入並管理所有的 module (包含它的 class partition)�Q�初心者或�a�q��不到�Q�但有志深入的玩家一定要很熟�?br />
-CursorManager:
這個用到的時機不是很多�Q�但偶爾要換一�?cursor 時還是會用到�Q�初學者至��要知道怎麼用指定的圖案��L��掉系�i�cursor�?br />
�Q�Style/Skin 的重�?br />
CSS style �?skinning �?Flex 最大的賣點之一�Q�也是開發過�E�中較為�ȝ��也最耗時的部份�?br />
初學者應該要徹底瞭解如何使用 CSS style 來打點一�?flex app 的外觀�Q�換��色、素材，使用外部 assets 修飾介面�?br />
中階玩家則應該瞭�?skinning 的系�i�，包含 programmatic skinning �?graphical skin�Q�它們兩的差別？使用時機�Q�如何客製化�Q?br />
更高階的玩家則應該熟�(zh��n)�整�?Styling system 的運作模式，外加如何動態載入 css �?runtime 換掉整個介面�?br />
��而言之，flex app 寫的好不好，外行人其實看不太��Z��Q�但一�?app UI ��不��則是一��d��瞪眼�Q�比較漂亮的那就先加十分

(當然�Q�有一�E�情況是��L��用心�ȝ��化了介面�i�果弄��y成拙搞的怨聲載道��Z�h喊打�Q�但那種比較不多見，也不是每家公叔R��會搞到這步田地�Q�就先不�a�論)

�Q�學完基本功後下一�?br />
在我的標準裏�Q�當一�?developer ��上圖內每一塊都有中�{�程度的瞭解後，��q��是完�?flex ��成教育�Q�可以邁向下一個階�D�c(di��n)�?br />
也就是開始熟�(zh��n)?application 的製作手法，這包�?br />
-瞭解臛_��一�E�以上的開發框架�Q�例�?Cairngorm�Q�老實說我��這個框架沒什麼好�?因為手法太複雜，只適合超複雜��L��a�畫或火星探勘時使用)�Q�但它結構設�a�良好，又是業界公認的聖盃，�{�於是專家們共通的語言�Q�因此至��要先瞭解它在做什��|��來在專業場合才好溝�?俗話�?know the rules so you know what you are breaking, ��是指這情�?

-接著可以看看比較��單的手法，�?Riawave, Model-Glue:Flex, PureMVC…�{�，基本上這些框架�a�計方式都大同小畎ͼ�每個都有不同的應用場合�Q�可以挑一個喜歡的再自行修攏V�?br />
-瞭解基本的概念，例如 Value Object, DAO, MVC �{�，它們在大部份的�E�式框架裏都會出現，早點學會日子比較輕鬆�?br />
接著��是開始實際 coding�Q�寫一個中��型規模的app�Q�不論是單純�?CRUD app�Q�或是留�a�版、電��q��、進銷存管理都可以�Q�籍由多寫來強化�R�程的概念，然後透過大量�?peer code review 來找出可攚w��的地方�?br />
�Q�結�?br />
�i�論還是老話一句：(x��)要入門 flex ��級��單�Q�只要不是白癡應該一��時��p��Q�但要成為可獨當一面的��業開發者，路就很長�Q�如果沒有走��方向很�Ҏ(gu��)��p��q��x��後放��?br />
換句��p��Q�要能成��場上真正需要的 professional developer�Q�並不如表面上想像的�Ҏ(gu��)��(其實我想每種技術領域跟產業都一樣吧)�Q�這也是我過去半年來協助很多公司做 recruiting 後的感想�?br />

姜大�?/a> 2008-07-29 14:46 发表评论

Tue, 29 Jul 2008 06:44:00 GMT

摘要: 做Flex做久了做大了�Q�就�?x��)觉得之前写的的Flex代码开始有点�ؕ�Q�哪怕你写的规范了，但总觉得结构松散，�l�护不方便，�怿�很多人刚开始做Flex的时候，都是惛_��什么功能，��写什么功能，或者有些好点的�Q�就先画了个大体的流�E�图之类的，因�ؓ(f��)现在Flex普及(qi��ng)得还不够�Q�很多�h做Flex也是试探阶段�Q�不敢用作商业项目或其它大项目，只会(x��)用来试水技术层面的... 阅读全文

姜大�?/a> 2008-07-29 14:44 发表评论

Flex中的皮肤�Q�二�Q�完

Tue, 29 Jul 2008 06:40:00 GMT

在上一��文章中�Q��ؓ(f��)大家介绍了Flex中皮肤的��单且基本也是最常用的用法，��是先在外部�E�序中做好皮肤样式，之后再在Flex中加载这些皮肤资源，比如是PNG囄��Q�或者是SWF文�g�{�，�q�些�Ҏ(gu��)��都是比较直接且方便简单的。不�q�灵�z�L��还是不太好�Q�而现在这��文章中要讲的，��是从程序里AS�~�写的皮肤，你可以更灉|��自由地控制皮肤的样式与表达方式等�Q�而不用依赖于外部的图片或SWF资源�Q�不�q�这栯��是有些缺点的�Q�就是扩展或是改变时��比较不灉|��Q�像囄��资源的皮肤的话，可以很轻易的改变不同的图片的路径资源�{�就可以修改了不同的皮肤模式�Q�而用AS Graphics写的皮肤的话�Q�要修改一下那些代码，当然�Q�你也可以在AS代码里写上动态加载其它图片资源又或者作一些更高��的效果等�{��?br />
先在�q�里解析一下，要以代码方式自定义一个皮肤的话，需要自已编写一个皮肤子�c�，�l�承ProgrammaticSkin�q�个�c�，�q�个是所有编写自定义皮肤的基�c�，该类也派生了另外两个�c�：(x��)RectangularBorder �?Border �c�，都是差不多的�Q�如果你是写Icon之类的小皮肤的话�Q�比如CheckBox或者RadioButton�q�类皮肤不需要太复杂的画��N��辑�Q�而且大小固定�Q�就像是一个小Icon吧，只是有几个状态而已�Q�这�c�d��皮肤的话�Q��承ProgrammaticSkin��可以了�Q�而写一些复合的控�g�Q�背景大��可以调节之�cȝ��皮肤�Q�其实就是大部分皮肤�Q�就用Border或者RectangularBorder�c�R��但都有一个相同点�Q�就是��承了那些�c�M��后，都必需覆盖 updateDisplayList �q�个�Ҏ(gu��)��Q�这个方法是��q��序自动调用，当需要用到控件时�Q�需要控件的皮肤�q�行表现�Ӟ��׃��(x��)调用那个�Ҏ(gu��)��Q�所以你必需覆盖它，�q�将你的��d��逻辑代码写在那个�Ҏ(gu��)��里面。还有要注意的是�Q�这个皮肤类�?x��)与你应用这皮肤的控件的Style讄��׃�n�Q�也��是说你可以在编写这个皮肤类代码里面�Q��用getStyle�Q�）�{�等�Ҏ(gu��)��获得讄��在目标控件中的风格属性，比如说是那么你可以在MySkin代码里获取这个颜色值来�q�行��d��该颜色的囄��或其它操作，而直接将颜色值写��d��代码里是不规范的�Q�就如我下面贴出来的的代码，不过��Z��自已懒，快速代个示例代码，所以犯�q�个错了。说多了�Q�下面看看代码先�?br />
好了�Q�我们先看看看代码，�q�䆾代码是写了一个Panel的皮肤：(x��)

1 package com.jiangzone
2 {
3     import mx.skins.Border
4     import mx.core.EdgeMetrics;
5     import mx.core.Container;
6     import mx.graphics.RectangularDropShadow;
7
8     public class MyPanelBorderSkin extends Border {
9
10         public function MyPanelBorderSkin():void {
11         }
12
13         /**
14          * 该方法必需要覆盖，如果你要自定义自已的皮肤的话�Q?br /> 15          * 该方法当在控件更新外观时��会(x��)被自动调�?br /> 16          * �?x��)传入两个参数数�Q�第一个是Width�Q�第二个是Height�Q�即是该控�g的宽与高
17          * */
18         override protected function updateDisplayList(w:Number,h:Number):void {
19             super.updateDisplayList(w,h);
20
21             var ba:uint = 1;                //backgroundAlpha    背景透明�?/span>
22             var bg:uint = 0xffffff;            //backgroundColor    背景颜色
23             graphics.clear();                //graphics�q�个属性是父类里已�l�提供了�?/span>
24             var p:Container = parent as Container;        //获取该皮肤所应用在的父容器，�q�里为Panel
25
26             //�q�里需要注意，一定要判断父容器是否已被设�|�，在文章里作解�?/span>
27             if(p){
28                 //获取容器定义的区域边界信息对�?nbsp;
29                 var vm:EdgeMetrics = p.viewMetrics;
30                 //讄��四个角的圆度
31                 var radiusContent:Object = {tl:vm.top,tr:0,bl:0,br:vm.top};
32                 //标题栏圆�?nbsp;
33                 var radiusTitle:Object = {tl:vm.top,tr:0,bl:0,br:0};
34                 //��M��个圆角矩形，整个背景
35                 this.drawRoundRect(0,0,w,h,radiusContent,bg,ba);
36                 //��M��个圆角矩形，标题�?nbsp;
37                 this.drawRoundRect(0,0,w,vm.top,radiusTitle,0xff0000,.7);
38                 //��M��个圆角矩形，标题栏的那个高光水晶�?/span>
39                 this.drawRoundRect(0,0,w,vm.top / 2,radiusTitle,0xffffff,.3);
40
41                 //下面是画阴媄的�?/span>
42                 var dropShadow:RectangularDropShadow = new RectangularDropShadow();
43                 dropShadow.distance = 8;
44                 dropShadow.angle = 60;
45                 dropShadow.color = 0x000000;
46                 dropShadow.alpha = 0.4;
47
48                 dropShadow.tlRadius = radiusContent.tl;
49                 dropShadow.trRadius = radiusContent.tr;
50                 dropShadow.blRadius = radiusContent.bl;
51                 dropShadow.brRadius = radiusContent.br;
52
53                 dropShadow.drawShadow(graphics, 0, 0, w, h);
54             }
55         }
56     }
57 }

上面的代码就是皮肤的代码�Q�之后你�q�要做的�Q�就是将该皮肤应用到Panel�q�个容器里：(x��)

1 <mx:Application
2     xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()"
3     layout="absolute">
4
5     <mx:Style>
6         .myPanelSkin {
7             borderSkin: ClassReference( "com.jiangzone.MyPanelBorderSkin" );
8         }
9     mx:Style>
10
11     <mx:Panel borderSkin="com.jiangzone.MyPanelBorderSkin"
12               width="200" height="150"  x="24" y="23"/>
13
14 mx:Application>

代码很简单，�q�里要说一下，viewMetrics �q�个属性是Container控�g所独有的属性，是一个只��d��性，�~�写C(j��)ontainer子类的时候都要覆盖它�Q�是用于定义�q�个容器正文��Z��边界值的�Q�比如Canvas的四周都�?�Q�所以没有标题栏与边条，而Panel��有四周的边界，而Top边界比较大，用作昄��title的，所以如果你要做容器的皮肤的话，注意一下这个倹{��还有就是，��Z��么获取了皮肤应用的控件引用（parent�Q�后�q�要判断它是否�ؓ(f��)�I�？因�ؓ(f��)当程序加载到�q�个控�g�Ӟ��是先加蝲那个皮肤的，所以parent的值未被设�|�，是空的，如果你不作判断的话，��会(x��)出现�I�引用的错误�Q�parent.viewMetrics�Q�，当加载完皮肤后，再加载控件�ƈ讄��控�g的属性和讄��皮肤�Q�这时将�?x��)再�ơ调用updateDisplayList的方法，�q�时parent才有��|��是那个控�g的引用。当改变了style或一些属性后�Q�又�?x��)自动触发调用updateDisplayList�Ҏ(gu��)��?br />
我们来看看最�l�运行效果：(x��)

补充一下：(x��)
在第一��文章里�Q�说了将皮肤做在SWF文�g里再加蝲�Q�想一下，可以��该皮肤做成动画MC的，而不单单只是一个画面，可以做成一些动��M��为皮肤，之后在Flex引用该SWF的Symbol�Q�这��L(f��ng)��肤就有了动画效果了，不只只是单纯的不动的�q�面图！

Flex中的皮肤教程��p��到这里，皮肤�q�有很多可探索的�Q�只要大家有求知��Ԍ��多点看看英文文档�Q�看看别人的例子�E�序代码�Q�现在Flex也开源了�Q�也可以多看看Flex的源码，�?x��)得到很多知识�?br />

姜大�?/a> 2008-07-29 14:40 发表评论

Tue, 29 Jul 2008 06:37:00 GMT

好久没有写文章了�Q�一直用“�?#8221;来�ؓ(f��)自已扄��口，其实是懒�Q�不�q�这个月发生了这么大的事�?5.12 让我们每个�h都永记心中，看到中国人的团结�Q�看见解攑ֆ�们志愿者们�q�么努力��Cؓ(f��)灑֌�奉献�Q�我也不能再��已找借口了，虽然我远在广东，不能到现场去参与救缓�Q�钱也捐�q�了�Q�但��x��Q�我�q�有事情可以做的�Q�就是用我自已的知识�Q�写�Ҏ(gu��)��术文章，虽则不能直接的帮助到灑֌��Q�但也�ؓ(f��)国民提高Flex技术知识出分力�Q�做好本职工作。在�q�里哆嗦点也得说句：(x��)为灾区遇难者祈��P��为灾区救�~�不懈努力的军民�l�与崇高的敬�?
.....................................................(三分钟后)

好了�Q�我们�{入正题，之前我也写过Flex的动��M��变换的文章，不知道大家有没有看过。现在我要写的就是Flex中的皮肤样式斚w��的，我技术不太好�Q�算是自已学�?f��n)Flex�q�程中的理解体会(x��)吧�?br /> �q�里是第一��，��讲�q�C��下Flex中如何应用UI的皮肤，其实应用UI皮肤不难�Q�你们在使用Flex的过�E�中是否觉得Flex中自带的皮肤样式不太好看�Q�或者是惌��已做个比较有特色的？下面��我们来说说皮肤吧，先来个简单的�Q�你们在做网��|��Q�做��D��按钮什么的很多人都是用一个图片来作�ؓ(f��)一个按钮吧�Q�之后做几个不同的颜�Ԍ��之后��在CSS或者JS里设�|�一下当鼠标Over和Down和Out�{�等动作�Ӟ��切换不同颜色的囄��Q�这样实现动态效果。在Flex里也可以如此��单的做皮肤。你可以先画好一个UI的皮肤，之就��将该图片应用到Flex里面�?br /> 先来看看效果�Q?br />

之后我们来看看代码：(x��)

1 xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="257" height="182" backgroundGradientColors="[#ffffff, #ffffff]">
3
4     <mx:Script>
5
6
7             //Embed标签是用于将一些外部资源加入到Flex中，随Flex的编译成SWF文�g�Q?br /> 8             //�q�里是加入一张PNG囄��Q�即是做好的Skin囄��
9             [Embed(source="images/buttonskin.png",
10                    scaleGridTop="26",
11                    scaleGridBottom="64",
12                    scaleGridLeft="30",
13                    scaleGridRight="106")]
14             //上面的Embed标签下面要紧跟着�q�个Class�Q�意思就是将上面的资源加入到Flex
15             //后变��个Class的内容，卌��用这个Class�Ӟ��是调用那些资源
16             private var MyBtnSkin:Class;
17
18             //在程序创建完成时�?x��)调用该函数�Q�在函数里面讄��Button的样式（Style�Q?br /> 19             //�q�里��是讄��按钮的up,over,down三个鼠标状态时的皮肤，��是上面加入的图片资�?br /> 20             private function init():void{
21                 btn.setStyle("upSkin",MyBtnSkin);
22                 btn.setStyle("overSkin",MyBtnSkin);
23                 btn.setStyle("downSkin",MyBtnSkin);
24             }
25         ]]>
26     mx:Script>
27     <mx:Button id="btn" label="Hello World" width="190" height="90"/>
28 mx:Application>

怎么��P��很简单吧�Q�大安��要注意一下的是在Embed标签里，我定义了一些scaleGridTop之类的属性，�q�是跟皮肤的�~�放有关的，如果不定义那些属性的话，那么囄��是多大的�Q�就按多大来�q�行�~�放�Q�当你的按钮很大�Ӟ��那些皮肤囄��׃��(x��)被拉大，出现马赛克与变�Ş�{�，�q�都是不好看的。加入了9格羃放模式后�Q�当你羃放按钮时�Q�九(ji��)个格中的四个角的区域不会(x��)被羃放，保持原样�Q�中间格�?x��)宽高同时羃放，中间上下��g��(x��)仅是宽度�~�放�Q�中间左��x��只会(x��)高度�~�放�Q�这��P��那个皮肤的边框无��Z��如何�~�放�Q�都是原来的大小比例�Q�而不�?x��)将整个囄��一��h��生�?br /> 现在的按钮太单调了，只有一个外观，现在大家可以再加多两个不同颜色或者其它图案的囄��作�ؓ(f��)不同状态的皮肤��可以了�Q�比如将overSkin�Ҏ(gu��)��U�色�Ҏ(gu��)��的图片等�?br />
其实大家有没有发玎ͼ�上面代码的写法感觉比较麻烦的。我们可以用CSS来实玎ͼ�我们可以直接点，��皮肤直接写在Button上，如下�Q?br />

1 <mx:Button label="Hello World"
2         upSkin="@Embed('images/buttonskin.png')"
3         overSkin="@Embed('images/buttonskin.png')"
4         downSkin="@Embed('images/buttonskin.png')"
5     />

�q�样也是同样的效果。省事好多了吧。或者我们用CSS来写�Q?br />

1 xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="257" height="182" backgroundGradientColors="[#ffffff, #ffffff]">
3     <mx:Style>
4         Button{
5             up-skin:Embed(source="images/buttonskin.png",
6                           scaleGridTop="26",
7                           scaleGridBottom="64",
8                           scaleGridLeft="30",
9                           scaleGridRight="106");
10             over-skin:Embed(source="images/buttonskin.png",
11                           scaleGridTop="26",
12                           scaleGridBottom="64",
13                           scaleGridLeft="30",
14                           scaleGridRight="106");
15         }
16     mx:Style>
17     <mx:Button id="btn" label="Hello World" width="190" height="90"/>
18 mx:Application>

如果觉得加上CSS代码�?x��)��o(h��)�E�序代码混�ؕ的话�Q�就��CSS代码写在CSS文�g里去�Q�在�E�序里导入CSS文�g��可以了�?至于CSS的用法，我就不说了，反正Flex里的CSS方式与Html里的用法用样。只是要注意一下CSS里面讄��的属性的名字��可以了)

但有人可能会(x��)问，�q�样做的话，如果一个程序有很多不同的UI�Q��ƈ有不同的皮肤�Q�那不就是要生成很多的图片？�q�个问得好，��实�Q�如果以�q�种方式的话�Q�就像一个网站里的images文�g夹一��P��有很多的��图片，�q�样太麻烦了�Q�而且也不好维护。既然有�q�样的问题，我们��将皮肤�q�脆做成在一个文仉��面算了，方便快捷�Q�维护又方便�Q�而这个文�Ӟ��是SWF文�g。我们如果有Flash基础的话�Q�基本对MC都不�?x��)陌生，对，�q�次我们的主角就是SWF里面的MC�Q�我们可以将一个皮肤做成一个MC�Q�在Flash里将所有用到的皮肤都做在一个SWF里，一个图片就像是一个MC�Q�之后发布该SWF文�g�Q�在Flex里加载这个SWF文�g�Q�再在需要的皮肤里调用SWF里面相应皮肤的MC的名字就可以了。如下：(x��)
�q�个是在Flash里做好的皮肤SWF文�g�Q�里面有三个不同颜色的皮肤模�?br /> [swf]attachments/month_0805/p2008518233635.swf[/swf]
�q�里要注意一下，在Flash里做�q�些皮肤�Ӟ��要将MC加上链接�Q�链接的名称�Q�就是你在Flex里调用该皮肤的名�U�ͼ�囄��如下�Q?br />

在做好皮肤的SWF后，让我们回到Flex 里面�Q�在Flex里写如下代码�Q?br />

注意一下的��是�Q�在Embed标签里，要导入的资源文�g不是PNG了，而是一个SWF�Q�就是我们刚才在Flash里做好的皮肤文�g�Q�注意看�Q�后面还跟着一个symbol属性，该属性就是指明你要调用哪一个MC�Q�就是SWF里面的MC�Q�记得，都要为每个MC做链接，�q��接名字要与symbol里的名字致。至此，我们的皮肤就完成了。一个SWF文�g��搞掂。这里是最�l�效果：(x��)

好了�Q�这��教�E�就��C��l�束�Q�上面介�l�的都是Skin的比较简单快��L(f��ng)��用法�Q�不�q�灵�z�L��就不是很大�Q�但也是皮肤技术的最基础的，大家也可以再扩展一下其它用法等�{�的�Q�在下篇文章�Q�也��是Flex皮肤�p�d��文章的（二）中，我会(x��)介绍一下用�E�序代码来编写皮肤，�q�就是不依赖于外部的资源文�g�Q�直接用AS3代码用Graphics来自已画皮肤。下��将�?x��)用到AS3的Draw API斚w��的知识，请大家做好准备�?br />
在此再次向我们的灑֌�战士们给与崇高的敬意�Q?br />

姜大�?/a> 2008-07-29 14:37 发表评论

Tue, 29 Jul 2008 06:33:00 GMT

摘要: 好久没有发表文章了，�q�天写了一个Flash的一个动画菜单的效果�Q�在之前看到一个站的一个菜单效果挺不错�Q�就试着自已也用�U�AS3写一个出来试试。看了一下研�I�了一个算法，自已也写了个出来�Q�写得比较粗�p�，所以运行时可能�q�会(x��)有点��问题，有空要再优化一下算法才行�? 有点�?Apple 的菜单效果。原本是计划用图片的�Q�不�q�后... 阅读全文

姜大�?/a> 2008-07-29 14:33 发表评论

Tue, 29 Jul 2008 06:31:00 GMT

用PV3D做的一个Flex效果�Q�有旉��?x��)整理一下代码与文档贴出来！
以下是效果：(x��)

姜大�?/a> 2008-07-29 14:31 发表评论

Tue, 29 Jul 2008 06:28:00 GMT

�q�篇文章是Flex动画效果变换的最后一�~�了�Q�这��将�?x��)讲�q�Flex中的“变面”�Q�我自已的理解）技术，��x��Transitions�Q?br />
如果看过Flex SDK里面的自带的例子�E�序�Q�有一个叫“Flex Store”的应用，在里面的手机列表中看某一个手机的详细�Ӟ��是�q�种效果�Q�不多说�Q�这��会(x��)比较��单，先看看效果：(x��)

看到了效果了吧，�q�种的变换不隑֮�玎ͼ�再来看看代码再解析：(x��)

1 xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="695" height="555">
3 <mx:states>
4 <mx:State name="A">
5     <mx:SetProperty target="{windowA}" name="width" value="500"/>
6     <mx:SetProperty target="{windowA}" name="height" value="300"/>
7     <mx:SetProperty target="{windowC}" name="width" value="150"/>
8     <mx:SetProperty target="{windowC}" name="height" value="150"/>
9     <mx:SetProperty target="{windowC}" name="y" value="333"/>
10     <mx:SetProperty target="{windowD}" name="x" value="373"/>
11     <mx:SetProperty target="{windowD}" name="width" value="150"/>
12     <mx:SetProperty target="{windowD}" name="height" value="150"/>
13     <mx:SetProperty target="{windowD}" name="y" value="333"/>
14     <mx:SetProperty target="{windowB}" name="x" value="23"/>
15     <mx:SetProperty target="{windowB}" name="y" value="333"/>
16     <mx:SetProperty target="{windowB}" name="width" value="150"/>
17     <mx:SetProperty target="{windowB}" name="height" value="150"/>
18     <mx:SetProperty target="{windowC}" name="x" value="200"/>
19 mx:State>
20 <mx:State name="B">
21     <mx:SetProperty target="{windowD}" name="width" value="150"/>
22     <mx:SetProperty target="{windowD}" name="height" value="150"/>
23     <mx:SetProperty target="{windowC}" name="width" value="150"/>
24     <mx:SetProperty target="{windowC}" name="height" value="150"/>
25     <mx:SetProperty target="{windowA}" name="width" value="150"/>
26     <mx:SetProperty target="{windowA}" name="height" value="150"/>
27     <mx:SetProperty target="{windowB}" name="width" value="500"/>
28     <mx:SetProperty target="{windowB}" name="height" value="300"/>
29     <mx:SetProperty target="{windowA}" name="y" value="333"/>
30     <mx:SetProperty target="{windowC}" name="x" value="200"/>
31     <mx:SetProperty target="{windowC}" name="y" value="333"/>
32     <mx:SetProperty target="{windowB}" name="x" value="23"/>
33     <mx:SetProperty target="{windowD}" name="x" value="373"/>
34     <mx:SetProperty target="{windowD}" name="y" value="333"/>
35 mx:State>
36 <mx:State name="C">
37     <mx:SetProperty target="{windowD}" name="width" value="150"/>
38     <mx:SetProperty target="{windowD}" name="height" value="150"/>
39     <mx:SetProperty target="{windowB}" name="width" value="150"/>
40     <mx:SetProperty target="{windowB}" name="height" value="150"/>
41     <mx:SetProperty target="{windowA}" name="width" value="150"/>
42     <mx:SetProperty target="{windowA}" name="height" value="150"/>
43     <mx:SetProperty target="{windowC}" name="width" value="500"/>
44     <mx:SetProperty target="{windowC}" name="height" value="300"/>
45     <mx:SetProperty target="{windowA}" name="y" value="333"/>
46     <mx:SetProperty target="{windowB}" name="x" value="200"/>
47     <mx:SetProperty target="{windowB}" name="y" value="333"/>
48     <mx:SetProperty target="{windowC}" name="x" value="23"/>
49     <mx:SetProperty target="{windowC}" name="y" value="19"/>
50     <mx:SetProperty target="{windowD}" name="x" value="373"/>
51     <mx:SetProperty target="{windowD}" name="y" value="333"/>
52 mx:State>
53 <mx:State name="D">
54 <mx:SetProperty target="{windowC}" name="width" value="150"/>
55 <mx:SetProperty target="{windowC}" name="height" value="150"/>
56 <mx:SetProperty target="{windowB}" name="width" value="150"/>
57 <mx:SetProperty target="{windowB}" name="height" value="150"/>
58 <mx:SetProperty target="{windowA}" name="width" value="150"/>
59 <mx:SetProperty target="{windowA}" name="height" value="150"/>
60 <mx:SetProperty target="{windowD}" name="width" value="500"/>
61 <mx:SetProperty target="{windowD}" name="height" value="300"/>
62 <mx:SetProperty target="{windowA}" name="y" value="333"/>
63 <mx:SetProperty target="{windowB}" name="x" value="200"/>
64 <mx:SetProperty target="{windowB}" name="y" value="333"/>
65 <mx:SetProperty target="{windowD}" name="x" value="23"/>
66 <mx:SetProperty target="{windowD}" name="y" value="19"/>
67 <mx:SetProperty target="{windowC}" name="x" value="373"/>
68 <mx:SetProperty target="{windowC}" name="y" value="333"/>
69 mx:State>
70 mx:states>
71 <mx:transitions>
72 <mx:Transition fromState="*" toState="*">
73 <mx:Parallel targets="{[windowA, windowB, windowC, windowD]}">
74 <mx:Move />
75 <mx:Resize />
76 mx:Parallel>
77 mx:Transition>
78 mx:transitions>
79 <mx:TitleWindow x="23" y="19" width="250" height="200" layout="absolute" title="A" id="windowA" click="currentState='A'" />
80 <mx:TitleWindow x="309" y="19" width="250" height="200" layout="absolute" title="B" id="windowB" click="currentState='B'" />
81 <mx:TitleWindow x="23" y="260" width="250" height="200" layout="absolute" title="C" id="windowC" click="currentState='C'" />
82 <mx:TitleWindow x="309" y="260" width="250" height="200" layout="absolute" title="D" id="windowD" click="currentState='D'" />
83 mx:Application>

代码�?x��)比较多�Q�我们先看看标签�Q�它是一个集合，��是你的�E�序有多��个状态，什么是状态呢�Q�我自已理解��即是有多少�?#8220;面谱”�Q�即是现在程序里面有四个昄��界面状态，所以里面有四个标签�Q�每�?lt;mx:State>状态都需要有一个名字name属性，以区分是哪个界面状态，在每个状态里面都有很�?lt;mx:SetProperty>的标�{�，看英文都知道了，该标�{��于设�|�这个状态下的所有界面元素的属性（�l��g的属性）�Q�因为每个界面状态中各个�l��g的大��布局都不同，所以在状态标�{�N��p��预先讄��好该状态下的组件的位置与大��，那个target="{windowC}"属性就是设�|�你要设�|�的哪个�l��g的名字拉�Q�name="height"��是你要讄��的属性value="333"��是你要讄��该属性的��|��我们�l�心看看的话�Q�可能会(x��)发现�Q�每个状态里面设�|�的属性，都是width,height,x,y�q�四个属性，我们看看上面的最�l�效果就知道无论切换哪个状态，�l��g间的变换来来��d��都是�U�d��位置与大��改变，��是说当你变换状态时�Q�需要改动哪些属性的�Q�就��它的目标��D��|�在标签里。再看看下面�?lt;mx:transitions>标签�Q�这个也是个集合�Q�里面放着不同的变换方�?lt;mx:Transition>�Q�我们来看看变换标签的代码：(x��)

1 <mx:Transition fromState="*" toState="*">
2 <mx:Parallel targets="{[windowA, windowB, windowC, windowD]}">
3 <mx:Move />
4 <mx:Resize />
5 mx:Parallel>
6 mx:Transition>

formState与toState属性是要设�|�该状态变换是怎样触发的，里面要填上状态的名字�Q?lt;mx:State name="C"> C��是状态的名字�Q�即是如果你formState="A",toState="C"的话�Q�只有从A状态切换到C状态时�Q�才�?x��)��生以上的变换动画效果�Q�如果不附合该规则如A切换到B状态的话，则只�?x��)按状态的属性设�|�值来直接生成视图�Q�而没有动��L��变效果了。如果填�?#8220;*”的话�Q�就是无论是哪个状态切换到哪个�Q�都�?x��)运行动��L��果，至于变换期间用到哪种动画效果来进行渐变，��在它的下��标签里定义了�Q�这里它用到�?lt;mx:Parallel>�q�列播放�U�d��与重整大��的动画效果�Q�之前文章讲�q�，�q�里不多说了。基本上�Q�一个变换就做好了，但我们还需要触发它�Q�也��是��L��变程序当前的昄��状态：(x��)click="currentState='A'" 在每个组件的click事�g里，改变�E�序的currentState��|��是改变�E�序的当前显�C�状态！之后动画效果��׃��(x��)触发了！

�q�点有时��_(d��)��再做一�?D的动��L��果，��会(x��)用到PV3D的框�Ӟ��再整理一个代码与教程也脓(chu��ng)出来跟大家分享吧�Q�不�q�不知道大家对PV3D�q�个东东熟�?zh��n)�不，不熟�?zh��n)�的话，可能看得痛苦点，至于PV3D斚w��的教�E�，我也看看抽点旉��写写吧！先谢�q�大家的支持�Q?br />

姜大�?/a> 2008-07-29 14:28 发表评论

Flex的动��L��果与变换�Q�（二）

Tue, 29 Jul 2008 06:24:00 GMT

在上��文章《Flex的动��L��果与变换�Q�一�Q�》中讲到了��用Flex�pȝ��里面自带的一些动来效果的使用�Q�但很多开发者都�q�不满��Flex里提供的��单的渐变大小�Q�透明�Q�移动，遮罩�{�的效果�Q�如果是Flash的开发者的话，更不用说了，在Flash�Q�多��C�h都是随意的制作一些动��L��果等�Q�而且形态多变。但是不是Flex里就不能实现呢？肯定不是�Q�在Flex里也可以自定义动��L��果，只不�q�就是没有Flash里面那么��单随意了。不�q�熟�(zh��n)�了之后�Q�也�?x��)觉得在Flex里制作动��M��不是什么难事，不多说了�Q��{入正题！

在这里我先介�l�一下Flex里面的动��L��果机�Ӟ��在Flex里面要��用动��L��果的话，先要创徏一个效果标�{�，之后在组仉��Q�如TextInput�Q�写上效果触发器�Q�但可能�?x��)有人问�Q�如果程序里我就只定义一个移动效�?br /> �Q�之后我�E�序里面�?个组�Ӟ��每个�l��g的动��L��果都指向�q�个Move效果�Q�那么它是不是组件一�q�行了效果后�Q�组件二再触发效果，是不是组件一的效果会(x��)消失才会(x��)到组件二里播放？其它不是�Q�虽然我们只定义了一个Move�Q�但我们定义的只是Move效果的工厂，�q�里��q��C��设计模式中的“工厂�Ҏ(gu��)��”模式�Q�其�?个组仉��可以同时�q�行效果�Q��?个效果都是不同的一个实例，彼此独立。所谓工厂方法模式，��好比是一家衣服制造工厂，A走进�q�家工厂说要一件衣服，工厂��制作一件合适A的Size的衣服，B�q�去�Q�就�?x��)生产合适B的衣服，但A与B的衣服都是一��L(f��ng)��。就好等于面向对象中的类与对象的关系一栗��（我可能说多了-_-�Q?br /> 效果�q�行的时候，其实�q�行的不是Move�q�个对象�Q�而是MoveInstance�q�个对象�Q�Move只是工厂�Q�既然一个动��L��果就主要分这两大部䆾�Q�我们就先徏造一个工厂吧�Q?br />
在Flex里面所有的效果的工厂都是��承自 mx.effects.Effect �q�个�c�，我们也不能搞�Ҏ(gu��)��Q�我们自定义的效果也要��扉K��个类�Q�先看以下整个工厂类的代码：(x��)

1 package com.jiangzone.flex.effects {
2     import mx.effects.Effect;
3     import mx.effects.EffectInstance;
4
5     public class MyEffect extends Effect {
6         private var _color:Number = 0xFF0000;
7
8                 public function set color(value:Number):void {
9                          _color = value;
10                 }
11
12         public function MyEffect(newTarget:Object = null) {
13             super(newTarget);
14             instanceClass = MyEffectInstance;
15         }
16
17         override public function getAffectedProperties( ):Array {
18             return [];
19         }
20
21         override protected function initInstance(instance:EffectInstance):void {
22             super.initInstance(instance);
23                         MyEffectInstance(instance).color = _color;
24         }
25     }
26 }

大家看看上面的代码，其中先看构造函敎ͼ�构造函数要接收一个默认�ؓ(f��)�I�的Object对象
public function MyEffect(newTarget:Object = null)
之后在该构造函数里面调用父�cȝ��构造函敎ͼ��q�且��instanceClass�q�个属性设�|��ؓ(f��)你的该效果的实例�c�，因�ؓ(f��)�q�个�c�L��工厂�c�，所以要知道你这个工厂生产什么��品，即上面说�?#8220;衣服”�Q�所以这里我们将其命名�ؓ(f��)MyEffectInstance�Q�注意：(x��)在Flex中的所有效果实例类都是在工厂类后面加Instance�Q�也不是一定，只是规范而已。还有注意，下面一�?x��)定义的实例�cȝ��c�d��一定要跟这里的一致�?br /> 大家�q�会(x��)看到�Q�上面的代码中，复写�Q�override�Q�了二个�Ҏ(gu��)��Q�getAffectedProperties( )与initInstance(instance:EffectInstance)
�q�两个方法都是要复写的，先说说getAffectedProperties( )�q�个�Ҏ(gu��)��Q�这个方法是获取被改变的属性��|��怎么说呢�Q�比如说�Q�你做的动画效果如果要用到组件对象的一些属性的话，��p��q�回�q�些属性的名字�Q�如�Q�你的效果是对组件做旋�{的话�Q�则�Q?br />

1 override public function getAffectedProperties( ):Array {
2 return ["rotation"];
3 }

反正你做的效果需要对�l��g修改什么属性的话，都在�q�个�Ҏ(gu��)��里返回名字，修改多个属性的话就往数组里加��是了�?br /> 后面��是�q�个�Ҏ(gu��)��了initInstance�Q�该�Ҏ(gu��)��接收一个instance:EffectInstance参数�Q�也��是效果实例�c�d��Q�因为每个效果实例类都要�l�承EffectInstance�c�，所以这个方法里的参数写的是父类�Q�在里面要做其它的话�Q�需要将 instance 转换��Z��相应的效果类。在�q�个�Ҏ(gu��)��里面�Q�也是要调用父类的同名方法：(x��)super.initInstance(instance);
基本上，一个工厂类��写好了�Q�但�q�样只是最��单的写法�Q�试��x��Q�每个�h�I�衣服的Size不同�Q�喜�Ƣ的颜色也不同，所以，是不是可以由用户来定义他们想要的效果的颜色等属性呢�Q�当�Ӟ��你对衣服有什么要求，都是向工厂提出的�Q�没有�h�?x��)对衣服说吧�Q�所以，�q�些可设�|�的属性也是定义在工厂�c�里面，所以下面，我们��衣服可定刉��色�ؓ(f��)例，在工厂类里面加入如下代码�Q?br />

1 private var _color:Number = 0xFF0000;
2 public function set color(value:Number):void {
3 _color = value;
4 }

你想�q�行时的效果可以讄��不同的颜色的话，��可以直接设�|�MyEffect的color属性，之后��这个属性传�l�效果实例类�Q?br />

1 override protected function initInstance(instance:EffectInstance):void {
2 super.initInstance(instance);
3 MyEffectInstance(instance).color = _color;
4 }

�q�些�Ҏ(gu��)��果实例类的设�|�，都是要定在initInstance�Ҏ(gu��)��里了�Q�你惛_��q�行时的效果讄��什么属性的话，都要先告诉工厂类�Q�之后工厂类在这个方法里面�{嫁给实例�c�，�q�样�Q�同一个效果，可以�q�行不同的颜艌Ӏ�但前提是你后面要写的实例类要有color�q�个属性�?br /> 现在已做好了工厂�c�M��Q�下面要做效果实例类了，先脓(chu��ng)出完整代码：(x��)

1 package com.jiangzone.flex.effects {
2     import mx.effects.EffectInstance;
3     import flash.display.Shape;
4     import flash.events.Event;
5
6     public class MyEffectInstance extends EffectInstance {
7
8         private var _color:Number;
9         private var shape:Shape;
10
11         public function set color(value:Number):void {
12             _color = value;
13         }
14
15         public function MyEffectInstance(newTarget:Object) {
16             super(newTarget);
17         }
18
19         override public function play( ):void {
20             super.play( );
21             drawShape();
22         }
23
24         private function drawShape():void{
25             shape = new Shape();
26             shape.graphics.beginFill(_color);
27             shape.graphics.drawRect(target.width * -0.5,target.height * -0.5,target.width,target.height);
28             shape.graphics.endFill();
29             shape.x = target.x + target.width * 0.5;
30             shape.y = target.y + target.height * 0.5;
31             target.parent.rawChildren.addChild(shape);
32             target.addEventListener(Event.ENTER_FRAME,onEnterFrame);
33         }
34
35         private function onEnterFrame(e:Event):void{
36             shape.scaleX += 0.1;
37             shape.scaleY += 0.1;
38             shape.alpha -= 0.05;
39             if(shape.alpha <= 0){
40                 target.parent.rawChildren.removeChild(shape);
41                 target.removeEventListener(Event.ENTER_FRAME,onEnterFrame);
42             }
43         }
44     }
45 }

我们看到�Q�每一个动��L��果实例类�Q�都要��承自EffectInstance�q�个�c�，构造函��C��是需要接收一个Object�Q�这个Object其实��是你要应用到的�l��g对象�Q�这个会(x��)是系�l�自动传递的�Q�接收了Object后还要用该Object 调用父类的构造函敎ͼ�(x��)super(newTarget);
之后�q�有一件必做的事，��是重写play()�q�个�Ҏ(gu��)��Q�override public function play( ):void
是不是对play()很熟�(zh��n)�？因�ؓ(f��)�W�一��文章中�Q�就用到�q�个�Ҏ(gu��)��来发动效果的播放的，所以，你需要做的动�ȝ��E�都是在�q�个�Ҏ(gu��)��里。但�q�是要先调用父类的同名方法，super.play();之后的，��是你想怎么��d��怎么��d��。我��画一个与要应用效果的�l��g一样大��的矩型�Q�之后该矩�Ş�?x��)放大�ƈ透明�Q�效果都写在drawShape()�Ҏ(gu��)��里了。看到这个方法里面的代码�Q�是不是跟Flash里的一样了�Q?br /> �q�里再脓(chu��ng)上MXML代码�Q?br />

1 xml version="1.0" encoding="utf-8"?>
2 <mx:Application layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml"
3                                                         xmlns:pf="com.jiangzone.flex.effects.*">
4         <pf:MyEffect id="myEffect" color="0xFFFFFF" />
5         <mx:VBox x="100" y="43">
6                 <mx:TextInput focusInEffect="{myEffect}" />
7                 <mx:TextInput focusInEffect="{myEffect}" />
8                 <mx:TextInput focusInEffect="{myEffect}" />
9                 <mx:TextInput focusInEffect="{myEffect}" />
10         mx:VBox>
11 mx:Application>

�q�里先看看最�l�效果：(x��)

在这里，我用了ENTER_FRAME的写法，但是如果不用ENTER_FRAME方式制作动画的话�Q�还有另外一�U�方法的�Q�那��是Tween了，Tween是以“旉��”为准�Q�而ENTER_FRAME是以“�?#8221;为准�Q�其实到�q�里�Q�一个基本的Flex自定义动��L��果就完成了，但扩展一下的�Q�还可以用Tween来实玎ͼ�而且��用Tween来写动画效果�Q�易控制�Q�清淅一炏V��用Tween实现的话�Q�效果与写法都是差不多的�Q�要用Tween��p��效果实例类�l�承自TweenEffectInstance�q�个�c�，�q��写它的onTweenUpdate( )�Ҏ(gu��)��与onTweenEnd( )�Ҏ(gu��)��Q�这�U�Tween效果的写法，��会(x��)比ENTER_FRAME的写法方便，因�ؓ(f��)它根据的是时��_(d��)��所以，你可以指定效果播攄��旉��Q��ƈ且当播放完毕�?x��)自动调用onTweenEnd()�Ҏ(gu��)��Q�你可以在该�Ҏ(gu��)��里写一些处理操作，如释放资源等�{?br /> �׃��~�幅关系�Q�就不在�q�里详细介绍TweenEffectInstence了，��q��单脓(chu��ng)��cȝ��写法与注释吧�Q?br />

1 package com.jiangzone.flex.effects {
2     import mx.effects.effectClasses.TweenEffectInstance;
3     import flash.display.Shape;
4     import flash.events.Event;
5     import mx.effects.Tween;
6
7     public class MyEffectInstance extends TweenEffectInstance {
8
9         private var _color:Number;
10         private var shape:Shape;
11
12         public function set color(value:Number):void {
13             _color = value;
14         }
15
16         //构造函�?/span>
17         public function MyEffectInstance(newTarget:Object) {
18             super(newTarget);
19         }
20
21         //同样的要重写play()�Ҏ(gu��)��与调用父�c�d��名方�?/span>
22         override public function play( ):void {
23             super.play();
24             drawShape();        //先创��Z��个矩�?/span>
25             /*注意�Q�用Tween效果写法的话�Q�就一定要创徏一个Tween对象
26             �W�一个参数是侦听器，即侦听Update与End的，�q�两个方法都在这个类里，
27             所以这里就写this,�W�二和第三个参数都是一个数�l?br /> 28             �W�二个参数是初始值数�l�，�W�三个是�l�果值数�l�，都要一一对应�Q�第四个是变化时�?br /> 29             �q�里的是[1,1]分别是初始时的scale比例与alpha�Q�[3,0]��是最�l�结果数�?br /> 30             �pȝ��?x��)自动�?000毫秒里��^分这些值来得到渐变效果
31             �q�将每一�ơ数值的改变时调用Update�Ҏ(gu��)��Q�结束后调用End�Ҏ(gu��)��
32                     你也可以��时间的参数发布到工厂类属性里�Q�可以方便设�|�播放时��_(d��)��像Flex自带效果一�?br /> 33                          */
34             new Tween(this,[1,1],[3,0],1000);
35         }
36
37         override public function onTweenUpdate(value:Object):void{
38             //�q�里��改变的数值应用到�l��g对象中。注意：(x��)也要与上面的数值数�l�相对应�?/span>
39             shape.scaleX = Number(value[0]);
40             shape.scaleY = Number(value[0]);
41             shape.alpha = Number(value[1]);
42         }
43
44         override public function onTweenEnd(value:Object):void {
45             //当播攑֮�时会(x��)自动调用该方法，�q�里��做删除该矩形的操作�?/span>
46             target.parent.rawChildren.removeChild(shape);
47         }
48
49         private function drawShape():void{
50             shape = new Shape();
51             shape.graphics.beginFill(_color);
52             shape.graphics.drawRect(target.width * -0.5,target.height * -0.5,target.width,target.height);
53             shape.graphics.endFill();
54             shape.x = target.x + target.width * 0.5;
55             shape.y = target.y + target.height * 0.5;
56             target.parent.rawChildren.addChild(shape);
57         }
58     }
59 }

��写到这里吧�Q�关于Tween其它的，��q��作�ؓ(f��)作业�Q�让大家思考与探烦吧！之后如果有时间的话，��会(x��)写完下篇文章介绍Flex�?#8220;变面”动画�Q�即状态变换！�q�里先谢谢大家支持！

姜大�?/a> 2008-07-29 14:24 发表评论

Tue, 29 Jul 2008 06:20:00 GMT

在Flex里面不像在Flash里面随意制作动画了，Flex更趋向于应用�E�序�Q�而不是动��d��作了�Q�所以没有了旉��轴的概念。在Flex中��用动��L��果，可以用Flex自带的Effect�Q�或者自已定制Effect�Q�因为很多�h都想借Flash里面的一��h��作Flex�Q�比如在Flash里面做一个动态按钮很�Ҏ(gu��)��Q�当鼠标�U�d��C��面时�Q�会(x��)有很多发光的点跑出来�Q�荧火虫效果�Q�，�q�种效果在Flash十分�Ҏ(gu��)��实现�Q�但在Flex里面要实现这�U�效果就不是那么��单的了，下面说说在Flex里的的动务效果的使用与自定义制作�?br />
首先介绍一下Flex里面的自带的效果有以下几�U�：(x��)
Blur                            模糊效果
Move                          �U�d��效果
Fade                          淡入淡出效果
Glow                          发光效果
Resize                       调整大小效果
Rotate                       旋�{效果
Zoom                         �~�放效果
WipeLeft                    用遮�|�实现画面收放效果，下同�Q�分别�ؓ(f��)不同方向
WipeRight
WipeUp
WipeDown

不同的效果所需要设�|�的属性也不一��P��比如Blur效果需要设�|�它的X与Y轴的模糊像素

而Move效果需要设�|�移动的位置信息

其它讄��可以参考Flex语言参�?br />
下面说说如何使用�q�些效果。要�q�行�q�些效果有两�U�方法：(x��)一�U�是调用该效果的play()�Ҏ(gu��)��Q�另外一�U�是使用触发器来触发效果�?br /> �Q?�Q��用play()�Ҏ(gu��)��Q?br /> 先看效果�Q?br />
以下代码�Q?br />

1 xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3     <mx:Script>
4
5             private function onClick(event:Event):void {
6                 be.target = event.currentTarget;
7                 be.play( );
8             }
9         ]]>
10     mx:Script>
11
12     <mx:Blur id="be" blurXTo="50" blurYTo="50" duration="1000" />
13
14     <mx:Panel id="p" width="200" height="180" click="onClick(event)" />
15 mx:Application>

在代码中看到�Q�要使用效果�Q�先定好一个效果，如上面的该标�{�ְ�是模�p�效果的MXML标签�Q�定好效果后在Panel的点��M��仉��再对该效果进行一些设�|�，如be.target = event.currentTarget 讄��该效果将要应用到的目标组�?Component)�Q�之后再调用play()�Ҏ(gu��)��后，该效果就�?x��)应用在Panel上面播放�Q?br />
�Q?�Q��用触发器播放效果�Q?br /> 使用触发器播放效果的话，可以不用写ActionScript代码�Q�直接在�l��g的效果触发器上指明��用哪个效果就可以了，比较��单明了，但就不能�q�行更多的属性定�Ӟ��而用AS控制播放的话�Q�可以对效果�q�行很多的设�|�再相应�Ҏ(gu��)��情况播放�Q�先看看触发器播攄��代码�Q?br />

1 xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3
4     <mx:Blur id="be" blurXTo="50" blurYTo="50" duration="2000" />
5
6     <mx:Panel id="p" width="200" height="180" creationCompleteEffect="{be}" />
7 mx:Application>

看以上代码，先写好了Blur的效果�ƈ讄��好属性后�Q�duration="2000"�q�个是播攄��旉��以毫�U��ؓ(f��)单位�?br /> 在Panel标签里有�q�样一句：(x��)creationCompleteEffect="{be}" �q�个��是触发器，是该Panel�l��g的效果触发器�Q�当P(y��ng)anel�l��g加蝲完成�Ӟ��?x��)由�pȝ��自动调用该效果触发器�Q�触发器里面指了触发 be �q�个Blur效果
在Flex里面�q�有很多触发器如�Q?br /> addedEffect                                       被添加进容器时触发效�?br /> removedEffect                                   被从容器中移除时触发效果
creationCompleteEffect                     被创建成功时触发效果
focusInEffect                                     获得焦点时触�?br /> focusOutEffect                                   失去焦点时触�?br /> hideEffect                                          被隐藏时(visible=false)触发
showEffect                                        被显�C�时(visible=true)触发
rollOverEffect                                     鼠标�l�过时触�?br /> rollOutEffect                                       鼠标��d��时触�?br /> mouseDownEffect                              鼠标按下时触�?br /> mouseUpEffect                                   鼠标村ּ�时触�?br /> moveEffect                                         被移动时触发
resizeEffect                                       被重整大��时触发

注意�Q�这些都是效果触发器�Q�不要与事�g触发器�؜�׃��。事件触发器是rollOver�Q�事件触发器与效果触发器差不多，事�g触发器是当用��h��行相��操作时触发事�g�Q�将�?x��)调用自定的事�g触发处理函数�Q�而效果触发器是执行相应操作时被触发�ƈ��q��l�自动调用所定的效果的play()�Ҏ(gu��)��?br />
现在说说效果的一些其它属性：(x��)
每个效果都有reverse( );�Ҏ(gu��)��Q�该�Ҏ(gu��)��是反向播放，原本由小到大的变化，而调用reverse( );后再�q�行play()的话�Q�效果将�?x��)从大到��进行播放�?br /> 但要注意的一�Ҏ(gu��)��Q�reverse( );不会(x��)自动播放�Q�即是单单调用reverse( );的话�Q�效果�ƈ不会(x��)播放�Q�他只会(x��)记录该效果�ؓ(f��)倒�{�Q�而要再调用play()后倒�{效果才会(x��)开始播放。而调用pause( )与resume( )��是暂停与��l�播放效�?br />
startDelay�q�个属性是讄��效果的播攑֚g�Ӟ��以毫�U��ؓ(f��)单位�Q�即要等待多��毫�U�后效果才开始播放，如：(x��)

该模�p�效果将�?x��)在调用play()之后3�U�才开始播�?br />
repeatCount�q�个属性是讄��效果的重复次敎ͼ�默认�?�Q�设�|��ؓ(f��)0的话��是不停循环播放

每个效果都有两个事�g�Q�effectStart �?effectEnd
你可以在该效果事件的处理函数里面�Ҏ(gu��)��果作相应的操作，如：(x��)

1 xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3     <mx:Script>
4
5             import mx.events.EffectEvent;
6             public function onEffEnd(e:EffectEvent):void{
7                 e.effectInstance.reverse();
8                 e.effectInstance.play();
9             }
10         ]]>
11     mx:Script>
12     <mx:Blur id="be" blurXTo="50" blurYTo="50" duration="2000" />
13
14     <mx:Panel id="p" width="200" height="180" creationCompleteEffect="{be}" effectEnd="onEffEnd(event)" />
15 mx:Application>

当效果播攑֮��Ӟ��pȝ��会(x��)自动触发effectEnd事�g�Q�在处理函数里面�Q�将该效果Instance即现时播攄��效果实例�q�行倒�{�q�播放，当播攑֮��Q�又�?x��)触发effectEnd事伯�Q�这样一直��@环！

现在再来说说效果的组合：(x��)
通常如果你觉得只应用一个效果很单调的话�Q�可以进行效果组合应用，卛_��个效果同时播放或者顺序播放，
如，当加载页面时�Q�你想Panel先模�p�到一定程度，再将Panel�U�d��到某个位�|�，再把Panel�q�原成原来的清淅度（��x��退模糊�Q�。这样分析一下，一��q��了三个效果，一�Q�先应用Blur�Q�由清至模）效果�Q�当Blur完成�Ӟ��再应用Move效果�Q�当Move完成�Ӟ��再应用另外一个Blur�Q�由模至清）效果。这样三个效果组合就是按��序�l�合�Q�先后运行。先来看看效果：(x��)

再来看看代码�Q?br />

1 xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3
4     <mx:Sequence id="sequenceEffect">
5         <mx:Blur id="beOut" blurXTo="50" blurYTo="50" duration="500" />
6         <mx:Move id="mv" xTo="200" yTo="150" duration="500" />
7         <mx:Blur id="beIn" blurXFrom="50" blurYFrom="50" blurXTo="0" blurYTo="0" duration="500" />
8     mx:Sequence>
9
10     <mx:Panel id="p" width="200" height="180" mouseDownEffect="sequenceEffect"  />
11 mx:Application>

看以上代码，标签��是��序�l�合效果标签�Q�当应用sequenceEffect效果的时候，它会(x��)按顺序播放该标签里面的三个子效果�?br />
另外的就是同时播放了�Q?br />

1 <mx:Parallel id="parallelEffect">
2 <mx:Blur id="beOut" blurXTo="50" blurYTo="50" duration="500" />
3 <mx:Move id="mv" xTo="200" yTo="150" duration="500" />
4 mx:Parallel>

�q�个标签��是同时播放的效果标�{�，攑֜�它里面的子效果都�?x��)同时播放，即一�Ҏ(gu��)��p�一边移动。这个都可以自由�l�合�Q?lt;mx:Parallel>�?lt;mx:Sequence>标签都可以自��q��合，例如先按��序先播放模�p�，再同时播攄��动与隐藏�{�。这里就不多说了�?br />
使用Flex自带的效果基本用法就�q�些�Q�下��文章将讨论自定义效果的制作�Q�下��将�?x��)详�l�说说这��文章上面说到的 effectInstance 卛_��例与工厂的概��c(di��n)�?br />

姜大�?/a> 2008-07-29 14:20 发表评论

Tue, 29 Jul 2008 06:16:00 GMT

      �q�来在学�?f��n)Flash�?D技术，现在我看�q�的��PV3D 与Away3D�q�两个开源框�Ӟ��感觉�q�不错，好像Away3D的效果好点，但效率不如PV3D�Q�PV3D��是��Mؓ(f��)�Q�不�?x��)用五笔打这个�?_-�Q�我机子里又没拼韌��入，��就下吧�Q�）3D�Q�不��这么多了，做个东西�l�练手，先看效果�Q?br />

[url=http://www.jiangzone.com.cn/jiang/3dmusic/soundtest.swf]�q�里看看效果�Q�[/url]

    �q�个�E�序很简单到没无��单了�Q�就只是用了PV3D框架中的Cube�?D对象�Q�一口气生成64个放在数�l�里待用�Q�之后用Flash里的声音�c�d��载�ƈ播放声音�Q�之后在ENTER_FRAME事�g里检��当前声音的频谱�Q�之后根据频��q��高低来调整Cube格子的高低，在Flash里获取的声音频谱�?12个Float数据�Q�代�?12�U�频谱，而前256�U��ؓ(f��)LeftChangle�Q�后256�U��ؓ(f��)RightChangle�Q�由于如果生�?56�?D对象的话�Q�对CPU来说是个考验�Q�所以就折中间隔抽取64个频�D�|��昄��Q�由于懒于写代码了，��只写了LeftChangle的频谱�?br />
    以下是代码：(x��)

  1 //************导入需要用到的�c?/span>
  2 import flash.display.Sprite;
  3 import org.papervision3d.scenes.Scene3D;
  4 import org.papervision3d.cameras.FreeCamera3D;
  5 import org.papervision3d.objects.Cube;
  6 import org.papervision3d.materials.MaterialsList;
  7 import org.papervision3d.materials.WireframeMaterial;
  8 import org.papervision3d.materials.ColorMaterial;
  9 import org.papervision3d.cameras.Camera3D;
10 import     org.papervision3d.objects.Plane;
11
12 //************定义需要用到的对象
13 var cont:Sprite;
14 var scene:Scene3D;
15 var camera:FreeCamera3D;
16 var ml:MaterialsList;
17 var material:ColorMaterial;
18 var cubeArr:Array;
19
20 //***********讄��攄��3D东东的容�?/span>
21 cont = new Sprite();
22 cont.x = 150;
23 cont.y = 120;
24 this.addChild(cont);
25
26 //******讄��一�?D场景�Q��ƈ讄��好Camera的位�|�与角度
27 scene = new Scene3D(cont);
28 camera = new FreeCamera3D();
29 camera.z = 1200;
30 camera.x = 100;
31 camera.y = 700;
32 camera.rotationX = -30;
33 camera.rotationY = 180;
34 camera.focus = 100;
35 camera.zoom = 10;
36
37 //***********定义一个存放所有格子的数组
38 cubeArr = new Array();
39
40 //定义一个颜色材质与材质列表�Q�用于应用于格子�?个面的脓(chu��ng)�?/span>
41 material = new ColorMaterial(0x096288);
42 ml = new MaterialsList();
43 ml.addMaterial(material,"front");
44 ml.addMaterial(material,"back");
45 ml.addMaterial(material,"top");
46 ml.addMaterial(material,"bottom");
47 ml.addMaterial(material,"left");
48 ml.addMaterial(material,"right");
49
50 var i:int = 0;
51 var j:int = 0;
52
53 //生成64个小格子�q�排列好位置
54 for(;i<64;i++){
55     ml.addMaterial(new ColorMaterial(0xB9DFCF),"top");
56     var c:Cube = new Cube(ml,20,20,20);
57     c.x = (i % 8) * (20 + 5);
58     c.z = (j % 8) * (20 + 5);
59     (i % 8 == 0) ? j++:j=j;
60     cubeArr[i] = c;
61     scene.addChild(c);
62 }
63
64 //创徏一个面板，讄��好位�|�放在小格子队列的下面（地板�Q?/span>
65 var plane:Plane = new Plane(new WireframeMaterial(0xaaaaaa),300,300,7,7);
66 plane.rotationX = -90;
67 plane.y = -50;
68 plane.x = 70;
69 plane.z = 60;
70 scene.addChild(plane);
71
72 //以上�?D部分�Q�以下是声音部分
73 //建立一个字节数�l�用于存放获取到的频�׃��?/span>
74 var bArr:ByteArray = new ByteArray();
75 //��d��声音文�g�q�播�?/span>
76 var req:URLRequest = new URLRequest("a.mp3");
77 var sound:Sound = new Sound(req);
78 sound.play();
79
80 //��d��一个事件侦听器
81 this.addEventListener(Event.ENTER_FRAME,onEnter);
82
83 function onEnter(e:Event):void{
84     //获取当前声音频谱�Q�将数据存放在bArr里面�?br /> 85     //true为频谱模式，0为采��L(f��ng)��代号
86     SoundMixer.computeSpectrum(bArr,true,0);
87     i=0;
88     //��d��?56个数据，即Left声道的频�?/span>
89     for(;i<256;i++){
90         var temp:Number = bArr.readFloat();
91         //间隔4个数据中获取一个显�C?/span>
92         if(i % 4 == 0){
93             //从数�l�中获取相应的格�?/span>
94             var c:Cube = cubeArr[i/4] as Cube;
95             //讄��格子在三�l�坐标中的高�?br /> 96             //�׃��频谱数据�?-1�Q�所以将其放�?00�?/span>
97             c.y = temp * 100;
98         }
99     }
100     //镜头旋�{�U�d��
101     camera.moveLeft(12);
102     camera.rotationY += 0.6;
103     scene.renderCamera(camera);
104 }

姜大�?/a> 2008-07-29 14:16 发表评论