写个网页更简单了！让AI根据手绘原型生成HTML - 教程+代码

小新编译自 Insight Data Blog

量子位出品 | 公众号 QbitAI

写个网页能有多麻烦？在大多数公司里，这项工作分为三步：

1. 产品经理完成用户调研任务后，列出一系列技术要求；

2. 设计师根据这些要求来设计低保真原型，逐渐修改得到高保真原型和UI设计图；

3. 工程师将这些设计图实现为代码，最终变成用户使用的产品。

这么多环节，任何地方出一点问题，都会拉长开发周期。因此，不少公司，比如Airbnb已经开始用机器学习来提高这个过程的效率。

△ Airbnb内部的AI工具，从图纸到代码一步到位

看起来很美好，但Airbnb还没公开该模型中端到端训练的细节，以及手工设计的图像特征对该模型的贡献度。这是该公司特有的闭源解决方案专利，可能不会进行公开。

好在，一个叫Ashwin Kumar的程序员创建了一个开源版本，让开发者/设计师的工作变得更简单。

以下内容翻译自他的博客：

理想上，这个模型可以根据网站设计的简单手绘原型，很快地生成一个可用的HTML网站：

△ SketchCode模型利用手绘线框图来生成HTML网站

事实上，上面例子就是利用训练好的模型在测试集上生成的一个实际网站，代码请访问：https://github.com/ashnkumar/sketch-code。

从图像标注中获取灵感

目前要解决的问题属于一种更广泛的任务，叫做程序综合（program synthesis），即自动生成工作源代码。尽管很多程序综合研究通过自然语言规范或执行追踪法来生成代码，但在当前任务中，我会充分利用源图像，即给出的手绘线框图来展开工作。

在机器学习中有一个十分热门的研究领域，称为图像标注（image caption），目的是构建一种把图像和文本连接在一起的模型，特别是用于生成源图像内容的描述。

△ 图像标注模型生成源图像的文本描述

我从一篇pix2code论文和另一个应用这种方法的相关项目中获得灵感，决定把我的任务按照图像标注方式来实现，把绘制的网站线框图作为输入图像，并将其相应的HTML代码作为其输出内容。

注：上段提到的两个参考项目分别是

pix2code论文：https://arxiv.org/abs/1705.07962

floydhub教程：https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/?source=techstories.org

获取合适的数据集

确定图像标注方法后，理想中使用的训练数据集会包含成千上万对手绘线框图和对应的HTML输出代码。但是，目前还没有我想要的相关数据集，我只好为这个任务来创建数据集。

最开始，我尝试了pix2code论文给出的开源数据集，该数据集由1750张综合生成网站的截图及其相应源代码组成。

△ pix2code数据集中的生成网站图片和源代码

这是一个很好的数据集，有几个有趣的地方：

该数据集中的每个生成网站都包含几个简单的辅助程序元素，如按钮、文本框和DIV对象。尽管这意味着这个模型受限于将这些少数元素作为它的输出内容，但是这些元素可通过选择生成网络来修改和扩展。这种方法应该很容易地推广到更大的元素词汇表。
每个样本的源代码都是由领域专用语言（DSL）的令牌组成，这是该论文作者为该任务所创建的。每个令牌对应于HTML和CSS的一个片段，且加入编译器把DSL转换为运行的HTML代码。

彩色网站图像变手绘图

为了修改我的任务数据集，我要让网站图像看起来像手工绘制出的。我尝试使用Python中的OpenCV库和PIL库等工具对每张图像进行修改，包括灰度转换和轮廓检测。

最终，我决定直接修改原始网站的CSS样式表，通过执行以下操作：

1. 更改页面上元素的边框半径来平滑按钮和DIV对象的边缘；

2. 模仿绘制的草图来调整边框的粗细，并添加阴影；

3. 将原有字体更改为类似手写的字体；

最终实现的流程中还增加了一个步骤，通过添加倾斜、移动和旋转来实现图像增强，来模拟实际绘制草图中的变化。

使用图像标注模型架构

现在，我已经处理好数据集，接下来是构建模型。

我利用了图像标注中使用的模型架构，该架构由三个主要部分组成：

1. 一种使用卷积神经网络（CNN）的计算机视觉模型，从源图像提取图像特征；

2. 一种包含门控单元GRU的语言模型，对源代码令牌序列进行编码；

3. 一个解码器模型，也属于GRU单元，把前两个步骤的输出作为输入，并预测序列中的下一个令牌。

△ 以令牌序列为输入来训练模型

为了训练模型，我将源代码拆分为令牌序列。模型的输入为单个部分序列及它的源图像，其标签是文本中的下一个令牌。该模型使用交叉熵函数作为损失函数，将模型的下个预测令牌与实际的下个令牌进行比较。

在模型从头开始生成代码的过程中，该推理方式稍有不同。图像仍然通过CNN网络进行处理，但文本处理开始时仅采用一个启动序列。在每个步骤中，模型对序列中输出的下个预测令牌将会添加到当前输入序列，并作为新的输入序列送到模型中；重复此操作直到模型的预测令牌为，或该过程达到每个文本中令牌数目的预定义值。

当模型生成一组预测令牌后，编译器就会将DSL令牌转换为HTML代码，这些HTML代码可以在任何浏览器中运行。

用BLEU分数评估模型

我决定使用BLEU分数来评估模型。这是机器翻译任务中常用的一种度量标准，通过在给定相同输入的情况下，衡量机器生成的文本与人类可能产生内容的近似程度。

实际上，BLEU通过比较生成文本和参考文本的N元序列，以创建修改后的准确版本。它非常适用于这个项目，因为它会影响生成HTML代码中的实际元素，以及它们之间的相互关系。

最棒的是，我还可以通过检查生成的网站来比较当前的实际BLEU分数。

△ 观察BLEU分数

当BLEU分数为1.0时，则说明给定源图像后该模型能在正确位置设置合适的元素，而较低的BLEU分数这说明模型预测了错误元素或是把它们放在相对不合适的位置。我们最终模型在评估数据集上的BLEU分数为0.76。

福利：定制网页风格

后来，我还想到，由于该模型只生成当前页面的框架，即文本的令牌，因此我可以在编译过程中添加一个定制的CSS层，并立刻得到不同风格的生成网站。

△ 一个手绘图生成多种风格的网页

把风格定制和模型生成两个过程分开，在使用模型时带来了很多好处：

1.如果想要将SketchCode模型应用到自己公司的产品中，前端工程师可以直接使用该模型，只需更改一个CSS文件来匹配该公司的网页设计风格；

2. 该模型内置的可扩展性，即通过单一源图像，模型可以迅速编译出多种不同的预定义风格，因此用户可以设想出多种可能的网站风格，并在浏览器中浏览这些生成网页。

总结和展望

受到图像标注研究的启发，SketchCode模型能够在几秒钟内将手绘网站线框图转换为可用的HTML网站。

但是，该模型还存在一些问题，这也是我接下来可能的工作方向：

1. 由于这个模型只使用了16个元素进行训练，所以它不能预测这些数据以外的令牌。下一步方向可能是使用更多元素来生成更多的网站样本，包括网站图片，下拉菜单和窗体，可参考启动程序组件（https://getbootstrap.com/docs/4.0/components/buttons/）来获得思路；

2. 在实际网站构建中，存在很多变化。创建一个能更好反映这种变化的训练集，是提高生成效果的一种好方法，可以通过获取更多网站的HTML/CSS代码以及内容截图来提高；

3. 手绘图纸也存在很多CSS修改技巧无法捕捉到的变化。解决这个问题的一种好方法是使用生成对抗网络GAN来创建更逼真的绘制网站图像。

、什么是参考文献

按照字面的意思，参考文献是文章或著作等写作过程中参考过的文献。然而，按照GB/T 7714-2015《信息与文献参考文献著录规则》”的定义，文后参考文献是指：为撰写或编辑论文和著作而引用的有关文献信息资源。

很多刊物对参考文献和注释作出区分，将注释规定为“对正文中某一内容作进一步解释或补充说明的文字”，列于文末或页脚。

2、参考文献的意义

为了反映论文的科学依据和作者尊重他人研究成果的严肃态度，同时向读者提供有关信息的出处，正文之后一般应刊出主要参考文献。

列出的只限于作者亲自阅读过的，最重要的且发表在公开出版物上的文献或网上下载的资料。论文中被引用的参考文献序号用方括号括起来，置于所引用部分的右上角如[1]。参考文献按论文中引用先后顺序排列，格式如下：

3、不同形式的资料，列为参考文献的注释

3.1 期刊文献的格式：

J表示journal，期刊。格式如下：

[序号] 作者. 文章名[J]. 期刊名，年，卷（期）：起止页码.

例如：不同作者数量的注释方法，三人以上的要用“等”。

[1] 李仁杰. 机器视觉技术及其在机械制造自动化中的应用[J]. 科学技术创新, 2016(12): 80-80.

[2] 成芳, 应义斌. 机器视觉技术在农作物种子质量检验中的应用研究进展[J]. 农业工程学报, 2001, 17(6): 175-179.

[3] 杨为民, 李天石, 贾鸿社. 农业机械机器视觉导航研究[J]. 农业工程学报, 2004, 20(1): 160-165.

[4] 胡炼, 罗锡文, 曾山, 等. 基于机器视觉的株间机械除草装置的作物识别与定位方法[J]. 农业工程学报, 2013, 29(10): 12-18.

3.2 图书文献的格式：

M表示monograph，专著、图书。

作者. 书名[M]. 出版社所在城市名：出版社名，出版年份，起止页码.

例如：

王永华. 现代电气控制及PLC应用技术（第4版）[M]. 北京：北京航空航天大学出版社，2016，68-73.

3.3 学位论文的格式：

D表示dissertation，硕士、博士等学位论文

作者. 书名[D]. 保存地：保存单位，年份.

例如：

张海雷. 卤素物种催化/促进的氮杂环的硫官能团化及合成研究[D]. 大连：大连理工大学，2016.

3.4 报纸文章的格式

N 表示 newspapers，报纸

作者. 题名[N]. 报纸名，出版日期（版次）.

例如：

刘琪. 加快中原城市群交通一体化发展[N]. 河南日报，2017-05-19（09）.

3.5 会议文献的格式：

A表示Article，论文集中的析出文献；

C表示collection，论文集

作者. 文章题目名[A]. 论文集名[C]. 出版社地址：出版社名，出版年份，引文起止页码.

例如：

孙德民. 储层条件下水淹油层测井响应机理实验研究[A]. 水驱油田开发测井’96国际学术讨论会论文集[C]. 北京：石油工业出版社，1996，10-11.

3.6 电子文献的格式

作者. 电子文献题名[文献类型/载体类型]，文献网址或出处，发表或更新日期/引用日期（两个日期都写或者任选一个）.

例如：

陈宝生. 发挥高校优势加快构建中国特色哲学社会科学[EB/OL]，http://www.moe.gov.cn/jyb_xwfb/moe_176/201705/t20170517_305073.html，2017-05-17/2017-06-06.

注：[电子文献类型标识/载体类型标识]主要有：

[DB/OL] 联机网上数据库（Database online）

[DB/MT] 磁带数据库（Database on magnetic tape）

[M/CD] 光盘图书（Monograph on CD-ROM）

[CP/DK] 磁盘软件（Computer Program on disk）

[J/OL] 网上期刊磁盘软件（serial online）

[EB/OL] 网上电子公告（Electronic Bulletin Board online）

3.7 其他格式的参考文献，不常用，用到自行百度搜索

R——报告 Report;

S——标准 Standard;

P——专利 Patent;

Z——其它末说明文献　　

要

1、绪论

1、flash概叙

2、Flash相关技术介绍

1、什么是flash动画

2、ActionScript语言历史简谈

1、ActionScript 3

2、ActionScript 3 的优点

3、XML介绍

1、XML格式

3、为什么要在Flash中添加上AS语言呢？

1、简单的流星雨

2、简单的流星雨（as）

1、把库中的元件加载到舞台上

2、AS3的事件侦听机制

3、在AS3中改变对象的位置和缩放对象

4、演示

3、XML的运用

1、新建FLASH

2、创建 viewer.as 的类

3、创建pics,xml 的文件

4、总结

5、致谢

6、参考文献

AS3.0语言在Flash编程中的应用

学生: 何万凯

指导教师: 谢艳萍

摘要

XML是Extensible Markup Language(可扩展标记语言)的缩写,是一种表示结构化信息的标准方法,因其简单、灵活且易于读取、访问及处理,尤其因为在数据交换和可移植等方面具有优势,已成为事实上的工业标准。它可以使计算机方便地操作各类信息,并且人们可以非常方便地编写和理解这些信息。它让AS3.0与flash连得更加亲密。

关键词:结构化信息; 服务器; 策略文件; 远程过程调用; 信息检索; 过滤器;

Flash in the application AS3.0 programming

language study

Name: He Wan Kai

Supervisor: Xie Yan Ping

Abstract

XML is Extensible Markup Language(can expand sign language) abbreviate, it is a kind of standard means that represents structured news, because its are simple, agile and read easily take, visit and processing, because exchange and can transplant in data,wait for a respect to have an advantage especially, already became in fact industrial standard. It can make the computer handles of all kinds information conveniently, and people is very OK be written conveniently and understand these message.

Keywords: Structured information; The server. Strategy file; Remote procedure calls;

Information retrieval; Filters

绪论

FLASH概述

Flash 由macromedia公司推出的交互式矢量图和 Web 动画的标准。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。

flash涉及到的领域:动画游戏制作，网络构件，学习课件，网站广告设计及全flash网站，工控界面等等。主要特点是制作简单，通用性比较大，涉及的领域多，制作出的东西效果都可以做到非常精致。缺点在于有些效果需要别的软件辅助制作等等，不是所有效果都能制作出来。（比如些3d效果，flash就很难制作，只能通过导入的方式或者针并针的方式）

　　FLASH有三重意义:1) FLASH英文本意为“闪光”;2)它是全球流行的电脑动画设计软件;3)它代表用上述软件制作的流行于网络的动画作品。Flash是一种交互式矢量多媒体技术，他的前身是Futureplash，早期网上流行的矢量动画插件。后来由于Macromedia公司收购了Future Splash以后便将其改名为 Flash2，到现在最新的flashcs5。现在网上已经有成千上万个Flash站点，著名的如Macromedia专门ShockRave站点，全部采用了Shockwave Flash 和Director。可以说Flash已经渐渐成为交互式质量的标准，未来网页的一大主流。

　　 Flash 最早期的版本称为Future Splash Animator，当时Future Splash Animator最大的两个用户是微软（Microsoft）和迪斯尼（Disney）。1996年11月，Future Splash Animator卖给了MM（Macromedia.com），同时改名为Flash1.0 。 Macromedia 公司在1997年6月推出了 Flash 2.0 ，1998年5月推出了Flash3.0。但是这些早期版本的Flash所使用的都是Shockwave 播放器。Flash 进入4.0 版以后，原来所使用的 Shockwave 播放器便仅供 Director 使用。Flash 4.0开始有了自己专用的播放器，称为“Flash Player”，但是为了保持向下相容性，Flash仍然沿用了原有的扩展名：.SWF（Shockwave Flash）。 2000年8月Macromedia 推出了Flash5.0 ，它所支持的播放器为 Flash Player 5。

Flash 5.0中的ActionScript已有了长足的进步，并且开始了对XML于Smart Clip（智能影片剪辑）的支持。ActionScript的语法已经开始定位为发展成为一种完整的面向对象的语言，并且遵循ECMAScript的标准，就像javascript那样。2002年3月 Macromedia 推出了Flash MX支持的播放器为 Flash Player 6。Flash 6开始了对外部jpg和MP3调入的支持，同时也增加了更多的内建对象，提供了对HTML文本更精确的控制，并引如SetInterval 超频帧的概念。同时也改进了swf文件的压缩技术。之后Macromedia有相继推出了Flash 8，Flash 9及现在的Flash CS5。相信Flash的软件以后还会在不断的更新，还有ActionScript语言也随着Flash的进步而改变，使其更加完美。

2、Flash相关技术介绍

2.1 什么是Flash动画

动画是将静止的画面变为动态的艺术．实现由静止到动态，主要是靠人眼的视觉残留效应．利用人的这种视觉生理特性可制作出具有高度想象力和表现力的动画影片。动画以人类视觉的原理为基础。如果快速查看一系列相关的静态图像，那么我们会感觉到这是一个连续的运动。每一个单独图像称之为帧。帧是动画电影中的单个图像。

动画片中的动画一般也称为"中间画"．这是指两张原画的中间过程而言的．动画片动作的流畅、生动，关键要靠"中间画"的完善．一般先由原画设计者绘制出原画，然后动画设计者根据原画规定的动作要求以及帧数绘制中间画．原画设计者与动画设计者必须有良好的配合才能顺利完成动画片的制作。

2.2 ActionScript语言历史简谈

ActionScript语言最早出现在Flash Player4中，是用来进行简单的交互性脚本，并不是很复杂。而在Flash5就出现了ActionScript1，他就具备ECMAScript标准语法格式和语义解释。直到ActionScript2。ActionScript2可以说是ActionScript1的编程包装版。在ActionScript2中已经有良好的类型声明，还把编译与运行时的异常分离出来。

虽然ActionScript2对OOP语言远远谈不上全面，但在FLASHMX 时候，已经深受广大的开发者接受。在2005年，Macromedia引入了flash player 8, 基于ActionScript2中的RIA 开始新的热潮，并改进了外部API之间的flash至游览器。还可以为复杂应用文件上传和下载有很大贡献。Flash Plater 在历史上是最快被采用。为什么呢？因为ActionScript中有AVM1（ActionScript虚拟机1），它增强了Flssh Player 8以前的播放功能。

但是，大型项目接连出现，新的需求不断产生，开发人员已经把AVM1推到极限了。这让人们停住了脚步。

经过人们长期不断的努力，Flash Player 迎来了重大的转折点。就是Flash Player 9 首次引入ActionScript3和新的ActionScript引擎 AVM2.。因为有了这引擎，ActionScript3代码执行的速度最多可以比原来的ActionScript代码快10倍。

还有ActionScript3有一个编译模型，更加有效的内存利用。不过为了考虑到向后兼容，在Flash player 9 中还保留着AVM1，也就是说它有两个虚拟机。AVM1 和 AVM2.

2.2.1 ActionScript 3

ActionScript 3 是针对Flash Player 运行环境的编程语言，允许向程序添加复杂的交互。回放控制和数据显示功能。

2.2.2 ActionScript 3 的优点

这种语言支持类型安全性，使代码维护更轻松。

与其他语言相比，这种语言相当简单，很容易编写。

开发人员可以编写具有高性能的响应性代码。

这种语言向后兼容 ActionScript 2 并向前兼容 ECMAScript for XML（E4X）。

2.3 XML介绍

XML在网络或者其他领域都被广泛利用，XML已经成为数据格式的事实标准。有人曾经这样发问过：“如果放弃ActionScript 2，而选择了ActionScript 3。”理由是ActionScript 3对XML近乎完美的支持这是绝对的。

其实XML是一种类似HTML的标记语言，但和HTML关注方向不一样。XML是被设计用来描述数据的。而HTML是用来显示数据的。XML是一个跨平台，于软件，硬件没有关系的，专注于处理信息数据描述饿工具。

2.3.1 XML格式：

现在我们看看XML的格式，其实就像写HTML那样。

<?xml version=”1.0” encoding=”UIF-8”?>

<site>

<url>http://baidu.com</url>

</site>

<site>

<name>baidu</name>

<url>http://baidu.com</url>

<site>

</website>

3、为什么要在Flash中添加上AS语言呢？

其实，在FLASH 6 就已经开始有AS语言了,但随着时代的进步。有一段时间AS语言就到达了他的极限，经过奋斗中的开发者，不枉他们的心血，AS3从此诞生了。在有ActionScript 3语言加入之后的Flash中，使得更为流畅。

3.1简单的流星雨

先来看看没有代码的效果：流星雨

没有代码只有一个一个添加上去，多了就会容易出现错误，疲倦。修改的时候也不方便。

制作步骤：

先导入底图，告诉我们现在天黑啦

流星雨当然要有流星啦，现在制作一个流星和星星。

只要再把元件拖到到舞台。设置一个流星滑落的效果就行啦。

就可以出现前面演示的效果了。大家觉得很简单吧。那问个问题，如果我做一百个流星呢？难道我拖一百次？就算让你拖完一百次。别人说还是改50吧，这时候你会崩溃的。

3.2简单的流星雨(AS)

而下面的是加入了ActionScript 3语言的：流星雨AS

先说说下面的例子重要的知识方面：

3.2.1 把库中的元件加载到舞台上：

在AS3中，语法就不同在AS2 and AS1了。

在AS3中，要先定义好一个类，再声明一个实例。

例子：

var mymc:myl = new myl();

addChild(mymc);

mymc.x = 100;

mymc.y = 100;

这样，库中类名为my1的元件就会显示在舞台上坐标为（100，100）的位置上。

3.2.2 AS3的事件侦听机制：

什么是事件呢？当某件事情发生的时候就做些什么事。这个某件事情就是事件。比如：press,当鼠标按下的时候，这就是一个事件。在AS2中，我们有两种方式来实现事件驱动。一种是将代码直接写在元件上（mc或按钮）。比如，在场景中有一个叫mymc的影片剪辑元件，我们在其上点右键，打开动作面板，输入：

on(press){

干点坏事；

}

这样，当我们在mymc元件上按下鼠标时，就会去干点坏事。第二种方法是在帧动作上输入代码：

mymc.onPress = function(){

干点坏事；

}

这样，当我们在mymc元件上按下鼠标时，同样会去干点坏事。

接下来，我们在AS3中来看看：在元件上点右键，打开动作面板，你会看到“无法将动作应用于当前所选内容”。在AS3中无法将代码写在元件上，只能写在帧动作上。而AS3的事件侦听，也有它自已，的格式， AS3在事件侦听格式是：

function 函数名称(事件对象:事件类型):void

{

// 此处是为响应事件而执行的动作。

}

触发事件的对象.addEventListener(事件类型.事件名称, 函数名称);

必须先声明一个函数，将要执行的代码放在其中，然后触发事件的对象用addEventListener去侦听事件，如果事件发生则调用函数。还用上面那个干坏事的例子。打开帧动作面板，输入：

mymc.buttonMode=true;

function bad(event:MouseEvent):void{

trace("干点坏事;");

}

mymc.addEventListener(MouseEvent.CLICK,bad);这样，当我们在mymc元件上按下鼠标时，会再一次去干点坏事。上面代码中的MouseEvent是鼠标事件的意思，CLICK是单击的意思，即在元件上单击就会触发事件。

3.2.3在AS3中改变对象的位置和缩放对象：

我们知道，对象在舞台上位置由其x,y轴的坐标来决定。在AS2中有两个属性：_x,和_y，用来指定对象的x,y坐标，这一点在AS3中也是一样的，只是AS3中去掉了下划线，属性名就叫x,y.比如，在AS2中，要将mymc的位置定在（100，100）处，要这样：

mymc._x = 100;

mymc._y = 100;

而在AS3中是这样的：

mymc.x = 100;

mymc.y = 100;

在AS2中对象的大小可以用width,height,_xscale,_yscale四个属性来确定，在AS3中width和height是一样的，不再说它了。AS3用scaleX和scaleY属性取代了_xscale,_yscale属性。同时它们的值也是有区别的。AS2中的,_xscale,_yscale属性值是百分比。而AS3中的scaleX和scaleY值是一分比。一分比？这是我发明的，博士专用名词，嘿嘿。scaleX和scaleY值实际就是放大缩小的倍数。比如，在AS2中 mymc._xscale = 30; 这是将mymc的宽度缩小到原来的30%。

在AS3中 mymc.scalex = 30; 这是将mymc的宽度放大到原来的30倍。要将宽度缩小到30%，就要用

mymc.scale = 0.3;

3.2.4 演示：

那么现在就开始，同样的，先导入底图

这里有点不一样，在元件中链接要输入一个类名，这是在AS代码中从库中取出来的一个桥梁。

在第一个帧输入代码

代码：

var i:Number = 1;

addEventListener(Event.ENTER_FRAME,xx);

function xx(event:Event):void {

var x_mc:star = new star();

addChild(x_mc);

x_mc.x = Math.random()*1000;

x_mc.scaleX = 0.2 + Math.random();

x_mc.scaleY = 0.2 + Math.random();

i++;

if(i>50){

this.removeChildAt(1);

i=50;

}

现在就不需要担心上面会出现的效果了，你需要多少颗流星，你只需要把if(i>50)改成你需要的数字就行了。

补充一下：

x_mc.scaleX = 0.2 + Math.random();

x_mc.scaleY = 0.2 + Math.random();

0.2 + Math.random();会产生0.2-1.2间的随机数，这就让流星缩小到20%到放大到120%间，落下来的流星，大小不一，显得更加真实一些。

removeChildAt(n);是删除已加载的显式对象，其中的n是已加载的对象的索引号。从addEventListener(Event.ENTER_FRAME,xx);这一句可以看出，运行一帧，就会从库中加载一颗流星，同时i加，这样当i等于50时，场景中就已有50颗流星了。这个时候我们用this.removeChildAt(1);将最先加载的流星删除。然后将i设为50，到下一帧，i就又大于50了，那么要加载1颗流星，同时又删除了一颗流星，这就达到了一个动态平衡，场景中始终只有50颗流星。要不然，就会流星的数量就越来越多。

从上面的两个例子可以发现，在导入AS3之后，使得FLASH更为简单得实现。

3.3 XML的运用

前面讲到XML是用来存放数据的，下面我简单的做一个相册。

制作思路：flash--àAS类运行---à导入XML里面的数据---à运行相册

首先在Flash中布局好需要的材料：

说了相册，当然要有相片啦。但用了XML就不同了，图片不需要放进FLASH的库里面了，他可以独立出来，方便了使用者对图片的修改。

3.3.1 新建FLASH

我们先创建一个FLASH。布局好相册的形式。

3.3.2 创建 viewer.as 的类

减小在FLASH里面的代码。使得FLASH的安全有一定的保护。也减小FLASH的容量大小。

之后就在第一帧输入ActionScript 代码。他的作用是用来控制输入相册

新建一个类

//-------------------------------------

//初始化部分

var myXML = new XML ();

var myArray = new Array ();

//初始化参数设置

var smallPicWidth = 50;

var smallPicHeight = 50;

var bigPicWidth = 610;

var bigPicHeight = 440;

myXML.ignoreWhite = true;

//初始化函数设置

myXML.onLoad = function (ok)

{

if (ok)

{

_global.scrollSpeed = myXML.firstChild.attributes.scrollSpeed;

albumText = myXML.firstChild.attributes.albumText;

_global.gap = myXML.firstChild.attributes.gap;

praseXML ();

}

//函数设置

function praseXML ()

{

for (var i = 0; i < myXML.firstChild.childNodes.length; i ++)

{

var tempObj = myXML.firstChild.childNodes [i].attributes;

myArray.push (

{

linkURL : tempObj.linkURL,

imgURL : tempObj.imgURL,

imgText : tempObj.imgText

})

}

drawLeft ();

}

function drawLeft ()

{

for (var i = 0; i < myArray.length; i ++)

{

var picLoaderTemp = leftBar.createEmptyMovieClip ("picLoader" + i, i + 1);

var picCounterTemp = leftBar.createEmptyMovieClip ("picCounter" + i, i + 10001);

picCounterTemp.id = i;

picLoaderTemp._x = 10;

picLoaderTemp._y = smallPicHeight * i + _global.gap * i + 10;

picLoaderTemp.loadMovie (myArray [i].imgURL);

picCounterTemp.onEnterFrame = function ()

{

var tempName = leftBar ["picLoader" + this.id];

if (tempName._width > 0)

{

var tempScale = Math.min (smallPicWidth / tempName._width, smallPicHeight / tempName._height)

tempName._width = tempScale * tempName._width

tempName._height = tempScale * tempName._height;

tempName.onPress = function ()

{

var tempNum = this._name.slice (9);

textArea.contentText.text = myArray [tempNum].imgText;

drawRight (myArray [tempNum].imgURL);

}

delete this.onEnterFrame;

}

function drawRight (a)

{

picLoader.loadMovie (a);

var picCounter = this.createEmptyMovieClip ("picCounter", 60000);

picCounter.onEnterFrame = function ()

{

if (picLoader._width > 0)

{

var tempScale = Math.min (bigPicWidth / picLoader._width , bigPicHeight / picLoader._height);

picLoader._width = tempScale * picLoader._width;

picLoader._height = tempScale * picLoader._height;

picLoader._x = (bigPicWidth+20 - picLoader._width) / 2 + smallPicWidth+20;

picLoader._y = (bigPicHeight - picLoader._height) / 2+35;

picLoader.onPress = function ()

{

getURL (a, "_blank");

}

delete picCounter.onEnterFrame;

}

leftBar.onEnterFrame = function ()

{

if (_xmouse < smallPicWidth+20)

{

leftBar._y -= (_ymouse - Stage.height/ 2)/10;

if (leftBar._y > 0)

{

leftBar._y = 0;

} else if (leftBar._y <= Stage.height - leftBar._height-20)

{

leftBar._y = Stage.height - leftBar._height-20;

}

//开始执行函数

myXML.load ("pics.xml");

3.3.3创建 pics.xml 的类

利用外部来导入图片到FLASH，也可以它只是一种桥接，不过非常的实用，不仅仅是ActionScript ,在C#,Java等语言都被广泛的运用。

<?xml version='1.0' encoding='UTF-8'?>

</data>

XML它的好处就是让修改者修改起来非常方便，上面的例子，我只要在XML里面修改。就可以对FLASH中的图片进行添加或删除。也加强了安全方便的保护。

总结

近几年来随着我校的扩招，办学规模不断扩大的前提下，原有的教材管理系统已不再满足需求,。因此，本人结合本校教材管理工作的实际情况开发了此系统。

本系统采用B／S的框架结构，以.NET为开发平台，以C#作为开发语言，以SQL Server作为后台数据库，运用面向对象的设计思想和UML建模知识，按照从需求分析、系统体系结构设计、数据库设计、实现的开发流程完成了教材管理系统的开发和论文的撰写。本系统完成了系统初始化、教材计划管理、订单管理、入库管理、出库管理、统计打印、权限管理等模块，基本能够满足我校教材管理的需求。随着该系统开发的完成，一方面使教材管理人员从繁重、复杂且易出现错误的手工操作中解脱出来，提高工作效率，实现了基于校园网的办公自动化。另一方面也方便了学生通过校园网随时查询所领教材信息，加强了教材管理人员与学生之间的联系，提高了教材管理工作的透明度，更好地实现了人性化管理。

本系统还有一些不足的地方，整个系统的可靠性、健壮性还有待进一步进行测试，系统安全性设计还不够完善，权限分配还没有完成等。另外为了教材录入的方便，条件允许的情况下，可以考虑购买一台条形码读卡器设备实现教材基本信息的智能录入。

教材管理的全部工作都可通过该系统在网络上完成，所有数据实时共享。整个系统实现后功能完善，使用方便，界面友好。系统能够较好地适应了高校教材管理的特点和要求，充分提高了教管理工作质量与效率。同时，也为进一步拓宽学生的知识体系结构、增强学生学习的积极性、主动性和有针对性的培养能力创造条件。

致谢

最后才写

参考文献

[1] 殿堂之路《Flash-ActionScript3》.电子工业出版社.2009

[2] 黄冈于林主编，《Macromedia Flash MX 标准教程》，北京希望电子出版社。本版号：ISBN 7—900118—41—1 . 2004,6:67~67

[3] 胡一梅，胡海涛，常会侠.中文版Flash MX动画电影梦工场.北京：北京希望电子出版社，2003：405～425.

[4] 网冠科技.Flash MX 小游戏时尚制作百例.北京：机械工业出版社，2002：234～343.

[5] 莫志雄，能伟建.Flash MX 网上动画编程指南.北京：北京希望电子出版社，2003：102～290.

[6] Sham Bhangal Igor Chromanski. Flash Game Design Collection.Beijing: Tsinghua University Press，2002:202～242.

[7] 黄汗兵主编，《Show good 创作宝典之FLASH MX教学课件与互动游戏》，人民邮电出版社。本版号：ISBN 7—115—10741—3120. 2005,18(2):50~50

[8] 《FLASH MX实例创作教学宝典》，金版电子出版公司

[9] 《XML技术在AS3．0语言编程中的应用探究》

[10] 《Flash ActionSpript 高级编程艺术》

在线咨询

上一篇：网页加载进度条实现方案
下一篇：HTML ANSI（Windows-1252）参考手册

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

写个网页更简单了！让AI根据手绘原型生成HTML - 教程+代码

从图像标注中获取灵感

获取合适的数据集

彩色网站图像变手绘图

使用图像标注模型架构

用BLEU分数评估模型

福利：定制网页风格

总结和展望

相关地址

、什么是参考文献

2、参考文献的意义

3、不同形式的资料，列为参考文献的注释

3.1 期刊文献的格式：

3.2 图书文献的格式：

3.3 学位论文的格式：

3.4 报纸文章的格式

3.5 会议文献的格式：

3.6 电子文献的格式

3.7 其他格式的参考文献，不常用，用到自行百度搜索

您的项目需求