我们上节讲了怎么创建新作品。新作品创建好后,我们就可以在里面添加内容了。这一节,我们将要讲述如何在作品中添加元素。动画的中的内容都是以各种元素的形式组成的。对于添加到舞台上的元素,我们可以在时间线上添加动画,也可以在属性对话框中修改相应属性,还可以在脚本中通过名字获取到该元素对象,通过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. sae Servlet class XXXX is not a javax.servlet.Servlet

    以前都是使用myeclipse开发web工程上传sae后没有问题,但是使用javaee导出war包上传sae 无法访问 Servlet class  XXXX is not a javax.servl ...

  2. Jackknife,Bootstraping, bagging, boosting, AdaBoosting, Rand forest 和 gradient boosting的区别

    引自http://blog.csdn.net/xianlingmao/article/details/7712217 Jackknife,Bootstraping, bagging, boosting ...

  3. Sicily connect components in undirected graph

    题目介绍: 输入一个简单无向图,求出图中连通块的数目. Input 输入的第一行包含两个整数n和m,n是图的顶点数,m是边数.1<=n<=1000,0<=m<=10000. 以 ...

  4. Android的理解

    从组件的角度来考虑 Activity------------------Service-----------------Broadcast Receiver---------------------- ...

  5. PYTHONE的WHILE,BREAK,CONTINUE示例

    简短示例: while True: s = raw_input('Enter something : ') if s == 'quit': break if len(s) < 3: print ...

  6. RUBY的类封装,继承,多态简单演示

    class Person def initialize(name,age=18) @name=name @age=age @motherland="China" end def t ...

  7. Android——在活动中使用Menu

    ADT在HelloWorldActivity中自动创建了一个onCreateOptionsMenu()方法.这个方法是用于在活动中创建菜单的,现在我们来仔细分析一下了.手机毕竟和电脑不同,它的屏幕空间 ...

  8. pydev package包中__init__.py作用

    Eclipse用pydev,新建一个pydev package时,总会自动地生成一个空的__init__.py文件. 原来在python模块的每一个包中,都有一个__init__.py文件(这个文件定 ...

  9. 【转】Android开发工具--android-studio-bundle-141.2288178

    原文网址:http://www.androiddevtools.cn/ AndroidDevTools简介 Android Dev Tools官网地址:www.androiddevtools.cn 收 ...

  10. Palindrome Pairs 解答

    Question Given a list of unique words, find all pairs of distinct indices (i, j) in the given list, ...