2012-12-04 23:50:36

License: MIT License

Fork: 0

Fav: 12

View: 4050

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 1836 lines
HTML 9 lines
CSS 68 lines

サインアップフォームを、コンシューマーゲームで見かけるブリーフィング画面をイメージして仕上げました。
「漢（おとこ）がときめくUX」がテーマですｗ

操作方法

クリック操作とキーボード操作に対応しています。
キーボードの場合はEnterキー押下で次のシーンに進みます。
（性別選択画面だけは「←」「→」のどちらかのキーを押してください）

動作確認済

最新版のGoogle Chrome (ver.23)

HTML5ロゴのライセンス情報

The HTML5 Logo is licensed under Creative Commons Attribution 3.0 Unported by the W3C.

ブリーフィングフォーム forked: 第二回全国統一 HTML5実技コンテストエントリー用コード

(function () {
    'use strict';

var
    // private variable
        canvas,
        stage,
        loadImages1 = [
            {id: 'html5', src: '/assets/w/5/B/9/w5B9F.png'},
            {id: 'shadow', src: '/assets/y/5/W/6/y5W6d.png'}
        ],
        loadImages2 = [
            {id: 'man', src: '/assets/o/c/z/T/oczTN.png'},
            {id: 'woman', src: '/assets/r/j/k/o/rjkoS.png'}
        ],
        shapes = {},
        loadingTextArr = [],
        stepTitleArr = [],
        introTitleArr = [],
        introDescArr = [],
        stepDescArr = [],
        okDescArr = ['O', 'K', '.'],
        textsAlpha = 0,
        formField = {
            name: document.getElementById('nameField'),
            mail: document.getElementById('mailField'),
            pass: document.getElementById('passwordField'),
            retypedPass: document.getElementById('retypedPasswordField')
        },
        formData = {
            sex: 'man',
            name: undefined,
            mail: undefined,
            password: undefined,
            nameIsRequired: false,
            mailIsRequired: false,
            mailIsUnknownFormat: false,
            passIsRequired: false,
            retypedPassIsRequired: false,
            retypedPassIsDifferent: false
        },
        formDataArr = {
            name: [],
            mail: []
        },
        finDescArr = [],
    // private variable(FIXED)
        LOADING_TEXT = 'LOADING',
        STEP_TITLE = ['CHOOSE SEX', 'NAME,MAIL,PASS', 'CONFIRM'],
        INTRO_TITLE = 'SIGN UP PROCESS',
        INTRO_DESC = [
            'CHOOSE SEX.', 'ENTER USERNAME, MAIL ADDRESS \nAND PASSWORD.',
            'CONFIRM YOUR INFORMATION.'],
        STEP_DESC = [
            'CHOOSE SEX.\n(CLICK THE ICON EITHER OR PRESS THE LEFT\n OR RIGHT KEY.)', 'ENTER USERNAME, MAIL ADDRESS AND \nPASSWORD.',
            'CONFIRM YOUR INFORMATION.'],
        FIN_DESC = 'REGISTRATION IS COMPLETED.\nWELCOME ',
        STEP2_ERROR = 'THERE ARE ERRORS. CHECK THE VALUES.',
        CANVAS_SIZE = {
            width: 450,
            height: 450
        },
    // function name
        load,
        startLoadingAnime,
        loadCompleteHandler,
        prepareStep1,
        prepareStep2,
        prepareStep3,
        prepareFinish,
        prepareQuit,
        sceneFnc = function () {},
        tick,
        afterStep1,
        afterStep2,
        afterStep3,
        sceneCommon,
        sceneLoading,
        sceneLoadComplete,
        sceneStep1,
        sceneStep2,
        sceneStep3,
        sceneAfterStep1,
        sceneAfterStep2,
        sceneAfterStep3,
        sceneFinish,
        sceneQuit,
        removeLoadingText,
        removeHtml5,
        formKeyUpHandler,
        validateFormData,
        init;

init = function () {
        var i, len, loader;

// make CreateJS settings
        canvas = document.getElementById('form');
        stage = new createjs.Stage(canvas);
        createjs.Ticker.setFPS(30);
        createjs.Ticker.addListener(tick);

// adjust size
        canvas.width = CANVAS_SIZE.width;
        canvas.height = CANVAS_SIZE.height;

// setup message arr
        for(len = LOADING_TEXT.length, i = 0; i < len; i++) {
            loadingTextArr.push(LOADING_TEXT.substr(i, 1));
        }

// set formField validator
        formField.name.addEventListener('input', validateFormData, false);
        formField.mail.addEventListener('input', validateFormData, false);
        formField.pass.addEventListener('input', validateFormData, false);
        formField.retypedPass.addEventListener('input', validateFormData, false);

// set enter key control
        document.addEventListener('keyup', formKeyUpHandler, false);

// show loading animation
        loader = new createjs.PreloadJS();
        loader.onComplete = startLoadingAnime;
        loader.loadManifest(loadImages1);
    };

startLoadingAnime = function () {
        var i, len, g, t, bitmap, gx, gy;

// draw background rect
        g = new createjs.Graphics();
        g.beginFill(createjs.Graphics.getRGB(0, 0, 0));
        g.drawRect(0, 0, CANVAS_SIZE.width, CANVAS_SIZE.height);
        g.endFill();
        stage.addChild(new createjs.Shape(g));
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 0.1));
        g.beginFill(createjs.Graphics.getRGB(0, 36, 81));
        g.drawRect(-1, -1, CANVAS_SIZE.width + 2, CANVAS_SIZE.height + 2);
        g.endStroke();
        g.endFill();
        shapes.background = {
            container: new createjs.Container(),
            step: 1
        };
        shapes.background.container.addChild(new createjs.Shape(g));
        shapes.background.container.alpha = 0;
        stage.addChild(shapes.background.container);

// draw validation error background
        g = new createjs.Graphics();
        g.beginFill(createjs.Graphics.getRGB(200, 0, 0));
        g.drawRect(0, 0, CANVAS_SIZE.width, CANVAS_SIZE.height);
        g.endFill();
        shapes.errorBackground = {
            container: new createjs.Container(),
            alpha: 0
        };
        shapes.errorBackground.container.addChild(new createjs.Shape(g));
        shapes.errorBackground.container.alpha = 0;
        stage.addChild(shapes.errorBackground.container);

// draw lines
        gx = new createjs.Graphics();
        gy = new createjs.Graphics();
        gx.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 0.1));
        gy.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 0.1));
        for(len = CANVAS_SIZE.width / 25, i = 0; i < len; i++) {
            // horizontal line
            gx.moveTo(0, i * 25);
            gx.lineTo(CANVAS_SIZE.width, i * 25);

// vertical line
            gy.moveTo(i * 25, 0);
            gy.lineTo(i * 25, CANVAS_SIZE.height);
        }
        gx.endStroke();
        gy.endStroke();
        shapes.backgroundLinesX = {
            container: new createjs.Container(),
            counter: 0
        };
        shapes.backgroundLinesX.container.addChild(new createjs.Shape(gx));
        shapes.backgroundLinesY = {
            container: new createjs.Container(),
            counter: 0
        };
        shapes.backgroundLinesY.container.addChild(new createjs.Shape(gy));
        g = new createjs.Graphics();
        g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 1));
        g.drawRect(0, 0, CANVAS_SIZE.width, CANVAS_SIZE.height);
        g.endFill();
        shapes.backgroundMaskX = {
            shape: new createjs.Shape(g)
        };
        shapes.backgroundMaskY = {
            shape: new createjs.Shape(g)
        };
        shapes.backgroundLinesX.container.mask = shapes.backgroundMaskX.shape;
        shapes.backgroundLinesY.container.mask = shapes.backgroundMaskY.shape;
        shapes.backgroundLinesX.container.alpha = 0;
        shapes.backgroundLinesY.container.alpha = 0;
        shapes.backgroundMaskX.shape.x = -CANVAS_SIZE.width;
        shapes.backgroundMaskY.shape.y = -CANVAS_SIZE.height;
        shapes.backgroundMaskX.shape.alpha = 0;
        shapes.backgroundMaskY.shape.alpha = 0;
        stage.addChild(shapes.backgroundLinesX.container);
        stage.addChild(shapes.backgroundLinesY.container);

// "Loading" message
        t = new createjs.Text('', '15px Courier', '#FFFFFF');
        t.textAlign = 'LEFT';
        t.x = 15;
        t.y = 15;
        shapes.loadingText = {
            container: new createjs.Container(),
            counter: 0,
            called: 0,
            step: 0
        };
        shapes.loadingText.container.addChild(t);
        stage.addChild(shapes.loadingText.container);

// draw HTML5 logo
        bitmap = new createjs.Bitmap(loadImages1[0].src);
        shapes.logoHtml5 = {
            container: new createjs.Container(),
            width: 141,
            height: 197,
            gap: -30,
            counter: 0,
            called: 0,
            baseY: (CANVAS_SIZE.height / 2) - 100,
            step: 1
        };
        shapes.logoHtml5.container.alpha = 0;
        shapes.logoHtml5.container.x =
            (CANVAS_SIZE.width / 2) - (shapes.logoHtml5.width / 2);
        shapes.logoHtml5.container.y = shapes.logoHtml5.baseY;
        shapes.logoHtml5.container.addChild(bitmap);
        stage.addChild(shapes.logoHtml5.container);

// draw scan line
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(100, 255, 255, 0.5));
        g.moveTo(0, 0);
        g.lineTo(CANVAS_SIZE.width, 0);
        g.endStroke();
        shapes.scanLine = {
            container: new createjs.Container()
        };
        shapes.scanLine.container.addChild(new createjs.Shape(g));
        stage.addChild(shapes.scanLine.container);

// draw shadow
        bitmap = new createjs.Bitmap(loadImages1[1].src);
        shapes.shadow = {
            container: new createjs.Container(),
            width: CANVAS_SIZE.width,
            height: CANVAS_SIZE.height,
            step: 1
        };
        shapes.shadow.container.alpha = 0.8;
        shapes.shadow.container.width = CANVAS_SIZE.width;
        shapes.shadow.container.height = CANVAS_SIZE.height;
        shapes.shadow.container.addChild(bitmap);
        stage.addChild(shapes.shadow.container);

// start animation
        sceneFnc = function () {
            sceneCommon();
            sceneLoading();
        };

// load images
        load();
    };

load = function () {
        var loader;

loader = new createjs.PreloadJS();
        loader.onComplete = loadCompleteHandler;
        loader.loadManifest(loadImages2);
    };

loadCompleteHandler = function () {
        var i, j, len, shape, g, t;

// remove loading message
        removeLoadingText();

// remove html5 logo
        removeHtml5();

// draw step numbers to header
        shapes.headerStep = [];
        for(i = 0; i < 3; i++) {
            stepTitleArr[i] = [];
            for(len = STEP_TITLE[i].length, j = 0; j < len; j++) {
                stepTitleArr[i].push(STEP_TITLE[i].substr(j, 1));
            }
        }
        for(i = 1; i <= 3; i++) {
            shape = {
                container: new createjs.Container(),
                background: new createjs.Container(),
                counter: 0,
                step: 0
            };
            g = new createjs.Graphics();
            g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
            g.drawRect(CANVAS_SIZE.width / 3 * (i - 1), - 1, CANVAS_SIZE.width / 3, 50);
            g.endStroke();
            shape.container.addChild(new createjs.Shape(g));
            t = new createjs.Text('0' + i + '\n', '15px Courier', '#FFFFFF');
            t.lineHeight = 17;
            t.textAlign = 'LEFT';
            t.x = CANVAS_SIZE.width / 3 * (i - 1) + 10;
            t.y = 7;
            shape.container.alpha = 0;
            shape.container.addChild(t);
            stage.addChild(shape.container);
            g = new createjs.Graphics();
            g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.3));
            g.drawRect(CANVAS_SIZE.width / 3 * (i - 1), -1, CANVAS_SIZE.width / 3, 50);
            g.endFill();
            shape.background.addChild(new createjs.Shape(g));
            shape.background.alpha = 0;
            stage.addChild(shape.background);

shapes.headerStep.push(shape);
        }

// draw introductions
        for(i = 0; i < 3; i++) {
            // intro description
            introDescArr[i] = [];
            for(len = INTRO_DESC[i].length, j = 0; j < len; j++) {
                introDescArr[i].push(INTRO_DESC[i].substr(j, 1));
            }

// step description
            stepDescArr[i] = [];
            for(len = STEP_DESC[i].length, j = 0; j < len; j++) {
                stepDescArr[i].push(STEP_DESC[i].substr(j, 1));
            }
        }
        for(len = INTRO_TITLE.length, i = 0; i < len; i++) {
            introTitleArr.push(INTRO_TITLE.substr(i, 1));
        }
        shapes.introBorder = {
            container: new createjs.Container(),
            counter: 0
        };
        shapes.introBorder.container.alpha = 0;
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
        g.drawRect(25, 75, 400, 275);
        g.endStroke();
        shapes.introBorder.container.addChild(new createjs.Shape(g));
        stage.addChild(shapes.introBorder.container);

shapes.introTitle = {
            container: new createjs.Container(),
            step: 0
        };
        t = new createjs.Text('', '20px Courier', '#FFFFFF');
        t.textAlign = 'CENTER';
        shapes.introTitle.container.addChild(t);
        shapes.introTitle.container.x = 135;
        shapes.introTitle.container.y = 90;
        stage.addChild(shapes.introTitle.container);

shapes.intro = [];
        for(i = 1; i <= 3; i++) {
            shape = {
                container: new createjs.Container(),
                background: new createjs.Container(),
                counter: 0,
                step: 0
            };
            g = new createjs.Graphics();
            g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
            g.drawCircle(64, 90 + (i * 70), 20);
            g.endStroke();
            shape.container.addChild(new createjs.Shape(g));
            shape.container.alpha = 0;
            t = new createjs.Text('0' + i, '15px Courier', '#FFFFFF');
            t.textAlign = 'LEFT';
            t.x = CANVAS_SIZE.width / 7 - 9;
            t.y = 86 + (i * 70);
            shape.container.addChild(t);
            t = new createjs.Text('STEP', '10px Courier', '#FFFFFF');
            t.textAlign = 'LEFT';
            t.x = CANVAS_SIZE.width / 7 - 11;
            t.y = 77 + (i * 70);
            shape.container.addChild(t);
            t = new createjs.Text('', '15px Courier', '#FFFFFF');
            t.textAlign = 'LEFT';
            t.lineHeight = 20;
            t.x = CANVAS_SIZE.width / 7 + 30;
            t.y = 72 + (i * 70);
            shape.container.addChild(t);
            stage.addChild(shape.container);
            g = new createjs.Graphics();
            g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.3));
            g.drawCircle(64, 90 + (i * 70), 20);
            g.endStroke();
            shape.background.addChild(new createjs.Shape(g));
            shape.background.alpha = 0;
            stage.addChild(shape.background);

shapes.intro.push(shape);
        }

// draw next button
        shapes.nextButton = {
            container: new createjs.Container(),
            width: 100,
            height: 25,
            gap: 48,
            counter: 0,
            baseY: 375,
            step: 1
        };
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
        g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.3));
        g.drawRect(0, 0, 100, 25);
        g.endStroke();
        g.endFill();
        shapes.nextButton.container.addChild(new createjs.Shape(g));
        t = new createjs.Text('>> NEXT', '17px Courier', '#FFFFFF');
        t.textAlign = 'CENTER';
        t.x = 15;
        t.y = 2;
        shapes.nextButton.container.addChild(t);
        shapes.nextButton.container.x = 325;
        shapes.nextButton.container.y = 375;
        shapes.nextButton.container.alpha = 0;
        stage.addChild(shapes.nextButton.container);

// set scan line z-index
        stage.removeChild(shapes.scanLine.container);
        stage.addChild(shapes.scanLine.container);

// set shade z-index
        stage.removeChild(shapes.shadow.container);
        stage.addChild(shapes.shadow.container);
    };

prepareStep1 = function () {
        var i, bitmap, t, g;

// remove parts
        if (shapes.sexIcon) {
            stage.removeChild(shapes.sexIcon.container);
            stage.removeChild(shapes.formValues.container);
            stage.removeChild(shapes.backButton.container);
            stage.removeChild(shapes.stepBody.container);
            stage.removeChild(shapes.stepBodyBorder.container);
            stage.removeChild(shapes.closeHead.container);
            shapes.sexIcon = undefined;
        }

// remove registered event
        stage.onClick = undefined;

// remove introduction
        for(i = 0; i < 3; i++) {
            stage.removeChild(shapes.intro[i].container);
        }
        stage.removeChild(shapes.introTitle.container);
        stage.removeChild(shapes.introBorder.container);
        stage.removeChild(shapes.nextButton.container);

// draw sex icons
        bitmap = new createjs.Bitmap(loadImages2[0].src);
        shapes.iconMan = {
            container: new createjs.Container(),
            width: 98,
            height: 235,
            gap: -10,
            counter: 0,
            baseY: 85,
            step: 1
        };
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
        g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.2));
        g.drawRect(-18, -10, 134, 255);
        g.endStroke();
        g.endFill();
        shapes.iconMan.container.addChild(new createjs.Shape(g));
        shapes.iconMan.container.x =
            (CANVAS_SIZE.width / 2) - (shapes.iconMan.width / 2) - 90;
        shapes.iconMan.container.y = shapes.iconMan.baseY + shapes.iconMan.gap;
        shapes.iconMan.container.addChild(bitmap);
        shapes.iconMan.container.scaleX = 0.2;
        shapes.iconMan.container.scaleY = 4;
        shapes.iconMan.container.alpha = 0.8;
        stage.addChild(shapes.iconMan.container);
        bitmap = new createjs.Bitmap(loadImages2[1].src);
        shapes.iconWoman = {
            container: new createjs.Container(),
            width: 114,
            height: 235,
            gap: 48,
            counter: 0,
            baseY: 85,
            step: 1
        };
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
        g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.2));
        g.drawRect(-10, -10, 134, 255);
        g.endStroke();
        g.endFill();
        shapes.iconWoman.container.addChild(new createjs.Shape(g));
        shapes.iconWoman.container.x =
            (CANVAS_SIZE.width / 2) - (shapes.iconWoman.width / 2) + 90;
        shapes.iconWoman.container.y = shapes.iconWoman.baseY + shapes.iconWoman.gap;
        shapes.iconWoman.container.scaleX = 0.1;
        shapes.iconWoman.container.scaleY = 0.5;
        shapes.iconWoman.container.alpha = 0.8;
        shapes.iconWoman.container.addChild(bitmap);
        stage.addChild(shapes.iconWoman.container);

g = new createjs.Graphics();
        g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 1));
        g.drawRect(0, 0, CANVAS_SIZE.width, CANVAS_SIZE.height);
        g.endFill();
        shapes.sexIconMask = {
            shape: new createjs.Shape(g)
        };
        shapes.iconMan.container.children[1].mask = shapes.sexIconMask.shape;
        shapes.iconWoman.container.children[1].mask = shapes.sexIconMask.shape;
        shapes.sexIconMask.shape.y = -CANVAS_SIZE.height;

// draw message
        shapes.stepBodyBorder = {
            container: new createjs.Container()
        };
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
        g.drawRect(25, 350, 400, 75);
        g.endStroke();
        shapes.stepBodyBorder.container.addChild(new createjs.Shape(g));
        stage.addChild(shapes.stepBodyBorder.container);
        shapes.stepBody = {
            container: new createjs.Container(),
            counter: 0,
            step: 0
        };
        t = new createjs.Text('', '15px Courier', '#FFFFFF');
        t.textAlign = 'CENTER';
        t.lineHeight = 20;
        shapes.stepBody.container.addChild(t);
        shapes.stepBody.container.x = 40;
        shapes.stepBody.container.y = 360;
        stage.addChild(shapes.stepBody.container);

// highlight header step number
        shapes.headerStep[0].background.alpha = 1;
        shapes.headerStep[1].background.alpha = 0;
        shapes.headerStep[2].background.alpha = 0;

// set scan line z-index
        stage.removeChild(shapes.scanLine.container);
        stage.addChild(shapes.scanLine.container);

// set shade z-index
        stage.removeChild(shapes.shadow.container);
        stage.addChild(shapes.shadow.container);

// start next animation
        sceneFnc = function () {
            sceneCommon();
            sceneStep1();
        };

// register event
        shapes.iconMan.container.onClick = function () {
            formData.sex = 'man';
            afterStep1();
        };
        shapes.iconWoman.container.onClick = function () {
            formData.sex = 'woman';
            afterStep1();
        };
    };

afterStep1 = function () {
        var g;

// draw before step after image
        shapes.step1AfterImage = {
            container: new createjs.Container(),
            counter: 0
        };
        g = new createjs.Graphics();
        g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.5));
        if(formData.sex === 'man') {
            // draw woman silhouette
            g.drawRect(shapes.iconWoman.container.x - 18, shapes.iconWoman.container.y - 10, 134, 255);

// remove woman icon
            shapes.iconWoman.container.alpha = 0;

// raise alpha of man icon
            shapes.iconMan.container.alpha = 1;
        } else {
            // draw man silhouette
            g.drawRect(shapes.iconMan.container.x - 10, shapes.iconMan.container.y - 10, 134, 255);

// remove man icon
            shapes.iconMan.container.alpha = 0;

// raise alpha of woman icon
            shapes.iconWoman.container.alpha = 1;
        }
        g.endFill();
        shapes.step1AfterImage.container.addChild(new createjs.Shape(g));
        stage.addChild(shapes.step1AfterImage.container);

// clear description
        shapes.stepBody.step = 0;
        shapes.stepBody.container.children[0].text = '';

// start next animation
        sceneFnc = function () {
            sceneCommon();
            sceneAfterStep1();
        };
    };

prepareStep2 = function () {
        var t, g, i, len;

// remove sex icons from stage
        stage.removeChild(shapes.iconMan.container);
        stage.removeChild(shapes.iconWoman.container);
        stage.removeChild(shapes.step1AfterImage.container);

// remove event
        shapes.iconMan.container.onClick = undefined;
        shapes.iconWoman.container.onClick = undefined;

// draw text field of NAME
        shapes.nameField = {
            container: new createjs.Container(),
            width: 200,
            height: 25,
            gap: 48,
            counter: 0,
            baseY: 0,
            step: 1
        };
        t = new createjs.Text('NAME', '17px Courier', '#FFFFFF');
        t.textAlign = 'RIGHT';
        t.x = 50;
        t.y = 75;
        shapes.nameField.container.addChild(t);
        stage.addChild(shapes.nameField.container);

shapes.nameFieldRect = {
            shape: new createjs.Shape()
        };
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
        g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.1));
        g.drawRect(100, 75, 200, 25);
        g.endStroke();
        g.endFill();
        shapes.nameFieldRect.shape = new createjs.Shape(g);
        shapes.nameField.container.addChild(shapes.nameFieldRect.shape);

// draw text field of MAIL
        shapes.mailField = {
            container: new createjs.Container(),
            width: 200,
            height: 25,
            gap: 48,
            counter: 0,
            baseY: 0,
            step: 1
        };
        t = new createjs.Text('MAIL', '17px Courier', '#FFFFFF');
        t.textAlign = 'RIGHT';
        t.x = 50;
        t.y = 125;
        shapes.mailField.container.addChild(t);
        stage.addChild(shapes.mailField.container);

shapes.mailFieldRect = {
            shape: new createjs.Shape()
        };
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
        g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.1));
        g.drawRect(100, 125, 200, 25);
        g.endStroke();
        g.endFill();
        shapes.mailFieldRect.shape = new createjs.Shape(g);
        shapes.mailField.container.addChild(shapes.mailFieldRect.shape);

// draw text field of PASSWORD
        shapes.passwordField = {
            container: new createjs.Container(),
            width: 200,
            height: 25,
            gap: 48,
            counter: 0,
            baseY: 0,
            step: 1
        };
        t = new createjs.Text('PASS', '17px Courier', '#FFFFFF');
        t.textAlign = 'RIGHT';
        t.x = 50;
        t.y = 175;
        shapes.passwordField.container.addChild(t);
        stage.addChild(shapes.passwordField.container);

shapes.passwordFieldRect = {
            shape: new createjs.Shape()
        };
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
        g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.1));
        g.drawRect(100, 175, 175, 25);
        g.endStroke();
        g.endFill();
        shapes.passwordFieldRect.shape = new createjs.Shape(g);
        shapes.passwordField.container.addChild(shapes.passwordFieldRect.shape);

// draw text field of RETYPED PASSWORD
        shapes.retypedPasswordField = {
            container: new createjs.Container(),
            width: 200,
            height: 25,
            gap: 48,
            counter: 0,
            baseY: 0,
            step: 1
        };
        t = new createjs.Text('PASS', '17px Courier', '#FFFFFF');
        t.textAlign = 'RIGHT';
        t.x = 50;
        t.y = 225;
        shapes.retypedPasswordField.container.addChild(t);
        t = new createjs.Text('(RETYPE)', '15px Courier', '#FFFFFF');
        t.textAlign = 'RIGHT';
        t.x = 20;
        t.y = 250;
        shapes.retypedPasswordField.container.addChild(t);
        stage.addChild(shapes.retypedPasswordField.container);

shapes.retypedPasswordFieldRect = {
            shape: new createjs.Shape()
        };
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
        g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.1));
        g.drawRect(100, 225, 175, 25);
        g.endStroke();
        g.endFill();
        shapes.retypedPasswordFieldRect.shape = new createjs.Shape(g);
        shapes.retypedPasswordField.container.addChild(shapes.retypedPasswordFieldRect.shape);

// draw next button
        shapes.nextButton.container.x = 300;
        shapes.nextButton.container.y = 310;
        shapes.nextButton.baseY = 310;
        shapes.nextButton.step = 1;
        shapes.nextButton.counter = 0;
        stage.addChild(shapes.nextButton.container);

// highlight header step number
        shapes.headerStep[0].background.alpha = 0;
        shapes.headerStep[1].background.alpha = 1;
        shapes.headerStep[2].background.alpha = 0;

// close past header step number
        shapes.closeHead = {
            container: new createjs.Container()
        };
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
        g.moveTo(CANVAS_SIZE.width / 3, 0);
        g.lineTo(0, 50);
        g.moveTo(CANVAS_SIZE.width / 3, 50);
        g.lineTo(0, 0);
        g.endStroke();
        shapes.closeHead.container.addChild(new createjs.Shape(g));
        stage.addChild(shapes.closeHead.container);

// clear description
        shapes.stepBody.step = 0;
        shapes.stepBody.container.children[0].text = '';

// prepare NAME validation error indication
        shapes.nameError = {
            required: new createjs.Container()
        };
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(0, 0, 0, 1));
        g.setStrokeStyle(2);
        g.beginFill(createjs.Graphics.getRGB(255, 0, 0, 0.3));
        g.drawRect(0, 0, 75, 25);
        g.endStroke();
        g.endFill();
        shapes.nameError.required.addChild(new createjs.Shape(g));

t = new createjs.Text('REQUIRED', '12px Courier', '#FFFFFF');
        t.textAlign = 'CENTER';
        t.x = 10;
        t.y = 5;
        t.width = 75;
        shapes.nameError.required.addChild(t);
        shapes.nameError.required.x = 325;
        shapes.nameError.required.y = 75;
        shapes.nameError.required.alpha = 0;
        stage.addChild(shapes.nameError.required);

// prepare MAIL validation error indication
        shapes.mailError = {
            required: shapes.nameError.required.clone(true),
            reformat: new createjs.Container()
        };
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(0, 0, 0, 1));
        g.setStrokeStyle(2);
        g.beginFill(createjs.Graphics.getRGB(255, 0, 0, 0.3));
        g.drawRect(0, 0, 100, 25);
        g.endStroke();
        g.endFill();
        shapes.mailError.reformat.addChild(new createjs.Shape(g));
        t = new createjs.Text('WRONG FORMAT', '12px Courier', '#FFFFFF');
        t.textAlign = 'CENTER';
        t.x = 8;
        t.y = 5;
        t.width = 100;
        shapes.mailError.reformat.addChild(t);
        shapes.mailError.required.x = shapes.mailError.reformat.x = 325;
        shapes.mailError.required.y = shapes.mailError.reformat.y = 125;
        shapes.mailError.required.alpha = shapes.mailError.reformat.alpha = 0;
        stage.addChild(shapes.mailError.required);
        stage.addChild(shapes.mailError.reformat);

// prepare PASS validation error indication
        shapes.passError = {
            required: shapes.nameError.required.clone(true)
        };
        shapes.passError.required.x = 325;
        shapes.passError.required.y = 175;
        shapes.passError.required.alpha = 0;
        stage.addChild(shapes.passError.required);

// prepare PASS(RETYPE) validation error indication
        shapes.retypedPassError = {
            required: shapes.nameError.required.clone(true),
            different: new createjs.Container()
        };
        shapes.retypedPassError.required.x = 325;
        shapes.retypedPassError.required.y = 225;
        shapes.retypedPassError.required.alpha = 0;
        stage.addChild(shapes.retypedPassError.required);
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(0, 0, 0, 1));
        g.setStrokeStyle(2);
        g.beginFill(createjs.Graphics.getRGB(255, 0, 0, 0.3));
        g.drawRect(0, 0, 125, 25);
        g.endStroke();
        g.endFill();
        shapes.retypedPassError.different.addChild(new createjs.Shape(g));
        t = new createjs.Text('DIFFER FROM PASS', '12px Courier', '#FFFFFF');
        t.textAlign = 'CENTER';
        t.x = 5;
        t.y = 5;
        shapes.retypedPassError.different.addChild(t);
        shapes.retypedPassError.different.x = 300;
        shapes.retypedPassError.different.y = 225;
        shapes.retypedPassError.different.alpha = 0;
        stage.addChild(shapes.retypedPassError.different);

// prepare NAME validation clear indication
        shapes.nameOk = {
            container: new createjs.Container()
        };
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(0, 0, 0, 1));
        g.setStrokeStyle(2);
        g.beginFill(createjs.Graphics.getRGB(0, 200, 50, 0.3));
        g.drawRect(0, 0, 75, 25);
        g.endStroke();
        g.endFill();
        shapes.nameOk.container.addChild(new createjs.Shape(g));

t = new createjs.Text('OK', '12px Courier', '#FFFFFF');
        t.textAlign = 'CENTER';
        t.x = 30;
        t.y = 5;
        shapes.nameOk.container.addChild(t);
        shapes.nameOk.container.x = 325;
        shapes.nameOk.container.y = 75;
        shapes.nameOk.container.alpha = 0;
        stage.addChild(shapes.nameOk.container);

// prepare MAIL validation clear indication
        shapes.mailOk = {
            container: shapes.nameOk.container.clone(true)
        };
        shapes.mailOk.container.x = 325;
        shapes.mailOk.container.y = 125;
        shapes.mailOk.container.alpha = 0;
        stage.addChild(shapes.mailOk.container);

// prepare PASS validation clear indication
        shapes.passOk = {
            container: shapes.nameOk.container.clone(true)
        };
        shapes.passOk.container.x = 325;
        shapes.passOk.container.y = 175;
        shapes.passOk.container.alpha = 0;
        stage.addChild(shapes.passOk.container);

// prepare PASS(RETYPE) validation clear indication
        shapes.retypedPassOk = {
            container: shapes.nameOk.container.clone(true)
        };
        shapes.retypedPassOk.container.x = 325;
        shapes.retypedPassOk.container.y = 225;
        shapes.retypedPassOk.container.alpha = 0;
        stage.addChild(shapes.retypedPassOk.container);

// execute validation
        validateFormData();

// re-build step desc
        stepDescArr[1] = [];
        for(len = STEP_DESC[1].length, i = 0; i < len; i++) {
            stepDescArr[1].push(STEP_DESC[1].substr(i, 1));
        }

// set scan line z-index
        stage.removeChild(shapes.scanLine.container);
        stage.addChild(shapes.scanLine.container);

// set shade z-index
        stage.removeChild(shapes.shadow.container);
        stage.addChild(shapes.shadow.container);

// start next animation
        sceneFnc = function () {
            sceneCommon();
            sceneStep2();
        };

// register event
        shapes.nextButton.container.onClick = function () {
            // save inputed values
            formData.name = formField.name.value;
            formData.mail = formField.mail.value;
            formData.pass = formField.pass.value;

// validation
            if (validateFormData()) {
                // build error message
                stepDescArr[1] = [];
                for(len = STEP2_ERROR.length, i = 0; i < len; i++) {
                    stepDescArr[1].push(STEP2_ERROR.substr(i, 1));
                }

// set error background
                shapes.errorBackground.alpha = 0.8;

// clear description
                shapes.stepBody.step = 0;
                shapes.stepBody.container.children[0].text = '';

return;
            }

// go to next scene
            afterStep2();
        };
    };

afterStep2 = function () {
        var g;

// remove labels from stage
        stage.removeChild(shapes.nameField.container);
        stage.removeChild(shapes.mailField.container);
        stage.removeChild(shapes.passwordField.container);
        stage.removeChild(shapes.retypedPasswordField.container);
        shapes.nameOk.container.alpha = 0;
        shapes.mailOk.container.alpha = 0;
        shapes.passOk.container.alpha = 0;
        shapes.retypedPassOk.container.alpha = 0;

// draw before step after image
        shapes.step2AfterImage = {
            container: new createjs.Container(),
            counter: 0
        };
        g = new createjs.Graphics();
        g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.5));
        g.drawRect(100, 75, 200, 25);
        g.drawRect(100, 125, 200, 25);
        g.drawRect(100, 175, 175, 25);
        g.drawRect(100, 225, 175, 25);
        g.endFill();
        shapes.step2AfterImage.container.addChild(new createjs.Shape(g));
        stage.addChild(shapes.step2AfterImage.container);

// clear description
        shapes.stepBody.step = 0;
        shapes.stepBody.container.children[0].text = '';

// start next animation
        sceneFnc = function () {
            sceneCommon();
            sceneAfterStep2();
        };
    };

prepareStep3 = function () {
        var t, g, i, len;

// remove input forms from stage
        formField.name.className = '';
        formField.mail.className = '';
        formField.pass.className = '';
        formField.retypedPass.className = '';
        stage.removeChild(shapes.step2AfterImage.container);

// draw sex icon
        shapes.sexIcon = {
            container: undefined
        };
        if (formData.sex === 'man') {
            shapes.sexIcon.container = shapes.iconMan.container;
        } else {
            shapes.sexIcon.container = shapes.iconWoman.container;
        }
        shapes.sexIcon.container.x = 40;
        shapes.sexIcon.container.y = 85;
        shapes.sexIcon.container.onClick = undefined;
        stage.addChild(shapes.sexIcon.container);

shapes.sexIconMask.shape.y = -CANVAS_SIZE.height;

// draw form data
        formDataArr = {
            name: [],
            mail: []
        };
        for(len = formData.name.length, i = 0; i < len; i++) {
            formDataArr.name.push(formData.name.substr(i, 1));
        }
        for(len = formData.mail.length, i = 0; i < len; i++) {
            formDataArr.mail.push(formData.mail.substr(i, 1));
        }
        shapes.formValues = {
            container: new createjs.Container(),
            nameText: new createjs.Text('NAME: ', '15px Courier', '#FFFFFF'),
            mailText: new createjs.Text('MAIL: ', '15px Courier', '#FFFFFF'),
            counter: 0,
            step: 0
        };
        shapes.formValues.nameText.lineHeight = 20;
        shapes.formValues.nameText.x = 75;
        shapes.formValues.nameText.y = -20;
        shapes.formValues.container.addChild(shapes.formValues.nameText);
        shapes.formValues.mailText.lineHeight = 20;
        shapes.formValues.mailText.x = 75;
        shapes.formValues.mailText.y = 30;
        shapes.formValues.container.addChild(shapes.formValues.mailText);
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
        // draw underline for name field
        g.moveTo(0, 25);
        g.lineTo(25, 0);
        g.lineTo(325, 0);
        // draw underline for mail field
        g.moveTo(25, 75);
        g.lineTo(50, 50);
        g.lineTo(325, 50);
        g.endStroke();
        shapes.formValues.container.addChild(new createjs.Shape(g));
        stage.addChild(shapes.formValues.container);
        shapes.formValues.container.x = 100;
        shapes.formValues.container.y = 125;
        stage.addChild(shapes.formValues.container);

// draw back button
        shapes.backButton = {
            container: new createjs.Container(),
            width: 100,
            height: 25,
            gap: 48,
            counter: 0,
            baseY: 310,
            step: 1
        };
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
        g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.3));
        g.drawRect(0, 0, 100, 25);
        g.endStroke();
        g.endFill();
        shapes.backButton.container.addChild(new createjs.Shape(g));
        t = new createjs.Text('BACK <<', '17px Courier', '#FFFFFF');
        t.textAlign = 'CENTER';
        t.x = 15;
        t.y = 2;
        shapes.backButton.container.addChild(t);
        shapes.backButton.container.x = 185;
        shapes.backButton.container.y = 310;
        shapes.backButton.container.alpha = 1;
        stage.addChild(shapes.backButton.container);

// highlight header step number
        shapes.headerStep[0].background.alpha = 0;
        shapes.headerStep[1].background.alpha = 0;
        shapes.headerStep[2].background.alpha = 1;

// close past header step number
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
        g.moveTo(CANVAS_SIZE.width / 3 * 2, 0);
        g.lineTo(CANVAS_SIZE.width / 3, 50);
        g.moveTo(CANVAS_SIZE.width / 3 * 2, 50);
        g.lineTo(CANVAS_SIZE.width / 3, 0);
        g.endStroke();
        shapes.closeHead.container.addChild(new createjs.Shape(g));

// clear description
        shapes.stepBody.step = 0;
        shapes.stepBody.container.children[0].text = '';

// set scan line z-index
        stage.removeChild(shapes.scanLine.container);
        stage.addChild(shapes.scanLine.container);

// set shade z-index
        stage.removeChild(shapes.shadow.container);
        stage.addChild(shapes.shadow.container);

// start next animation
        sceneFnc = function () {
            sceneCommon();
            sceneStep3();
        };

// register event
        shapes.backButton.container.onClick = prepareStep1;
        shapes.nextButton.container.onClick = function () {
            afterStep3();
        };
    };

afterStep3 = function () {
        var g, t;

// remove parts from screen.
        stage.removeChild(shapes.formValues.container);
        stage.removeChild(shapes.sexIcon.container);
        stage.removeChild(shapes.nextButton.container);
        stage.removeChild(shapes.backButton.container);
        stage.removeChild(shapes.step2AfterImage.container);

// draw before step after image
        shapes.step3AfterImage = {
            container: new createjs.Container()
        };
        g = new createjs.Graphics();
        g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.5));
        g.drawRect(22, 75, 134, 255);
        g.endFill();
        shapes.step3AfterImage.container.addChild(new createjs.Shape(g));
        stage.addChild(shapes.step3AfterImage.container);

// draw highlight
        shapes.headerStepLight = {
            container: new createjs.Container()
        };
        g = new createjs.Graphics();
        g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.5));
        g.drawRect(0, 0, CANVAS_SIZE.width, 50);
        shapes.headerStepLight.container.addChild(new createjs.Shape(g));
        stage.addChild(shapes.headerStepLight.container);

// highlight header step number
        shapes.headerStep[0].background.alpha = 0;
        shapes.headerStep[1].background.alpha = 0;
        shapes.headerStep[2].background.alpha = 0;

// hide closeHead
        stage.removeChild(shapes.closeHead.container);
        stage.removeChild(shapes.headerStep[0].container);
        stage.removeChild(shapes.headerStep[1].container);
        stage.removeChild(shapes.headerStep[2].container);

// draw uploading bar
        shapes.sendingBar = {
            container: new createjs.Container(),
            bar: new createjs.Container(),
            counter: 0
        };
        g = new createjs.Graphics();
        g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
        g.drawRect(0, 0, 200, 25);
        g.endStroke();
        shapes.sendingBar.container.addChild(new createjs.Shape(g));
        g = new createjs.Graphics();
        g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.5));
        g.drawRect(1, 1, 198, 23);
        g.endFill();
        shapes.sendingBar.bar.addChild(new createjs.Shape(g));
        shapes.sendingBar.container.addChild(shapes.sendingBar.bar);
        shapes.sendingBar.bar.x = 0;
        shapes.sendingBar.bar.y = 0;
        shapes.sendingBar.bar.scaleX = 0;
        stage.addChild(shapes.sendingBar.container);
        shapes.sendingBar.container.x = CANVAS_SIZE.width / 2 - 100;
        shapes.sendingBar.container.y = 225;

// "SENDING..." text
        t = new createjs.Text(' SENDING...', '15px Courier', '#FFFFFF');
        shapes.sendingText = {
            sending: new createjs.Container(),
            complete: new createjs.Container()
        };
        shapes.sendingText.sending.addChild(t);
        stage.addChild(shapes.sendingText.sending);
        shapes.sendingText.sending.x = 180;
        shapes.sendingText.sending.y = 170;
        shapes.sendingText.sending.alpha = 0;
        t = new createjs.Text(' COMPLETE ', '15px Courier', '#FFFFFF');
        shapes.sendingText.complete.addChild(t);
        stage.addChild(shapes.sendingText.complete);
        shapes.sendingText.complete.x = 180;
        shapes.sendingText.complete.y = 160;
        shapes.sendingText.complete.alpha = 0;

// clear description
        shapes.stepBody.step = 0;
        shapes.stepBody.container.children[0].text = '';

// start next animation
        sceneFnc = function () {
            sceneCommon();
            sceneAfterStep3();
        };
    };

prepareFinish = function () {
        var g, i, len;

// remove registered event
        stage.onClick = undefined;
        shapes.nextButton.container.onClick = undefined;

//        // close past header step number
//        g = new createjs.Graphics();
//        g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1));
//        g.moveTo(CANVAS_SIZE.width / 3 * 2, 0);
//        g.lineTo(CANVAS_SIZE.width, 50);
//        g.moveTo(CANVAS_SIZE.width / 3 * 2, 50);
//        g.lineTo(CANVAS_SIZE.width, 0);
//        g.endStroke();
//        shapes.closeHead.container.addChild(new createjs.Shape(g));

// prepare finish description
        for(len = FIN_DESC.length, i = 0; i < len; i++) {
            finDescArr.push(FIN_DESC.substr(i, 1));
        }
        for(len = formData.name.length, i = 0; i < len; i++) {
            finDescArr.push(formData.name.substr(i, 1));
        }
        finDescArr.push('.');

// clear description
        shapes.stepBody.step = 0;
        shapes.stepBody.container.children[0].text = '';

//        // set scan line z-index
//        stage.removeChild(shapes.scanLine.container);
//        stage.addChild(shapes.scanLine.container);
//
//        // set shade z-index
//        stage.removeChild(shapes.shadow.container);
//        stage.addChild(shapes.shadow.container);
//
        // start next animation
        sceneFnc = function () {
            sceneCommon();
            sceneFinish();
        };
    };

prepareQuit = function () {
        // remove parts
        stage.removeChild(shapes.stepBodyBorder.container);
        stage.removeChild(shapes.stepBody.container);
        stage.removeChild(shapes.backgroundLinesX.container);
        stage.removeChild(shapes.backgroundLinesY.container);
        stage.removeChild(shapes.scanLine.container);

// start next animation
        sceneFnc = function () {
            sceneQuit();
        };
    };

tick = function () {
        sceneFnc();
        stage.update(); // rerender
    };

sceneCommon = function () {
        var i, alpha;

// switching
        textsAlpha = (textsAlpha + 1.5) % (2 * Math.PI);
        alpha = (Math.cos(textsAlpha) / 8) + 0.9;
        // "Loading" text
        if (shapes.loadingText) {
            shapes.loadingText.container.alpha = alpha;
        }
        // step description
//        if (shapes.stepBody) {
//            shapes.stepBody.container.alpha = alpha;
//        }
        // next button
        if (shapes.nextButton && shapes.nextButton.container.alpha !== 0) {
            shapes.nextButton.container.alpha = alpha;
        }
        // back button
        if (shapes.backButton && shapes.backButton.container.alpha !== 0) {
            shapes.backButton.container.alpha = alpha;
        }
        // background
        if (shapes.background) {
            shapes.background.container.alpha = (alpha * 0.05) + 0.5;
        }
        if (shapes.headerStep && shapes.headerStep[2].counter >= 3) {
            for(i = 0; i < 3; i++) {
                shapes.headerStep[i].container.alpha = alpha + 0.1;
            }
        }

// scan line
        if (shapes.scanLine) {
            shapes.scanLine.container.y += 5;
            if (shapes.scanLine.container.y > CANVAS_SIZE.height) {
                shapes.scanLine.container.y = 0;
            }
        }

// error background
        if (shapes.errorBackground.alpha > 0) {
            shapes.errorBackground.alpha -= 0.05;
            shapes.errorBackground.container.alpha = shapes.errorBackground.alpha;
        }
    };

// scene of "loading"
    sceneLoading = function () {
        // logo
        if (shapes.logoHtml5) {
            if (shapes.logoHtml5.container.alpha < 0.5 && shapes.logoHtml5.step > 1) {
                shapes.logoHtml5.container.alpha += 0.01;
            }
            switch (shapes.logoHtml5.step) {
                case 1:
                    shapes.logoHtml5.counter++;
                    if (shapes.logoHtml5.counter > 16) {
                        shapes.logoHtml5.step++;
                        shapes.logoHtml5.counter = 0;
                    }
                    break;
                case 2:
                    if (shapes.logoHtml5.gap >= -1) {
                        shapes.logoHtml5.step++;
                    } else {
                        shapes.logoHtml5.container.y = shapes.logoHtml5.baseY + shapes.logoHtml5.gap;
                        shapes.logoHtml5.gap += shapes.logoHtml5.gap * -0.24;
                    }
                    break;
                case 3:
                    if (++shapes.logoHtml5.counter > 24) {
                        shapes.logoHtml5.step = 99; // set to invalid step
                        shapes.logoHtml5.counter = 0;
                        removeHtml5();
                        removeLoadingText();
                    }
                    break;
                case 4:
                    if (++shapes.logoHtml5.counter > 2) {
                        shapes.logoHtml5.container.scaleX = 3;
                        shapes.logoHtml5.container.scaleY = 0.2;
                        shapes.logoHtml5.container.x -= 150;
                        shapes.logoHtml5.step++;
                        shapes.logoHtml5.counter = 0;
                    }
                    break;
                case 5:
                    shapes.logoHtml5.container.scaleX = 5;
                    shapes.logoHtml5.container.scaleY = 0.3;
                    shapes.logoHtml5.container.y += 100;
                    shapes.logoHtml5.step++;
                    break;
                case 6:
                    stage.removeChild(shapes.logoHtml5.container);
                    shapes.logoHtml5.step++;

// start next animation
                    sceneFnc = function () {
                        sceneCommon();
                        sceneLoadComplete();
                    };

break;
                default:
                    break;
            }
        }

// background fade in
        if (shapes.background && shapes.background.container.alpha < 0.5) {
            shapes.background.container.alpha += 0.02;
        }

// "Loading" text
        if (shapes.loadingText) {
            if (loadingTextArr.length > shapes.loadingText.step) {
                shapes.loadingText.container.children[0].text += loadingTextArr[shapes.loadingText.step++];
            } else {
                shapes.loadingText.counter++;
                if (shapes.loadingText.counter > 10) {
                    shapes.loadingText.container.children[0].text += '.';
                    shapes.loadingText.counter = 0;
                }
            }
        }
    };

// scene of "load complete"
    sceneLoadComplete = function () {
        var alpha = (Math.cos(textsAlpha) / 16) + 0.9,
            i;

// background lines
        if (shapes.backgroundMaskX.shape.x < 0) {
            shapes.backgroundMaskX.shape.x += 10;
            shapes.backgroundMaskY.shape.y += 10;
        } else if(!stage.onClick) {
            // register event handler
            stage.onClick = prepareStep1;
        }
        if (shapes.backgroundLinesX.container.alpha < 1) {
            shapes.backgroundLinesX.container.alpha += 0.05;
            shapes.backgroundLinesY.container.alpha += 0.05;
        }

// switching
        // introduction
        if (shapes.intro[2].counter >= 4) {
            shapes.introBorder.container.alpha = alpha;
            shapes.introTitle.container.alpha = alpha;
            for(i = 0; i < 3; i++) {
                shapes.intro[i].container.alpha = alpha;
            }
        }

// header step
        for(i = 0; i < 3; i++) {
            if (stepTitleArr[i].length > shapes.headerStep[i].step) {
                shapes.headerStep[i].container.children[1].text += stepTitleArr[i][shapes.headerStep[i].step++];
            }
            if (shapes.headerStep[i].counter < 8) {
                shapes.headerStep[i].background.alpha = Math.cos(Math.PI / 8 * shapes.headerStep[i].counter);
                shapes.headerStep[i].container.alpha += 0.13;
                shapes.headerStep[i].counter++;
                return;
            }
        }

// introductions
        if (introTitleArr.length > shapes.introTitle.step) {
            shapes.introTitle.container.children[0].text += introTitleArr[shapes.introTitle.step++];
        }
        for(i = 0; i < 3; i++) {
            if (introDescArr[i].length > shapes.intro[i].step) {
                shapes.intro[i].container.children[3].text += introDescArr[i][shapes.intro[i].step++];
            }
            if (shapes.intro[i].counter < 8) {
                shapes.intro[i].background.alpha = Math.cos(Math.PI / 8 * shapes.intro[i].counter);
                shapes.intro[i].container.alpha += 0.13;
                shapes.intro[i].counter++;
                break;
            }
        }
        if (shapes.intro[0].counter >= 8) {
            shapes.introBorder.container.alpha = alpha;
            shapes.nextButton.container.alpha = alpha;
        }
        if (shapes.nextButton.step < 6) {
            shapes.nextButton.step++;
            if(shapes.nextButton.step % 2 === 0) {
                shapes.nextButton.container.scaleX = shapes.nextButton.container.scaleY = (1 / 6) * shapes.nextButton.step;
                shapes.nextButton.container.y = shapes.nextButton.baseY + Math.random() * 50 * (6 - shapes.nextButton.step);
            }
        }
    };

sceneStep1 = function () {
        // "CHOOSE SEX." text
        if (stepDescArr[0].length > shapes.stepBody.step) {
            shapes.stepBody.container.children[0].text += stepDescArr[0][shapes.stepBody.step++];
        }

// sex icons
        if (shapes.iconMan.step++ < 6) {
            shapes.iconMan.container.scaleX = shapes.iconMan.container.scaleY = (1 / 6) * shapes.iconMan.step;
            shapes.iconMan.container.y = shapes.iconMan.baseY + Math.random() * 50 * (6 - shapes.iconMan.step);
        }
        if (shapes.iconWoman.step++ < 6) {
            shapes.iconWoman.container.scaleX = shapes.iconWoman.container.scaleY = (1 / 6) * shapes.iconWoman.step;
            shapes.iconWoman.container.y = shapes.iconWoman.baseY + Math.random() * 50 * (6 - shapes.iconWoman.step);
        }

// sex icon mask
        if (shapes.sexIconMask.shape.y < -CANVAS_SIZE.height + 235) {
            shapes.sexIconMask.shape.y += 5;
            shapes.iconMan.container.alpha = shapes.iconWoman.container.alpha = shapes.iconMan.container.alpha * -1 + 1.8;
        } else {
            shapes.iconMan.container.alpha = shapes.iconWoman.container.alpha = 1;
        }
    };

sceneAfterStep1 = function () {
        // "OK." text
        if (okDescArr.length > shapes.stepBody.step) {
            shapes.stepBody.container.children[0].text += okDescArr[shapes.stepBody.step++];
        }

// flash selected icon and remove unselected icon
        if(formData.sex === 'man') {
            shapes.iconMan.container.alpha = shapes.iconMan.container.alpha * -1 + 1.5;
        } else {
            shapes.iconWoman.container.alpha = shapes.iconWoman.container.alpha * -1 + 1.5;
        }
        shapes.step1AfterImage.container.alpha -= 0.25;
        if(++shapes.step1AfterImage.counter > 15) {
            prepareStep2();
        }

// sex icon mask
        if (shapes.sexIconMask.shape.y < 0) {
            shapes.sexIconMask.shape.y += 5;
        }
    };

sceneStep2 = function () {
        var alpha = (Math.cos(textsAlpha) / 8) + 0.95;

// step1 after image
        if (shapes.step1AfterImage.container.alpha > 0) {
            shapes.step1AfterImage.container.alpha -= 0.25;
        }

// "ENTER USERNAME AND ..." text
        if (stepDescArr[1].length > shapes.stepBody.step) {
            shapes.stepBody.container.children[0].text += stepDescArr[1][shapes.stepBody.step++];
        }

// forms
        if (shapes.nameField.step++ < 6 && shapes.nameField.step % 2 === 0) {
            shapes.nameField.container.scaleX = shapes.nameField.container.scaleY = (1 / 6) * shapes.nameField.step;
            shapes.nameField.container.y = shapes.nameField.baseY + Math.random() * 50 * (6 - shapes.nameField.step);
            if (shapes.nameField.step === 6) {
                formField.name.className = 'visible';
                formField.name.focus();
            }
        }
        if (shapes.mailField.step++ < 6 && shapes.mailField.step % 2 === 0) {
            shapes.mailField.container.scaleX = shapes.mailField.container.scaleY = (1 / 6) * shapes.mailField.step;
            shapes.mailField.container.y = shapes.mailField.baseY + Math.random() * 50 * (6 - shapes.mailField.step);
            if (shapes.mailField.step === 6) {
                formField.mail.className = 'visible';
            }
        }
        if (shapes.passwordField.step++ < 6 && shapes.passwordField.step % 2 === 0) {
            shapes.passwordField.container.scaleX = shapes.passwordField.container.scaleY = (1 / 6) * shapes.passwordField.step;
            shapes.passwordField.container.y = shapes.passwordField.baseY + Math.random() * 50 * (6 - shapes.passwordField.step);
            if (shapes.passwordField.step === 6) {
                formField.pass.className = 'visible';
            }
        }
        if (shapes.retypedPasswordField.step++ < 6 && shapes.retypedPasswordField.step % 2 === 0) {
            shapes.retypedPasswordField.container.scaleX = shapes.retypedPasswordField.container.scaleY = (1 / 6) * shapes.retypedPasswordField.step;
            shapes.retypedPasswordField.container.y = shapes.retypedPasswordField.baseY + Math.random() * 50 * (6 - shapes.retypedPasswordField.step);
            if (shapes.retypedPasswordField.step === 6) {
                formField.retypedPass.className = 'visible';
            }
        }
        if (shapes.nextButton.step++ < 6 && shapes.nextButton.step % 2 === 0) {
            shapes.nextButton.container.scaleX = shapes.nextButton.container.scaleY = (1 / 6) * shapes.nextButton.step;
            shapes.nextButton.container.y = shapes.nextButton.baseY + Math.random() * 50 * (6 - shapes.nextButton.step);
        }

// validate indication
        // NAME
        if (formData.nameIsRequired) {
            shapes.nameError.required.alpha = alpha;
            shapes.nameOk.container.alpha = 0;
        } else {
            shapes.nameError.required.alpha = 0;
            shapes.nameOk.container.alpha = alpha;
        }
        // MAIL
        if (formData.mailIsRequired) {
            shapes.mailError.required.alpha = alpha;
        } else {
            shapes.mailError.required.alpha = 0;
        }
        if (formData.mailIsUnknownFormat) {
            shapes.mailError.reformat.alpha = alpha;
        } else {
            shapes.mailError.reformat.alpha = 0;
        }
        if (formData.mailIsRequired || formData.mailIsUnknownFormat) {
            shapes.mailOk.container.alpha = 0;
        } else {
            shapes.mailOk.container.alpha = alpha;
        }

// PASS
        if (formData.passIsRequired) {
            shapes.passError.required.alpha =  alpha;
            shapes.passOk.container.alpha = 0;
        } else {
            shapes.passError.required.alpha = 0;
            shapes.passOk.container.alpha = alpha;
        }
        // PASS(RETYPE)
        if (!formData.retypedPassIsDifferent && formData.retypedPassIsRequired) {
            shapes.retypedPassError.required.alpha = alpha;
        } else {
            shapes.retypedPassError.required.alpha = 0;
        }
        if (formData.retypedPassIsDifferent) {
            shapes.retypedPassError.different.alpha = alpha;
        } else {
            shapes.retypedPassError.different.alpha = 0;
        }
        if (formData.retypedPassIsRequired || formData.retypedPassIsDifferent) {
            shapes.retypedPassOk.container.alpha = 0;
        } else {
            shapes.retypedPassOk.container.alpha = alpha;
        }
    };

sceneAfterStep2 = function () {
        // "OK." text
        if (okDescArr.length > shapes.stepBody.step) {
            shapes.stepBody.container.children[0].text += okDescArr[shapes.stepBody.step++];
        }

// flash after image
        shapes.step2AfterImage.container.alpha = shapes.step2AfterImage.container.alpha * -0.9;
        if(++shapes.step2AfterImage.counter > 15) {
            prepareStep3();
        }
    };

sceneStep3 = function () {
        // text
        if (stepDescArr[2].length > shapes.stepBody.step) {
            shapes.stepBody.container.children[0].text += stepDescArr[2][shapes.stepBody.step++];
        }
        if (formDataArr.name.length > shapes.formValues.step) {
            shapes.formValues.nameText.text += formDataArr.name[shapes.formValues.step];
        }
        if (formDataArr.mail.length > shapes.formValues.step) {
            shapes.formValues.mailText.text += formDataArr.mail[shapes.formValues.step];
        }
        shapes.formValues.step++;

// sex icon mask
        if (shapes.sexIconMask.shape.y < -CANVAS_SIZE.height + 235) {
            shapes.sexIconMask.shape.y += 5;
            shapes.sexIcon.container.alpha = shapes.sexIcon.container.alpha * -1 + 1.8;
        } else {
            shapes.sexIcon.container.alpha = 1;
        }

// back button
        if (shapes.backButton.step++ < 6 && shapes.backButton.step % 2 === 0) {
            shapes.backButton.container.scaleX = shapes.backButton.container.scaleY = (1 / 6) * shapes.backButton.step;
            shapes.backButton.container.y = shapes.backButton.baseY + Math.random() * 50 * (6 - shapes.backButton.step);
        }

// next button
        if (shapes.nextButton.step++ < 6 && shapes.nextButton.step % 2 === 0) {
            shapes.nextButton.container.scaleX = shapes.nextButton.container.scaleY = (1 / 6) * shapes.nextButton.step;
            shapes.nextButton.container.y = shapes.nextButton.baseY + Math.random() * 50 * (6 - shapes.nextButton.step);
        }
    };

sceneAfterStep3 = function () {
        var alpha = (Math.cos(textsAlpha) / 8) + 0.95;

// step3 after image
        if (shapes.step3AfterImage.container.alpha > 0) {
            shapes.step3AfterImage.container.alpha -= 0.1;
        }

// headerLight after image
        if (shapes.headerStepLight.container.alpha > 0) {
            shapes.headerStepLight.container.alpha -= 0.1;
        }

// sending bar
        if(shapes.sendingBar.bar.scaleX < 1) {
            shapes.sendingBar.bar.scaleX += 0.05;
            shapes.sendingText.sending.y += 0.5;
            shapes.sendingText.sending.alpha = alpha;
            shapes.sendingBar.bar.alpha = alpha / 2;
        } else {
            prepareFinish();
        }
    };

sceneFinish = function () {
        var yAdd = (191 - shapes.sendingText.complete.y) * 0.2,
            alpha = 0.9 + (Math.cos(textsAlpha) / 8) * 0.3;

if(shapes.sendingText.sending.alpha > 0) {
            shapes.sendingText.sending.alpha -= 0.2;
            shapes.sendingText.sending.y += yAdd;
        }
        if(shapes.sendingText.complete.y < 190) {
            shapes.sendingText.complete.y += yAdd;
            if(shapes.sendingText.complete.alpha < 1) {
                shapes.sendingText.complete.alpha += 0.1;
            } else {
                shapes.sendingBar.container.alpha = shapes.sendingText.complete.alpha = 1;
                shapes.sendingBar.bar.alpha = 0.5;
            }
        } else if(++shapes.sendingBar.counter < 180) {
            shapes.sendingText.complete.alpha = shapes.sendingBar.container.alpha = alpha;
            shapes.sendingBar.bar.alpha = alpha / 2;
        } else {
            shapes.sendingText.complete.alpha -= 0.2;
            shapes.sendingBar.container.alpha -= 0.2;
            shapes.sendingBar.bar.alpha -= 0.1;
        }

if(shapes.sendingBar.counter > 15) {
            // text
            if (finDescArr.length > shapes.stepBody.step) {
                shapes.stepBody.container.children[0].text += finDescArr[shapes.stepBody.step];
            }

if(++shapes.stepBody.step > 200) {
                prepareQuit();
            }
        }
    };

sceneQuit = function () {
        var scale;

if(shapes.background.container.scaleX > 0) {
            scale = Math.abs(shapes.background.container.scaleX * 0.5);
            shapes.background.container.x = (CANVAS_SIZE.width - CANVAS_SIZE.width * scale) / 2;
            shapes.background.container.y = (CANVAS_SIZE.height - CANVAS_SIZE.height * scale) / 2;
            shapes.background.container.scaleX = scale;
            shapes.background.container.scaleY = scale;
        }
    };

removeLoadingText = function () {
        if (++shapes.loadingText.called >= 2) {
            // remove loading text
            stage.removeChild(shapes.loadingText.container);
        }
    };

removeHtml5 = function () {
        if (++shapes.logoHtml5.called >= 2) {
            shapes.logoHtml5.step = 4;
        }
    };

formKeyUpHandler = function (e) {
        if (e.keyCode === 13) { // ENTERキーが押されたら、NEXTボタンのclickイベントを発火させる
            if (shapes.nextButton && shapes.nextButton.container.onClick) {
                shapes.nextButton.container.onClick();
            } else if (stage.onClick) {
                stage.onClick();
            }
        } else if(e.keyCode === 37 && shapes.iconMan.container.onClick) {
            shapes.iconMan.container.onClick();
        } else if(e.keyCode === 39 && shapes.iconWoman.container.onClick) {
            shapes.iconWoman.container.onClick();
        }
    };

validateFormData = function () {
        formData.nameIsRequired = (formField.name.value === '');
        formData.mailIsRequired = (formField.mail.value === '');
        formData.mailIsUnknownFormat = !formData.mailIsRequired &&
            !(/^([a-z0-9_]|\-|\.|\+)+@(([a-z0-9_]|\-)+\.)+[a-z]{2,6}$/i.test(formField.mail.value));
        formData.passIsRequired = (formField.pass.value === '');
        formData.retypedPassIsRequired = (formField.retypedPass.value === '');
        formData.retypedPassIsDifferent = (formField.retypedPass.value !== formField.pass.value);

return (formData.nameIsRequired ||
            formData.mailIsRequired ||
            formData.mailIsUnknownFormat ||
            formData.passIsRequired ||
            formData.retypedPassIsDifferent);
    };

document.addEventListener('DOMContentLoaded', function () {
        init();
    }, false);
})();

ブリーフィングフォーム forked: 第二回全国統一 HTML5実技コンテストエントリー用コード

サインアップフォームを、コンシューマーゲームで見かけるブリーフィング画面をイメージして仕上げました。「**漢（おとこ）がときめくUX**」がテーマですｗ ## 操作方法 * クリック操作とキーボード操作に対応しています。 * キーボードの場合はEnterキー押下で次のシーンに進みます。（性別選択画面だけは「←」「→」のどちらかのキーを押してください） ## 動作確認済 * 最新版のGoogle Chrome (ver.23) ## HTML5ロゴのライセンス情報 The HTML5 Logo is licensed under Creative Commons Attribution 3.0 Unported by the W3C.(function () { 'use strict'; var // private variable canvas, stage, loadImages1 = [ {id: 'html5', src: '/assets/w/5/B/9/w5B9F.png'}, {id: 'shadow', src: '/assets/y/5/W/6/y5W6d.png'} ], loadImages2 = [ {id: 'man', src: '/assets/o/c/z/T/oczTN.png'}, {id: 'woman', src: '/assets/r/j/k/o/rjkoS.png'} ], shapes = {}, loadingTextArr = [], stepTitleArr = [], introTitleArr = [], introDescArr = [], stepDescArr = [], okDescArr = ['O', 'K', '.'], textsAlpha = 0, formField = { name: document.getElementById('nameField'), mail: document.getElementById('mailField'), pass: document.getElementById('passwordField'), retypedPass: document.getElementById('retypedPasswordField') }, formData = { sex: 'man', name: undefined, mail: undefined, password: undefined, nameIsRequired: false, mailIsRequired: false, mailIsUnknownFormat: false, passIsRequired: false, retypedPassIsRequired: false, retypedPassIsDifferent: false }, formDataArr = { name: [], mail: [] }, finDescArr = [], // private variable(FIXED) LOADING_TEXT = 'LOADING', STEP_TITLE = ['CHOOSE SEX', 'NAME,MAIL,PASS', 'CONFIRM'], INTRO_TITLE = 'SIGN UP PROCESS', INTRO_DESC = [ 'CHOOSE SEX.', 'ENTER USERNAME, MAIL ADDRESS \nAND PASSWORD.', 'CONFIRM YOUR INFORMATION.'], STEP_DESC = [ 'CHOOSE SEX.\n(CLICK THE ICON EITHER OR PRESS THE LEFT\n OR RIGHT KEY.)', 'ENTER USERNAME, MAIL ADDRESS AND \nPASSWORD.', 'CONFIRM YOUR INFORMATION.'], FIN_DESC = 'REGISTRATION IS COMPLETED.\nWELCOME ', STEP2_ERROR = 'THERE ARE ERRORS. CHECK THE VALUES.', CANVAS_SIZE = { width: 450, height: 450 }, // function name load, startLoadingAnime, loadCompleteHandler, prepareStep1, prepareStep2, prepareStep3, prepareFinish, prepareQuit, sceneFnc = function () {}, tick, afterStep1, afterStep2, afterStep3, sceneCommon, sceneLoading, sceneLoadComplete, sceneStep1, sceneStep2, sceneStep3, sceneAfterStep1, sceneAfterStep2, sceneAfterStep3, sceneFinish, sceneQuit, removeLoadingText, removeHtml5, formKeyUpHandler, validateFormData, init; init = function () { var i, len, loader; // make CreateJS settings canvas = document.getElementById('form'); stage = new createjs.Stage(canvas); createjs.Ticker.setFPS(30); createjs.Ticker.addListener(tick); // adjust size canvas.width = CANVAS_SIZE.width; canvas.height = CANVAS_SIZE.height; // setup message arr for(len = LOADING_TEXT.length, i = 0; i < len; i++) { loadingTextArr.push(LOADING_TEXT.substr(i, 1)); } // set formField validator formField.name.addEventListener('input', validateFormData, false); formField.mail.addEventListener('input', validateFormData, false); formField.pass.addEventListener('input', validateFormData, false); formField.retypedPass.addEventListener('input', validateFormData, false); // set enter key control document.addEventListener('keyup', formKeyUpHandler, false); // show loading animation loader = new createjs.PreloadJS(); loader.onComplete = startLoadingAnime; loader.loadManifest(loadImages1); }; startLoadingAnime = function () { var i, len, g, t, bitmap, gx, gy; // draw background rect g = new createjs.Graphics(); g.beginFill(createjs.Graphics.getRGB(0, 0, 0)); g.drawRect(0, 0, CANVAS_SIZE.width, CANVAS_SIZE.height); g.endFill(); stage.addChild(new createjs.Shape(g)); g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 0.1)); g.beginFill(createjs.Graphics.getRGB(0, 36, 81)); g.drawRect(-1, -1, CANVAS_SIZE.width + 2, CANVAS_SIZE.height + 2); g.endStroke(); g.endFill(); shapes.background = { container: new createjs.Container(), step: 1 }; shapes.background.container.addChild(new createjs.Shape(g)); shapes.background.container.alpha = 0; stage.addChild(shapes.background.container); // draw validation error background g = new createjs.Graphics(); g.beginFill(createjs.Graphics.getRGB(200, 0, 0)); g.drawRect(0, 0, CANVAS_SIZE.width, CANVAS_SIZE.height); g.endFill(); shapes.errorBackground = { container: new createjs.Container(), alpha: 0 }; shapes.errorBackground.container.addChild(new createjs.Shape(g)); shapes.errorBackground.container.alpha = 0; stage.addChild(shapes.errorBackground.container); // draw lines gx = new createjs.Graphics(); gy = new createjs.Graphics(); gx.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 0.1)); gy.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 0.1)); for(len = CANVAS_SIZE.width / 25, i = 0; i < len; i++) { // horizontal line gx.moveTo(0, i * 25); gx.lineTo(CANVAS_SIZE.width, i * 25); // vertical line gy.moveTo(i * 25, 0); gy.lineTo(i * 25, CANVAS_SIZE.height); } gx.endStroke(); gy.endStroke(); shapes.backgroundLinesX = { container: new createjs.Container(), counter: 0 }; shapes.backgroundLinesX.container.addChild(new createjs.Shape(gx)); shapes.backgroundLinesY = { container: new createjs.Container(), counter: 0 }; shapes.backgroundLinesY.container.addChild(new createjs.Shape(gy)); g = new createjs.Graphics(); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 1)); g.drawRect(0, 0, CANVAS_SIZE.width, CANVAS_SIZE.height); g.endFill(); shapes.backgroundMaskX = { shape: new createjs.Shape(g) }; shapes.backgroundMaskY = { shape: new createjs.Shape(g) }; shapes.backgroundLinesX.container.mask = shapes.backgroundMaskX.shape; shapes.backgroundLinesY.container.mask = shapes.backgroundMaskY.shape; shapes.backgroundLinesX.container.alpha = 0; shapes.backgroundLinesY.container.alpha = 0; shapes.backgroundMaskX.shape.x = -CANVAS_SIZE.width; shapes.backgroundMaskY.shape.y = -CANVAS_SIZE.height; shapes.backgroundMaskX.shape.alpha = 0; shapes.backgroundMaskY.shape.alpha = 0; stage.addChild(shapes.backgroundLinesX.container); stage.addChild(shapes.backgroundLinesY.container); // "Loading" message t = new createjs.Text('', '15px Courier', '#FFFFFF'); t.textAlign = 'LEFT'; t.x = 15; t.y = 15; shapes.loadingText = { container: new createjs.Container(), counter: 0, called: 0, step: 0 }; shapes.loadingText.container.addChild(t); stage.addChild(shapes.loadingText.container); // draw HTML5 logo bitmap = new createjs.Bitmap(loadImages1[0].src); shapes.logoHtml5 = { container: new createjs.Container(), width: 141, height: 197, gap: -30, counter: 0, called: 0, baseY: (CANVAS_SIZE.height / 2) - 100, step: 1 }; shapes.logoHtml5.container.alpha = 0; shapes.logoHtml5.container.x = (CANVAS_SIZE.width / 2) - (shapes.logoHtml5.width / 2); shapes.logoHtml5.container.y = shapes.logoHtml5.baseY; shapes.logoHtml5.container.addChild(bitmap); stage.addChild(shapes.logoHtml5.container); // draw scan line g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(100, 255, 255, 0.5)); g.moveTo(0, 0); g.lineTo(CANVAS_SIZE.width, 0); g.endStroke(); shapes.scanLine = { container: new createjs.Container() }; shapes.scanLine.container.addChild(new createjs.Shape(g)); stage.addChild(shapes.scanLine.container); // draw shadow bitmap = new createjs.Bitmap(loadImages1[1].src); shapes.shadow = { container: new createjs.Container(), width: CANVAS_SIZE.width, height: CANVAS_SIZE.height, step: 1 }; shapes.shadow.container.alpha = 0.8; shapes.shadow.container.width = CANVAS_SIZE.width; shapes.shadow.container.height = CANVAS_SIZE.height; shapes.shadow.container.addChild(bitmap); stage.addChild(shapes.shadow.container); // start animation sceneFnc = function () { sceneCommon(); sceneLoading(); }; // load images load(); }; load = function () { var loader; loader = new createjs.PreloadJS(); loader.onComplete = loadCompleteHandler; loader.loadManifest(loadImages2); }; loadCompleteHandler = function () { var i, j, len, shape, g, t; // remove loading message removeLoadingText(); // remove html5 logo removeHtml5(); // draw step numbers to header shapes.headerStep = []; for(i = 0; i < 3; i++) { stepTitleArr[i] = []; for(len = STEP_TITLE[i].length, j = 0; j < len; j++) { stepTitleArr[i].push(STEP_TITLE[i].substr(j, 1)); } } for(i = 1; i <= 3; i++) { shape = { container: new createjs.Container(), background: new createjs.Container(), counter: 0, step: 0 }; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); g.drawRect(CANVAS_SIZE.width / 3 * (i - 1), - 1, CANVAS_SIZE.width / 3, 50); g.endStroke(); shape.container.addChild(new createjs.Shape(g)); t = new createjs.Text('0' + i + '\n', '15px Courier', '#FFFFFF'); t.lineHeight = 17; t.textAlign = 'LEFT'; t.x = CANVAS_SIZE.width / 3 * (i - 1) + 10; t.y = 7; shape.container.alpha = 0; shape.container.addChild(t); stage.addChild(shape.container); g = new createjs.Graphics(); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.3)); g.drawRect(CANVAS_SIZE.width / 3 * (i - 1), -1, CANVAS_SIZE.width / 3, 50); g.endFill(); shape.background.addChild(new createjs.Shape(g)); shape.background.alpha = 0; stage.addChild(shape.background); shapes.headerStep.push(shape); } // draw introductions for(i = 0; i < 3; i++) { // intro description introDescArr[i] = []; for(len = INTRO_DESC[i].length, j = 0; j < len; j++) { introDescArr[i].push(INTRO_DESC[i].substr(j, 1)); } // step description stepDescArr[i] = []; for(len = STEP_DESC[i].length, j = 0; j < len; j++) { stepDescArr[i].push(STEP_DESC[i].substr(j, 1)); } } for(len = INTRO_TITLE.length, i = 0; i < len; i++) { introTitleArr.push(INTRO_TITLE.substr(i, 1)); } shapes.introBorder = { container: new createjs.Container(), counter: 0 }; shapes.introBorder.container.alpha = 0; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); g.drawRect(25, 75, 400, 275); g.endStroke(); shapes.introBorder.container.addChild(new createjs.Shape(g)); stage.addChild(shapes.introBorder.container); shapes.introTitle = { container: new createjs.Container(), step: 0 }; t = new createjs.Text('', '20px Courier', '#FFFFFF'); t.textAlign = 'CENTER'; shapes.introTitle.container.addChild(t); shapes.introTitle.container.x = 135; shapes.introTitle.container.y = 90; stage.addChild(shapes.introTitle.container); shapes.intro = []; for(i = 1; i <= 3; i++) { shape = { container: new createjs.Container(), background: new createjs.Container(), counter: 0, step: 0 }; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); g.drawCircle(64, 90 + (i * 70), 20); g.endStroke(); shape.container.addChild(new createjs.Shape(g)); shape.container.alpha = 0; t = new createjs.Text('0' + i, '15px Courier', '#FFFFFF'); t.textAlign = 'LEFT'; t.x = CANVAS_SIZE.width / 7 - 9; t.y = 86 + (i * 70); shape.container.addChild(t); t = new createjs.Text('STEP', '10px Courier', '#FFFFFF'); t.textAlign = 'LEFT'; t.x = CANVAS_SIZE.width / 7 - 11; t.y = 77 + (i * 70); shape.container.addChild(t); t = new createjs.Text('', '15px Courier', '#FFFFFF'); t.textAlign = 'LEFT'; t.lineHeight = 20; t.x = CANVAS_SIZE.width / 7 + 30; t.y = 72 + (i * 70); shape.container.addChild(t); stage.addChild(shape.container); g = new createjs.Graphics(); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.3)); g.drawCircle(64, 90 + (i * 70), 20); g.endStroke(); shape.background.addChild(new createjs.Shape(g)); shape.background.alpha = 0; stage.addChild(shape.background); shapes.intro.push(shape); } // draw next button shapes.nextButton = { container: new createjs.Container(), width: 100, height: 25, gap: 48, counter: 0, baseY: 375, step: 1 }; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.3)); g.drawRect(0, 0, 100, 25); g.endStroke(); g.endFill(); shapes.nextButton.container.addChild(new createjs.Shape(g)); t = new createjs.Text('>> NEXT', '17px Courier', '#FFFFFF'); t.textAlign = 'CENTER'; t.x = 15; t.y = 2; shapes.nextButton.container.addChild(t); shapes.nextButton.container.x = 325; shapes.nextButton.container.y = 375; shapes.nextButton.container.alpha = 0; stage.addChild(shapes.nextButton.container); // set scan line z-index stage.removeChild(shapes.scanLine.container); stage.addChild(shapes.scanLine.container); // set shade z-index stage.removeChild(shapes.shadow.container); stage.addChild(shapes.shadow.container); }; prepareStep1 = function () { var i, bitmap, t, g; // remove parts if (shapes.sexIcon) { stage.removeChild(shapes.sexIcon.container); stage.removeChild(shapes.formValues.container); stage.removeChild(shapes.backButton.container); stage.removeChild(shapes.stepBody.container); stage.removeChild(shapes.stepBodyBorder.container); stage.removeChild(shapes.closeHead.container); shapes.sexIcon = undefined; } // remove registered event stage.onClick = undefined; // remove introduction for(i = 0; i < 3; i++) { stage.removeChild(shapes.intro[i].container); } stage.removeChild(shapes.introTitle.container); stage.removeChild(shapes.introBorder.container); stage.removeChild(shapes.nextButton.container); // draw sex icons bitmap = new createjs.Bitmap(loadImages2[0].src); shapes.iconMan = { container: new createjs.Container(), width: 98, height: 235, gap: -10, counter: 0, baseY: 85, step: 1 }; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.2)); g.drawRect(-18, -10, 134, 255); g.endStroke(); g.endFill(); shapes.iconMan.container.addChild(new createjs.Shape(g)); shapes.iconMan.container.x = (CANVAS_SIZE.width / 2) - (shapes.iconMan.width / 2) - 90; shapes.iconMan.container.y = shapes.iconMan.baseY + shapes.iconMan.gap; shapes.iconMan.container.addChild(bitmap); shapes.iconMan.container.scaleX = 0.2; shapes.iconMan.container.scaleY = 4; shapes.iconMan.container.alpha = 0.8; stage.addChild(shapes.iconMan.container); bitmap = new createjs.Bitmap(loadImages2[1].src); shapes.iconWoman = { container: new createjs.Container(), width: 114, height: 235, gap: 48, counter: 0, baseY: 85, step: 1 }; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.2)); g.drawRect(-10, -10, 134, 255); g.endStroke(); g.endFill(); shapes.iconWoman.container.addChild(new createjs.Shape(g)); shapes.iconWoman.container.x = (CANVAS_SIZE.width / 2) - (shapes.iconWoman.width / 2) + 90; shapes.iconWoman.container.y = shapes.iconWoman.baseY + shapes.iconWoman.gap; shapes.iconWoman.container.scaleX = 0.1; shapes.iconWoman.container.scaleY = 0.5; shapes.iconWoman.container.alpha = 0.8; shapes.iconWoman.container.addChild(bitmap); stage.addChild(shapes.iconWoman.container); g = new createjs.Graphics(); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 1)); g.drawRect(0, 0, CANVAS_SIZE.width, CANVAS_SIZE.height); g.endFill(); shapes.sexIconMask = { shape: new createjs.Shape(g) }; shapes.iconMan.container.children[1].mask = shapes.sexIconMask.shape; shapes.iconWoman.container.children[1].mask = shapes.sexIconMask.shape; shapes.sexIconMask.shape.y = -CANVAS_SIZE.height; // draw message shapes.stepBodyBorder = { container: new createjs.Container() }; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); g.drawRect(25, 350, 400, 75); g.endStroke(); shapes.stepBodyBorder.container.addChild(new createjs.Shape(g)); stage.addChild(shapes.stepBodyBorder.container); shapes.stepBody = { container: new createjs.Container(), counter: 0, step: 0 }; t = new createjs.Text('', '15px Courier', '#FFFFFF'); t.textAlign = 'CENTER'; t.lineHeight = 20; shapes.stepBody.container.addChild(t); shapes.stepBody.container.x = 40; shapes.stepBody.container.y = 360; stage.addChild(shapes.stepBody.container); // highlight header step number shapes.headerStep[0].background.alpha = 1; shapes.headerStep[1].background.alpha = 0; shapes.headerStep[2].background.alpha = 0; // set scan line z-index stage.removeChild(shapes.scanLine.container); stage.addChild(shapes.scanLine.container); // set shade z-index stage.removeChild(shapes.shadow.container); stage.addChild(shapes.shadow.container); // start next animation sceneFnc = function () { sceneCommon(); sceneStep1(); }; // register event shapes.iconMan.container.onClick = function () { formData.sex = 'man'; afterStep1(); }; shapes.iconWoman.container.onClick = function () { formData.sex = 'woman'; afterStep1(); }; }; afterStep1 = function () { var g; // draw before step after image shapes.step1AfterImage = { container: new createjs.Container(), counter: 0 }; g = new createjs.Graphics(); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.5)); if(formData.sex === 'man') { // draw woman silhouette g.drawRect(shapes.iconWoman.container.x - 18, shapes.iconWoman.container.y - 10, 134, 255); // remove woman icon shapes.iconWoman.container.alpha = 0; // raise alpha of man icon shapes.iconMan.container.alpha = 1; } else { // draw man silhouette g.drawRect(shapes.iconMan.container.x - 10, shapes.iconMan.container.y - 10, 134, 255); // remove man icon shapes.iconMan.container.alpha = 0; // raise alpha of woman icon shapes.iconWoman.container.alpha = 1; } g.endFill(); shapes.step1AfterImage.container.addChild(new createjs.Shape(g)); stage.addChild(shapes.step1AfterImage.container); // clear description shapes.stepBody.step = 0; shapes.stepBody.container.children[0].text = ''; // start next animation sceneFnc = function () { sceneCommon(); sceneAfterStep1(); }; }; prepareStep2 = function () { var t, g, i, len; // remove sex icons from stage stage.removeChild(shapes.iconMan.container); stage.removeChild(shapes.iconWoman.container); stage.removeChild(shapes.step1AfterImage.container); // remove event shapes.iconMan.container.onClick = undefined; shapes.iconWoman.container.onClick = undefined; // draw text field of NAME shapes.nameField = { container: new createjs.Container(), width: 200, height: 25, gap: 48, counter: 0, baseY: 0, step: 1 }; t = new createjs.Text('NAME', '17px Courier', '#FFFFFF'); t.textAlign = 'RIGHT'; t.x = 50; t.y = 75; shapes.nameField.container.addChild(t); stage.addChild(shapes.nameField.container); shapes.nameFieldRect = { shape: new createjs.Shape() }; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.1)); g.drawRect(100, 75, 200, 25); g.endStroke(); g.endFill(); shapes.nameFieldRect.shape = new createjs.Shape(g); shapes.nameField.container.addChild(shapes.nameFieldRect.shape); // draw text field of MAIL shapes.mailField = { container: new createjs.Container(), width: 200, height: 25, gap: 48, counter: 0, baseY: 0, step: 1 }; t = new createjs.Text('MAIL', '17px Courier', '#FFFFFF'); t.textAlign = 'RIGHT'; t.x = 50; t.y = 125; shapes.mailField.container.addChild(t); stage.addChild(shapes.mailField.container); shapes.mailFieldRect = { shape: new createjs.Shape() }; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.1)); g.drawRect(100, 125, 200, 25); g.endStroke(); g.endFill(); shapes.mailFieldRect.shape = new createjs.Shape(g); shapes.mailField.container.addChild(shapes.mailFieldRect.shape); // draw text field of PASSWORD shapes.passwordField = { container: new createjs.Container(), width: 200, height: 25, gap: 48, counter: 0, baseY: 0, step: 1 }; t = new createjs.Text('PASS', '17px Courier', '#FFFFFF'); t.textAlign = 'RIGHT'; t.x = 50; t.y = 175; shapes.passwordField.container.addChild(t); stage.addChild(shapes.passwordField.container); shapes.passwordFieldRect = { shape: new createjs.Shape() }; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.1)); g.drawRect(100, 175, 175, 25); g.endStroke(); g.endFill(); shapes.passwordFieldRect.shape = new createjs.Shape(g); shapes.passwordField.container.addChild(shapes.passwordFieldRect.shape); // draw text field of RETYPED PASSWORD shapes.retypedPasswordField = { container: new createjs.Container(), width: 200, height: 25, gap: 48, counter: 0, baseY: 0, step: 1 }; t = new createjs.Text('PASS', '17px Courier', '#FFFFFF'); t.textAlign = 'RIGHT'; t.x = 50; t.y = 225; shapes.retypedPasswordField.container.addChild(t); t = new createjs.Text('(RETYPE)', '15px Courier', '#FFFFFF'); t.textAlign = 'RIGHT'; t.x = 20; t.y = 250; shapes.retypedPasswordField.container.addChild(t); stage.addChild(shapes.retypedPasswordField.container); shapes.retypedPasswordFieldRect = { shape: new createjs.Shape() }; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.1)); g.drawRect(100, 225, 175, 25); g.endStroke(); g.endFill(); shapes.retypedPasswordFieldRect.shape = new createjs.Shape(g); shapes.retypedPasswordField.container.addChild(shapes.retypedPasswordFieldRect.shape); // draw next button shapes.nextButton.container.x = 300; shapes.nextButton.container.y = 310; shapes.nextButton.baseY = 310; shapes.nextButton.step = 1; shapes.nextButton.counter = 0; stage.addChild(shapes.nextButton.container); // highlight header step number shapes.headerStep[0].background.alpha = 0; shapes.headerStep[1].background.alpha = 1; shapes.headerStep[2].background.alpha = 0; // close past header step number shapes.closeHead = { container: new createjs.Container() }; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); g.moveTo(CANVAS_SIZE.width / 3, 0); g.lineTo(0, 50); g.moveTo(CANVAS_SIZE.width / 3, 50); g.lineTo(0, 0); g.endStroke(); shapes.closeHead.container.addChild(new createjs.Shape(g)); stage.addChild(shapes.closeHead.container); // clear description shapes.stepBody.step = 0; shapes.stepBody.container.children[0].text = ''; // prepare NAME validation error indication shapes.nameError = { required: new createjs.Container() }; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(0, 0, 0, 1)); g.setStrokeStyle(2); g.beginFill(createjs.Graphics.getRGB(255, 0, 0, 0.3)); g.drawRect(0, 0, 75, 25); g.endStroke(); g.endFill(); shapes.nameError.required.addChild(new createjs.Shape(g)); t = new createjs.Text('REQUIRED', '12px Courier', '#FFFFFF'); t.textAlign = 'CENTER'; t.x = 10; t.y = 5; t.width = 75; shapes.nameError.required.addChild(t); shapes.nameError.required.x = 325; shapes.nameError.required.y = 75; shapes.nameError.required.alpha = 0; stage.addChild(shapes.nameError.required); // prepare MAIL validation error indication shapes.mailError = { required: shapes.nameError.required.clone(true), reformat: new createjs.Container() }; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(0, 0, 0, 1)); g.setStrokeStyle(2); g.beginFill(createjs.Graphics.getRGB(255, 0, 0, 0.3)); g.drawRect(0, 0, 100, 25); g.endStroke(); g.endFill(); shapes.mailError.reformat.addChild(new createjs.Shape(g)); t = new createjs.Text('WRONG FORMAT', '12px Courier', '#FFFFFF'); t.textAlign = 'CENTER'; t.x = 8; t.y = 5; t.width = 100; shapes.mailError.reformat.addChild(t); shapes.mailError.required.x = shapes.mailError.reformat.x = 325; shapes.mailError.required.y = shapes.mailError.reformat.y = 125; shapes.mailError.required.alpha = shapes.mailError.reformat.alpha = 0; stage.addChild(shapes.mailError.required); stage.addChild(shapes.mailError.reformat); // prepare PASS validation error indication shapes.passError = { required: shapes.nameError.required.clone(true) }; shapes.passError.required.x = 325; shapes.passError.required.y = 175; shapes.passError.required.alpha = 0; stage.addChild(shapes.passError.required); // prepare PASS(RETYPE) validation error indication shapes.retypedPassError = { required: shapes.nameError.required.clone(true), different: new createjs.Container() }; shapes.retypedPassError.required.x = 325; shapes.retypedPassError.required.y = 225; shapes.retypedPassError.required.alpha = 0; stage.addChild(shapes.retypedPassError.required); g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(0, 0, 0, 1)); g.setStrokeStyle(2); g.beginFill(createjs.Graphics.getRGB(255, 0, 0, 0.3)); g.drawRect(0, 0, 125, 25); g.endStroke(); g.endFill(); shapes.retypedPassError.different.addChild(new createjs.Shape(g)); t = new createjs.Text('DIFFER FROM PASS', '12px Courier', '#FFFFFF'); t.textAlign = 'CENTER'; t.x = 5; t.y = 5; shapes.retypedPassError.different.addChild(t); shapes.retypedPassError.different.x = 300; shapes.retypedPassError.different.y = 225; shapes.retypedPassError.different.alpha = 0; stage.addChild(shapes.retypedPassError.different); // prepare NAME validation clear indication shapes.nameOk = { container: new createjs.Container() }; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(0, 0, 0, 1)); g.setStrokeStyle(2); g.beginFill(createjs.Graphics.getRGB(0, 200, 50, 0.3)); g.drawRect(0, 0, 75, 25); g.endStroke(); g.endFill(); shapes.nameOk.container.addChild(new createjs.Shape(g)); t = new createjs.Text('OK', '12px Courier', '#FFFFFF'); t.textAlign = 'CENTER'; t.x = 30; t.y = 5; shapes.nameOk.container.addChild(t); shapes.nameOk.container.x = 325; shapes.nameOk.container.y = 75; shapes.nameOk.container.alpha = 0; stage.addChild(shapes.nameOk.container); // prepare MAIL validation clear indication shapes.mailOk = { container: shapes.nameOk.container.clone(true) }; shapes.mailOk.container.x = 325; shapes.mailOk.container.y = 125; shapes.mailOk.container.alpha = 0; stage.addChild(shapes.mailOk.container); // prepare PASS validation clear indication shapes.passOk = { container: shapes.nameOk.container.clone(true) }; shapes.passOk.container.x = 325; shapes.passOk.container.y = 175; shapes.passOk.container.alpha = 0; stage.addChild(shapes.passOk.container); // prepare PASS(RETYPE) validation clear indication shapes.retypedPassOk = { container: shapes.nameOk.container.clone(true) }; shapes.retypedPassOk.container.x = 325; shapes.retypedPassOk.container.y = 225; shapes.retypedPassOk.container.alpha = 0; stage.addChild(shapes.retypedPassOk.container); // execute validation validateFormData(); // re-build step desc stepDescArr[1] = []; for(len = STEP_DESC[1].length, i = 0; i < len; i++) { stepDescArr[1].push(STEP_DESC[1].substr(i, 1)); } // set scan line z-index stage.removeChild(shapes.scanLine.container); stage.addChild(shapes.scanLine.container); // set shade z-index stage.removeChild(shapes.shadow.container); stage.addChild(shapes.shadow.container); // start next animation sceneFnc = function () { sceneCommon(); sceneStep2(); }; // register event shapes.nextButton.container.onClick = function () { // save inputed values formData.name = formField.name.value; formData.mail = formField.mail.value; formData.pass = formField.pass.value; // validation if (validateFormData()) { // build error message stepDescArr[1] = []; for(len = STEP2_ERROR.length, i = 0; i < len; i++) { stepDescArr[1].push(STEP2_ERROR.substr(i, 1)); } // set error background shapes.errorBackground.alpha = 0.8; // clear description shapes.stepBody.step = 0; shapes.stepBody.container.children[0].text = ''; return; } // go to next scene afterStep2(); }; }; afterStep2 = function () { var g; // remove labels from stage stage.removeChild(shapes.nameField.container); stage.removeChild(shapes.mailField.container); stage.removeChild(shapes.passwordField.container); stage.removeChild(shapes.retypedPasswordField.container); shapes.nameOk.container.alpha = 0; shapes.mailOk.container.alpha = 0; shapes.passOk.container.alpha = 0; shapes.retypedPassOk.container.alpha = 0; // draw before step after image shapes.step2AfterImage = { container: new createjs.Container(), counter: 0 }; g = new createjs.Graphics(); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.5)); g.drawRect(100, 75, 200, 25); g.drawRect(100, 125, 200, 25); g.drawRect(100, 175, 175, 25); g.drawRect(100, 225, 175, 25); g.endFill(); shapes.step2AfterImage.container.addChild(new createjs.Shape(g)); stage.addChild(shapes.step2AfterImage.container); // clear description shapes.stepBody.step = 0; shapes.stepBody.container.children[0].text = ''; // start next animation sceneFnc = function () { sceneCommon(); sceneAfterStep2(); }; }; prepareStep3 = function () { var t, g, i, len; // remove input forms from stage formField.name.className = ''; formField.mail.className = ''; formField.pass.className = ''; formField.retypedPass.className = ''; stage.removeChild(shapes.step2AfterImage.container); // draw sex icon shapes.sexIcon = { container: undefined }; if (formData.sex === 'man') { shapes.sexIcon.container = shapes.iconMan.container; } else { shapes.sexIcon.container = shapes.iconWoman.container; } shapes.sexIcon.container.x = 40; shapes.sexIcon.container.y = 85; shapes.sexIcon.container.onClick = undefined; stage.addChild(shapes.sexIcon.container); shapes.sexIconMask.shape.y = -CANVAS_SIZE.height; // draw form data formDataArr = { name: [], mail: [] }; for(len = formData.name.length, i = 0; i < len; i++) { formDataArr.name.push(formData.name.substr(i, 1)); } for(len = formData.mail.length, i = 0; i < len; i++) { formDataArr.mail.push(formData.mail.substr(i, 1)); } shapes.formValues = { container: new createjs.Container(), nameText: new createjs.Text('NAME: ', '15px Courier', '#FFFFFF'), mailText: new createjs.Text('MAIL: ', '15px Courier', '#FFFFFF'), counter: 0, step: 0 }; shapes.formValues.nameText.lineHeight = 20; shapes.formValues.nameText.x = 75; shapes.formValues.nameText.y = -20; shapes.formValues.container.addChild(shapes.formValues.nameText); shapes.formValues.mailText.lineHeight = 20; shapes.formValues.mailText.x = 75; shapes.formValues.mailText.y = 30; shapes.formValues.container.addChild(shapes.formValues.mailText); g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); // draw underline for name field g.moveTo(0, 25); g.lineTo(25, 0); g.lineTo(325, 0); // draw underline for mail field g.moveTo(25, 75); g.lineTo(50, 50); g.lineTo(325, 50); g.endStroke(); shapes.formValues.container.addChild(new createjs.Shape(g)); stage.addChild(shapes.formValues.container); shapes.formValues.container.x = 100; shapes.formValues.container.y = 125; stage.addChild(shapes.formValues.container); // draw back button shapes.backButton = { container: new createjs.Container(), width: 100, height: 25, gap: 48, counter: 0, baseY: 310, step: 1 }; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.3)); g.drawRect(0, 0, 100, 25); g.endStroke(); g.endFill(); shapes.backButton.container.addChild(new createjs.Shape(g)); t = new createjs.Text('BACK <<', '17px Courier', '#FFFFFF'); t.textAlign = 'CENTER'; t.x = 15; t.y = 2; shapes.backButton.container.addChild(t); shapes.backButton.container.x = 185; shapes.backButton.container.y = 310; shapes.backButton.container.alpha = 1; stage.addChild(shapes.backButton.container); // highlight header step number shapes.headerStep[0].background.alpha = 0; shapes.headerStep[1].background.alpha = 0; shapes.headerStep[2].background.alpha = 1; // close past header step number g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); g.moveTo(CANVAS_SIZE.width / 3 * 2, 0); g.lineTo(CANVAS_SIZE.width / 3, 50); g.moveTo(CANVAS_SIZE.width / 3 * 2, 50); g.lineTo(CANVAS_SIZE.width / 3, 0); g.endStroke(); shapes.closeHead.container.addChild(new createjs.Shape(g)); // clear description shapes.stepBody.step = 0; shapes.stepBody.container.children[0].text = ''; // set scan line z-index stage.removeChild(shapes.scanLine.container); stage.addChild(shapes.scanLine.container); // set shade z-index stage.removeChild(shapes.shadow.container); stage.addChild(shapes.shadow.container); // start next animation sceneFnc = function () { sceneCommon(); sceneStep3(); }; // register event shapes.backButton.container.onClick = prepareStep1; shapes.nextButton.container.onClick = function () { afterStep3(); }; }; afterStep3 = function () { var g, t; // remove parts from screen. stage.removeChild(shapes.formValues.container); stage.removeChild(shapes.sexIcon.container); stage.removeChild(shapes.nextButton.container); stage.removeChild(shapes.backButton.container); stage.removeChild(shapes.step2AfterImage.container); // draw before step after image shapes.step3AfterImage = { container: new createjs.Container() }; g = new createjs.Graphics(); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.5)); g.drawRect(22, 75, 134, 255); g.endFill(); shapes.step3AfterImage.container.addChild(new createjs.Shape(g)); stage.addChild(shapes.step3AfterImage.container); // draw highlight shapes.headerStepLight = { container: new createjs.Container() }; g = new createjs.Graphics(); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.5)); g.drawRect(0, 0, CANVAS_SIZE.width, 50); shapes.headerStepLight.container.addChild(new createjs.Shape(g)); stage.addChild(shapes.headerStepLight.container); // highlight header step number shapes.headerStep[0].background.alpha = 0; shapes.headerStep[1].background.alpha = 0; shapes.headerStep[2].background.alpha = 0; // hide closeHead stage.removeChild(shapes.closeHead.container); stage.removeChild(shapes.headerStep[0].container); stage.removeChild(shapes.headerStep[1].container); stage.removeChild(shapes.headerStep[2].container); // draw uploading bar shapes.sendingBar = { container: new createjs.Container(), bar: new createjs.Container(), counter: 0 }; g = new createjs.Graphics(); g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); g.drawRect(0, 0, 200, 25); g.endStroke(); shapes.sendingBar.container.addChild(new createjs.Shape(g)); g = new createjs.Graphics(); g.beginFill(createjs.Graphics.getRGB(255, 255, 255, 0.5)); g.drawRect(1, 1, 198, 23); g.endFill(); shapes.sendingBar.bar.addChild(new createjs.Shape(g)); shapes.sendingBar.container.addChild(shapes.sendingBar.bar); shapes.sendingBar.bar.x = 0; shapes.sendingBar.bar.y = 0; shapes.sendingBar.bar.scaleX = 0; stage.addChild(shapes.sendingBar.container); shapes.sendingBar.container.x = CANVAS_SIZE.width / 2 - 100; shapes.sendingBar.container.y = 225; // "SENDING..." text t = new createjs.Text(' SENDING...', '15px Courier', '#FFFFFF'); shapes.sendingText = { sending: new createjs.Container(), complete: new createjs.Container() }; shapes.sendingText.sending.addChild(t); stage.addChild(shapes.sendingText.sending); shapes.sendingText.sending.x = 180; shapes.sendingText.sending.y = 170; shapes.sendingText.sending.alpha = 0; t = new createjs.Text(' COMPLETE ', '15px Courier', '#FFFFFF'); shapes.sendingText.complete.addChild(t); stage.addChild(shapes.sendingText.complete); shapes.sendingText.complete.x = 180; shapes.sendingText.complete.y = 160; shapes.sendingText.complete.alpha = 0; // clear description shapes.stepBody.step = 0; shapes.stepBody.container.children[0].text = ''; // start next animation sceneFnc = function () { sceneCommon(); sceneAfterStep3(); }; }; prepareFinish = function () { var g, i, len; // remove registered event stage.onClick = undefined; shapes.nextButton.container.onClick = undefined; // // close past header step number // g = new createjs.Graphics(); // g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1)); // g.moveTo(CANVAS_SIZE.width / 3 * 2, 0); // g.lineTo(CANVAS_SIZE.width, 50); // g.moveTo(CANVAS_SIZE.width / 3 * 2, 50); // g.lineTo(CANVAS_SIZE.width, 0); // g.endStroke(); // shapes.closeHead.container.addChild(new createjs.Shape(g)); // prepare finish description for(len = FIN_DESC.length, i = 0; i < len; i++) { finDescArr.push(FIN_DESC.substr(i, 1)); } for(len = formData.name.length, i = 0; i < len; i++) { finDescArr.push(formData.name.substr(i, 1)); } finDescArr.push('.'); // clear description shapes.stepBody.step = 0; shapes.stepBody.container.children[0].text = ''; // // set scan line z-index // stage.removeChild(shapes.scanLine.container); // stage.addChild(shapes.scanLine.container); // // // set shade z-index // stage.removeChild(shapes.shadow.container); // stage.addChild(shapes.shadow.container); // // start next animation sceneFnc = function () { sceneCommon(); sceneFinish(); }; }; prepareQuit = function () { // remove parts stage.removeChild(shapes.stepBodyBorder.container); stage.removeChild(shapes.stepBody.container); stage.removeChild(shapes.backgroundLinesX.container); stage.removeChild(shapes.backgroundLinesY.container); stage.removeChild(shapes.scanLine.container); // start next animation sceneFnc = function () { sceneQuit(); }; }; tick = function () { sceneFnc(); stage.update(); // rerender }; sceneCommon = function () { var i, alpha; // switching textsAlpha = (textsAlpha + 1.5) % (2 * Math.PI); alpha = (Math.cos(textsAlpha) / 8) + 0.9; // "Loading" text if (shapes.loadingText) { shapes.loadingText.container.alpha = alpha; } // step description // if (shapes.stepBody) { // shapes.stepBody.container.alpha = alpha; // } // next button if (shapes.nextButton && shapes.nextButton.container.alpha !== 0) { shapes.nextButton.container.alpha = alpha; } // back button if (shapes.backButton && shapes.backButton.container.alpha !== 0) { shapes.backButton.container.alpha = alpha; } // background if (shapes.background) { shapes.background.container.alpha = (alpha * 0.05) + 0.5; } if (shapes.headerStep && shapes.headerStep[2].counter >= 3) { for(i = 0; i < 3; i++) { shapes.headerStep[i].container.alpha = alpha + 0.1; } } // scan line if (shapes.scanLine) { shapes.scanLine.container.y += 5; if (shapes.scanLine.container.y > CANVAS_SIZE.height) { shapes.scanLine.container.y = 0; } } // error background if (shapes.errorBackground.alpha > 0) { shapes.errorBackground.alpha -= 0.05; shapes.errorBackground.container.alpha = shapes.errorBackground.alpha; } }; // scene of "loading" sceneLoading = function () { // logo if (shapes.logoHtml5) { if (shapes.logoHtml5.container.alpha < 0.5 && shapes.logoHtml5.step > 1) { shapes.logoHtml5.container.alpha += 0.01; } switch (shapes.logoHtml5.step) { case 1: shapes.logoHtml5.counter++; if (shapes.logoHtml5.counter > 16) { shapes.logoHtml5.step++; shapes.logoHtml5.counter = 0; } break; case 2: if (shapes.logoHtml5.gap >= -1) { shapes.logoHtml5.step++; } else { shapes.logoHtml5.container.y = shapes.logoHtml5.baseY + shapes.logoHtml5.gap; shapes.logoHtml5.gap += shapes.logoHtml5.gap * -0.24; } break; case 3: if (++shapes.logoHtml5.counter > 24) { shapes.logoHtml5.step = 99; // set to invalid step shapes.logoHtml5.counter = 0; removeHtml5(); removeLoadingText(); } break; case 4: if (++shapes.logoHtml5.counter > 2) { shapes.logoHtml5.container.scaleX = 3; shapes.logoHtml5.container.scaleY = 0.2; shapes.logoHtml5.container.x -= 150; shapes.logoHtml5.step++; shapes.logoHtml5.counter = 0; } break; case 5: shapes.logoHtml5.container.scaleX = 5; shapes.logoHtml5.container.scaleY = 0.3; shapes.logoHtml5.container.y += 100; shapes.logoHtml5.step++; break; case 6: stage.removeChild(shapes.logoHtml5.container); shapes.logoHtml5.step++; // start next animation sceneFnc = function () { sceneCommon(); sceneLoadComplete(); }; break; default: break; } } // background fade in if (shapes.background && shapes.background.container.alpha < 0.5) { shapes.background.container.alpha += 0.02; } // "Loading" text if (shapes.loadingText) { if (loadingTextArr.length > shapes.loadingText.step) { shapes.loadingText.container.children[0].text += loadingTextArr[shapes.loadingText.step++]; } else { shapes.loadingText.counter++; if (shapes.loadingText.counter > 10) { shapes.loadingText.container.children[0].text += '.'; shapes.loadingText.counter = 0; } } } }; // scene of "load complete" sceneLoadComplete = function () { var alpha = (Math.cos(textsAlpha) / 16) + 0.9, i; // background lines if (shapes.backgroundMaskX.shape.x < 0) { shapes.backgroundMaskX.shape.x += 10; shapes.backgroundMaskY.shape.y += 10; } else if(!stage.onClick) { // register event handler stage.onClick = prepareStep1; } if (shapes.backgroundLinesX.container.alpha < 1) { shapes.backgroundLinesX.container.alpha += 0.05; shapes.backgroundLinesY.container.alpha += 0.05; } // switching // introduction if (shapes.intro[2].counter >= 4) { shapes.introBorder.container.alpha = alpha; shapes.introTitle.container.alpha = alpha; for(i = 0; i < 3; i++) { shapes.intro[i].container.alpha = alpha; } } // header step for(i = 0; i < 3; i++) { if (stepTitleArr[i].length > shapes.headerStep[i].step) { shapes.headerStep[i].container.children[1].text += stepTitleArr[i][shapes.headerStep[i].step++]; } if (shapes.headerStep[i].counter < 8) { shapes.headerStep[i].background.alpha = Math.cos(Math.PI / 8 * shapes.headerStep[i].counter); shapes.headerStep[i].container.alpha += 0.13; shapes.headerStep[i].counter++; return; } } // introductions if (introTitleArr.length > shapes.introTitle.step) { shapes.introTitle.container.children[0].text += introTitleArr[shapes.introTitle.step++]; } for(i = 0; i < 3; i++) { if (introDescArr[i].length > shapes.intro[i].step) { shapes.intro[i].container.children[3].text += introDescArr[i][shapes.intro[i].step++]; } if (shapes.intro[i].counter < 8) { shapes.intro[i].background.alpha = Math.cos(Math.PI / 8 * shapes.intro[i].counter); shapes.intro[i].container.alpha += 0.13; shapes.intro[i].counter++; break; } } if (shapes.intro[0].counter >= 8) { shapes.introBorder.container.alpha = alpha; shapes.nextButton.container.alpha = alpha; } if (shapes.nextButton.step < 6) { shapes.nextButton.step++; if(shapes.nextButton.step % 2 === 0) { shapes.nextButton.container.scaleX = shapes.nextButton.container.scaleY = (1 / 6) * shapes.nextButton.step; shapes.nextButton.container.y = shapes.nextButton.baseY + Math.random() * 50 * (6 - shapes.nextButton.step); } } }; sceneStep1 = function () { // "CHOOSE SEX." text if (stepDescArr[0].length > shapes.stepBody.step) { shapes.stepBody.container.children[0].text += stepDescArr[0][shapes.stepBody.step++]; } // sex icons if (shapes.iconMan.step++ < 6) { shapes.iconMan.container.scaleX = shapes.iconMan.container.scaleY = (1 / 6) * shapes.iconMan.step; shapes.iconMan.container.y = shapes.iconMan.baseY + Math.random() * 50 * (6 - shapes.iconMan.step); } if (shapes.iconWoman.step++ < 6) { shapes.iconWoman.container.scaleX = shapes.iconWoman.container.scaleY = (1 / 6) * shapes.iconWoman.step; shapes.iconWoman.container.y = shapes.iconWoman.baseY + Math.random() * 50 * (6 - shapes.iconWoman.step); } // sex icon mask if (shapes.sexIconMask.shape.y < -CANVAS_SIZE.height + 235) { shapes.sexIconMask.shape.y += 5; shapes.iconMan.container.alpha = shapes.iconWoman.container.alpha = shapes.iconMan.container.alpha * -1 + 1.8; } else { shapes.iconMan.container.alpha = shapes.iconWoman.container.alpha = 1; } }; sceneAfterStep1 = function () { // "OK." text if (okDescArr.length > shapes.stepBody.step) { shapes.stepBody.container.children[0].text += okDescArr[shapes.stepBody.step++]; } // flash selected icon and remove unselected icon if(formData.sex === 'man') { shapes.iconMan.container.alpha = shapes.iconMan.container.alpha * -1 + 1.5; } else { shapes.iconWoman.container.alpha = shapes.iconWoman.container.alpha * -1 + 1.5; } shapes.step1AfterImage.container.alpha -= 0.25; if(++shapes.step1AfterImage.counter > 15) { prepareStep2(); } // sex icon mask if (shapes.sexIconMask.shape.y < 0) { shapes.sexIconMask.shape.y += 5; } }; sceneStep2 = function () { var alpha = (Math.cos(textsAlpha) / 8) + 0.95; // step1 after image if (shapes.step1AfterImage.container.alpha > 0) { shapes.step1AfterImage.container.alpha -= 0.25; } // "ENTER USERNAME AND ..." text if (stepDescArr[1].length > shapes.stepBody.step) { shapes.stepBody.container.children[0].text += stepDescArr[1][shapes.stepBody.step++]; } // forms if (shapes.nameField.step++ < 6 && shapes.nameField.step % 2 === 0) { shapes.nameField.container.scaleX = shapes.nameField.container.scaleY = (1 / 6) * shapes.nameField.step; shapes.nameField.container.y = shapes.nameField.baseY + Math.random() * 50 * (6 - shapes.nameField.step); if (shapes.nameField.step === 6) { formField.name.className = 'visible'; formField.name.focus(); } } if (shapes.mailField.step++ < 6 && shapes.mailField.step % 2 === 0) { shapes.mailField.container.scaleX = shapes.mailField.container.scaleY = (1 / 6) * shapes.mailField.step; shapes.mailField.container.y = shapes.mailField.baseY + Math.random() * 50 * (6 - shapes.mailField.step); if (shapes.mailField.step === 6) { formField.mail.className = 'visible'; } } if (shapes.passwordField.step++ < 6 && shapes.passwordField.step % 2 === 0) { shapes.passwordField.container.scaleX = shapes.passwordField.container.scaleY = (1 / 6) * shapes.passwordField.step; shapes.passwordField.container.y = shapes.passwordField.baseY + Math.random() * 50 * (6 - shapes.passwordField.step); if (shapes.passwordField.step === 6) { formField.pass.className = 'visible'; } } if (shapes.retypedPasswordField.step++ < 6 && shapes.retypedPasswordField.step % 2 === 0) { shapes.retypedPasswordField.container.scaleX = shapes.retypedPasswordField.container.scaleY = (1 / 6) * shapes.retypedPasswordField.step; shapes.retypedPasswordField.container.y = shapes.retypedPasswordField.baseY + Math.random() * 50 * (6 - shapes.retypedPasswordField.step); if (shapes.retypedPasswordField.step === 6) { formField.retypedPass.className = 'visible'; } } if (shapes.nextButton.step++ < 6 && shapes.nextButton.step % 2 === 0) { shapes.nextButton.container.scaleX = shapes.nextButton.container.scaleY = (1 / 6) * shapes.nextButton.step; shapes.nextButton.container.y = shapes.nextButton.baseY + Math.random() * 50 * (6 - shapes.nextButton.step); } // validate indication // NAME if (formData.nameIsRequired) { shapes.nameError.required.alpha = alpha; shapes.nameOk.container.alpha = 0; } else { shapes.nameError.required.alpha = 0; shapes.nameOk.container.alpha = alpha; } // MAIL if (formData.mailIsRequired) { shapes.mailError.required.alpha = alpha; } else { shapes.mailError.required.alpha = 0; } if (formData.mailIsUnknownFormat) { shapes.mailError.reformat.alpha = alpha; } else { shapes.mailError.reformat.alpha = 0; } if (formData.mailIsRequired || formData.mailIsUnknownFormat) { shapes.mailOk.container.alpha = 0; } else { shapes.mailOk.container.alpha = alpha; } // PASS if (formData.passIsRequired) { shapes.passError.required.alpha = alpha; shapes.passOk.container.alpha = 0; } else { shapes.passError.required.alpha = 0; shapes.passOk.container.alpha = alpha; } // PASS(RETYPE) if (!formData.retypedPassIsDifferent && formData.retypedPassIsRequired) { shapes.retypedPassError.required.alpha = alpha; } else { shapes.retypedPassError.required.alpha = 0; } if (formData.retypedPassIsDifferent) { shapes.retypedPassError.different.alpha = alpha; } else { shapes.retypedPassError.different.alpha = 0; } if (formData.retypedPassIsRequired || formData.retypedPassIsDifferent) { shapes.retypedPassOk.container.alpha = 0; } else { shapes.retypedPassOk.container.alpha = alpha; } }; sceneAfterStep2 = function () { // "OK." text if (okDescArr.length > shapes.stepBody.step) { shapes.stepBody.container.children[0].text += okDescArr[shapes.stepBody.step++]; } // flash after image shapes.step2AfterImage.container.alpha = shapes.step2AfterImage.container.alpha * -0.9; if(++shapes.step2AfterImage.counter > 15) { prepareStep3(); } }; sceneStep3 = function () { // text if (stepDescArr[2].length > shapes.stepBody.step) { shapes.stepBody.container.children[0].text += stepDescArr[2][shapes.stepBody.step++]; } if (formDataArr.name.length > shapes.formValues.step) { shapes.formValues.nameText.text += formDataArr.name[shapes.formValues.step]; } if (formDataArr.mail.length > shapes.formValues.step) { shapes.formValues.mailText.text += formDataArr.mail[shapes.formValues.step]; } shapes.formValues.step++; // sex icon mask if (shapes.sexIconMask.shape.y < -CANVAS_SIZE.height + 235) { shapes.sexIconMask.shape.y += 5; shapes.sexIcon.container.alpha = shapes.sexIcon.container.alpha * -1 + 1.8; } else { shapes.sexIcon.container.alpha = 1; } // back button if (shapes.backButton.step++ < 6 && shapes.backButton.step % 2 === 0) { shapes.backButton.container.scaleX = shapes.backButton.container.scaleY = (1 / 6) * shapes.backButton.step; shapes.backButton.container.y = shapes.backButton.baseY + Math.random() * 50 * (6 - shapes.backButton.step); } // next button if (shapes.nextButton.step++ < 6 && shapes.nextButton.step % 2 === 0) { shapes.nextButton.container.scaleX = shapes.nextButton.container.scaleY = (1 / 6) * shapes.nextButton.step; shapes.nextButton.container.y = shapes.nextButton.baseY + Math.random() * 50 * (6 - shapes.nextButton.step); } }; sceneAfterStep3 = function () { var alpha = (Math.cos(textsAlpha) / 8) + 0.95; // step3 after image if (shapes.step3AfterImage.container.alpha > 0) { shapes.step3AfterImage.container.alpha -= 0.1; } // headerLight after image if (shapes.headerStepLight.container.alpha > 0) { shapes.headerStepLight.container.alpha -= 0.1; } // sending bar if(shapes.sendingBar.bar.scaleX < 1) { shapes.sendingBar.bar.scaleX += 0.05; shapes.sendingText.sending.y += 0.5; shapes.sendingText.sending.alpha = alpha; shapes.sendingBar.bar.alpha = alpha / 2; } else { prepareFinish(); } }; sceneFinish = function () { var yAdd = (191 - shapes.sendingText.complete.y) * 0.2, alpha = 0.9 + (Math.cos(textsAlpha) / 8) * 0.3; if(shapes.sendingText.sending.alpha > 0) { shapes.sendingText.sending.alpha -= 0.2; shapes.sendingText.sending.y += yAdd; } if(shapes.sendingText.complete.y < 190) { shapes.sendingText.complete.y += yAdd; if(shapes.sendingText.complete.alpha < 1) { shapes.sendingText.complete.alpha += 0.1; } else { shapes.sendingBar.container.alpha = shapes.sendingText.complete.alpha = 1; shapes.sendingBar.bar.alpha = 0.5; } } else if(++shapes.sendingBar.counter < 180) { shapes.sendingText.complete.alpha = shapes.sendingBar.container.alpha = alpha; shapes.sendingBar.bar.alpha = alpha / 2; } else { shapes.sendingText.complete.alpha -= 0.2; shapes.sendingBar.container.alpha -= 0.2; shapes.sendingBar.bar.alpha -= 0.1; } if(shapes.sendingBar.counter > 15) { // text if (finDescArr.length > shapes.stepBody.step) { shapes.stepBody.container.children[0].text += finDescArr[shapes.stepBody.step]; } if(++shapes.stepBody.step > 200) { prepareQuit(); } } }; sceneQuit = function () { var scale; if(shapes.background.container.scaleX > 0) { scale = Math.abs(shapes.background.container.scaleX * 0.5); shapes.background.container.x = (CANVAS_SIZE.width - CANVAS_SIZE.width * scale) / 2; shapes.background.container.y = (CANVAS_SIZE.height - CANVAS_SIZE.height * scale) / 2; shapes.background.container.scaleX = scale; shapes.background.container.scaleY = scale; } }; removeLoadingText = function () { if (++shapes.loadingText.called >= 2) { // remove loading text stage.removeChild(shapes.loadingText.container); } }; removeHtml5 = function () { if (++shapes.logoHtml5.called >= 2) { shapes.logoHtml5.step = 4; } }; formKeyUpHandler = function (e) { if (e.keyCode === 13) { // ENTERキーが押されたら、NEXTボタンのclickイベントを発火させる if (shapes.nextButton && shapes.nextButton.container.onClick) { shapes.nextButton.container.onClick(); } else if (stage.onClick) { stage.onClick(); } } else if(e.keyCode === 37 && shapes.iconMan.container.onClick) { shapes.iconMan.container.onClick(); } else if(e.keyCode === 39 && shapes.iconWoman.container.onClick) { shapes.iconWoman.container.onClick(); } }; validateFormData = function () { formData.nameIsRequired = (formField.name.value === ''); formData.mailIsRequired = (formField.mail.value === ''); formData.mailIsUnknownFormat = !formData.mailIsRequired && !(/^([a-z0-9_]|\-|\.|\+)+@(([a-z0-9_]|\-)+\.)+[a-z]{2,6}$/i.test(formField.mail.value)); formData.passIsRequired = (formField.pass.value === ''); formData.retypedPassIsRequired = (formField.retypedPass.value === ''); formData.retypedPassIsDifferent = (formField.retypedPass.value !== formField.pass.value); return (formData.nameIsRequired || formData.mailIsRequired || formData.mailIsUnknownFormat || formData.passIsRequired || formData.retypedPassIsDifferent); }; document.addEventListener('DOMContentLoaded', function () { init(); }, false); })();<div id="container"> <input type="text" name="name" id="nameField" value="" placeholder="username"> <input type="email" id="mailField" value="" placeholder="mail@example.com"> <input type="password" id="passwordField" value="" placeholder="password"> <input type="password" id="retypedPasswordField" value="" placeholder="password(retype)"> <canvas id="form"></canvas> </div> <script charset="UTF-8" src="http://code.createjs.com/easeljs-0.5.0.min.js"></script> <script charset="UTF-8" src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>/* BRIEFING FORM */ /* [Default] ------------------------ */ html, body { margin: 0; padding: 0; } body { background-color: #000; font-family: 'Courier'; text-align: center; } /* [Form] ------------------------ */ #container { position: relative; width: 450px; height: 450px; margin: 0 auto; } #form { background-color: #000; } input { position: absolute; display: none; font-family: 'Courier'; font-size: 15px; width: 265px; outline: none; } input.visible { position: absolute; display: block; background-color: transparent; border: none; color: #FFF; } #nameField { top: 75px; left: 105px; width: 190px; } #mailField { top: 125px; left: 105px; width: 190px; } #passwordField { top: 175px; left: 105px; width: 165px; } #retypedPasswordField { top: 225px; left: 105px; width: 165px; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

beryujp

URL
http://blk.jp

ウェブデザイナーを志していたはずがWEB系開発者になってしまった、京都出身1986年生まれ。趣味でPhotoshopとかも。会社で音楽を聞きながら仕事する人のためのiPhoneアプリ作りました。 http://blk.jp/ThirdEar/

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/o4GH/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

kookimura

suzushun

mikelito

turusuke

edo_m18

onhime_lines

foka

rumomac

akm2

takaha5hi:

かっこいい！こだわりを感じます

Kazuma.Yagyu:

デザインかっこいい！

watilde:

かっこいいいいい

ブリーフィングフォーム forked: 第二回全国統一 HTML5実技コンテストエントリー用コード

操作方法

動作確認済

HTML5ロゴのライセンス情報

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by