从Flash到Silverlight进阶教程-用代码来创建动画
从Flash到Silverlight进阶教程-用代码来创建动画
从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开发的不同吧。