打有‘Flash/AS3’标签的日志

简明的拼图游戏教程 (2009-6-15)

类别: Flash/AS3 | 5,389 Views| 24条评论

想来想去，还是稍微写点东西吧，一来是想把自己的一些制作的思路与大家分享，二来也想请高手们点评一下。在这里把一些重点的部分详细说明一下，相信有点基础的朋友都能很快理解，心急点的朋友呢就直接跳到最后去看源码吧，呵呵。观看演示。

大体思路：载入图片、把图片分割、随机排列图片、鼠标点击事件、序列的比较判断是否结束。在这里只把一些关键的代码帖出来了，但不影响理解。
首先是加载图片，我们这里用的是外部载入，当然你也可以扩展一下做成可以多张图片选择的：

1
2
3
4
5

private function loadpic() {
	_loader = new Loader();
	_loader.load(new URLRequest("myphoto.jpg"));
	_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoad);
}

接下来到了一个重点了，分割图片，这里应该会有很多种处理方法，我这里用的是Matrix控制背景图填充的方法来实现的。有更好的方法还望大家指出来。

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

private function onImageLoad(event:Event):void {
	var bitmap:BitmapData = new BitmapData(_loader.width, _loader.height);
	var x_num:int=480/x_p;//每小块的宽
	var y_num:int=360/y_p;//每小块的高
	bitmap.draw(_loader);
	pic_box=new box_bg();
	pic_box.x=10;
	pic_box.y=10;
	addChild(pic_box);
	d_arr=new Array();//初始数组
	for (var i:int=0; i<x_p; i++) {
		for (var j:int=0; j<y_p; j++) {
		var matrix:Matrix = new Matrix();
		matrix.translate(-x_num * i,-y_num * j);//背景定位
		var block:Sprite = new Sprite();
		block.x=x_num * i;
		block.y=y_num * j;
		var temp_obj:Object={obj:block,b_x:block.x,b_y:block.y};
		d_arr.push(temp_obj);//存入初始数组，在这里把obj也存入，方便后面的比较。
		block.buttonMode=true;
		block.graphics.lineStyle();
		block.graphics.beginBitmapFill(bitmap, matrix);
		block.graphics.drawRect(0,0,x_num-1, y_num-1);//通过背景图填充的方式分割图片
		block.graphics.endFill();
		pic_box.addChild(block);
		}
	}
}

图片分割好了，接下来就是要把它打散，也就是随机排列。我们刚才已经把正确的顺序存入了d_arr数组，那么现在要做的就是把这个数组复制一个出来，然后随机排列，用sort()加一个比较函数就可以实现。d_arr是初始的数组，c_arr是随机化了的数组，都包含了[obj,x,y]，把d_arr中的obj取值c_arr中的x,y，那么就实现了图片的随机排列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

private function block_pic(e:MouseEvent) {
	var fooba:ByteArray=new ByteArray();//深度复制数组。
	fooba.writeObject(d_arr);
	fooba.position=0;
	c_arr=fooba.readObject() as Array;
	c_arr.sort(randomsort);//随机排列
	for (var i=0; i<c_arr.length; i++) {
		d_arr[i].obj.addEventListener(MouseEvent.CLICK,block_click)//在这里加上鼠标点击事件。
		d_arr[i].obj.x=c_arr[i].b_x;
		d_arr[i].obj.y=c_arr[i].b_y;
	}
}
//随机排列比较函数
private function randomsort(obj_A:String,obg_B:String):int {
	return Math.floor(Math.random() * 3 - 1);//这里只能产生-1、0、1三种值。
}

接下来是鼠标点击事件，我们这里要的效果是点击两个不同的图片使之互换，这一步比较简单，给个变量来判断是第一次还是第二次点击，记录下坐标然后互换就可以了。当然还得记得把点击的对象深度置顶，不然移动的时候会被其它图片挡住的。

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

private function block_click(e:MouseEvent) {
//第一次点击
	if (d_choose) {
		click_x1=e.target.x;
		click_y1=e.target.y;
		var v_obj=e.target;
		c_obj=v_obj;
		pic_box.setChildIndex(v_obj,pic_box.numChildren-1);
		c_obj.alpha=0.7;
		d_choose=!d_choose;
	} else {
//第二次点击
		v_obj=e.target;
		pic_box.setChildIndex(v_obj,pic_box.numChildren-1);
		c_obj.alpha=1;
		TweenLite.to(c_obj,0.3,{x:e.target.x,y:e.target.y,onComplete:check_end});
		TweenLite.to(e.target,0.3,{x:click_x1,y:click_y1,onComplete:check_end});//两个都要写onComplete，要不然就让其中一个运动时间长一点。
		d_choose=!d_choose;
		step+=1;
		move_num_mc.m_num.text=step;
	}
}

最后是判断是否拼成功，这里没有用到两个数组是否相等的比较，因为两个数组的顺序不一样。这里是通过判断obj在两个数组中的x,y是否相同来判定的。

1
2
3
4
5
6
7
8
9
10

private function check_end() {
	end_test=0;//位置正确的个数，正确个数为数组长度时，拼图成功。
	for (var i=0; i<d_arr.length; i++) {
	(Math.floor(d_arr[i].obj.x)==d_arr[i].b_x)&&(Math.floor(d_arr[i].obj.y)==d_arr[i].b_y) ? end_test=end_test+1 : 0;
	}
	isend();
}
private function isend() {
	end_test==d_arr.length ? win() : 0;
}

源文件:puzzles.rar

一个拼图游戏的DEMO (2009-6-8)

类别: My Demo | 2,027 Views| 3条评论

这游戏也很简单，也就是想自己练练算法了。这里只是个DEMO，但主要部分都包括了。主要是因为对界面设计实在头疼，再者做练习嘛，而且是被别人做得不爱做了的游戏，就没弄得那么完整了。

其实对于高手来说，拼图游戏只算是小菜了。我不是高手，也许我的方法不是最优的，但绝对是原创的，相信还是能给一些正在学习中的朋友一些帮助。过些天整理一个小教程出来吧，到时连源码一起发。

源码及教程

AS3中JSON的基本应用实例 (2009-5-23)

类别: Flash/AS3 | 3,054 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);
  }
 }
}

一个仿FLASH自带的取色器 (2009-5-19)

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

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

源文件：color.rar

收集整理了一些AS3中常用到的公式 (2009-5-17)

类别: Flash/AS3 | 1,839 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);

最近在研究PV3D了——360度全景图 (2009-5-16)

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

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

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

Page 1 of 41234