플래시 액션스크립트를 이용한 인터랙티브 홈페이지

Slides:



Advertisements
Similar presentations
일정 관리 다이어리 제작 JSP Programming with a Workbook. 학습 목표  사용자의 일정을 관리할 수 있는 다이어리에 대하여 알아보자. JSP Programming with a Workbook2.
Advertisements

을지대학교 무선 네트워크 사용 방법 2010 년 06 월 01 일. 을지대학교 무선 네트워크 사용 방법 1. PC 무선랜 카드 활성화 및 체크 1 단계 : 시작 -> 설정 -> 네트워크 설정 2 단계 : 무선 네트워크 설정 선택 -> 마우스 버튼 오른쪽 클릭 -> 사용.
아이튠즈 계정 생성. 1. 인터넷을 통해 설치한 아이튠즈를 실행 한 후 그림의 순서대로 선택을 합니다. 1 2.
컴퓨터와 인터넷.
컴퓨터 운영체제의 역사 손용범.
파워포인트 2007.
149개의 실습예제로 배우는 Flash 8.
1. 신뢰할 수 있는 싸이트 등록 인터넷 익스플로러 실행 후 실행
피티라인 파워포인트 템플릿.
Chapter05 오디오와 비디오 HTML5 Programming.
한국골프대학 종합정보시스템 Windows Vista 사용자를 위한 Component 설치안내서
한국골프대학 종합정보시스템 Windows 7 사용자를 위한 Component 설치안내서
CHAPTER 02 OpenCV 개요 PART 01 영상 처리 개요 및 OpenCV 소개.
Visual Basic .NET 처음 사용하기.
전광판 어플 크레파스통 도상미 박아란 이민영.
iframe 사용하기 Chapter 3 Part 2
                              데이터베이스 프로그래밍 (소프트웨어 개발 트랙)                               퍼스널 오라클 9i 인스톨.
홈페이지용 그림 활용법 그림 삽입 태그 <IMG> 배경 그림 다루기 그림과 문자열의 어울림
학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다.
제 1장. 멀티미디어 시스템 개요.
스크래치 언어 이해 스크래치 이용법 습득 고양이가 말을 하며 움직이는 예제 작성
멀티미디어 기본+활용 제대로 배우기.
Eclipse 를 이용한 네트워킹 퍼즐 게임 “Scrambled Net” 담당 교수님 전진우 교수님 최은아.
10강. JSP 본격적으로 살펴보기-II 스크립트릿, 선언, 표현식 지시자 주석 Lecturer Kim Myoung-Ho
자바응용.
1차 프로젝트 발표 GAME ENGINE 게임 공학과 이성진.
15차시_스마트 애플리케이션 기획 스마트 애플리케이션 모형 제작 및 발표.
플래시 멀티미디어 저작 이론 김수우 김진영
TERMPORJECT 라미君 이야기 EPISODE 1
2018년 11월 05일 박성진 Web & Internet [08] 레이아웃 P1 2018년 11월 05일 박성진
HTML5 Canvas 태그 92팸 유승연 안동찬 엄태인 김영재.
HTTP 프로토콜의 요청과 응답 동작을 이해한다. 서블릿 및 JSP 를 알아보고 역할을 이해한다.
Adobe 제품 다운로드 및 설치 방법 안내 Adobe Creative Cloud Adobe License 권한을 받으신 분
Nessus 4 설치 정보보호응용 조용준.
ASP.NET AJAX / AJAX Control Toolkit 응용 2008 컴퓨터공학실험( I )
Moving Control in Web using Ajax Toolkit
웹디자인
보안컨텐츠 활성화 설정 호환성 설정 교육 수료 가이드
플래시 애니메이션 제작과정 (E-러닝) Lee Sunghoon 1.
9강. 클래스 실전 학사 관리 프로그램 만들기 프로그래밍이란 결국 데이터를 효율적으로 관리하기 위한 공구
1. 스크립트 작성 마법사 2. NSIS 스크립트 컴파일
2D 게임프로그래밍 프로젝트 스틱 파이터 Stick Fighter 박하은.
PMIS 서버 설정 환경설정 작성자 : 배경환.
14강. 세션 세션이란? 세션 문법 Lecturer Kim Myoung-Ho Nickname 블스
네트워크 환경 구축과 이미지 전송 호스트/타겟 통신 직렬 통신을 이용한 이미지 전송 수퍼 데몬 BOOTP 환경 구축
오토베이스9 사용자 라이브러리 오토베이스 교육센터 그래픽 모듈 설정과 화면전환에 대하여 자세히 알아본다. <목차>
학습목표 처음 만드는 비주얼 베이직 프로그램 프로그램 실행과 실행 파일 생성. 학습목표 처음 만드는 비주얼 베이직 프로그램 프로그램 실행과 실행 파일 생성.
Cold Spring Harbor Laboratory Press 저널 이용 매뉴얼
OpenCV 설정 2.21 만든이 딩딩.
암호학 응용 Applied cryptography
플래시 CS3 액션스크립트3.0.
1차 발표: 프로젝트 발표 안내 및 형식 학번: 이름: 김경우.
2D 게임프로그래밍 프로젝트 발 록 런 김대호.
01. 분산 파일 시스템의 개요 네트워크에 분산된 파일을 사용자가 쉽게 접근하고 관리할 수 있게 해준다.
Map Designer Solution 소개자료
2D 게임 프로그래밍 제안서 김보명.
2D 게임프로그래밍 프로젝트 - Air Clear 심석용.
슬라이드 쇼의 설정 슬라이드 쇼의 실행 파일과 폴더의 관리 글꼴을 포함해서 저장 웹 페이지로 게시 압축 파일
프로그래밍 언어 학습을 위한 가상실습환경 창원대학교 이수현.
멀티미디어 활용 -플래시 CS3 류 정 남.
김덕용 게임 엔진론 Project 2차발표.
학부 컴퓨터공학부 교육과정 (학부) 2학년 4학년 3학년 1학년 1학기 2학기 IPP 자격과정 전공트랙
피티라인 파워포인트 템플릿.
Power Point 예제 디자인 적용 (서식) - (디자인적용) - (원하는 디자인 선택)
플래시MX2004 디자인스쿨 Chapter 11. 플래시와 사운드.
JAVA 프로그래밍 16장 JNLP.
Chapter 11. 문서 인쇄 및 파일 형식.
타이머를 시작하려면 슬라이드 쇼 메뉴에서 쇼 보기를 클릭하십시오.
AJAX? Cho Hyun Min.
20 XMLHttpRequest.
Presentation transcript:

플래시 액션스크립트를 이용한 인터랙티브 홈페이지 팀명 : Hot-Flash 팀원 : 이 석 구

Term-Project의 목적 목적 : 플래시의 에니메이션과 액션스크립트 기능을 이용하여 역동적인 홈페이지를 제작 하기위한 기술 습득 목표 : 컴퓨터학부 OS연구회의 홈페이지 제작

플래시의 장점 벡터기반의 운영프로그램 벡터를 기반으로 사용되기 때문에 원하는 에니메이션에서 주로 사용되는 이미지의 확대 및 축소에 따른 이미지의 손상이 없으며, 웹상에서 모든 데이터를 전송받지 않고 부분적으로 전송완료후 실행이 가능한 스트리밍(Streaming)기술로 파일이 다소 커지더라도 이에 대한 단점을 보완해 주고 있다. 백터이미지 비트맵이미지

플래시의 장점 뛰어난 압축률 전에 간단한 에니메이션으로 사용했던 GIF와는 달리 뛰어난 움직임의 효과의 재현이 가능하며, 플래쉬에서 에니메이션을 제작할 때 심벌로 등록을 하여 사용할 경우 같은 심벌에 대한 사용은 수백, 수천번을 사용하여도 이에 대한 용량은 동일하다.

플래시의 장점 사용자의 상호작용 이전 그래픽 솔루션의 경우 화려함이나 이미지의 보여주는 효과에 그쳤지만, 플래쉬는 다양한 에니메이션 형식의 제작이 가능하며, 또한 웹을 이용하는 사용자와의 상호작용이 가능하다. 보통 플래쉬카드나 게임등에서 보아왔듯이 사용자가 누르는 버턴이나 키보드등의 작용에 대한 반응이 가능하기 때문에 디자인과 프로그램이 결합된 차세대 멀티미디어 저작도구로 각광받고 있다.

플래시의 장점 사운드의 삽입가능 배우기가 쉽다 플래쉬가 초기에 이렇게 각광을 받게 된 요인중의 하나가 화려한 화면과 함께 제공되는 효과음이였다. 이전의 보기만 해오던 화면에 사운드가 추가됨으로써 많은 이들의 시선을 한몸에 받게된 것이다. 배우기가 쉽다 플래쉬는 다른 저작도구나 그래픽 프로그램과는 달리 전문가가 아니더라도 이에 대한 지식 및 활용을 넓히는데 큰 어려움이 없다.

액션스크립트란? 액션스크립트(ActionScript)는 플래시 내에서 사용되는 스크립팅 언어 입니다. 플래시에서는 타임라인을 이용해서 애니메이션을 제작할 수 있는것은 물론, 액션스크립트를 이용하여 강력하고 상호작용이 포함된 멀티미디어 콘텐츠를 제작할 수 있습니다. 액션스크립트는 플래시 무비에 등장하는 그래픽, 텍스트, 애니메이션, 사운드 등의 요소를 재어할 수 있는 프로그래밍 언어입니다.

액션스크립트의 미래 매크로미디어사는 포켓pc에서 플래시 무비를 재생시킬 수 있는 포켓pc용 플래시 플레이어와 개발자 키트를 발표했습니다. 적은 용량을 가지면서도 강력한 기능을 담을 수 있는 플래시 기술은 이처럼 데스크탑 이외의 장비에서도 채용되고 있습니다. 포켓pc는 물론이고 곧 무선 단말기(PDA, 핸드폰등), 인터렉티브 TV나 게임화면의 인터페이스 등에서도 플래시 무비가 재생되는 것을 볼 수 있게 될 것입니다.

플래시 홈페이지 제작 단계 플래시무비 기획 플래시무비 제작 쇽웨이브 파일 생성 쇽웨이브 파일 Html문서에 삽입 로컬상의 브라우저에서 테스트 웹 서버로 전송

플래시 웹사이트의 기획 플래시 웹사이트의 사용성(Usability)을 높이기 위한 10가지 Tip 1. 사용자의 목적을 기억하라. 2. 사이트의 목적을 기억하라. 3. 불필요한 인트로 애니메이션을 자제하라. 4. 논리적인 내비게이션과 상호작용을 제공하라. 5. 일관성있게 디자인 하라. 6. 애니메이션을 남용하지 말라. 7. 사운드를 적절한 선에서 사용하라. 8. 저(低)대역폭 사용자들에게 대한 배려를 잊지 말라. 9. 다양한 환경의 사용자들도 접근이 용이하게 디자인 하라. 10. 사용성을 테스트 하라.

플래시 무비 제작과정 Os연구회 홈페이지 전체 구조 Intro main Intro movie skip main About scene Professor scene Studests scene About back Professor back Students back

플래시 무비 제작과정 Intro 화면 구성 심볼(MovieClip) 심볼(Button)

플래시 무비 제작과정 Intro 프래임 구성 label 무한루프

플래시 무비 제작과정 메인 화면 구성 가이드라인 메뉴버튼

심볼 (Symbol) 심볼의 정의 심볼의 특징 심볼을 한마디로 정의하면 “재사용이 가능한 오브젝트”라고 말할 수 있습니다. 즉, 어떠한 오브젝트를 심볼로 저장한 후 재사용할 수 있다는 의미이기도 합니다. 심볼의 특징 오브젝트가 그룹의 속성을 가지게 됩니다. 라이브러리에 등록이 되어 재사용할 수 있게 됩니다. 재사용을 해도 파일의 크기가 커지지 않습니다. 라이브러리에서 꺼내어 재사용한 오브젝트를 변형할 수 있습니다.

심볼 (Symbol) 심볼의 종류 그래픽 심볼:일반적인 트위닝에 사용하는 Instance(재사용 가능 한 객체)로, 메인 무비의 애니메이션이 Play된 상태에서만 애 니메이션이 일어나는 심볼입니다. 버튼 심볼:사용자와의 상호작용을 위한 액션을 지정할 수 있는 Instance로, [UP][OVER][DOWN][HIT]의 마우스 반응 프레 임 속성을 가지고 있는 심볼입니다. 무비 클립:메인 무비의 애니메이션이 Stop된 상태에서도 독자적 인 타임라인에 의해 애니메이션이 일어나는 Instance로, 무비 클립 속에 또다른 무비클립이나 버튼 심볼, 그래픽 심볼, 혹은 심볼이 아닌 그룹, 비트맵... 등등을 포함할 수 있습니다.

심볼 (Symbol) Intro 메인화면의 ‘OSL’버튼 제작과정 1. 먼저 각 글씨를 만들고 각각 심볼로 등록한다. 2. 각 심볼을 이용하여 무비를 작성하고 무비심볼로 등록한다.

심볼 (Symbol) Intro 메인화면의 ‘OSL’버튼 제작과정(계속) 3. 위 그림과 같이 심볼들을 배치 하고 버튼심볼로 등록한다. 3. 등록된 버튼심볼에 마우스에 대 한 속성을 주기위해 더블클릭 하여 연다.

심볼 (Symbol) Intro 메인화면의 ‘OSL’버튼 제작과정(계속) 4. 각 속성에 키프래임을 설 정하고 다음과 같이 등록 한다. 이전단계에서 등록한 무비심볼 평상시 오버시 클릭시

플래시 무비 테스트 스트리밍 테스트 우리가 무비를 만들어 놓고 제일 궁금해 하는 사항은 실제로 이 무비를 인터넷상에 올렸을 때 어떻게 재생이 되는가 하는 것입니다. 테스트 모드의 Control 메뉴에서 Show Streaming을 선택하면 대역폭에 따른 사용자가 접속했을때 실제 인터넷 상에서의 상황 그대로를 재현해 줍니다.

플래시 무비 테스트 대역폭 대역폭을 초과한 프래임 실제 전송된 데이타 <28.8k 모뎀사용자가 접속했을때>

플래시 무비 테스트 대역폭 초과 플래시 무비의 최적화 대역폭 2400kb / 초당 12프레임 = 200B/fr 대역폭 초과 위 그래프에서 프래임당 200byte(200B/fr)의 값을 넘는 그래프가 있다면 그 해당 프래임을 재생할때 일시적으로 멈추는 현상이 발생합니다. 플래시 무비의 최적화 무비를 제작한 후 태스트 할 때에는 될수 있는 한 대역폭의 한계를 넘어서는 프레임이 없도록 무비를 최적화 시켜줄 필요가 있습니다. 대역폭을 넘기는 프레임이 있다고 하더라도 그 주위의 프레임에 있는 데이타가 작으면 데이터를 분산하여 스트리밍이 가능하게 만들어 주므로 최적화가 이루어 질 수 있습니다.