基金訓練に行ってきました。(81日目)


基金訓練(Webデザイン・プログラミング科)の81日目に行ってまいりました。
81日目は、Adobe Flashの実習です。

81日目の内容は下記のとおりです。

1.時計の作成

デジタル時計を作成します。訓練では数字の動きだけの単純な時計でしたが、ここではちょっとアニメーションを加えて下のような時計を作成しました。


<br /> フラッシュアニメを見るにはプラグインが必要です。<br />

背景のアニメーションの作成

背景と振り子のアニメーションを作成します。

  • 動きのない背景(外枠と背景のベース)を矩形ツールを使って角丸をプロパティーで指示して描きます。
    Flash時計の説明図1
  • 真ん中の3個の玉を新規にシンボルで作成します。
    ・3個のレイヤーを作成し、それぞれに玉と糸を描きます。(ひとつ描いてそれをコピーして、残り二つのレイヤーにコピーしてもよいです。)
    ・左揺動玉が左の玉あたった時のフレーム(6フレーム)に、左の玉のレイヤーのタイムラインでキーフレームを挿入し、玉の色を変えます。
    ・次のフレーム(7フレーム)にキーフレームを挿入し、球の色を戻します。
    ・真ん中の玉のレイヤーの7フレームで玉の色を変え8フレームで戻します。
    ・右の玉も同様に8フレームと9フレームを作成します。
    ・右の揺動球が右の玉に当たった時のフレーム(18フレーム)に、右の玉のレイヤーのタイムラインでキーフレームを挿入し玉の色を変えます。
    ・後は、19フレームから21フレームまで、左の時と同じようにキーフレームを作成していきます。
    ・最後に、3個のレイヤーとも、24フレーム目までフレームを追加(24フレームで右クリックしてフレームの挿入をクリック)して固定玉のシンボルが完成です。
    Flash時計の説明図2
  • 左揺動玉を新規にシンボルで作成します。
    ・玉と糸の2個のレイヤーを作成します。
    ・糸のレイヤーで、線ツールで中心(+マーク)から真下に直線を描きます。
    ・6フレームにキーフレームを挿入し、その間のフレームで、クラシックトゥイーンを作成します。
    ・トゥイーンのプロパティの回転を反時計回りにし、その右にある数字を0にして回転数を0回転にします。
    Flash時計の説明図3
    ・1フレームに移動して、自由変形ツールで線を選択すると、線の真ん中に円マーク(o)が現れるので、そのマークをドラックして線の上端へ持っていって離します。
    Flash時計の説明図4
           ↓
    Flash時計の説明図5
    ・6フレームでも同様に円マークを持っていきます。
    ・1フレームに戻って、自由変形ツールを使用して、線を適当な位置まで回転移動します。
    Flash時計の説明図6
    ・タイムラインの1から6フレームの間をクリックして、トゥイーンのプロパティを表示して、イージングを-100にします。(速度が徐々に速くなるようにアニメーションします。)
    Flash時計の説明図7
    ・20フレーム、24フレームにキーフレームを挿入し、その間でクラシックトゥイーンを作成します。(回転を時計回りの0回転、イージングを100(アウト)に設定しておきます。)
    Flash時計の説明図8
    ・24フレームで自由変形ツールを使用して、線を1フレームと同じ位置まで回転移動します。
    ・制御メニュー→ループ再生 を選択し、Enterキーを押すと動きが確認できます。
    (もう一度Enterキーを押すとプレビューがとまります。)
    ・玉も線と同様に作成しますが、1フレームでは位置がわからないので、6フレームにキーフレームを挿入してそこに玉を描き、タイムラインの6フレームを右クリックして「フレームをコピー」を選択し、1フレームで右クリックして「フレームをペースト」を選択して、6フレームのシェイプを1フレームにコピーします。
    Flash時計の説明図9
  • 右揺動球も、左揺動玉と同様の方法で新規にシンボルを作成します。
    Flash時計の説明図10
  • ステージに戻って、作成したシンボルをそれぞれのレイヤーを作って、適当な位置にドラック&ドロップで貼り付けていって、背景のアニメーションの完成です。
    Flash時計の説明図11

時刻表示の方法

時計の数字部分を作成します。

  • ステージで、時分秒それぞれと、アクションスクリプトのレイヤーを新規に作成します。
    (時レイヤー、分レイヤー、秒レイヤー、asレイヤー)
  • 時レイヤーでテキストツールを使って、適当な大きさ、位置、フォントで「00」と入力します。
  • 挿入したテキストのプロパティで、「埋め込み」ボタンをクリックして、「フォントの埋め込みウインドウ」を出し、「数字[0..9]」を選択してOKボタンを押します。
    Flash時計の説明図12
    (ほかの数字も同じフォントであれば、埋め込みはこの1回だけでよいです。)
  • 挿入したテキストのプロパティで、[インスタンス名」を h_txt にします。
    Flash時計の説明図13
  • 分レイヤー、秒レイヤーも時レイヤーと同様にテキストの00を挿入します。
  • 分レイヤーのインスタンス名は m_txt 、秒レイヤーのインスタンス名は s_txt にします。
    Flash時計の説明図14
  • asレイヤーのタイムラインの1フレームを選択して、F9キーを押すと、アクションスクリプトの編集ウインドウが開きます。
    Flash時計の説明図15
  • 下のテキストを打ち込むか、コピーして貼り付けて、右上のxマークをクリックして編集ウインドウを閉じてください。
  • import flash.events.Event;
     
    this.addEventListener(Event.ENTER_FRAME,loop);
     
     
    function loop(e:Event){
        var d:Date=new Date;
        var h=d.getHours();
        var m=d.getMinutes();
        var s=d.getSeconds();
        if(h<=9){
            h="0"+h;
        }
        if(m<=9){
            m="0"+m;
        }
        if(s<=9){
            s="0"+s;
        }
        h_txt.text=h;
        m_txt.text=m;
        s_txt.text=s;
    }
    
  • Ctrl+Enterキーで動きを確認して問題なければ完成です。




  • 人気ブログランキングへ
  • FC2ランキングへ
  • ブログランキング・にほんブログ村へ
  • おきてがみ

関連記事

カテゴリー:職業訓練
タグ:

コメントを残す