從Flash到Silverlight進階教程-用代碼來創建動畫


從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效果的展示。


首先用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

轉載請保留本博客鏈接




注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com