ニュースティッカーの作り方

Question

ヘッドラインニュース用のニュースティッカーを作成したいと思い
様々なサイトを巡りましたが作り方を解説しているページがなかなか
見つかりません。

複数のニュースをテキストファイルに保存し順番に読み出し
下記のURLにある単機能版と同じような物を作りたいと思っています。
どのように作成したら良いのでしょうか。

http://www.multithread.jp/ticker/

sassakun · Accepted Answer

ニュースティッカーになる部品は，そこらじゅうに落ちていますが，
言われる通り，ニュースティッカーそのものの作り方のサイトは見つかりませんでした。
ありそうで，ないものですね。
文字ばかりでわかりにくいと思いますがここを参考に作ってみますか。
以下は，あくまでも作成例です。
なるべくシンプルにするために，難しいスクリプトや，装飾や細かい工夫は抜きです。

大まかな流れは，「テキストのロード」→「テキストの表示」→「テキストを動かす」　です。


◎「テキストのロード」

Flashでテキストをロードする前に，テキストファイルが必要です。
サンプルとして次のようなものを用意しました。
線内をメモ帳などテキストエディタにコピペし，そのコピペしたファイルを
「news.txt」というファイル名で任意のフォルダに保存してください。

-------------------------------------
news1=Googleです。&
&url1=http://www.google.co.jp/&
&news2=YAHOO!だよ&
&url2=http://www.yahoo.co.jp/&
&news3=gooだったのです。&
&url3=http://www.goo.ne.jp/&
-------------------------------------

よく，フリーのFlash素材屋さんなどで見かけるデータの形式です。
各行，「=」 の左が "変数名" で，「=」 の右がその "値" です。

Flashを起動して，
まず，新規ドキュメントで適当に広いステージを用意し，レイヤーを１つ追加して，２レイヤーにしてください。

上のレイヤーはスクリプト用レイヤー，下のレイヤーは物を置くレイヤーにします。
タイムラインは以下のようになります。

□　レイヤー２　筆・・|○|
□　レイヤー１　筆・・|○|

そして，ステージ上の下にレイヤーに６つのダイナミックテキストを置いて，
それぞれに  news1～3，url1～3 の変数名を付けてください。

※※ダイナミックテキストの文字の色は，背景と違う色，つまり黒あたりにしておいてください。
テキストが白だとせっかく表示されても見えません。

用意するとステージ上は以下のようになります。

　↓変数名：news1　　　　↓変数名：url1
┌───────┐　┌───────┐
└───────┘　└───────┘
　↓変数名：news2　　　　↓変数名：url2
┌───────┐　┌───────┐
└───────┘　└───────┘
　↓変数名：news3　　　　↓変数名：url3
┌───────┐　┌───────┐
└───────┘　└───────┘

次に，上のレイヤーのフレーム1のタイムラインに次のようなスクリプトを書いてください。

---コピペ可-----------------------
// 文字コードをShift-JISに
System.useCodepage = true;
//「news.txt」をロード
this.loadVariables("news.txt");
--------------------------------

この時点で，タイムラインは次のようになっていると思います。

　　　　　　　　　　　　　ａ
□　レイヤー２　筆・・|○|
□　レイヤー１　筆・・|●|

System.useCodepage = true; 
に関しては次のＵＲＬを参考にしてください。
「Macromedia Flash Player 6 以降でのエンコーディングについて」
http://www.macromedia.com/jp/support/flash/ts/documents/fl0262.html

this.loadVariables("news.txt");
は同じフォルダ内の news.txt をムービーのルートに読み込むということです。

ここまでできたら，「news.txt」を保存したフォルダと同じフォルダに
任意のファイルネームでFlash(FLA)を保存してください。
そしてパブリッシュ。
パブリッシュしたら，「任意の名前.swf」と「任意の名前.html」がパブリッシュされると思います。
どちらかを開いてみてください。
作った， news1～3，url1～3 の変数名を付けたダイナミックテキストに「news.txt」の各変数が，表示されるはずです。

これだけと言えばこれだけなのです。
その表示されたダイナミックテキストをニュースのように動かせば，良いだけのことです。

以上のことで，あとは自分で考えられる場合は，考えてみてください。
その考えた方法がうまく行けば，作者にとってBESTな方法だと思います。
以下は無視してくださって良いです。


◎「テキストの表示」

上の状態で一応はテキストが表示されています。
しかし，一定の場所(変数)に表示されているわけではありません。
当然，表示されたダイナミックテキストをそのまま動かしてくださってもまったくかまいません。
でも，システマティックにするには，「動く物」や「ボタン」に変数を入れてしまったほうが良いです。
そこで，一定の場所(変数)に順次読み込まれた変数を代入して行く方法を書きます。

まず，タイムラインを追加して，30フレームくらいにしてください。 "30フレームくらい" です。何フレームでもかまいません。

そして２フレーム目の上のレイヤーをキーフレームにしてください。
ついでに最終(30)フレームもキーフレームにしてください。
タイムラインは次のようになります。

　　　　　　　　　　　　　ａ　　　　　　　　　　　　　　　　　　　 30
□　レイヤー２　筆・・|○|○　　　　　　　　　　　　　　　   []○|
□　レイヤー１　筆・・|●　　　　　　　　　　　　　　　　　　　[]||

そして，ステージ上の下のレイヤーに２つのダイナミックテキストを追加して，
それぞれ， news  と url という変数名をつけてください。
ステージ上を図示すると次のようになります。

　↓変数名：news 　　　　↓変数名：url
┌───────┐　┌───────┐
└───────┘　└───────┘
　↓変数名：news1　　　　↓変数名：url1
┌───────┐　┌───────┐
└───────┘　└───────┘
　↓変数名：news2　　　　↓変数名：url2
┌───────┐　┌───────┐
└───────┘　└───────┘
　↓変数名：news3　　　　↓変数名：url3
┌───────┐　┌───────┐
└───────┘　└───────┘

そして，変数名：news のダイナミックテキストを選択して，
「右クリック」→「シンボルに変換」 よりムービークリップシンボルにしてください。
その，ムービークリップを選択して，インスタンス名に任意の名前をつけてください。
ここの説明では，「myMC」というインスタンス名をつけます。

そして，タイムラインの 上レイヤーの フレーム1 選択し，スクリプトを以下のように書きかえます。

---コピペ可-----------------------
stop();
// 文字コードをShift-JISに
System.useCodepage = true;
//「news.txt」をロード
this.loadVariables("news.txt");
//変数 i の初期値を 0 に設定
i = 0;
//１フレーム進む時間毎に１回以下を実行
this.onEnterFrame = function() {
//news1 の値が無ければ stop
if (news1 == null) {
stop();
//news1 に値入れば play
} else {
play();
// そしてこの onEnterFrame を消去
delete this.onEnterFrame;
}
};
--------------------------------

注釈は//のあとに書いてある通りです。
変数 i がいきなり登場していますが，この i を変えることによって，
フレーム2 で 変数　news  と url に代入する値を変えます。

その他詳しくは次のURLを参考にしてください。
「外部テキストファイルを読込む」
http://www.macromedia.com/jp/support/flash/ts/documents/fl0247.html


そして，タイムラインの 上レイヤーの フレーム2 選択し，スクリプトを以下のように書きます。

---コピペ可-----------------------
i++;
if (_root["news"+i] == undefined) {
i = 1;
}
_root.myMC.news = _root["news"+i];
url = _root["url"+i];
--------------------------------

i++; はそのフレームに来るたびに i を 1 ずつ加算するということです。
if文 で分岐をしていますが，
これは，「news.txt」 に news? という変数に値がなくなれば，また news1 から順に news に代入するということです。
サンプルの「news.txt」 は一応３つのニュースとそのURLしか書いてありませんが，
無数に増やすことができます。
最後まで変数が表示されたら，また 1 から変数を表示するための分岐です。

そして，最終フレームには，

---コピペ可-----------------------
gotoAndPlay(2);
--------------------------------

これで，最終フレームまで来ると，フレーム2まで戻るので，
i++; で 変数 i が 1 加算されて，次の文字が 「myMC」というインスタンス名のムービークリップの url に表示されるというしくみです。


○ ボタンについて

適当にボタンシンボルを下レイヤーに作ってください。
そのボタン次のようなスクリプトを書くと，表示されている URL に getURL できます。

---コピペ可-----------------------
on (release) {
getURL(url, "_blank");
}
--------------------------------

これは，今仮に作っておいて，実際は，ちゃんとしたニュースティッカーができて，
最終的に，一番上のレイヤーに透明なボタンを用意して，そのボタンに書けば良いと思います。

それは，このサイトのこちら↓の方の回答を参考にしてください。
「質問：yahooのページにあるFLASHについて」
教えて! goo  http://oshiete1.goo.ne.jp/kotaeru.php3?q=1768808
OKWave  http://okwave.jp/kotaeru.php3?q_id=1768808

ここまで，説明通りに実行できているか，実行しなくても理解できていればあとは，動かすだけです。
用意した，ステージ上の 「myMC」 以外は全部削除してください。
これらは変数を見るために用意したもので，実際は全く必要ありません。
あとはこのMCを動かせば良いのです。


◎「テキストを動かす」

「myMC」 を フレーム2 ～ 最終フレームまでで モーショントゥイーン させればできあがりです。
モーショントゥイーン でなくても，ActionScript で動かしても良いです。
モーショントゥイーン で動かす場合は，イージングを使えば雰囲気が出ます。

「イージング・回転を覚えよう！」
http://www.1art.jp/flash/le/lesson4/lesson4.htm

===============================

やはり，テキストだけの説明はわかりにくいですよね。
冒頭でも書きましたが，ニュースティッカーになる部品は，そこらじゅうに落ちています。
実は，基本的なスクリプトと，基本的な発想だけで行けるのです。
わかりにくければ，少ない部品から，自分なりに作る方法を考えてみてください。
どうもここは，図的説明に不向きです。

ニュースティッカーの作り方

ニュースティッカーになる部品は，そこらじゅうに落ちていますが，

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング