本次教程的内容:主要介绍怎样通过踢踏编程(playteka)平台上的踢踏动画(playDraw)软件实现基本动画,之前创作的都是静态图画,在踢踏动画软件中提供了一些方法和功能模块创作动态图画。

QQ截图20160607105703

  • 现在来回顾下之前画图使用的一个重要的基础功能模块:编辑板->结构工具箱中的“开始”模块屏幕截图 2016-02-18 21.02.07,“开始”模块基本特点是:嵌入在“开始”模块里面的代码仅在程序开始的时候执行一次。
  • 在踢踏动画软件中还有另外一个重要的基本功能模块:编辑板->结构工具箱中的“循环画”模块屏幕截图 2016-02-23 20.04.38 ,“循环画”模块基本特点是:程序在执行完“开始”模块之后,永不停止地循环执行嵌入在“循环画”模块里面的代码。
  • “循环画”模块在踢踏动画软件中使用率是非常高的,而“开始”模块更多是用于初始化程序的。
  • 本次教程教学视频点击链接: 本次教程教学视频链接地址

一、鼠标移动圆操作说明:

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

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

3、创作可移动的圆:先在编辑板->结构工具箱中选择的“循环画”模块屏幕截图 2016-02-23 20.04.38拖到白色的编辑框中;在编辑板->二维图形工具箱中选择的“椭圆”模块QQ截图20160606134600嵌入到“循环画”模块中,其中椭圆圆心的X轴和Y轴参数值设置的是鼠标指针在画布上的X轴值QQ截图20160606135344和Y轴值QQ截图20160606135407(注意:鼠标X轴和Y轴值功能模块在编辑板->鼠标工具箱中,“mouseX”功能模块通过下拉框方式选择“mouseX”和“mouseY”参数),因为椭圆圆心的X轴和Y轴值将随着鼠标指针在屏幕画布区域内移动而变化,所以椭圆也就会随着鼠标指针而移动;椭圆的宽度=100和高度=100正好是个圆形;以下是操作到当前步骤运行程序后的效果图输出:

(1)  当前步骤教程踢踏动画模块化代码如以下图所示:

QQ截图20160606150518

(2)  当前步骤教程程序运行输出效果如下图所示:

QQ截图20160606140234

(说明:踢踏动画软件中的圆形会跟随鼠标的移动画出很多很多的圆形,展现出来的是圆形移动的轨迹图,如果不需要或擦除掉这些圆的移动轨迹那怎样操作呢?请看下一步骤)

4、去掉圆形轨迹:其实只要将之前嵌入在“开始”模块中的“背景”模块移出后嵌入到“循环画”模块中,便可以实现去掉圆形轨迹效果;在踢踏动画软件中的“循环画”模块,程序每次在循环处理时都会将背景涂改为灰色背景,也就将前一次次留下的圆形轨迹给擦除掉,再重新创建一个圆形,这个时候画布上只会显示一个圆形并且该圆形会跟随鼠标移动,从而达到了通过踢踏动画软件创作本次教程的最终动画效果。

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

QQ截图20160606150914

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

QQ截图20160606160307

 

二、画钻石菱形操作说明:

1、画布数据设置为:类型2D(即二维图形)、宽为=600、高=400;画布背景颜色数据设置为:红=9、绿=35、蓝=54 是个偏蓝色的背景;将“创建画布”模块和“背景”模块嵌入到“开始”模块中。

2、画8条线:线条颜色全设置为白色透明的线:红=233、绿=249、蓝=247、透明=30(注意:透明数据取值范围是从0至255,如果设置为0则是完全透明,如果设置为255则完全不透明),将“线条颜色”嵌入到“开始”模块中;在编辑板->二维图形工具箱中选择8个“线”模块全嵌入到“循环画”模块中,因为8条线的起始点坐标位置(X1、YI)全是鼠标箭头的坐标位置,所以8条线的起始点坐标位置将跟随鼠标移动而改变位置,而8条线的终止点坐标位置(X1、Y2)分别是画布四个顶角的坐标位置和画布四条边的中间坐标位置,这8条线的终止点位置是固定的;那么踢踏动画软件在循环运行时将根据鼠标的移动,画出很多不同形状类似于钻石的菱形。

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

QQ截图20160606180351

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

屏幕截图 2016-02-18 23.29.07


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