FrontPage > WebDevelopment > Flash+HTML > Scool Festival Site 2009 (Now)



はじめに

2009年学園祭の特設サイトを作ろうってことで、立ち上げたWiki。
経過とかを書くくらいしかないか?

Site Concept を決めようず!

なにはともあれ、どんなことをやるか決めないことには始まらない。

コンセプト

なにが目的ですか?

  • 学園祭の出品物一覧作成
  • 当日までのナビゲート
  • 当日のナビゲート

なにが目標ですか?

  • シンプル、すっきり
  • わかりやすい

誰に見せますか?

  • 学園祭にきてくれた人
  • 学園祭にきてくれそうな人

コンテンツ

内容がもっとも大事ですよね

  • Main Page (別のページへのナビゲーションとか日程とか?)
  • 学園祭告知ページ (展示作品一覧と、紹介ページ、ゲームの場合はチュートリアルとかあるといいかも)
  • 研究発表告知ページ (研究発表一覧と、詳しい日程)

配色アイディア

ベースカラー

  • 白、青、黒

アクセントカラー

  • オレンジ

学園祭のページ配色

  • 白6, 青,2 黒1, オレンジ1

研究発表のページ配色

  • 青6, 白2, 黒1, オレンジ1

Site の構造を決めよう

大まかな構造

  • Start Page - HTML+Flash または HTML+CSS を選択
    • HTML - データの大元 + 外部CSSを読み込み
      • CSS - 外部CSS
      • FLASH - Flash で読み込む

ページ構成

部展サイト構成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
////
//
index
  |___about - 学園祭とはなにか、部展示とは何か、CACとはなにかみたいな?
  |
  |___roomlayout - これを作らないと逝けないのね。間に合わないなら、テーブル形式でおk
  |     |___  ※ 名前をページ名にしようかな
  |     |___  ※ 各ページのフォーマットは、以下の通り
  |     |___    - Title - 展示物のタイトル
  |     |___    - Genre - 展示物のタイプ、ジャンル
  |     |___    - Summary - どんなものか
  |     |___    - Picture - スクリーンショット、または自分の自画像
  |     |___    - できれば、操作説明
  |
  |___access
  |
  |___contact
  |
  |___link
//
////

研究発表サイト構成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
////
//
index
  |___about
  |
  |___ timetable
  |     |
  |     |___※ 名前をページ名にしようかな
  |     |___  ※ 各ページのフォーマットは、以下の通り
  |     |___    - Title - 発表のタイトル
  |     |___    - Name - 発表者の名前
  |     |___    - Summary - 発表の概要
  |     |___    - Picture - 発表に関連する絵。自画像とかでもいい。
  |
  |___access
  |
  |___contact
  |
  |___link
//
////

必要な素材を決定しる![未]

必要な素材を探してくる、作ろうず![未]

Progression で作ろうず!!

いよいよ、サイトコンセプトとか決まって来たし、作っていきましょうかね。
サイトの構造とかは、gihyoの特集記事を参考にしています。

とりあえず、画面遷移

Progression の一番いいところは、画面遷移とかが簡単に実装できること?
百聞は一見にしかず、とにかくやっていきましょう。

ページを作ろう

SceneObject? を作れば良いんだけど。

Index クラスは、DocumentClass?以外には使用できません。
ああ、なるほど、ASで開発する場合は、最初のクラスを、castDocumentClass? を extends しないといけないのね。
ふむ、コンパイルエラーはなくなった。
ok、なんか表示できたぞ。
素材を一切作っていないから、色々とめんどくさそうだぞ...と今更気がつく。
ま、いいや、ページ構成に使うクラスをもそもそつくってしまおうか。
とりあえず、ページが遷移できるようになって来た...だけど、なんか設定通りにやっているのに遷移しないシーンがあるという。何故だ

まぁ、いいや、なんかProgressionのサイトにもアクセスできないし、ここはさっさと動くボタンを設計しちゃいますかね。

コピペコピペ...、サイトをFlashで作るの大変じゃね?w

textデータを読み込んで表示させてみるか?

ふむ、これは、Progressionのシステムにはなさそうなので、ビルドインのクラス群でなんとかします。
よみこめねぇよおおおおおおおおお!!!!!!!!!!!
あらやだ、取り乱しちゃったわ、おほほほ。
とりあえず、出たエラー。

Error #2044: ハンドルされていない IOErrorEvent : text=Error #2035: URL が見つかりません。

XML などで読み込む画像やら swf やらのパスが間違っているときに出るエラー。だってさ。
こまったことに、もう1つ出る。

Error #2044: ハンドルされていない IOErrorEvent : text=Error #2124: 読み込まれたファイルの形式が不明です。

とりあえず、2つをGoogleってみたけど、txt形式のファイルを読み込むのはダメみたい?

じゃあ、xml形式で作っちまえよ!

こっちは、読み込む専用のクラスがあるから、いけるでしょ。
今まで使わなかったから、読んでなかったけど、助けてコリン!!!
うん、やっぱりここだけ難解(笑
何が難解なのかわかった。このXML/E4Xの章は、外部XMLデータの読み込み形式で描いてない。
いかにコーディングするか描いてあるから、わかんないんだ。
とりあえず、外部XMLデータを作ってみよう。それを読み込んでみよう。

形式の問題

とりあえず、最初に宣言、文字コードを入れる。
後は、構造化するだけ。簡単簡単。

Action Script 3.0 における仕様

XMLクラスがあるみたい。
早速使ってみましょ。何か、足くさいな、おれ。
どうやら表示までこぎ着けた、がしかし。処理が止まらないオチ。
いったいなにがおこっているんだ?
おk、ローダにつかう宣言が違うらしい。

Loader Class じゃなくて、URLLoader Class を使うんだ。~

もしや、テキストよめなかったのも、そのせい?(汗
なんなくできた。え、なにこれ、ひどい。
次は、表示だな。

TextField? Class に、XML Class は渡せるのか?

できました。
いよおおおおおおし!
ちなみに、改行はどうするんだ?

p></p>タグで区切るのかな?
そんなことせずに、そのままやってくれました。xml最高。
うまくいったところで、そのXML文章を貼っておく

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="UTF-8" ?>
        <p>
                電子計算機応用部
                Computer Application Club
                CAC
                HTML やスタイルシート、JavaScript を使った Web コンテンツの作成や
                Java や C 言語といったプログラミング言語を使用して各種アプリケーションやゲームの作成を行っています。
                音楽を作っている人もいるとかいないとか?
                とにかく、自分が好きなことをパソコンを使って作っちまおうぜ!って部活です。
                
                「ないならば、作ってしまえ、クリエイト」
                
                部展「NEXT STEP」
                今年のCAC部展のテーマは、「Next Step」。
                新しい2回生部長の元、2回生を中心として活動してきました。
                今年は新入部員も増え、新しい部長の元、次のステップを踏み出した!
                的な?
                
                Mail Address:hogehoge[at]gmail.com
        </p>

次は、動くボタンだ

いよいよ、動かしていきますよ!Come on! DoToweener?!

なんかこう、フルフラッシュサイトにおけるブラウザのサイズ

色々なサイトをみて研究してみる

ベースのサイズを固定して、常に真ん中に表示さる

FLASH SITE CREATE
こんなサイトみたいな方法ね。
利点
常に表示が固定できるので、描画領域についてあれこれ悩まなくてすむ
欠点
描画領域が狭い。ページを全て活かしきれていない。

左上であることをうまくりようした方法

:ほとんどのフルフラッシュサイト?

利点
画面全体が使える
欠点
常に描画領域の問題が発生する

フルスクリーンにする方法は?

ん?stage インスタンスにFULLSCREEN_WIDTH 的な項目がある。
もしや、これを基準に作ればいいだけ?
途中で、ボタンをおしてフルスクリーンにしたりする方法はどうするのだろう?
stage インスタンスにその手のメソッドがあると予想。

うーん、やっぱり、なんかStageインスタンスが使いにくい

addChild()して出てくるのは、ルートで直接呼んだ時だけなのよね...。
引数として渡すか。

文字の色

白か、

古い形式の .swf の埋め込み

やっぱり、FLASH使わんと色々難しい事がわかった。 やってみましょう。

参考資料

リンク先タイトル:
一言感想。

参考文献

書籍名 - 著者 発行日 出版社:?
一言感想

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2009-10-17 (土) 05:05:26 (3947d)
Ads by Sitemix