コンポーネント：JQueryUI：ラジオセット選択変更イベント

/* ラジオセット選択変更イベント
ラジオセットで選択値を変更すると、この関数が実行されます。この関数には独自のカスタムコードを追加できます。

手順 :
1. 以下の「// カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。
*/
if(!this.instance_name_here_change_cbk) {
function instance_name_here_change(evt) {
// カスタムコードを開始
console.log(evt.target.id);
// カスタムコードを終了
}
$("#dom_overlay_container").on("change", "#instance_name_here", instance_name_here_change.bind(this));
this.instance_name_here_change_cbk = true;
}

コンポーネント：JQueryUI：日付ピッカー日付変更イベント

/* 日付ピッカー日付変更イベント
日付の値を変更すると、この関数が実行されます。この関数には独自のカスタムコードを追加できます。

手順 :
1. 以下の「// カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。
*/
function instance_name_here_date_select(newDate) {
// カスタムコードを開始
console.log(newDate);
// カスタムコードを終了
}
$("#dom_overlay_container").on("attached", function(evt, param) {
if(param && param.id == 'instance_name_here') {
$("#instance_name_here").datepicker("option", "onSelect", instance_name_here_date_select.bind(this));
}
});

コンポーネント：ビデオ：ビデオをロード

/* Load a Video
Change the URL below.
*/
$("#instance_name_here")[0].src = "https://images-tv.adobe.com/avp/vr/15a99ccf-0e7c-4601-b270-87dd82624086/5078a43c-81f9-4a93-836c-815278b83a8e/e9cf12a0-7c4b-414f-a5c9-97ef49340aa9_20160203035417.960x540at1200_h264.mp4";

コンポーネント：ビデオ：ビデオをミュート解除

$("#instance_name_here")[0].muted = false;

コンポーネント：ビデオ：ビデオをミュート

$("#instance_name_here")[0].muted = true;

コンポーネント：ビデオ：ビデオを一時停止

/* ビデオを一時停止
選択したビデオを一時停止するには、このコードスニペットを使用します。
*/

$("#instance_name_here")[0].pause();

コンポーネント：ビデオ：ビデオを再生

/* ビデオを再生
選択したビデオを再生するには、このコードスニペットを使用します。
*/

$("#instance_name_here")[0].play();

コンポーネント：ユーザーインターフェイス：任意の UI コントロールの値を設定

/* 任意の UI コントロールの値を設定
任意のコントロールの値を設定するには、このコードスニペットを使用します。

手順 :
1. 以下の「// カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。
*/

// カスタムコードを開始
$("#instance_name_here").val('value_to_be_set');
// カスタムコードを終了

コンポーネント：ユーザーインターフェイス：任意の UI コントロールから値を取得

/* 任意の UI コントロールから値を取得
任意のコントロールの現在の値を照会するには、このコードスニペットを使用します。

手順 :
1. 以下の「// カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。
*/

// カスタムコードを開始
console.log($("#instance_name_here").val());
// カスタムコードを終了

コンポーネント：ユーザーインターフェイス：テキスト入力テキスト変更イベント

/* テキスト入力テキスト変更イベント
TextInput コントロールのテキストを変更すると、この関数が実行されます。この関数には独自のカスタムコードを追加できます。

手順 :
1. 以下の「// カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。
*/
if(!this.instance_name_here_change_cbk) {
function instance_name_here_change(evt) {
// カスタムコードを開始
console.log(evt.target.value);
// カスタムコードを終了
}
$("#dom_overlay_container").on("change", "#instance_name_here", instance_name_here_change.bind(this));
this.instance_name_here_change_cbk = true;
}

コンポーネント：ユーザーインターフェイス：ラジオボタンクリックイベント

/* ラジオボタンクリックイベント
RadioButton 上でクリックすると、この関数が実行されます。この関数には独自のカスタムコードを追加できます。

手順 :
1. 以下の「// カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。
*/
if(!this.instance_name_here_change_cbk) {
function instance_name_here_change(evt) {
// カスタムコードを開始
console.log(evt.target.checked);
// カスタムコードを終了
}
$("#dom_overlay_container").on("change", "#instance_name_here", instance_name_here_change.bind(this));
this.instance_name_here_change_cbk = true;
}

コンポーネント：ユーザーインターフェイス：数値ステッパー値変更イベント

/* 数値ステッパー値変更イベント
NumericStepper の値を変更すると、この関数が実行されます。この関数には独自のカスタムコードを追加できます。

手順 :
1. 以下の「// カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。
*/

if(!this.instance_name_here_change_cbk) {
function instance_name_here_change(evt) {
// カスタムコードを開始
console.log(evt.target.value);
// カスタムコードを終了
}
$("#dom_overlay_container").on("change", "#instance_name_here", instance_name_here_change.bind(this));
this.instance_name_here_change_cbk = true;
}

コンポーネント：ユーザーインターフェイス：コンボボックス選択変更イベント

/* コンボボックス選択変更イベント
コンボボックスで選択値を変更すると、この関数が実行されます。この関数には独自のカスタムコードを追加できます。

手順 :
1. 以下の「// カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。
*/
if(!this.instance_name_here_change_cbk) {
function instance_name_here_change(evt) {
// カスタムコードを開始
console.log(evt.target.value);
// カスタムコードを終了
}
$("#dom_overlay_container").on("change", "#instance_name_here", instance_name_here_change.bind(this));
this.instance_name_here_change_cbk = true;
}

コンポーネント：ユーザーインターフェイス：チェックボックスクリックイベント

/* チェックボックスクリックイベント
チェックボックスボタン上でクリックすると、この関数が実行されます。この関数には独自のカスタムコードを追加できます。

手順 :
1. 以下の「// カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。
*/

if(!this.instance_name_here_change_cbk) {
function instance_name_here_change(evt) {
// カスタムコードを開始
console.log(evt.target.checked);
// カスタムコードを終了
}
$("#dom_overlay_container").on("change", "#instance_name_here", instance_name_here_change.bind(this));
this.instance_name_here_change_cbk = true;
}

コンポーネント：ユーザーインターフェイス：ボタンクリックイベント

コンポーネント用のプログラムを使うときは、コンポーネントのパーツを使わないといけません。

そしてinstance_name_hereという箇所をパーツにつけたインスタンス名にしなくてはいけません。そのほかはそのままです。


/* ボタンクリックイベント
特定のボタン上でクリックすると、この関数が実行されます。この関数には独自のカスタムコードを追加できます。

手順 :
1. 以下の「// カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。
*/

if(!this.instance_name_here_click_cbk) {
function instance_name_here_click(evt) {
// カスタムコードを開始
console.log("Button clicked");
// カスタムコードを終了
}
$("#dom_overlay_container").on("click", "#instance_name_here", instance_name_here_click.bind(this));
this.instance_name_here_click_cbk = true;
}

CreateJS の API：コードを使用してトゥイーン

/* バウンスアウト緩和効果を使用して選択したオブジェクトをトゥイーン
*/

var target = this.instance_name_here;
var tween = createjs.Tween.get(target, {
loop: true
})
.to({
x: target.x,
y: canvas.height - 55,
rotation: -360
}, 1500, createjs.Ease.bounceOut)
.wait(1000)
.to({
x: canvas.width - 55,
rotation: 360
}, 2500, createjs.Ease.bounceOut)
.wait(1000)
.to({
scaleX: 2,
scaleY: 2,
x: canvas.width - 110,
y: canvas.height - 110
}, 2500, createjs.Ease.bounceOut);

CreateJS の API：drawPolyStar

/* drawPolyStar を使用して星形を描画するコード
*/

var shape =  new createjs.Shape(new createjs.Graphics().beginFill("ff0000").drawPolyStar(80, 80, 70, 5, 0.6, -90));
this.addChild(shape);

CreateJS の API：drawEllipse

/* ステージ上で楕円を描画するコード
*/

var shape =  new createjs.Shape(new createjs.Graphics().beginFill("ff0000").drawEllipse(5, 5, 60, 120));
this.addChild(shape);

CreateJS の API：放射状グラデーション

/* 円を放射状グラデーションで塗るコード
*/
var shape = new createjs.Shape(new createjs.Graphics().beginRadialGradientFill(["rgba(255,255,255,1)", "rgba(0,0,0,1)"], [0, 1], 0, 0, 0, 0, 0, 60).drawCircle(40, 40, 40));
this.addChild(shape);

CreateJS の API：線状グラデーション

/* 矩形を線状グラデーションで塗るコード
*/

var corner_radius = 10;
var colors = ["#ff0000", "rgba(0,0,0,1)"];
var ratios = [0, 1];
var x0 = 0;
var y0 = 0;
var x1 = 0;
var y1 = 130
var shape = new createjs.Shape(new createjs.Graphics().beginLinearGradientFill(colors, ratios, x0, y0, x1,y1).drawRoundRect(0, 0, 120, 120, corner_radius));
this.addChild(shape);

CreateJS の API：drawCircle

/* ステージ上で円を描画するコード
*/
var circle_radius = 100;
var xLoc = (canvas.width/2)-50;
var yLoc = (canvas.height/2)-50;
var shape = new createjs.Shape(new createjs.Graphics().beginFill("#ff0000").drawCircle(xLoc,yLoc,circle_radius));
this.addChild(shape);

CreateJS の API：drawRoundRect

/* 角丸の半径 10 のステージ上で丸みのある矩形を描画するコード
*/

var corner_radius = 10;
var shape = new createjs.Shape(new createjs.Graphics().beginFill("#ff0000").drawRoundRect(5,5,100,100,corner_radius));
this.addChild(shape);

CreateJS の API：drawRect

/* ステージ上で矩形を描画するコード
*/

var shape = new createjs.Shape(new createjs.Graphics().beginFill("#ff0000").drawRect(5,5,100,100));
this.addChild(shape);

CreateJS の API：beginLinearGradientStroke

/*beginLinearGradientStroke() API
*/

var shape =  new createjs.Shape(new createjs.Graphics().beginLinearGradientStroke(["#fff", "rgba(50, 50, 50, 1)"], [0, .4], 0, 0, 70, 140).moveTo(5, 25).lineTo(110, 25).endStroke());
this.addChild(shape);

CreateJS の API：bezierCurveTo

/*bezierCurveTo() API
*/
var stroke_color = "#ff0000";
var shape =  new createjs.Shape(new createjs.Graphics().beginStroke(stroke_color).moveTo(5, 75).bezierCurveTo(45, 90, 75, 75, -25, -25).endStroke());
this.addChild(shape);

CreateJS の API：quadraticCurveTo

/*quadraticCurveTo() API
*/
var stroke_color = "#ff0000";
var shape =  new createjs.Shape(new createjs.Graphics().beginStroke(stroke_color).moveTo(0, 25).quadraticCurveTo(45, 50, 35, 25).endStroke());
this.addChild(shape);

CreateJS の API：arcTo

/*arcTo() API
*/
var stroke_color = "#ff0000";
var shape =  new createjs.Shape(new createjs.Graphics().beginStroke(stroke_color).moveTo(50, 20).arcTo(150, 20, 150, 70, 50).endStroke());
this.addChild(shape);

CreateJS の API：lineto

/*lineto() API
*/
var stroke_color = "#ff0000";
var shape =  new createjs.Shape(new createjs.Graphics().beginStroke(stroke_color).moveTo(5, 35).lineTo(110, 75).endStroke());
this.addChild(shape);

ロードとアンロード：ライブラリからインスタンスを追加

/* ライブラリからステージにインスタンスを追加
指定したムービークリップまたはボタンのライブラリシンボルのインスタンスをステージに追加します。

手順 :
Add "LibrarySymbol" as the linkage property of the symbol.
*/

//ライブラリから別のシンボルを追加する場合は、
//上記手順 2 の「クラス」フィールドと以下のコードに、別の名前を入力します。
var fl_MyInstance = new lib.LibrarySymbol();
this.addChild(fl_MyInstance);

ロードとアンロード：クリックしてライブラリからイメージをロード

/* クリックしてライブラリからイメージをロード
シンボルインスタンスをクリックすると、ライブラリから指定したイメージが表示されます。
ライブラリからロードするイメージは、リンケージプロパティが有効な名前に設定されているライブラリに存在する必要があります。

手順 :
1. ライブラリ内のビットマップのリンケージ名として「MyImage」を追加します。
*/


this.instance_name_here.addEventListener('click',fl_ClickToLoadImageFromLibrary.bind(this));

function fl_ClickToLoadImageFromLibrary()
{

var libImage = new lib.MyImage();
this.addChild(libImage);
}

アニメーション：ムービークリップをフェードアウト

/* ムービークリップをフェードアウト
Tick イベントが発生するたびに alpha プロパティを減らして、シンボルインスタンスが完全に透明になるまでフェードアウトします。

手順 :
1. シンボルインスタンスのフェードアウト速度を変更するには、以下の値 0.01 を変更します (0 よりも大きい 1 以下の数値を指定する必要があります)。大きな値を指定するほど、フェードアウトの速度は速くなります。
2. アニメーションでは、Tick イベントが使用されているので、再生ヘッドが新しいフレームに移動するときにアニメーションが進行します。アニメーションの速度はドキュメントのフレームレートの影響も受けます。
*/

var instance_name_here_FadeOutCbk = fl_FadeSymbolOut.bind(this);
this.addEventListener('tick', instance_name_here_FadeOutCbk);
this.instance_name_here.alpha = 1;

function fl_FadeSymbolOut()
{
this.instance_name_here.alpha -= 0.01;
if(this.instance_name_here.alpha <= 0)
{
this.removeEventListener('tick', instance_name_here_FadeOutCbk);
}
}