小新 編譯自 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通過比較生成文本和參考文本的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來創建更逼真的繪制網站圖像。
代碼:https://github.com/ashnkumar/sketch-code
原文:https://blog.insightdatascience.com/automated-front-end-development-using-deep-learning-3169dd086e82
— 完 —
誠摯招聘
量子位正在招募編輯/記者,工作地點在北京中關村。期待有才氣、有熱情的同學加入我們!相關細節,請在量子位公眾號(QbitAI)對話界面,回復“招聘”兩個字。
量子位 QbitAI · 頭條號簽約作者
?'?' ? 追蹤AI技術和產品新動態
按照字面的意思,參考文獻是文章或著作等寫作過程中參考過的文獻。然而,按照GB/T 7714-2015《信息與文獻 參考文獻著錄規則》”的定義,文后參考文獻是指:為撰寫或編輯論文和著作而引用的有關文獻信息資源。
很多刊物對參考文獻和注釋作出區分,將注釋規定為“對正文中某一內容作進一步解釋或補充說明的文字”,列于文末或頁腳。
為了反映論文的科學依據和作者尊重他人研究成果的嚴肅態度,同時向讀者提供有關信息的出處,正文之后一般應刊出主要參考文獻。
列出的只限于作者親自閱讀過的,最重要的且發表在公開出版物上的文獻或網上下載的資料。論文中被引用的參考文獻序號用方括號括起來,置于所引用部分的右上角如[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.
M表示monograph,專著、圖書。
作者. 書名[M]. 出版社所在城市名:出版社名,出版年份,起止頁碼.
例如:
王永華. 現代電氣控制及PLC應用技術(第4版)[M]. 北京:北京航空航天大學出版社,2016,68-73.
D表示dissertation,碩士、博士等學位論文
作者. 書名[D]. 保存地:保存單位,年份.
例如:
張海雷. 鹵素物種催化/促進的氮雜環的硫官能團化及合成研究[D]. 大連:大連理工大學,2016.
N 表示 newspapers, 報紙
作者. 題名[N]. 報紙名,出版日期(版次).
例如:
劉琪. 加快中原城市群交通一體化發展[N]. 河南日報,2017-05-19(09).
A表示Article,論文集中的析出文獻;
C表示collection,論文集
作者. 文章題目名[A]. 論文集名[C]. 出版社地址:出版社名,出版年份,引文起止頁碼.
例如:
孫德民. 儲層條件下水淹油層測井響應機理實驗研究[A]. 水驅油田開發測井’96國際學術討論會論文集[C]. 北京:石油工業出版社,1996,10-11.
作者. 電子文獻題名[文獻類型/載體類型],文獻網址或出處,發表或更新日期/引用日期(兩個日期都寫或者任選一個).
例如:
陳寶生. 發揮高校優勢 加快構建中國特色哲學社會科學[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)
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是Extensible Markup Language(可擴展標記語言)的縮寫,是一種表示結構化信息的標準方法,因其簡單、靈活且易于讀取、訪問及處理,尤其因為在數據交換和可移植等方面具有優勢,已成為事實上的工業標準。它可以使計算機方便地操作各類信息,并且人們可以非常方便地編寫和理解這些信息。它讓AS3.0于flash連得更加親密。
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”?>
<websites>
<site>
<name>HE WAN KAI</name>
<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 albumText='2advanced壁紙' gap='-5' scrollSpeed='5'>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙1'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙2'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙3'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙4'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙5'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙6'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙1'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙2'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙3'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙4'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙5'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙6'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙1'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙2'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙3'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙4'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙5'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙6'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙1'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙2'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙3'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙4'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙5'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙6'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙1'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙2'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙3'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙4'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙5'/>
<pic linkURL='jpg.jpg' imgURL='jpg.jpg' imgText='壁紙6'/>
</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 高級編程藝術》
*請認真填寫需求信息,我們會在24小時內與您取得聯系。