[CreateJS] スライダー (1)

CreateJSを使って、スライダーを作ってみたよ。 :bouzu:

createjs_slider1

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Slider (1) | 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/Slider.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
  #canvas{
    display:block;
    width:600px;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }
</style>
<script>
var canvas, stage, stats;
var images;
var slider;
var txt;

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);

  background();

  images = images||{};
  var loader = new createjs.LoadQueue(false);
  loader.addEventListener("fileload", fileload);
  loader.addEventListener("complete", complete);
  loader.loadFile({src: "assets/handler.png", id: "handler"});

  createjs.Ticker.setFPS(30);
  createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
  if (createjs.Touch.isSupported()) {
    createjs.Touch.enable(stage);
  }
  stage.enableMouseOver(10);

  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);

  initialize();
}
function update(event) {
  stage.update();

  stats.update();
}
function initialize() {
  txt.text = "0";
  slider = new Slider(images.handler, 360);
  stage.addChild(slider);
  slider.x = canvas.width/2;
  slider.y = 150;
  slider.initialize(180, 180, 0);
  slider.addEventListener("change", change);
  slider.addEventListener("select", select);
}
function change(event) {
  txt.text = event.target.value;
}
function select(event) {
  txt.text = event.target.value;
}
function background() {
  var basic = new createjs.Text("HTML5 / CreateJS [0.8.1]", "14px Arial", "#000000");
  stage.addChild(basic);
  basic.textAlign = "left";
  basic.textBaseline = "bottom";
  basic.x = 10;
  basic.y = 20;
  basic.alpha = 0.6;
  var title = new createjs.Text("Slider", "24px Arial", "#000000");
  stage.addChild(title);
  title.textAlign = "center";
  title.textBaseline = "bottom";
  title.x = canvas.width/2;
  title.y = 65;
  title.alpha = 0.6;
  txt = new createjs.Text("0", "20px Arial", "#CC0000");
  stage.addChild(txt);
  txt.textAlign = "center";
  txt.textBaseline = "bottom";
  txt.x = canvas.width/2;
  txt.y = 110;
  txt.alpha = 0.6;
  var publish = new createjs.Text("authoring: Sublime Text 2 + Flash CC", "14px Arial", "#000000");
  stage.addChild(publish);
  publish.textAlign = "right";
  publish.textBaseline = "bottom";
  publish.x = canvas.width 10;
  publish.y = 20;
  publish.alpha = 0.6;
}
</script>
</head>
<body onload="init();" style="background-color:#EEEEEE">
  <canvas id="canvas" width="600" height="200" style="background-color:#FFFFFF"></canvas>
</body>
</html>