HTML5とFlashの記事が多くって、HTML5でFlash見たいな表示本当出来るが、
人々の経験と使い方による意見が違いますね。
それを試しました。
結果はAS3見たいなコーディングまでもできますし、表示も出来ます。
ただ、リソースやCPUはブラウザーによると違うがありますので、
最新のブラウザーとFlash比べるとパフォーマンス的はダメですね、
JQuery方が全然よかったです。
今回試した作り方を紹介します。
最初はJavascriptライブラリーが必要ですので
ダウンロードしてください。
1. easel.js (http://easeljs.com/)
2. tween.js (https://github.com/gskinner/TweenJS)
この二つ何が出来るか、まず相性がいいです。
あと、Actionscript見たいな
DisplayObject, Stage, Bitmap, Sprite
全部同じような使えます。
もちろんTweenもASと同じようなTweenです。
ClickじゃなくってTouchもたいようしています！
]]>
今回のサンプルは自分のホームページの一部ですので、
もともどFlashなんです、それて終わったらFlashと比べる事が出来ます。
Step 1.
HTMLを作ります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>kusamochi.net</title>
<meta name="description" content="kusamochi.net">
<meta name="keywords" content="kusamochi, kusamochi.net, mochi, a picture a day">
<link rel="stylesheet" type="text/css" href="kusamochi_net.css" />
<script src="./js/easel.js"></script>
<script src="./js/tween.js"></script>
<!-- kusamochi.net -->
<script src="./js/kusamochi_net_page1.js"></script>
<script src="./js/kusamochi_net_menu.js"></script>
</head>
<body>
<canvas id="menu"></canvas>
</body>
</html>
ポイントはjsとcanvasですね。
Step 2.
メニューのベースを作ります。
自分はコンテンツよりナビゲーション方が大事なので、
最初はメニューを作ります。
Flashと同じ、StageとMovieClip(Timeline)が最初出てくるので、JSも最初それを作ります。
ファイル: ./js/kusamochi_net_menu.js
var canvas;
var stage;
var menu_container = new Container(); //MovieClip見たいな物を作って、後でstageに追加。
window.addEventListener('load', init, false); //ASのAddedToStageみたい
function init() {
canvas = document.getElementById("menu"); //最初はcanvasを見つけ
//HTMLだから、Textのカーソルよく出てますよ、これて無くします。
canvas.onselectstart = function () { return false; } // ie
canvas.onmousedown = function () { return false; } // mozilla
stage = new Stage(canvas); //canvasをstageに
//Touchサポート
if (Touch.isSupported()) { Touch.enable(stage); }
//Mouseサポート
stage.enableMouseOver(10);
//Flashと同じFPS設定ができますよ
Ticker.setFPS(30);
Ticker.addListener(window);
window.addEventListener("resize", resize); //もちろんFlashと同じresizeも
resize();
stage.addChild(menu_container); //似てませんか？
}
function resize(){
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
}
function tick() {
stage.update(); //redrawです
}
Step 3.
画像とMouseEventを作ります。
var canvas;
var stage;
var imageCount = 0;
var menu_container = new Container();
var button1; //メニューのボタン
var button2;
var button3;
var button4;
const buttonWidth=58;
const buttonHeight=58;
const buttonHalfWidth=buttonWidth/2;
const buttonHalfHeight=buttonHeight/2;
const menuWidth=buttonWidth*4/2 + buttonHalfWidth;
window.addEventListener('load', init, false);
function init() {
canvas = document.getElementById("menu");
//get rid of text cursor
canvas.onselectstart = function () { return false; } // ie
canvas.onmousedown = function () { return false; } // mozilla
stage = new Stage(canvas);
if (Touch.isSupported()) { Touch.enable(stage); }
stage.enableMouseOver(10);
//
var image1=new Image(); //画像を作ります。
image1.src="./images/btn1.png";
image1.onload = menuBtnLoaded; //FlashのCompleteEvent見たいですね
image1.name="image1";
//
var image2=new Image();
image2.src="./images/btn2.png";
image2.onload = menuBtnLoaded;
image2.name="image2";
//
var image3=new Image();
image3.src="./images/btn3.png";
image3.onload = menuBtnLoaded;
image3.name="image3";
//
var image4=new Image();
image4.src="./images/btn4.png";
image4.onload = menuBtnLoaded;
image4.name="image4";
//
Ticker.setFPS(30);
Ticker.addListener(window);
window.addEventListener("resize", resize);
resize();
stage.addChild(menu_container);
loadWelcome();
}
function resize(){
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
//resize時間中に戻ります。
if(button1){
Tween.get(button1)
.to({x:canvas.width/2 - menuWidth + buttonWidth*1, y:canvas.height - buttonHalfHeight}, 1000, Ease.cubicInOut);
}
if(button2){
Tween.get(button2)
.to({x:canvas.width/2 - menuWidth + buttonWidth*2, y:canvas.height - buttonHalfHeight}, 1000, Ease.cubicInOut);
}
if(button3){
Tween.get(button3)
.to({x:canvas.width/2 - menuWidth + buttonWidth*3, y:canvas.height - buttonHalfHeight}, 1000, Ease.cubicInOut);
}
if(button4){
Tween.get(button4)
.to({x:canvas.width/2 - menuWidth + buttonWidth*4, y:canvas.height - buttonHalfHeight}, 1000, Ease.cubicInOut);
}
}
function menuBtnLoaded(event) {
//画像load終わりの所です。
var image = event.target;
var button=new Bitmap(image);
if(image.name=="image1"){
button1=button;
button1.x=canvas.width/2 - menuWidth + buttonWidth*1;
button1.y=canvas.height+10; //最初は画面外に置いって
Tween.get(button1) //画面の下にTween
.to({x:canvas.width/2 - menuWidth + buttonWidth*1, y:canvas.height - buttonHalfHeight}, 1000, Ease.cubicInOut);
}
if(image.name=="image2"){
button2=button;
button2.x=canvas.width/2 - menuWidth + buttonWidth*2;
button2.y=canvas.height+10;
Tween.get(button2)
.to({x:canvas.width/2 - menuWidth + buttonWidth*2, y:canvas.height - buttonHalfHeight}, 1000, Ease.cubicInOut);
}
if(image.name=="image3"){
button3=button;
button3.x=canvas.width/2 - menuWidth + buttonWidth*3;
button3.y=canvas.height+10;
Tween.get(button3)
.to({x:canvas.width/2 - menuWidth + buttonWidth*3, y:canvas.height - buttonHalfHeight}, 1000, Ease.cubicInOut);
}
if(image.name=="image4"){
button4=button;
button4.x=canvas.width/2 - menuWidth + buttonWidth*4;
button4.y=canvas.height+10;
Tween.get(button4)
.to({x:canvas.width/2 - menuWidth + buttonWidth*4, y:canvas.height - buttonHalfHeight}, 1000, Ease.cubicInOut);
}
button.regX = button.image.width/2; //画像を間中にします (scale用)
button.regY = button.image.height/2;
menu_container.addChild(button);
(function(target) {
button.onPress = function (evt){
if(image.name=="image1"){
loadpage1();
}
if(image.name=="image2"){
loadpage2();
}
}
button.onMouseOver = function() {
menu_container.addChild(target);//一番前に移動します
Tween.get(target) //MouseOver時 (Tweenを使ってscaleします)
.to({scaleX:1.1, scaleY:1.1}, 500, Ease.cubicInOut);
}
button.onMouseOut = function() {
menu_container.addChild(target);
Tween.get(target)
.to({scaleX:1, scaleY:1}, 500, Ease.cubicInOut);
}
})(button);
}
function tick() {
stage.update();
}
Step 4.
メニューから画面を変わります。
画面変わるは、いろな方がありまして、
自分はflashでよく使う方は、
Stageでページ置く用のMovieClip作って、
後loaderをページのswfをloadします。
実際それもJSでできます。
ファイル: ./js/kusamochi_net_page1.js
var page_container;
function loadpage1() {
if(page_container){
stage.removeChild(page_container); //もし他のページあれば、消します。
page_container=undefined; //Flashと同じ、GCですね。
}
page_container = new Container(); //new MovieClip()みたい
var image=new Image();
image.src="./images/btn1.png"; //今回のページは画像です。
image.onload = pageImageLoad;
stage.addChild(page_container); //Stageに追加します。
}
//比べって出来る様りも一個
function loadpage2() {
if(page_container){
stage.removeChild(page_container);
page_container=undefined;
}
page_container = new Container();
var image=new Image();
image.src="./images/btn2.png";
image.onload = pageImageLoad;
stage.addChild(page_container);
}
function pageImageLoad(event) {
var image = event.target;
var bitmap=new Bitmap(image);
bitmap.x=200;
bitmap.y=200;
(function(target) {
bitmap.onPress = function (evt){
page_container.addChild(target); //一番前に移動します ASのsetChildIndex見たいですね
var offset = {x:target.x-evt.stageX, y:target.y-evt.stageY}; //drag and dropです
evt.onMouseMove = function(ev) {
target.x = ev.stageX+offset.x;
target.y = ev.stageY+offset.y;
}
}
bitmap.onMouseOver = function() {
page_container.addChild(target);
}
bitmap.onMouseOut = function() {
page_container.addChild(target);
}
})(bitmap);
page_container.addChild(bitmap);
}
ステップ2、３うまく分かれば、大体Flashのアニメーションをできますね。
ステップ4は後残りの情報loadとか、細かい所はJQueryから出来ます。
簡単な紹介はここまです、他のページ作り終わったらも一回紹介します。
次回はWebGLを紹介します。
]]> 
