html5开发工具对比

1、Html5开发工具介绍 HTML5开发工具简介 Adobe Edge Animate/Animatron/Tumult Hype/Mugeda/HTML5 Maker/Hippo Studios/Blysk/Radiapp/Lungo/Articulate Stroyline2/mobl/DevExtreme/DCloudHBuilder Adobe Edge工具介绍 Adobe Edge简介/Abode Edge Animate界面功能模块/数字媒体制作 Articulate Storyline2工具介绍 Articulate Storyline2简介/Articulate Storylin

2、e2新增功能/数字媒体制作 Flash Professional CC 2014工具介绍 Flash Professional CC 2014简介/ Flash Professional CC 2014功能介绍/数字媒体制作 相关软件制作功能对比及适用范围 HTML5开发工具简介 Adobe Edge Adobe Edge的目的是帮助专业设计师制作 网页动画乃至简单游戏。目前该工具的重点 放在动画引擎上，但未来将增加更多HTML5 功能，比如Canvas、HTML5音频/视频标签 等。 Animatron是一款直观的设计与发布编辑软件。你可以 使用 Animatron 来设计内容，如横幅、信息

3、图表和创意 动画（针对桌面电脑、移动设备以及任何你可以选择的设 备）。 Animatron（在线开发） Tumult Hype 你可以使用Tumult Hype来创建美丽的 HTML5 Web内容。用其创建的内容是交互的 并拥有伟大的动画功能。你可以在桌面、智能 手机和iPad上使用这个框架，它不需要你有编 码知识。 Mugeda（在线开发） Mugeda是许多创作工具包、广告商和代理处的首选，来释 放他们的创造力并创建最优质的媒体广告单元。该工具最知 名的是它创建优质广告单元、横幅、插页式广告、可扩展和 迷你游戏的能力。 HTML5 Maker （在线开发） 常用于构建滑块、横幅以 及用最小

4、的努力创建令人 印象深刻的图形。这个工 具是免费的，它不要求你 有任何特别的编程知识。 HTML5开发工具简介 Hippo Studios Hippo Studios是一个很好的平台，可以创 建强大的动画、游戏、演示文稿、应用和多 媒体网站。使用Hippo Studios创建的项目 被大多数浏览器和设备支持。 Blysk（在线开发） blysk是一款非常有用的动 画工具。它为动画和Web 设计提供了一个很好的平 台，可以为网站和其他互 联网项目构建直观的动画。 Radiapp Radiapp是一款强大的工具，常用于创建运 行时的视频和图形。它为现代网站提供实时 的图形编辑界面。 Articul

5、ate Stroyline2 Articulate Stroyline2 在原有 国际排名第一的课件工具 Articulat Storyline1的基础上， 有了非常大的改进与创新。 DCloudHBuilder 基于HTML5开发工具是当 前最快的HTML开发工具。 DevExtreme DevExtreme是专为移动 准备的，一个跨平台开发 的HTML5/JS框架。 mobl 一个新的开源的编程语言。 Lungo 一款基于HTML5的开发框架，专为想要设计、构建和共享跨 设备应用的开发者而准备。 Adobe Edge Animate 简介 Adobe Edge是adobe公司的一款新型网页

6、互动工具。允许设计师通过HTML5、CSS和JavaScript制作网页动画。无需Flash。 Adobe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏。该工具的重点放在动画引擎上，但adobe承诺将增加更多HTML5功能， 比如Canvas、HTML5音频/视频标签等。支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari和IE9等各个平台。Adobe 于2014年正式推出Adobe Edge AnimateCC集成了hml5、js、css的 开发工具。 人们也许会问，这一举措是不是表明Adobe正在向苹果等公司让步？ 苹果认为Fl

7、ash是一种过时的技术，而HTML5才是未来。苹果的iPad和 iPhone等产品中无法显示Flash动画。 其实，Adobe Edge并不会替代Flash。该软件只是为网页设计人员提供 了一种工具，帮助他们在不支持Flash的设备（比如苹果iOS设备）上制 作网络动画。 Adobe Edge Animate CC 2014 数字媒体制作 创建一个Abode Edge Animate新文件： 鼠标左键单击 下图按钮，即 可成功创建一 个空白的 Abode Edge Animate文件 创建成功的软件使用界面： Adobe Edge Animate CC 2014 界面功能模块 界面功能介绍：

8、最上面为菜单栏 菜单栏下面为工具栏 左侧为属性栏空白区域为设计区域空白栏下面为动作栏 空白区域右边为文件栏最右边为介绍栏 数字媒体制作（1） 尺寸大小设置 输入相应数值建立所需新项目 添加元素 点击文件导入 选择导入元素 导入元素的文件格式必需是如图所示的几 种文件格式，否则无法导入 1、导入音频 选择导入的音频格式后导入音频 导入音频“slide0101”后属性栏 和动作栏内均有显示 控制播放条 动画效果制作 1、动画元素绘制 在工具栏中选择所需要的元素如：文 字、图形等,属性栏可以编辑颜色等 数字媒体制作（2） 动画效果制作 2、动画制作 点击按钮（如上图）后，拖拽时间轴到 想要动画时长位

9、置（如下图0.415处）拖拽元素到0.415秒后想到到达的位置， 松手后形成一组时间轴/帧动画 同理也可实现颜色变化和消失渐变等简易动 画效果 保存及发布 点击另存为输入文件名称 利用Adobe Edge AnimateCC 2014 制作的课程实例： 6:8880/test01/test01. html Articulate Storyline2简介 Articulate Storyline是一个强大的独是一个强大的独立工具，具有无可比拟的交互功能，将帮助你建立动态的、引人入胜的内容其中包含 模拟、屏幕录制、拖放式交互、单击显示活动，以及测试和评估等等。 北

10、京时间2014年9月17日凌晨，Articulate发布了新一款软件：Articulate Storyline2。 Articulate Stroyline2 在原有国际排名第一的课件工具Articulat Storyline1的基础上，有了非常大的改进与创新。其中最引人注目的 是，此款软件同时推出了中文版。这对于启盼之久的中国广大用户来 说，实在是一个大好消息。Storyline2不仅对操作界面进行了汉化， 还正式支持双字节字符，制作中文课件将会更加顺利。 Articulate Stroyline2 还增加了滑块、动作路径、时间轴控制等 令人眼前一亮的新功能。发布成品方面，除了已有对iPad

11、的支持，还 特别加强了对安卓系统平板的支持。 支持所有平板电脑 第一种是自适应的决方案， 也是工具推荐用户使用的 （缺省的）方案。 Articulate Storyline2新增功能（1） Storyline 2正式宣布除了完全支持iPad 以外， 也开始支持Android系统的平板电脑。这给移动 学习课件的开发者来说就显得更加灵活和方便。 现在使用Articulate Storyline 2发布HTML 5格 式的课件可以在任何移动设备上运行。 课件内容展现更生动，吸引学员的眼球 互动滑块 让学习者来控制滑块，改变数据、 探索因果关系并控制导航。 动作路径 Storyline 2增加了页面中

12、元素的动 作路径，现在可以向在PPT中一样设置页 面内容的动作路径、并通过触发器来控制 其运动、为一个元素设置多个运动轨迹等 等。 新的动画和页面切换效果 11种新的页面切换效果和10中新的 元素进出动画效果，让我们非常容易的 为文本、图片、层和页面添加精彩的动 画效果。 新增触发器功能 使用Storyline 2全新触发器和触发 事件来控制页面中的动效，你可以轻而 易举的根据时间、提示点、甚至是动画 播放完毕作为条件来触发页面元素的动 作。 Articulate Storyline2新增功能（2） 创建更贴切的视图，使用Storyline新工具个性化设置你的文字、颜色、字体等等 全新的文本编

13、辑器，给你极致的编辑文本风格、段落、行距、 方向、项目符等功能。 新的文本编辑器 Storyline 2支持个性化的字体以及在同行中增加文字后字体形状 的改变。Storyline 2对中文输入和字体支持更是无以伦比。Storyline 1中中文字体输入的问题完全解决。 增强的字体支持 现在你可以在插入的网页中覆盖层、图形、人物、文字等其他媒 体元素，创建完美的主页风格。 增强的网页Web对象 你可以从屏幕上任何元素上（甚至是非Storyline 2界面）吸取你 喜欢的颜色，并添加到页面中的任何元素中去。 取色器 Articulate Storyline2新增功能（3） 创建理想的学习体验，并掌

14、握学习者以怎样的路径学习你的课件 播放器导航按钮的状态 通过方便的设置播放器中上一页、下一页提交的状态（正常、失效 和隐藏等）来防止学员跳过学习内容。 测试题的减分功能 Storyline 2支持在考试中的错题减分功能。 视频压缩选择 Storyline 2可以允许你去选择是否压缩课件中的视频，以 控制视频的清晰度和课件大小。 只读的播放条 Storyline 2可以设置只能显示而不能拖拉的播放条。相信 这是很多课件设计者希望的实用功能。 增加你的课件设计产量，大大提升你的开发效率和方便性 全新的界面设计，使用更方便。 触发器和层的窗口可以拖动到 Storyline界面之外的桌面上。 动画刷。

15、快速方便的将一个元 素的动画效果刷到其他元素上。 方便的切换故事视图和窗体视图。 支持在不同页面之间拷贝和复制 层。 自动恢复。Storyline 2遇到异常 关闭后再次打开将恢复你最后编 辑的页面。 Articulate Storyline2新增功能（4） 快速的开始是成功的一半 丰富精美的页面模板，你可以直接从Storyline 2中 导入。 Storyline 2支持导入Articulate其他软件的文件了 如Studio 09, Studio 13, Storyline 1和PPT。 使用Storyline 2可以直接将测试题在Excel文件中 创建，并一键导入到Storyline 2

16、中。 Storyline 2支持中文界面！ 数字媒体制作（1） 设置项目页面尺寸 设计 选项卡 单击 文章大小 进行设置 1、添加场景 单击Home主页选项卡，然后单击New Scene新场景或 在故事视图空白区域任何地方右击，然后选择新场景 新场景默认包含一个单独的空白幻灯片。你可以双击幻 灯片切换到普通视图，从而向幻灯片添加内容。 2、复制场景 3、重命名场景和幻灯片标题 4、删除场景 5、折叠或展开场景 6、放大和缩小场景 7、重新排列场景内的幻灯片 8、多场景的播放控制 9、场景辅助功能 用Ctrl+鼠标滚轮进行缩放或右下角的缩放滑块 触发器跳到下一个幻灯片或链接幻灯 片的关系 场景的

17、使用方法 可以直接拖动幻灯片到想要的位置，注 意幻灯片名称 在“ 查看 ” 菜单中，调整母板 ，以及显示标尺，网格，参 考线等。 数字媒体制作（2） 自定义播放器 播放器按钮 打开“文本标签” 语言调 整成中文修改相映按钮文字 点击“更新预览”保存 选择以及添加在播放器上将 要显示的选项卡以及功能 1、导入音频 音频的处理 2、右键单击音频层，选择编辑命令 “导入”是在蓝色指示线索在位置添加另 一音频 “静音”单击，在弹出的对话框中选择添 加静音的时长； 选中一段音频单击“静 音”使此段音频变为静音状态。 音频导入后会自动默认显示在时间轴的第 一层。 插入图片 导入图片 当导入图片的时候，会有

18、一些图片的处理功 能呈现。 可以直接对图片进行亮度，对比度，着色 等处理。 数字媒体制作（3） “测验”模板（1） 1、案例测试题 先选择插入新建幻灯片模板“测验” 点选“插入”“转换为自由形式” 此种方式适用于基础页面已摆放好的情况 2、案例添加互动 “测验”模板（2） 新幻灯片中点击“控件”插入按钮；然后插 入人物；为按钮添加触发器，设置各项参数 3、案例热区 “测验”模板（3） 在新幻灯片中点击“控件”插入热区；选择 一个热区的图形样式，画出热区范围，添加 触发器进行设置 数字媒体制作（4） 课程中导入视频 导入视频后弹出下面的设置框 ： 可在时间轴上裁剪视频的播放长 度，调整视频的画面

19、亮度等。 同时也可以选择是否压缩视频文 件，可设置是否可以拖动进度条。 在菜单的右下角显示这相关的结 果信息。 插入Flash 在界面中可以设置文件的宽高，并设置播放 位置，触发方式等设置 动画效果 先选择要添加动画的文件，然后点击动画按 钮，为文件添加进入，退出等的效果以及持 续时间 我们制作了一个动画效果的整体演示演示。 特殊效果 画面区域放大 缩小效果： 点选“缩放区域”按钮，在画面上选择出一 块区域，并在时间轴上调整好位置。 数字媒体制作（5） 录制操作屏幕 选择“录制屏幕”会在屏幕上弹出虚框， 可通过拉伸调节录制内容范围。录制结 束后选择相应的设置 变量的使用 在Storyline中

20、可以很方便的使用变量， 使用触发器向导会迅速建立物件的变量而无 需编写代码。 使用变量的一种方式是记录一些信息， 诸如学习者的名字及其输入的数字；及基于 该信息而激活的内容。当然使用变量最多的 用处就是在课程中建立一些条件式的交互内 容。 变量一次只能记录一段内容，一个比较 典型的例子是：在一个输入学习者的界面中， 基于文本输入框的变量可以接收到任何文本 输入内容，但是一次只能记录一名学习者的 名字，每次学习者输入新的名字时，变量将 变为最后一次输入的内容 变量的类型 1、文本 （Text） 2、数字 （number） 3、真/假 （True/False） 使用变量的三个步骤 1、给变量重命名

21、 2、选择使用变量的类型 3、选择变量的数值（初始数值） 变量与状态的区别 实例 右图为具体画面以及相应的参数设置 变量同（物件的不同）状态是不同：（物件的不 同）状态仅适用于当前的幻灯片，在其他幻灯片 激活时（物件的不同）状态将不复存在。而变量 将在整组幻灯片中、或者整个场景中、有时甚至 整个课程中起作用。 数字媒体制作（6） 发布 默认情况下，会发布为Flash.但我们可 以使用HTML5和ipad选项去为移动设 备发布。选择如下： 当这些选项都选择后，当我们从网 站上运行一个课程时，Storyline的 工作过程是： 首先它会寻找Flash player.如 果你的设备不能用Flash播

22、放，它将 载入html5版本的课程。 增加背景音乐 添加下面代码到发布的story.html里 在根目录下创建一个bgsound文件夹（这个 名称自己可 以编写，但 要与连接地 址一样）， 然后把我原 有的一个swf 文件考入到 bgsound文 件夹里。 把已提前找到的背景音乐以song1.MP3的命 名及格式放入bgsound文件里，与song1.swf 文件同级目录。 song1.swf里已做好了降低原音量的10%的设 定，因此，你把任何原音频文件考入放进文件 夹里，播放出来的声音都会自动降低到原来音 量的10%。 Flash Professional CC 2014简介 Adobe Flash Professional CC 提供了强大的动画和多媒体内容的创建工具与环境，并让视觉效果设计师可以创建在桌面电脑和移动设备上 都能一致呈现的互动体验。主要包括全新优化的“移动编辑器”、创建并发布 WebGL 内容、导出为 SVG 格式、使用可变宽度工具加深笔画、 Kuler 面板、创建适用于 Flash Professional CC 的 HTML5 扩展功能、同步工作区与 Adobe Creative Clo