www.adobeshow.com
存档 Archives : 九月, 2009

拖拽 碰撞检测 代码片段

<Category: ActionScript 3.0, Adobe, Flash> 发表评论


1、拖拽,通过 startDrag , stopDrag 来实现。

cir1.addEventListener(MouseEvent.MOUSE_DOWN, onMD);
function onMD(evt) {
cir1.startDrag();
//cir1.addEventListener(MouseEvent.MOUSE_MOVE, onMV);
cir1.addEventListener(MouseEvent.MOUSE_UP, onMU);
}
//function onMV(evt) {
//do something here 
//}
function onMU(evt) {
cir1.stopDrag();
//cir1.removeEventListener(MouseEvent.MOUSE_MOVE, onMV);
cir1.removeEventListener(MouseEvent.MOUSE_UP, onMU);
}

2、碰撞检测,通过 hitTestObject 实现,(尽管都知道碰撞检测的精度是不够用的,但有总比没有好,AS3里还留着)。

if ( cir1.hitTestObject(cir2) ) {  // 两个圆之间的碰撞检测
//do something here
}

3、屏幕中运动的代码段落,碰到屏幕边界后就折返。

cir2.addEventListener(Event.ENTER_FRAME, onEF );
cir2.speed = 10;
cir2.direct = Math.random()*2*Math.PI;
cir2.vx = cir2.speed * Math.cos(cir2.direct);
cir2.vy = cir2.speed * Math.sin(cir2.direct);
cir2.radius = cir2.width/2;
function onEF(evt:Event) { 
cir2.x += cir2.vx;
cir2.y += cir2.vy;
if ( cir2.x – cir2.radius < 0 ){
cir2.x = cir2.radius;
cir2.vx *= -1;
return;
}
if( cir2.x + cir2.radius > stage.stageWidth) {
cir2.x = stage.stageWidth – cir2.radius;
cir2.vx *= -1;
return;
}
if ( cir2.y  – cir2.radius< 0 ){
cir2.y = cir2.radius;
cir2.vy *= -1;
return;
}
if( cir2.y + cir2.radius> stage.stageHeight) {
cir2.y = stage.stageHeight – cir2.radius;
cir2.vy *= -1;
return;
}
}

4、假如 小球2 的运动过程中,每一帧都与小球1 进行碰撞检测,将这部分内容用函数来实现,并且简化处理一下(反弹的角度并不符合物理实验效果),这样的代码合成到一起,实现的效果是:小球1 可以被拖动,小球2 会自动的运动,并且在发生碰撞时会改变方向,碰撞可能发生在墙壁、地板、天花板,还有和第二个小球之间。

function chgPsnBall() {
if ( cir1.hitTestObject(cir2) ) {  
cir2.direct = Math.atan2( cir2.y -cir1.y , cir2.x-cir1.x);
cir2.x += ( cir1.width/2 )* Math.cos( cir2.direct );
cir2.y += ( cir1.width/2 ) * Math.sin( cir2.direct );
cir2.vx = cir2.speed * Math.cos(cir2.direct);
cir2.vy = cir2.speed * Math.sin(cir2.direct);
}
}

场景中建两个小球件元件,实例名为 cir1 和 cir2 ,完整的代码如下:

cir1.addEventListener(MouseEvent.MOUSE_DOWN, onMD);
function onMD(evt) {
cir1.startDrag(); 
cir1.addEventListener(MouseEvent.MOUSE_UP, onMU);
}
function onMU(evt) {
cir1.stopDrag(); 
cir1.removeEventListener(MouseEvent.MOUSE_UP, onMU);
}

function chgPsnBall() {
if ( cir1.hitTestObject(cir2) ) {  
cir2.direct = Math.atan2( cir2.y -cir1.y , cir2.x-cir1.x);
cir2.x += ( cir1.width/2 )* Math.cos( cir2.direct );
cir2.y += ( cir1.width/2 ) * Math.sin( cir2.direct );
cir2.vx = cir2.speed * Math.cos(cir2.direct);
cir2.vy = cir2.speed * Math.sin(cir2.direct);
}
}
cir2.addEventListener(Event.ENTER_FRAME, onEF );
cir2.speed = 10;
cir2.direct = Math.random()*2*Math.PI;
cir2.vx = cir2.speed * Math.cos(cir2.direct);
cir2.vy = cir2.speed * Math.sin(cir2.direct);
cir2.radius = cir2.width/2;
function onEF(evt:Event) {
chgPsnBall();
cir2.x += cir2.vx;
cir2.y += cir2.vy;
if ( cir2.x – cir2.radius < 0 ) {
cir2.x = cir2.radius;
cir2.vx *= -1;
return;
}
if (cir2.x + cir2.radius > stage.stageWidth) {
cir2.x = stage.stageWidth – cir2.radius;
cir2.vx *= -1;
return;
}
if ( cir2.y  – cir2.radius< 0 ) {
cir2.y = cir2.radius;
cir2.vy *= -1;
return;
}
if ( cir2.y + cir2.radius> stage.stageHeight) {
cir2.y = stage.stageHeight – cir2.radius;
cir2.vy *= -1;
return;
}
}

本文来自: 拖拽 碰撞检测 代码片段

模拟贝塞尔曲线过鼠标的效果

<Category: ActionScript 3.0, Adobe, Flash> 发表评论

以鼠标为控制点,在两点间画一个曲线,相对来说比较容易,只要curveTo 就可以了,那么如果要让这个曲线过鼠标该怎么办呢?

我想了一个办法,就是将曲线的起止点之间的距离缩小(比如缩小两倍),并“移动”到鼠标的两侧,让鼠标和这两个新位置点位于同一条直线上,然后以鼠标两侧的点为控制点,以曲线的起止点和鼠标位置为新的曲线起止点,依次连接起来,就可以得到过鼠标的贝塞尔曲线了。代码如下:

stage.frameRate = 30;
var line:Sprite = new Sprite();
addChild(line);

var startDot:Point = new Point(450,100);
var endDot:Point = new Point(150,300);

var curveRate = 2;  // 这个值越大,曲线在鼠标附近的弯曲度就越大,感觉上取2或3比较的合适。

var distPt:Point = new Point( (startDot.x  – endDot.x)/curveRate,(startDot.y  – endDot.y)/curveRate);

this.addEventListener(Event.ENTER_FRAME, drawLine);
function drawLine(e:Event):void {
var pen:Graphics = line.graphics;
//曲线
pen.clear(); 
pen.lineStyle(1); 
var controlDot1:Point  = new Point(mouseX + distPt.x/2,mouseY + distPt.y/2); 
pen.moveTo(startDot.x,startDot.y);
pen.curveTo(controlDot1.x,controlDot1.y,mouseX,mouseY);
var controlDot2:Point  = new Point(mouseX – distPt.x/2,mouseY – distPt.y/2);
pen.curveTo(controlDot2.x,controlDot2.y,endDot.x,endDot.y);
//控制线
pen.lineStyle(1,0xff0000,0.3);
pen.moveTo(startDot.x,startDot.y);
pen.lineTo(controlDot1.x,controlDot1.y);
pen.lineTo(controlDot2.x,controlDot2.y);
pen.lineTo(endDot.x,endDot.y); 
}

//补充:

fl 基理大师译的 foundation ,里面提供了一个简单的算法,直接用一个控制点来实现曲线的绘制。

公式如下:

var ctlPtX = mouseX * 2 – (startDot.x + endDot.x) / 2;
var ctlPtY = mouseY * 2 – (startDot.y + endDot.y) / 2;

想了一下,相当于将我的两个控制点的做法,与曲线的起止点连起来延长得到交点,就是唯一的控制点,参数取2。

代码修改一下,复制放到场景中可以看到最终效果。

stage.frameRate = 30;
var line:Sprite = new Sprite();
addChild(line);

var startDot:Point = new Point(450,100);
var endDot:Point = new Point(150,300);

this.addEventListener(Event.ENTER_FRAME, drawLine);
function drawLine(e:Event):void {
var pen:Graphics = line.graphics;
pen.clear();
pen.lineStyle(1);
//曲线 
var ctlPtX = mouseX * 2 – (startDot.x + endDot.x) / 2;
var ctlPtY = mouseY * 2 – (startDot.y + endDot.y) / 2;

pen.moveTo( startDot.x,startDot.y );
pen.curveTo( ctlPtX,ctlPtY,endDot.x,endDot.y);

//控制线
pen.lineStyle(1,0xff0000,0.3);
pen.lineTo(ctlPtX,ctlPtY);
pen.lineTo( startDot.x,startDot.y );
}

本文来自: 模拟贝塞尔曲线过鼠标的效果

AS3 绘图函数 画线

<Category: ActionScript 3.0, Adobe, Flash> 发表评论

第一个类:点状对象,继承自Sprite,使用目的,在屏幕中进行跑路,然后由上层的类跟踪它,以它们的位置进行连线,得到折线效果。

package

{

import flash.display.MovieClip;

public class LinePt extends MovieClip

{

public var vx:Number;

public var vy:Number;

function LinePt()

{

vx = 0;

vy = 0;

graphics.lineStyle(1, 0xff0000);

graphics.drawCircle(0, 0, 1); //画出一个点来

}

}

}

第二个类:画线类,将上一个类,当成是自己的部件,组合到自身中间,然后进行连线,就可以得到折线移动的效果。

package {

import flash.display.Graphics;

import flash.display.Sprite;

import flash.events.Event;

import flash.display.MovieClip;

public class ScrLine extends MovieClip {

private var pt:Array = new Array();

private var speed:Number = 20;

public function ScrLine() {

for (var i = 0; i < 4; i++) {

pt.push( new LinePt());

var mc = pt[i];

mc.x = stage.stageWidth / 2;

mc.y = stage.stageHeight / 2;

mc.vx = speed * Math.cos(Math.random() * 360);

mc.vy = speed * Math.sin(Math.random() * 360);

mc.alpha = 0;// 将原来的点藏起来

addChild( mc );

}

addEventListener(Event.ENTER_FRAME, onEF );

}

public function onEF( evt:Event) {

for (var i = 0; i < pt.length; i++) {

var mc = pt[i];

mc.x += mc.vx;

mc.y += mc.vy;

if (( mc.x < 0) || (mc.x > stage.stageWidth)) {

mc.vx *= -1;

}

if (( mc.y < 0) || (mc.y > stage.stageHeight)) {

mc.vy *= -1;

}

}

var p:Graphics = graphics;

p.clear();

p.lineStyle( 1, 0×00ff00);

var tx = (pt[0].x + pt[3].x) /2;

var ty = (pt[0].y + pt[3].y) /2;

p.moveTo( tx,ty );

for (var j = 1; j < pt.length; j++) {

tx = (pt[j-1].x + pt[j].x) /2;

ty = (pt[j-1].y + pt[j].y) /2;

p.curveTo(pt[j-1].x, pt[j-1].y,tx,ty );

}

tx = (pt[0].x + pt[3].x) /2;

ty = (pt[0].y + pt[3].y) /2;

p.curveTo(pt[3].x, pt[3].y,tx,ty );

}

}

}

为了效果好看,在开始时,让所有的点都聚在舞台中间,向四周随机扩散开,将这个类与库中的空元件进行链接,然后往舞台的(0,0)点拖放上几个

折线换成曲线,关键是找出控制点和正确的曲线起止点,在原来的基础上,让每两个点的中点位置当成是曲线的起止点,原先的顶点当成是控制点,这样就想当于在四个顶点构成的矩形内画了一个内切曲线,随着顶点的移动,曲线也会发生移动,代码如下:

package {

import flash.display.Graphics;

import flash.display.Sprite;

import flash.events.Event;

import flash.display.MovieClip;

public class ScrLine extends MovieClip {

private var pt:Array = new Array();

private var speed:Number = 20;

public function ScrLine() {

for (var i = 0; i < 4; i++) {

pt.push( new LinePt());

var mc = pt[i];

mc.x = stage.stageWidth / 2;

mc.y = stage.stageHeight / 2;

mc.vx = speed * Math.cos(Math.random() * 360);

mc.vy = speed * Math.sin(Math.random() * 360);

mc.alpha = 0;

addChild( mc );

}

addEventListener(Event.ENTER_FRAME, onEF );

}

public function onEF( evt:Event) {

for (var i = 0; i < pt.length; i++) {

var mc = pt[i];

mc.x += mc.vx;

mc.y += mc.vy;

if (( mc.x < 0) || (mc.x > stage.stageWidth)) {

mc.vx *= -1;

}

if (( mc.y < 0) || (mc.y > stage.stageHeight)) {

mc.vy *= -1;

}

}

var p:Graphics = graphics;

p.clear();

p.lineStyle( 1, 0×00ff00);

var tx = (pt[0].x + pt[3].x) /2;

var ty = (pt[0].y + pt[3].y) /2;

p.moveTo( tx,ty );

for (var j = 1; j < pt.length; j++) {

tx = (pt[j-1].x + pt[j].x) /2;

ty = (pt[j-1].y + pt[j].y) /2;

p.curveTo(pt[j-1].x, pt[j-1].y,tx,ty );

}

tx = (pt[0].x + pt[3].x) /2;

ty = (pt[0].y + pt[3].y) /2;

p.curveTo(pt[3].x, pt[3].y,tx,ty );

}

}

}

本文来自: AS3 绘图函数 画线

Flex 图像处理技巧

<Category: Adobe, Flash, Flex> 发表评论

Flex 图像处理技巧

Image Manipulation in Flex

本文来自: Flex 图像处理技巧

关于 AS3 读取 zip 文件的知识及《zip文件格式说明书》下载

<Category: Adobe> 发表评论

在 Adobe 的 AIR 1.5 帮助文档里发现了一篇高质量的教程:ByteArray 示例:读取 .zip 文件。于是心血来潮,细读了 zip 文件格式说明书并汉化了部分内容。用 AS3 读取 zip 文件,已经不是新鲜事了,有很多AS3开源类库都实现此功能了,例如:zipLibZipArchive。二者有异曲同工之妙,但也有区别。前者不支持中文,二者算法也有不同,但从我角度看算法都可以进一步优化,例如查找结尾签名时可以采用冒泡的方式。还有一点,他们都欠缺对加密、分卷方面的功能。 了解了 zip 文件格式后,学到不少东西。例如文件最后修改时间是采用 DOS 时间表示方法,它是一个4字节(32位)的二进制数,高7位表示年;第25到22位表示月;第21到17 位表示日;第16到12位表示时;第11到6位分;低5位左移一位后表示秒。

目前最新的 zip 文件格式说明书是在2007年发布的,英文版,难以捉摸的专有名词很令人头痛。在google上搜索的中文版是2002年的版本,而且内容不全。于是自己就忍痛了一下,翻译了一部分够用的内容:.zip 文件格式说明书。zip 采用的压缩算法有很多种,常用的是 DEFLATE 算法,也是flash内置支持的。目前我已经实现解压功能,但不完美。如果压缩算法不是采用 DEFLATE,那就完蛋了。接下来希望能把压缩功能完成。有精力的话,还想研究加密、分卷、Zip64等等。希望搞个完整的类库,以后就可以在线解压和压缩文件了。 附:auzn 做的文件分割混排AIR程序:点此进入

本文来自: 关于 AS3 读取 zip 文件的知识及《zip文件格式说明书》下载

Cairngorm 3就要来了

<Category: Cairngorm> 发表评论

是的,不管你相信与否,Cairngorm的最新版本就要来了。
虽然Cairngorm一直备受开发者社区的质疑,也有不少人抛出Cairngorm将被MateSwiz取代的观点,但无论如何,Cairngorm 3都是值得我们期待和重新审视的。因为Cairngorm 3将由单纯的Flex微框架扩展为工具,实例,类库,及大量其他方面的信息的集合。相信这次的新版本将是里程碑式的!

本文来自: Cairngorm 3就要来了

Adobe Cookbook 2.0

<Category: ActionScript 2.0, ActionScript 3.0, Adobe, ColdFusion, Flash, JavaScript> 发表评论
Adobe刚刚发布了全新的Adobe Cookbooks程序
全新的Adobe Cookbook程序代替了原来单独Flex、AIR以及Mobile程序。
这个新程序仍然支持那些技术,并在一个新的单一程序里额外增加了10多个技术。
新程序在设计上做了重大提升,并包含了另外一些新的特性:
    增加技术支持(BlazeDS,Catalyst,PHP等)
    导航及搜索能力有所提升
    食谱请求--专为无法找到所需代码的开发者准备的
    相关食谱--在所有食谱页面的一侧出现
    Cookbook探索--视觉呈现顶级cookbook食谱及贡献者
    更加认可贡献者--头像、链接到博客、链接到社区概况
如果你是贡献者,在发布任何食谱之前应当确保自己拥有Adobe.com的社区头像及简介,
只有这样,程序才能最大限度呈现贡献者的信息。
登陆这里;填写你的社区信息,完成后点击“查看你的简介”。
过去我已经贡献了许多食谱,并会一直坚持下去。
需要注意的另外很重要的一点就是O'Reilly和Adobe Cookbooks之间的关系使得很多社区贡献的食谱有可能会被印刷成书。
AIR 1.5 cookbook书中就包含了之前我在cookbook站点上发布的很多食谱。这种关系会在新的cookbook站点上持续下去。
因此你不但会在网站上被认可,同样会出现在未来出版的cookbook中。
点击http://cookbooks.adobe.com查看最新的cookbook站点。

本文来自: Adobe Cookbook 2.0

【好消息】可以把javaScript嵌入到swf里了

<Category: ActionScript 3.0, Adobe, Flash, JavaScript> 发表评论
来源页面: http://www.kennybunch.com/blog/2009/09/embedding-javascript-into-a-swf/
flex 开发者应该对使用Embed元数据标签嵌入各种资源都很熟悉了,
现在在flash cs4中同样可以使用元数据标签进入嵌入资源了
  好多人应该还不知道竟然可以将javaScript库嵌入到swf从而使在swf可以写html DOM,
而最终部署的时候这个js文件不需要暴露出来,这个技术其实很简单,
基础就是用[Embed()]标签将js文件嵌入到库中,然后声明一个Class绑定到该资源,
在实例化的时候将该引用的字符串发送javaScript的eval声明就可以,以下是一个简单的实例:
----------------------------------------------------------

JavaScript:

function hello()

{

alert("hello");

}

--------------------------------------------------------------

package

{

    import flash.display.Sprite;

    import flash.external.ExternalInterface;

    public class EmbeddedJavaScriptExample extends Sprite

    {

        [Embed(source="hello.js", mimeType="application/octet-stream")]

        private static const HelloJS:Class;

        public function EmbeddedJavaScriptExample()

        {

            execute();

        }

        public function execute():void{

            if (ExternalInterface.available)

            {

                // embed the JavaScript to the page

                ExternalInterface.call("eval", new HelloJS().toString());

                // the embedded JavaScript has a function call named hello

                // now that it has been embedded to the page call it

                ExternalInterface.call("hello");

           }

       }

    }

}

------------------------------------------------------

本文来自: 【好消息】可以把javaScript嵌入到swf里了

画圆弧的代码范例源代码及图解

<Category: ActionScript 3.0, Adobe, Flash> 发表评论
as
--------------------------------------------------------------------
var n:Number=Math.ceil(Math.abs(angle) / 45);
var angleA:Number=angle / n;
angleA=angleA * Math.PI / 180;
startFrom=startFrom * Math.PI / 180;
-----------------------------------------------------------
private function Line(Event:MouseEvent) {

    if (rot) {

        _shape.rotation=Math.atan2(stage.mouseY - _shape.y,stage.mouseX - _shape.x) * 180 / Math.PI;

        //以下为画弧

        var center:Point=new Point(_shape.x,_shape.y);
        //圆心

        var angle:Number=Math.atan2(stage.mouseY - center.y,stage.mouseX - center.x) * 180 / Math.PI;
        //角度

        var startFrom:Number=0;
       //0度,表示从x正轴为起点开始画弧

        var r:Number=Sliding.x + 35;
       //半径

        angle=Math.abs(angle) > 360?360:angle;

        var n:Number=Math.ceil(Math.abs(angle) / 45);

        var angleA:Number=angle / n;

        angleA=angleA * Math.PI / 180;

        startFrom=startFrom * Math.PI / 180;

        this.graphics.lineStyle(1,0x000000,1);

        this.graphics.moveTo(center.x + r,center.y);

        this.graphics.lineTo(center.x + r * Math.cos(startFrom),center.y + r * Math.sin(startFrom));

        for (var i=1; i <= n; i++) {

            startFrom+= angleA;

            var angleMid=startFrom - angleA / 2;

            var bx=center.x + r /Math.cos(angleA / 2) * Math.cos(angleMid)

            var by=center.y + r / Math.cos(angleA / 2) * Math.sin(angleMid);

            var cx=center.x + r * Math.cos(startFrom);

            var cy=center.y + r * Math.sin(startFrom);

            this.graphics.curveTo(bx,by,cx,cy);

       }

    } else {

        _shape.rotation=0;

    }

}

-----------------------------------------

本文来自: 画圆弧的代码范例源代码及图解

JS读取cookies信息

<Category: JavaScript> 发表评论

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title> js获取cookie值的范例 </title>
<meta name=”Generator” content=”EditPlus”>
<meta name=”Author” content=”">
<meta name=”Keywords” content=”">
<meta name=”Description” content=”">
</head>

<body>
<script language=”JavaScript” type=”text/javascript”>
<!–
//设置两个cookie
document.cookie=”ccxv_sid=828″;
//获取cookie字符串
var strCookie=document.cookie;
//将多cookie切割为多个名/值对
var arrCookie=strCookie.split(“; “);
var userId;
//遍历cookie数组,处理每个cookie对
for(var i=0;i<arrCookie.length;i++){
var arr=arrCookie[i].split(“=”);
//找到名称为userId的cookie,并返回它的值
if(“ccxv_sid”==arr[0]){
ccxv_sid=arr[1];
break;
}
}
var sid = ccxv_sid;
alert(sid);
//–>
</script>

</body>
</html>

本文来自: JS读取cookies信息