您的位置：首页 > Web前端 > HTML5

【原】向html5进军（6）——用flash和wallaby+制作html5动画第五章

2011-10-16 17:44 435 查看

第五章使用wallaby制作的动画
当你完成了HTML5动画，肯定就想把它的JS和HTML移植合并进一个现成的页面。
引入动画
虽然你的页面可能很复杂，但使用动画的步骤都是一样的。
尽管一个卖弄的页面是很失利的，但为了我们的基础学习还是做一个吧。
假设你做了一个HTML文档名为enter.html，里面有一个enter site的链接：

<!DOCTYPEhtml>

<!--Created with Adobe(R) technology -->

<html>

<head>

<metacharset="utf-8"></meta>

</head>

<body>

<a href="main.html">EnterSite</a>

</body>

</html>

我们是用第二章制作的动画来放入这个页面。
让我们看看之前转换滚动文字动画时生成的文件：如图5-1

图5-1
把marquis_asserts , marquis.css marquis.js，以及jquery -1.4.2.js文件拷到和你装html的文件夹下。
拷完之后，修改enter.html，让它为你的动画引入css和javascript。
<!DOCTYPEhtml>

<html>
<head>
    <metacharset="utf-8"></meta>
    <linkhref="marquis.css" type="text/css"rel="stylesheet"></link>
    <scripttype="text/javascript"src="jquery-1.4.2.js"></script>
    <scripttype="text/javascript" src="marquis.js"></script>
</head>
<body>
    <a href="main.html">EnterSite</a>
</body>
</html>
接下来从marquis.html里获得包含动画的HTML标签
打开marquis.html后

<!DOCTYPEhtml>

<html>
<head>
    <metacharset="utf-8"></meta>
    <link href="marquis.css"type="text/css" rel="stylesheet"></link>
    <script type="text/javascript"src="jquery-1.4.2.js"></script>
    <script type="text/javascript"src="marquis.js"></script>
</head>
<body>
    <divclass="wlby_movie">
      <divclass="wlby_1 wlby_sprite">
        <divclass="wlby_2 wlby_fs">
          
          <divclass="wlby_button">
            <divclass="wlby_button_normal wlby_button_hover wlby_button_active">
              <imgsrc="marquis_assets/svgblock_0.svg"class="wlby_3"></img>
           </div>
          </div>
          
        </div>
        <divclass="wlby_4">
          <divclass="wlby_5">
            
            <divclass="wlby_button">
              <divclass="wlby_button_normal wlby_button_hover wlby_button_active">
               <img src="marquis_assets/svgblock_1.svg"class="wlby_3"></img>
             </div>
           </div>
            
          </div>
        </div>
      </div>
    </div>
</body>
</html>

只要注意class为 Wlby_movie的div就行了。选择这个div的所有内容，复制到你的enter.html的body标签里。如果按之前的步骤引入了css和javascript的话，打开浏览器就能看到效果。如图5-2

图5-2
你可能会发现，就算把这些标签放在 enter site 超链之前，动画仍然显示在最低端。这是因为wallaby生成的css将class为wlby_movie的div的position属性设置为了absolute。这意味着动画会始终显示在浏览器窗口的的最底下，而不是根据你所放div的位置。
所以要修改marquis.css文件来改变wlby_movie的位置：
div.wlby_movie
{
    overflow: hidden;
   position: relative;
    left: 0px;
    top: 0px;
    width: 550px;
    height: 400px;
}
现在动画的位置会相对与包含他的div容器，你的链接会如你所愿的显示了。如图5-3

图5-3
加入一些基础交互

Wallaby并不支持ActionScript ，所以你只能在转换后加入一些交互。

假设我们希望访问者点击滚动文本动画时，也能进入网站。那么你可以添加一点js代码。但是我们必须要由这个动画中的文本内容的引用名以便方便的引用，比如ID,或者class什么的。否则在复杂的动画里，你想要给一个特定的动画物件附加交互性可能变很困难。这也是为什么wallaby支持原件名称的原因。

让我们打开Flash项目工程文件，在舞台上选中这个文本实例，从“窗口window”->“属性properties”菜单项中打开它的属性面板，面板的最上一行就是这个原件（MarquisText）的实例名称。如图5-4

图5-4
在这里，我用了“marquis“作为这个原件的名称。如果我们在转换之前定义了名称，我们会看到这样的HTML5代码:

<div class="wlby_movie">

   <div class="wlby_1 marquis">

       

        <imgsrc="marquis_assets/svgblock_0.svg"class="wlby_2"></img>

        

      </div>

</div>

我们可以看到Div包含了一个class名为wlby_1 marquis的滚动文本。说明marquis名称已经被加上了。

现在你可以轻松的用JQuery框架所规定的方式引用这个滚动文本动画了。

打开marquis.js 文件把下面代码放在文件头：

$(document).ready(function() {

$('.marquis').click(function(){

window.location = "main.html";

});

}

这一小段js会在滚动文本被单击时激活。它告诉浏览器转向你的网站里main.html文档。

现在访问者通过点击动画也能进入你的网站了。

你能利用动画所做的事取决于你对js和jquery掌握程度以及对动画代码的了解程度。

现在，继续学习制作自己的HTML5动画吧！祝你乐在其中！一切皆有可能！

后记

这是我第一次翻译“一本”英文书籍。翻译的起因源于某天深感学好几门外语是多么重要，然后决定开启一日一翻的计划。虽然它的正文只有40页，并且所叙述的东西非常基础简单到不行。

我是边翻译边看。翻到第二章时就感觉这本书太基础了，简直是手把手的小学课文。但我看到最后的作者简介决定还是把它翻完。

本文作者Ian McLean是Flash平台的热心支持者和传播者，写商业程序已经有10多年，也是FLASH和AIR技术专家。同时还有游戏开发和产品工程师的背景。

虽然是一个写了10年程序的专家却能放下姿态写如此平易近人的面向入门者的书籍，我又为何不能翻译一下呢。况且也算初次翻译一本书，就先翻完吧。通过这本书，我领略了外国作者的耐心和仔细，每一步都详细的配图和说明，知识介绍的也全面扎实。

本书【完】

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 flash button actionscript adobe class

相关文章推荐

新的分享

章节导航

【原】向html5进军（6）——用flash和wallaby+制作html5动画 第五章

【原】向html5进军（6）——用flash和wallaby+制作html5动画第五章