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

    一.前言 从20世纪90年代数字化医院概念提出到至今的20多年时间,数字化医院(Digital Hospital)在国内各大医院飞速的普及推广发展,并取得骄人成绩.不但有数字化医院管理信息系统(HIS ...

  2. 『安全工具』Nmap 强悍的端口扫描工具

    作为时下流行的端口扫描工具,Nmap有因其扫描的隐密性有“端口扫描之王”之称 上图是黑客帝国(The Matrix)中崔妮蒂用Nmap入侵核发电站的能源管理系统 0x 01 Nmap介绍 Nmap是一 ...

  3. VLC测试IPv4 IGMP/IPv6 MLD协议

    1 简述 VLC既可以充当流客户端,又可以充当流服务器,并且可以跨平台使用,是一款开源.免费的软件,基于GNU GPL许可证. 2 搭建组播服务器 第一步:运行程序后选择“媒体  串流”:第二步:通过 ...

  4. kill,killall,top,free,vmstat,iostat,watch命令

    kill命令 Linux 中的kill命令用来终止指定的进程(terminate a process)的运行,是Linux下进程管理的常用命令.通常,终止一个前台进程可以 使用Ctrl+C键,但是,对 ...

  5. 【转】C++读写二进制文件

    原文网址:http://blog.csdn.net/lightlater/article/details/6364931 摘要: 使用C++读写二进制文件,在开发中操作的比较频繁,今天有幸找到一篇文章 ...

  6. Android取得屏幕的高度和宽度

    //获得手机屏幕的宽度和高度 width=getWindowManager().getDefaultDisplay().getWidth(); height=getWindowManager().ge ...

  7. EA强大的画图工具---设计数据库表格

    http://blog.csdn.net/senior_lee/article/details/30272169?utm_source=tuicool 关于EA这个优秀的软件是从师哥哪里听来的,自己瞎 ...

  8. Spring容器的工具类

    代码实现: package com.ht.util; import java.util.Map; import org.springframework.beans.BeansException; im ...

  9. css链接

    css code: a:link{ color:#FF0000; } a:visited{ color:#00FF00; } a:hover { color:#0000FF; } a:active{ ...

  10. MYSQL视图的学习笔记

    MYSQL视图的学习笔记,学至Tarena金牌讲师,金色晨曦科技公司技术总监沙利穆 课程笔记的综合. 视图及图形化工具   1.       视图的定义 视图就是从一个或多个表中,导出来的表,是一个虚 ...