《#1》 CS4のステージ環境に慣れよう

Digicom Magazine読者のみなさんこんにちは、ななきちです。

さぁ、今回から実際にFlashを使ってのお勉強を開始します。
まず、Flashによるドキュメント作成のあらましからです。順番に慣れていきましょう。

 

目次

• Flashのステージに触れてみよう
• Flash上で描画してみよう。
• Flashムービーを書き出そう！

Flashのステージに触れてみよう

まずはアプリケーションを立ち上げてみましょう。

 

  
Windowsでは、［スタート］メニューから［プログラム—XXX XXX -Adobe Flash CS4］をクリック、Macではアプリケーションフォルダ内の「Adobe Flash CS4」フォルダ—「Adobe Flash CS4」をダブルクリックして起動します。
起動時に表示されている中央のパネルは「スタートアップスクリーン」と言います。

中央のパネルは「スタートアップスクリーン」と言い、新しいドキュメントを作成したり、作業中のドキュメントを開くためのパネルです。
スタートアップスクリーンの［新規作成］欄から、［Flash ファイル（AS 2.0）］をクリックし、新規ファイルを作成します。

ファイルタイプ名の最後にある（AS 2.0）とは、Flashのためのプログラム言語「ActionScript 2.0（アクションスクリプト ニ・テン・ゼロ）」のことです。画像のフォーマットが異なるとその機能が異なってくるのと同じように、Flashでは、使用するプログラムバージョンによって、ファイルの形式が異なります。選択するASバージョンが違っていると、正しくプログラムを書いても動かなかったりします。気をつけましょう。

現在、最新バージョンはActionScript 3.0ですが、ウェブのオープニングムービーやインタラクティブボタンなどのウェブインターフェースのみであればAS 2.0で十分なので、今回はActionScript 2.0で学習を進めていきます。

ActionScript 2.0がある程度理解できたら、是非ActionScript 3.0にもトライしてみてください。

 

 
中央の白い用紙が「ステージ」です。このステージが、Flashムービーのできあがりサイズ、作業エリアです。

新規作成の画面が起動しました。DigiCon Magazineの読者のみなさんは、Flashを触ったことがなくても、After Effectsは触ったことがある！という方は多いのでは？

同じAdobe製品ということで、インターフェースにも互換性があるので、「これってAfter Effectsとちょっと似てるかも」なんて印象を受けると思います。

←ツールパネルです。カーソルをツールボタンの上に移動すると、ツール名が表示できます。こういうツールは、Adobe Photoshop、Illustratorとよく似ています。なお、ツールパネルが作業画面の右側へ移動したのはCS4から。パネル上部をドラッグすれば、好きな場所へ移動できます

(※クリックで拡大できます）

 

 

 

 

 

 

Flashのステージ上に描画してみよう。

さて、まずはともあれ、ステージ上に簡単な絵を描いてみましょう。

ツールパネルを見ると、絵が描けそうなツールがいくつかありますね。
まずは、ツールパネルの中ほどにあるブラシツール。

ブラシツールを使うと、Photoshopのようなペイント系の描画が可能です。Flashは、その誕生へ元をたどれば、Smart Sketchというお絵描きソフトでした。

このSmart Sketchは、Illustratorのような描いたイラストを拡大・縮小しても美しい線が保てるドローイングソフトにもかかわらず、消しゴムツールが用意されていて、それを使うとペイントソフトのように消すことができたり、ハンドルを使わずに変形できたりするといったかなり画期的なソフトウェアでした。

Flashは、その機能をずっと引き継ぎ、現在まで進化してきました。

ブラシツール

 

ブラシツールを使用したイラスト

 

ブラシでドラッグして描いた絵も、ベジェイラストのように自由に回転・変形できます。
(クリックで拡大します )

 

 

また、消しゴムで消すこともできます。

またペンツールで、Illustratorのようにベジェ曲線を使用しての描画が可能です。CS3からはIllustratorの使い心地も取り入れ、ペンツールでもブラシツールでもイラストが描きやすいツールになりました。

 

ペンツール

 

ペンツールではベジェのイラストが描けます。

テキストツールでは、文字を入力できます。テキストツールでクリックして1行のテキストを入力したり、ドラッグして文字入力エリアを作り、長文を入力したりできます。

テキストツール

テキスト入力

 

Flashムービーを書き出そう！

ブラウザで閲覧するためのFlashムービーを書き出してみましょう。その前にまず、先ほどブラシツールで描いたイラストを、Flashファイルとして保存しておく必要があります。
ファイルを保存するには、［ファイル—保存］を選択します。表示されるダイアログで保存先や名前を決め、保存します。

［ファイル—保存］を選択します。

この保存で出来上がるファイルが「Flashドキュメントファイル（.fla）」になります。

「fla」は、名前の通りFlashアプリケーションで開くドキュメントファイルで、ウェブ上で公開されているFlashのムービーファイルとは違います。ブラウザで見ることができるFlashのムービーファイルはswf（ShockWave Flash Object）ファイルといい、次のようにして、出力します。

まず、[ファイル—パブリッシュ設定]を選択します。

  

SWFを出力する前に設定を行います。[ファイル—パブリッシュ設定]を選択します。

［パブリッシュ設定］ダイアログボックスが開きます。このダイアログでswf書き出しのための設定を行います。［形式］タブでは、Flashから書き出すファイル形式やそのファイル名を設定します。swfやhtmlのほか、gifやjpg、png、WindowsやMacのスタンドアローンプレイヤーを書き出すこともできます。［タイプ］欄で書き出す形式にチェックを入れて、書き出し時のファイル名を入力します。

今回は［タイプ］で「Flash（.swf）」と「HTML（.html）」をチェックし、Flashファイル名は「kinoko.swf」、HTMLファイル名は「index.html」を指定します。

   

［パブリッシュ設定］の［形式］タブの設定です。
コチラは名前を変える前の画面。

HMTLをindex.htmlに変更。

チェックした［タイプ］の詳細設定は、タブとしてあらわれます。

上図のように設定すると、［形式］タブの隣に［Flash］［HTML］という項目が現れているはずです。
［Flash］タブでは、Flash Player、ActionScriptのバージョンなど、swfファイルについての詳細を設定でき、［HTML］では、HTMLファイル内に書き出される設定を行います。今回は、設定は変更しません。

  

［パブリッシュ設定］の［Flash］タブの設定です。(※画像クリックで拡大）

 

［パブリッシュ設定］の［HTML］タブの設定です。(※画像クリックで拡大)

設定が終わりました。
［パブリッシュ設定］ダイアログボックス下の［パブリッシュ］ボタンを押すと、ドキュメントファイル(.fla)と同一ディレクトリ（フォルダ）に、Flashムービーファイル「kinoko.swf」とHTMLファイル「index.html」が書き出しされました。
index.htmlを開くと、「kinoko.swf」がブラウザ画面上に表示されます。

保存したファイルと同じ階層に、swfファイルとhtmlファイルが書き出される

 

 

書き出し結果

次回はIllustratorなど別のアプリケーションで作成したデータやjpegなどの画像を読み込んで、あっ！という間に作れるパラパラアニメを作ってみます。

ではまた次回！

[にわとり助手による今回のまとめ]

今日 は、次のことを紹介しました。十分にわかったでしょうか？ おさらいしてみます。

リクエストや質問は、下記までお寄せください。

 

1 Flashの書類（ドキュメント）を作成する： Flashドキュメントを新規につくるには、スタートアップスクリーンの「新規作成」で目的の形式のFlashファイルをクリックする。このとき、(AS 2.0)や（AS 3.0）はアクションスクリプトのバージョン。使用するバージョンのファイルを選ぶようにしよう。

2 ツールで絵を描く：ドキュメントを開くと、ステージが画面の中央に表示される。右端にツールパネルが表示されるので、ツールを選択し、ステージ上でドラッグすれば絵や図形が描画できるぞ。いろいろ試してみて。［ブラシツール］はFlashならではの描画ツール。Illustrator、Photoshopと同じ［ペンツール］もある。

3 ファイルのパブリッシュ：パブリッシュとは、Flashドキュメントから、Flashムービー（swf）を作る（出力する）作業のことだ。［パブリッシュ設定］ダイアログの［パブリッシュ］ボタン、もしくは、［ファイル—パブリッシュ］を実行するとswfを作ることができる。一番最初に行うときは、ドキュメントを保存することと、パブリッシュ設定がまず必要。

Comments

[投稿： manabushimada]

はじめまして。
flash cs4を使って自分のページを作っています。
全くの初心者なので３つの質問をさせてください。

１、ページにある画像をクリックすると(上記にあつ画像のように)、ページはかわらず画像が拡大し、拡大した画像の下にcloseのボタンをクリックすると元に戻るようにしたい。

２、flashでパブリッシュをし、safariで確認したのですが、自分で作ったページのindexをクリックしたら、index.htmlや、worksをクリックしたらworks.htmlになるようにしたい。
今のところ、どこを押してもURLは変わらないので、戻るのボタンを押したら、別のURLに行ってしまいます。

３、最後に、680×480pxで作っているのですが、文章が長くなると、縦の幅が足らなくなってしまい、枠から文章がはみ出てしまいます。
色んなサイトを見ると、スクロールをして、縦の幅が長くなってたりします。
どうすればページによって、縦幅を変えられますか？
このページのようにです。
http://www.carstennicolai.de/?c=works

お時間があれば、actionscript3.0の言語付きで教えてください。
お願いします。
大変、困っております。
すいませんでした。