[Mugeda HTML5技术教程之6]添加元素
我们上节讲了怎么创建新作品。新作品创建好后,我们就可以在里面添加内容了。这一节,我们将要讲述如何在作品中添加元素。动画的中的内容都是以各种元素的形式组成的。对于添加到舞台上的元素,我们可以在时间线上添加动画,也可以在属性对话框中修改相应属性,还可以在脚本中通过名字获取到该元素对象,通过Javascript代码通过Mugeda API 操作该元素从而完成更加丰富多彩的内容。这节我们主要讲解怎么添加元素和修改其属性,给元素添加动画和通过脚本操作元素将会在后面的章节中有详细介绍。
Mugeda支持的元素类型有图片、文本、矩形、圆角矩形、椭圆。对于除了图片以外的元素类型,都可以通过在工具栏中选中所需元素对象,然后单击或者拖动到舞台上来添加。后面分别介绍添加各种类型对象的方法。

添加图片的方法有:从本地文件获取、从网页获取、批量上传三种。

点击上图标示的图片元素按钮,打开上传图片对话框。点击“上传文件”选项来从本地文件上传图片。

还可以选择“输入网址”选项来网页获取图片

选择“批量上传”选项,可以通过拖拽的方式从本地一次上传一或多张图片

一旦图片上传,点击选择按钮就可以将图片添加到舞台上

已经上传的图片可以在图片素材库中重复使用。
在图片库中双击图片或选中后点击添加图片,可以将选中的图片添加到舞台上

可以通过点击文本按钮,再在舞台上点击或者直接拖动到舞台上,就可以将文本元素添加到舞台上。然后可以在属性对话框中进一步编辑其参数,包括文字、颜色、位置、宽高、对齐方式、字号等等。

通过矩形、圆角矩形、椭圆按钮可以将相应的图形元素添加到舞台上,然后同样可以在属性对话框中进一步编辑其参数。各种元素的属性种类略有不多,比如只用文本类型才有文字的属性。

对于已经添加到舞台上的元素,可以点击“选择”按钮以后,在舞台上点击该元素来选中它。

也可以通过拖动的方式选中一个或多个元素。

还可以按下Ctrl建点击各个元素来同时选择多个对象。

点击“变形”按钮后,可以通过拖动对象周围的某一控制点来缩放对象。

通过拖动旋转节点可以旋转对象。

对象的大小、位置、旋转、透明度等属性也可以在属性对话框中编辑。

总结,通过上述内容,我们很轻松就掌握了怎么在新建立的作品中加入想要的元素,并对加入的元素调整其属性。接下来,我们将在下期,继续讲解怎么给加入的元素添加动画,让它们动起来。敬请持续关注。
[Mugeda HTML5技术教程之6]添加元素的更多相关文章
- [Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介
[Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介 摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发.发布和统计基于HTML5的,包含丰富动画和交互的移动 ...
- [Mugeda HTML5技术教程之16]案例分析:制作跨屏互动游戏
本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...
- [Mugeda HTML5技术教程之14]案例分析:制作网页游戏
本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...
- [Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭
[Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭 摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...
- [Mugeda HTML5技术教程之5] 创建新作品
前一节,我们介绍了Mugeda Studio.这一节我们讲一下怎么通过Studio创建新作品.首先登陆网站,如果还没有登陆账号,你可以登录 www.mugeda.com 免费注册一个.登录网站后,点击 ...
- [Mugeda HTML5技术教程之11]Mugeda API简介
一.API 概述 Mugeda API 提供了一个简单的,结构化的方法来实时动态管理Mugeda内容.它提供了一下方法: •访问Mugeda内容中的对象. •获取和设置对象属性,如位置.旋转.比例.不 ...
- [Mugeda HTML5技术教程之7]添加动画
前一节我们讲述了怎么在新建的作品中添加元素,元素加好以后我们还想让他们动起来,来实现比较炫的效果.这节我们将要讲述怎么给元素添加动画.Mugeda动画是通过时间轴和帧来实现的.通过在时间轴上创建图层和 ...
- [Mugeda HTML5技术教程之4] Studio 概述
Mugeda Studio 是基于云平台的制作HTML5动画的专业可视化集成开发环境,可以让你在不需要安装客户端程序的情况下,只通过浏览器就能轻松创作高质量的HTML5动画.HTML5动画相对于传统的 ...
- [Mugeda HTML5技术教程之3] Hello World: 第一个Mugeda动画
今天我们开始我们的第一个Mugeda动画作品,并通过它来看看制作Mugeda动画的一些通用流程.在开始制作之前,请确保你已经拥有一个Mugeda网站的账号.如果还没有,你可以登录 www.mugeda ...
随机推荐
- MySQL 插入数据时,中文乱码???问题的解决
在终端,mysql -u root -p 登录: show variables like 'character%'; 来查看当前数据库的相关编码集. client 为客户端使用的字符集. connec ...
- 如何给网页标题栏上添加图标(favicon.ico)
favicon.ico详解: favicon是Favorites Icon的缩写,favicon.ico是指显示在浏览器收藏夹.地址栏和标签标题前面的个性化图标. 设置步骤: 1. 把做好的f ...
- node.js相关
node node最大的特点是单线程,因此一个只能有一个任务运行,大量采用异步操作. 某一个任务的后续操作一般采用回调函数的形式 var callback = function (error, val ...
- Android 用户登录
1:服务端代码如下 <?php /** *登录成功就返回 1,否则返回 0 */ $REQUEST_METHOD=$_SERVER['REQUEST_METHOD']; if($REQUEST_ ...
- the smallest positive number
2520 is the smallest number that can be divided by each of the numbers from 1 to 10 without any rema ...
- rsyslog Properties 属性:
rsyslog Properties 属性: 数据项 在rsyslog 是被称为 "properties". 它们可以有不同的源, 最重要的是 那些来自接收的消息,但是还有其他. ...
- sybase 备份和恢复
use master go dump transaction MBFEWKDB with no_log go dump transaction MBFEHISDB with no_log go use ...
- Qt入门(6)——Qt的界面布局
Qt提供四种布局: VBoxLayout:垂直布局 HBoxLayout:水平布局 GridLayout:二维布局. FormLayout: 窗体布局
- SQLServer Alter 修改表的列名的解决
解决:在SQLServer中修改表的列名,可以调用存储过程sp_rename. [sql]use Test;--使用数据库 sp_rename 'd_s_t.avg_grade','avg_g',' ...
- 翻译brent ozar的sqlserver dba训练课程——第一章:建立数据库服务器清单
在公司里,走进销售副总裁的办公室,询问他手下有多少销售人员.不,我的意思是你并不要那么做,他们会问你销售工具为什么那么慢. 其实我的意思是,如果你能走进他的办公室问他这个问题.我敢打赌,他会马上回答 ...