写javascript我已经快写到麻木的程度了,从表单验证,到JS+DHTML又到AJAX各种框架(DWR,prototype,YUI,jSON......)的热潮一波接一波,甚至还面向对象式的来封装JS.顺便提一下,我手头儿快结项的一个项目竟然是one page,one application,意思就是整个项目只有一个页面,这个主页面里include很多其它子页面,每个页面里都是DIV组成,在第一次将整个项目加载进来,完全用JS和AJAX来处理显示,逻辑,以及特效. 这里不讨论这种架构设计的优劣,我只想表明,我在JS里折腾得够呛,特别是IE6,IE7...FF2,FF3,opera,sarfria....这些浏览器全要兼容.可是项目摆在这里,任务总是要完成的,好在经过几个月的努力现在基本上测试完毕.
Flex的诞生其实给了程序员更多的选择,给了设计师更多的灵感和创意空间,这个效果还是很早以前学习FLEX时做的,效果可能并不能让你夺目,可是当你看完它的源码之后,你是否也该惊叹,ActionScript3的神奇力量.(这里的MX标签其实也是AS类)如此之少的代码可以带给用户更多的精彩.不是一种更好的选择吗?
不多说了,如果效果你不满意,就看看MM放松下吧.
(下面的不是截图,请点击图片)
别忘了学习,看完MM,再看看源码吧(这是很早以前的练习,里面的命名都不是很规范,也没时间整理,大家凑合着看):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="black">
<mx:states>
<mx:State name="can1State">
<mx:SetProperty target="{can3}" name="width" value="100"/>
<mx:SetProperty target="{can3}" name="height" value="100"/>
<mx:SetProperty target="{can3}" name="x" value="10"/>
<mx:SetProperty target="{can3}" name="y" value="120"/>
<mx:SetProperty target="{can1}" name="width" value="300"/>
<mx:SetProperty target="{can1}" name="height" value="300"/>
<mx:SetProperty target="{can1}" name="x" value="120"/>
<mx:SetProperty target="{can2}" name="y" value="10"/>
</mx:State>
<mx:State name="can2State" basedOn="can1State">
<mx:SetProperty target="{can1}" name="width" value="100"/>
<mx:SetProperty target="{can1}" name="height" value="100"/>
<mx:SetProperty target="{can1}" name="x" value="10"/>
<mx:SetProperty target="{can1}" name="y" value="120"/>
<mx:SetProperty target="{can2}" name="width" value="300"/>
<mx:SetProperty target="{can2}" name="height" value="300"/>
<mx:SetProperty target="{can2}" name="x" value="120"/>
<mx:SetProperty target="{can3}" name="y" value="10"/>
</mx:State>
</mx:states>
<mx:Script>
<![CDATA[
import mx.effects.easing.Bounce;
[Bindable]
private var ss:*=can3;
[Bindable]
private var up:*=can2;
[Bindable]
private var down:*=can3;
[Bindable]
[Embed(source="asset/1.jpg")]
private var redImg:Class;
[Bindable]
[Embed(source="asset/2.jpg")]
private var greenImg:Class;
[Bindable]
[Embed(source="asset/3.jpg")]
private var blueImg:Class;
]]>
</mx:Script>
<mx:Style>
Canvas{
borderThickness:"3";
borderStyle:"solid";
horizontalScrollPolicy:"off";
verticalScrollPolicy:"off";
}
</mx:Style>
<mx:transitions>
<mx:Transition>
<mx:Parallel targets="{[can1,can2,can3]}">
<mx:Resize duration="200" easingFunction="Bounce.easeOut"/>
<mx:Move xTo="120" duration="500" yTo="10" target="{ss}"/>
<mx:Move xTo="10" yTo="10" duration="500" target="{up}"/>
<mx:Move xTo="10" yTo="120" duration="500" target="{down}"/>
<mx:Resize widthFrom="100" widthTo="300" heightFrom="100" heightTo="300" duration="1000" target="{ss}"/>
<mx:Sequence>
<mx:Blur duration="500" blurYFrom="1.0" blurYTo="20.0"/>
<mx:Blur duration="500" blurYFrom="20.0" blurYTo="1"/>
</mx:Sequence>
</mx:Parallel>
</mx:Transition>
</mx:transitions>
<mx:Canvas borderColor="red" backgroundColor="black" id="can1" width="100" height="100" x="10" y="10" click="ss=can1;up=can2;down=can3;currentState='can1State';">
<mx:Image source="{redImg}" width="100%" height="100%" scaleX="1" scaleY="1"/>
</mx:Canvas>
<mx:Canvas borderColor="green" backgroundColor="white" id="can2" width="100" height="100" x="10" y="120" click="ss=can2;up=can3;down=can1;currentState='can2State';">
<mx:Image source="{greenImg}" width="100%" height="100%"/>
</mx:Canvas>
<mx:Canvas borderColor="blue" backgroundColor="red" id="can3" width="300" height="300" x="120" y="10" click="ss=can3;up=can1;down=can2;currentState='';">
<mx:Image source="{blueImg}" width="100%" height="100%"/>
</mx:Canvas>
</mx:Application>