웹 아트 테크닉

Prologue

1장. 거침없는 표현의 질주; www.gmunk.com

Part1. 사이트 리뷰
1) 역동적인 모션 그래픽
2) 내러티브 인터렉티비티의 실험
[Tip] 다양한 인터렉티비티 구현
3) 모션 그래픽과 자연스럽게 어우러진 3D와 스크린 샷

Part2. 플래시 무비를 위한 사운드
1) 플래시 무비를 위한 사운드 기법
[참고] 효과음과 배경음악을 구할 수 있는 인터넷 사이트
2) 사운드 편집 프로그램
[참고] 쿨 에디트 2000
3) 사운드 편집 테크닉
[참고] 플래시 사운드 수상작 및 사운드 쿨 사이트

Part3. Contention_it.uk 인트로 제작하기
1) 각 채널의 화면이 랜덤하게 나타나는 TV
[Tip] 플래시에서 백그라운드 투명 이미지를 위해 사용되는 png 파일
[Tip] Fireworks PNG Import settings 대화상자
[Tip] 투명버튼 만들기
2) 재미있는 3D 효과로 만드는 뉴스캐스터
3) 채널마다 바뀌는 사운드
4) 미니 텍스트 박스 설치 및 연속 버튼을 이용한 텍스트 스크롤
[Tip] 플래시 무비에서의 미니 폰트 노하우
[Tip] 디바이스 폰트란 무엇인가?
5) 다이나믹 텍스트와 scroll 함수를 이용한 텍스트 스크롤
[Tip] loadVariable 액션 사용법

2장. 마우스 스크롤로 나타나는 공간과 시간의 교차; www.yigal-azrouel.com

Part1. 사이트 리뷰
1) 마우스 스크롤 효과
2) 공간과 시간의 교차를 표현하고 있는 모션
3) www.yigal-azroul.com의 인터페이스 연구

Part2. 사진이미지 표현기법
1) 정지된 사진으로 표현하는 역동성
2) 마스크 이펙트를 이용한 인상적인 이미지
[참고] 한 장의 사진이미지로 모션을 표현한 또 다른 사이트

Part3. Mouse Scroll 효과 제작하기
1) 마우스 포인터에서 만나는 수평라인과 수직라인
[Tip] 배경이미지, 스테이지에 정교하게 배치하기
[Tip] Math.random 함수
2) 마우스 스크롤 효과

3장. 액션스크립트로 무장한 탁월한 인터페이스; www.barneys.com

Part1. 사이트 리뷰
1) 이미지의 슬라이딩 효과
[Tip] www.barneys.com을 디자인한 Joshua Davis는 어떤 웹디자이너일까?
2) 비즈니스 웹 인터페이스의 새로운 패러다임

Part2. 성공적인 사이트를 위한 웹 인터페이스 집중탐구
1) 웹에서의 인터페이스 디자인이란
2) 성공적인 웹 인터페이스를 구축하는 비결
[참고] HCI(Human-Computer Interaction)
3) 플래시 무비에서의 인터페이스

Part3. Sliding Scroll 효과 제작하기
1) 슬라이딩 스크롤 효과
2) 드래그 되는 메뉴창
3) 메뉴에서 나타는 도움말 박스
[Tip] 투명버튼 이란
4) 자기 위치로 날아가는 메뉴창
[Tip] 'dragmenu.fla'의 제작과정
5) 어안 텍스트 효과
[Tip] 어안 텍스트 테크닉 효과
6) 신비스런 문양을 창조하는 마스크 이펙트

4장. 비디오를 메타포로 한 플래시 기법; www.HillmanCurtis.com

Part1. 사이트 리뷰
1) Hillman Cutis의 모션 그래픽 디자인에 관한 철학
2) Hillman Cutis의 주요 작품 리뷰

Part2. 비디오 모션 기법
1) 비디오 모션 기법 준비운동
[참고] 동영상을 플래시 포맷으로 변화시켜주는 소프트웨어, Vid2flash
[참고] 디지털 비디오 카메라 이야기
2) 동영상 편집 프로그램을 이용한 동영상 편집
[참고] FireWire
3) 비디오 모션 기법 적용하기
[참고] 프리미어에서 프로젝트를 만들 때 처음 세팅해야 하는 부분
[참고] 포토샵에서 소스 이미지 보정하기

Part3. Manifestival의 메인무비 제작하기
1) Manifestival 메인무비의 인터페이스 틀 잡기
2) 피루엣 동작을 하는 Dancer 이미지 제작하기
[Tip] 피루엣 모션 나누기
3) 마우스 포인터가 버튼 위에 있을 때만 나타나는 수직라인 만들기
[Tip] 무비클립 심볼과 그래픽 심볼의 차이
4) Tunnel과 Subway 무비클립을 독립무비로 분리시키기
5) 무비제어 버튼과 액션스크립트 설치하기

5장. 3D와 플래시의 만남; www.mtv2.co.uk 외

Part1. 사이트 리뷰
1) 3D 인터페이스 & 입체 네비게이션(www.mtv2.co.uk)
2) SF 영화를 보는 듯한 뛰어난 3D 기법(www.derbouer.de)
3) 3D 인터렉티브 스토리북(www.alphazekka.com)
4) 독특한 3D 로봇 서핑(www.designsaaembly.com)
5) Swift 3D로 만든 프로모션 사이트(devlab.swift3d.com)
6) 작고 재미있는 3D Flash 게임(www.gametuner.com/contest/)

Part2. 플래시에서의 3D 표현기법
1) 3D와 플래시
2) Swift 3D를 이용한 3D 플래시 테크닉
3) Vector 3D를 이용한 3D 플래시 테크닉
[참고] View의 주요 기능
[참고] Render Settings의 주요 기능
[참고] Single의 주요 기능
[참고] Animation의 주요 기능
4) Adobe Dimensions를 이용한 3D 플래시 테크닉

Part3. 3D 제작 테크닉
1) Derbauer의 Invert 이미지와 마스크를 이용한 독창적인 프리로더
2) Random 함수를 이용한 독특한 장면 전환
3) 쉐이프 트위닝(Shape Tweening)으로 표현하는 3D 효과
[Tip] 쉐이프 트위닝(Shape Tweening)의 성공비법
[Tip] www.ellenson.com 감상하기

6장. 플래시 카툰 애니메이션 기법(www.shockwave.com/shows)

Part1. 사이트 리뷰
1) World of StainBoy
2) Radiskull & Devil Doll
3) South Park
4) Regurge
5) The Critic
6) Joe Cartoon
[Tip] 국내 플래시 카툰 작품들

Part2. 플래시 카툰 애니메이션의 제작과정
1) 기획 및 시나리오
[참고] 미야자키 하야오 감독의 애니메이션 <이웃의 토토로> 시나리오 일부
2) 캐릭터 제작
3) 스토리보드의 제작
4) 레이아웃(Layout, 원도)
5) 배경과 원화 및 동화의 제작
[Tip] 동화기법
6) 스캐닝과 컴퓨터 드로잉
7) 플래시 편집과 사운드 제작

Part3. Animation 제작하기
1) 일러스트레이터에서 캐릭터 그리기
[Tip] 일러스트레이터와 플래시
2) 애니메이션 제작 기법
[Tip] Image Apart 작업
[Tip] 애니메이션의 타이밍
[Tip] 완성 예제에서 구현한 Scene#3에서 스테인보이의 움직임 변화
[Tip] 연속적으로 이동하는 배경이미지 무비클립 만들기

Epilogue
1. Flash Film Festival ; 플래시 디자인의 Academy Award
1) Flash Film Festival은?
2) Flash Film Festival 수상작
2. 플래시의 액션스크립트에 관한 이해
1) 플래시 5의 액션스크립트 소개
[참고] 무비클립의 경로(Target Path) 표현
[참고] 액션 패널 속의 Color
[참고] 표현식에 대해
2) 예제에서 사용된 주요 액션 리스트 항목