自由的家园 @ 自由的家 # 自由的 % 自由 & 自 : ㊣教程与代码

一个CSS好站点

Mon, 02 May 2005 02:41:23 GMT

Welcome

Welcome to The CSS Playground - the site for experimental CSS.
(April - 15GB bandwidth 3.5 million hits).

To quote the W3C.org - 'Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents'. Well....I don't quite agree with this statement.

When I think back a few years to my first steps into CSS I remember finding it extremely hard going, and certainly very far from a 'simple mechanism'.

With this in mind, I hope that my site will ease the pain a little for those just starting out in the wonderful world of CSS, and at the same time show hardened veterans some of my more advanced methods and experiments.18th April 2005 - changes complete (more or less)

If you find any layout or navigation errors please let me know. Ta.

Apologies

Unfortunately, as many of the examples on my web site are 'cutting edge' CSS, you may find that they will not work when viewed with older browser versions.

Also, I am unable to test these experiments using a Mac and its browsers. So if you are visiting with Safari etc on a Mac you may find that many of the examples are broken. Hopefully many should still work correctly.

Alternative Styles

The alternative styles and my javascript switcher have been dropped from this new layout, primarily because any changes I wanted to make to this home page required updating the CSS for every style (and this was getting very tedious). It would have been fine if I had a static home page as with the Zen Garden.

However, these styles have not been lost. If you wish to see my previous home page styles then visit my archive.

Comments

If you have any comments on my web site in general
Please leave them here.
Comments on specific examples should be posted using the comments link on that page.

Thank you for taking the time.

Please leave your general CSS comments and queries here
General comments.

Search The CSS Playground

Web Playground

Latest pages

Fluid Drop Shadows • 27th April 2005
Another FIXED layout • 21st April 2005
Krazy Korners • 6th April 2005
A Snazzy menu • 31st March 2005
Snazzy borders • 30th March 2005
Flick animation • 12th March 2005
Flicker Free mk3 • 26th Feb 2005
Image Map • 11th Feb 2005
Flag border art • 5th Feb 2005

CSS sites

www.meyerweb.com
Eric Meyer's site - The site to visit
www.tanfa.co.uk
Claire Campbell's excellent site
www.designdetector.com
Chris Hester's Design Detector
cssvault.com
Paul Scrivens - CSS Vault
csant.info
Csant.info - mainly for Opera users
www.csscreator.com
The best CSS Forum
www.mezzoblue.com
Dave Shea's most excellent site.
www.positioniseverything.net
by Big John and Holly Bergevin.

Other sites

wow-factor.com
See the sites
www.webstandardsawards.com
www.stylegala.com
A publication about web design and standards.
stock.xchng
A big thanks to the photographers who submit their work free to this site.
The image above has been adapted from a photograph by Tim & Annette published on the stock.xchng.

Approvals etc.

Flash MX Action Script 针对初级用户的详细基础教程——第三讲 MX AS对象篇

Tue, 12 Apr 2005 16:01:16 GMT

作者：土人来源:闪客帝国

Flash MX Action Script 针对初级用户的详细基础教程—第一讲

Flash MX Action Script 针对初级用户的详细基础教程—第二讲 MX AS 基础语法篇！

Flash MX Action Script 针对初级用户的详细基础教程—第三讲 MX AS对象篇

AS 对象篇-----------------------------------
虽然AS不是真正的面向对象的编程，但是它也有对象的概念。这个概念贯穿整个AS的始终，所以，对对象的理解，比对语法或者其他的理解更为重要。现在开始吧：
首先，我们来了解一下路径，路径分两种：绝对路径和相对路径。做过html的朋友应该知道这个概念。但这里我还是要详细解释一下，我认为对路径的理解要深入，我初学的时候就是磕在路径上。

在讲路径之前，有必要先讲一下 .语法 : 举例说明，这里要表示房间里的桌子上的一本
书，用 .语法这么表示：

房间.桌子.书

如果要再细到书上的页上面的字，很显然

房间.桌子.书.页面.字

看明白了吧？我也不懂得怎么说， .语法就是这样表示对象的，点的前面是其后面的父级。如房间是桌子的父级，桌子的子级就是书。
还是不明白？这样吧，你把 . 里写成“里面的”就可以了，这样就是

房间(里面的)桌子(里面的)书(里面的)页面(里面的)字

这样容易多了吧？
现在我开始说路径了，其中也要夹杂的对象的说明，看：

从例子入手。新建一个Flash文件，然后创建一个MovieClip,MC命名为“MC”,放在主场景里面，然后再创建一个按钮，放在“MC”里面，然后从库里面拖一个出来放在主场景，分别给这两个元素实例命名(Instance Name , 注意是实例名不是MC的名字)：MC->myMC button->myBtn
现在我们假设主场景是房子，MC是桌子，按钮是书，那么分别怎么表达房子，桌子，书呢？如下

_root 房子
_root.myMc 房子.桌子
_root.myMc.myBtn 房子.桌子.书

这里的 _root 是Flash的关键字，表示主场景的 Timeline （时间线）。
很容易理解对不。这里的房子，桌子，书都是我们要理解的“对象”。
当你找到这个对象后，才能对对象进行操作，才能给对象施加方法。比如，我现在要打扫房子，打扫是方法，但对象是房子，表达式是这样：

房子.打扫()

如果你不能正确的表达房子这个对象，你的打扫也就不能正确的实施了。
*说明:这里为什么要在打扫后面加()呢？因为打扫是方法不是对象，为了让Flash知道这是个方法，我们必须加上(),要不然它会以为房子里面有“打扫”这个东西。

现在，我们可以很容易的对房间里面的各个东西进行操作，如

房子.打扫();
房子.木桌子.整理();
房子.玻璃桌子.打碎();
房子.书桌.书.看();

等等，相信你把它们"翻译"成AS代码没什么问题吧比如要主场景停止播放，就是

_root.stop();

要MC停止播放，就是

_root.myMc.stop();

现在说说相对路径。还是上面的例子。假如给你下了一个命令：修理房子里面的红色的椅子。那么怎么表达呢？就是:

房子.红色椅子.修理()

无论给你下命令的人在哪里告诉你的，你都会知道要修理的椅子是哪一张。但是他如果这么说：修理你现在坐的这张椅子。红色的？还是蓝色的？这就要取决于你坐在哪个椅子上了。那么相对的表达式就是

我坐的椅子.修理();

这里为什么不这么写呢：

房子.我坐的椅子.修理()

这么写是错的，因为我坐的椅子是不固定的，我说不定把椅子搬到房子外面去坐，那这个表达式就错了，因为椅子根本就不在房子里面。
换过来用Flash实例说明。现在我想让主场景下的 myMC 在一开始就不要播放，而是先停止。那么你有什么办法呢？
我你猜想到的办法可能就是在主场景放入这个MC的那个帧写上：

_root.myMc.stop();

这个是对的。但是一旦 myMc 的名字一变，你就得跟着改这句话了。
有没有办法不管这个“MC”的实例名不管怎么改，都会被我们同样一句的AS找到？当然可以，前提是你的AS必须“坐在这个MC上”。
进入Mc的编辑状态，在 Mc 的 Timeline 的第一帧写上

this.stop();

这里的this也是Flash的关键字，这个 this 指AS所在的这条 Timeline .
现在不管你这个MC放在哪里，命名是什么，我都不管，反正肯定会停下来。为什么，因为AS正“坐在MC上”。
如果你在这里写上

_root.stop();

那就错了。为什么？仔细想想。
这个 this 就是相对路径的关键字之一。你必须要仔细理解它。
另外的一个关键字就是 _parent 。如果你理解了 this ，那么 _parent 并不难理解。举例：
还是哪个假设房子(_root) , 桌子( mc_zhuozi ) , 书 (mc_shu) 他们的关系是(括号内为mc实例名)

房子.桌子.书
_root.mc_zhuozi.mc_shu

在 mc_zhuozi 的 timeline 里面写

_parent.打扫();

意思就是打扫房间；
在 mc_shu 的 timeline 里面写

_parent.打扫();

意思就是打扫桌子。
_parent 也就是父级。桌子的 _parent 就是房子的 timeline , 书的 _parent 也就是桌子的 timeline。点的后面的对象的 _parent 就是点前面的对象。

今次就到这吧，回顾下：

·点语法学会表达对象
·学会用绝对路径和相对路径表达对象

Flash MX Action Script 针对初级用户的详细基础教程—第二讲 MX AS 基础语法篇！

Tue, 12 Apr 2005 04:44:24 GMT

Flash MX Action Script 针对初级用户的详细基础教程—第一讲

Flash MX Action Script 针对初级用户的详细基础教程—第二讲 MX AS 基础语法篇！

Flash MX Action Script 针对初级用户的详细基础教程—第三讲 MX AS对象篇

AS 语法篇-----------------------------------
接下来要讲的是AS的语法。
首先要让大家明白的是：AS 语法的大小写是敏感的。
如： gotoAndPlay() 正确 gotoAndplay() 错误。
关键字的拼写必须和语法一致，要做到很容易，因为在Flash的AS面板里面，关键字会有不一样的颜色显示。
很多Flash小鸟们也许要开始埋怨，记不住咋办？我这里有个办法，就是背。不要流下委屈的泪水，俺们都是这么走过来的。多用两次你就记住了。

这里说一下，我们要从开始就养成编程的好习惯，如在每个语句后面都加上分号，有可能的话，尽量给复杂的语句加上注释。注释的例子

//这个是注释，但是只能有一行
/* 这个也是注释，可以写很多行 */

接下来，介绍几个类型的语法。
1、几个常用的控制场景的方法，如

play(); //让时间轴的指针播放
stop(); //停止时间轴的指针在程序触发时候的那个帧
gotoAndPlay(); //让指针跳转到某个帧，然后继续播放
gotoAndStop(); //让指针跳转到某个帧，停止在那个帧
nextFrame(); //往下走一帧
prevFrame(); //往前走一帧

上面的都是方法。
方法？解：打个比方，我们管吃饭叫作一种方法，用来解决肚子饿这个问题。我们管stop()叫做一种方法，用来解决时间轴指针停下来的问题。我们管上面的几个东西叫方法，用来解决时间轴指针运动的问题。
2、控制属性的语法。有很多，我列几个

_x
_y
_alpha
_width
_name

.....等等属性
上面的都是属性
属性？解：打个比方。我们管你的身高叫做属性，用来标识你的高度。我们管你的体重叫属性，用来标识你的质量。我们管 _x 叫属性，用来标识目标的X轴坐标。我们管_alpha叫属性，用来标识目标的透明度.......我真罗嗦啊，唉。

3、控制语句流程的语法，如

if (条件){
//条件满足执行这里的代码
}else{
//条件不满足执行这里的代码
}
for(i=0;i<N;i++){
//执行这里的代码N次
}

while(条件){
//当条件满足时一直执行这里的代码
}

等等。这些都是基本的语法，也是AS的基础。
4、其他方法和自己定义的方法。
这里我不能把所有的语法都一一列出来介绍，因为实在是太多了，具体可以参考Flash自带的帮助手册。我们只能在以后的应用中慢慢熟悉。这里，你有个基本概念就行了。到后面我会给每句话都加上注释。

回顾一下，今次要大家记住的东西：

·AS 语法的大小写是敏感的。
·方法的概念。
·属性的概念。

前言：
写的这些教程，目的是希望初学Flash的爱好者们能多动手，少提问。下面这些教程面向有 “Flash(MX)” 基础操作知识的读者。在看教程的同时，希望你也能打开Flash，边看边做，这样你的印象会更加深刻一点，顺便也看看我哪里写错了

首先说说AS的基础知识-----------------------------------
做过Flash动画的Flash爱好者们都知道，要做好一个Flash动画，AS是必不可少的，即使只是很简单的几句代码也能起到整个Flash画龙点睛的作用。这里我只简单的介绍一下AS的基本常识。
首先我们要了解AS要写在什么地方，什么时候AS会被触发执行。

1、帧：
写在关键帧上面的AS，当时间轴上的指针走到这个关键帧的时候，就写在这个帧上面的AS就被触发执行了。常见的例子有在影片结尾的帧写上 stop() 等。操作方法就是点选关键帧，然后打开AS面板。

2、按钮：
不同于帧上面的AS，按钮上面的AS是要有触发条件的。要把AS写在按钮上，操作方法是点选目标按钮，然后打开AS面板。举个例子能说的更明白。
假设有一个动画，要让它在播放完同时停止，那么，你要做的就是在这个动画的最后一帧写AS

stop();

再假设有个按钮，效果是按下按钮后停止播放，那么步骤如下。
做一个按钮，放到主场景，点选按钮，然后打开AS面板。现在如果也在按钮上写

stop();

那么，输出的时候就会提示错误。正确的应该这样写

on(release){
stop();
}

这里要比帧的动画多这些代码: on(release){} , 整个代码翻译过来就是:

当(松开){
停止
}

红色的代码表示鼠标的触发事件事件之一，这里用的是 release 松开，按钮的常用事件:

release 松开
releaseOutside 在按钮外面松开
press 按下
rollOver 鼠标进入按钮的感应区
rollOut 鼠标离开按钮的感应区

现在很明确了:写在按钮上面的AS一定就是这种格式的：

on(事件){要执行的代码}

3、MC(电影剪辑)
如果你看懂了上面的内容，那么写在MC上面的AS和写在按钮上的大同小异。操作方法就是点选MC，然后打开AS面板。看个例子

onClipEvent(load){
stop();
}

同样，MC需要一个事件来触发AS的执行。翻译这段代码就是

当剪辑(载入){
停止
}

红色代码同样表示一个事件。MC的事件有下面这些:

load 载入,当MC出现的时候执行。也就是除非卸载这个MC，否则load事件内的代码只执行一次
unload 卸载，当MC卸载的时候执行
enterFrame 存在的每个帧。在MC存在的每个帧都要执行一次代码。如果你的场景有100个帧，有个MC从41帧开始出现到100帧才消失，那么这个MC上面的代码执行了60次
mouseDown 按下鼠标，在场景内任何地方都算。和按钮不一样的地方
mouseMove 移动鼠标，只要移动鼠标就执行代码
mouseUp 松开鼠标

同样你要明确:写在MC上的代码一定总是这种格式：

onClipEvent(事件){代码}

看到这里，如果你明白的写在帧、按钮、MC上的代码有什么不一样，任务就算完成了！

Flash MX Action Script 针对初级用户的详细基础教程——第一讲

Tue, 12 Apr 2005 04:36:49 GMT

这是很老得教程了,但对初学者很有用的.能有个基本的说解.

Flash MX Action Script 针对初级用户的详细基础教程—第一讲

Flash MX Action Script 针对初级用户的详细基础教程—第二讲 MX AS 基础语法篇！

Flash MX Action Script 针对初级用户的详细基础教程—第三讲 MX AS对象篇

首先说说AS的基础知识-----------------------------------

做过Flash动画的Flash爱好者们都知道，要做好一个Flash动画，AS是必不可少的，即使只是很简单的几句代码也能起到整个Flash画龙点睛的作用。这里我只简单的介绍一下AS的基本常识。
首先我们要了解AS要写在什么地方，什么时候AS会被触发执行。

stop();

再假设有个按钮，效果是按下按钮后停止播放，那么步骤如下。
做一个按钮，放到主场景，点选按钮，然后打开AS面板。现在如果也在按钮上写

stop();

那么，输出的时候就会提示错误。正确的应该这样写

on(release){
stop();
}

这里要比帧的动画多这些代码: on(release){} , 整个代码翻译过来就是:

当(松开){
停止
}

红色的代码表示鼠标的触发事件事件之一，这里用的是 release 松开，按钮的常用事件:

release 松开
releaseOutside 在按钮外面松开
press 按下
rollOver 鼠标进入按钮的感应区
rollOut 鼠标离开按钮的感应区

现在很明确了:写在按钮上面的AS一定就是这种格式的：

on(事件){要执行的代码}

3、MC(电影剪辑)
如果你看懂了上面的内容，那么写在MC上面的AS和写在按钮上的大同小异。操作方法就是点选MC，然后打开AS面板。看个例子

onClipEvent(load){
stop();
}

同样，MC需要一个事件来触发AS的执行。翻译这段代码就是

当剪辑(载入){
停止
}

红色代码同样表示一个事件。MC的事件有下面这些:

同样你要明确:写在MC上的代码一定总是这种格式：

onClipEvent(事件){代码}

看到这里，如果你明白的写在帧、按钮、MC上的代码有什么不一样，任务就算完成了！

作者：土人来源:闪客帝国

FlashMX2004 建自定义类package

Sun, 10 Apr 2005 01:20:07 GMT

作者：花火§火花来源:闪客帝国

简介：
Flash MX2004的AS2.0越来越象C#、JAVA了，就连class类也能做成package，如何建立自定义类的package？请看花火的简单入门教程……

AS2.0越看越象C#,JAVA.除了语法的定义相似.就连class类也能做成package(土语:自定义包),可集成你所有的自定义函数.方法.甚至组件扩展.包括引入FLASH的各种类包.还是写个很简单的入门例子:

在自己的flashmx2004目录Flash MX 2004\en\First Run\Classes\里建立myclass目录和子目录test,然后写个小的class文件,存入这个新建目录:

mytest.asclass myclass.test.mytest { function addnum(num:Number):Number { return (num*2); } }

然后建立一个fla,在第一帧写:import myclass.test.mytest; var my:mytest = new mytest(); trace(my.addnum(10)) //应返回mytest类下addnum方法的值20

以上是只有一个类的package的引用.这个package是存放在flash 主要class文件目录下myclass\test\目录里的 import myclass.test.mytest 作用是引用这个package包.并且编译.下面我们再写一个class也放在这个myclass\test\目录里:

mytest2.asclass myclass.test.mytest2 { function addnum(num:Number):Number { return (num*num); } }

然后,建立一个fla在第一帧写上:import myclass.test.*; var my:mytest = new mytest(); var my1:mytest2 = new mytest2(); trace(my.addnum(10)) //这里返回的mytest类里的方法addnum的返回值20 trace(my1.addnum(10)) //这里返回的mytest2类里的方法addnum的返回值100

很显然.我用一个import myclass.test.* 把这个package下的两个class都能引入.并且能使用它们的各自方法.它们的方法名字一样.但执行的是各自class里的方法.

    这个例子很简单,只是一个引路.你理解的话.能发挥的更好.比如.使用类扩展,超类,甚至可以嵌套FLASHCLASS包里的任何公共类.关于类扩展.超类,嵌套可以看前些天写过的.经典已经集中起来了.

    下面有几个注意:

    1,写好自己的类集合做成package时.如果放在Flash MX 2004\en\First Run\Classes\目录后.你要重启一下你的FLASHMX2004.才能在你的fla里引用你自己的package

    2.如果其间你打开你的package里的class文件,改变里面的内容后.也要保存后.重新启动FLASHMX2004.需要重编译,不然你的fla将不会引用新改变的内容.

    3,如果我不放在Flash MX 2004\en\First Run\Classes\目录的,能不能建立在别的目录.当然可以.不过你得要在PUBLISH SETTINGS里设置你的AS文件package包引用目录.详情可看小混蛋同志写的ActionScript 新手调试.

    4.关于AS2.0的编写代码要求很严格.和JAVA.C#一样. 大小写很重视.并且,在你自定义Class时要注意定义类形和返回类形.这里提醒一下用 SciTEFlash写代码的朋友.有个bug,就是写function这个关键字时.SciTEFlash是大写的Function,会在AS2.0中出现错误.我是N久才发现这个问题.

（完

通用滚动条配色工具

Tue, 05 Apr 2005 01:50:44 GMT

很全面得呀, MX2004 MX CSS 都有,

Common Scrollbar Style/Theme Mixer

☞ ☞ http://www.dengjie.com/temp/scroller.swf

可用来给Flash滚动条组件和网页滚动条配色,并输出相应的样式代码.

注:Flash MX 2004组件需先应用MX主题后才能使用全局样式.参考这里

转自www.dengjie.com

*自由的家园 @ 自由的家 # 自由的 % 自由 & 自 *: ㊣教程与代码

一个CSS好站点

Flash MX Action Script 针对初级用户的详细基础教程——第三讲 MX AS对象篇

Flash MX Action Script 针对初级用户的详细基础教程—第二讲 MX AS 基础语法篇！

Flash MX Action Script 针对初级用户的详细基础教程——第一讲

FlashMX2004 建自定义类package

通用滚动条配色工具

自由的家园 @ 自由的家 # 自由的 % 自由 & 自 : ㊣教程与代码