中国Flash技术中心 中国Flash资料最全，学习教程最丰富的学习基地，适合初级，中级，高级的Flash人士学习，问题互相讨论，有问必答！ http://www.flashtc.com/ zh-cn NBArticle aliu@flashtc.com <![CDATA[Flash 网站的流量统计]]> http://www.flashtc.com//article.asp?articleid=2268 前言

前段时间发了两篇Flash全站的技术应用文章后，有部分网友提出说，叫我写篇文章，阐述如何实现IE的前进后退功能。但是这个并没有在我的计划之中，也没有研究过。找了一堆关于堆栈历史记录的东西，很多都用了AJAX，看着头晕，并且拷贝人家的代码来运行也实现不了。接着，还拿了2AD的JS来研究，总没发现跟历史记录有关的东西，而且历史记录也没保存到我的机器里。就算了，先把这文章写出来。但是我在测试这个统计的时候，发现我的IE也能前进，后退，只是FLASH没有作出响应而已。
后来，经过 Digi 的提点以后，竟然发现，原来这个跟前进后退是同一原理。于是就先把这个统计的写出来，再顺着把前进，后退的方法告诉大家。

一开始，想给自己的网站做个流量统计，于是搜索教程，结果发现，教程没多少，那些免费代码却一大堆。于是就注册一个试试，发现人家的统计内容很完整（特别是对那些流量低的网站），感觉自己写也没必要了。于是用了个http://www.51.la/提供的统计代码。
这个统计代码跟其它统计网站的代码我看大同小异，先注册了一个帐号，然后网站会给你生成一段统计代码，你把那段代码放入你的网页，当且仅当打开或者刷新该页，这个代码就会给你刷一次浏览量，如果有新IP登录，则再刷一个IP。
所以，如果是FLASH全站，并且浏览过程不发生页面跳转的话，那么，浏览量（PV）就只刷了一次。另一方面，你也不知道访客看了你的哪些页面。曾在站长交流大厅里问过这问题，人家都回答说Flash无法统计。
自己经过冥思苦想，终于在3秒钟内想出办法了。用框架或者IFRAME，在Flash里通过getURL刷新别的框架或者iframe不就行了吗？于是就有了思路。

效果预览：
http://hbro.cincn.com/cindex.htm

你点了每一则新闻，统计代码就刷新一次,请观察状态栏的变化，但是Flash就没刷新。

PS：我这个人是比较不厚道的，有时，比如现在这个，放了统计代码的页面理论上是会显示一个统计代码的图标，并且链接到提供统计服务的网站，而我就偏偏把它隐藏，不给它做广告。也正因为如此，前段时间遭到了一些BUG的影响，不能统计来源与搜索引擎的访问量，使得我这个访问量本来就不高的网站，日IP算出来只有30左右了。

如果这个看得不是很清楚，就看这个简单的演示文档：
http://hbro.cincn.com/hbro/cours ... cs/index_flash.html
你点了每一则新闻，统计代码就刷新一次，但是Flash就没刷新。

这次的制作可以用回我上一篇文章的演示文档：
http://www.blueidea.com/tech/multimedia/2006/3967.asp

如果你之前已经做了的话，就可以接下来做了，否则，你就先按上面的文章把内容做出来。

首先，本站的流量统计是结合免费统计代码的，所以大家先去申请一个统计帐号。我申请的地址是：http://www.51.la/
大家看下它那里的说明，稍微理解下它的统计原理。

接下来，我们就要把统计代码安放在index_flash.html里头了。但是，如果直接放在这个html文件里头，就非要刷新页面才能刷第二次PV。因此，我就用我上面所说的iframe办法。所以，在当前的html文件里头的</body>标签加上：

<iframe noscroll border="0" src="statistics.html" width="80" height="80" name="stat" id="stat"></iframe>

新建一个HTML文档，名为statistics.html，里头置入统计代码。

在常规HTML页面里头，是网页打开的时候会统计一次PV，因此，在FLASH里模仿这一过程的话，就让在HTML页面被加载到FLASH的时候（此时触发onLoad或者onData事件）刷新iframe里头的statistics.html。于是，打开上次完成的index_flash.fla文件，在onData的函数里头追加：
getURL("statistics.html","stat")//这样就可以刷新iframe以达到统计的目的，但是又不刷新Flash。

此时，刷PV的工作已经完成。
然而，我用的统计代码，是可以获取浏览者看到哪些页面的，对访问量低的网站，像我那个，这方面的信息就提供得特别的详细。但是现在，都是清一色的statistics.html，看不到到底看到了哪个页面，难道要一个页面配一个统计代码？答案是否定的。既然以前能通过参数来识别地址，这回也可以用啊。于是，getURL那句可以改为：

getURL("statistics.html?"+href, "stat");

这样就可以看到访客浏览那些页面比较多了，从而发挥了统计代码应有的功能。

 

…… [点击查看详细] ]]> Mon, 5 May 2008 09:47:31 GMT http://www.flashtc.com/review.asp?articleid=2268 <![CDATA[AS+JS的Flash网站无刷新定位技术]]> http://www.flashtc.com//article.asp?articleid=2267 前言

前段时间，我在忙着做自己的FLASH网站，其实是做来玩玩的。当初的想法是，如果能做得好，就可以考虑推广一下。但是我发现我在这方面是个绝对的白痴。然而，我当时也做了最坏的打算，就是还可以拿来给大家写点教程。今天，我算是完成了所谓的第一期工程，就开始实现我的这个写教程的想法。

目前，我要介绍的一些技术应用都在这里。今天本来打算给大家写那个FLASH+WMP播放器的制作的，觉得这个容易引起大家的兴趣。但是恰逢luzhugao正在做商业版的播放器，其代码做法我想也是大同小异，加上火山想了解我站的定位技术，就先把这个写在前面了。
废话少说，开始转入正题吧。

我们知道，在常规的HTML页面里头，点一般的链接，会实现页面的跳转，并且地址栏也跟着变化，用户想将某个页面加入收藏夹，下次打开就直接显示那个页面，而非首页。
然而，FLASH站，特别是只有一个HTML页面的那种站，它们的所谓分页可能就分布在不同的帧，或者是些LOADMOVIE之类的。为了做某些特效，不能让页面发生跳转，发生刷新，导致不管如何点分页面，刷新页面，还是会直接打开FLASH站的所谓首页，在加入收藏夹的时候，也不能定位至当前分页。如果某些时候，看到了好的文章，想直接拷贝地址发给人家，对方也不能看到相应的文章。
开始的想法：同一页面可以带有不同的参数，通过参数传递，就可以让FLASH定位至某一所谓分页。但是，问号后面的参数却不能通过FLASH的AS或者JS来修改。要修改必须重新刷新页面，以致无法实现无刷新定位。
后来在百度里搜索了“修改地址栏内容”，发现如果是"#"后面带锚点的话，是可以通过JS来修改的，并且页面也不会跳转，就连页面的位置也不移动。于是，两边的通讯都实现了，定位技术问题也就迎刃而解。

PS：发现网上说这是AJAX的应用，但是看了下关于AJAX的入门，发现跟那个核心xmlHttpRequest对象拉不上关系，只不过是无刷新而已，怎么说是AJAX的应用呢？

该技术应用的成功案例：

案例一 　　案例二 　　案例三

这三个地址里，不同的就是#后面的参数，当surveyID为空值时，页面定位至调查列表。surveyID有值的时候，就定位至对应的调查项目里头。也就是说，通过地址栏#后面的内容，可以准确定位到相应栏目。
另一方面，大家可以测试下FLASH点链接后，再刷新页面的情况，具体操作：

  •  打开 http://hbro.cincn.com/cindex.htm#contents=survey
  • 调查列表出来以后，点任意一个调查项目，此时定位在某一个调查项目了。
  • 刷新页面，你们会发现FLASH最后并没有定位到调查首页的列表，而是具体一个项目了。这正如在论坛帖子列表里点了一个帖之后，刷新后显示的是当前的帖子，而非帖子列表。
  • 在打开某个项目以后，把地址栏拷贝给别人打开，对方看到的也是具体的项目页面，而非首页。

由此看来，单一HTML的FLASH页面看起来无法实现的地址跳转和定位都可以做到了。

由于这个站里头用了别的其他效果，跟这个技术混在了一块，直接以这个为实例，讲起来不方便，没针对性，为此，笔者专门写了个简单的演示文档。大家根据页面的说明进行操作。


[NextPage]下面介绍这里用到的两个技术点：

1. JS修改，读取地址栏内容

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

从中可见，当你点了某个链接之后，document.location.hash修改的时候，地址栏#后面的内容会修改，并且页面的文字“在第几页”也发生了变化，但是页面却没有发生刷新。
人为刷新之后，页面显示的并非你最初打开所显示的内容，而是显示你设置过的内容。因此，只要把hash值传给FLASH，FLASH就可以根据此变量进行定位了。另一方面，FLASH也可以通过FSCOMMAND调用JS设置hash的值，为人为刷新的准确定位打下基础。

2. FLASH与JS的通讯

首先，FLASH可以通过FSCOMMAND调用JS。或者getURL("javascript:func()"),但是后者有些缺点。具体是哪些，有兴趣的可以向我了解。

测试办法：

首先，新建一个FLASH文档，在第一帧里写代码

var flashvar=1
fscommand("msgbox",flashvar)

然后，把文件保存一下，文件名为test.fla

接下来，“文件”-“发布设置”，在HTML选项卡里，看到模板的下拉菜单，选择“带FSCOMMAND跟踪的FLASH”接着点“发布按钮”

此时，在FLA文件所在目录下，你可以看到有一个SWF文件和一个HTML文件。用记事本打开HTML文件，找到//place your code here(代码放在此处)，写入代码：

if(command=="msgbox"){
  alert(args)
}

测试HTML文件，你会看到一个显示1的提示框出来了。
把flashvar变量改成2，就显示2。
可见，通过此办法，FLASH中的flashvar的值就传给了JS。如果把alert(args)改成document.location.hash=args的话，地址栏就给改了，但是页面没跳转。

接着，就是JS调用FLASH了。测试办法如下：
在该FLASH文档中创建一个动态文本框，变量为jsvar，接着在alert(args)后面加上test.setVariable("jsvar",document.location)
可见，动态文本显示出地址栏的内容了，这是JS传给FLASH的结果。
至于这个FLASH插件的其它方法，可以参考这里。


[NextPage]据此，笔者开始写简单演示文档的制作过程。

1. 新建一FLASH文档，保存为main.fla

2. 然后，在FLASH里创建四帧，四个均为关键帧，
第一帧为空，写入代码stop();
第二帧放入静态文本Page 1，帧标签为page1，
第三帧放入静态文本Page 2，帧标签为page2，
第四帧放入静态文本Page 3，帧标签为page3，

3. 插入一图层，放在最底，里头放上三个按钮。分别写上

on(release){
       gotoAndStop("page1")//跳转到指定的帧标签
       fscommand("setAddress","page1")//这是个FSCOMMAND命令，让FLASH去调用JS函数，函数将在JS里定义。
}

on(release){
       gotoAndStop("page2")
       fscommand("setAddress","page2")
}

on(release){
       gotoAndStop("page3")
       fscommand("setAddress","page3")
}

4. 文件保存后，按照刚才姆椒ǚ⒉家桓龃鳩SCOMMAND跟踪的HTML文件。之后，建议在格式选项卡里把HTML选项的勾去掉。为了防止大意时，以后HTML文件手动加入的代码给覆盖掉。

5. 用记事本打开main.html文件，找到//place your code here(代码放在此处)，在这里输入：

if(command=="setAddress"){
  document.location.hash=args//获得FLASH中FSCOMMAND传出的参数，并赋值给hash值，让地址栏在无刷新的情况下发生改变
}

6. 测试HTML文件，可以看到点按钮之后，地址栏发生了改变。但是刷新页面后，FLASH显示的还是第一帧，因为在刷新页面的时候，没有一个命令让FLASH的页面发生跳转

7. 为此，在main_DoFSCommand函数下面定义一个控制跳转的函数：

function setFlashPos(){
  main.TGotoLabel("_root",document.location.hash.slice(1))//让Flash跳转到地址栏#后面内容的标签名，之所以用slice(1)，是因为JS读取出来的值是包含#的。所以要用slice(1)把#去掉。http://www.zhugao.cn/info/news_show.asp?id=214 有介绍TGotoLabel的用法。
}

8. 让刷新页面或者打开页面时调用该代码，就在body标签里加入onload=setFlashPos()
此时测试，就可以实现全FLASH站的无刷新地址跳转，达到FLASH站定位的目的了。

…… [点击查看详细] ]]> Mon, 5 May 2008 09:40:32 GMT http://www.flashtc.com/review.asp?articleid=2267 <![CDATA[以HTML为基础学习DIV+CSS ]]> http://www.flashtc.com//article.asp?articleid=2261  

下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：

　　1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；

　　2、内容部分又可分为侧边栏、主体内容；

　　3、底部，包括一些版权信息。

　　有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

 

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。

 

　　DIV结构如下：

　　│body {}　/*这是一个HTML元素，具体我就不说明了*/

　　└#Container {}　/*页面层容器*/

　　　　　├#Header {}　/*页面头部*/

　　　　　├#PageBody {}　/*页面主体*/

　　　　　│　├#Sidebar {}　/*侧边栏*/

　　　　　│　└#MainBody {}　/*主体内容*/

　　　　　└#Footer {}　/*页面底部*/

至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。

<div id="PageBody">[color=#aaaaaa]<!--页面主体-->[/color]

　　　　<div id="Sidebar">[color=#aaaaaa]<!--侧边栏-->[/color]

　　　　</div>

　　　　<div id="MainBody">[color=#aaaaaa]<!--主体内容-->[/color]

　　　　</div>

　　</div>

　　<div id="Footer">[color=#aaaaaa]<!--页面底部-->[/color]

　　</div>

</div>

为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：

/*基本信息*/

body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

/*页面层容器*/

#container {width:100%}

/*页面头部*/

#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

/*页面主体*/

#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}

/*页面底部*/

#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}

把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的框架了。

关于以上CSS的说明（详细请参考CSS2.0中文手册，网上有下载）：

1、请养成良好的注释习惯，这是非常重要的；

2、body是一个HTML元素，页面中所有的内容都应该写在这标签对之内，我就不多说了；

3、讲解一些常用的CSS代码的含义：

font:12px Tahoma；

这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；

margin:0px；

也使用了缩写，完整的应该是：

margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px

或

margin:0px 0px 0px 0px

顺序是 上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；

以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，

另外还有以下几种写法：

margin:0px auto；

说明上下边距为0px，左右为自动调整；

我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，

只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。

text-align:center

文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。

background:#FFF

设置背景色为白色，这里颜色使用了缩写，完整的应该是background:#FFFFFF。

background可以用来给指定的层填充背景色、背景图片，以后我们将用到如下格式：

background:#ccc url('bg.gif') top left no-repeat；

表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，

top left

表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。

top/right/left/bottom/center

用于定位背景图片，分别表示 上 / 右 / 下 / 左 / 中；还可以使用

background:url('bg.gif') 20px 100px;

表示X座标为20像素，Y座标为100像素的精确定位；

repeat/no-repeat/repeat-x/repeat-y

分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。

height / width / color

分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。

4、如何使页面居中？

大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？

是因为我们在#container中使用了以下属性：

margin:0 auto;

按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。

如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。

通过margin:auto我们就可以轻易地使层自动居中了。

5、这里我只介绍这些常用的CSS属性了，其他的请参看CSS2.0中文手册。

当我们写好了页面大致的DIV结构后，我们就可以开始细致地对每一个部分进行制作了。

接下来，我们开始制作TOP部分，TOP部分包括了LOGO、菜单和Banner，首先我们要做的就是对设计好的图片进行切片，以下是在FW下完成的切片：

 

我将TOP部分切片为两部分，第一部分包括了LOGO和一条横线。由于LOGO图片并没有太多的颜色，这里我于是将这一部分保存为GIF格式，调色板选择为精确，选择Alpha透明度，色版为白色(此处颜色应与背景色相同)，导出为logo.gif，图像宽度为800px。

到这里，有的朋友就说了，* 为什么要使用GIF格式？使用JPEG不是更好吗？

因为GIF格式的图片文件更小，这样能使页面载入的速度更快，当然使用此格式之前必须确定图片并没有使用太多的颜色，当我们使用了GIF格式时，从肉眼上并不能看出图片有什么太大的变化，因此这是可行的。

* 接下来的Banner部分还能使用GIF格式吗？

答案是不能，因为Banner部分是一个细致的图片，如果使用GIF格式颜色会有太大的损失，所以必须使用JPEG格式，将文件导出为banner.jpg。

* 合理的切片是非常之重要的，因为切片的方法正确与否决定了CSS书写的简易程度以及页面载入速度。

切好片后，我们还需要对TOP部分进行分析并将DIV结构写入Header中代码如下：

　　<div id="menu">

　　　<ul>

　　　　<li><a href="#">首页</a></li>

　　　　<li class="menuDiv"></li>

　　　　<li><a href="#">博客</a></li>

　　　　<li class="menuDiv"></li>

　　　　<li><a href="#">设计</a></li>

　　　　<li class="menuDiv"></li>

　　　　<li><a href="#">相册</a></li>

　　　　<li class="menuDiv"></li>

　　　　<li><a href="#">论坛</a></li>

　　　　<li class="menuDiv"></li>

　　　　<li><a href="#">关于</a></li>

　　　</ul>

　　</div>

　　<div id="banner">

　　</div>

为什么要这么写呢，因为对菜单使用列表<li>形式，可以在以后方便对菜单定制样式。

而为什么要添加以下代码呢？

<li class="menuDiv"></li>

插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式，例如预览图中的竖线分隔。

然后我们在css.css中再写入以下样式：

/*页面头部*/

#header {background:url(logo.gif) no-repeat}

样式说明：

#header {background:url(logo.gif) no-repeat}

给页面头部分加入一个背景图片LOGO，并且不作填充。

这里，我们没有指定header层的高度，为什么不指定呢？

因为header层中还有菜单和banner项，所以层的高度暂时是未知的，而层的属性又可以让层根据内容自动设定调整，因此我们并不需要指定高度。

使用列表<li>制作菜单

开始此节的学习前，请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。

这一节我将告诉大家如何用列表<li>来制作菜单。

<div id="menu">

    <ul>

      <li><a href="#">首页</a></li>

   <li class="menuDiv"></li>

   <li><a href="#">博客</a></li>

   <li class="menuDiv"></li>

   <li><a href="#">设计</a></li>

   <li class="menuDiv"></li>

   <li><a href="#">相册</a></li>

   <li class="menuDiv"></li>

   <li><a href="#">论坛</a></li>

   <li class="menuDiv"></li>

   <li><a href="#">关于</a></li>

    </ul>

</div>

以上是这部分的结构，有关于<ul></ul>、<li></li>这两个HTML元素大家自己去参考相关的内容吧，它们最主要的作用就是在HTML中以列表的形式来显示一些信息。

还有一点需要大家一定要分清楚的，当在HTML中定义为id="divID"时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为class="divID"时，则在CSS中对应的设置语法是.divID。

如果id="divID"这个层中包括了一个<img></img>，则这个img在CSS中对应的设置语法应该是#divID img {}，同样，如果是包含在class="divID"这个层中时，则设置语法应该是.divID img {}，这一点希望大家要分清楚了。

另外，HTML中的一切元素都是可以定义的，例如table、tr、td、th、form、img、input...等等，如果你要在CSS中设置它们，则直接写入元素的名称加上一对大括号{}就可以了。所有的CSS代码都应该写在大括号{}中。

按照上面的介绍，我们先在css.css中写入以下代码：

#menu ul {list-style:none;margin:0px;}

#menu ul li {float:left;}

解释一下：

#menu ul {list-style:none;margin:0px;}

list-style:none，这一句是取消列表前点，因为我们不需要这些点。

margin:0px，这一句是删除UL的缩进，这样做可以使所有的列表内容都不缩进。

#menu ul li {float:left;}

这里的 float:left 的左右是让内容都在同一行显示，因此使用了浮动属性(float)。

到这一步，建议大家先保存预览一下效果，我们再添加下面的内容，效果如下：

 

这时，列表内容是排列在一行，我们在#menu ul li {}再加入代码margin:0 10px

#menu ul {list-style:none;margin:0px;}

#menu ul li {float:left;margin:0 10px}

margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左：10px，右：10px)，预览的效果如下：

 

现在，雏形已经出来了，我们再来固定菜单的位置，把代码改成如下：

#menu {padding:20px 20px 0 0}

/*利用padding:20px 20px 0 0来固定菜单位置*/

#menu ul {float:right;list-style:none;margin:0px;}

/*添加了float:right使得菜单位于页面右侧*/

#menu ul li {float:left;margin:0 10px}

这时，位置已经确定了，可是构思图中，菜单选项之间还有一条竖线，怎么办呢？

别忘了，我们早就已经留好了一个空的<li class="menuDiv"></li>，要想加入竖线就使用它了。

按照上面说的方法，我们再添加以下代码：

.menuDiv {width:1px;height:28px;background:#999}

保存预览一下，竖线是否已经出来了？关于这段代码就不多讲了，应该是很容易理解的。

 

不过，菜单选项的文字却在顶部，我们再修改成以下代码：

#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}

关于display:block;line-height:28px大家可以去参阅一下手册，我就不多讲了。

效果基本上已经实现了，剩下的就是修改菜单的超链接样式，在css.css中添加以下代码：

#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}

#menu ul li a:hover{}

这个也不多说了，没什么好说的了，最后的效果如下：

 

这一节到这里就完毕了，顺便把素材提供给大家：

构思图：点击下载

HTML和CSS源文件：点击下载

这一节里面，主要就是想告诉大家如何使用好border和clear这两个属性。

首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在<td></td>中加入这么一段就可以了，你可以试试：

<div style="border-bottom:1px dashed #ccc"></div>

大家可以再次参考手册，然后你就能明白dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。

<div id="banner"></div>

以上代码便可以实现设计草图中的banner，在css.css中加入以下样式：

#banner {

 background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/

 width:730px; /*设定层的宽度*/

 margin:auto; /*层居中*/

 height:240px; /*设定高度*/

 border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/

 clear:both /*清除浮动*/

}

通过border很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。

另一个要说明的就是clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动，如果不清除则会影响banner层位置的设定。

<div id="pagebody"><!--页面主体-->

 <div id="sidebar"><!--侧边栏-->

 </div>

 <div id="mainbody"><!--主体内容-->

 </div>

</div>

以上是页面主体部分，我们在css.css中添加以下样式：

#pagebody {

 width:730px; /*设定宽度*/

 margin:8px auto; /*居中*/

}

#sidebar {

 width:160px; /*设定宽度*/

 text-align:left; /*文字左对齐*/

 float:left; /*浮动居左*/

 clear:left; /*不允许左侧存在浮动*/

 overflow:hidden; /*超出宽度部分隐藏*/

}

#mainbody {

 width:570px;

 text-align:left;

 float:right; /*浮动居右*/

 clear:right; /*不允许右侧存在浮动*/

 overflow:hidden

}

为了可以查看到效果，建议在#sidebar和#mainbody中加入以下代码，预览完成后可以删除这段代码：

border:1px solid #E00;

height:200px

保存预览效果，可以发现这两个层完美的浮动，在达到了我们布局的要求，而两个层的实际宽度应该160+2(border)+570+2=734px，已经超出了父层的宽度，由于clear的原因，这两个层才不会出现错位的情况，这样可以使我们布局的页面不会因为内容太长（例如图片）而导致错位。

 

而之后添加的overflow:hidden则可以使内容太长（例如图片）的部份自动被隐藏。通常我们会看到一些网页在载入时，由于图片太大，导致布局被撑开，直到页面下载完成才恢复正常，通过添加overflow:hidden就可以解决这个问题。

CSS中每一个属性运用得当，就可以解决许多问题，或许它们与你在布局的页并没有太大的关系，但是你必须知道这些属性的作用，在遇到难题的时候，可以尝试使用这些属性去解决问题。

/*基本信息*/

body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

a:link,a:visited {font-size:12px;text-decoration:none;}

a:hover{}

/*页面层容器*/

#container {width:800px;margin:10px auto}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<link href="css.css" rel="stylesheet" type="text/css" />

</head>

<body>

</body>

</html>

…… [点击查看详细] ]]> Sun, 20 Apr 2008 14:48:51 GMT http://www.flashtc.com/review.asp?articleid=2261 <![CDATA[用Photoshop轻松绘制一串甜美可口的绿色芒果]]> http://www.flashtc.com//article.asp?articleid=2260 用Photoshop绘制一串甜美可口的芒果。效果还可以，自己可以加深下。原文连接

1、建立一个大小为450x450像素，分辨率为96，模式为RGB的文档。

2、创建一个新图层，使用钢笔工具绘制如下形状。

3、选择渐变工具，颜色设置#3E6936和#9BD8A6，效果如下。

4、用渐变工具填充颜色，然后按Ctrl+D取消选择。

5、执行添加杂色滤镜，设置如下。

6、再使用钢笔工具创建一个新的形状，用渐变工具填充，颜色设置为#696D30和#895831。

7、创建新图层2，然后创建一个新的芒果轮廓形状，使用上面设置的渐变颜色进行填充。

8、使用加深工具，笔刷大小为50%，范围为阴影Shadow,暴光为25%。然后添加杂色，整体效果如下。

9、这时图片的效果如下所示。

10、按Ctrl+J复制图层。

11、然后使用移动工具移动Layer2 copy层，效果如下。

12、再复制图层3。

13、使用移动工具移动Layer 3 copy，效果如下。

14、使用画笔，颜色设置为#E5FABD，笔刷大小60，不透明度为50%。

15、应用添加杂色滤镜。

16、现在的效果如下。

17、选择Layer1或者layer2 .图层，然后使用套索工具创建一个新的形状，接着按Ctrl+J复制。

18、为该形状添加图层样式。添加投影效果：

19、然后再设置光泽。

20、最终效果如下。

…… [点击查看详细] ]]> Tue, 15 Apr 2008 02:13:27 GMT http://www.flashtc.com/review.asp?articleid=2260 <![CDATA[Flash游戏制作教程：青蛙跳荷叶]]> http://www.flashtc.com//article.asp?articleid=2259  
 

先看看游戏的最终效果：


预览效果


　　制作步骤：
　　一、青蛙跳动起来。
　　二、来回移动的荷叶。
　　三、修改“来回移动的荷叶”。
　　四、跳上荷叶。
　　五、背景的移动。
　　六、更像是跳到荷叶上。
　　七、加上开始，结束。
　　八、增加游戏的可玩性（吃小虫）。
　　九、添加平面，效果。

 

　　一、青蛙跳动起来
　　先完成的当然就是青蛙的跳动了，因为我们是以俯视的的角度，所以高低的状态就是尺寸的大小，移动就是y坐标的减。效果及源代码下载：


效果1


　　代码及相关注释：

　　//游戏的最大深度，后面会用的，要设一下最大的尝试，因为我们用到一个鼠标拖动。
　　var numMaxDepth:Number = 1000;
　　//跳动的过程############################
　　//青蛙mc名称
　　var mcPlayer:MovieClip;
　　//移动
　　function playerMove() {
　　//这是自定义的一个从初使值到最高值，再以同样的增量回到初值的类,要结合onEnterFrame循环来移动。
　　//new casUpTopDown(10) 移动次数
　　mcPlayer.objUpTopDown = new casUpTopDown(10);
　　//速度
　　mcPlayer.numSD = 10;
　　//什么时候开始
　　mcPlayer.numStar = 100;
　　//青蛙移动的速度
　　mcPlayer.numMoveSd=4
　　//循环来移动
　　mcPlayer.onEnterFrame = function() {
　　if (this.objUpTopDown.run() != 0) {
　　this._xscale = this._yscale=(this.numStar+this.objUpTopDown.run()*this.numSD);
　　this._y-=this.numMoveSd
　　} else {
　　//释放资源
　　delete (this.onEnterFrame);
　　delete (this.objUpTopDown);
　　delete (this.numSD);
　　delete (this.numStar);
　　delete (this.numMoveSd);
　　}
　　};
　　}
　　//
　　//鼠标#############################
　　//mouseStyle, 鼠标样式
　　_root.attachMovie("mouse", "mouseStyle", numMaxDepth);
　　var objMouse:Object = new Object();
　　// onMouseDown、onMouseMove、onMouseUp 和 onMouseWheel
　　objMouse.onMouseDown = function() {
　　//trace("按下");
　　};
　　objMouse.onMouseMove = function() {
　　//trace("移动");
　　_root.mouseStyle._x = _xmouse;
　　_root.mouseStyle._y = _ymouse;
　　};
　　objMouse.onMouseUp = function() {
　　//trace("松开");
　　playerMove();
　　};
　　Mouse.hide();
　　Mouse.addListener(objMouse);


　　casUpTopDown.as


　　class casUpTopDown {
　　//
　　var numV:Number = 0;
　　//最大次数
　　var numMax:Number;
　　//
　　var numFx:Number = 1;
　　//是否反方向
　　var isFx:Boolean = false;
　　//
　　function casUpTopDown(numMax:Number){
　　this.numMax=numMax
　　}
　　//
　　function run() {
　　if (numV+1   numV++;
　　return numV
　　} else {
　　if (numV-1>0) {
　　isFx = true;
　　numV--;
　　return numV
　　}else{
　　return 0
　　}
　　}
　　}//end fun
　　}

二、来回移动的荷叶

　　效果及源代码下载：


效果2


　　现在我们来做游戏中另一个主要的元素：移动的荷叶，我们先让它来回移动起来。我们在"青蛙跳动起来”的代码上加入：

　　1.把所有程序生成的荷叶都放在一个容器里：
　　var mcHys:MovieClip = _root.createEmptyMovieClip("mcHys", 999);

　　2.这个mc里设置一些公有属性：
　　//行距
　　mcHys.numHJ = 80;
　　//尺寸
　　mcHys.numWH = 58;
　　//下移速度
　　mcHys.numDownSd = 4;
　　//随机起始的时间
　　mcHys.arrMoveStarTime = [0, 48, 60, 20, 48];

　　其中：mcHys.swapDepths(mcPlayer);
　　目的是把荷叶容器mcHys的与mcPlayer的深度交换。因为青蛙要在荷叶的上面。

　　3.写入荷叶
　　用了两个函数：
　　复制一批荷叶：getSomeHy(numCount:Number, mcHys:MovieClip)
　　设置每个荷叶的行为：setHeYeMove(mcHy:MovieClip, numSD:Number, numStarTime:Number)
　　//初使化荷叶
　　getSomeHy(4, mcHys);

　　注：这些方法在后来都会修改，我们现在的目的只是把要完成的目标完成了，修改是后面的事。

　　//移动的荷叶############################
　　function setHeYeMove(mcHy:MovieClip, numSD:Number, numStarTime:Number) {
　　mcHy.objUpTopDown = new casUpTopDown(480);
　　mcHy.numSD = numSD;
　　mcHy.numStar = mcHy._x;
　　//什么时候开始
　　mcHy.numStarTime = numStarTime;
　　mcHy.onEnterFrame = function() {
　　if (this.numStarTime--<0) {
　　if (this.objUpTopDown.run() == 0) {
　　this.objUpTopDown.isFx = false;
　　}
　　this._x = (this.numStar+this.objUpTopDown.run()*this.numSD);
　　}
　　};
　　}
　　//荷叶容器
　　var mcHys:MovieClip = _root.createEmptyMovieClip("mcHys", 999);
　　mcHys.swapDepths(mcPlayer);
　　//行距
　　mcHys.numHJ = 80;
　　//尺寸
　　mcHys.numWH = 58;
　　//下移速度
　　mcHys.numDownSd = 4;
　　//随机起始的时间
　　mcHys.arrMoveStarTime = [0, 48, 60, 20, 48];
　　//复制一批
　　function getSomeHy(numCount:Number, mcHys:MovieClip) {
　　for (var numI:Number = 0; numI  var mcTem:MovieClip = mcHys.attachMovie("hy", "mcHy"+numI, numI);
　　mcTem._y = (Stage.height-mcHys.numWH)-numI*(mcHys.numHJ+mcHys.numWH);
　　mcTem._width = mcTem._height=mcHys.numWH;
　　setHeYeMove(mcTem, 1, getNoSameRandNum(mcHys.arrMoveStarTime));
　　}
　　//end for
　　}
　　//初使化荷叶
　　getSomeHy(4, mcHys);
　　//

三、修改"来回移动的荷叶"
　　我们发现我们写出来的荷叶，并不是我们想要的，如里每一行只有一个荷叶的话，青蛙的选择就很少了。所以我们应该在每一行放置若干个荷叶。效果及源代码下载：


效果3


　　我们主要是修改：移动的荷叶 setHeYeMove(mcHy:MovieClip, numSD:Number, numStarTime:Number, numLeftRight:Number) 和复制一批

：function getSomeHy(numCountI:Number, numCountJ:Number, mcHys:MovieClip) 这个两个函数：

　　1) setHeYeMove主要修改的部分就是荷叶移动的状态：目前在于每组荷叶与其它荷叶是交替来回移动。我们在这里定义了一个数组：
　　//随机起始的时间
　　mcHys.arrMoveStarTime = [0, 48, 60, 20, 48];
　　配合：
　　//获得不相同的随机数
　　function getNoSameRandNum(arrA:Array)
　　来随机改变荷叶的移动的起始时间。来完成作到这一点。

 

　　2) getSomeHy主要作用就是生成一个几行几列对队列。不知读者有没有发现：如果不按鼠标，青蛙就会随着荷叶来回移动，好像就停在上面。因为我们加了初使化语句：

　　onEnterFrame不停的指定的：青蛙的坐标等于荷叶的坐标。

　　//青蛙附上第一个荷叶
　　mcPlayer.onEnterFrame = function() {
　　this._x = mcHys.mcHy0_1._x;
　　this._y = mcHys.mcHy0_1._y;
　　};


　　四、跳上荷叶
　　效果及源代码下载：


效果4


　　要让青蛙跳上荷叶，而且要随着荷叶移动。我们只要作到：青蛙的坐标等于荷叶的坐标;然后我们还要检测青蛙是否跳上荷叶呢？这个检测代码很显然要放在青蛙移动的代码之中： playerMove()。加入：

　　//检测跳上
　　//
　　for (var mcI in _root.mcHys) {
　　if(this.hitTest(_root.mcHys[mcI])){
　　//贴上
　　this.onEnterFrame=function(){
　　this._x=_root.mcHys[mcI]._x
　　this._y=_root.mcHys[mcI]._y
　　}
　　break;
　　}
　　}


　　注：这里的检测效率不高，因为我们是检测所有的荷叶是否碰到青蛙，很显然，我们只要检测青蛙上一行的荷叶就可以了，这里的代码没有写出来。有兴趣的读者可以自己修改。
　　
　　　　五、背景的移动

　　效果及源代码下载：


效果5


　　现在青蛙可以跳上荷叶，可是只能在这小范围运动，我们要让青蛙走的更远。如何移动背景呢？只要把荷叶容器mcHys的Y坐标递增，看上去青蛙就向上移动了。把： playerMove()中的this._y -= this.numMoveSd;
　　修改为：
　　//移动背景
　　_root.mcHys._y += this.numMoveSd;

　　背景移动了：
　　最忘了复制一行新的荷叶
　　getOneHy(3, mcHys);
　　当然也不要忘了删除跳过的荷叶：（后面的版本会加上这个）

　　注：读者会发现：getSomeHy这个函数不见，而换成了一个：getOneHy，因为笔者发现在复制一行要比复制几行的功能更适合，这个游戏。

　　六、更像是跳到荷叶
　　效果及源代码下载：


效果6


　　我现在的青蛙可以跳上荷叶了，不过问题是好像不太逼真：青蛙总是落在荷叶的正中，而且从就自算青蛙落在荷叶的边上也会变到荷叶的正中，所以我们要修正它：

　　我们还是要修改：playerMove()这个函数：

//检测跳上
　　//
　　for (var mcI in _root.mcHys) {
　　if (this.hitTest(_root.mcHys[mcI])) {
　　//
　　var numTemPlayHeCha:Number = this._x-_root.mcHys[mcI]._x;
　　//
　　getOneHy(3, mcHys);
　　//贴上
　　this.onEnterFrame = function() {
　　//移动荷叶中心_x      
　　this._x = _root.mcHys[mcI]._x+numTemPlayHeCha;
　　//end if  
　　//移动荷叶中心_y 
　　if (this.numOnHysY != _root.mcHys[mcI]._y) {
　　if ((this.numOnHysY-this.numToHySd)>_root.mcHys[mcI]._y) {
　　_root.mcHys._y += this.numToHySd;
　　mcPlayer.numOnHysY -= this.numToHySd;
　　} else {
　　var temaaa:Number = Math.abs(mcPlayer.numOnHysY-_root.mcHys[mcI]._y);
　　_root.mcHys._y += temaaa;
　　mcPlayer.numOnHysY -= temaaa;
　　}
　　//end if
　　}
　　//end if     
　　};
　　break;
　　}
　　}

程序思路：分别处理青蛙的x坐标和y坐标：

　　1)青蛙落在荷叶哪一个部位，就在这停在荷叶的哪个部位。
　　this._x = _root.mcHys[mcI]._x+numTemPlayHeCha;
　　2)青蛙y坐标慢慢移动到荷叶的y坐标。为什么一定要移动到荷叶的y坐标，因为青蛙跳的距离是一定的。青蛙跳上荷叶不一定是会是最佳位置，所以要修正，不然后多跳几次，发现青蛙根本跳不到下个荷叶，不信的读者可以试一下。

　　
　　

　　七、加上开始，结束

　　1)到目前为止我们的青蛙还可以"漂”在水中，即使不跳到荷叶上。
　　2)删除跳过的荷叶(上文提到的)

　　效果及源代码下载：


效果7


　　八、增加游戏的可玩性（吃小虫）。

　　这个游戏大致最算做完了，只是觉得没有什么游戏性，那我们再加一个元素小虫，随机在荷叶中出现小虫，如果青蛙跳上有小虫的荷叶，就加10分。效果及源代码下载：


效果8

　　程序思路：
　　1)要在荷叶上出现小虫最简单的方法就是在mc荷叶符号,里加入一个图层，入一个mc的小虫,并命名一个名字。
　　2)在产生荷叶的代码中加一个随机数。来判断是否显示,如果显示就设置所产生的荷叶中的"小虫"电影符号的alpha值为100,否则为0。
　　3)在判断青蛙是否跳上荷叶的代码处加入一段代码：来判断当前的荷叶的小虫"电影符号的alpha值,如果是100就证明有小虫,分数加1。（分数我们可以一个_root.变量来存储）

　　九、添加平面，效果
　　效果：


最终效果

 

 

 

…… [点击查看详细] ]]> Sun, 13 Apr 2008 03:13:48 GMT http://www.flashtc.com/review.asp?articleid=2259 <![CDATA[一个精美的全Flash个人网站的制作全程]]> http://www.flashtc.com//article.asp?articleid=2258 点击查看详细] ]]> Sun, 13 Apr 2008 02:58:02 GMT http://www.flashtc.com/review.asp?articleid=2258 <![CDATA[网易头部超眩的弹出广告]]> http://www.flashtc.com//article.asp?articleid=2257 网易头部刚刚打开时候的头部那个向下慢慢出滑动来的大幅广告制作


 提示：您可以先修改部分代码再运行

 提示：您可以先修改部分代码再运行
…… [点击查看详细] ]]> Thu, 10 Apr 2008 08:43:22 GMT http://www.flashtc.com/review.asp?articleid=2257 <![CDATA[简析3D旋转菜单]]> http://www.flashtc.com//article.asp?articleid=2256 3D旋转菜单目前好像满火的，正好自己也做了一个，分享一下吧（感谢gotoAndLearn提供视频下载）

先来看看效果吧：click here（忘了做loading了 ）

先来说说思路，首先要形成一个椭圆轨迹，这个函数可以这样写
复制内容到剪贴板
代码:
function move_me() {
    this._x = Math.cos(this.angle)*r_x+c_x;
    this._y = Math.sin(this.angle)*r_y+c_y;
    this.angle += speed;
    ratio = this._y/(r_y+c_y);
    this._xscale = this._yscale=ratio*100;
    this.swapDepths(ratio*100+100);
}
cos是邻边比斜边，所以对应_x，同理sin对应_y，这里的r_x和r_y分别是在函数外定义的椭圆的x半径和y半径，c_x和c_y是椭圆的中心
缩放比例是采用y坐标与椭圆的y半径与椭圆的中心之和

这样再加个onEnterFrame，就可以旋转了，当然要先将参数定义好

如果要多个不同的mc进行旋转的话，其实也很好办，只要事先分配给每一个mc一个angle就行了
 
代码:
for (var i = 0; i        var t:MovieClip = home.attachMovie("item", "item"+i, i+1);
        t.angle = (i/item_num)*(Math.PI*2);
}
item_num是先前定义的mc的数量

倒影那块，倒是卡了我一段时间，原来要实现渐变遮罩，要将遮罩与遮罩都启用位图缓存

还要说一下，上面这个item其实只是个壳，里面有icon_mc，和ref_mc，而这两个也还是壳，真正要执行loadMovie的其实是t.icon_mc.icon_loader和t.ref_mc.ref_loader，为什么要这么做呢，一层套一层多麻烦，开始我也这么认为，所以直接用t.icon_mc来loadMovie，结果遮罩失效。

里面还用到了easing类，这个是在点击mc时要使用的。

最后还有一个难点就是提示效果，这里用到了Delegate类，她的作用就是定义函数的作用域。

为了方便修改，所以采用了xml载入的方式

全部的AS：
 
代码:
import mx.utils.Delegate;
import mx.transitions.Tween;
import mx.transitions.easing.*;
var item_num:Number;
var r_x:Number = 350;
var r_y:Number = 125;
var c_x:Number = Stage.width/2;
var c_y:Number = Stage.height/2;
//这个是定义旋转的速度的
var speed:Number = 0.01;
//定义home，相当于_root
var home:MovieClip = this;
//这个将来要显示内容的
theText._visible = false;
//将tooltip从库中载入
var tooltip:MovieClip = this.attachMovie("toolTip", "tooltip", 1000);
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = function() {
    icons = xml.firstChild.childNodes;
    item_num = icons.length;
    for (var i = 0; i        var t:MovieClip = home.attachMovie("item", "item"+i, i+1);
        t.angle = (i/item_num)*(Math.PI*2);
        t.icon_mc.icon_loader.loadMovie(icons[i].attributes.url);
        t.ref_mc.ref_loader.loadMovie(icons[i].attributes.url);
        t.txt = icons[i].attributes.intro;
        t.content = icons[i].attributes.content;
        t.onEnterFrame = move_me;
        t.icon_mc.onRollOver = over;
        t.icon_mc.onRollOut = out;
        t.icon_mc.onRelease = released;
    }
};
function released() {
    for (var i = 0; i        var t:MovieClip = home["item"+i];
        delete t.onEnterFrame;
        delete t.icon_mc.onRollOver;
        delete t.icon_mc.onRollOut;
        delete tooltip.onEnterFrame;
        delete t.icon_mc.onRelease;
        speed = 0;
        tooltip._x = 8000;
        if (t != this._parent) {
            var tw:Tween = new Tween(home["item"+i], "_alpha", Strong.easeOut, 100, 0, 1, true);
        }
        if (this._parent.content.indexOf("|")>-1) {
            var tmp_arr:Array = this._parent.content.split("|");
            this._parent.content = tmp_arr.join("
");
        }
        this.x = this._parent._x;
        this.y = this._parent._y;
        this.scale = this._xscale;
        var tw2:Tween = new Tween(this._parent, "_x", Regular.easeIn, this._parent._x, 200, .5, true);
        var tw3:Tween = new Tween(this._parent, "_y", Regular.easeIn, this._parent._y, 250, .5, true);
        var tw4:Tween = new Tween(this._parent, "_xscale", Regular.easeIn, this._parent._xscale, 100, .5, true);
        var tw5:Tween = new Tween(this._parent, "_yscale", Regular.easeIn, this._parent._yscale, 100, .5, true);
        theText._visible = true;
        theText.htmlText = this._parent.content;
        var s:Object = this;
        tw2.onMotionStopped = function() {
            s.onRelease = unreleased;
        };
    }
}
function unreleased() {
    theText._visible = false;
    var tw2:Tween = new Tween(this._parent, "_x", Regular.easeIn, 200, this.x, .5, true);
    var tw3:Tween = new Tween(this._parent, "_y", Regular.easeIn, 250, this.y, .5, true);
    var tw4:Tween = new Tween(this._parent, "_xscale", Regular.easeIn, 100, this.scale, .5, true);
    var tw5:Tween = new Tween(this._parent, "_yscale", Regular.easeIn, 100, this.scale, .5, true);
    speed = 0.01;
    for (var i = 0; i        var t:MovieClip = home["item"+i];
        t.onEnterFrame = move_me;
        t.icon_mc.onRollOver = over;
        t.icon_mc.onRollOut = out;
        t.icon_mc.onRelease = released;
        if (home["item"+i] != this._parent) {
            var tw:Tween = new Tween(t, "_alpha", Strong.easeIn, 0, 100, 1, true);
        }
    }
}
function over() {
    tooltip._x = this._parent._x;
    tooltip._y = this._parent._y-this._parent._height/2;
    tooltip.swapDepths(home.getNextHighestDepth());
    tooltip.tip_txt.htmlText = this._parent.txt;
    tooltip.onEnterFrame = Delegate.create(this, moveTip);
}
function moveTip() {
    tooltip._x = this._parent._x;
    tooltip._y = this._parent._y-this._parent._height/2;
}
function out() {
    delete tooltip.onEnterFrame;
    tooltip._x = 8000;
}
xml.load("items.xml");
function move_me() {
    this._x = Math.cos(this.angle)*r_x+c_x;
    this._y = Math.sin(this.angle)*r_y+c_y;
    this.angle += speed;
    ratio = this._y/(r_y+c_y);
    this._xscale = this._yscale=ratio*100;
    this.swapDepths(ratio*100+100);
}
this.onMouseMove = function() {
    speed = (this._xmouse-c_x)/6000;
};
//这个是为了防止鼠标移走后，旋转的速度太快
var mouseListener:Object = new Object();
mouseListener.onMouseMove = function() {
    if (home._xmouse>=Stage.width-20) {
        speed = 0.01;
        delete tooltip.onEnterFrame;
        tooltip._x = 8000;
    }
    if (home._xmouse<=20) {
        speed = -0.01;
        delete tooltip.onEnterFrame;
        tooltip._x = 8000;
    }
};
Mouse.addListener(mouseListener);
感觉鼠标移出场景和移入场景那块，处理的不是很完美

源文件下载：3D.rar …… [点击查看详细] ]]> Thu, 10 Apr 2008 08:39:30 GMT http://www.flashtc.com/review.asp?articleid=2256 <![CDATA[css实现FLASH的幻灯片效果]]> http://www.flashtc.com//article.asp?articleid=2255 一个CSS写的效果！ 点那个小老鼠！

 提示：您可以先修改部分代码再运行
这个有点像你的那个！　

 提示：您可以先修改部分代码再运行
 
…… [点击查看详细] ]]> Thu, 10 Apr 2008 08:27:47 GMT http://www.flashtc.com/review.asp?articleid=2255 <![CDATA[Flash格斗动画的动作设计和动作的制作(下)]]> http://www.flashtc.com//article.asp?articleid=2254 接上文继续讲 ^ ^

   由于内容较多, 请静下心来好好阅读, 并且结合操作, 步骤紧凑一个都不能遗漏!请确定你已经很好的阅读了【推荐】Flash格斗动画的动作设计和动作的制作(上)然后保留适当的概念在脑中, 只要适当即可, 通过更多的实践和学习从而更好的巩固和加深属于自己的理论基础.
(a\5Hh`,`0   基础是一个学习的入门, 但却不是要循规蹈矩, 而是要打破常规, 缔造理想中的动作, 就好像画画一样, 基础并非是那素描, 然而素描却是他的基础, 是大部分人需要深入去学习的,  只有小部分的人以其独特的方式去创造世界所没有的艺术, 不幸的是我们几乎都不会是那少部分人中的一员, 所有我们需要探索别人开拓过道路, 找到捷径, 并借以达到各自所要的, 所理想的.

   那么进入正题:闪吧新社区\$Jp$x` j&_
这次的课题分为两大类
(H_ UT&L9B@h5g01 是如何制作, 基本的动作表现手法以及不同类型的制作过程.闪吧新社区*X}1N&K9^1Bfa ?
2 是如何学习, 提高动作质量, 直到能够表达脑袋里所想的动作.
H PQSd)I6[cp8v0B0闪吧新社区UR8{%C ^(X
原本学习是第一步, 但由于学习动作要建立在一定软件操作基础上, 所以这里先讲如何制作的基本概念:
Qh|7@'pB5Yt'V]0这里我推荐使用Flash8进行制作, 一来8.0的线条定义范围是0-100, 二来8.0具备滤镜功能, 可以更好的表达格斗所需要的效果. 还有一个原因, 我不想用理论基础, 和动作基础来扼杀了一些想象力丰富的"孩子", 基础的东西学的深了, 会失去很多创意性的东西, 这不是我们想要的, 所以只要你自信自己的想象力够丰富, 动作设计够有创意, 那么你学着怎么作就好了, 不要太在意我所谓的那些基础!! 但这只是个别... 所以也别太相信自己了...

闪吧新社区6i-r2d5O2k9q
1: 请适当调节屏幕的分辩率, 以高分辩率为标准, 这样可大幅提高Flash中的编辑范围. 闪吧新社区-{/t4\-@d%Lib3X2Qf
2: 打开Flash8, 新建文档.

3: 在文档中画一个黑色的圆, 删除边线, 并按F8创建元件, 然后分别画上各个肢体,如图;

4: 按Ctrl+A全选, 然后右键- 分散到图层.

5: 开启[紧贴至对象]的功能, 组合人物并进行造型的修改, 以达到良好的比例. 提示1: 头部的大小可根据情况进行调节, 最好在内部调节; 提示2: 紧贴对象只需运用在 腿和身体的连接点上, 无需运用在手于身体的连接, 因为手和身体的连接点以及被头部覆盖 ;(*建议:由于紧贴对象是将会是一个经常使用的功能, 所以请设置一个快捷键, 如Ctrl+Shift+Z, 保证以最快的速度进行功能键的切换, 对于提高工作质量和效率这是非常有必要的!) *快捷键的设置: 菜单-编辑-快捷键-其它的自己动手!
@z h)DN0

然后测试下刚才制作的FLASH动画,看看效果.

6: 在刚刚的制作中你可能发现头部在最上层影响了手的编辑, 那么现在我们要规范下[层]的属性;头部移动到最下层, 并在属性中设置为动画渐变, 然后对层进行命名, 请按下图的排列方式, 为了后续的操作, 前期的规范是很有必要的, 当然你可以根据自己的习惯进行定义.

7: 请设置帧频,如12, 16, 18, 25等, 并按Ctrl+S保存文件, 记住,往后的操作中几乎没完成了部分动作, 或几分钟就要保存一次, 这是一种习惯, 避免重大的损失.闪吧新社区V&n} c jJx(}
8: Ctrl+A全选, 然后在帧上, 右键-剪切帧, 然后按Ctrl+F8 新建元件, 命名为"原型", 确定, 然后在第一帧右键粘贴帧.(*此次操作的目的:学习帧的移动, 并且要以原型为模版进行后面的单个动作的编辑,同样的帧的移动也是经常性动作,所以以可以设置快捷键)右键剪切:

新建一个元件:
"D3^YL$vK&r9r+j0

粘贴:闪吧新社区'hc7r0[6g R

9: 人物的造型基本完成了, 那么现在就开始学习如何作动作, 首先打开库面板, Ctrl+L, 然后右键原型-直接复制, 并且命名, 随便命名. (*提示: 由于我们就于教程所以涉及的内容比较少, 但当正式制作的时候文件的命名和文件夹的命名是相当讲究了, 因为东西多了不整理清楚的话, 效率会受影响, 这也是一种习惯, 任何事总有他变繁杂的时候, 莫要等到了那时再来翻箱倒柜的, 养成一个整理的好习惯!!)闪吧新社区J'E H&@ Y)J2{Y
10: 双击复制的元件进入编辑(双击的位置是那个小窗口), 以下我们开始正式进入动作编辑, 作另一个分节;

---------------------------Action------------------------------
^f'B Dk0提示: 在动作编辑前, 我们应当先明确我们要作什么样的动作, 这里我会举些例子, 但你们要综合自己的想法去作改变, 在学习过后有所思考, 想想自己要的是什么? 作自己, Be youself~在之前的人物编辑中, 我忽略了"姿势" 这一个要点, 因为这是这一节的内容, 那么这里所谓的姿势是什么?

其实就是预备动作, 不同的格斗术在对战时都有不同的架势, 我们就是要确定这个"架势", 然后在架势的基础上编辑我们后期的动作, 这也是拳皇的典型, 那么对此我们也需要修改下我们的标准架势:以下作几个类型的演示, 在后面的教程中你可以在动作上自由发挥, 在步骤上跟着我的脚步就可以了, 这样更有利于你的学习.闪吧新社区@'C+f,Jq"d_

提示2: 双击原型进行基本架势的编辑, 确定了以后它才是真正的原型, 编辑完后Ctrl+A全选-在帧上右键复制帧, 然后双击动作_1 (复制的元件) , Ctrl+A全选-在帧上右键粘贴帧, 完成修改, 这个步骤在以后不会少见!! (请下载这个视频演示: 点击下载此文件它将会很清楚告诉你整个过程的操作, 你会发现我在一些功能的操作上都使用的快捷键, 所以操作的过程很快, 如果有不明白的地方请把教程内容多阅读几遍, 这几乎是很有必要的!)闪吧新社区6_bPU rcv(^$Ap7R
2: 现在我们来编辑一个"回旋踢"的动作,  具体请查看视频教程, 分为Part-1 和Part-2.[down=attachments/All_Files/Action-2.rar]
R!Lx kl4Dd0由于我操作多用快捷键进行功能的转换, 如Crtl+A全选, 然后在帧上按住Alt进行所有帧的复制, 自定快捷键Ctrl+Shift+Z 不断的切换"紧贴对象", Z 放大镜, 当放大镜选用的时候, 按住Alt缩小, 按V切换到选择工具, Tab隐藏工具栏(需要自定义), F5添加空白帧, 内容比较浓缩, 对于新手需要点时间消化下.闪吧新社区2`5B[h%i-D,h
---------------------------------------------------------------------------------闪吧新社区({C.z v;P5r?5weT
具体操作步骤解说:
9fR ]i(b01: 全选, 在帧上按住Alt向右移动复制帧, 进行关键动作的编辑.
;g4c&Tj;sy!T02: 重复以上动作把每个关键动作编辑好, 这时候就需要一定的动作基础, 不过我们先来讲操作, 不会的人可以任意编辑几个动作试试效果就可以了. 在编辑动作的时候要不断的切换"紧贴对象", 紧贴的功能主要是针对腿与身体的Y型连接点.

然后在测试下

这时你会发现, 线条的变化很不理想, 这实在是Flash给我们开的一个最大的玩笑了, 为了这个东西不知道要再浪费多少时间去处理, 但没办法, 只好就硬着头皮去作吧, 幸而还是有一个办法能解决的, 纵使依然不是什么好办法...
'i*pFv)q F p05: 接下来进入第二步, 也是相当重要的一个学习点: 形状提示点

首先, 按<,>左右移动帧, 看看具体那些线条出错, 然后选择其一, 菜单-修改-添加形状提示.在截图中你可以看到我使用的都是快捷键, 你会知道为什么的!!

然后移动提示点, 保证点对点的方式, 基本只需要一个点就可以了, 除非个别造型上的需要, 有时脚也需要2个点来控制, 这留着你们以后去实践中发现了!

点设定成功后, 首帧显示为黄色, 尾帧显示为绿色, 无效为红色.

这几乎是一个繁琐的工作, 从头到尾...

对于使用形状提示可能遇到的问题:
+Lg1{9zx;\q01: 用一个点提示, 但还存在些许的差错的时候就使用2个点.
['gR~@;q6d-Ux02: 当鼠标点击其它区域, 提示点消失的时候, 只要再次添加就会出现了, 然后再右键删除多添加的提示点, 也可以不删除, 因为对动画不会有影响.闪吧新社区,?l6m2s.r:e
3: 提示点的过渡只是点对点间的直线运动, 不是智能的, 所以某些动作需要再重新编辑, 方法是选择空白帧按F6, 然后逐个修改.
^"t YR-WPq9kY"]04: 有时候直线会意外的变成曲线, 给移动带来的不便, 这时你就要使用选择工具, 然后把取消变成直线, 也需要设快捷键!!

以上我个人觉得还是比较难的, 但如果你以为教程就这样完了那可就大错特错了...闪吧新社区'S|4Y9AK*Y_
上面这个方法是火柴人动画制作一个比较规范和精细的方法, 但效率很低, 即属于入门级别, 又属于追求完美级别的人所用的方法.

我个人现在还是比较弥漫的,因为越基础我就会觉得越难,也不是说越难我就会做的越容易,这个我自己都不好说,反正现在还在试验,希望大家参考下

…… [点击查看详细] ]]> Fri, 4 Apr 2008 07:28:53 GMT http://www.flashtc.com/review.asp?articleid=2254 <![CDATA[Flash格斗动画的动作设计和动作的制作（上）]]> http://www.flashtc.com//article.asp?articleid=2253 来源:闪吧  作者:justsolo

■第一课:理论基础

首先我们要先确立对象,我们的对象是格斗的动作设计,以及动作的动画制作,不需要多余的场景,不需要多余的噱头,把握好我们的主体!!现在很多人都用着错误的方法在学习研究动作类动画,尽管你依然能从那错误的方法中得到进步,可是那对将来的发展是一种制约!那么怎样才是正确的?我还无法肯定,但以我多年的经验,我知道目前怎样才是最合适的,如果看完了有不同意见那最好的了!!

先来理解

"动作"这个词所具备的属性:

1'姿势

2'平衡

3'速度

4'力度

5'惯性

6'作用力

7'加速度

8'运动轨迹

(不知道还有没有什么要素遗漏的,请补充...)

回忆一下,你作动作设计的时候有没有考虑到以上相关因素,或者在研究动作的时候~不管有没有我先来介绍一下这些属性究竟代表的是什么,与动作设计又有什么样的关联.

■设计要靠创意，动作设计同样要靠创意

动作的姿势就是其中一个表现形式,然而创意的本身不能脱离实际,这里所谓的实际并非我们现实的实际,而是一种假定条件,然而这种假定条件却要建立在力学原理的基础上,所以姿势不能只是一味的好看而已,它可以夸张,比如赋予橡皮的能力,那么就要同时具备弹性学的原理.



■姿势引导出来的就是平衡

问题,平衡并不像它字面上的那么单纯,它包含"静态中平衡"以及"动态中平衡".

静态平衡相对简单,一个姿势正确与否看他是否能保持平衡就知道了,与平衡相关的属性就是"重心"以及"支撑点",比如一个侧踢,脚往前,身体自然的往后稍倾,以达到重心平衡.

动态平衡就比较复杂,但了解的基本的属性时也很容易理解,动态平衡的属性:速度,惯性,运动方向,重心,支撑点,但人物悬空的时候是没有支撑点的,但此时重心就尤为重要,你要知道为什么直升机的尾巴要多一个"风扇"...人物跑动的时候手臂自然摆动,方向对应相反...一个右脚侧踢的时候,右手会大幅度的向后方摆动...这都是为了保持动态过程中的一个重心平衡.



■速度

速度分为整体速度和局部速度,整体和局部是紧密关联的,这种关联体现在速度和平衡的问题.移动速度越快,相应的重心会越低;右手出拳的速度越快,相应的左手的回缩越快;右脚侧踢越快,相应的右手回缩速度越快;然而速度快并不代表力道大.

■力度的计算公式是:

速度x质量x重心的位移度

重心的位移度代表的是惯性的问题,比如一个速拳,它本身攻击不大,但若加上身体的重心移动,那么身体的质量就会加到拳头上,力度相应提升.力度会表现在惯性上,速拳容易收回,而重拳就有一个惯性缓冲的过程.

■惯性是一个绝对不能忽视的对象

它能很直接的体现物体的质感,[钢弹]是个在与惯性脱离最大的动画,它可以直接忽视机器人本身的质量然后进行位移.与惯性紧密相连的一个表现手法是"缓冲",至于如何表现请多注意生活中的点滴,或者游戏(主要还是实际生活中的内容,因为很多游戏为了表现手法而忽视的部分的惯性原理,这并非不可取,只是要注意表现的手法,让他达到理想的"实际",比如钢弹的理想实际是机体无限坚固,动力无限大,好比我们玩鼠标跟金刚玩汽车一样轻松.动作也是如此,自己去体会吧,这种东西更多的是一种感觉,如果你没有这种感觉就是没有动作设计的天分,很简单的道理.

■作用力一个大项

它包含:作用力与反作用力,摩擦力,阻力,这些名词看起来不一样,其实都是一样的,就是作用力与反作用力.作用力作为一个前提的条件下,引导出来的就是对于作用力的表现,这才是重点.跑的多快,跳的多高,一拳能够打出什么反应,这都能引起视觉反应,简单的说,就是攻击究竟有没有力道感,就看你怎么打,用什么姿势打,然后被打的人是什么反映,由于被攻击部位的不同,所作的反应自然要不同,如果都用拳皇那一套,那实际打出来的动作大多是软弱无力的,但是它用表现手法和声音去弥补了这样的一个视觉效应.



#p#副标题#e#

■加速度有2种

一是自身的爆发力产生的加速度,主要控制肢体的移动,二是恒定不变的重力.人在攻击状态中,爆发力尝试的加速度是持续上升的,上升到目标攻击范围的时候速度最大,力度最大,破坏力最大.而在跳跃中,就存在加速度,加速度方向,重力等因素,此时爆发力产生的加速度持续递减至0,重力不变,运动轨迹就产生了抛物线的形状.如图:



相关物理知识我不多作解释.

■运动轨迹分为：整体轨迹与局部轨迹,而且这可能是一个最大的难点

首先你要对人体结构,或者你所设计的人物造型有一定了解,关节,骨骼,运动原理等.就由于人体肌肉造型是曲线一样,运动轨迹也是曲线.曲线运动几乎是物理运动的本能.整体轨迹相对简单,它由人体运动时重心所产生的曲线构成,如跳跃,跑动等.但局部轨迹却不简单,它关系到一个动作的正确与否,你会跑不代表你就能很好的表现"跑步"这个动作,然而这是基础中的基础,首先要理解关节,关节是一环套一环,这也是骨骼动画的基础,我用图解来说明,然后你试着结合实际去深入体会!



肢体的运动轨迹最好的学习方法还是观察:举起你的手臂,单纯的移动手肘,观察一下它的运动轨迹,然后手肘不动,单纯的移动前臂,看看它的运动范围,现在结合手肘,手臂作任意移动,观测手掌的运动轨迹,然后试试脚的运动轨迹.最后自己用身体再感受一下,运动轨迹是什么样的曲线.同样的,这也是个悟性问题,如果你无法体会,那么你永远也作不出什么好的格斗动画的.

以上,你会发现,几乎都是物理的知识,理解充分了,你在动作设计的时候才能更有把握,不过理论的东西并非是不能突破的,在创意需要的前提下,我们大可以改变这个世界的规律,让时间倒转,让重力逆向,让你的角色神化...但在那之前基础的东西还是需要了解的,基础胜于一切!!

第二课预览:

…… [点击查看详细] ]]> Fri, 4 Apr 2008 07:27:15 GMT http://www.flashtc.com/review.asp?articleid=2253 <![CDATA[Flash与ASP--用户登录--用户注册程序]]> http://www.flashtc.com//article.asp?articleid=2252 源文件:http://gzks188.com/anli/file/Flash与ASP.rar
Flash一帧可以完成.asp也可以一个文件完成.
这里我将用户登录和用户注册分为两部做,方便大家理解;
Flash分两帧,asp分两个文件,
准备:Flash8 , IIS ,Miscrosoft Access 2003;
开始:
数据库中:
用设计视图新建一个名为 UserTable 的表,三个字段分别为 id 为自动编号,username为文本,password为文本;
输入一条数据 username 和 password 都为chooseflash;
如图:
[attach]68989[/attach]
Flash中:
新建文件命名为login.fla,舞台大小设置为250*200,背景随意;
第一帧:用户登录
新建三个图层分别命名为 bg 和 body 和as;
舞台中的实例:
一个 window 组件到舞台命名为 win;
win(背景),放到 bg 层;
设置如图:
[attach]68990[/attach]
二个按钮组件分别命名为: login 和 register;
login(登录),register(注册),放到 body 层;
设置如图:
[attach]68991[/attach]
[attach]68992[/attach]
三个 TextInput 文本输入组件分别命名为 username 和 password 和 msg;
username(用户名输入框),password(密码输入框),msg(消息框),放到 body 层;
第一帧是用户登录脚本.代码如下:

[Copy to clipboard] [ - ]
CODE:
//此帧是用户登录脚本
stop();
//将window组件设置为不可用.因为是做背景
win.enabled = false;
//新建LoadVars对象,用来发送和接收数据;
var loginData:LoadVars = new LoadVars();
//注册按钮
register.onRelease=function(){
    win.title="(教程Flash与ASP)用户注册";
    msg.text="";
    gotoAndStop(2);
}
//登录按钮.
login.onRelease = function() {
    //判断用户名和密码是不是为空.
    if ((username.text == "") || (password.text == "")) {
        msg.text = "请正确输入用户名或密码!";
        //判断用户名和密码是否小于8位.
    } else if((username.length<8)||(password.length<8)){
        msg.text = "用户名和密码不能小于8位!";
    } else {
        msg.text = "验证中...";
        //将用户名文体框的值付给loginData对象的username变量;
        loginData.username = username.text;
        //将用户密码文体框的值付给loginData对象的password变量;
        loginData.password = password.text;
        //使用get方法发送用户名和密码到login.asp中验证;再返回给loginData对象;
        loginData.sendAndLoad("login.asp",