最近开始学习html5,因为一直都是研究as,所以还是觉得as顺眼一点,但是html5也不能不学,于是就想出了,可以把html5用as的语法来写出来,做游戏应该来的比较顺手一些,下面开始第一篇
第一篇,显示一张图片
一,代码对比
as代码:
public var loader:Loader;
public function loadimg():void{
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,complete);
loader.load(new URLRequest("10594855.png"));
}
public function complete(event:Event):void{
var image:Bitmap = Bitmap(loader.content);
var bitmap:BitmapData = image.bitmapData;
addChild(image);
}
js代码:
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
image = new Image();
image.onload = function(){
context.drawImage(image, 0, 0, 240, 240);
};
image.src = "10594855.png";
};
二,编写js类库(暂命名为legend库)后的代码
var loader;
function main(){
loader = new LLoader();
loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
loader.load("10594855.png","bitmapData");
}
function loadBitmapdata(event){
var bitmapdata = new LBitmapData(loader.content);
var bitmap = new LBitmap(bitmapdata);
addChild(bitmap);
}
三,实现
1,建一个静态类,方便保存及访问公共的方法属性,比如canvas等
var LGlobal = function (){}
LGlobal.type = "LGlobal";
我们始终都用到canvas,所以要把canvas保存起来,给LGlobal类添加属性和方法
LGlobal.canvas = null;
LGlobal.width = 0;
LGlobal.height = 0;
LGlobal.setCanvas = function (id,width,height){
var canvasObj = document.getElementById(id);
if(width)canvasObj.width = width;
if(height)canvasObj.height = height;
LGlobal.width = canvasObj.width;
LGlobal.height = canvasObj.height;
LGlobal.canvas = canvasObj.getContext("2d");
}
界面的显示,为了能够动态显示,选择不停的刷新canvas
给LGlobal类添加一个不停刷新的方法
LGlobal.onShow = function (){
if(LGlobal.canvas == null)return;
LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);
}
然后,我预想把所有现实的对象等都保存在一个数组里面,然后按照顺序显示
而所有可以显示的对象,都有一个show方法,用来把自己画到canvas上
LGlobal类最后修改为
var LGlobal = function (){}
LGlobal.type = "LGlobal";
LGlobal.canvas = null;
LGlobal.width = 0;
LGlobal.height = 0;
LGlobal.childList = new Array();
LGlobal.setCanvas = function (id,width,height){
var canvasObj = document.getElementById(id);
if(width)canvasObj.width = width;
if(height)canvasObj.height = height;
LGlobal.width = canvasObj.width;
LGlobal.height = canvasObj.height;
LGlobal.canvas = canvasObj.getContext("2d");
}
LGlobal.onShow = function (){
if(LGlobal.canvas == null)return;
LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);
LGlobal.show(LGlobal.childList);
}
LGlobal.show = function(showlist){
var key;
for(key in showlist){
if(showlist[key].show){
showlist[key].show();
}
}
}
2,as中,图片显示用到BitmapData和Bitmap两个类,为了实现这两个类的功能,我们分别创建两个类LBitmapData和LBitmap
先来看LBitmapData类,LBitmapData类用来储存图片的数据等,我们把Image()储存到LBitmapData类里面
function LBitmapData(image,x,y,width,height){
var self = this;
self.type = "LBitmapData";
self.oncomplete = null;
if(image){
self.image = image;
self.x = (x==null?0:x);
self.y = (y==null?0:y);
self.width = (width==null?self.image.width:width);
self.height = (height==null?self.image.height:height);
}else{
self.x = 0;
self.y = 0;
self.width = 0;
self.height = 0;
self.image = new Image();
}
}
在看LBitmap类,LBitmap类用来显示LBitmapData类里储存的Image()
function LBitmap(bitmapdata){
var self = this;
self.type = "LBitmap";
self.x = 0;
self.y = 0;
self.width = 0;
self.height = 0;
self.scaleX=1;
self.scaleY=1;
self.visible=true;
self.bitmapData = bitmapdata;
if(self.bitmapData){
self.width = self.bitmapData.width;
self.height = self.bitmapData.height;
}
}
关于Image()的显示,我们用到一开始说的show方法,实现如下
LBitmap.prototype = {
show:function (){
var self = this;
if(!self.visible)return;
LGlobal.canvas.drawImage(self.bitmapData.image,
self.bitmapData.x,self.bitmapData.y,self.bitmapData.width,self.bitmapData.height,
self.x,self.y,self.width*self.scaleX,self.height*self.scaleY);
}
}
3,最后,还差一个Loader,我们建立自己的LLoader类
function LLoader(){
var self = this;
self.loadtype = "";
self.content = null;
self.oncomplete = null;
self.event = {};
}
LLoader.prototype = {
addEventListener:function(type,listener){
var self = this;
if(type == LEvent.COMPLETE){
self.oncomplete = listener;
}
},
load:function (src,loadtype){
var self = this;
self.loadtype = loadtype;
if(self.loadtype == "bitmapData"){
self.content = new Image();
self.content.onload = function(){
if(self.oncomplete){
self.event.currentTarget = self.content;
self.oncomplete(self.event);
}
}
self.content.src = src;
}
}
}
4,在3里面用到了LEvent类,LEvent类是一个事件类,用来加载事件,点击等,这个以后再慢慢强化
var LEvent = function (){};
LEvent.COMPLETE = "complete";
LEvent.ENTER_FRAME = "enter_frame";
LEvent.currentTarget = null;
LEvent.addEventListener = function (node, type, fun){
if(node.addEventListener){
node.addEventListener(type, fun, false);
}else if(node.attachEvent){
node['e' + type + fun] = fun;
node[type + fun] = function(){node['e' + type + fun]();}
node.attachEvent('on' + type, node[type + fun]);
}
}
5,在显示之前,我们需要有个addChild方法,如下
function addChild(DisplayObject){
LGlobal.childList.push(DisplayObject);
}
6,最后,在整个页面读取完成后,就可以把图片显示出来了
function init(speed,canvasname,width,height,func){
LEvent.addEventListener(window,"load",function(){
setInterval(function(){LGlobal.onShow();}, speed);
LGlobal.setCanvas(canvasname,width,height);
func();
});
}
init(40,"back",300,300,main);
var loader;
function main(){
loader = new LLoader();
loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
loader.load("10594855.png","bitmapData");
}
function loadBitmapdata(event){
var bitmapdata = new LBitmapData(loader.content);
var bitmap = new LBitmap(bitmapdata);
addChild(bitmap);
}
第一篇完成,下一篇,实现Sprite类
分享到:
相关推荐
第一部分: 第1篇 ActionScript3.0语言基础 第1章 ActionScript3.0概述 第2章 搭建ActionScript3.0开发环境 第3章 ActionScript3.0语法 第2篇 ActionScript3.0面向对象特性 第4章 ActionScript3.0面向...
actionscript 3.0基础语法讲解。
ActionScript 3.0语法参考手册,希望对大家有帮助
详细讲解flash开发中用到的ActionScript动作脚本。
该控件用Flash CS4+ActionScript3写成,能在网页上方便调用,用FlashVars参数传入图片路径。 该控件涉及了很多AS3画图的知识点。实现了加载图片,过度平滑,能通过调整SliderBar对加载的相片随意放大缩小等功能。对...
《精通Flex 3.0——基于ActionScript 3.0实现》一书源代码。 Flex 3.0 ActionScript 3.0源代码 Flex 3.0源代码。 --------------------------- 第1篇 Flex技术概述 第1章 Flex概述 3 1.1 Flex简介 3 1.2 Flex...
第6~9章介绍了ActionScript 3.0的核心——类及以类为基础的面向对象程序设计方法,包括类的基本概念、ActionScript 3.0中常用类的使用、显示编程和组件类;第10、11章分别介绍了几个ActionScript 3.0实际应用的范例...
Flash_ActionScript语法综合
ActionScript语法参考手册,保留看看。资料太老,不建议看
flex第一步针对对初学者是一些很好的资料
第6~9章介绍了ActionScript 3.0的核心——类及以类为基础的面向对象程序设计方法,包括类的基本概念、ActionScript 3.0中常用类的使用、显示编程和组件类;第10、11章分别介绍了几个ActionScript 3.0实际应用的范例...
C语言典型应用系统之——聊天室(ActionScript 3.0实现),用以共享,相互交流!
Java 5与ActionScript3 语法比较
第1篇ActionScript3.0语言基础 第1章ActionScript3.0概述 2 1.1ActionScript概述 2 1.1.1ActionScript环境 2 1.1.2ActionScript3.0特性 3 1.1.3ActionScript3.0代码组织 5 1.2ActionScript3.0API概览 5 1.3小结 8 第...
第6~9章介绍了ActionScript 3.0的核心——类及以类为基础的面向对象程序设计方法,包括类的基本概念、ActionScript 3.0中常用类的使用、显示编程和组件类;第10、11章分别介绍了几个ActionScript 3.0实际应用的范例...
第章:如何使用ActionScript示例 示例类型 在FlashProfessional中运行ActionScript示例 在FlashBuilder中运行ActionScript示例 在移动设备上运行ActionScript示例 第章:本地数据库中的SQL支持 支持的SQL语法 数据类型...
flash actionscript3 as3编写的 仿雷电 战机游戏
Flash ActionScript3 在影片剪辑中载入一张网络图片
由于文件过大,我分成了5个分卷上传,忘网友见谅! “这是我所看到的最好的ActionScript书籍。你将很难在其他在方找到如此之多的ActionScript信息。” ——Slavik Lozben,Macromedia,Flash 5的主工程师 ...