通过实例来介绍Flash的绘图指令的使用 -电脑资料

电脑资料 时间:2019-01-01 我要投稿
【www.unjs.com - 电脑资料】

   

    效果:

   

    点击这里下载源文件

    首先介绍一下和直线相关的命令:

    1. 定义直线样式命令:lineStyle(线宽,色彩,透明度)

    2. 移动绘制点命令:moveTo(x,y)

    3. 绘制直线段命令:lineTo(x,y)

    一.绘制一个矩形

    现在用上面介绍的命令在舞台上画一个大小为150*100r矩形,

通过实例来介绍Flash的绘图指令的使用

    新建文件,将舞台大小设为400*300,背景为白色。在第一帧输入代码:

    stop();

    //设置线条的粗细色彩和透明度;

    _root.lineStyle(2,0xFFCC66,100);

    //设置起点坐标为(50,50);

    (200,50)

    (50,50)

    _root.moveTo(50,50);

    //绘制矩形四个端点;

    _root.lineTo(200,50);

    _root.lineTo(200,150);

    (200,150)

    (50,150)

    _root.lineTo(50,150);

    _root.lineTo(50,50);

    按快键试试吧,就可以看到一个矩形啦。

    源文件附后:

    二.两点间连线

    这个技巧经常用来制作连线题课件。新建文件后,在舞台中绘制一个圆,并将其转为影片剪辑。实例名为“a”。同样将其复制一个,实例名为“b”。然后在第一帧输入以下代码:

    stop();

    //创建drawline自定义函数;

    function drawline(){

    //先清除画面内容

    _root.clear();

    //设置线条样式

    _root.lineStyle(2,0x33ccFF);

    //设定线条的开始点;

    _root.moveTo(a._x,a._y);

    //绘制直线断,连接两个小球;

    _root.lineTo(b._x,b._y);

    }

    drawline();

    按快捷键试试,用鼠标连连看,是否有一条线啦?注意元件的注册点应为中心对齐才更逼真哦。

    玩大一点,如果要拖动两上控制点,并且其画线能任意延长,只需稍加一此代码即可。这是加在b上的代码:

    //按下时拖动小球;

    on(press){

    this.startDrag(true);

    }

    //放松时停止拖动;

    on(release){

    this.stopDrag();

    }

    //当鼠标在b上移动时运行其中的代码;

    onClipEvent(mouseMove){

    //调用函数drawline开始绘制直线;

    _root.drawline();

    //强制刷新画面;

    updateAferEvent();

    }

    加在a上的代码一样,有兴趣你可以一试,

电脑资料

通过实例来介绍Flash的绘图指令的使用》(https://www.unjs.com)。

    三.线条画板

    先绘制一个简单的线条画板。新建文件,在时间轴的第一帧加入以下代码:

    stop();

    createEmptyMovieClip("drawline",1);

    drawline.lineStyle(2,0xFFcc33,100);

    drawline.onMouseDown=function(){

    this.lineTo(_root._xmouse,_root._ymouse);

    }

    测试动画会发现,在窗口不同位置上单击就可以画出线段来。但还不流畅。要实现画线的流畅,得添加代码啦。继续学习吧。

    四.自由绘画

    新建文件,在第一帧输入以下代码:

    stop();

    //定义onMouseDown函数

    _root.onMouseDown=function(){

    //设定线条样式

    _root.lineStyle(2,0xcc99FF,100);

    //绘制直线;

    _root.moveTo(_root._xmouse,_root._ymouse);

    //定义变量isdrawing,并赋值为真

    isdrawing=true;

    }

    _root.onMouseMove=function(){

    //如果变量为真

    if(isdrawing==true){

    //绘制直线断

    _root.lineTo(_root._xmouse,_root._ymouse);

    //刷新画面;

    updateAferEvent();

    }

    }

    _root.onMouseUp=function(){

    //设定变量isdrawing的值为假

    isdrawing=false;

    };

    测试动画,这是可以通过拖放鼠标在窗口中自由地绘制线条。如果在场景中加入一个按钮,在按钮上加以下代码可以随时清除所绘制内容:

    on(release){

    //清除画面内容;

    _root.clear();

    }

    以下是源文件,我将四和内容做在不同的场景中了。

最新文章