淡入效果兩行程式

說真的,只要兩行程式ㄟ!!都不知道在幹嘛,這年頭寫程式怎麼可以精簡成這樣啊!


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Fade id="myFade" duration="5000"></mx:Fade>
<mx:Image creationCompleteEffect="{myFade}" source="@Embed(source='img/pic1.jpg')"></mx:Image>
</mx:Application>

這就是產生淡入效果全部的程式碼,包含Flex幫你寫好的1、2、5行,真是不知道該說什麼,來解釋一下這個圖片淡入效果的作法好了,其實它是用到behavior的效果,而這些效果當然也是內建就已經存在的,基本上,我們只要引用就可以了。全部的程式只有兩件事要做,第一:告訴電腦你的fad要多久 ,第二:告訴電腦是哪一張圖要用fad效果,很簡單吧!

直接來看程式碼,記得,順便準備一張圖在檔案的附近,只要知道相對位置就可以了!

<mx:Fade id="myFade" duration="5000"></mx:Fade>

這行程式碼把淡入的效果做了一些設定,duration的部份是設定它的時間,這裡是5秒鐘(單位是毫秒),還有就是請給這個淡入效果一個唯一的id,這裡命名為myFade,晚點要指名找他。


<mx:Image creationCompleteEffect="{myFade}" source="@Embed(source='img/pic1.jpg')"></mx:Image>

這一行程式碼則是把你要的圖檔叫進來,creationCompleteEffect="{myFade}"就是在呼叫那個淡入的效果,看,現在不就點名找它了嗎? source="@Embed(source='img/pic1.jpg')" 則是定義圖檔的來源,embed是引用外部檔案用的語法,裡面的source則是它的屬性,在這裡把圖檔的相對路徑丟進去。

注意, source="@Embed(source='img/pic1.jpg')"的單引號及雙引號請不要弄錯,要就外雙內單,要就外單內雙,不要兩個都用一樣的,程式會產生錯誤(ㄟㄟ,這是基本觀念喔!)。

寫完執行之後,你就看到很棒的淡入效果了!吼~會不會太簡單了一點啊!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s