我们上节讲了怎么创建新作品。新作品创建好后,我们就可以在里面添加内容了。这一节,我们将要讲述如何在作品中添加元素。动画的中的内容都是以各种元素的形式组成的。对于添加到舞台上的元素,我们可以在时间线上添加动画,也可以在属性对话框中修改相应属性,还可以在脚本中通过名字获取到该元素对象,通过Javascript代码通过Mugeda API 操作该元素从而完成更加丰富多彩的内容。这节我们主要讲解怎么添加元素和修改其属性,给元素添加动画和通过脚本操作元素将会在后面的章节中有详细介绍。

Mugeda支持的元素类型有图片、文本、矩形、圆角矩形、椭圆。对于除了图片以外的元素类型,都可以通过在工具栏中选中所需元素对象,然后单击或者拖动到舞台上来添加。后面分别介绍添加各种类型对象的方法。

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

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

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

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

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

已经上传的图片可以在图片素材库中重复使用。

在图片库中双击图片或选中后点击添加图片,可以将选中的图片添加到舞台上

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

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

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

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

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

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

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

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

总结,通过上述内容,我们很轻松就掌握了怎么在新建立的作品中加入想要的元素,并对加入的元素调整其属性。接下来,我们将在下期,继续讲解怎么给加入的元素添加动画,让它们动起来。敬请持续关注。

[Mugeda HTML5技术教程之6]添加元素的更多相关文章

  1. [Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介

    [Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介 摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发.发布和统计基于HTML5的,包含丰富动画和交互的移动 ...

  2. [Mugeda HTML5技术教程之16]案例分析:制作跨屏互动游戏

    本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...

  3. [Mugeda HTML5技术教程之14]案例分析:制作网页游戏

    本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...

  4. [Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭

    [Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭 摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...

  5. [Mugeda HTML5技术教程之5] 创建新作品

    前一节,我们介绍了Mugeda Studio.这一节我们讲一下怎么通过Studio创建新作品.首先登陆网站,如果还没有登陆账号,你可以登录 www.mugeda.com 免费注册一个.登录网站后,点击 ...

  6. [Mugeda HTML5技术教程之11]Mugeda API简介

    一.API 概述 Mugeda API 提供了一个简单的,结构化的方法来实时动态管理Mugeda内容.它提供了一下方法: •访问Mugeda内容中的对象. •获取和设置对象属性,如位置.旋转.比例.不 ...

  7. [Mugeda HTML5技术教程之7]添加动画

    前一节我们讲述了怎么在新建的作品中添加元素,元素加好以后我们还想让他们动起来,来实现比较炫的效果.这节我们将要讲述怎么给元素添加动画.Mugeda动画是通过时间轴和帧来实现的.通过在时间轴上创建图层和 ...

  8. [Mugeda HTML5技术教程之4] Studio 概述

    Mugeda Studio 是基于云平台的制作HTML5动画的专业可视化集成开发环境,可以让你在不需要安装客户端程序的情况下,只通过浏览器就能轻松创作高质量的HTML5动画.HTML5动画相对于传统的 ...

  9. [Mugeda HTML5技术教程之3] Hello World: 第一个Mugeda动画

    今天我们开始我们的第一个Mugeda动画作品,并通过它来看看制作Mugeda动画的一些通用流程.在开始制作之前,请确保你已经拥有一个Mugeda网站的账号.如果还没有,你可以登录 www.mugeda ...

随机推荐

  1. mysql 索引管理原则

    最近在学习mysql的索引优化,结合着我们网盟系统的一些业务,翻阅一些资料,整理出如下的一些想法: 1.索引建立的原则一:最左前缀匹配原则 ,非常重要的原则,mysql会一直向右匹配直到遇到范围查询( ...

  2. eclipse中JSP开发环境的配置

    1. Java环境 自行百度配置   2. Web Server环境安装: Web Server选择流行的Apache Tomcat .到http://tomcat.apache.org/  处下载, ...

  3. android-support-v7-appcompat下载

    http://download.csdn.net/detail/u010556601/7449661 将压缩包解压,放入sdk\extras\android\support\v7目录下 在eclips ...

  4. 虚拟机显卡分配过高的警告(Insufficient video RAM)

    最近机房挪机柜,网线拔拔插插,又在虚拟机上配置了网卡的各项设置,其中一个虚拟机的网站这两天经常无法访问, 于是关注了一下虚拟机的“事件”,发现另外一个跳转网站的警告: 于是去vmware的官网上找到了 ...

  5. 关于C51的中断函数要注意的几个问题

    转载自:http://blog.21ic.com/user1/531/archives/2006/16909.html 最近在虾潭逛,发现一些小虾米对C51中断函数有些不了解,今天周末,抽空发个技术帖 ...

  6. qt编写一个只能运行单个实例的程序,不用Windows API

    QtSingleApplicationhttp://code.qt.io/cgit/qt-solutions/qt-solutions.git/tree/qtsingleapplication 已打开 ...

  7. IBM总裁郭士纳总结的四类人

    IBM总裁郭士纳总结的四类人, 您属于哪一种呢-欢迎就此话题发表评论 积极采取行动促使事件发生的人 被动接受所发生事件的人 对事件持旁观者心态的人 什么事都不关心的人

  8. php5,Apache在windows 7环境搭建

    主要是参考以下文章: http://www.cnblogs.com/Yogurshine/archive/2013/05/24/3097343.html http://jingyan.baidu.co ...

  9. java中Runnable接口含义

    Java中实现多线程有两种途径:继承Thread类或者实现Runnable接口. Runnable接口非常简单,就定义了一个方法run(),继承Runnable并实现这个 方法就可以实现多线程了,但是 ...

  10. yiic模块module使用

    模块是一个独立的软件单元,它包含 模型, 视图, 控制器 和其他支持的组件. 在许多方面上,模块看起来像一个 应用.主要的区别就是模块不能单独部署,它必须存在于一个应用里. 用户可以像他们访问普通应用 ...