首頁 > FLEX, 程式設計 > 使用 ViewStack 製作 YAHOO 首頁的焦點新聞效果

使用 ViewStack 製作 YAHOO 首頁的焦點新聞效果

2009年8月3日  瀏覽次數 : 2,531
閱讀評論 發表評論

今天一位網友突然敲我說，他想要製作類似 YAHOO 焦點新聞的效果，可是一直製作都有問題，因此就敲我求救，所以就製作給他看看，不過後來看他的原始碼才知道，原來他根本沒用到 ViewStack 這個元件，難怪會寫的這麼辛苦，而且還頻頻出錯。

image 圖片 : YAHOO 首頁，紅框的部分就是製作項目

要達成這種效果只要使用 ViewStack 就可以很輕鬆的完成我們的題目，因為時間關係，我就沒有另外再修改外觀效果，畢竟還是功能導向麻。

使用方法，我們只要將 視覺元件 放入 ViewStack 的 TAG 中就可以，值得注意的是，每一個視覺元件放入 ViewStack 後就會自動變成一個分頁喔。

CODE

?View Code FLEX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="14">
	<mx:Script>
		<![CDATA[
			import mx.controls.Button;
			import mx.events.StateChangeEvent;
			import mx.events.IndexChangedEvent;
			[Embed(source="a.jpg")]
			[Bindable]
			private var aImage:Class;
 
			[Embed(source="b.jpg")]
			[Bindable]
			private var bImage:Class;
 
			[Embed(source="c.jpg")]
			[Bindable]
			private var cImage:Class;
 
			[Embed(source="d.jpg")]
			[Bindable]
			private var dImage:Class;
 
			[Embed(source="e.jpg")]
			[Bindable]
			private var eImage:Class;
 
			private var btn:Button ;
 
			private function indexChangeHandler(event:Event):void{
				if(this.btn != null){
					this.btn.enabled = true;
				}
 
				this.btn = event.currentTarget as Button;
 
				switch(btn.label){
					case "焦點新聞":
						this.myView.selectedIndex = 0 ;
						break;
					case "運動":
						this.myView.selectedIndex = 1 ;
						break;
					case "娛樂":
						this.myView.selectedIndex = 2 ;
						break;
					case "新奇":
						this.myView.selectedIndex = 3 ;
						break;
					case "話題":
						this.myView.selectedIndex = 4 ;
						break;
				}
				btn.enabled = false ;
			}
		]]>
	</mx:Script>
 
 
 
	<mx:HBox>
		<mx:Button label="焦點新聞" mouseOver="indexChangeHandler(event)"/>
		<mx:Button label="運動" mouseOver="indexChangeHandler(event)"/>
		<mx:Button label="娛樂" mouseOver="indexChangeHandler(event)"/>
		<mx:Button label="新奇" mouseOver="indexChangeHandler(event)"/>
		<mx:Button label="話題" mouseOver="indexChangeHandler(event)"/>
	</mx:HBox>
	<mx:ViewStack id="myView">
		<mx:VBox label="焦點新聞">
			<mx:Image source="{this.aImage}"/>
		</mx:VBox>
		<mx:VBox label="運動">
			<mx:Image source="{this.bImage}"/>
		</mx:VBox>
		<mx:VBox label="娛樂">
			<mx:Image source="{this.cImage}"/>
		</mx:VBox>
		<mx:VBox label="新奇">
			<mx:Image source="{this.dImage}"/>
		</mx:VBox>
		<mx:VBox label="話題">
			<mx:Image source="{this.eImage}"/>
		</mx:VBox>
	</mx:ViewStack>
</mx:Application>

執行結果 :

showExample[1]

不過因為沒有花很多時間，因此本來我應該用 LINKBAR 來製作，不過後來想想如果使用 BUTTON 的話會比較多可以修改的。內容的部分我就貼個假圖吧。其實這個範例把它製作的完整一點也可以用來作一些廣告輪播等等的喔。

再來看看網友的程式碼吧，他用了很多 CANVAS 的隱藏顯示的效果，因此在執行上會有點卡卡的，如果用了 ViewStack 就可以省去很多麻煩了。

CODE

?View Code FLEX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Style source="aaa.css"/>
	<mx:Script>
		<![CDATA[
		private function today_show():void
		{
			can.visible=true;
		}
		private function today_close():void
		{
			//can.visible=false;
		}
		private function select_show():void
		{
			can0.visible=true;
		}
		private function select_close():void
		{
			can0.visible=false;
		}
		private function popular_show():void
		{
			can1.visible=true;
		}
		private function popular_close():void
		{
			can1.visible=false;
		}
		private function sell_show():void
		{
			can2.visible=true;
		}
		private function sell_close():void
		{
			can2.visible=false;
		}
		private function lose_show():void
		{
			can3.visible=true;
		}
		private function lose_close():void
		{
			can3.visible=false;
		}
 
		[Embed(source="images/today.jpg")]
		[Bindable]
		private var todayImage:Class;
 
    ]]>
	</mx:Script>
	<mx:Canvas x="51" y="265" width="425" height="236" id="can" backgroundColor="#96E9EA">
		<mx:Image x="10" y="11" source="{this.todayImage}"/>
	</mx:Canvas>
	<mx:HBox width="55" height="41" id="ha0" visible="false" x="213" y="52" backgroundColor="#F2F03E">
	</mx:HBox>
	<mx:Resize id="myResize" duration="100"
		widthTo="85" heightTo="38"/>
	<mx:Resize id="unResize" duration="100" 
		widthTo="85" heightTo="35"/>
	<mx:Canvas x="51" y="224" width="425" height="43">
		<mx:Button label="今日最殺" width="85" height="35" fillAlphas="[1.0, 1.0, 1.0, 1.0]" fillColors="[#FBD774, #FBD774, #F2B207, #F29C07]" id="B1" rollOverEffect="{myResize}" rollOutEffect="{unResize}" x="0" y="0" mouseOver="today_show()" mouseOut="today_close()"/>
		<mx:Button label="館長嚴選" width="85" height="35" fillAlphas="[1.0, 1.0, 1.0, 1.0]" fillColors="[#FBD774, #FBD774, #F2B207, #F29C07]" id="B0" rollOverEffect="{myResize}" rollOutEffect="{unResize}" x="84" y="0" mouseOver="select_show()" mouseOut="select_close()"/>
		<mx:Button label="超猛人氣" width="85" height="35" fillAlphas="[1.0, 1.0, 1.0, 1.0]" fillColors="[#FBD774, #FBD774, #F2B207, #F29C07]" id="B2" rollOverEffect="{myResize}" rollOutEffect="{unResize}" x="168" y="0" mouseOver="popular_show()" mouseOut="popular_close()"/>
		<mx:Button label="熱賣強檔" width="85" height="35" fillAlphas="[1.0, 1.0, 1.0, 1.0]" fillColors="[#FBD774, #FBD774, #F2B207, #F29C07]" id="B3" rollOverEffect="{myResize}" rollOutEffect="{unResize}" x="252" y="0" mouseOver="sell_show()" mouseOut="sell_close()"/>
		<mx:Button label="絕對必敗" width="85" height="35" fillAlphas="[1.0, 1.0, 1.0, 1.0]" fillColors="[#FBD774, #FBD774, #F2B207, #F29C07]" id="B4" rollOverEffect="{myResize}" rollOutEffect="{unResize}" x="336" y="0" mouseOver="lose_show()" mouseOut="lose_close()"/>
		<mx:Image x="0" y="43"/>
	</mx:Canvas>
	<mx:Canvas x="51" y="265" width="425" height="236" id="can0" backgroundColor="#3C4109" visible="false">
		<mx:Button x="165" y="111" label="Button" fillAlphas="[1.0, 1.0]" fillColors="[#F2B207, #F2B207]"/>
	</mx:Canvas>
	<mx:Canvas x="51" y="265" width="425" height="236" id="can1" backgroundColor="#EA96AD" visible="false">
		<mx:Button x="165" y="111" label="Button" fillAlphas="[1.0, 1.0]" fillColors="[#F2B207, #F2B207]"/>
	</mx:Canvas>
	<mx:Canvas x="51" y="265" width="425" height="236" id="can2" backgroundColor="#C396EA" visible="false">
		<mx:Button x="165" y="111" label="Button" fillAlphas="[1.0, 1.0]" fillColors="[#F2B207, #F2B207]"/>
	</mx:Canvas>
	<mx:Canvas x="51" y="265" width="425" height="236" id="can3" backgroundColor="#2DD83D" visible="false">
		<mx:Button x="165" y="111" label="Button" fillAlphas="[1.0, 1.0]" fillColors="[#F2B207, #F2B207]"/>
	</mx:Canvas>
	<mx:ApplicationControlBar x="10" y="10" width="980" height="71">
		<mx:Spacer height="0" width="769"/>
		<mx:Canvas width="187" height="69">
			<mx:LinkButton label="註冊" id="LB1" width="50" height="30" fontWeight="bold" fontSize="13" textAlign="center" x="3" y="19"/>
			<mx:LinkButton label="登入" width="50" height="30" fontWeight="bold" fontSize="13" id="LB2" x="53" y="19"/>
			<mx:LinkButton label="地圖" width="69" height="30" fontSize="16" color="#F81A0F" fontWeight="bold" themeColor="#00FF00" overIcon="@Embed(source='images/map_11.jpg')" x="118" y="18"/>
		</mx:Canvas>
	</mx:ApplicationControlBar>
</mx:Application>

Random Posts

Loading…

:: 把這篇好文推到書籤網站與更多人分享吧 ::
  • funp
  • Hemidemi
  • YahooKimo
  • Google
  • udn
  • Haohao
  • Live

相關文章 :

Ausir FLEX, 程式設計 , , ,

  1. fisher
    2009年8月3日22:03 | #1
    回覆 | 引用

    好強, 學走了:)

  2. 組羊
    2009年8月4日01:05 | #2
    回覆 | 引用

    還是要挺師父一下~~~

  3. 炮爺
    2009年8月4日01:50 | #3
    回覆 | 引用

    網站太多東西了Orz
    不然還真想加進去這東東

  4. 拆組達人
    2009年8月4日09:04 | #4
    回覆 | 引用

    筆記…應該會派的上用場！^^

  5. 愛德
    2009年8月4日09:26 | #5
    回覆 | 引用

    學起來 (寫筆記中)

    每次逛都收穫很多

  6. Ausir
    2009年8月4日11:48 | #6
    回覆 | 引用

    哇喔 = =

    原來我還是有支持者….
    偷笑了~

  7. 梅干扣肉
    2009年8月4日12:38 | #7
    回覆 | 引用

    總算有新文章了喔~~
    混很久了喔~~~

  8. Ausir
    2009年8月4日15:23 | #8
    回覆 | 引用

    @梅干扣肉

    = = 你…

    難道逼我今天要再來一篇!?~

  9. 莫小屁
    2009年8月4日15:57 | #9
    回覆 | 引用

    真得很久沒文章了~這篇不錯不錯阿!!
    狀態:偷學ing

  10. scorpio
    2009年8月4日22:16 | #10
    回覆 | 引用

    哈~趁著梅干糗你..我也要來火上加油

  11. cloudfly
    2009年9月1日16:04 | #11
    回覆 | 引用

    哈!久沒來逛了。
    不錯喔!很棒的範例教學，推一個…^__^

  1. 本篇文章目前尚無任何 trackbacks 和 pingbacks。