從Flash到Silverlight進(jìn)階教程

用代碼來(lái)創(chuàng)建動(dòng)畫

這節(jié)里將要講述一個(gè)自定義用戶控件最基本的操作，就好象Flash中的MovieClips一樣，動(dòng)態(tài)的將其添加到舞臺(tái)上。 首先你將要看到如何用ActionScript來(lái)添加一個(gè)MC到舞臺(tái)中。
讓我們來(lái)看看在Flash中都做了什么。

新建flash文件

在第一幀添加兩個(gè)按鈕起好實(shí)例名稱

導(dǎo)入一張圖片，以中心注冊(cè)為MovieClips，將鏈接標(biāo)識(shí)符設(shè)置為“man”

新建立一層命名為“as”，添加如下代碼

as2.0版本：
reset_btn.enabled?=?false;
add_btn.onRelease?=?function()?{
????var?n:Number?=?_root.getNextHighestDepth();
????var?tx:Number?=?400/2;
????var?ty:Number?=?300/2;
????_root.attachMovie("man","man",n);
????_root["man"]._x?=?tx;
????_root["man"]._y?=?ty;
????add_btn.enabled?=?false;
????reset_btn.enabled?=?true;
};
reset_btn.onRelease?=?function()?{
????_root["man"].removeMovieClip();
????reset_btn.enabled?=?false;
????add_btn.enabled?=?true;
};

?as3.0 版本

package?{
????import?flash.display.MovieClip;
????import?flash.events.*;

????public?class?Lession01a?extends?MovieClip
????{
????????private????var?addbtn;
????????private????var?resetbtn;
????????private?var?m:Man;
????????public?function?Lession01a()
????????{
????????????addbtn?=?this.getChildByName("add_btn");
????????????resetbtn?=?this.getChildByName("reset_btn");
????????????addbtn.addEventListener(MouseEvent.CLICK,onAddbtnClick);
????????????resetbtn.addEventListener(MouseEvent.CLICK,onResetbtnClick);
??????????? //trace(addbtn);
??????????? resetbtn.enabled?=?false;
????????}
????????
????????public function?onAddbtnClick(e:MouseEvent):void?{
????????????m?=?new?Man();
????????????m.x=200;
????????????m.y=150;
????????????addChild(m);
????????????addbtn.enabled?=?false;
????????????resetbtn.enabled?=?true;
????????}
????????
????????public?function?onResetbtnClick(e:MouseEvent):void?{????????
????????????removeChild(m);
????????????resetbtn.enabled?=?false;
????????????addbtn.enabled?=?true;
????????}?
????}
}

package
{
????import?flash.display.MovieClip;

????public?class?Man?extends?MovieClip
????{
????????public?function?Man()
????????{
????????????super();
????????}
????????
????}
}

?

在flash中你只寫了一次代碼，而其他的都是在可視的狀態(tài)下完成的，比如說(shuō)這個(gè)MovieClips，你并沒(méi)有寫一句代碼，但是已有很多的你看不到的代碼falsh的IDE已經(jīng)幫你都完成了。你可以在可視的狀態(tài)下繼續(xù)修改這個(gè)MovieClips。但是你不會(huì)看到他的代碼。而在Silverlight中所有的的元素包括動(dòng)畫等都是通過(guò)XAML來(lái)描述的，你始終都能看到他的源代碼，這個(gè)也可以說(shuō)是Silverlight和Flash最大的不同。這里你會(huì)感覺(jué)到Silverlight更像以MXML來(lái)描述自身的Flex。

在下邊我會(huì)以Silverlight來(lái)重新制作上邊的例子，這里以Visual Studio 2008和Blend來(lái)做開(kāi)發(fā)環(huán)境。Visual Studio 2008來(lái)實(shí)現(xiàn)后臺(tái)代碼的邏輯，Blend來(lái)做前臺(tái)UI效果的展示。
新建項(xiàng)目，參考Silverlight初級(jí)教程-建立silverlight項(xiàng)目。
首先用Blend設(shè)計(jì)UI
調(diào)整舞臺(tái)布局和Flash一樣，參考Silverlight初級(jí)教程-繪圖布局。
創(chuàng)建自定義用戶控件，參考Silverlight初級(jí)教程-庫(kù)。可以在如要放置的文件夾下點(diǎn)擊右鍵選擇add new item。不要忘記轉(zhuǎn)換繪圖布局。 這里要先向項(xiàng)目里添加一個(gè)圖片。由于silverlight還在發(fā)展階段，建立項(xiàng)目結(jié)構(gòu)的規(guī)范還在探索中，這里先以Flex項(xiàng)目的規(guī)范來(lái)做參考建立silverlight。在根目錄建立文件夾“assets”。項(xiàng)目里用到的所有素材文件都放到里邊。按照素材文件種類的不同分別建立文件夾。例如果是圖片就放到“assets/img/”文件夾下。根目錄下建立“Components”目錄所有制作的自定義用戶控件都放到這里，根據(jù)控件類型的不同在分別建立子文件夾。這里文件夾就相當(dāng)于Flash中的庫(kù)。
這里在說(shuō)明下，其注冊(cè)點(diǎn)都以左上角為0,0點(diǎn)注冊(cè)，要以像flash中一樣以中心注冊(cè)需要手動(dòng)的將圖片向左上方移動(dòng)。如圖所示：

在舞臺(tái)上添加兩個(gè)按鈕，并設(shè)置好其name屬性。
用Visual Studio 2008編寫后臺(tái)邏輯代碼
打開(kāi)Page.xaml.cs 這里說(shuō)明下"LayoutRoot"為silverlight默認(rèn)的根容器，這個(gè)名字一般不會(huì)去改動(dòng)他。 修改page類為如下代碼。 ??public?partial?class?Page?:?UserControl
????{

????????private?man?m;

????????public?Page()
????????{
????????????InitializeComponent();

????????????Init();
????????}


????????private?void?Init()
????????{
????????????reset_btn.IsEnabled?=?false;
????????????add_btn.Click?+=?new?RoutedEventHandler(add_btn_Click);
????????????reset_btn.Click?+=?new?RoutedEventHandler(reset_btn_Click);
????????}

????????void?add_btn_Click(object?sender,?RoutedEventArgs?e)
????????{
????????????m?=?new?man();
????????????m.SetValue(Canvas.TopProperty,?(double)150);
????????????m.SetValue(Canvas.LeftProperty,?(double)200);

????????????LayoutRoot.Children.Add(m);

????????????add_btn.IsEnabled?=?false;
????????????reset_btn.IsEnabled?=?true;
????????}

????????void?reset_btn_Click(object?sender,?RoutedEventArgs?e)
????????{
????????????LayoutRoot.Children.Remove(m);

????????????add_btn.IsEnabled?=?true;
????????????reset_btn.IsEnabled?=?false;
????????}


????}
好了silverlight完成的效果如下：

剩下請(qǐng)大家自己體會(huì)下flash和silverlight開(kāi)發(fā)的不同吧。

代碼下載

?

作者：nasa
出處：nasa.cnblogs.com
聯(lián)系:nasa_wz@hotmail.com

QQ:12446006

轉(zhuǎn)載請(qǐng)保留本博客鏈接

總結(jié)

以上是生活随笔為你收集整理的从Flash到Silverlight进阶教程-用代码来创建动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。