[CreateJS] じわっと出るパネル 〜BlurFilter~

CreateJSで、じわっと出るパネルを作ってみたよ。 :bouzu:

createjs_panelmenu

PanelMenuクラスSlideMenuクラスも作ってみたよ。 :boy:

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>panelmenu | CreateJS</title>
<script src="js/easeljs-0.8.1.min.js"></script>
<script src="js/tweenjs-0.6.1.min.js"></script>
<script src="js/movieclip-0.8.1.min.js"></script>
<script src="js/preloadjs-0.6.1.min.js"></script>
<script src="js/PanelMenu.js"></script>
<script src="js/SlideMenu.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
  #canvas{
    display:block;
    width:500px;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }
</style>
<script>

var canvas, stage, stats;
var images;
var panel;
var menu1, menu2;

function init() {
  stats = new Stats();
  stats.setMode(0);
  stats.domElement.style.position = "fixed";
  stats.domElement.style.right = "0px";
  stats.domElement.style.top = "0px";
  document.body.appendChild(stats.domElement);

  canvas = document.getElementById("canvas");

  stage = new createjs.Stage(canvas);

  images = images||{};
  var manifest = [
    {src: "assets/tile.png", id: "tile"},
    {src: "assets/menu1.png", id: "menu1"},
    {src: "assets/menu2.png", id: "menu2"},
    {src: "assets/panel.png", id: "panel"}
  ];
  var loader = new createjs.LoadQueue(false);
  loader.addEventListener("fileload", fileload);
  loader.addEventListener("complete", complete);
  loader.loadManifest(manifest);

  createjs.Ticker.setFPS(30);
  createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
  if (createjs.Touch.isSupported()) {
    createjs.Touch.enable(stage);
  }
  stage.enableMouseOver(10);
  stage.update();
  createjs.Ticker.addEventListener("tick", update);
}
function fileload(event) {
  if (event.item.type == "image") {
    images[event.item.id] = event.result;
  }
}
function complete(event) {
  event.target.removeEventListener("fileload", fileload);
  event.target.removeEventListener("complete", complete);

  background();
  initialize();
}
function initialize() {
  menu1 = new SlideMenu(images["menu1"]);
  menu1.init(65, 25, "down");
  stage.addChild(menu1);
  menu1.x = 420;
  menu1.y = 0;
  menu1.addEventListener("click", click1);

  menu2 = new SlideMenu(images["menu2"]);
  menu2.init(65, 30, "up");
  stage.addChild(menu2);
  menu2.x = 80;
  menu2.y = 300;
  menu2.addEventListener("click", click2);

  panel = new PanelMenu(images["panel"]);
  panel.init(150, 90, 352, 232);
  stage.addChild(panel);
  panel.x = canvas.width/2;
  panel.y = canvas.height/2;
}
function click1(event) {
  panel.blur();
}
function click2(event) {
  panel.fade();
}
function update(event) {
  stage.update();

  stats.update();
}

function background() {
  var base = new createjs.Shape();
  stage.addChild(base);
  base.graphics.beginBitmapFill(images["tile"], "repeat");
  base.graphics.drawRect(0, 0, 500, 300);
  base.filters = [new createjs.ColorFilter(0.6, 0.8, 0.8, 1, 0, 0, 0, 0)];
  base.cache(0, 0, 500, 300);

  var basic = new createjs.Text("HTML5 / CreateJS [0.8.1]", "14px Myriad Pro", "#3366CC");
  stage.addChild(basic);
  basic.textAlign = "left";
  basic.textBaseline = "bottom";
  basic.x = 10;
  basic.y = 20;
  basic.alpha = 0.6;
  var publish = new createjs.Text("authoring: Sublime Text 2 + Flash CC", "14px Myriad Pro", "#3366CC");
  stage.addChild(publish);
  publish.textAlign = "right";
  publish.textBaseline = "bottom";
  publish.x = canvas.width - 10;
  publish.y = canvas.height;
  publish.alpha = 0.6;
}
</script>
</head>
<body onload="init();" style="background-color:#FFFFFF">
  <canvas id="canvas" width="500" height="300" style="background-color:#FFFFFF"></canvas>
</body>
</html>

PanelMenu.js
(function() {

function PanelMenu(image) {
  this.Container_constructor();

  this.menu = new createjs.Bitmap(image);
  this.addChild(this.menu);
}
var p = createjs.extend(PanelMenu, createjs.Container);

p.init = function(rx, ry, cw, ch) {
  this.menu.regX = rx;
  this.menu.regY = ry;
  this.cache(-cw/2, -ch/2, cw, ch);

  this.mouseChildren = false;
};

p.blured = false;
p.faded = false;
p._blur = 0;

p.blur = function() {
  this.blured = !this.blured;

  var targetBlur, targetScale;
  if (this.blured) {
    targetScale = 0.5;
    targetBlur = 1;
  } else {
    targetScale = 1;
    targetBlur = 0;
  }
  createjs.Tween.get(this, {override: false})
    .to({scaleX: targetScale, scaleY: targetScale}, 400, createjs.Ease.quadOut);
  createjs.Tween.get(this, {override: false})
    .to({_blur: targetBlur}, 400, createjs.Ease.quadOut)
    .addEventListener("change", createjs.proxy(this.change, this));
}
p.change = function(event) {
  var blur = this._blur*20;
  var blurFilter = new createjs.BlurFilter(blur, blur, 3);
  this.filters = [blurFilter];
  this.updateCache();
}
p.fade = function() {
  this.faded = !this.faded;

  var targetAlpha, time;
  if (this.faded) {
    targetAlpha = 0;
    time = 400;
  } else {
    targetAlpha = 1;
    time = 600;
  }
  createjs.Tween.get(this, {override: false})
    .to({alpha: targetAlpha}, time, createjs.Ease.linear);
}

window.PanelMenu = createjs.promote(PanelMenu, "Container");

}());

SlideMenu.js
(function() {

function SlideMenu(image) {
  this.Container_constructor();

  this.menu = new createjs.Bitmap(image);
  this.addChild(this.menu);
}
var p = createjs.extend(SlideMenu, createjs.Container);

p.init = function(rx, ry, direction) {
  this.menu.regX = rx;
  this.menu.regY = ry;

  switch (direction) {
    case "down" :
      this.targetPosition = 10;
      break;
    case "up" :
      this.targetPosition = -10;
      break;
    default :
      this.targetPosition = 0;
      break;
  }

  this.addEventListener("mousedown", createjs.proxy(this.mousedown, this));
  stage.addEventListener("stagemouseup", createjs.proxy(this.mouseup, this));
  this.mouseChildren = false;
};

p.mousedown = function(event) {
  createjs.Tween.get(this.menu, {override: true})
    .to({y: this.targetPosition}, 200, createjs.Ease.quadOut);
}
p.mouseup = function(event) {
  createjs.Tween.get(this.menu, {override: true})
    .to({y: 0}, 200, createjs.Ease.quadOut);
}

window.SlideMenu = createjs.promote(SlideMenu, "Container");

}());


[修正] (15/09/20 Sun 23:55)
CreateJS 0.8.1 にバージョンアップ。