http://fworks.studygroovy.com/ ファイヤーワークスのCS3(Creative Suite 3)を使用し始めて、その便利さに納得しました。FIREWORKSの使用方法を備忘録も兼ねて「動画の形式」で残すというのがこのサイトの趣旨です。私自身が初心者から開始したので、入門の講座としても活用できると思っています。CS3では、Adobe社のその他のソフトウェア、Illustrator,Photoshopや、旧Macromedia(マクロメディア)社からのラインナップ、Dreameweaver,flashなどの連携が抜群になりました。歴史的には、Fireworksは、mx,mx2004,8とバージョンを重ねてパワーアップしてきたすぐれたツールです。GIFやWEB素材を作成するのに非常に効果の高いファイアーワークス。その世界を一緒に堪能していきましょう。 ja http://fworks.studygroovy.com/archives/441918.html 方向線は、アンカーポイントの両端から描画可能です。 今、左側と右側にパスがあるアンカーポイントがあるとすると、 そのアンカーポイントは クローズパスのアンカーポイント オープンパス内の始点と終点以外のアンカーポイントと分類できると思います。 ※オープ... fireworks123 2007-12-14T10:48:38+09:00 ベクターの操作
今、左側と右側にパスがあるアンカーポイントがあるとすると、
そのアンカーポイントは

• クローズパスのアンカーポイント


• オープンパス内の始点と終点以外のアンカーポイント

と分類できると思います。

※オープンパスの始点と終点は片側にのみパスを持つ。

さて、そのアンカーポイントの左側のパスと、右側のパスの
それぞれの方向線を考えてみると、

• 左側の方向線なし：右側の方向線なし


• 左側の方向線なし：右側の方向線あり


• 左側の方向線あり：右側の方向線なし


• 左側の方向線あり：右側の方向線あり

のパターンが考えられます。

デフォルトで方向線を延ばすと、反対側にも方向線が延びますので、
「左側の方向線あり：右側の方向線あり」の形となります。

この伸びた方向線を削ったり、角度を変えたりして
複雑なベジェ曲線は構成されるわけです。

前回は、アンカーポイントと方向線の関係ということで、
アンカーポイントから伸ばした方向線を消すことを説明しました。

今回は、伸ばした方向線を左右対称の状態から変更する方法です。

ポイントはダイレクト選択ツールに持ち替えること、ALTキーを押すと
アンカーポイントを支点に折り曲げ可能であるということです。

ちなみに、通常の描画ではダイレクト選択ツールに持ち替えなくても、
方向線を延ばした直後にマウスを離さず、ALTキーを押せば折り曲げ可能です。


以下に動画ファイルを設置します。
一度、クリックしてから、画面中央の再生ボタンを押してください。
(約30秒です。)

]]> http://fworks.studygroovy.com/archives/438150.html アンカーポイントからは方向線を延ばすことが可能です。 その方向線からパスがどのようにカーブするかが今回のポイントです。 今回も自己流の解釈ですが、進めます。 まず、方向線ですが、『直線』であることがポイントです。 アンカーポイントを起点として進む方向... fireworks123 2007-12-13T10:12:57+09:00 ベクターの操作 その方向線からパスがどのようにカーブするかが今回のポイントです。

今回も自己流の解釈ですが、進めます。

まず、方向線ですが、『直線』であることがポイントです。
アンカーポイントを起点として進む方向を示唆しています。

パスはアンカーポイントに挟まれる形で形成されますので、向かい合う方向線により、
多種多様な線が引けるようになります。

ここでは単純に開始側の方向線を基準にして次のアンカーポイントの配置により、
どのようにカーブするかを示してみました。

進む方向が直進方向だとして、その延長ではストレート。
左に置けば、左カーブ。
右に置けば、右カーブ。

となります。

これだけだと、簡単なのですが、反対側でも、方向線が出せるのが難しいところです。

言葉で説明するのはとても難しいのでいろいろ作業する中で覚えてくださいね。

ちなみに、方向線を誤って出した場合は、アンカーポイントをクリックすれば、方向線を消せます。


以下に動画ファイルを設置します。
一度、クリックしてから、画面中央の再生ボタンを押してください。
(約30秒です。)


]]> http://fworks.studygroovy.com/archives/436288.html ペンツールで曲線を描く。 アンカーポイントから方向線を引き出すと曲線が描けます。 既存のアンカーポイントでも作成したばかりのアンカーポイントでも同様です。 今回は方向線を引き出して簡単な曲線を作成しましょう。 閉じるときは、ペンツールを持ち替えます。 ... fireworks123 2007-12-12T08:56:00+09:00 ベクターの操作

ペンツールで曲線を描く。

• アンカーポイントから方向線を引き出すと曲線が描けます。


• 既存のアンカーポイントでも作成したばかりのアンカーポイントでも同様です。


• 今回は方向線を引き出して簡単な曲線を作成しましょう。


• 閉じるときは、ペンツールを持ち替えます。

私なりに考える特徴は、

• アンカーポイントを接点とする曲線になること。


• アンカーポイントは両手を持つイメージであること。


• その片手ごとに方向の長さ、角度を設定可能であること。
  
• はじめに方向線を延ばすときは左右均等の長さで、対称方向に延びること。

方向線は私のイメージでは、アンカーポイントをボディとしてそこから生えた両手です。
その手には指があり、向う方向を指さしているという感じで捉えています。

手の長さは伸縮自在。

扱うのには慣れが必要ですが、きれいな絵が描けるのが特徴です。

使いこなせるといいですね。

以下に動画ファイルを設置します。
一度、クリックしてから、画面中央の再生ボタンを押してください。
(約40秒です。)

]]> http://fworks.studygroovy.com/archives/432905.html 既存のパス編集についてです。 方向線 アンカーポイントは方向線を持つことで曲線になります。 アンカーポイント上で、ドラッグすると方向線がでてきます。 アンカーポイントの追加 ペンツールのまま、パス上でクリックするとアンカーポイントを追加することが可能で... fireworks123 2007-12-11T11:31:23+09:00 ベクターの操作

• 方向線


• アンカーポイントは方向線を持つことで曲線になります。


• アンカーポイント上で、ドラッグすると方向線がでてきます。


• アンカーポイントの追加


• ペンツールのまま、パス上でクリックするとアンカーポイントを追加することが可能です。


• この場合クローズパスの状態です。


• アンカーポイントの移動


• パスを移動することで、オブジェクトの形を変えることが可能です。


• アンカーポイントの追加と移動


• アンカーポイントを追加し、形状をかえると、n+1角形ができます。


• 例：三角形(n=3)→パスの追加後、頂点をずらす。→四角形(n=4=n+1)


• パスの切断


• ナイフツールでパスを切断することができます。


• 一見すると、パスが追加されただけに見えます。


• ですが、実際にはオープンパスの始点と終点が重なっている状態になります。


• パスをドラッグしてみると、パスが分断されていることが分かります。


• パスの結合


• 三点以上のアンカーポイントを持っている場合、始点と終点を結合可能です。


• まず、始点と終点の二点を選択します。


• [修正] - [パスの結合] - [パスの結合]を選択します。


• 二点が結合されます。

以下に動画ファイルを設置します。
一度、クリックしてから、画面中央の再生ボタンを押してください。
(約45秒です。)

]]> http://fworks.studygroovy.com/archives/432862.html ペンツールの形状 正しい解釈ではないかもしれませんが、私なりの説明です。 『×』のポインタ パスの始点を作成します。 このポイントの状態でクリックすると、「アンカーポイント」を作成できます。 『＜』のポインタ 描画中のアンカーポイント付近に現れます。 方... fireworks123 2007-12-10T10:43:35+09:00 ベクターの操作

ペンツールの形状

正しい解釈ではないかもしれませんが、私なりの説明です。

• 『×』のポインタ


• パスの始点を作成します。


• このポイントの状態でクリックすると、「アンカーポイント」を作成できます。


• 『＜』のポインタ


• 描画中のアンカーポイント付近に現れます。


• 方向線の編集が可能です。


• ペンのみのポインタ


• 移動中に表示されます。


• 目的地点でクリックすると、アンカーポイントが追加されます。


• 『○』のポインタ


• 閉じられたパスを作成します。


• 『－』のポインタ


• 描画済みのアンカーポイントの削除が可能です。


• 『＋』のポインタ


• 描画済みのパス上で現れます。


• アンカーポイントを追加可能です。


• 『-□-』のポインタ


• 独立した二つのパスを連結する際に表示されます。


• 接続されたパスの最後のアンカーポイントからパスの作成が開始されます。


• 『／』のポインタ


• 既存のパスのアンカーポイントから追加する形でパスを描画します。

以下に動画ファイルを設置します。
一度、クリックしてから、画面中央の再生ボタンを押してください。
(約40秒です。)

]]> http://fworks.studygroovy.com/archives/431046.html ペンツールでは様々な図形を描くことが可能です。 直線の描き方でも説明しましたが、オープンパスとクローズパスで分けることができます。 今回はオープンパスで直線を連続して描いてみましょう。 ペンツールは自分でパスを閉じるか、終了の意思表示をしない限りパ... fireworks123 2007-12-09T10:56:46+09:00 ベクターの操作
直線の描き方でも説明しましたが、オープンパスとクローズパスで分けることができます。

今回はオープンパスで直線を連続して描いてみましょう。

ペンツールは自分でパスを閉じるか、終了の意思表示をしない限りパスを描画しつづけます。

私がよく使用するのは、Ctrl＋クリックです。

さて、基本的なジグザグを描いてみたのが今回の動画です。

とても簡単なのでぜひ試してみてください。

以下に動画ファイルを設置します。
一度、クリックしてから、画面中央の再生ボタンを押してください。
(約25秒です。)


]]> http://fworks.studygroovy.com/archives/427419.html ペンツールで直線を描く アンカーポイント ペンツールはクリックごとにアンカーポイントが作成されます。 クローズパスとオープンパス クローズパス:始点と、終点がつながった線。 オープンパス:始点と、終点がつながっていない線。 描画の終了 クローズパス:始点とつ... fireworks123 2007-12-07T10:46:54+09:00 ベクターの操作

ペンツールで直線を描く

• アンカーポイント


• ペンツールはクリックごとにアンカーポイントが作成されます。


• クローズパスとオープンパス


• クローズパス:始点と、終点がつながった線。


• オープンパス:始点と、終点がつながっていない線。


• 描画の終了


• クローズパス:始点とつながった時点で終了。


• オープンパス:Ctrl+クリックなどで終了。


• 方向線と方向点


• 方向線:アンカーパスから伸びる線。


• 方向点:アンカーパスから伸びた方向線の終点。


• ※直線では使用しません。

今回の動画では、簡単なオープンパスを作成しています。
(描画の終了はCtrl+クリック)

以下に動画ファイルを設置します。
一度、クリックしてから、画面中央の再生ボタンを押してください。
(約20秒です。)

]]> http://fworks.studygroovy.com/archives/425004.html ベクターオブジェクトを作成するには、ペンツールとラインツールが基本でしょう。 今回は、ラインツールの説明をします。 ラインツールは文字通り、「線」を描くツールですが、角の表現ができません。 折れ曲がった線を描きたい時は、ペンツールを使用しましょう。 ... fireworks123 2007-12-06T11:13:03+09:00 ベクターの操作 今回は、ラインツールの説明をします。

ラインツールは文字通り、「線」を描くツールですが、角の表現ができません。
折れ曲がった線を描きたい時は、ペンツールを使用しましょう。

ただし、ラインツールで描いた線をパスの結合をすることで、
屈折した直線であれば表現することも可能です。

以下に動画ファイルを設置します。
一度、クリックしてから、画面中央の再生ボタンを押してください。
(約1分です。)


]]> http://fworks.studygroovy.com/archives/424340.html アウトライン化された文字はパスの修正が可能です。 今回は、テキスト編の最後になりますので、あそんでみます。 まず、「ようこそ。」という文字を選択して、画面いっぱいに表示します。 選択オブジェクトの表示方法を参考にしてください。 文字もアウトライン化さ... fireworks123 2007-12-05T23:43:47+09:00 テキストオブジェクト 今回は、テキスト編の最後になりますので、あそんでみます。

まず、「ようこそ。」という文字を選択して、画面いっぱいに表示します。
選択オブジェクトの表示方法を参考にしてください。

文字もアウトライン化されるとパスでできた画像オブジェクトです。
アンカーポイントをもつと、自由に編集可能です。

また、アウトライン化されたオブジェクトは結合されたパスである場合もあります。
その時はパスの分離などをしてみるとどのように構成されているかもわかります。

以下に動画ファイルを設置します。
一度、クリックしてから、画面中央の再生ボタンを押してください。
(約45秒です。)

]]> http://fworks.studygroovy.com/archives/423210.html パス化されたグラデーションでは、一文字ずつが一オブジェクトとなります。 グラデーションをかけると、一オブジェクトごとに設定されてしまいます。 たとえば、3文字分まとめてグラデーションをかけるにはどうしたら良いでしょうか。 グループ化（[修正]－[グループ化]）... fireworks123 2007-12-05T11:50:41+09:00 テキストオブジェクト グラデーションをかけると、一オブジェクトごとに設定されてしまいます。
たとえば、3文字分まとめてグラデーションをかけるにはどうしたら良いでしょうか。
グループ化（[修正]－[グループ化]）では、同様の状態です。
この場合は、パスの結合（合体）を使用します。
（[修正]－[パスの結合]－[合体]）
これで、イメージどおりのグラデーションがかかります。


以下に動画ファイルを設置します。
一度、クリックしてから、画面中央の再生ボタンを押してください。
(約1分です。)


]]> http://fworks.studygroovy.com/archives/421049.html テキストは「ストローク（枠線）」と「塗り」を持っています。 通常、テキストの形は修正できません。 が、アウトライン化することで、文字ごとのパスの修正が可能です。 ただし、テキストの属性は失われ、画像オブジェクトになります。 アウトライン化の方法 [テキスト... fireworks123 2007-12-04T10:27:18+09:00 テキストオブジェクト

テキストは「ストローク（枠線）」と「塗り」を持っています。

通常、テキストの形は修正できません。

が、アウトライン化することで、文字ごとのパスの修正が可能です。

ただし、テキストの属性は失われ、画像オブジェクトになります。

アウトライン化の方法

• [テキスト]－[アウトラインに変換]をクリックします。


• 文字数分の画像のグループとして認識されます。

グループの分解

• [修正]－[グループ解除]をクリックします。


• 文字数分の画像の選択状態として認識されます。


• 一文字分の画像では、「テキスト」オブジェクトではなく、「パス」オブジェクトの扱いです。

以下に動画ファイルを設置します。
一度、クリックしてから、画面中央の再生ボタンを押してください。
(約1分40秒です。)


]]> http://fworks.studygroovy.com/archives/419246.html パスより長い文章をパス上に結合してみましょう。 パスより長いテキストを用意します。 パスと上記テキストを同時に選択しましょう。 [テキスト]－[パス上に結合] 一巡して、先頭の文字まで戻ると、以降の文字が表示されません。 長い文章の場合は見合うパスの長さが必... fireworks123 2007-12-03T11:48:59+09:00 テキストオブジェクト

パスより長い文章をパス上に結合してみましょう。

• パスより長いテキストを用意します。


• パスと上記テキストを同時に選択しましょう。


• [テキスト]－[パス上に結合]


• 一巡して、先頭の文字まで戻ると、以降の文字が表示されません。


• 長い文章の場合は見合うパスの長さが必要です。


• 変更手順


• パスを分離します。


• [テキスト]－[パスから分離]


• パスを選択し、[拡大・縮小ツール]でサイズ変更します。


• 再度パス上に結合すれば表示されます。


• 文字の開始位置を変更


• [テキストのオフセット]に値を入力します。


• エンターを押すと確定します。

以下に動画ファイルを設置します。
一度、クリックしてから、画面中央の再生ボタンを押してください。
(約70秒です。)


]]> http://fworks.studygroovy.com/archives/414635.html パス上に結合のオプション テキストメニューより、方向を「逆方向」にすることができます。 また、文字の結合時の方向を選択することも可能です。 ここでは、便宜的に、「順方向」と「逆方向」でわけて説明します。 種類は以下のとおり。 「順方向」 「パス合わせ」 ... fireworks123 2007-12-02T06:27:47+09:00 テキストオブジェクト

パス上に結合のオプション

• テキストメニューより、方向を「逆方向」にすることができます。


• また、文字の結合時の方向を選択することも可能です。


• ここでは、便宜的に、「順方向」と「逆方向」でわけて説明します。


• 種類は以下のとおり。


• 「順方向」


• 「パス合わせ」


• 「垂直」


• 「傾斜（縦方向）」


• 「傾斜（横方向）」


• 「逆方向」


• 「パス合わせ」


• 「垂直」


• 「傾斜（縦方向）」


• 「傾斜（横方向）」

パス上に結合、パスから分離は前回を参照してください。

以下に動画ファイルを設置します。
一度、クリックしてから、画面中央の再生ボタンを押してください。
(約70秒です。)


]]> http://fworks.studygroovy.com/archives/414600.html 文字をパス上に配置 任意のパスを用意します。 例として、楕円を描画しましょう。 テキストと楕円を選択します。 テキストをクリックします。 パス上に結合をクリックします。 パスの上にテキストがレイアウトされます。 文字をパス上に配置 テキストをクリックしま... fireworks123 2007-12-01T07:13:14+09:00 テキストオブジェクト

文字をパス上に配置

• 任意のパスを用意します。


• 例として、楕円を描画しましょう。


• テキストと楕円を選択します。


• テキストをクリックします。


• パス上に結合をクリックします。


• パスの上にテキストがレイアウトされます。

文字をパス上に配置

• テキストをクリックします。


• パスから分離をクリックします。

その他

• 改行がある場合、一行めが対象のようです。


• その場合は、一度解除して、改行を削除しましょう。


• 解除方法は上記の通りです。

以下に動画ファイルを設置します。
一度、クリックしてから、画面中央の再生ボタンを押してください。
(約90秒です。)

]]> http://fworks.studygroovy.com/archives/411409.html 文字のストロークと塗り 文字は枠線（ストローク）と塗りで構成されています。 ストロークの設定 「ストローク（線）のカラー設定」からストロークの色を選択します。 ストロークが設定されます。 塗りの設定。 今回はスタイルを設定してみましょう。 パネルを展... fireworks123 2007-11-30T10:42:39+09:00 テキストオブジェクト

文字のストロークと塗り

• 文字は枠線（ストローク）と塗りで構成されています。


• ストロークの設定


• 「ストローク（線）のカラー設定」からストロークの色を選択します。


• ストロークが設定されます。



• 塗りの設定。


• 今回はスタイルを設定してみましょう。


• パネルを展開します。


• 「アセット」パネル－「スタイル」から任意のスタイルを選択します。。


• 選択されたスタイルが適用されます。


• 解除したい時は、フィルタを「なし」にします。

以下に動画ファイルを設置します。
一度、クリックしてから、画面中央の再生ボタンを押してください。
(約40秒です。)


]]>