wordpress/Adobe Animate CCなどweb技術やブログ運用に関する話をしていきます!検索エンジン最適化に関する実験に関する情報も!
⇒ 本ブログの詳細/制作者プロフィール/連絡先/現在の行動状況はコチラ!
⇒ 本ブログは複数のテーマ(色)を持った階層構造になってます!詳しくはコチラ!
web/ブログ全般 SEO/アクセスアップ WordPress(KUSANAGI) Adobe Animate CC(旧FLASH) 便利ソフト/サービス紹介 効率化
  1. ホーム
  2. [Adobe Animate CC注意点] ダイナミックテキストが複数行にならない!日本語だと特に注意です!
■注目記事一覧

Adobe Animate CC(旧FLASH)が凄すぎる!その表現力と効率性を痛感!技術者にこそ是非!

画像素材サイトの「料金」と「検索結果の画像数」を比較してみた!やっぱり純日本製のサイトが使いやすい!?

「写真AC」が超オススメ!画像素材サイトとして、3年以上使い続けてます!

エックスサーバーが凄すぎる!本ブログでの超カスタマイズWordPressでも、高速レスポンスを誇る高品質サーバー!

ポイントサイト「げん玉」が凄すぎてビックリ!開始から10分で2000円以上稼げた!買い物のポイント還元もスゴイ!

[Adobe Animate CC使い方講座] Adobe Animate CCって何?まずはFlashからの変遷から解説!

デジハリのAdobeマスター講座がやばすぎる!Adobe Creative Cloudが50%オフで購入可!5分で使用可能に(超重要)!
 

[Adobe Animate CC注意点] ダイナミックテキストが複数行にならない!日本語だと特に注意です!

少し間が空きましたが、Adobe Animate CCの使い方講座のコンテンツを進めていきたいと思います。今回からしばらく、Adobe Animate CCの注意点について記述していこうと思っています。

Adobe Animate CCは注意しなければいけない点がたくさんあります。特に日本語環境だと注意が必要な場合がいくつかあり、意図した通りに動かない時があるんです。その「上手くいかない場合」のパターンをおさえておかないと、かなり苦労します。

ということで、今回からしばらく、その「意図した通りに動かないパターン」を列挙していこうかなと思います。これさえ抑えれば、Adobe Animate CCを思った通りに動かせるようになるかと思います!今回は、ダイナミックテキストに関する注意点です。

Adobe Animate CC注意点:ダイナミックテキストが複数行にならない場合があります!

これはかなり致命的な不具合です。ダイナミックテキストにすると「複数行のテキストでも、単一行にしかならない」という不具合があります。ダイナミックテキストは静的テキストの反対で、プログラム(JavaScript)で動的に変更可能なテキストのことです。変更可能なテキストのことですね。このダイナミックテキストに不具合があります。

例えば、下図のようなダイナミックテキストをつくったとします。パブリッシュ前は、下図のように枠によって3行になっている状態です。

しかし、パブリッシュすると…↓のように、全て1行になってしまうんです!これじゃ、枠の意味がないですし、最悪です。ちなみに、静的テキストの場合はこんな事になりません。ちゃんと複数行で意図した通りに出力されます。

英語だと上手くいく。何故なら、文章の中にスペースがあるからです。

実は、上の複数行にならない仕様は、日本語でのみおきる現象です。英語だと、それなりにうまく表示されます。↓のとおり、ちゃんと複数行になっていますよね。

その理由は、Adobe Animate CCが下記のような仕様になっているからです。

仕様:英語で単語の途中で改行が入ると読みにくいので、単語の区切り(空白)で改行するようにする

Adobe Animate CCは親切なのか、不親切なのか、「スペースで区切った単語を意識して、適度に改行を入れる」処理をしています。しかし、

文章の中に空白が入らない日本語は、全文が1単語とみなされる

のです。明らかに英語の文章に合わせた仕様になっているんです!今のところ改善される気配はないです…。ということで、こういった動きをすることを前提とした対策を取る必要があります。

対策

対策1:プログラムで自分で改行を入れる

1つ目の対策は、自分でプログラム中で、テキスト内に改行を入れてしまうという方式です。JavaScriptのプログラム中でstring(文字列)に「\n」を入れると、そこで改行されるようになります。ですので、自分のプログラム内で「20文字ごとに\nを挿入して改行するようにする」といった対処をとることで、一応対応はできます。行ごとで文字ズレとかあるんでなかなか難しいんですけどね… でもこうするしかないです。

対策2:文章内で空白を適度に入れる

もう一つの方式は「適度に空白」を入れることです。空白がないから、1単語とみなされているのであれば、適度に空白を入れるしかないです。でも、日本語内で空白があるってちょっと変ですけどね。

↓文章の節の間に空白を入れた場合。ちゃんと改行されます。謎の空白が入ってしまいますが。

対策3:英語を使う(日本語を使わない)

最後の対策は究極論です。英語を使うこと。日本語を使わないことです。こうすると、空白が適度にはいるため、枠通りに表示がされます。でも、Adobe Animate CCの仕様のために言語まで変えるって、ちょっとおかしいですよね。

基本的には、自然に処理するためには対策1の通り、自分で改行を入れて対処するしかないと思います。プログラムに慣れている人は別に対した問題ではないはずですが、なかなか厳しい仕様だなあと思います。とにかく、この仕様を意識してコンテンツを作る必要がありますので、注意して下さい!

 

↓Adobe Creative Cloud製品オススメです!

[関連コンテンツ]




お気軽にコメントお願いします!

Your email address will not be published.