LoginSignup
12

More than 5 years have passed since last update.

Adobe Animate CC 2017.1のグローバルスクリプトとサードパーティスクリプト

Last updated at Posted at 2017-02-03

Adobe Animate CC 2017.1で「グローバルスクリプトおよびサードパーティスクリプトの追加」が行われました。Adobeサイトの説明だけでは少し簡単すぎるので、補足しつつご紹介します。

[アクション]パネルに[グローバル]階層が加わった

[アクション]パネルを開くと、左ペイン(カラム)に[グローバル]という階層が加わりました。そして、[インクルード]と[スクリプト]が含まれています。

図001■[アクション]パネルの[グローバル]階層

global in the actions panel

[インクルード]でサードパーティのJavaScriptライブラリを読み込む

[グローバル]階層から[インクルード]を選ぶと、サードパーティのJavaScriptファイルを読み込めます。[+]ボタンで追加、[-]ボタンは削除です。[↑][↓]で読み込みの順番が変わります。URLかファイルを選んで、JavaScriptライブラリが加えられます。[グローバルスクリプト]も含めて、この順番に実行されることにご注意ください。

図002■[インクルード]で読み込んだサードパーティのJavaScriptライブラリ

include in the actions panel

図002では、jQuery 1.12.4とプラグインのBackstretchを、ともにCDNで読み込みました。

[スクリプト]でグローバルなJavaScriptコードを書く

[グローバル]階層で[スクリプト]を選ぶと、タイムラインのフレームに依存しないグローバルなJavaScriptコードが書けます。

図003■[グローバル]の[スクリプト]に書いたJavaScriptコード

script in the global

図003では、jQueryとプラグインBackstretchで、5つの背景画像のスライドショーを定めました。書いたスクリプトはつぎのコード001のとおりです。なお、Backstretchの使い方とオプションについては、GitHubのREADME.md(英語)をご覧ください。

コード001■jQueryとプラグインBackstretchで背景画像をスライドショーさせる

$(function() {
    $.backstretch(
        [
            "http://jsrun.it/assets/6/K/N/2/6KN2E.png",
            "http://jsrun.it/assets/y/7/F/F/y7FFD.png",
            "http://jsrun.it/assets/E/y/a/m/EyamI.png",
            "http://jsrun.it/assets/c/i/X/a/ciXam.png"
        ],
        {
            duration: 3000,
            fade: 750
        }
    );
});

[グローバル]の設定はHTMLドキュメントに加えられる

これらの[グローバル]の設定は、パブリッシュされるHTMLドキュメントに加えられます。ご参考までに、HTMLドキュメントの<head>要素の記述を、つぎのコード002に抜き書きしました。[グローバル]設定は、CreateJSの初期化より先に行われています。パブリッシュしたHTMLドキュメントJavaScriptファイルも併せてアップロードしました。なお、ステージ(<canvas>要素)は使いませんので、透明にしてあります。

コード002■HTMLドキュメントに加えられた[グローバル]の設定

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="global_javascript.js?1486103454264"></script>
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js
'></script>
<script>
// Global Scripts
    $(function() {
    $.backstretch(
        [
            "http://jsrun.it/assets/6/K/N/2/6KN2E.png",
            "http://jsrun.it/assets/y/7/F/F/y7FFD.png",
            "http://jsrun.it/assets/E/y/a/m/EyamI.png",
            "http://jsrun.it/assets/c/i/X/a/ciXam.png"
        ],
        {
            duration: 3000,
            fade: 750
        }
    );
});</script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
    // ...[略]...
}

</script>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12