GIFアニメ制作記09 県外版のスクールナビバナー制作
今更・・・って感じがしないでもないですが、ホッカイドウスクールナビとトウホクスクールナビがオープンしてます。オープンしてるのに、リンクバナーだけが沖縄版のまんまってのは、おかしいので作りました。とりあえず県外版のリンクバナーってことで、バナーの中に地方を指定する文字列は入れてません。
今更・・・って感じがしないでもないですが、ホッカイドウスクールナビとトウホクスクールナビがオープンしてます。オープンしてるのに、リンクバナーだけが沖縄版のまんまってのは、おかしいので作りました。とりあえず県外版のリンクバナーってことで、バナーの中に地方を指定する文字列は入れてません。
テキストをアピアランスと数値だけでバナー制作。
jpeg
png
何かいいデザインは無いかな~・・・ってバナー制作のために「一覧へ」ってボタンを入れようとしましたが、ボタンはボタン、バナーはバナーにした方が良いですね。ごっちゃにするとかえって変。あまり大きなバナーでもないし。
「送信する」になってるのは何かの汎用に使えねえかな、と思って制作しました。
久々にAiのアピアランスだけで作ったら、結構難儀・・。
ブログテンプレートのシンプルUSブルーとアクアオーシャンはコメントの投稿ボタンのマウスロールオーバーに、onmouseoverとonmouseoutを使ってるので書き換えれば使えますね。デカ過ぎるけど。
もちろんDLしてからでないと映りません。
午前中は社内コンテンツのスマートフォン版を触ってたけど、午後になってからいきなり仕事が入ってきました(゜Д゜;)
2万円ホームページは、新規で、まずはデザインから制作(中)。デザインが固まれば組込やドメイン取得。
高機能ホームページはドメイン取得がまだだけど、とりあえず会社のサブドメインで仮組込しとけ!みたいな感じで、PHPとMySQLを使って制作中。
とは言っても、MySQLを触るのはまだまだ先になりそうだけど、データベースだけ(正確にはテーブルは出来てるけど、中身はまだ)は作っときました。
ちなみに社内コンテンツですが、人によってPHPファイルの作り方が違うと聞いてたのですが、確かに違う、英語とロシア語くらいに違う(受け売り)ことが実感できました(笑)・・・じゃねえ、更新するファイルを見つけるのに手間取りました。まだ制作中です。
もう書くことは無いかもしれないと思ってたけど、GIFアニメ制作したので書いちゃいます・・・GIFアニメ制作記08。
誤解されると困るので、GIFアニメは先週の木曜日に制作しました。
GIFアニメ内の文言通り、「リフォームから修理、トラブル等の見積り・相談のかんたん比較」が出来ます。ご利用に関しては無料です。
沖縄で「リフォーム」と言うと、家もしくは部屋を丸ごと改装することを指すようだ、と聞いたので「修理」と言うキーワードも含めています。この修理に関しても、クーラーや水まわり、シロアリ駆除、防水・塗装・水タンク清掃と幅広いです。詳しくはリフォーム修理一括見積り相談を閲覧ください(サイト名ですが知らぬ間に変わってました)。言ってくれればGIFアニメの文言も変えたのにな・・・
サイズ
6サイズのGIFアニメを制作しました。
88×31, 100×60, 246×60, 468×60, 728×90, 125×125
ちなみにオールAIで作ったので、246×60は38.89KBと軽い方です。写真は1枚も入れてませんので。
似たようなGIFアニメで、おきなわタウンネット版と引越し一括見積りサイト版がありますが、最初のタイトルをパラパラっと落とすシーンよりも、シンプルに左から右にテキストが打ち込まれるシーンの方が、制作的には手間がかかりませんね( ̄~ ̄;)でも、20フレーム以上作っちゃいました(-_-;)125×125に関してはその倍のフレーム数です。
だったらFlashで作れ!って言われそうですが、あんな重いの作るよりGIFアニメの方がスマホにも汎用で使えます。スマホ(iPad含む)でFlashを見る場合、専用のアプリが無いと見れませんからねぇ。
以下、続きに出来立て6サイズ一覧あり。
去年の11月下旬~12月頭に受験したIllustrator ExpertとPhotoshop Expertの資格試験結果発表。
結果から言うと、2つの試験共に合格(゜∀゜)
ただ望ましい結果ではなく、低い方です。Illustratorの知識問題の合格率とかギリギリ60%でしたから。
前日一週間前はPhotoshopの試験問題しかしてなかったし、CS~CS5が無いのでIllustratorが全く触れませんでした(私のローカルにはPhotoshop CS2は入ってる)。今思い返すと、試験問題をよくCS5で出来たもんだ、と感心します!まあ使う機能はほぼ同じですから(゜∀゜)アヒャヒャヒャ…
あとは気になる事といえば、ビジュアル表現力という項目の意味。
これってどういう風に採点してるのかがよく分かりません。
以前もそう思ったのですが、ビジュアル表現力は一流デザイナーが作ったデータと、受験者の制作したデータをプログラムで照合してんのかな~・・・って思います。もしくはサーティファイで数十人のデザイナーを雇い、直接制作データを見て採点してんのかな、と。
後者は大変にりるだろうな( ̄~ ̄;)
タウンネットBlogの姉妹サイトになるかは知りませんが、沖縄移住者サイトに制作済みWebバナーが掲載されていました(^∀^)
採用されたGIFアニメはどちらも246×60のサイズでした。
このサイズならナビゲーションメニューにも対応できて良いですね。ただ後者の沖縄格安印刷デザインのWebバナーは301.41KBと、キャプチャーを使ったので前者(沖縄タウンネットのバナー:サイズは22.53KB)よりも15倍くらい重いです。
・・ところで残りの5サイズについてはどう使われるんだろう?
今日は代休を使って仕事はお休み。有給休暇もフルで残ってるけど、まずは代休の処理が優先。でも使おうにも使う理由がないので困ります。
ってなわけで特に理由は無いけど、使わなかったらそのまま平気で年越して使いそうなので今日使いました^^;
そして暇人してます。ネカフェで。
ネカフェに居るついでに・・・
今取り扱っているHPの案件でjQueryかFlashはどちらがいいのか?って思ったので、実際にjQueryのソースを拾ってきました。拾ってこのブログに貼り付けて動作確認とかしてみたりしてます。
ちなみにGoogle APIが必要らしいのでそれも拾ってきました。
1.4.2
これはバージョンかな・・
最新は1.7だったと思う。
上記のソースを貼り付けて動作検証すると、全てのテキストリンクが新規タブで開けました。
ただ、全てを新規タブで開くと「うぜぇ!」って気になるので、今は隠してます。「/* */」で。
でも有ると無いとでは断然違いますね(^∀^)
Flashの場合、サイズが重いし制作時間が大幅に掛かっちゃうので、画像の映り変わりだけだったらjQueryでも良いかな、と思います。
昨日・・いや一昨日から、5万円HPでFlashの制作をすることになりました。しかもフリーソフトでFlash制作。
んで、これは昨日の話。
今回使用したフリーソフトは'parafla'です。DLした後はZIPを解凍し、起動。
最初は使い方を全然知りませんし、Adobe以外の製品で制作って・・的な抵抗がありました。が、ネット上には無数のマニュアルが存在するし、paraflaに備わってるヘルプよりも読み易く、分かり易くて仕事をしながら勉強&制作に取り掛かってました(笑)
paraflaでの実作業は直感的で数値を入力していればFlashが出来上がっていくので結構簡単に出来上がります。しかし、難点があります。それはレイヤーやタイムラインが無い事です。
無かったけど調べて行く内に分かったことがあります。それが「深度」と呼ばれる存在。階層ではなく深度・・何故、深度なんだろう?とか疑問を持ちますが、前面に置きたいオブジェクトの重要度とでも言った方が良いでしょうか、それがキーでした。
深度は数値が上がるほど前面に来ます。最初は0と1だけしか使ってなかったのですが、それだとプレビューしたとき1つのスプライトしか動いてませんでしたので、2以上の深度をもってプレビューしたとき初めて2つのスプライトが動かせました。
※スプライトは、「Flashの中にFlashを作成するもの」と例えられていました。確かにその通りです。敢えて補足すると、複数のレイヤーを同時に動かしたいときに用いる方法です。動かす為の「メイン」というものを第1階層に分類されオブジェクトを1つしか動かせないので、スプライトをメインの中に作り、その中でオブジェクトを動かすというものでした。要するにフォルダみたいなものだと言う事。
この仕組みが分かると作業効率が一気に良くなりFlashが完成。SWFファイルにした後、HTML編集用にHTMLファイルとして保存しました。
残るは5万円HPのクライアントページに貼るだけなのですが、貼り付けてもページでは見れないという結果になりました。<object>で貼り付けたんですがNG。なら<embed>を<object>内に埋め込んだけど表示されないどころか、入力した文字列が消えていました。これはおかしいのでJavaScriptでも貼り付けてみたんですが、結果NG。
という訳で、この仕事は一端保留になりました(>_<)・・・Flashは出来てますよ。ただ、ページに貼り付けても反映されないだけの話です。
ケソケソさん、Flashの指導ありがとうございます。
Anjiさん、JavaScriptありがとうございます。
久々のGIFアニメ制作記!もう「07」まで来るとは・・。
「タウンネット引越し業者 無料一括見積もりサイト」のGIFアニメです。昨日言われて3個作り、今日残りの3個の制作が完了しました。
88×31
100×60
246×60
468×60
728×90
125×125
今回は文字が少なかったのでテストで作ったものもありますが、やっぱ伝えたい文字列が含まれているのは01~06なので、こちらを選んで制作しました。
殆ど同じです。制作スピードを上げるために、凄えシンプルに且つ素材の作成から入ったので、結構時間短縮して作れました。GIFアニメ制作記05までの自分なら、1から作ってたと思いますが、01・02・06を先にシンプルに作り上げ、06の素材(背景とキャラ)をコピー。03・04・05に活かしました。見て分かると思いますが、03・04・05はサイズが大きくなっただけです。
表示確認も良好でしたが、IEとFirefoxでアクションスピードが全然違う気がします。なんかFirefoxが速い気がします。