デザインの学校 ウェブデザイン実戦編 スチール&ビデオ動画制作

皆さんこんにちは。
WEBデザイン実戦編は、デザインの現場で生きた知識と経験を吸収する OJT (On the Job Training) を中心に、職業体験を兼ねたプロに求められるスキルを学習するクラスです。

今回はスチール&ビデオの動画制作の授業です。
実際に取材へ行き写真と動画を撮影。その後に動画編集ソフトを使い写真をつなぎ合わせたりビデオ動画を作成し、作品にするのが今回の課題です。

動画制作というと難易度が高いかもしれませんが、最近の動画ソフトは使い勝手も良いものが多いです。
中でも有名なのがWindowsムービーメーカーAdobe premiere pro です。

Windowsムービーメーカーはご存知の方も多いと思いますが、自分で撮影したビデオはもちろんのこと静止画もBGM などが入った“ムービー作品を簡単に作成できる「オート ムービー」という機能が搭載されているものです。

こちらがその画面となります。

基本的な操作方法は、まず取り込みたい画像およびビデオを選択します。
取り込んだものは「コレクション」に表示されます。

コレクションより動画にしたい作品を「ストーリーボード」に挿入するだけです。

ストーリーボードに置かれた絵の上で右クリックすることにより「ビデオ特殊効果」をつけることができます。これはパワーポイントで動きをつけるのと似ています。

BGMを挿入したい場合も「オーディオまたは音楽の読み込み」から挿入が出来ます。
基本的に「ドラック&ドロップ」でお手軽に動画作成が可能なのがムービーメーカーの大きな魅力です。

Adobe Premiere Proはアドビシステムズが販売している映像編集を目的とした動画編集ソフトです。DVDの映像などを簡単に編集できます。

こちらがその画面となります。

まずムービーメーカーと同じようにファイルを読み込みます。すると「プロジェクト」に読み込んだファイルが保存されます。

その画像を「タイムライン」にドラック&ドロップをすることによりどのような順番で動画を作成するかが決定できます。

なお、Premiere Proはタイトルを画像に入れることが可能となります。テンプレートより選択していただいても自分で作るのも自由です。

このように動画ソフトを使うことにより簡単に動画編集が完成することができます!

では今回の授業で作成した作品です。

http://youtu.be/WHQXlfnJnug

いかがでしょうか?ムービーメーカーで作成いたしました。

 画面や動画の切り替わりでは特殊効果(ビデオトランジション)を加え、ばっさり画面が変わったり、唐突に画面が変わったりなどの違和感がないように、また格好よく演出します。

先ほど少しご説明した Adobe Premiere Pro では前のカットが徐々に消えながら(フェードアウト)、同時に次のカットが浮かび上がる(フェードイン)映像、いわゆるオーバーラップのことをディゾルブ(またはクロスフェード)と呼びます。この「クロスディゾルブ」や他の特殊効果(ビデオトランジション)を好みで組み合わせて映像編集を楽しみましょう。


また動画は長すぎても鑑賞するのに嫌がられてしまうので、長くても15分。ダイジェストなら数分くらいに纏めると(編集すると)好まれます。

ちなみにムービーメーカーはWindows Me ・ XP ・ Vista に標準で付属しているソフトです!機能が豊富な割りにインターフェースが分かりやすく、そして直感的に操作できるところが最大の特徴でもありますのでご自宅で試されてはいかがでしょうか?

実戦編もそろそろ終了となります。
最後はどんな作品となるのか・・・実戦編がスタートした頃は不安で一杯でしたが成長した今では次の作品が楽しみでなりません!

デザインの学校 ウェブデザイン実戦編 YouTube 導入と開局

皆さんこんにちは。
WEBデザイン実戦編は、デザインの現場で生きた知識と経験を吸収する OJT (On the Job Training) を中心に、職業体験を兼ねたプロに求められるスキルを学習するクラスです。

今年も、楽天市場へ出店されている IS NET 様、市民ラジオのエフエム甲府様、老舗書店の朗月堂書店様など各社・各業界のホームページやネットショップのサイトメンテナンス(更新・修正)や、新機能の実装(追加)を行っている真っ最中です。

本日は、エフエム甲府様のスタジオにお邪魔させていただき、撮影した動画を新設した YouTube にアップロードする作業報告をご紹介します。

http://www.youtube.com/fmkofu763

YouTube とは皆さんご存知の「無料の動画サイト」です。
個人で投稿することができ、100MB・10分までの動画データ公開できたり、特定のメンバー間での動画共有ができる、日本でも有名なサービスとなっています。

なお YouTube の場合、10分といった動画の時間制限がありますが、動画を投稿する場合には再生時間は短い方が見やすいので、何も不自由ありません。長時間の動画は、10分毎に分割して投稿すればよいでしょう。

あまり長時間の動画ですと回線の調子により、すべて再生するまでに時間がかかってしまい、ユーザーが途中で見るのを止めてしまう恐れがあります。特に風景など変化に乏しい動画は、1分未満でも良いくらいです。

YouTube にしてもに他の同様のサービスにしても、動画のタイトル(件名)はとても重要です。
タイトルがなかったり(未設定)、なにもしないデフォルト(初期値)のままですと、動画の視聴数が伸びません。例えば「酒折山の登山」といったタイトルにするとします。もしユーザーが「山梨 酒折 登山」と検索した場合、「酒折」や「登山」部分がヒット=合致し、検索結果に表示され、視聴されやすくなります。

なお、YouTube と似たもので「USTREAM(ユーストリーム)」や「ニコニコ生放送」というものがあります。これは無料でインターネットを使用し、リアルタイムで映像が配信できる生放送のサービスです。YouTube と異なり、ライブ映像による臨場感を味わうことができます。

しかし YouTube よりハードルが高めなので編集技術のない方は YouTube をオススメします。

なお、 YouTube や USTREAM などを活用することにより、あちこちのサイトやテレビでよく見る「定点観測」が可能となります。定点観測とは定点カメラを設置し、その映像定点(同じ場所)から、天候・気象や交通量などの情報を時系列的に観測(観察)するものです。

例えば山梨の場合は富士山のライブカメラがございます。

富士山ガイド.com

定点カメラで取り込んだ画像を YouTube に投稿したり、USTREAM の場合はリアルタイムで映像を送ることができます。カメラで映像を撮影しパソコンからネット配信といった流れです。

屋外カメラは少々値が張りますが、防水や耐久性を考えるとその値段もうなづけます。パナソニックCanonなど、大手メーカーで様々な定点カメラを取り扱っています。

個人ですぐに始めたい方にオススメなのがこれ!

このおもちゃみたいなカメラは、「インターバルレコーダー「レコロ」」と言います。
こちらは動画を撮影するものではなく、写真を撮影するものですが、一定間隔ごとに撮影された写真を設定した速さでつなげて動画として保存されるので動画編集の必要がありません。価格もお手ごろで初心者の方にオススメです。

さてさて、話題はエフエム甲府様の OJT に戻りまして、先週は YouTube の導入に加え、Twitter も導入しました。

http://twitter.com/fmkofu763
Twitter を導入することにより、ホームページの HTML を触らなくとも、簡単にお知らせや最新情報を更新・配信できるようになります。Twitter に投稿された記事が、自動的にホームページのトップ(お知らせ欄)へ表示される便利な仕組み。

SNS をフル活用すれば、一度の更新で Twitter、Facebook、YouTube、BLOG が連動して自動投稿できる日も近いです!いちいち投稿したり HTML を触る時代ではないんですね。

デザインの学校 ウェブデザイン実戦編 Illustratorでロゴデザイン

皆さんこんにちは。
今回は Illustrator によるロゴデザイン・タイトルデザインの実務レベルのレッスンです。
前回の Photoshop と同じくAdobe社のソフトで、世界中のプロが愛用しているグラフィックやイラストレーションの作成に適した Illustrator 。DTPデザインの分野では業界標準です。

まず最初におさらいとして、「雑誌タイトルのデザイン手順 ~初級編~」を以下の手順のように作ってみます。

Illustrator でイメージしているパス(アウトライン)を完成させたら、Illustrator または Photoshop または Fireworks など好きなソフトを用いて、着色し立体的に仕上げ、まさしく「うるつや」な文字の完成。

コスメティック特集や女性誌などで見るような雰囲気にするには、ご覧のように少しウエイトを太くして傾かせる(シアー)するのがポイントです

続いて、「雑誌タイトルロゴのデザイン手順 ~中級編~」は、初級編で学んだパスの操作や加工技術を生かしつつ、より豪華に、より立派に仕上げます。

そして、グロー、シャドウ、グラデーションを加えると、「ぴあ」や「東京一週間」などのグルメ雑誌風のタイトルデザインの完成です

最後はタウン誌のように、背景の写真やイラスト、そしてクリスマス特集のロゴを加え、見開きの特集らしく見栄えするように仕上げます。ここまで作りこむと、レイヤーやオブジェクトは相当複雑で、Illustrator の動作が重くなってきます。

同じ手法を組み合わせて使えば、以下のようなタイトルやロゴのデザインも簡単にできちゃう



ロゴデザイン

いかがでしょうか?
これだけ色々なロゴデザインが表現できるようになると、クライアントのわがままな要望にも応えることができますね。

Photoshop が写真加工のプロなら、Illustrator はさしずめ「文字加工のプロ」といった感じでしょうか

実戦編に入り、表面的なソフトの機能は使わなくなるので一気に難易度が上がりましたが、メキメキと私達の技術面でのクオリティが上がっている気がします・・・

実戦編が終了する際には、プロ=即戦力として胸をはれそうです。

【Photoshop中級】Photoshopでメイクアップ

今回はPhotoshopによるメイクアップについてのレッスンです。
Adobe社のPhotoshopは皆さんご存知かもしれませんが、写真の加工や補正を主な目的としたとても有名なソフトです。

私たち受講生も何となく「写真加工するソフト」ということは知っていたのですが、実際にがっちりと画像を加工するのは初めてで、様々なツールを使っていくとPhotoshopの素晴らしさと奥深さが身にしみてわかりました・・・

 

例えばこのイアフォンを付けた女性の写真のビフォー・アフターをご覧ください。

 



 

(上)オリジナル/(中)明るさ補正+色調補正+背景削除/(下)メイクアップ。

 

まずは顔全体の仕上がりです。メイクアップの前後で、しっかりメイクが施され、肌の色艶も明るく綺麗になっています。
Photoshopを駆使すれば、すっぴんの女性モデルでも、簡単にお化粧ができることがわかりました。授業なので写真の変化を分かりやすくするため、舞台並のしっかりメイクです。それでは、モデルさんとメイクアップを変えてみましょう。

 


 

(上)オリジナル/(下)メイクアップ。

 

写真のクオリティが高いため、「明るさ補正+色調補正+背景削除」の工程は必要ありませんでした。
シミそばかす肌荒れを隠すファンデーションなど、以下のようにツールを使っているのかといいます。

 

ファンデーション → フィルタ:ダスト&スクラッチ
リップグロス → ブラシツール(レイヤーモード:乗算)
アイシャドー → ブラシツール(レイヤーモード:普通)
Tゾーンのハイライト → ブラシツール(レイヤーモード:普通)
アイブロウ → ブラシツール(レイヤーモード:オーバーレイ)

 

これを知ってしまうと、今まで何気なく見ていた雑誌やグラビアのモデルが、「この人の肌とても綺麗だな~ むむっ!!!テレビで見た印象とずいぶん違うかも」と思うことが多々ありましたが、その秘密はまさかPhotoshop!?
・・・なんて疑いを持ってしまいます。

デザインの学校 ウェブデザイン実戦編 フラッシュアニメでバナーデザイン

9月10日の授業はWEBデザイン実践編の2回目。Flash 1days セミナーです。

教えて下さる先生はあのデジハリの講師でもある坂本先生です。
初めてのフラッシュ制作・・・Flash CS5ActionScript(アクションスクリプト)に不慣れな私たちでしたが、5時間の授業に集中。




初フラッシュなのであたふたしつつも・・・5時間の授業で、ActionScript(アクションスクリプト)まで使用したバナー制作まで学習できました。
Fireworks(ファイヤーワークス)で、部品デザインを凝ったり、かっこいい写真素材を使えば、今後もっとクールな Flash 作品が作れることが分かり、WEBデザインの表現の幅が広がります。

1つのアプリケーションや技術に特化した1日限定の特別セミナーも、来週から始まる現場のクリエイターのそばで職業体験する OJT も、この実戦編のカリキュラムでさらにスキルアップしたいと思います。

デザインの学校 ウェブデザイン実戦編 FlashアニメとActionScript

2月20日の授業はWEBデザイン実践編の3回目。今回のテーマは「フラッシュ(Flash)」です。HTMLとCSSで作る従来のホームページを一歩超えた、“リッチコンテンツ”を制作していくための授業になりました。

 

先生はデジハリの講師でもある坂本先生。アニメーションやモーショントゥイーンの基礎から、ボタンに反応して動くような“フラッシュサイト”の制作まで一気に教わっていく、とても中身の濃~い講義になりました。

 

まずは「Flash」における画面構成や基本操作の確認をしつつ、最も基本的なアニメーションの制作からチャレンジしていきます。作成したオブジェクトをタイムライン上でアニメーションにする手順は、1.シンボルに変換⇒2.キーフレーム挿入⇒3.モーショントゥイーンの作成。

 

モーショントゥイーンの上にレイヤーをつくり、プロパティからガイドレイヤーに変更することで、ガイドに沿ったアニメーションにする方法なども学んでいきます。ちなみに「Flash」では、・[ctrl]+[enter]でのパブリッシュプレビュー
・[F5]: キーフレームを挿入
・[F8]でシンボルに変換
・・・といった各種ショートカットが存在するので、ぜひ覚えるように。初心者には小さいことのようですが、納期が存在するデザイナーの世界では、作業時間を短縮するショートカット機能はとても重要なのです。

 

1レイヤーのシンプルなものから複数のレイヤーを組み合わせたものまで、ひと通りアニメーションを制作していったのち、次はインスタンスについて詳しく学んでいきました。

 

インスタンスには[ムービークリップ]、[ボタン]、[グラフィック]の3種類が。主に授業ではボタンを使用したインタラクティブなコンテンツ制作に
チャレンジしてみました。ボタンには[アップ]、[オーバー]、[ダウン]、[ヒット]の4フレームがあり、サウンドを駆使することで、いわゆる“フラッシュサイト”をつくることもできるんですね。

 

続いていよいよActionScriptの勉強へ。忘れないように、あとで復習しないと大変そうです。授業ではスクリプトの基本的な機能、あるいはプロパティや
メソッドの概念などから学んでいきました。ActionScriptの良い点はちょっとした変更が加えられること。たとえばモーションのわずかなスピードについて、納品したあとになってクライアントから調整(=変更)のリクエストなどがあってもすぐさま、そして細かく対応できるところなんだそうです。

 

そして最後に制作したのは、アニメーション用オープンソースのライブラリである「Tweener」を利用したActionScriptの記述。今回は試しに「easeOutback」というトゥイーンを使ってみました。
ソースはこちら

 

import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;
FilterShortcuts.init();
Tweener.addTween(mc,
{_Blur_blurX:10, _Blur_blurY:10,
x:200,y:0,time:2,transition:”easeOutback”});
Tweener.addTween(mc,
{_Blur_blurX:0, _Blur_blurY:0,
y:200,time:2,transition:”easeOutback”,delay:3});

 

すると、たまに見かけるフラッシュサイトのような動きに! 感動!
こんなことができてしまうなんて!

 

坂本先生いわく「今回の授業は駆け足で」とのことでしたが、フラッシュ特有の難しい機能や操作に関して概念から詳しく教えていただけたので、
本当に分かりやすくて勉強になりました。なんだか世界が広がったような気がします。

デザインの学校 ウェブデザイン実戦編 フラッシュ2回目

フラッシュ2回目の講義となりました。
が、先生から渡された資料には目がちかちか、頭はくらくらしそうなソースコードがびっしり
本日も初めから冷や汗たらたらのスタートです。
今日はフルフラッシュでサイトを完成させます。
その前に

左のボールが右に横移動して戻る上のアニメーションを
タイムラインアクションスクリプトの両方で作成してみましょー
タイムラインだけだと

タイムラインは1フレームから30フレームで右へ移動
30フレームから 60フレームで左までもどります。
これをアクションスクリプトで作ると

見えにくいですがこんな感じ。たった6行の記述で終わってしまいました。
この中で重要なのがtweenです。
tweenを使うことでコンテンツにビジュアルに効果的な動きをさせることが可能になります。
一見タイムラインでの作成の方が簡単にも見えますが、複雑なフラッシュを作るときにはアクションスクリプトを使うとタイムラインがいたずらに長くならず管理しやすいのでぜひ覚えてくださいと先生のお告げがありました。
デザイナーを目指す貴方、ぜひ覚えてものにしましょー
では、本格的にサイトを作ってみましょー
今回作るフルフラッシュサイトはリキットデザインです。
フラッシュでもリキットデザインができるなんて驚きです
まず、パーツをそれぞれ作って下のようにステージ上に配置しましょう。
なぜヘッダーやフッター、ボタンなどがバラバラした配置なのか? 
それは後のお楽しみということでどんどん進みますよ~
ではアクションスクリプトを記述していきます。
しつこいようですがリキットデザインなのでブラウザの表示サイズが変わっても常にセンターに表示されるようにします。
そこで今日のお勉強で重要になってくるのがイベントリスナーです。
一番上のレイヤーasの1フレーム目にサイトのベースになる部分を記述します。
上部はステージの基準点からいつでも各コンテンツが中心に表示されるよう記述しています。
ロードバーの記述部分は汎用的に使えるので覚えておくと便利です。
this.stop();
Stage.scaleMode=”noScale”;
Stage.align=”TL”;

//ロードバーのローディング用記述
loader.bar._xscale=0;
myInt=setInterval(load_fn, 40);
function load_fn(){
percent=Math.floor(_root.getBytesLoaded()/_root.getBytesTotal()*100);
loader.bar._xscale=percent; if (percent>=99 && _root.getBytesLoaded()>0){ 
clearInterval(_root.myInt); _root.gotoAndStop(2);  
}
}

イベントリスナー記述によりローダーも同様に画面中央に表示されます。
//イベントリスナー追加
resizeListener0 = new
Object();
resizeListener0.onResize=setPosition0;
Stage.addListener(resizeListener0);
function setPosition0() {
loader._x=Stage.width/2-loader._width/2;
loader._y=Stage.height/2-loader._height/2;
}
setPosition0();


ローディングが終わるとベースとなる画像が表示されます。
ではでは、2フレーム目に突撃です!
//ローディングのアイコン非表示
center_mc.loadingImg_mc._alpha=0;
//Wellcomeボタンの非表示
wellcom_mc._visible=false;
//tweenの宣言
import mx.transitions.
Tween; import mx.transitions.easing.*;

//イベントリスナー
//コンテンツをブラウザのセンターに読み込むイベント

resizeListener = new Object();
resizeListener.onResize=setPosition;
Stage.addListener(resizeListener);
function setPosition(){
xtween=new Tween(center_mc,”_x”,Back.easeOut,center_mc._x,Stage.width/2-center_mc._width/2,1,true);
 if(Stage.height<800){ ytween=new Tween(center_mc,"_y",Back.easeOut,center_mc._y,Stage.height/2-center_mc._height/2-50,1.2,true);  }  else{ ytween=new Tween(center_mc,"_y",Back.easeOut,center_mc._y,Stage.height/2-center_mc._height/2,1.2,true); } navixtween=new Tween(underNavi_mc,"_x",Back.easeOut,center_mc._x,Stage.width/2-center_mc._width/2,1,true); naviytween=new Tween(underNavi_mc,"_y",Back.easeOut,underNavi_mc._y,Stage.height-180,1.2,true);

//右上のアイコンをステージ右端から113pxに固定
globalNavi_mc._x=Stage.width-113;
//フッターを下端から44pxに固定
footer._y=Stage.height-44;

ここが一番難しい部分になります。
以下はbgの画像を比率を固定したままステージいっぱいに敷き詰めるソースになります。
この場合横1024・縦768は4:3(0.75)の比率になります。
この記述をしておくことでブラウザの画面を広げたときにbgの画面が足りなくなったり
ブラウザを狭くしたときにbgの画像が変形しません。
if (Stage.height/Stage.width>=0.75){
bg._xscale=Stage.height/768*100; bg._yscale=Stage.height/768*100;
}
else if (Stage.height/Stage.width<0.75){ bg._xscale=Stage.width/1024*100; bg._yscale=Stage.width/1024*100; } } setPosition();

とここまで記述するとブラウザの外側からコンテンツ部分とボタンの画像が弧を描きながら画面センターに微妙にゆれながら入ってきます。
この動きをさせるためにパーツをステージ上にバラバラにおいていたのです
やはりここでも重要になるのがtweenです。
画像が入ってくる時の縦軸・横軸に関係する秒数にずれを生じさせると微妙に揺れながらブラウザのセンターに入ります。
ちょっとしたことですがこういった部分でデザイナーのセンスが光ります

では次にボタンを押すと一番大きな黒い四角の中に画像が表示されるようにしましょー!
//ボタンクリック、ローディングして画像を読み込む
function loadFunction(x){ 
imgAlphatween=new Tween(center_mc.load_mc,”_alpha”,Regular.easeOut,100,0,1,true);
iconAlphatween=new Tween(center_mc.loadingImg_mc,”_alpha”,Regular.easeOut,0,100,1,true);
imgAlphatween.onMotionFinished=function(){ mcLoader.loadClip(“img/img”+x+”.jpg”,center_mc.load_mc);
};
}

//ローディングの終了を告知させるソース
var mcLoader:MovieClipLoader=new MovieClipLoader();
mcLoader.addListener(this);
function onLoadInit(mc:MovieClip){
center_mc.loadingImg_mc._alpha=0;
alphatween=new Tween(center_mc.load_mc,”_alpha”,Regular.easeOut,0,100,1,true);
}

//Naviボタンロールオーバー
underNavi_mc.m1.onRelease=function(){
loadFunction(1);
};
underNavi_mc.m2.onRelease=function(){
loadFunction(2);
};
underNavi_mc.m3.onRelease=function(){
loadFunction(3);


すると~ローディング後に画像が表示されました
最後にここは先生のこだわりポイント
このサイトの中では意味を持ち合わせていないけれど、覚えておけば今後何かの役に立つはず

画面右上にあるボタンを押すと「wellcome!」と表示され、マウスをボタンから離すと1秒置いて非表示になるソースです。
functionでどの位置に表示したいかを記述します。
function apComment(){
wellcom_mc._visible=true;
wellcom_mc._x=globalNavi_mc._x+49;
wellcom_mc._y=globalNavi_mc._y+70;
}

//通常は非表示
function disapComment(){
wellcom_mc._visible=false;
}

//マウスを放すと1秒後に非表示
 globalNavi_mc.onRollOut=function(){ 
_root.controlTo=setTimeout(disapComment,1000);
};

//マウスが乗っている場合は消えないようにうする定義 
globalNavi_mc.onRollOver=function(){
 clearTimeout(_root.controlTo);
apComment();
};

以上長~くなりましたが、いかがだったでしょうか
私的には嗚呼、ぜひともマスターしてみたい 
でも無理っかな~? いや~頑張ろうっかな~・・・・
2日間フラッシュを勉強しましたが奥の深さにびっくり 難しさと面白さを肌で感じました。
では皆さんごきげんよう~

 

WEB(ホームページ)デザイン上級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

デザインの学校 ウェブデザイン実戦編 フラッシュ1回目

本日勉強するのはフラッシュとXMLです。
先生はデジハリの講師でもある坂本先生。
全く知識のない私に果たして理解できるのか? 不安です
フラッシュはアニメーションや映像等、XMLはブログ(RSS機能)や天気予報等にダイナミックなコンテンツとして使われています。
2つを両方組み合わせて使えるなんて今日初めて知りました。
そんな生徒で申し訳ありません。イチカワ校長先生!
余談はさておき、授業内容を見てみましょう。
●XMLの基礎知識
■タグについて
XMLってHTMLになんとなく似ていますよね。 HTMLは内容をタグで囲いますが、XMLもタグを使用します。
しかもHTMLのように決まったタグだけでなく自分でタグを作ってもいいのだそうです
日本語でもOKということで逆に何にしようか迷ってしまいそうな・・・。
ただ、実際に本番サーバーにアップするときは日本語ではなく半角英数に変えてくださいね。
このとき「要素」と「属性」の関係が重要になります。
■要素( element )の書き方
<郵便番号>105-0001</郵便番号>
 要素名  内容  要素名
■属性( attribute )の書き方
<graphic filename=” ample1.gif ” />
<要素名 属性名=”属性値” />
これよーく覚えておいてくださいね
■記述のルール
<?xml version=”1.0″ encoding=”ISO-8859-1″?>というXML Schemaといってエンコーディングの宣言文を頭に必ず付けてくださいね。
HTMLでいうドキュタイプ宣言と同じです。これが無いとどんな文書で書かれているのか分かりませんからね。
■フラッシュにXMLをよみこむ基本のソースコード
System.useCodepage = true;
●●●● = new XML();
●●●●.ignoreWhite = true;
●●●●.onLoad = function() {

trace(●●●●);
*ここの部分に読み込みたい部分のソースコードを上部のように記述します。
●●部分は自分で決めた名前を使用します。

};
●●●●.load(“xmlsample.xml”);

赤字以外の部分が汎用的に使えるソースコード。 覚えておきましょー
■記述のルール
大文字と小文字は区別され、2つの単語が続けて並ぶときは firstChild といった記述になります。
では実際にXMLを一部分取り出してみましょう。
【XMLのソースコード】
<?xml version=”1.0″ encoding=”ISO-8859-1″>
<elements>
<apple type=”name1″>サンプル1</apple>
<banana type=”name2″>サンプル2</banana>
<cherry type=”name3″>サンプル3</cherry>
</elements>

【フラッシュのソースコード】
trace(●●●●.firstChild);と記述すれば

が取り出せ、フラッシュの出力画面に上記のように表示されます。
trace(●●●●.firstChild.childNodes);と記述すれば

そのほかにもtrace(●●●●.firstChild..firstChild.attributes.type);

trace(●●●●.firstChild.firstChild.firstChild.nodeValue);

わっかりましたか~
■補足
2行目・3行目を読み込みたい時には読み込みたいソースコードの最後に[1]や[2]を足してあげましょう。
数え方は[0]から始まるのでこの場合2行目は[1]3行目は[2]になります。注意しましょ~
さて、だいぶ長くなってきましたが着いてきていただけているでしょうか?
先生によると今まではほんのさわりに過ぎず、もっといろいろなことができるようなのですが、
私、既にソースコードが頭から漏れてしまいそうです。
●アルバムの制作
さあ、覚えれば自作のアルバム作りにも役に立つソースコードを勉強しましょ~
でも、すんごいソースコード長いし複雑です。
簡単に内容を説明すると8枚の画像にそれぞれ日付とキャプションが入っています。
矢印をクリックすると次の写真に進めたり戻れる便利な機能付き。
【XMLのソースコード】
<?xml version=”1.0″ encoding=”ISO-8859-1″?>
<slideshow>
<photo url=”MDR001.jpg” times=”2003/02/24″>散歩中、お寺で撮影</photo>
<photo url=”MDR004.jpg” times=”2003/09/24″>アーチをくぐる</photo>
<photo url=”MDR011.jpg” times=”2004/05/11″>開放感</photo>
<photo url=”MDR033.jpg” times=”2004/08/15″>サボテン</photo>
<photo url=”MDR034.jpg” times=”2004/09/19″>渓谷から。カメラが横になってます</photo>
<photo url=”MDR040.jpg” times=”2004/10/02″>やぶから架け橋を望む</photo>
<photo url=”MDR041.jpg” times=”2004/11/30″>朝もやの中</photo>
<photo url=”MDR042.jpg” times=”2005/06/24″>つゆのころ</photo>
</slideshow>

【フラッシュのソースコード】
System.useCodepage = true;
var photo_xml = new XML();
photo_xml.ignoreWhite = true;
var url_array = new Array();
var caption_array = new Array();
var date_array = new Array();
var current_nm;
photo_xml.onLoad = function(success) {
trace(“success”+success);
}

だとフラッシュの出力は

trace(“success”+success); の後に決められた回数だけ繰り返す定義を追加。
var photos_array = this.firstChild.childNodes;
for (i=0 ;i<photos_array.length ;i++) {
url_array.push(photos_array[i].attributes.url);
caption_array.push(photos_array[i].attributes.caption);
date_array.push(photos_array[i].attributes.time);
}

この場合は8枚画像があるので7回分繰り返す定義になり、出力時の画像は変わりません。
次にフラッシュの黒一色の出力画面に1枚目の画像を呼び込む以下の定義を記述します。
下記の記述を追加すると・・・
holder_mc.loadMovie(url_array[0]);
caption_txt.text = caption_array[0];
date_txt.text = date_array[0];
current_nm = 0;
};
photo_xml.load(“imagedata.xml”);


写真・日付・キャプションが表示されました!
では次に左側の矢印をクリックすると次の写真が表示されるよう定義します。
next_btn.onRelease = function() {
if(current_nm<url_array.length-1) {
current_nm++;
holder_mc.loadMovie(url_array[current_nm]);
capption_txt.text = caption_array[current_nm];
date_txt.text = date_array[current_nm];
}
}


右のボタンをクリックすれば画像が変わりました! お~
そして最後は右ボタンで画像を戻せるようにします。
previous_btn.onRelease = function() {
if (current_nm>0) {
current_nm–;
holder_mc.loadMovie(url_array[current_nm]);
caption_txt.text = caption_array[current_nm];
date_txt.text = date_array[current_nm];
}


右ボタンをクリックして元に画像が戻れば成功です 
本当はソースコードをもっと詳しく説明したいのですが書ききれません
今日はこれでもざっくりと書いたつもりですが、それでも長ひ・・・・。すいません。
今日の授業は先生ブレーキ踏みっぱなしでゆっくり説明してくれたようですが、
来週はもっと複雑なのにかっ飛ばして進めるそうです。 ついていけるか心配だ~
ではまた来週~

 

WEB(ホームページ)デザイン上級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

デザインの学校 ウェブデザイン 実戦編 第10回 – 最終回 –

WEBデザイン実戦編の最終回のレポートをお届けしないで、ウェブデザインスタジオを卒業して大分経ってしまいました。
でもやっと、最終回レポートができますよ
さてさて、1月27日(土)最終日。
今日は大事な大事な、卒業制作の発表会…ハラハラします
と、その前に、先生からスクールを去り行く私たちに向けて最後の教えを
先生的に押さえておくべしな内容はコレ!!
◎ Fire Fox Add-on
◎ Flashのスプラッシュページ
◎ CSS発展+Color Chart
では、順々にいきましょー=3
Fire Fox Add-on
これは、Internet Explorerに先駆けてタブブラウザを実現したFire Foxのアドオン(拡張機能)のこと。
その利用の仕方を教えていただきました
単純にダウンロードして利用するのですが、拡張機能は英語版のページの方が掲載数豊富
Fire Foxのアドオン(拡張機能)は、無料でこんなに豊富な拡張機能が使えるの!!?
という驚きのもの。
Fire Foxは拡張機能にFTP、ページの画像化と保存、サイトデータのダウンロード、ブックマークの共有、Internet Explorerの模擬表示機能など数え切れない程ある。
ちなみに、私もFire Fox愛用中
まだ試されていない方はダウンロードしてみてください
Microsoftなどの大手ソフトハウスのユーザビリティ(=使い勝手・利便性)を研究するセクションの報告によると、使いやすく機能的なツールを活用することで1日に1社員辺り1時間早く仕事を終えることができると仮定します。
これが1000人規模の会社になると、1日に全社で1,000時間業務短縮することになり、年間で30万時間。給料換算すると1社員1時間1,500円とした場合、450,000,000円にもなりますっ
凄い金額ですよね。スーパーSEやスーパー派遣を10名雇える額です。
だから企業はお金をかけて社内システムをIT化し、経済的に合理的に統括したがるわけです。
話が少々飛躍してしましたが、このユーザビリティを極めて高い水準に実現しているのがFire Fox!デザイナーやSEは使わない手はないと思います。
過労なクリエイター職の必需品。Fire Foxを使って毎日1時間早く帰宅して1時間多く睡眠を取りましょう♪
2つ目は、スプラッシュページ
スプラッシュページとは、メニューやそれ以外の情報を置かず、Flashなどを使ったアニメーションのみが表示される、Webサイトのトップページ(home)のことを言います。
みなさんも見た覚えがあるのではないでしょうか?
でもこれ、現在WEB上ではかなり煙たがられている存在。
なぜでしょう?
まず、スプラッシュページを制作する側の意図としては、ファッショナブルでイメージ優先のサイト作りをしたい!という考えがある場合が多いと言われています。
一方ユーザーは、メニューやコンテンツなどの情報がないスプラッシュページを一定時間見つづけることに辟易してしまいます。
ユーザーが、情報収集に乗り出した先で、情報がないページをみることは、かなり不愉快ですよね
スプラッシュページについて説明されているサイトでも、中には「単なる自己満足の邪魔なページ」と言っているところもあるくらいです
しかし!もしあなたがWEBデザイナーとしたら、クライアントがそうしたスプラッシュページをどうしても作りたいと訴えてくるかもしれません
そんなときは、せめてどのような対応をするべきなのでしょうか。

(1)スキップボタンを設ける
(2)ムービーは短く・簡潔にする
(3)ホームに戻るときは、スプラッシュページに戻るような設定にしない
(4)一度そのスプラッシュページを開いたユーザーに大して表示しないようにする


と、こんなところでしょうか。
そんな悩みに衝突するのは大分先になりそうですが、そのときはこんな対処の仕方も忘れずいなければなー
って思います。
3つ目はCSS発展+Color Chart
CSS発展は、CSS(時よりJavascript併用)の発展的なテクニックの紹介です。
ウェブデザインスタジオのトップページの各講座へのリンクは、blocklink という技術を使っているため、文字含むセル(テーブルや枠)全体がhover(またはロールオーバー)し、視覚的に見やすく、クリックできる範囲が広く利便性があります。
こうした技術は普段のサイト制作において使うことは稀でも、知っておくと他のサイトと差を付けられるので重宝します。
その多くのスペシャルテクニックを、こちらの専門サイトを参考にして実用してみてはいかがですか?英語版ですけど…

(1)CSS HappyLife
(2)CSS example


とっても便利なカラーチャートもあります。
FireworksやPhotoshopなどのペイント(ビットマップ)系ソフトを使用しなくても、配色やレンダリング比較、16進数の色番号を確認するのに最適です。

(3)Color scheme
(4)WEB色見本 原色大辞典
(5)4096 Color Wheel

さて、ここからが本番で、卒業制作&制作発表の場へもどることに!!
第1期生に与えられた、卒業制作の課題はなんと…“パロディサイトを作ること!”
そうです、ちょっと(いや思いっきり?)オモシロ系サイトを作るのが今回のお題
コンテンツの企画力やデザイン力だけが焦点ではなく、もちろん重要なのは、ソースコードがきちんと記述できているか!!!ですよ。
文法上、デザイン上、SEO上、ソースコードには良し悪しがあり、それを理解した上で整形されたソースコードであること。う~ん、できるのかなぁ?
ということで 制作…制作…
そして、最後の授業の締めくくりとして、みなさんが順にプレゼンテーション形式で、制作発表をしました
作品は、どれも面白く、爆笑を誘い、ソースコード的にもどうやら問題ないようす。私は最後の最後まで直されましたが・・・
受講生がそれぞれの個性や感性を活かした作品に、お互い大爆笑っ
こんなにも人の作風って違うものなんだなぁ~と実感。やっぱりキャリアのある受講生から、全くデザインが初めての受講生までいて、それぞれの良い所が表現できているのが面白くてタマリマセン
無事に審査を終え、受講者全員での卒業となったのでした~Congraturarion
もう3月ですが、その後のWEBデザイン実戦編を卒業したみなさんのその後は、元々DTPデザイナーとして活躍中の方を半数含んでの好条件も手伝い、クリエイティブ職への就職率・就業率100%達成です~Congraturarion
昨日の友は今日の敵(あれ?)・・・なんていう風に、狭い山梨でこの世界にいることで、現場で普段会えたり、またはコンペティションなどでは同期生同士で敵対することもあるのかもしれません。
いい意味で競争して、クリエイティブ職の中でも、それぞれの道を進みそれぞれの専門性を極めることができたら、とても素敵なことだと思いました。
基礎・応用・実戦を、約1年間、計150時間(+課題自習)を通じて、新しい世界が見れて、(たぶん)スキルアップして、本当に良かった

 

WEB(ホームページ)デザイン上級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

デザインの学校 ウェブデザイン 実戦編 第9回

今日は、サイトの制作に知ってて便利な知識を学習しましたよー
是非是非、今後のお役に立ててください

★アクセス解析

アクセス解析ってどんなモノでしょうか
アクセス解析の基本の働きは、ページのリクエストを受け、その表示回数をカウントすることです
その数え方は、アクセス解析のソフトや設定で、異なってきます。
例えば、ページの表示回数の数え方については、
(1)一人が同じページを何度も閲覧して、それが全部カウントされる
(2)一人が一つのページを何度も閲覧しても1とカウントする
このように、設定をどちらかにすることもできるとのこと
その設定方法をどうするかというのはひとそれぞれ!
でも、純粋に人々がどのページに興味があるかを調べるなら(2)の方法を選ぶ方が良い方法だと思います
(1)の方法では、一人の人が同じページを何度も閲覧しているのに、それがサイト利用者全員にとって興味のある・人気の高いものであると判断してしまう可能性もありますね
アクセス解析の中には、サーバーのどのディレクトリに最もアクセスが多いかわかるものもあります。
それを見ることで、商品を販売するサイトなら、お客様にとってどの商品が興味をもたれているかなどを、この結果から推測することもできます。
こんな時に、これを踏まえてきちんとしたサイト構成を考えることが重要ですね
その他、アクセス解析ソフト・サービスによっては、どの国からのアクセスが多いか、どんなパソコンがアクセスしてきているのか、とか、またはどのブラウザ・どのリンク元からこのサイトにアクセスしてきたか、などを調べることができます。
サイトを企業の経営の中に、戦略的に組み込んでいくならどんなアクセス解析が必要なのかを選定して、利用したいですね
ちなみに、アクセス解析は、サーバーがサービスとして行っている場合が多いです。
そして、サーバーでは、アクセス解析のほか、メール・FTP・CGIなどさまざまなサービスを提供しているので、こういったものを上手に利用していくことが、快適なサイト運用の基なのではないでしょうか??
また、サーバーについてるアクセス解析がシステムとして弱いのであれば、無料のアクセス解析システムを利用することができます。
「無料アクセス解析」のキーワードで検索してみてください
googleのアクセス解析ツールgoogle analyticsは、特に無料でも充実したサービスでかなりおススメです

★DNS

DNSとは、ドメイン・ネーム・サーバー(Dmaine Name Server)の略。
これはいったい何か?というと、「ホスト名を元に、ホストの IP アドレスを教えてくれる」ものなのです。
例えば、ブラウザからウェブデザインスタジオのサイトにアクセスするとします。私のコンピュータは、アクセス先の IP アドレスを教えてもらわないとサイトにアクセスできないので、DNS サーバー

 

http://dezin.jp/の IP アドレスは何番ですか?」と尋ねます。すると、DNS サーバーは、DNS に登録された情報を検索し、IP アドレスを調べてその情報を返信してくれます。そして、私のコンピュータが

 

http://dezin.jp/の情報を発信している場所にアクセスできるようになります。
もし、その DNS サーバーに登録されていないホスト名をたずねた場合には、上位の DNS サーバーと連携し、IP アドレスを調べてきてくれるのです。
URLの入力から、表示までにこんなに働いていたとは!!
ちなみにアクセス解析で知ったIPアドレスやURLを入力すると、アクセスもとの国やIPアドレスを調べてくれる「IP広場」というサイトがあるので気になる人は、チェックしてみてください
★ブラウザ・OSのシェアや、ユーザビリティチェックなど

サイトを制作する上で、相手がどんな環境で見ているか、というのは重要な部分になってきます
表示は、ブラウザやOSによってまちまち。
それでも、より多くの人に快適に利用してもらうために、どんなブラウザ・OSがが最も多く利用されているのかを知ることは大事です
その他、サイトのユーザビリティやSEOなど、ここがしっかりできていればリピーターがついたり、アクセスがアップします
それぞれの、確認をするには以下のサイトをチェック!

ウェブ資料館→ブラウザ・OSのシェアなど(情報は2004年分まで)
EC Studio→サイトのユーザビリティ・SEO状態のチェック
富士通→アクセシビリティ

富士通のアクセシビリティアシスタンツは、サイトがきちんとできてるかを判定してもらえます。
こういうのって、自動で判定できるのね~
文字の大きさ・機種依存文字・特殊文字・altタグなどのチェックができるようです。ただし、有料なのでお気をつけください。
このような感じで、サイトを作ったら、そのサイトのチェックをしてみましょう
実践編も残すところあと一回。
最後は課題発表の予定
さてさて、どのようになるのでしょーか??
それでは、今回はこの辺で

 

WEB(ホームページ)デザイン上級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

デザインの学校 ウェブデザイン 実戦編 第8回

あけましておめでとうございます
本年もよろしくお願いいたします。
もう年が明けてから、4日目!
みなさま、いかがおすごしですか?
お雑煮食べたり、おせちを食べたり、親戚回りしたり、夜はお酒のおつきあいしたりと…
ほとんど常に食べている、わたしはぷくぷく肥えてます
…ダイエットしなきゃですね!

さてさて、遅くなりましたが、年末の授業報告です
今回の内容は、主にアクセス制限とセキュリティに関してです。
サイトの閲覧をしていると、しばしばアクセス制限というものに出くわします。
IDやパスワードを求められ、それを入力できないとアクセスできないというもの。
個人的につくったフォトアルバムを、身内にだけ見れるようにしたい!
旅行の記念の写真を、参加者だけがダウンロードできるようにしたい!

そう思う方、以外といるのでは?
プライベートな内容に関わる場合は、見る人( ユーザー )を制限を使用したいって思われると思います。
それを可能にするのが、「 .htaccess 」というファイルを使った制限の方法です!
それでは、手順を説明します。
(1)まずは、テキストエディタで.htaccessというファイルを作成します。
( ※ 「 . 」( ドット )を頭につけたファイルを作成できない場合には、「 htaccess.txt 」や「 htaccess 」というファイル名をつけ、サーバーへのアップロード時・アップロード後にファイル名の変更を行ないます )
(2)ファイル内に以下の内容を記述します

AuthType Basic
AuthName “IDとパスワードを入力してください。
AuthUserFile /homepage/secret/pass/.passwd
require valid-user

この文字色の部分は、スキなテキストで良いです
ID・パスワードの入力を促すテキストを入力してください。
※日本語は、文字化けする場合もあるそうです
この文字色部分は、サーバ上のファイルを保存する先を絶対パスで記述してください。
サーバー上のファイルの絶対パスなので、PCでの作業上の絶対パスではダメです。
そこもお間違いなく
(3)次に、ID・パスワードを格納したファイルをつくります。
IDとパスワードは、1ユーザーで1行、以下のように記述します。(→ID、→パスワード)
yamada:alxiVIcdYlBjQ

ここで注意するポイントは、パスワードは必ず、暗号化されたものを記述しなければならないということです!
先ほど、記述したalxiVIcdYlBjQというパスワードも、暗号化前は、「 himitsu 」という単語だったものなのです。
暗号化するには、暗号作成ツールをウェブで検索し、ダウンロード・利用してください。
「 .htaccess パスワード作成 」で検索すると色々でてきますよ
(4)最後に、ファイルをアップロードしましょう!
それぞれ作成したファイルを適切なディレクトリにアップロードします。
.htaccessファイルは、アクセス制限をかけたいディレクトリに。
.passwdは、.htaccess内で指定した位置(今回は/homepage/secret/pass/のディレクトリ)へ格納します。
以上で、アクセス制限の作業手順は終了です。
あとは、動作を確認してみてください。

※サーバーによっては、.htaccessのようなアクセス制限ができないサーバーもありますので、注意しましょう!
また、以上の設定・アップロードなどの作業をCMSで手軽に行なえるサーバーもあるので、きちんとお使いのサーバーのサービスをチェックしてみましょう!!

次に、セキュリティということで、今回はSSLについて取りあげます。
SSLという言葉、どこかで見覚えがありませんか?
この言葉は、Secure Socket Layerの略で、ウェブで情報の送受信を行なう時に、情報を暗号化し、安全に情報のやりとりができるプロトコルという意味です。
ときおり、URLでhttps://~と記述されているものを見かけるのですが、これはSSLの機能がhttpというプロトコルと合体したものなんですよ
単純に、会社案内のみを掲載しているウェブサイトでは、SSLは必要ありませんが、ECサイトなどで個人情報を送受信する必要があるサイトでは、これは絶対的に必要なものです!
自作で、ショッピング用のシステムを作っても、SSLを利用するなど、セキュリティの面での保護ができていないと、個人情報が漏洩する事故が起きかねません
SSLの利用にはすこし値段は張りますが、このような対策をすることが、ウェブで個人情報をやりとりするための最低限のルールだと思います。
セキュリティに対して、意識されていなかった方はこれを機会に少し勉強してみては?

 

WEB(ホームページ)デザイン上級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

デザインの学校 ウェブデザイン 実戦編 第7回

めっきり寒くなってきました!!
って言うのも当たり前ですね。。。もう12月
クリスマスの時期です
ホワイトクリスマスとか、ロマンチックでいいですよねぇ
さて、本日は音声と映像の授業です”
まずは、言葉のお勉強から。
・エンコード ( Encode ) :データの圧縮や暗号化、元の信号に戻せるような変換
・デコード ( Decode ) :エンコードされた信号を戻すこと
次に、音声・映像のそれぞれについてもう少し詳しく書きたいと思います。
《 音 声 》
(1)エンコードの例
エンコードはデータの圧縮を行うことです。
音声データでは、例えば、CDなどのPCM音声データを10分の1にまで圧縮できるファイルフォーマットがあり、それをMP3と言います。
皆さんが使用しているiPod。
この音声データのファイルフォーマットがMP3です。
たくさん曲数が入りますよね
これもエンコードされているおかげです。
具体的にお話しするなら、通常CDは曲が15~20曲入るのですが、これをMP3にエンコーディングすると150~200曲入るようになるという感じです
(2)拡張子について
音声の拡張子には、大まかに4種類あります。
まずは
・WAV( .wav ):Windowsの標準的なファイル形式で、あまり圧縮されないので、ファイルサイズは大きいのですが、音質は良好。
・AIF( .aif ):Macintoshで使用される標準的な音声ファイル形式。WAVとほぼ同じ形態。
・MP3( .mp3 ):WAVやAIFと比較し、小さいファイルサイズですが、音質は若干劣る程度。
・MID( .mid ):上の三つのファイル形式は音声ファイルをそのまま保存しているのに対して、「 どこで、どの高さの音を、どの音色で流すか 」という情報しかない。ファイルサイズは非常に軽いが、聴く環境によって音質も異なる場合もあります。
(3)音声のエンコードについて
音声をエンコードする( 圧縮する )と、データはエンコードするたびに劣化していきます。
デジタルであれば、劣化は少なくてすみます。
ファイルを小さくするには、
・データ形式
・サンプリング周波数
・ビットレート( 量子化ビット数 )
で決定します。
●サンプリング周波数:通常のCDでの音楽は、44.1MHzですが、映像とともに使用する場合には、48kHzと決まっています。
サンプリング周波数を半分にして、データを縮小する方法もあります。
以下はデジタル化された音声信号のサンプリング周波数です。
・MD 44.1kHz
・DCC 48kHz、44.1kHz、32kHz
・DVD-Video 48kHz
・DVD-Audio 96kHz、92kHz
・mini DVビデオ 32kHz、48kHz
・デジタルケーブルTV 48kHz
・デジタル衛星放送TV 48kHz
・FMステレオ放送中継 32kHz
・電話 300Hz~3.4kHz、8kHz
●ビットレート数( 量子化ビット数 )
ビットレートはbps( ビットパーセカンド )という単位で示され、一秒間に何ビット伝送するのか?いうことを表示します。
数字が大きいほど高品質で、エンコード時間と比例します。
これらのことを踏まえながら、データを作成する目的を考えます。
盗用を避けるためには、あえて品質を落とす。など。
そのほかにも、利用者のことを考慮し、ダウンロードしやすい( ファイルサイズが軽い )や再生しやすい( 特別なソフト・知識を必要としない )なども考え、エンコード作業に移りましょう。
つぎは、映像、主に動画についてです。
《 映 像 》
(1)エンコードについて
動画には、テレビ・ビデオ・DVD・ハイビジョン・映画。
その他、PC用アニメーションとして、FLASH、GIFなどがあります。
それぞれ、一秒間に使用するコマ( フレーム数 )は以下のとおりです。
テレビ 29.97
ビデオ 30
DVD 29.97、30、60
ハイビジョン 30、60
映画 24
FLASH 1~10
GIF 1~10
テレビからハイビジョンまでの数字が、30前後なのは、人間の目が30フレーム/1秒 以上は理解できにくいという理由からです。
最低15~20フレームあると動画がスムーズであると認識します。
●VBR
VBR( Variable Bit Rate )回線を通じて伝送されるデータ量( ビットレート )が、その回線の混雑状況やファイル容量によって自動的に変化するストリーム制御方式のことを言います。
動きや画像の内容が混み合っているときは、ビットレートを高く、単調な場合には低くなります。
●インターレースとプログレッシブについて
まずは、ここで「 走査線 」についてお話します。
・走査線:ディスプレイ・テレビの画面は走査線が大量に横向きに走っています。
その、走査線が上部から順に画像を表示していくことで、画面が表示されます。
・インターレース:インターレースは、先ほど紹介した走査線の奇数段目を最初に、偶数段目を次に表示していく方式。
画面のちらつきなどが抑えられるため、ほとんどのテレビで採用されている。
・プログレッシブ:上の走査線から順次表示していく方式。
ノンインターレースとも呼ばれる。静止画を表示する場合などに使用される。
●アスペクト比
画面・画像の縦横費。
・ 4:3 :コンピュータモニタ、テレビの地上波放送、BS放送( ハイビジョンを除く )
・16:9 :BSデジタルを含むハイビジョン放送
以上が基本的な予備知識で、以下はエンコードの流れです。
1.動画のサンプリング・キャプチャ
2.非圧縮で保存
3.用途に応じて圧縮、フォーマット
4.保存
(2)拡張子について
・asf
・wma
・wmv
・avi
・wav
・mpeg
・mp3
・aiff
・au
・CD
・midi
ここまでがまず知識的なお勉強ということで。
その後に、早速動画の編集をしました。
一日の時間の7割はこのお勉強に費やしてしまったような気もします、が!
残り時間でちょこっと動画編集ソフトに触れました
今回は、Windowsに付属しているDVDメーカーを利用します。
このソフトを使用すると容易に、タイトルつけや画像の編集などができちゃいます
今回は、2つの動画ファイルを1つにつなぎ、タイトル・エンドロールをつける作業をしました。
操作方法としては、Power Pointに似ていたような…?
しかも効果は本当にそっくり!
Power Pointを利用されたことのある方は、わかっていただけるかも??
あまりプロ向きのソフトという雰囲気ではありませんが、まずは導入としてぴったりのソフトです
まずは、このソフトを使用して、動画編集の第一歩を踏み出してみてはいかがでしょうか?

 

WEB(ホームページ)デザイン上級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

デザインの学校 ウェブデザイン 実戦編 第6回

最近めっきり寒くなってまいりました。。。
ここ山梨は寒すぎます
さてさて今回、授業で触れたのは、Google Maps ( グーグルマップ )
みなさん、ご存知ですか?Google マップ
Google マップとは ●
Google マップでは、数十億ものウェブ ページの中から地域の店やサービスを抽出し、第三者から提供されるデータと照らし合わせて、特定の地域の情報を表示します。
( Google マップBETA ヘルプより http://local.google.co.jp/support/bin/answer.py?answer=7060
例えば、渋谷へおでかけ。
スイーツが食べたいけど、どこがいい??っていう時には、Google マップで『 お店やサービスを検索 』!
すると地図右側に渋谷のスイーツ関連店舗の一覧が表示されます
しかも、その店舗の概要や詳細・利用者のレビュー、関連するホームページまでが一発検索!!
気になるお店を見つけたら、すぐに印刷すれば迷わずに目的地へ行けちゃいます。
さらに、さらに!マップをドラッグすれば地図を思い通りに動かして、気になる場所をすぐに表示できます。
最高に便利
マップと地域情報の連携は、土地勘のない場所、旅行者や自分の暮らす県内でもめったに行かないような場所を訪れるとき、県内外の人達と一箇所に集まるときなどに便利です!

Googleのすごいところは、このマップを無料で提供してしまうとところです!
といっても、さすがに、この地域の情報検索機能までは提供していないですが
このベースとなる、「 ドラッグで好きな場所に移動できるマップ 」が無料提供されているのです。
それを利用した地図と情報の連動しているサイトって色々でてきてます。
ということで、いくつかご紹介。
山梨県内では、Google マップを利用して作られているサイトはなかなかないのですが…
山梨県不動産ポータル 不動産ネット山梨
ここでは、Google マップを利用して、地図と不動産情報が連動した情報提供を行っています
不動産と地図。これも切っても切り離せない間柄ですもんね
他には…
過去の出来事をマップから探せる Knecht クロニクル
好きなドラマや映画のロケ地が写真と説明付で楽しめる 全国ロケ地図
などなど。。。
いろいろあるんです。
ここまで上手にGoogleマップを使うには、きちんとしたシステムを組む必要がありますが、そこまでしなくても「 ドラッグで好きな場所に移動できるgoogleマップ 」を自サイトに表示させることが可能なんです!
ということで、今回はみんなでマップを作って設置するまでの流れを勉強しました!
使用したソフトは GoogleMapsEditor
これで、Google が提供している GoogleMaps や GoogleMapsAPI を利用した地図コンテンツをプログラム知識がなくても作成できるのです。
これを使用するには、まずGoogleでAPIキーというものを取得する必要があります。
API キーは、サイト毎に用意する必要があり、他のサイトのAPI キーを自分のサイトで利用するとエラーを起こすのです。
取得したAPI キーと地図で表示させたい地点の住所。
この二つとGoogleMapsEditorがあれば、完成まではすぐです!
API キーと、生成する地図の住所をそれぞれ入力。
「 登録 」ボタンを押して、住所を登録。
最後に「 地図を作成 」ボタンを押せば、Googleマップ入りのHTMLが生成されます
他にも、地図にはタイトルや製作者の名前も記入できるなど、色々とプチ機能がついています。
こうして制作した地図は、会社の所在地表示などで利用できます
でもここでポイントなのは、

という文字コードのHTMLでは、せっかく作ったGoogleマップが表示されないというところ

UTF-8の文字コードのHTMLで表示してくださいね
うまくまとまってない気もしますが…では、また再来週に

 

WEB(ホームページ)デザイン上級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

デザインの学校 ウェブデザイン 実戦編 第5回

実践編、開始してからやっと五回目となりました!!
先日終了したDTPの基礎編は週二回、ウェブデザイン実践編は隔週1回。
なかなか進んでる実感はなかったのですが、五回目、十回目など節目的な回数になると…
進んでるぞー!っていうの実感します
さてさて、今回はフリーアドレスオフィスについて取り上げたいと思います。
まず…
フリーアドレスオフィスって何?
ということで、まずは言葉の意味から
カンタンに言うなら、社員が個々に机を持たないオフィススタイルのこと。
図書館みたいに、自由に席を選べる職場ということですね。
携帯電話や無線IP電話、無線LAN、そのほかノートパソコンを持って、空いている机で仕事をする…なんだか不思議な気がします。
どの席がいいかな?って探すのってテスト勉強で図書館に行くときとお茶しにカフェに入るとき位だな~と思っていたので、このお話にはホントにビックリしました
このスタイルの利点は、社員それぞれが書類などを個人用のキャビネット、または部署の共用キャビネットに保管し、個人専用の空間は設けないので、個人の持ち物を削減して、オフィススペースを広く活用できるという点です
筆記用具などの個人用の道具はトートバッグやカゴなどに入れ、移動するのだそう。
そのほかにも、本来職場でデスクが並ぶフロアーは、単純に個人個人の仕事の空間でしかないのですが、フリーアドレスのオフィスでなら、ある場所では個人作業を、ある場所では打ち合わせをなど、用途に合わせてさまざまな使用方法が考えられます。
多目的な空間にすることで、スペースを削減することも可能となるのです
または、異部署間の交流が密接にできるようになるのも利点ですね。
こうすることで、一共同体の連帯感が生まれ、会話も増えれば仕事の質が高くなるかもしれません
オフィススペース確保・有効利用・交流のためのこのスタイルですが、ちょこちょこ調べてみると、どうやらこのスタイルはなかなか日本では浸透しにくいのかも?という状態が見えてきます
まずは、従来の職場をイメージすると、そのデスクの置き場所には、それぞれの立場・役職が定着しているのがわかりますね。
つまり、フリーアドレスなオフィスでは、いつかはあの席に座ってみせる!!という野望は持てなくなるということです
にんじんを追いかけ走る馬…というとあまり良い例えじゃないかもしれないですが
目に見える目標があることって、とても大切です。
それで気力が充実することもありますし、実際それを目標に頑張っている人もいるのではないでしょうか
また、知らない場所に放り出されると、不安になってしまう人が少なからずいるように、
「自分には自分のテリトリーがある」
「存在する場所がある」
という事実は私たちにとって気持ちの安定材料の1つとなっているようです。
とても抽象的な言い方になってしまいましたが
広い空間の中、誰もいないのに、知らない人が自分のすぐ隣に腰掛けたりしたとしたら…
なんで?とか嫌だなって気持ちを持つ人もいるのではないでしょうか?
近い距離で、机を並べて仕事をしていても安心なのは、1デスクが自分の分のスペースだと自覚できるからなんでしょうね
自分のテリトリーがあって、それは基本的に不可侵だと思えるのが、安心して仕事ができるということの大前提なのかもしれません。
そんな精神的な部分に関わる問題だからこそ、利点がありながらもなかなか浸透しないのですね
それでも、メリットは捨てがたい!
これから会社に勤務する人々もどんどん世代が入れ替わっていく訳ですが、所在に強く執着する傾向は年齢が高いほどにあるような気がします。
…ということは、これからどんどんこのスタイルが採用されて、標準になる時代が来るのかも
まだまだ先が気になる、フリーアドレスオフィスのご紹介でした
では、また再来週にお会いしましょう

 

WEB(ホームページ)デザイン上級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

デザインの学校 ウェブデザイン 実戦編 第4回

さてさて今回は、ついにFlashの授業です
今回はMacromedia Flash8を利用しての、初のFlash制作体験です。
では、早速制作!
…の前にFlashとは何か・Macromedia Flash8でできることは何か?
そこからご説明します
FLASHとは主にAdobe flashソフトなどを使用して、制作されるファイル『 flashファイル 』のことを指します。
Adobe flashソフトを使えばさまざまなものがつくれるんです
イラストを描いたり、テキストを入力したり、ActionScriptと呼ばれるプログラムでユーザからの入力データを処理したり、CGIと連携させたり…などなど。
その他、動画・音声ファイルを読み込むことができ、早送り・巻き戻しといった動画プレイヤーもつくることができます!!
自分が描いたイラストをごく短時間で切り替えることで、動画(いわゆるアニメーション)として表示することができます
さらに、動かすだけではなく、拡大縮小、回転・傾斜、色の置き換えなど、わりと自由に編集が可能なんです
さて、それでは制作中に必要な言葉を確認しつつ、いざ制作へ!
〈 制作中に必要な言葉 〉
ステージ
イラストやテキストなどなどを配置するスペース。
タイムライン
時間経過の表示。
右に進むと時間が経過する。
(1)Fire Works、Illustrator、Photo Shopなどのアプリケーションの利用ができる人は、使いたいパーツをたくさん作りましょう
Flashソフト内にも、描画のできるツールは入っているのでそこで作っても可です!
(2)パーツ作りが完了したら、各パーツを1つ1つのレイヤーに分けてステージ上に配置していきます。
完成図を考えながらレイアウト
同じグループのものでも、動きが違うものはきちんと違うレイヤーにしておくとよいです
※例:ブログ記事最下部、Flashバナーの“ 宇宙人本体 ”と“ 宇宙人の手 ”など
レイアウトとレイヤー別けが完了したら…
(3)最後は、それぞれのパーツを時間軸に沿ってどのように見せるかという部分の設定を行います。
タイムライン内で、フレームという単位で区切って編集していきます。
タイムラインの上で、各パーツの表示したいと思う部分にフレームをまず挿入。
続いて、パーツを動かしたい場合には、モーショントゥイーンを挿入。
さらに、アクションを起こしたい部分には鍵(キー)となる、キーフレームを挿入。
ここまで設定したら、キーフレーム挿入部分のパーツの動きを決めます。
例えば、1フレーム目ではステージ外にあった、小さいサイズの「 宇宙へ行こう 」というテキストを10フレーム目にバナー中央に配置。
たったそれだけで、まさに下のバナーの「 宇宙へ行こう 」という字の動きが表現できるのです!
こうやってすべてのパーツに動きを設定した完成品は
コチラ

なんとかここまで書いてみましたが、言葉で表現するのがだんだん難しくなってきました
自分のサイトをかっこよくしたいとお考えの方は、是非Flashづくりを体験してみてください。
気になる人はまず、ソフトをダウンロード。
今回私の使用したソフトはコチラnextMacromedia Flash8
30日間の無料トライアルができるので、試してみてください
では、今回はこの辺で!

 

WEB(ホームページ)デザイン上級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

  • デザインでお困りの企業様
  • 人材や教育でお困りの企業様