本次教程的内容:主要介绍怎样通过踢踏编程(playteka)平台上的踢踏动画(playDraw)软件,创作基本图形包括:点、三角形、四边形、圆角矩形、椭圆、弧线。


一、画点操作说明:

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

QQ截图20160604182035

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

QQ截图20160604180701

1、在浏览器地址栏中输入:app.playteka.com  按回车键,输入用户名和密码进入到踢踏互动编程(playteka)平台中的踢踏动画(playDraw),在长条形编辑框中输入“画点实例”项目名称创建一个项目,在项目列表中选择刚创建的项目名“画点实例”,进入踢踏动画(playDraw)软件编辑界面。

2、创建画布:

  • 创建开始模块:在编辑板->结构工具箱中选择“开始”模块,将该模块拖到白色的编辑框中;
  • 创建画布:在编辑板->环境工具箱中选择“创建画布”模块嵌入到“开始”模块,“创建画布”模块设置系统默认的:类型2D(即二维图形)、和默认尺寸宽为640高为360;
  • 创建画布颜色:画布颜色为灰色,在编辑板->笔划工具箱中选择“背景”模块嵌入到“开始”模块,“背景”模块参数设置为200 ;

3、画点:在编辑板->二维图形工具箱中选择“点”模块QQ截图20160604144640,在踢踏动画软件中画点非常简单,只需要确定点的X轴坐标和Y轴坐标,本次点设置的坐标值为:X=320、Y=180,点X轴和Y轴值是画布宽度和高度一半的坐标位置,正好位于画布的中心;但只是设置点的X和Y轴坐标值,在画布上是无法看到的,因为在踢踏动画软件中点缺省是1个像素大小,相当于屏幕上的一粒灰尘,所以如果能在画布中看到点,还需要再引入一个“线条宽度”模块,在编辑板->笔划工具箱中选择“线条宽度”模块QQ截图20160604144922,在“线条宽度”模块中设置20像素值(注意:“线条宽度”模块必须放在“点”模块的上面)。

4、点创作完毕,鼠标点击踢踏动画软件编辑界面上方的 “运行”控件或“新窗口”控件,查看运行效果;

 

二、画三角形和四边形操作说明:

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

snip_20160527142715

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

QQ截图20160605134530

1、在浏览器地址栏中输入:app.playteka.com  按回车键,输入用户名和密码进入到踢踏互动编程(playteka)平台中的踢踏动画(playDraw),在长条形编辑框中输入“画三角形和四边形”项目名称创建一个项目,在项目列表中鼠标点击刚创建的项目名“画三角形和四边形”,进入踢踏动画(playDraw)软件编辑界面。

2、创建画布:

  • 创建开始模块:在编辑板->结构工具箱中选择“开始”模块,将该模块拖到白色的编辑框中;
  • 创建画布:在编辑板->环境工具箱中选择“创建画布”模块嵌入到“开始”模块,“创建画布”模块设置系统默认的:类型2D(即二维图形)、和默认尺寸宽为640高为360;
  • 创建画布颜色:画布颜色为灰色,在编辑板->笔划工具箱中选择“背景”模块嵌入到“开始”模块,“背景”模块参数设置为200 ;

3、设置三角形和四边形边框的线条粗细:在编辑板->笔划工具箱中选择“线条宽度”模块,将线条宽度设置为6 。

4、画三角形:在编辑板->二维图形工具箱中选择“三角形”模块QQ截图20160605131126,踢踏动画软件中画三角形需要在画布任意坐标位置分别设置三个点的坐标值:X1坐标=320、Y1坐标=50和X2坐标=100、Y2坐标=300和X3坐标=480、Y3坐标=300 ;使用“填充”模块和“颜色”模块将三角形设置为红色。

5、画四角形:在编辑板->二维图形工具箱中选择“四边形”模块QQ截图20160605131533,踢踏动画软件中画四边形需要在画布任意位置分别设置四个点的坐标值:X1坐标=100、Y1坐标=100和X2坐标=100、Y2坐标=000和X3坐标=300、Y3坐标=300和X4坐标=280、Y4坐标=90;使用“填充”模块和“颜色”模块将四边形填充为绿色(注意:因为四边形是叠加在三角形上面,所以三角形有部分面积被四边形覆盖) 。

6、三角形和四边形创作完毕,鼠标点击踢踏动画软件编辑界面上方的 “运行”控件或“新窗口”控件,查看运行效果;

 

三、画圆角矩形操作说明:

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

QQ截图20160605145202

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

QQ截图20160607103607

1、在浏览器地址栏中输入:app.playteka.com  ,进入踢踏动画(playDraw)软件编辑界面。

2、创建画布:

  • 创建开始模块:在编辑板->结构工具箱中选择“开始”模块,将该模块拖到白色的编辑框中;
  • 创建画布:在编辑板->环境工具箱中选择“创建画布”模块嵌入到“开始”模块,“创建画布”模块设置系统默认的:类型2D(即二维图形)、和默认尺寸宽为640高为360;
  • 创建画布颜色:画布颜色为灰色,在编辑板->笔划工具箱中选择“背景”模块嵌入到“开始”模块,“背景”模块参数设置为200 ;

3、设置圆角矩形边框的线条的粗细:在编辑板->笔划工具箱中选择“线条宽度”模块,将线条宽度设置为3 。

4、画圆角矩形:在编辑板->二维图形工具箱中选择“圆角矩形”模块QQ截图20160605142131,画圆角矩形首先要确认圆角矩形顶点的坐标(X=20,Y=20),再确认高度=500和宽度=300,最后确认圆角半径=80,圆角矩形中的圆角是个四分之一圆(注意:设置圆角半径值越大圆角弧度就越大,如果圆角半径值设置为0也就是个直角)。

5、圆角矩形创作完毕,鼠标点击踢踏动画软件编辑界面上方的 “运行”控件或“新窗口”控件,查看运行效果;

 

四、画椭圆形操作说明:

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

QQ截图20160605152712

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

QQ截图20160607103828

1、画布数据设置:类型2D(即二维图形)、和默认尺寸宽为640高为360;画布颜色为灰色,那么背景数据设置为:200 ;

2、设置椭圆边框的线条粗细:在编辑板->笔划工具箱中选择“线条宽度”模块,将线条宽度设置为2;

3、画椭圆:在编辑板->二维图形工具箱中选择“椭圆”模块 QQ截图20160605151247,画椭圆首先确定椭圆圆心点的坐标位置,后确定基于圆心点垂直方向的直径(即:椭圆高度)和水平方向的直径(即:椭圆宽度);本次画两个椭圆形,一个椭圆参数是圆心点坐标为(X=100、Y=100)、宽度=100、高度=100(高度和宽度相同,是个正圆形),另一个椭圆参数是圆心点坐标为(X=480、Y=180)、宽度=200、高度=300 。

 

五、画弧线操作说明:

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

QQ截图20160605180413

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

QQ截图20160607104044

1、画布数据设置:类型2D(即二维图形)、和默认尺寸宽为640高为360;画布颜色为灰色,那么背景数据设置为:200 ;

2、设置弧线的填充颜色:系统默认填充的是白色,因为本次创作的弧线是无填充颜色,那么在编辑板->二维图形工具箱中选择“无填充”模块QQ截图20160605180034 嵌入到“开始”模块中 ;

2、画弧线:在编辑板->二维图形工具箱中选择“弧线”模块QQ截图20160605181427,本次画的是四分之一圆的弧线;画弧线前先确定这个弧线的圆心点坐标(X=320、Y=180);再确定弧线的宽度=100和高度=100(高度和宽度指的是这个弧线对应的圆的直径长度);再确认起始角度和结束角度,当起始角度=1/2PI(角度是90度),那么在踢踏动画软件中是指从水平线(也就是X轴)向下顺时针方向转90度角的位置为起始角度位置,当结束角度=PI(角度是180度),那么在踢踏动画软件中是指从水平线(也就是X轴)向下顺时针方向转180度角的位置为结束角度位置;最后选择开发类型(注意:弧线开放形QQ截图20160605175304、有弓形QQ截图20160605174941、和扇形QQ截图20160605175024);


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