개발 플래시에서 html5로 이동

플래시에서 html5로 이동

차례:

Anonim

2011 년 11 월, Adobe는 Android 장치 용 Flash Player 11.1 및 BlackBerry Playbook을 출시 한 후 모바일 장치 용 HTML5 응용 프로그램 작성 도구에 집중하는 대신 모바일 장치 용 Flash Player 개발을 중단 할 것이라고 발표했습니다. Adobe가 개인용 컴퓨터 브라우저를위한 Flash Player 지원을 되풀이했지만 많은 사람들은 Adobe가 PC 버전에 대한 지원을 종료하기까지는 시간 문제 일 뿐이라고 생각합니다. 이는 Flash 응용 프로그램을 개발하는 데 필요한 프로그래밍 기술을 습득하는 데 시간을 투자 한 개발자뿐만 아니라 Flash 응용 프로그램에 많은 투자를 한 회사에게는 나쁜 소식입니다.


Flash와 HTML5의 차이점을 살펴보고이 두 플랫폼 간의 전환을 용이하게하는 몇 가지 팁과 도구를 제공합니다.

플래시 플랫폼 기초

Flash는 종종 다음 구성 요소로 구성된 독점 Adobe 플랫폼을 나타내는 포괄적 인 용어로 사용됩니다.

  • 플래시 : 애니메이션을 디자인하고 제작하는 데 주로 사용되는 도구
  • Flex : 소프트웨어 개발 키트 (SDK)를 포함하여 응용 프로그램을 구축하는 데 사용되는 개발 환경
  • MXML : Flash 프로젝트에서 사용되는 마크 업 언어
  • ActionScript : 스크립팅 언어
웹 브라우저에서 Flash 응용 프로그램을 실행하려면 Flash Player 플러그인을 다운로드해야합니다. 또는 Adobe AIR 데스크탑 런타임 환경에서 실행되도록 Flash 응용 프로그램을 컴파일 할 수 있습니다. 또한 AIR 응용 프로그램을 실행하려면 사용자 컴퓨터에 Adobe AIR가 설치되어 있어야합니다.


Flash는 다음과 같은 주요 파일 형식을 사용합니다.

  • .fla : 플래시 프로젝트 파일
  • .flv : 플래시 비디오 파일
  • .swf : .flv 파일을 포함 할 수있는 컴파일 된 Flash / Flex 응용 프로그램 파일

HTML5 플랫폼 기본 사항

HTML5는 다음으로 구성된 개방형 표준 플랫폼입니다.

  • HTML5 : 웹 페이지를 만드는 데 사용되는 마크 업 언어
  • CSS3 (Cascading Style Sheets 3) : HTML5 웹 페이지에서 객체의 서식을 지정하는 데 사용되는 스타일 시트 언어
  • API (Application Programming Interfaces) : 끌어서 놓기 및 문서 간 메시징과 같은 기능을 지원하는 API
  • JavaScript : 애니메이션을 활성화하기 위해 HTML5와 함께 사용되는 스크립팅 언어
HTML5의 장점 중 하나는 기본적으로 웹 브라우저에서 실행되며 플러그인이 필요하지 않다는 것입니다. 그러나 제대로 실행 되려면 브라우저가 HTML5 웹 페이지에 대해 HTML5 및 CSS3 기능을 지원해야합니다. 주요 브라우저는 HTML5 및 CSS3에 대해 서로 다른 수준의 지원을 제공하며 구현이 완료되지 않았습니다. JavaScript는 브라우저에서 거의 보편적으로 지원됩니다. 그러나 사용자는 JavaScript를 "끄기"할 수 있습니다.이 경우 JavaScript로 작성된 클라이언트 측 스크립트가 실행되지 않습니다.


HTML5 파일 형식은 다음과 같습니다.

  • .htm / .html : HTML5 웹 페이지 파일
  • .css : CSS3 스타일 시트 파일
2011 년 현재, 현재 HTML5 사양은 지원되는 비디오 파일 형식을 지정하지 않으므로 개별 브라우저에서 지원할 형식을 선택할 수 있습니다. 현재 지원되는 형식은 다음과 같습니다.

  • .mp4 : H.264 비디오 코덱 및 AAC 오디오 코덱이 포함 된 MPEG 4 비디오 파일
  • .webm : VP8 비디오 코덱 및 Vorbis 오디오 코덱이 포함 된 WebM 비디오 파일
  • .ogg : Theora 비디오 코덱 및 Vorbis 오디오 코덱이있는 Ogg 비디오 파일

Flash 프로젝트를 HTML5로 변환

플랫폼 차이로 인해 복잡한 Flash 프로젝트를 HTML5로 수동으로 변환하는 것은 노동 집약적이고 시간 소모적 인 프로세스입니다. 개발자는 Flash 및 ActionScript로 만든 애니메이션을 HTML5 및 JavaScript로 변환해야합니다. 다행히 Flash에서 HTML5 로의 변환을 자동화하는 데 도움이되는 몇 가지 도구가 있습니다.


Adobe는 Adobe Labs 웹 사이트에서 무료로 다운로드 할 수있는 실험 도구 인 Wallaby를 출시했습니다. Wallaby는 Flash 프로젝트 파일 (.fla)을 입력으로 가져와 HTML5를 내보내고 CSS 및 JavaScript 파일을 지원합니다. 그러나 Wallaby 릴리스 노트에는 변환되지 않은 상당히 긴 기능 목록이 포함되어 있습니다. 그 중 가장 중요한 기능은 ActionScript, 영화 및 사운드입니다. Wallaby는 주로 애니메이션 그래픽 컨텐츠를 HTML5로 변환하도록 설계된 제한된 도구이므로 웹 페이지 디자인 도구를 사용하여 웹 페이지에 통합 될 수 있습니다.


Google Labs는 컴파일 된 Flash 응용 프로그램 파일 (.swf)을 HTML5로 변환하는 무료 웹 기반 도구 인 Swiffy를 출시했습니다. 그러면 출력을 웹 페이지에 임베드 할 수 있지만 개발자가 쉽게 편집 할 수는 없습니다. Wallaby와 마찬가지로 Swiffy는 모든 플래시 기능을 변환하지는 않습니다. Swiffy는 ActionScript 변환을 지원하지만 버전 2.0 만 지원합니다 (ActionScript는 현재 버전 3.0 임). Swiffy 출력은 SVG (Scalable Vector Graphics)를 지원하는 브라우저에서만 실행됩니다.

HTML5를위한 새로운 개발 툴인 Edge

HTML5가 선택되는 플랫폼이됨에 따라 HTML5, CSS3 및 JavaScript를 통합하는 디자인 및 개발 환경을 제공하는 새로운 도구가 등장하고 있습니다.


2011 년 8 월 Adobe는 Edge 개발 도구의 미리보기 버전을 출시했습니다. Edge를 통해 디자이너는 HTML5 애니메이션을 만들고 기존 HTML5 프로젝트에 애니메이션을 추가 할 수 있습니다. Flash 디자이너는 스테이지, 속성 창 및 애니메이션 타임 라인을 포함하여 Edge 사용자 인터페이스에서 익숙한 요소를 인식합니다. 그러나 Edge는 CSS 및 JavaScript 파일을 생성하며 해당 애니메이션 컨텐츠는 JSON (JavaScript Object Notation) 데이터 구조에 저장됩니다.


이 글을 쓰는 시점에서 Edge는 네 번째 미리보기 릴리스를 예상했습니다. 각 릴리스에 새로운 기능이 추가되고 있습니다.

YouTube를 HTML5로 변환

HTML5로 전환 한 징후 중 하나는 YouTube에서 HTML5 비디오 플레이어를 사용하여 비디오를 볼 수있는 옵션을 제공한다는 것입니다.


HTML5 옵션을 제공하기 전에 모든 YouTube 비디오는 Flash 비디오 플레이어를 통해 전달되었습니다. 사용자는 거의 모든 형식의 비디오 파일을 업로드 할 수 있으며 YouTube는 각 비디오를 필요한 플래시 (.flv) 형식으로 변환합니다.


YouTube는 이제 HTML5 전송을 위해 H.264 비디오 코덱 및 WebM 형식으로 비디오를 인코딩하고 있습니다. HTML5 형식으로 비디오를 보려면 HTML5 비디오 태그를 지원하는 브라우저와 YouTube에서 사용하는 비디오 형식이 있어야합니다.

플래시의 유산

앞서 언급했듯이 Adobe는 현재 PC 버전의 Flash Player를 계속 개발하고 있습니다. 앞으로 Adobe에서 Flash Player 지원을 중단하더라도 레거시 Flash 응용 프로그램은 웹에서 몇 년 동안 계속 지원 될 것입니다. 따라서 플래시가 곧 완전히 사라지지는 않습니다. Flash 응용 프로그램을 HTML5 응용 프로그램으로 변환하는 도구를 사용할 수 있지만 현재 이러한 도구는 모든 Flash 기능의 변환을 지원하지는 않습니다. HTML5 표준이 지배적이됨에 따라 Flash 파일 변환 도구가 더욱 정교 해지고 HTML5 플랫폼으로 컨텐츠를 개발할 수있는 새로운 도구가 만들어 질 것입니다.

플래시에서 html5로 이동