H5实例教学--从AnimateCC到CreateJS入门

源码及资源地址下载：链接：http://pan.baidu.com/s/1kU8LBTH密码：j7hu首先打开flash文件，可以看到如何很多文件在库中对于一个要使用的组件，我们先用软件自带的发布功能发布快捷键alt+shift+F12，或者选择在文件中发布。发布后，flash文件旁边会有一个html和一个js。我们可以打开demo1.html看到这个代码片段图片=图片||{}；ss=ss||{};varloader=newcreatejs.LoadQueue(false);loader.addEventListener("文件加载",handleFileLoad);loader.addEventListener("完成",handleComplete);loader.loadFile({src:"images/demo1_atlas_.json",type:"spritesheet",id:"demo1_atlas_"},true);loader.loadManifest(lib.properties.manifest);}functionhandleFileLoad(evt){if(evt.item.type=="image"){images[evt.item.id]=evt.result;}}functionhandleComplete(evt){varqueue=evt.target;ss["demo1_atlas_"]=queue.getResult("demo1_atlas_");exportRoot=newlib.demo1();stage=newcreatejs.StaGE（画布）；stage.addChild(exportRoot);阶段.更新（）；createjs.Ticker.setFPS(lib.properties.fps);createjs.Ticker.addEventListener("tick",stage);}我们创建一个新的测试。js，把html生成的脚本部分的代码复制过来，然后新建html引用代码如下这个flash里面有两个动画，我们现在来实现一个效果，一般来说手指按下时播放一个动画，手指按下时播放另一个动画。我们需要改一下flash生成的代码，把handleComplete改成下面这样=新升ib.view1();varanimate2=newlib.view2();//animation.setTransform(205,209);animate1.x="360";animate1.y="600";animate2.x="300";animate2.y="570";animateList=[animate1,animate2];stage.addChild(animate2);stage.update();createjs.Ticker.setFPS(lib.properties.fps);createjs.Ticker.addEventListener("打勾”，阶段）；创建两个场景animate1/animate2newlib.view1()是创建新场景的构造方法，场景的类名对应程序然后给两个场景设置x/y位置，添加其中一个场景到该阶段需要引入createjs下的三个类。Stage是createjs的一个stage类，相当于根场景。需要显示的场景被添加到它的内部。构造函数可以传入一个canvas标签，表示绘制对应的canvasstage=newcreatejs.Stage(canvas);可以得到一个stage对象，把要显示的内容放入对象中LoadQueue是一个加载器类，加载资源需要用到它，也可以绑定事件监听器。下面的事件使用下面的嘿嘿，方法加载文件Ticker，类似于setIntervald，这里可以控制画布的绘制频率。tick事件是frame变化时的事件。createjs.Ticker.addEventListener("tick",stage);这是当frame改变了stage刷新的时候，stage也可以传入一个函数ok至此我们已经成功的给stage添加了一个组件，并播放了动画。因为需要加载一个本地资源的json文件，所以需要在当前目录下搭建一个本地服务器才能运行。否则会出现以下问题。现在我们需要实现触摸屏来播放另一个动画。写一个事件绑定方法",function(){stage.removeChild(animateList[0]);stage.addChild(animateList[1]);})该方法使手指触摸和离开时改变舞台上的动画，功能完成，但是此时，canvas并没有用手机填满整个屏幕。添加自适应屏幕方法functionresizeCanvas(){model=newcreatejs.EventDispatcher();//用于捕获事件的原型stageWidth=document.documentElement.clientWidth;stageHeight=document.documentElement.clientHeight;stageScale=stageWidth/(750/2);canvas=document.getElementById("画布");如果（stageWidth/stageHeight>0.665）{stageScale=stageHeight/（1206/2）;canvas.style.left=(stageWidth-750/2*stageScale)/2+'px';}else{stageScale=stageWidth/(750/2);}canvas.style.width=750/2*stageScale+'px';画布.style.height=1206/2*stageScale+'px';}在资源加载完成的回调方法中调用resizeCanvas();//自适应宽高bindEvent();//绑定事件完成！