本次教程的内容:主要介绍怎样通过踢踏编程(playteka)平台上的踢踏动画(playDraw)软件,来实现方形和线的静态图形。

  • 本次教程程序运行输出效果如下图所示:

屏幕截图 2016-02-18 21.08.06

  • 本次教程踢踏动画模块化代码如以下图所示:

屏幕截图 2016-02-23 00.30.28


开始画长方形和线条操作说明:

1、在浏览器地址栏中输入:app.playteka.com  按回车键进入到踢踏互动编程(playteka)平台登陆界面如下图所示,输入用户名和密码进入系统平台后选择踢踏动画(playDraw),在长条形编辑框中输入“画长方形和线条”创建一个踢踏动画项目。

QQ截图20160602152819

2、在踢踏互动编程平台主界面的踢踏动画项目列表中,选择刚创建的项目“画长方形和线条”,进入踢踏动画(playDraw)软件编辑界面,如下图所示:

QQ截图20160602165809

  • 在界面最左边一竖排“编辑板”是存放不同功能模块的工具箱,踢踏动画(playDraw)就是使用这些不同的功能模块,像搭建积木似的组成不同的程序,从而完成不同的平面图和动画图;
  • 在界面上方一横排控件QQ截图20160602173526,这些控件是控制程序相关的功能键;“运行”控件是触发程序运行;“停止”控件是停止正在运行的程序,如果正在运行的程序,需要停止运行程序后才能编辑;“新窗口”控件是在新窗口运行程序,“保存”控件是保存编辑的模块代码;“再创作”控件将原项目代码克隆或复制创建一个一模一样的新项目代码;
  • 在界面最右下角有个垃圾箱QQ截图20160531230532,是用来删除踢踏动画编辑框中不需要使用的的功能模块 ;

3、既然是图画,首先需要创建一块画布,通过画布来展现各种不同的图画。以下是对创建画布的操作说明:

  • 在编辑板->结构工具箱中选择“开始”模块屏幕截图 2016-02-18 21.02.07拖入到程序编辑界面中;“开始”模块是个基础模块在编写任何踢踏动画程序时必须使用,没有这个模块程序无法初始化和运行;在踢踏动画软件中由于功能模块的特性不同其外形分为:凹槽式模块、嵌入式模块;“开始”模块是凹槽式模块,说明“开始”模块中将有其他嵌入式模块在其内部运行(注意:在踢踏动画软件中将自动识别嵌入式模块与凹槽式模块的适配关系);
  • 在编辑板->环境工具箱中选择“创建画布”模块屏幕截图 2016-02-17 23.50.51嵌入到“开始”模块;“创建画布”模块包括三个参数配置项:宽度、高度、类型;类型指的是画图类型(画图的类型分为:二维图形、和三维图形,二维图形是默认类型),本次画图类型是二维图形(注意:说明在本次的画图创造中,除了不能使用三维图形工具箱中的功能模块外,其他工具箱中的功能模块都可以使用);宽度和高度指的是画布尺寸大小,根据画布的尺寸大小来指定画图的区域,本次创作的画布区域是宽=640、高=360(注意:以画布宽度=640、高度=360为例,在踢踏动画软件中对画布区域的设定是从画布最左上角的点坐标(x=0,y=0)开始,到画布最右下角的点坐标(x=640,y=360)为止的区域;如下图所示,画布的高度也就是y轴箭头方向,在踢踏编程平台中是从上往下,与通常的y轴方向不同,画布的宽度也就是x轴箭头方向,在踢踏编程平台中是从左往右,那么画布的中心点坐标是x轴一半和y轴一半的坐标位置处(x=320,y=180));

QQ截图20160607102628

  • 在编辑板->笔划工具箱中选择“背景”模块屏幕截图 2016-02-18 17.30.16嵌入到“开始”模块,“背景”模块是定义画布背景的颜色,因为本次创作画的“背景”模块里面只嵌入了一个“100”的数据模块,所以本次定义的是单色背景,嵌入的这个数据模块的数字取值范围是从0至255(注意:0是黑色;255是白色;0至255之间的数字是灰色,数字越小偏白色,数字越大偏黑色);如果背景设置为不同的颜色,需要在“背景”模块中嵌入编辑板->颜色工具箱中的“颜色”模块,“颜色”模块中的各个数字取值范围都是从0至255  ;

4、以上编辑过程处理完后说明画布已创建完成,现在可以开始创作图画,本次创作图画是方形和对角线,以下是对画图操作具体说明:

  • 画线:在编辑板->二维图形工具箱中选择“线”模块屏幕截图 2016-02-18 17.55.22嵌入到“开始”模块;在踢踏动画软件中是通过两个点的坐标(即:起始点和终止点的坐标位置)位置便可以画出线,简单说就是两点确定一条线,本次创作线的起始点坐标为X1=0、Y1=0,终止点坐标为X2=640、Y2=360(X是横坐标轴,Y是纵坐标),如下图所示,正好这两点坐标是画布的对角点,那么画出来的是对角线;
  • 画方形:在编辑板->二维图形工具箱中选择“长方形”模块屏幕截图 2016-02-18 17.56.39嵌入到“开始”模块,在踢踏动画软件中画长方形先必须确定长方形左上角的顶点坐标(即:该顶点的X轴和Y轴坐标)位置,例如本次创作的长方形左上角的顶点坐标是(X=100,Y=100),长方形的宽度=100、高度=100是个正方形,如下图所示:

QQ截图20160602005620

5、最后给正方形和对角线涂改颜色,以下是操作具体说明:

  • 将对角线涂改为白色:在编辑板->笔划工具箱中选择“线条颜色”模块QQ截图20160602104544嵌入到“开始”模块中,在“线条颜色”模块中设置255为白色;
  • 将方形涂改为红色(在踢踏动画中涂改颜色叫做填充颜色):先在编辑板->笔划工具箱中选择“填充”模块QQ截图20160602104952嵌入到“开始”模块中,然后 在“填 充”模块中嵌入编辑板->颜色工具箱的“颜色”模块QQ截图20160602104213,因为填充的是红色,所以在“颜色”模块中设置的参数分别是:红=255、绿=0、蓝=0,这样填充的颜色就是红色;
  • 删除方形的黑色边框:在编辑板->笔划工具箱中选择“无线条”模块QQ截图20160602105829嵌入到“开始”模块中 ;

6、图画创作完成后需要运行踢踏动画模块代码,来查看创作效果,鼠标点击踢踏动画软件编辑界面上方的 “运行”控件或“新窗口”控件来运行程序。


创作总结:

  • 本次的踢踏动画软件创作出一幅包括白色的对角线和红色无边框的正方形静态图;
  • 本次创作画布的宽度=640、高度=360;画布的颜色是灰色(背景参数设置为100);创作的线是对角线,那么线的两点坐标值是X1=0、Y1=0和X2=640、Y2=360,因为对角线的颜色是纯白色,所以线条颜色参数设置为255;创作的长方形左上角顶点坐标是X=100、Y=100,因为长方形的宽度和高度都是100,所以是个 正方形,正方形是纯红色的,那么正方形填充的颜色参数:红=255、绿=0、蓝=0,并且正方形为无边框,因此需要添加“无线条”模块;
  • 通过本次的创作,大家了解了踢踏动画软件使用模块式编程方法,并且类似于堆积积木的方式,组成的程序来实现图画(注意:既然是类似于堆积积木的方式来实现程序,那么在堆积功能模块时是有堆积顺序的,例如:以上创作中的“线条颜色”模块必须在“线”模块的上面,而“填充”模块和“无线条”模块必须在“长方形”模块的上面,这样才能展示正确的颜色效果);

以下是本次踢踏动画创作教学视频: