從Flash到Silverlight進階教程

用程式碼來建立動畫

這節裡將要講述一個自定義使用者控制元件最基本的操作，就好象Flash中的MovieClips一樣，動態的將其新增到舞臺上。

首先你將要看到如何用ActionScript來新增一個MC到舞臺中。

讓我們來看看在Flash中都做了什麼。

1. 新建flash檔案
2. 在第一幀新增兩個按鈕起好例項名稱
3. 匯入一張圖片，以中心註冊為MovieClips，將連結識別符號設定為“man”
4. 新建立一層命名為“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開發的不同吧。

程式碼下載