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

新建项目,参考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开发的不同吧。

代码下载

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

WPF 使用封装的 SharpDx 控件

上一篇告诉大家如何在 WPF 使用 SharpDx ,看起来代码比较复杂,所以本文告诉大家如何使用我封装的控件。

24220
来自专栏PPV课数据科学社区

【工具】EXCEL十大搞笑操作排行榜

大名鼎鼎EXCEL江湖上谁人不知,谁人不晓呀,纵使你没见过EXCEL,也见过数据在跑吧?可惜的是,经常用EXCEL表哥表妹,甚至操作六七年 的江湖老手,或多或少...

37160
来自专栏狂码一生

MFC子窗口任务栏显示图标和主窗口最小化在系统托盘中显示图标

MFC子窗口任务栏显示图标很简单, 只需要在子窗口的初期化函数OnInitDialog()中添加ModifyStyleEx(WS_EX_TOOLWINDOW, ...

48380
来自专栏MasiMaro 的技术博文

程序隐藏到任务栏的实现

我们在使用软件的时候,有的软件允许最小化到任务栏,然后双击任务栏的图标时又会显示出来,这篇文章主要说明如何实现这种功能; 实现这种功能主要分为两步,一是将程...

16610
来自专栏Ken的杂谈

ASP.NET Core 入门教程 5、ASP.NET Core MVC 视图传值入门

本篇代码基于以下代码进行调整:https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapt...

23150
来自专栏王大锤

IOS开发中滑动页面时NSTimer停止的问题

41190
来自专栏葡萄城控件技术团队

如何将GridViewEX升级到UWP(Universal Windows Platform)平台

引言 上一篇文章中,我们主要讲解了如何在保证GridView控件的用户体验基础上,扩展GridView生成GridViewEx控件,增加动态添加新分组功能等,本...

23480
来自专栏c#开发者

datagrid资料+ by iCeSnaker - Program rhapsody

datagrid资料+ by iCeSnaker - Program rhapsody 关于datagrid的打印 http://www.chinaaspx.c...

37690
来自专栏CRPER折腾记

React 折腾记 - (3) 结合Mobx实现一个比较靠谱的动态tab水平菜单,同时关联侧边栏

50120
来自专栏林德熙的博客

dotnet 从入门到放弃的 500 篇文章合集

博客包括 C#、WPF、UWP、dotnet core 、git 和 VisualStudio 和一些算法,所有博客使用 docx 保存

24420

扫码关注云+社区

领取腾讯云代金券