首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

大家猜猜这个效果是怎么实现的

2012-02-14 
大家猜猜这个效果是如何实现的?下面这个Flex做的网站,里面的TAB页切换的效果很舒服。请问是如何实现的啊?ht

大家猜猜这个效果是如何实现的?
下面这个Flex做的网站,里面的TAB页切换的效果很舒服。请问是如何实现的啊?

http://www.mvelopes.com/mvelopes/online_budget.php%20flex

[解决办法]
不知道,底下TabNavigater的效果可能是用move
[解决办法]
这个貌似不难吧,上面的tabControl可以自定义,然后用state来切换就好了呀
[解决办法]
有点意思,虽然这个效果很多地方都看到过,就是没想过要实现,平时也很少用effect,出于兴趣早上写了个差不多的,供参考
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Script>
<![CDATA[
import mx.effects.Effect;
import mx.events.EffectEvent;
import mx.core.Container;
import mx.events.IndexChangedEvent;

private function onTabChanged(event:IndexChangedEvent):void
{
var oldIndex:int = event.oldIndex;
var newIndex:int = event.newIndex;

var oldTab:Container = tn.getChildAt(oldIndex) as Container;
var newTab:Container = tn.getChildAt(newIndex) as Container;

var childWidth:int = oldTab.width;
oldTab.visible = true;
newTab.y = oldTab.y;

hideEff.end();
showEff.end();
if(oldIndex < newIndex)
{
hideEff.target = oldTab;
hideEff.xFrom = 0;
hideEff.xTo = -childWidth;

showEff.target = newTab;
showEff.xFrom = childWidth;
showEff.xTo = 0;
}
else
{
hideEff.target = oldTab;
hideEff.xFrom = 0;
hideEff.xTo = childWidth;

showEff.target = newTab;
showEff.xFrom = -childWidth;
showEff.xTo = 0;
}
hideEff.play();
showEff.play();
}

private function onEffEnd(event:EffectEvent):void
{
Container(Effect(event.currentTarget).target).visible = false;
}
]]>
</mx:Script>
<mx:Move id="hideEff" duration="1500" effectEnd="onEffEnd(event)"/>
<mx:Move id="showEff" duration="1500"/>

<mx:TabNavigator id="tn" width="100%" height="100%" creationPolicy="all" change="onTabChanged(event)">
<mx:VBox label="box1" borderStyle="solid" borderThickness="10" borderColor="0x000000">
<mx:Text text="box11111111111111111111111111111111111111111111111111111111111111111111111111111111111"/>
</mx:VBox>
<mx:VBox label="box2" borderStyle="solid" borderThickness="10" borderColor="0xff0000">
<mx:Text text="box22222222222222222222222222222222222222222222222222222222222222222222222222222222222"/>
</mx:VBox>
<mx:VBox label="box3" borderStyle="solid" borderThickness="10" borderColor="0x00ffff">
<mx:Text text="box333333333333333333333333333333333333333333333333333333333333333333333333333333333333"/>
</mx:VBox>
</mx:TabNavigator>
</mx:Application>

热点排行