Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした