從Flash到Silverlight進階教程

用代碼來創建動畫

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

新建flash文件

在第一幀添加兩個按鈕起好實例名稱

導入一張圖片，以中心注冊為MovieClips，將鏈接標識符設置為“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中你只寫了一次代碼，而其他的都是在可視的狀態下完成的，比如說這個MovieClips，你并沒有寫一句代碼，但是已有很多的你看不到的代碼falsh的IDE已經幫你都完成了。你可以在可視的狀態下繼續修改這個MovieClips。但是你不會看到他的代碼。而在Silverlight中所有的的元素包括動畫等都是通過XAML來描述的，你始終都能看到他的源代碼，這個也可以說是Silverlight和Flash最大的不同。這里你會感覺到Silverlight更像以MXML來描述自身的Flex。

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

在舞臺上添加兩個按鈕，并設置好其name屬性。
用Visual Studio 2008編寫后臺邏輯代碼
打開Page.xaml.cs 這里說明下"LayoutRoot"為silverlight默認的根容器，這個名字一般不會去改動他。 修改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完成的效果如下：

剩下請大家自己體會下flash和silverlight開發的不同吧。

代碼下載

?

作者：nasa
出處：nasa.cnblogs.com
聯系:nasa_wz@hotmail.com

QQ:12446006

轉載請保留本博客鏈接

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。