2009-6
1

一道看似简单的面试题

类别: Xhtml/Css | 2,187 Views | 10条评论

曾经做过一么一题面试题，大体上的要求是这样的：一个新闻列表，日期要紧随标题之后，标题太长时可以自动隐藏，但日期要显示完整。

e69caae591bde5908d

就这么个题目，看起来似乎很简单，但做起来似乎就没那么简单了。因为这里要求是时间紧随标题之后，如果是时间右对齐的话，相信大多数人片刻就能搞定。有兴趣的朋友不妨先不看下面的源码，自己做做试试。

因为日期是跟在标题后面的，所以这里要用内联标签，但这会在自动隐藏标题的时候出现问题。最后，想到了一种特殊的处理方法。外框的宽度比如说是300px，那么就把ul的宽度定为240px，然后通过绝对定位把日期从文档流中拖出，这时当标题达到ul的宽度的时候将之隐藏，而日期因为浮动而跟随其后，就达到所要的效果了。

PS：原来没有考虑到opera的兼容，现已修正，不过用了hack，暂时没想到好方法了。

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

2009-5
26

全兼容的标准三级菜单

类别: Xhtml/Css | 2,534 Views | 2条评论

首先，说明一下这不是纯CSS的，如果要用纯CSS实现的话要用到很多[if IE 6]的判断，感觉页面的标签很乱，个人不太喜欢。说到底还是因为这万恶的IE6,基本上问题都是出在这里，本例用的是JS，但也用了一个[if IE 6]的判断，用来在IE6下改变标签的class。虽然是用了JS，但页面结构却清爽得多。

可能有些朋友见过，原本是在一个国外网站上看到的，不过写得有点复杂，我简化了一下，帖上来。

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

2009-5
23

AS3中JSON的基本应用实例

类别: Flash/AS3 | 2,883 Views | 3条评论

最近发现有不少通过“AS3 json”关键词搜索过来的朋友，可见还是有很多朋友对这方面关注的。不过现下有关AS3 JSON的文章是少之又少，网上搜索到的基本上也都是那同样的几篇文章转来转去罢了，也包括我之前那篇，也没什么例子。相信会让很多初学的朋友看得云里雾里的，其实我也觉得奇怪，json其实也算蛮简单的，怎么就没人写篇好的教程呢。废话就不多说了，希望转载的朋友能注明一下出处，谢了。

首先，你需要有一个JSON的类库，建议去下载adobe官方提供的产品外类库：as3corelib。类库的使用就不多说了，大家应该都知道。

先说说获取数据。可以这么说，只要你懂AS3与XML的交互，那么就一定能懂JSON，因为两者几乎是一样的，你唯一需要做的只是了解一下JSON的格式。例如下面这个JSON的例子，就像XML一样，你可以通过任何动态页面来生成这个格式，也可以通过静态的甚至TXT来读取也行。

1
2
3
4

[{"name":"Hans","age":"32"},
{"name":"John","age":"12"},
{"name":"Zaki","age":"34"},
{"name":"Dr. Cox","age":"88"}]

AS中的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

package {
 import com.adobe.serialization.json.JSON;
 
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.net.URLLoader;
 import flash.net.URLRequest;
 
 public class getJSON extends Sprite {
  public function getJSON() {
   var loader:URLLoader = new URLLoader();
 
   loader.load(new URLRequest( "http://127.0.0.1/json.php" ));//这里是你要获取JSON的路径
   loader.addEventListener(Event.COMPLETE, decodeJSON);
  }
  private function decodeJSON(evt:Event):void {
   var persons:Array = JSON.decode( URLLoader( evt.target ).data );
   //在这里，就可以通过操作数组来应用数据了，很方便
   for (var i=0; i<persons.length; i++) {
    trace( persons[i].name );
   }
  }
 }
}

是不是很简单呢？在这里我们只用到了decode()这个方法，其实JSON类库要用的也只有两个方法，另一个就是马上要用到的encode()。大家可以理解为编码与解码。发送数据的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

package {
 import com.adobe.serialization.json.JSON;
 
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.net.*;
 
 public class sendJSON extends Sprite {
  public function sendJSON() {
   var arr : Array = new Array({"name":"Hans","age":"32"},{"name":"John","age":"12"},{"name":"Zaki","age":"34"},{"name":"Dr. Cox","age":"88"});//这里是要发送的数据，可以直接写，也可以是由其他方法生成，不过要注意格式。
   sendjson( arr );
  }
  private function sendjson( a : Array ):void {
   var jsonString : String = JSON.encode(a);
 
   var urlVariables:URLVariables = new URLVariables();
   urlVariables.json = jsonString;
 
   var urlRequest:URLRequest = new URLRequest(http://127.0.0.1/json.php); //这里是接收数据的动态页。
   urlRequest.method = URLRequestMethod.POST;
   urlRequest.data = urlVariables;
 
   //其实到这已经结束了，下面的XML只是测试结果而已。
   var urlLoader:URLLoader = new URLLoader();
   urlLoader.addEventListener(Event.COMPLETE, onURLLoaderCompleteEvent);
   urlLoader.load(urlRequest);
  }
  private function onURLLoaderCompleteEvent( evt : Event ):void {
   var xml:XML = new XML(evt.target.data);
   trace(xml);
  }
 }
}
2009-5
19

一个仿FLASH自带的取色器

类别: Flash/AS3 | 1,723 Views | 2条评论

我已经想不起来当初是为什么要做这么个东东了，本来是想做成一个封装类或是组件可以方便地调用取色器。但是却弄得不完美，隔了这么久了也没心思重新弄过了。虽然FLASH自带有取色器组件，不过在体积上这个要轻巧许多。调用其实还算方便，可以供学习者参考一下。

源文件：color.rar

2009-5
17

收集整理了一些AS3中常用到的公式

类别: Flash/AS3 | 1,720 Views | 4条评论

今天有在做一个FLASH，本身并没有什么难的地方，做到某一个效果是需要动态地计算两条线之间的夹角，我猛然发现，我居然把三角函数的知识都退还给了中学老师了。立马百度、谷歌进行恶补，另外又收集了一些AS3中比较常用到的公式以备用。

基本三角函数的计算：
角的正弦值 = 对边 / 斜边
角的余弦值 = 邻边 / 斜边
角的正切值 = 对边 / 邻边

角度制与弧度制的相互转换：
弧度 = 角度 * Math.PI / 180
角度 = 弧度 * 180 / Math.PI

计算两点间距离：
dx = x2 – x1;
dy = y2 – y1;
dist = Math.sqrt(dx*dx + dy*dy);

缓动公式:
sprite.x += (targetX – sprite.x) * easing;//easing为缓动系数变量
sprite.y += (targetY – sprite.y) * easing;

弹性公式:
vx += (targetX – sprite.x) * spring;//spring为弹性系数
vy += (targetY – sprite.y) * spring;
sprite.x += (vx *= friction);//friction为摩擦力
sprite.y += (vy *= friction);

偏移弹性公式:
var dx:Number = sprite.x – fixedX;
var dy:Number = sprite.y – fixedY;
var angle:Number = Math.atan2(dy, dx);
var targetX:Number = fixedX + Math.cos(angle) * springLength;
var targetY:Number = fixedX + Math.sin(angle) * springLength;

向鼠标旋转(或向某点旋转)
dx = mouseX – sprite.x;
dy = mouseY – sprite.y;
sprite.rotation = Math.atan2(dy, dx) * 180 / Math.PI;

波形运动:
public function onEnterFrame1(event:Event):void {
ball.y=centerScale+Math.sin(angle)*range;
angle+=speed;
}

心跳:
public function onEnterFrame1(event:Event):void {
ball.scaleX=centerScale+Math.sin(angle)*range;
ball.scaleY=centerScale+Math.sin(angle)*range;
angle+=speed;
}

圆心旋转:
public function onEnterFrame(event:Event):void {
ball.x=centerX+Math.cos(angle)*radius;
ball.y=centerY+Math.sin(angle)*radius;
angle+=speed;
}

椭圆旋转:
public function onEnterFrame(event:Event):void {
ball.x=centerX+Math.cos(angle)*radiusX;
ball.y=centerY+Math.sin(angle)*radiusY;
angle+=speed;
}

颜色运算得到透明值:
var t:uint=0×77ff8877
var s:uint=0xff000000
var h:uint=t&s
var m:uint=h>>>24
trace(m)

转换为十进制:
trace(hexValue);
十进制转换为十六进制:
decimalValue.toString(16)

颜色提取:
red = color24 >> 16;
green = color24 >> 8 & 0xFF;
blue = color24 & 0xFF;
alpha = color32 >> 24;
red = color32 >> 16 & 0xFF;
green = color32 >> 8 & 0xFF;
blue = color232 & 0xFF;

按位计算得到颜色值:
color24 = red << 16 | green << 8 | blue;
color32 = alpha << 24 | red << 16 | green << 8 | blue;

过控制点的曲线:
// xt, yt是你想要让曲线通过的那一点
// x0, y0 和x2, y2 是曲线的终点
//PS.发现很多人转帖都是直接复制粘贴，也不翻译一下
xt * 2 – (x0 + x2) / 2;
y1 = yt * 2 – (y0 + y2) / 2;
moveTo(x0, y0);
curveTo(x1, y1, x2, y2);

2009-5
16

最近在研究PV3D了——360度全景图

类别: My Demo | 3,232 Views | 13条评论

很早之前就想研究下FLASH的3D全景图了的，可是这部分的技术好像十分地商业化，想找点相关的资料源码真是比登天还难。后来了解了PV3D，但也一直没有静下心去研究，另外国内在这方面也还比较少有比较好的教程，有价值的文献就更少了，后来找到一个站叫做 flash3Dd研究所，那里的教程很不错，至少是很适合我这种人学习，特此把链接给加上。

这个全景图是用六面立方体做的，球形的那种偶还不会。那种球形的拼接图到还好找，可这个六面体的拼接图找了好久也没找到，只好去拿了某位仁兄现成的图片了。