Flash画像のクロスフェード

5枚の写真をクロスフェード表示：作成所要時間5分程度クロスフェードの設定キーフレームの挿入：ActionScriptなどの投入時に挿入するクラシックトゥイーンを作成：前後に設定したシンボルの中間動作を自動生成・TIPS 画像素材には著作権が存在している場…

2014-02-27

Illustratorでの描画演習&ActionScriptの基礎演習

動かしたい画像を作業領域へペーストし、画像選択後、 [F8] でシンボルへ変換名前は英数大文字で登録するとわかりやすい種類をムービークリップに選択しライブラリに登録インスタンス名を英数小文字で登録 ActionScriptパネルを開き、命令する 1pxずつ移…

2014-02-25

Flashの基礎&JavaScriptによる画像置換

ECMA Script（エクマスクリプト） JavaScript ActionScript（Flash） ↓ ↓ DOM AS3.0（Java） ↓ jQuery ・Flash インタプリタとコンパイルを同時に行っている基本的に完成形から作成し、タイムラインを反転させることで作りこむライブラリ（オブジェクト） …

2014-02-24

CSS基礎確認テスト&Photoshopでボタン作成

！！要復習事項！！ [Alt]を使用したレイヤーコピー移動ツールを選択後、コピーしたいレイヤーを選択し、 [Alt]を押しながら矢印のみor＋[Shift]で移動すぐ[Alt]を離し目標地点へ移動 [Alt]を押したまま移動するとレイヤーが移動したぶん複製されてしまう…

2014-02-21

positionを使ったレイアウト

position: relative（相対的） position: absolute（絶対的）一見便利にレイアウトできそうではあるが、コンテンツの内容記述に多用した場合、検索エンジンからその内容は読み込まれず、上位表示に不利。・TIPS marginとpaddingの使い分け idを振った要素…

2014-02-20

Illustratorボタンデザイン&CSS Spriteでナビゲーション設定

1px幅で描いたオブジェクトは、大きさを指定していたとしても1px（両側に0.5px）大きくなる。それを防ぐために（指定した大きさぴったりにするために）『線を内側に揃える』を指定する。 HTTPリクエストを最小限に抑えるために1枚の画像で可変表示可能にす…

2014-02-19

CSSレイアウト演習＆Photoshop素材作成

<html lang="ja"> <head> <meta charset="UTF-8"> <title>卵料理カフェ Cockeyolly</title> <link rel="stylesheet" href="CSS/style1.css"> </head> <body> <div id="container"> <div id="header"> <h1><img src="img/logo.gif" width="82" height="78" alt="卵料理カフェ Cockeyolly"></h1> <div id="nav"> <ul> </ul></div></div></div></body></html>

2014-02-18

Photoshopボタン作成＆CSSレイアウトの演習

http://www.daiwa-hotcom.com/ freeweb：WordPressが使用できる無料サーバー（講義で使用するためアカウント作成する http://jp.jimdo.com/ HTML不要でwebページ作成可能 http://ja.wix.com/ HTML不要でwebページ作成可能 https://thebase.in/ ネットショッ…

2014-02-17

floatを使ったレイアウト：テスト＆

<html lang="ja"> <head> <meta charset="UTF-8"> <title>floatを使ったレイアウト：テスト</title> <link rel="stylesheet" href="0217/CSS/style1.css"> </head> <body> <div id="container"> <div id="header">ここにheaderの内容が入る</div> <div id="nav"> <ul> <li><a href="#">カテゴリ１</a></li> <li><a href="#">カテゴリ２</a><…</li></ul></div></div></body></html>

2014-02-14

CSSナビゲーションの復習＆コピースタンプツール

diplay: block a:hoverに枠線背景色＃FFF 文字色＃ li #xxx a コントロール押しながらレイヤークリックイメージ→切り抜きでアイコン化 colorzilla：Webサイトに表示された色を調べることができるアドオン pearl crescent pagesaver：Webページを保存でき…

2014-02-13

CSSナビゲーションブロック＆Photoshop写真の合成とレイヤー

縦並びと横並びのナビゲーションブロックを作成。 list-style-type: none; リストの前の数字や中点を消す text-decoration: none; リンクの下線などを消す diplay: block; ブロックボックスを生成する ////////////////////////////////////////////////////…