从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

转载请保留本博客链接
posted @ 2008-09-09 01:57 nasa 阅读(1851) 评论(12)  编辑 收藏 网摘 所属分类: Silverlight

  回复  引用  查看    
#1楼2008-09-09 07:24 | 真见      
大拇指
  回复  引用    
#2楼2008-09-09 09:21 | LALALI[未注册用户]
sl的写法看起来舒服点
m = new man();
m.SetValue(Canvas.TopProperty, (double)150);
m.SetValue(Canvas.LeftProperty, (double)200);

LayoutRoot.Children.Add(m);
这样的写法更OO
  回复  引用  查看    
#3楼2008-09-09 09:36 | 学－无－止－境      
感觉还是sl更适合程序员的思维方式
  回复  引用    
#4楼2008-09-09 10:04 | dali[未注册用户]
我觉得为了迎合不同的layout, 反而这样很麻烦
m.SetValue(Canvas.TopProperty, (double)150);
m.SetValue(Canvas.LeftProperty, (double)200);

不就是这样吗, flash才直观:
m.Y = 150;
m.X = 150;

flash设置rotation也很简单
m.rotation = angle

silverlight怎么做? 我想要用RotateTransform了吧
  回复  引用  查看    
#5楼[楼主]2008-09-09 10:11 | nasa      
@dali
silverlight中确实要用RotateTransform，不过要是给RotateTransform制定name属性后也可以像flash一样便捷的设置属性。
  回复  引用    
#6楼2008-09-09 10:47 | Richbox[未注册用户]
阁下用AS2的写法与SilverLight对比似乎不妥，AS3已经完全面向对象编程，建议使用AS3与SilverLight对比
  回复  引用  查看    
#7楼[楼主]2008-09-09 10:57 | nasa      
@Richbox
谢谢你的意见，我会再补充一个as3的版本的。 这里用as2来写出要是为了照顾下初学者。
  回复  引用    
#8楼2008-09-09 14:27 | Nicholas.Yuen[未注册用户]
@Richbox
agree!
  回复  引用    
#9楼2008-09-09 15:57 | 飘落的树叶[未注册用户]
不好意思楼主，你所说的用AS2写法来写是为了照顾初学者，你真的懂AS么？

对于初学者来说，直接去接触AS3才是正确的，因为AS3是一个全新的面向对象的语言,而不是在AS2基础上衍生出来的。

学习AS3根本不需要知道以前的AS2
  回复  引用  查看    
#10楼[楼主]2008-09-09 16:44 | nasa      
@飘落的树叶
在下边的例子中我会用as3写的。这里并不是在写as方面的文章，也并非对比他们的好坏，而且我绝对无意贬低as。
  回复  引用  查看    
#11楼[楼主]2008-09-10 01:02 | nasa      
@all
as3.0版本代码已经补充
  回复  引用  查看    
#12楼2008-10-02 10:34 | Doho      
支持！Down下来学习了。
发表评论

昵称： [登录] [注册]

主页：

邮箱：(仅博主可见)

评论内容：

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1287222




相关文章:

相关链接: