KR101569765B1 - 중간 포맷을 이용한 swf와 html의 크로스-컴파일링 - Google Patents

중간 포맷을 이용한 swf와 html의 크로스-컴파일링 Download PDF

Info

Publication number
KR101569765B1
KR101569765B1 KR1020137028403A KR20137028403A KR101569765B1 KR 101569765 B1 KR101569765 B1 KR 101569765B1 KR 1020137028403 A KR1020137028403 A KR 1020137028403A KR 20137028403 A KR20137028403 A KR 20137028403A KR 101569765 B1 KR101569765 B1 KR 101569765B1
Authority
KR
South Korea
Prior art keywords
tag
cross
tags
display
multimedia
Prior art date
Application number
KR1020137028403A
Other languages
English (en)
Other versions
KR20130143725A (ko
Inventor
피에터 센스터
Original Assignee
구글 인코포레이티드
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 구글 인코포레이티드 filed Critical 구글 인코포레이티드
Publication of KR20130143725A publication Critical patent/KR20130143725A/ko
Application granted granted Critical
Publication of KR101569765B1 publication Critical patent/KR101569765B1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/52—Binary to binary
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F17/00—Digital computing or data processing equipment or methods, specially adapted for specific functions

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Mathematical Physics (AREA)
  • Processing Or Creating Images (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

포맷된 멀티미디어 객체(306)를 분석하고, 포맷된 객체에 포함된 비디오 데이터 및 오디오 데이터 상에서의 변환들을 수행하고, 포맷된 멀티미디어 객체(306)로부터 데이터를 나타내는 중간 객체(310)를 생성하는 크로스-컴파일러(308), 및 중간 객체(310)를 수신(802)하고, 웹 브라우저(312)에 의해 멀티미디어 콘텐트를 렌더링(806)하는 계층적으로 구조화된 문서에서의 스케일러블 벡터 그래픽 노드들을 동적으로 생성하고 수정(804)하는 런타임-스크립트(runtime-script)를 포함하는 계층적으로 구조화된 문서들에 대한 멀티미디어 콘텐트를 렌더링하기 위한 데이터 처리 장치(300) 및 방법이 기술된다.

Description

중간 포맷을 이용한 SWF와 HTML의 크로스-컴파일링{CROSS-COMPILING SWF TO HTML USING AN INTERMEDIATE FORMAT}
본 발명은 휴대용 디바이스들 상에서 SWF 콘텐트를 플레이하는 대안적인 접근에 관한 것이다.
대안적인 접근은 SVG 및 HTML5와 같은 웹 기술에 대한 코드를 생성시킨다. SWF 플레이어들은 윈도우즈, 매킨토시 OSX, 리눅스 및 솔라리스를 포함하는 데스크탑 플랫폼들, 및 인터넷 익스플로러, 파이어폭스, 모질라, 네스케이프, 오페라, 사파리, 시몽키, 및 크롬을 포함하는 그러한 플랫폼들에 대한 브라우저들에 이용가능하다. 하지만, 모든 모바일 플랫폼들이 현재 이러한 포맷을 지원하지는 않는다. 더욱이, SWF 플레이어들의 작동 문제들은 모바일과 데스크톱 플랫폼들 모두에서 이러한 특정 플레이어들의 장점들을 제한시킬 수 있다.
증가하는 수의 플랫폼들은 SVG와 같은 벡터 그래픽들을 다루기 위한 웹 기술들을 지원한다. SWF 포맷에서 개발된 그래픽들 및 애니메이션들을 처리할 수 있는 유틸리티에 대한 필요가 존재한다. SWF 파일을 SVG 및 JavaScript®로 직접 컴파일링하는 접근은 여러 결점들을 가진다. SVG 핸들링은 2개의 위치들: 정적인 SVG 생성을 위한 컴파일러 자신에서, 및 클라이언트의 동적 SVG 애니메이션에 대한 JavaScript®에서 구현될 필요가 있다.
JavaScript®을 이용한 SWF 파일 자체를 해석하는 다른 대안은, 또한, 계산상의 부하가 클라이언트에 걸리는 것 같은 결함들을 가진다. 비디오 및 오디오 리코딩 및 트랜스코딩과 같은 복잡한 변환은, 사용자가 브라우저에서 페이지를 방문하는 매시간마다 수행될 필요는 없다.
포맷된 멀티미디어 객체를 분석하고, 포맷된 객체에 포함된 비디오 데이터 및 오디오 데이터 상에서의 변환들을 수행하고, 포맷된 멀티미디어 객체로부터 데이터를 나타내는 중간 객체를 생성하는 크로스-컴파일러, 및 중간 객체를 수신하고, 웹 브라우저에 의해 멀티미디어 콘텐트를 렌더링하는 계층적으로 구조화된 문서에서의 스케일러블 벡터 그래픽 노드들을 동적으로 생성하고 수정하는 런타임-스크립트(runtime-script)를 포함하는 계층적으로 구조화된 문서들에 대한 멀티미디어 콘텐트를 렌더링하기 위한 데이터 처리 장치 및 방법이 기술된다.
이러한 및 다른 측면들은 도면을 참조하여 상세하게 기술된다.
첨부된 도면들은 본 명세서의 부분을 구성한다. 도면들에서,
도 1은 예시적인 네트워크 환경의 다이어그램;
도 2는 애니메이션의 생성에서 SWF 파일을 중간 포맷으로 변환 및 중간 포맷의 사용에서 포함된 프로세스들을 도시한 블록도;
도 3은 도 2의 프로세스들을 수행하는 예시적인 구조를 도시하는 블록도;
도 4는 휴대용 디바이스의 예에 대한 블록도;
도 5는 서버 컴퓨터의 블록도;
도 6은 크로스-컴파일러에 의해 수행된 프로세스의 흐름도;
도 7a 및 도 7b는 예시적인 경고 메시지들을 제공하는 도면;
도 8은 중간-코드 런타임에 의해 수행된 하이-레벨 프로세스들의 흐름도;
도 9는 중간-코드 런타임을 초기화하기 위한 HTML 문서의 일부분을 도시한 도면;
도 10은 장면을 구성하는 프로세스의 흐름도;
도 11은 MovieClip을 생성하는 프로세스의 흐름도;
도 12a, 도 12b 및 도 12c는 MovieClip을 구성하는 프로세스의 흐름도;
도 13은 애니메이션을 수행하는 프로세스의 흐름도;
도 14는 도 13의 제어 태그 핸들러들 단계의 실행을 상세하게 도시한 흐름도;
도 15는 도 13의 액션 태그 핸들러들 단계의 실행을 상세하게 도시한 흐름도;
도 16은 예시적인 SWF 파일을 도시한 도면;
도 17은 예시적인 중간-코드 객체를 도시한 도면;
도 18은 예시적인 SVG 코드를 도시한 도면;
도 19는 도 16의 SWF 파일에 기초하여 예시적인 디스플레이를 도시한 도면;
도 20은 SWF로 컴파일링된 ActionScript 2.0의 예를 도시한 도면.
SWF 파일은 SWF 플레이어를 사용하여 재생될 수 있다. Adobe®은 멀티플 플랫폼들 상에서 SWF 파일들을 재생하는 Adobe® Flash® 플레이어를 제공한다. SWF 파일의 기술(description)은 SWF 명세(specification), 버전 10, 2008년 11월에서 발견될 수 있다. 크로스-컴파일러(Cross-Compiler) 및 재생 유틸리티는 SWF 플레이어가 이용될 수 없는 이러한 플랫폼들에 의해 사용되기 위해 개시된다. 이러한 재생 유틸리티는 SVG(Scalable Vector Graphics)(스케일러블 벡터 그래픽 1.1 명세, 2003년 1월 14일의 W3C 권고 참조) 및 HTML5를 포함하는 폭넓게 지원된 웹 기술들을 사용한다.
크로스-컴파일러는 중간 구조(intermediate structure)를 생성하고 계산적으로 집중된 변환들을 수행한다. 재생 유틸리티는 중간 구조를 웹 브라우저에 의해 해석될 수 있는 SVG 태그들로 전환하고, SWF 애니메이션들과 연관된 필요한 액션들을 생성한다. 재생 유틸리티는 모든 SVG 핸들링을 처리한다. 크로스-컴파일러 및 재생 유틸리티의 또 다른 측면은, 계산적으로 집중된 업무들과 예를 들어, 제한된 메모리 및 처리 능력을 갖는 작은 핸드헬드 디바이스상에 멀티미디어 데이터를 렌더링하는데 필요한 업무들 사이의 작업의 분배이다.
도 1은, 여러 휴대용 디바이스들이 다른 무선 통신 네트워크들과 함께 인터넷(104)에 무선적으로 접속될 있는, 예시적인 네트워크 환경(100)을 도시한다. 예를 들어, 랩탑 컴퓨터(108)는 무선 LAN 또는 WiFi(106)(IEEE 802.11-2007)을 포함하는 하나 보다 많은 통신 프로토콜 또는 셀룰러 캐리어(116)를 통해 웹 서버(102)에 접속될 수 있다. 스마트폰(112)은 셀룰러 캐리어(116) 또는 WiFi 네트워크(106)를 통해 웹 서버(102)와 통신할 수 있다. 태블릿 컴퓨터(114)는 WiFi 네트워크(106) 또는 셀룰러 캐리어(116)를 통해 웹 서버(102)와 접속할 수 있다. 휴대용 뮤직 플레이어(110)는 WiFi 네트워크(106) 또는 (도시되지 않는) 호스트 컴퓨터를 통해 웹 서버(102)와 통신할 수 있다.
시스템 아키텍쳐
SWF 파일은 그래픽 또는 애니메이션의 2진 표현이다. 도 2는 SVG 및 HTML5과 같은 웹 기술을 다룰 수 있는 웹 브라우저에 대해, SWF 파일을 렌더링하는 프로세스들(200)의 블록도이다. 웹 브라우저는 SVG 태그들을 갖는 HTML5을 렌더링할 수 있어야 한다. 프로세스들(200)은 크로스-컴파일러(204) 및 중간-코드 런타임(210)을 포함한다. 크로스-컴파일러(204)는 SWF 파일(202)을 중간 구조(208)로 변환시킨다. 크로스-컴파일러(204)에 의해 제공된 중간 구조(208)는 JSON(JavaScript Object Notation) 객체, 또는 XTML 문서가 될 수 있다. 중간 구조(208)은 크로스-컴파일러(204)에 의해 생성된 데이터를 조직화하는 데이터 구조이다. 중간-코드 런타임(314)은 중간 구조(208) 내의 데이터로부터 SVG 노드들을 생성시키거나 프레임 또는 애니메이션에 대해 재생 동작을 수행하는 JavaScript® 프로그램일 수 있다. SVG 노드들은 HTML5 및 SVG를 렌더링할 수 있는 웹 브라우저(312)에 의해 해석된다.
도 2의 프로세스들은 도 3에서 도시된 바와 같은 배열에서 수행될 수 있다. 도 3은 서버(302) 및 클라이언트(304)를 갖는 구조(300)를 도시한다. 도 1에서 도시된 것처럼, 서버는 다수의 그리고 여러 타입들의 휴대용 디바이스들과 통신한다. 도 3은 간략화를 위해 하나의 클라이언트 디바이스를 갖는 배열을 도시한다. 부가적으로, 도 3은 서버 컴퓨터(302)를 도시하지만, 서버(302)는, 서버들의 시스템 및 데이터베이스 시스템 백엔드(database system backend)와 같은 다른 지원 디바이스들일 수 있다.
서버 컴퓨터(302) 상에서, 크로스-컴파일러(308)는 다양한 플랫폼들의 각각에 대해 JSON 객체들을 생성시킬 수 있다. 크로스-컴파일러(308)는, 또한, 벡터 변환, 이미지 포맷들의 변환, 폰트 변환들, 및 휴대용 디바이스들에서 실행하는 웹 브라우저들과의 호환을 위해 비디오 및 오디오 리코딩 또는 트랜스코딩을 포함하는, 변환들을 수행할 수 있다. 더욱이, 크로스-컴파일러(308)는 에러 검사를 수행하고 변환에 관련하여 경고 및 에러 메시지들을 생성시킬 수 있다. 도 3에서 도시된 것처럼, 클라이언트 디바이스(304)상에서, 중간-코드 런타임(314)은 크로스-컴파일러(308)로부터 획득된 중간-코드 객체에 기초하여 나머지 프로세스를 수행한다. 중간-코드 런타임(314)는 웹 브라우저(312)에서 실행된다.
도 4는 클라이언트(304)로서, 예시적인 휴대용 디바이스에 대한 블록도이다. 휴대용 디바이스(400)는 버스(416)를 통해 호스트 프로세서(406)와 통신하는 마이크로컨트롤러(404)를 포함한다. 호스트 프로세서(406)는 외부 네트워크들을 통해 통신을 제공하는 통신 모듈(412)로 데이터를 전송할 수 있다.
또한, 호스트 프로세서(406)는 비디오 어뎁터(408) 및 오디오 디바이스(410)에 대한 프로세스를 제공한다. 주요 버스(418)는 호스트 프로세서(406) 및 주변 디바이스들(414) 사이의 통신을 제공한다. 웹 브라우저(430) 및 중간-코드 런타임(428)은 비휘발성 메모리(424)와 같은 휴대용 디바이스(400)의 내부 메모리에 저장될 수 있다. 대안으로, 중간-코드 런타임은 (도시되지 않은) 보안 디지털 메모리 디바이스와 같은, 탈착 가능한 메모리 디바이스에 제공될 수 있다.
도 5에서 도시된 것처럼, 서버 컴퓨터(500)는 버스(502)를 통해 데이터를 통신하는 메모리 디바이스들과 함께, 캐시(506)를 갖는 마이크로프로세서(504), ROM(Read Only Memory)(508), 휘발성 메모리(RAM)(510) 및 하나 이상의 대용량 저장디바이스들(비-휘발성 메모리)(512)을 포함할 수 있다. 서버 컴퓨터(500)는, 또한, 디스플레이 디바이스(514)와, 디스플레이 컨트롤러 및 I/O 컨트롤러(516) 디바이스들에 의해 마이크로프로세서(504)와 통신하는 I/O 디바이스들(518)을 포함할 수 있다. 크로스-컴파일러(520)는 RAM(510)에서 변환 동작들을 수행하고, 비휘발성 메모리(512)에 저장된 중간-코드 객체들을 생성시킬 수 있다. 대안으로, 중간-코드 객체는 웹 서버(518)에 의해 전송을 위한 RAM(510)에서 유지될 수 있다.
크로스 -컴파일러
SVG 명세에 의해 지원되지 않는 SWF에서 정의된 구조들 및 방법들이 존재한다. 또한, SWF는 대안의 버전들로 수정된 태그들을 포함한다. 크로스-컴파일러(204)는 SWF와 SVG사이의 차이점들 수용하는 변환 동작들을 수행한다. 크로스-컴파일러(204)는 단일 버전의 태그들로 통합시킴으로써, SWF 태그들의 버전들 사이의 차이점들을 간략화시킨다. 그 후, 크로스-컴파일러(204)는 원래의 SWF 파일에서보다 적은 태그 타입들과 함께, 더 적은 태그들을 갖는 중간-코드 객체를 생성할 수 있다.
SWF 벡터 그래픽들은 SVG에서 충분히 지원되지 않는다. SWF 파일의 벡터 그래픽들은 SWF-특정 포맷(예를 들어, DefineShape 태그)으로 정의된다. SWF는 각각의 에지에 대해 2개의 채움형태(fillstyle)들: 에지의 우측에 하나 및 좌측에 하나를 허용한다. 반면에, SVG 명세는 각 에지에 대해 2개의 채움모양들을 지원하지 않는다. 크로스-컴파일러(204)는, 각 피스(piece)가 많아도 하나의 채움형태 및 선형태(linestyle)를 갖도록 경로를 분할할 수 있다. 더욱이, 크로스-컴파일러(204)는 SVG 벡터 데이터와 같은 경로 정의를 생성시킨다.
또한, SWF에서, 현재 채움형태들 및 선형태는 경로 중간에 변경될 수 있다. 예를 들어, DefineShape 태그는 붉은 선형태를 갖는 2개의 에지들, 이어, 선형태를 푸른색으로 설정하는 SWF StyleChangeRecord, 그 후, 푸른색으로 칠해진 2개 이상의 에지들을 정의할 수 있다. SVG에서, 경로의 모든 에지들은 동일한 채움형태 및 선형태를 가진다. 크로스-컴파일러(204)는, 각 피스가 유효한 SVG 경로인 것을 명확하게 하도록 SWF 경로를 피스들로 분할할 수 있다.
크로스-컴파일러(204)는 SWF에서의 여러 변형들을 갖는 태그들을 단일 태그로 대체한다. SWF에서의 DefineShape, DefineShape2, DefineShape3, 및 DefineShape4 태그들은 모두 단일 DefineShape으로 매핑된다. 단순화된 SWF 태그들은 PlaceObject, RemoveObject, DefineFontInfo, DefineFont, DefineButton, DefineBitsJPEG, DefineBitsLossLess, 및 DefineText을 포함한다.
DefineFontInfo의 경우에서, 중간 코드 객체에서 그러한 태그의 표현은 존재하지 않는다. 크로스-컴파일러(204)는, DefineFontInfo 태그가 (그것의 문자 ID에 의해) 인용하는 폰트 정의에 DefineFontInfo에서 나타나는 폰트 정보를 부가한다. 이어서, DefineFontInfo 및 DefineFont(2/3) 쌍의 정보는 하나의 DefineFont tag에 결합된다.
유사한 방식으로, DefineButtonCxform의 경우에서, DefineButtonCxform에서의 컬러 변환은 중간-코드 DefineButton에 부가된다. 유사한 경우가 DefineBits 및 JPEG테이블들에 대해 발생한다. JPEG테이블에서의 정보는 DefineBits 태그로부터 JPEG 이미지를 구성하기 위해 사용된다. JPEG테이블들 데이터 자체는 중간-코드 내의 개별 태그로서 표현되지 않는다.
크로스-컴파일러(204)에 의해 수행된 프로세스의 흐름도는 도 6에서 도시된다. 크로스-컴파일러(204)는 중간-코드 중간 표현을 생성하는 프론트 엔드(602) 및 중간-코드 객체를 생성하기 위한 직렬화에 대한 백 엔드(604)를 갖는다. 프론트 엔드(602)에서, 크로스-컴파일러는, 단계 608에서 SWF 파일(606)을 분석(parse)한다. SWF 파일(606)은 2진 포맷이다. 크로스-컴파일러의 파서(parser) 섹션은 SWF 파일(606)에서의 2진 데이터를 분석하고, 태그된 데이터 블록들을 식별한다. 태그된 데이터 블록들의 타입들은 SWF 명세에서 정의된다. 그때, 각 데이터 블록에 대해, 파서는 SWF 태그를 생성한다. 데이터 블록들의 하나는 헤더 정보를 포함한다. 크로스-컴파일러는, 다음, 단계 610에서, 계층 구조 내의 SWF 태그들을 나타내는 중간-코드 태그된 데이터 블록 객체들을 생성한다. 단계 612에서, 태그들은 단계 614에서의 중간 표현(중간-코드 IR)에서의 대응물로 변환된다.
JSON 키;한 쌍의 값들로 변화된 SWF 태그들에 부가하여, 크로스-컴파일러(204)는 HTML5와 호환가능한 요소들을 생성하기 위해 변환들을 수행한다. 크로스-컴파일러(204)는 DefineImage 객체를 생성한다. 태그 변환 단계 614는 또한 이미지 변환, 비디오/오디오 리코딩 및 트랜스코딩, 검사 지원 및 벡터 그래픽들 변환을 포함하는 프로세스들을 포함한다. 크로스-컴파일러(204)는 인카운터된(encountered) 각 SWF 태그에 대해 지원되는지 여부를 결정하고, 태그가 지원되지 않으면, 크로스-컴파일러는 경고 메시지를 제공할 것이다. 이런 메시지들은, Adobe® Flash® 플레이어를 포함하지 않는 브라우저들에서 어떤 특징들이 제공되지 않는지를 결정하는 점에서 개발자를 지원한다.
이미지 변환의 경우에서, SWF 파일들은 DefineBitsLossless 및 DefineBitsLossless2 태그들에서 인코딩들을 포함할 수 있다. 어떤 브라우저들은 JPEG, PNG 또는 GIF 이미지들만을 지원할 수 있다. 크로스-컴파일러(204)는 브라우저들에 의해 지원된 이미지 포맷들로 SWF 파일들에 이미지들을 리코딩한다.
오디오의 경우에, SWF 파일들은 압축되지 않은 ADPCM, MP3, 넬리모서(Nellymoser) 및 스픽스(Speex)를 포함하는 여러 포맷들의 오디오를 포함할 수 있다. 대부분의 브라우저들은 MP3만을 지원한다. 크로스-컴파일러(204)는 MP3와 같은 브라우저들에 의해 지원된 포맷들로 SWF 파일들에 오디오를 리코딩한다.
유사하게, 비디오의 경우에서, 콘텐트는 여러 다른 포맷들로 리코딩될 수 있다. SWF 파일은 h.263 또는 VP6 포맷들의 비디오를 포함할 수 있다. 크로스-컴파일러(204)는 iOS 또는 웹M에 의해 사용되고, 구글 크롬, 파이어폭스 및 오페라에 의해 사용된 h.264로 비디오를 리코딩할 수 있다.
중간-코드 런타임(210)은 휴대용 디바이스에서 사용되고 있는 플랫폼 및 브라우저에 의존하여 이미지들, 오디오 및 비디오의 포맷을 결정할 수 있다.
단계 616에서, 중간 표현은 단계 618에서의 중간-코드 객체를 생성하기 위해 직렬화된다. 직렬화동안, 중간 표현의 각 태그는 키:한 쌍의 값들 및 어레이들을 포함하는 JSON 객체로서 출력된다. 모든 JSON 객체들은 모든 태그들을 표현하는 단일 JSON 객체로 더해진다.
[경고들 및 에러들]
크로스-컴파일러(204)는 3개의 카테고리들의 경고 메시지들을 생성한다. 첫번째 카테고리는 SWF 파일(예를 들어, 부정확한 비트맵 데이터, 예상 밖의 특성들, 명세에 따른 부정확한 태그)에서의 에러들이다. 제 2 카테고리는 지원되지 않는 SWF 파일의 특징들에 관한 경고들이다. 제 3 카테고리는 지원되는 특징들에 관한 경고들이지만, 모든 플랫폼들 상에서 작동하지 않을 수 있다.
도 7a 및 7b는 경고 메시지들의 예들이다.
중간-코드 객체
크로스-컴파일러(204)에 의해 생성된 중간-코드 객체는 중간 표현의 직렬화된 형태이다. 중간-코드 객체는 JSON 객체가 될 수 있다. JSON 객체는 키:중괄호로 둘러싸이고 콤마로 나누어지는(comma-separated) 한 쌍의 값들의 집합이다. JSON 객체는 어레이들을 포함할 수 있다. 어레이는 대괄호로 둘러싸이고 콤마로 나누어지는 값들의 순서화된 시퀀스로 표현된다.
발생된 중간-코드 객체는 중간-코드 런타임까지 처리하기 위해 휴대용 디바이스에 전송될 수 있다. JSON에 기초하여 생성된 중간-코드 객체의 예는 하기에서 기술된 예시적인 동작에서 제공된다.
중간-코드 런타임
중간-코드 런타임(210)은 HTML 문서에 포함된 JavaScript® 프로그램이 될 수 있다. 하기에서 기술된 예시적인 실시예들에서, JavaScript의 객체 지향 버전이 사용된다. 객체-지향 규정에 기초하여, 스테이지(Stage) 및 MovieClip은 인스턴스 프로세스(instantiation process)에서 생성되고, 방법들을 실행하기 위해 구성된 객체들이다. 중간-코드 런타임(210)은 구글 클로저 라이브러리(공공적으로 이용가능한 개방 소스 JavaScript® 라이브러리)를 부가적으로 통합할 수 있다. 중간-코드 런타임(210)은 웹 브라우저를 이용한 애니메이션을 수행하기 위해 HTML 문서에 대한 문서 객체 모델(DOM: Document Object Model)내의 SVG 노드들을 동적으로 부가하고, 제거하고, 수정한다. 도 8에서 도시된 것처럼, 중간-코드 런타임은, 단계 802에서, 중간-코드 객체를 입력으로 가지는 API를 이용하여 개시된다. 단계 804에서, 중간-코드 런타임은, SVG 장면을 구성하고 단계 806의 애니메이션을 수행하기 위해 중간-코드 객체로부터 데이터를 이용한다.
예시적인 실시예에서, 개발자는, 예를 들어, 도 9에서 도시된 것처럼, 스크립트 및 연관된 JSON 객체를 HTML 문서로 인서트(insert)한다. 도 9에서 도시된 것처럼, 스크립트는 JSON 객체를 입력 파라미터로 가지는 새로운 스테이지 객체(Stage object)를 생성하고, 스테이지 객체에 대해 함수 "플레이(play)"를 수행한다.
도 10은 더 상세하게 SVG 장면을 구성하는 프로세스를 도시한다. 예시적인 실시예에서, 이 프로세스는 스테이지 객체의 생성 중 수행된다. 단계 1002에서, 스테이지 객체는 중간-코드 객체를 입력으로서 갖고 SVG DOM 요소를 생성한다. SVG DOM 요소는 <svg> 태그 요소이고, 이는 속성들, 너비, 높이, 스타일 및 뷰박스를 포함할 수 있다. 단계 1004에서, 중간-코드 런타임은 <svg> 태그 속성들을 설정한다. 스테이지 객체는 중간-코드 객체로부터 배경색(backgroundColor)을 얻고, 스타일 속성에 대한 값으로서 배경색을 적용한다. 단계 1006에서, 스테이지 객체는 중간-코드 객체로부터 프레임크기(frameSize)를 얻고, 뷰박스의 값으로 프레임크기를 적용한다.
중간-코드 런타임(210)은 SVG 구조를 유지하는 DOM을 생성한다.
스테이지 객체는 MovieClip을 사용하여 애니메이션을 수행하기 위해 클록 및 사전(dictionary)을 포함한다. 단계 1008에서, 클록은 프레임레이트(frameRate)의 값으로 설정되고, 이는 중간-코드 객체로부터 얻어진다. 단계 1010에서, 스테이지 오브젝트는 사전을 초기화한다.
사전은 문자 ID에 의해 디스플레이 객체 인스턴스들을 유지한다. 사전은 태그 id 필드 및 태드 핸들러 필드를 갖는 데이터 구조의 형식이 될 수 있다. 주요 MovieClip이 생성될 때, 주요 MovieClip은 사전에서 인카운터하는 모든 디스플레이 객체 정의들을 둔다. 새로운 중첩(nested) MovieClip들은, DefineSprite 디스플레이 객체로서 아래에서 기술된 것처럼, 제어 태그 핸들러에 의해 생성될 수 있다. 중첩된 MovieClip은 주요 MovieClip 내의 하나의 MovieClip이다. SWF 명세와 일치하는, 중첩된 MovieClip들은 주요(main) 무비 클립(중간-코드 DefineSprite 태그에 기초하여 생성) 내에서, 및 다른 정의 태그들을 포함하지 않고 생성된다.
단계 1012에서, 스테이지 객체는 주요 타임라인을 나타내는 MovieClip의 구조를 생성하고, 타임라인은 하나 이상의 프레임들로 구성된다. 도 11에서 도시된 것처럼, MovieClip의 생성은 제어 핸들러들에 프레임 ID를 맵핑하는 단계 1102, 액션 핸들러들에 프레임 ID를 맵핑하는 단계 1104, 프레임카운트를 설정하는 단계 1106, 및 사전을 설정하는 단계 1108을 포함한다.
중간-코드 객체가 JSON 객체로서 형성되는 경우에, 단계 1014에서, MovieClip은 JSON 객체에 포함된 JSON 태그들에 기초하여 구성된다. MovieClip은 SVG<defs>태그로서 설정된다. 도 12a, 12b, 도 12c는 MovieClip를 구성하는 흐름도이다. 톱 레벨<defs>태그는 단계 1202에서 형성된 후, JSON 태그들은 태그의 타입을 결정하기 위해 분석되고, 태그 타입이 제공되며, 액션이 JavaScript 런타임까지 수행된다. JSON 태그들은 정의 태그들, 제어 태그들, 및 액션 태그들로서 카테고리화된다. 정의 태그들은 콘텐트를 정의하고, 각 정의된 콘텐트는 문자 ID로 할당된다. 중간-코드 런타임은 MovieClip에 대한 사전에 정의된 콘텐트 및 연관된 문자 ID를 정의한다. 제어 태그들은 문자 ID에 의해 정의들을 참조하고, 정의된 문자상에서 일부 액션들을 수행할 수 있다. 예시된 실시예에서 이후에 논의될, 액션 태그들은 ActionScript 바이트코드를 포함할 수 있다.
중간-코드 런타임(210)은 사전으로부터 얻어진 디스플레이 객체들에 대한 디스플레이 리스트를 유지하고, DOM에서 SVG 노드들을 동적으로 생성하고 수정함으로써 SVG를 사용하는 디스플레이 리스트로부터 디스플레이 객체들을 디스플레이한다. MovieClip 타임라인을 플레이하는 동안, 디스플레이 리스트는 각각의 새로운 프레임에 대해 갱신된다. 디스플레이 리스트는 디스플레이 객체들의 적층 순서를 관리하고 클리핑 층들의 집행에 대해 책임이 있다. 디스플레이 객체는 디스플레이 리스트 상의 요소와 대응한다. 디스플레이 객체는, 일정 깊이로 놓인 문자 정의의 인스턴스이다. 디스플레이 객체는 DOM 트리의 정확한 위치에서 SVG <use> 태그를 생성하는 코드를 포함한다. 클리핑 깊이는 디스플레이 객체에 대해 설정될 수 있고, 객체 자신은 디스플레이되지 않을 것이다. 대신에, 객체의 아웃라인은 디스플레이 리스트 상에 다른 객체들을 클리핑하기 위해 사용된다. SVG에서의 클리핑 층들을 만들기 위해, 모든 효과있는 디스플레이 객체들은 <use> 태그의 클립-깊이 특성을 설정함으로써 수정된다. SVG는 태그당 하나의 클립-깊이 특성만을 허용하므로, <use> 태그는 클립-경로 특성을 갖는 그룹으로 랩핑(wrap)된다. 특히, <use> 태그는 여러 클리핑 층들에 의해 영향을 받는다면, 여러 SVG <g> 태그들 내부에 적층될 수 있다.
중간-코드 런타임은 DisplayObjectBuilder로서 언급된 인터페이스 클래스 정의를 포함한다. DisplayObjectBuilder는 정의로부터 디스플레이 객체의 인스턴스들을 구축(build)할 수 있는 빌더들에 대한 인터페이스를 나타낸다. 각각의 시간에서 스프라이트(sprite)가 플레이 리스트에 놓여지는 경우에서, 새로운 MovieClip 인스턴스는 DisplayObjectBuilder를 이용하여 구성된다.
도 12a, 도 12b, 도 12c는, 중간-코드 객체가 예시적인 실시예에서 JSON 태그들인, 태그들(IC_태그들)에 대해 검사되는 일련의 결정 단계들을 도시한다. MovieClip의 생성에서 분석된 JSON 태그들은 IC_태그 DefineFont(1204), IC_태그 DefineImage(1206), IC_태그 DefineButton(1230), IC_태그 DefineEditText(1232), IC_태그 DefineShape(1234), IC_태그 DefineText(1236), IC_태그 MovieDefinition(1238), IC_태그 DefineSound(1270), IC_태그 DoAction(1272), IC_태그 PlaceObject(1274), IC_태그 RemoveObject(1276), IC_태그 StartSound(1278), 및 IC_태그 ShowFrame(1279)를 포함한다. IC_태그들 DefineButton, DefineEditText, DefineFont, 및 DefineText는 정의 태그들이다. 제어 태그들은 IC_태그 StartSound 태그, IC_태그 PlaceObject 태그, 및 IC_태그 RemoveObject 태그를 포함한다.
각각의 정의 태그 및 제어 태그는 중간-코드 태그 핸들러로서 언급된 연관된 동작을 갖는다. 정의 및 제어 태그들에 대한 중간-코드 실시간(210)에 의해 수행된 동작들은 제어 태그들의 경우에 SVG 노드를 부가하거나 SVG 노드를 수정하는 것을 포함한다. 제어 태그들은 특정 프레임에 결합되고, 프레임이 디스플레이되는 각각의 시간에서 실행된다. 액션 태그들은 IC_태그 DoAction 태그를 포함한다. 액션 태그들은 또한 특정 프레임에 결합되고, 프레임이 디스플레이되는 각각의 시간에 실행된다.
정의 및 제어 태그들은 DOM 트리로의 통합을 위해 SVG 태그들을 생성한다. DOM 트리에서의 SVG 태그들은 다른 HTML 태그들에 따라 웹 브라우저에 의해 다루어진다.
IC_태그 DefineFont(1204)의 경우에서, DefineFont 태그 핸들러는 단계 1214에서 생성된다. DefineFont 태그 핸들러를 구성할 때, SVG<font>노드 또는 <font-face> 노드는 생성되고, 이는 폰트의 글리프(glyph) 정의들을 포함할 수 있다. SVG<font> 또는 <font-face>노드는 DOM에 첨부된다. SVG<font-face> 노드는 속성 폰트-패밀리를 포함할 수 있다. 그와 같이, 생성된 폰트는 이러한 폰트-패밀리를 언급함으로써 이후에 사용될 수 있다. SVG<font-face> 노드는, 또한, 상승 및 하강 속성들을 포함할 수 있다. SVG<font-face> 노드는 EM 스퀘어 크기(EM square size)의 값으로 설정된 속성 "horiz-adv-x"를 포함할 수 있다. SVG<glyph> 노드는 글리프 데이터의 값을 갖는 속성 d, 및 속성 유니코드를 설정할 수 있다.
IC_태그 DefineImage(1206)의 경우에서, DefineImage 태그 핸들러는 단계 1206에서 생성된다. DefineImage 태그 핸들러를 구성할 때, SVG<image> 노드는 생성되고, 이는 속성들 너비, 높이, 및 하이퍼링크를 가질 수 있다. SVG<image> 노드는 DOM에 첨부된다.
IC_태그 DefineButton(1230)의 검출의 경우에서, 단계 1240에서, 중간-코드 런타임은 DefineButton 태그 핸들러를 생성할 것이고, 단계 1250에서, 태그 id 및 DefineButton 태그 핸들러를 사전에 둘 것이다.
IC_태그 DefineEditText(1232)의 검출의 경우에서, 중간-코드 런타임은 단계 1242에서 DefineEditText 태그 핸들러를 생성할 것이고, 단계 1252에서 DefineEditText 태그 핸들러를 구성할 것이고, 이는 SVG<text>노드를 생성한다. SVG<text>노드는 DOM에 첨부된다. 또한, 태그 id 및 DefineEditText 태그 핸들러는 단계 1262에서 사전에 두어진다. <text> 노드에 대해 설정될 수 있는 속성들은, 폰트-패밀리, 폰트-사이즈, x, y, 채움-규칙(fill-rule), 채움, 채움-불투명도(fill-opacity), 및 텍스트-앵커(text-anchor)를 포함한다. SWF가 화이트 스페이스(white space)를 보존하는 동안 SVG는 화이트 스페이스를 붕괴시키기 때문에, 속성 "스타일(style)"은 보존 화이트 스페이스의 값으로 설정된다.
IC_태그 DefineShape(1234)의 검출의 경우에서, 중간-코드 런타임은 DefineShape 태그 핸들러를 생성하는 단계(1244), 및 DefineShape 태그 핸들러를 구성하는 단계(1254)를 수행한다. DefineShape 태그 핸들러를 구성하는 것은 형태에 대응하는 경로 노드들을 포함하는 SVG 그룹을 생성하고, 형태를 그리기 위해 필요한 모든 채움형태 정의들을 생성한다. SVG 그룹은 SVG<g>태그 및 SVG<path>노드들의 세트로서 형성된다. SVG 그룹은 DOM에 첨부된다. 또한, 단계 1264에서, 태그 id 및 DefineShape 태그 핸들러는 사전에 두어진다.
IC_태그 DefineText 태그(1236)를 검출할 시 수행된 동작은 DefineText 태그 핸들러를 생성하는 단계 1246, 및 단계 1256에서 DefineText 태그 핸들러를 구성하는 것을 포함한다. DefineText 태그 핸들러의 구성에서, SVG<g>노드 및 <text>노드들의 세트는 생성된다. 텍스트 그룹에 대한 SVG<g>노드는 변환 행렬의 값을 갖는 변환의 속성을 포함할 수 있다. 상기에서 언급한 것처럼, SVG<text>노드는 폰트-패밀리, 폰트-사이즈, x, y, 채움-규칙, 채움, 및 채움-불투명도를 포함하는 속성들을 가질 수 있다. 또한, 단계 1266에서, 태그 id 및 DefineText 태그 핸들러는 사전에 두어진다.
IC_태그 MovieDefinition 태그가 검출되는(1238) 경우에, DefineSprite 태그 핸들러 생성하는 동작은 단계 1248에서 수행되고, 단계 1258에서, 태그 id 및 DefineSprite 태그 핸들러는 사전에 두어진다.
IC_태그 DefineSound 태그의 검출(1270)과 연관된 동작은 DefineSound 태그 핸들러를 생성하는 단계 1280 및 DefineSound 태그 핸들러를 사운드 매니저에 등록시키는 단계 1290을 포함한다.
IC_태그 DoAction 태그가 검출(1272)되는 경우에, 단계 1282에서 DoAction 태그 핸들러는 생성되고, 단계 1292에서, DoAction 태그 핸들러는 프레임에 대해 액션 핸들러로서 부가된다.
PlaceObject 태그 핸들러 및 RemoveObject 태그 핸들러는 프레임에 대한 플레이 리스트 상에 디스플레이 객체들을 두거나 삭제하는데 책임이 있다. IC_태그 PlaceObject 태그의 검출(1274)시, PlaceObject 태그 핸들러는 단계 1284에서 생성되고, 단계 1294에서, PlaceObject 태그 핸들러는 프레임에 대한 제어 태그 핸들러로서 부가된다. IC_태그 RemoveObject 태그의 검출(1276)시, RemoveObject 태그 핸들러는 단계 1286에서 생성되고, 단계 1296에서, RemoveObject 태그 핸들러는 프레임에 대한 제어 태그 핸들러로서 부가된다.
IC_태그 StartSound 태그의 검출(1278)시, 단계 1288에서, StartSound 태그 핸들러는 생성되고, 단계 1298에서, StartSound 태그 핸들러는 프레임에 대한 제어 태그 핸들러로서 부가된다.
IC_태그 ShowFrame 태그는 프레임의 종료를 마크한다. IC_태그 ShowFrame 태그의 검출(1279)시, 프레임 카운터는 증분된다.
도 12a, 12b 및 12c의 결정 단계들은 모든 태크들이 JSON 객체에서 검출될 때까지 반복된다.
도 8에서 도시된 것처럼, SVG 장면를 구성하는 단계 804이후, 애니메이션은 단계 806에서 수행된다. 도 12a, 12b, 12c에서, MovieClip 객체의 구성은 MovieClip 객체에 대해 사전에 두어진 정의 태그 핸들러들, SVG 노드들의 배열을 갖는 초기 DOM, 연관된 프레임들에 정의된 제어 태그 핸들러들, 및 연관된 프레임들에 대해 정의된 액션 핸들러들을 발생시킨다. 애니메이션은 클록을 시작하고 MovieObject에 대한 플레이 방법을 수행함으로써 중간-코드 런타임에 의해 수행된다. 도 13, 도 14 및 도 15는 플레이 리스트로부터 애니메이션을 생성하는 예시적인 실시예에 포함된 단계들을 도시한다.
애니메이션은 DOM 상에 SVG 노드들을 동적으로 부가하고 수정하는 것을 포함한다. SVG 노드들을 동적으로 부가하고 수정하는 것에 관련된 단계들은 도 13의 흐름도에서 도시된다. 애니메이션을 시작하기 위해, 클록은 단계 1300에서 시작된다. 클록은 각각 등록된 MovieClip의 틱 방법(tick method)을 호출함으로써 시작하고, 설정 프레임레이트로 이러한 방법의 호출을 계속할 것이다. 다음, 플레이 방법은 각 MovieClip에 대해 호출된다. 플레이 방법은 MovieClip이 클록에 따라 단계 1302에서 다음 프레임으로 진행하도록 한다. 각각의 프레임에서, 각각의 프레임에 대해 색인된 제어 태그 핸들러들의 세트는 단계 1304에서 실행된다. 또한, 각각의 프레임에서, 각각의 프레임에 대해 색인된 액션 핸들러들의 세트는 단계 1308에서 실행된다. MovieClip에서 프레임들을 통한 반복은, 방법의 종료가 단계 1308에서 MovieClip으로 호출될 때까지 계속된다.
도 14는 제어 태그 핸들러들의 실행에서 포함된 단계들을 더 상세하게 도시한다. 프레임과 연관될 수 있는 제어 태그 핸들러들의 세트는 StartSound 태그 핸들러, PlaceObject 태그 핸들러, 및 RemoveObject 태그 핸들러를 포함한다. StartSound 태그 핸들러가 실행될 때(1400), 사운드는 단계 1402에서 시작된다. PlaceObject 태그 핸들러의 실행(1404)은 플레이 리스트 상에 디스플레이 객체들을 두고, 이는 프레임에서 디스플레이되고 있는 장면의 수정으로 이어진다. 단계 1406에서, 디스플레이 객체가 디스플레이 리스트 상에 존재하면, 디스플레이 객체는 단계 1408에서 정해진 변환 방법을 통해 수정되고, 기존의 색 변환 행렬에 대해, 정해진 색 변환을 통해 선택적으로 수정된다. 단계 1406에서, 디스플레이 객체가 디스플레이 리스트 상에 존재하지 않으면, 새로운 디스플레이 객체는 단계 1410에서 생성되고 클립 깊이로 설정된다. 새로운 디스플레이 객체는, 단계 1412에서, 디스플레이 리스트에 두어지고, DOM에 부가되며, 디스플레이 객체에 대한 변환 행렬은 단계 1414에서 설정된다. 디스플레이 객체가 색 변환 행렬을 가지면, 색 변환 행렬은 설정될 것이다. 각 경우에서, 변환 행렬 및 색 변환 행렬의 설정은 디스플레이 객체로 하여금 현재 디스플레이된 프레임에서 디스플레이되거나 수정되도록 할 것이다. 디스플레이된 객체는, RemoveObject 태그 핸들러가 실행될 때(1416), 단계 1418에서, 디스플레이 리스트로부터 제거될 것이다. 제어 태그 핸들러들의 세트에서 다른 제어 태그 핸들러들은 실행될 것이다(1402).
버튼 디스플레이 객체를 생성하는 경우에, 디스플레이 객체를 생성하는 단계 1410에서, 버튼은 SVG<g>태그에 의해 표시된, 상태들의 그룹으로 형성된다. 형성된 각 버튼은 3개의 상태: 업(노멀), 오버 및 다운을 갖는다. 각 버튼 상태는 다른 미리정의된 문자들의 디스플레이 리스트로서 형성된다. 따라서, 버튼들은 크로스-컴파일러에 의해 제공된 일상적인 형태 정의들로서 생성된다. 버튼들은 또한 모든 이벤트 핸들러들이 첨부된 히트 상태를 갖는다. 버튼들의 이벤트 핸들러들은 중간-코드 런타임에 의해 처리된다. 이벤트 핸들러들은 '마우스오버(mouseover)', '마우스업(mouseup)', '마우스다운(mousedown)' 및 '마우스아웃(mouseout)'을 포함한다.
도 15는 액션 핸들러들의 실행에 포함된 단계들을 도시한다. 액션 핸들러는 인카운터되고(1500), 핸들러들과 연관된 액션들은 단계 1502에서 실행될 것이다. 단계들은 단계 1504에서 각각 등록된 액션 핸들러에 대해 반복된다.
상호대화 영화들은 JavaScript®가 객체 지향된 프로그래밍 언어가 되는 것처럼, ActionScript®을 사용하지만, 어도비 플래쉬 애플리케이션의 개발을 위해 부가된 사용을 가지고 구현될 수 있다. 다른 SWF 파일들을 로딩하는 것 같은 상호대화 및 복합 작업들은 ActionScript®을 사용하여 수행될 수 있다.
어도비는 ActionScript® 소스-코드를 ActionScript® 바이트코드로 컴파일하는 컴파일러를 제공한다. ActionScript®가 애니메이션을 제어하기 위해 개발되면, ActionScript® 바이트코드는, 예를 들어, DoAction 태그들 및 DefineButton 태그들의 형식으로, SWF 파일에 포함될 것이다. Adobe® Flash® 플레이어는 ActionScript® 바이트코드를 해석하기 위한 기능을 제공한다.
크로스-컴파일러(204)는 ActionScript® 바이트코드를 중간-코드 객체에 전송한다. 상기 전송은 SWF DoAction 태그를 ActionScript® 바이트코드를 포함하는 중간-객체 DoAction 태그로 변환함으로써 달성된다. 유사한 전송은 버튼들에 포함된 ActionScript® 바이트코드에 대해 수행된다. 후속으로, 크로스-컴파일러(204)는 ActionScript® 바이트코드를 통해 전송한다. 중간-코드 런타임은 중간-코드 객체에 포함된 ActionScript® 바이트코드에 대한 해석기(interpreter)로서 동작한다.
예시적인 동작 1
예시적인 동작에 대한 입력들 및 출력들은 도 16 내지 도 19에서 도시된다. 도 16의 SWF 파일은 하나의 DefineShape 태그 내에 2개에서 인접한 직사각형들: 붉은색 하나 및 녹색 하나를 그릴 수 있다. 이 정의는 PlaceObject 태그에 의해 스테이지에 두어지고, 프레임은 ShowFrame 태그에 의해 디스플레이된다. SWF 파일은 'End' 태그로 종료한다. 도 16은 텍스트로 표현된 SWF 파일을 도시한다. SWF 이진 포맷의 텍스트 표현은 크로스-컴파일러(204) 내의 파서를 이용하여 얻어진다. 도 16에서 도시된 것처럼, SWF 파일은 하나의 헤더 및 한 세트의 태그된 데이터 블록들로 구성된다. SWF 헤더는 파일 버전, 파일의 길이, 프레임 사이즈, 프레임 레이트, 및 프레임 카운트를 기술한다. 도 16에서 도시된 예는 Version, FrameSize, FrameRate, 및 FrameCount를 도시한다. 태그된 데이터 블록들에서, 각 태그는 태그 타입으로 식별된다. 도 16에서 도시된 예에서, 태그 타입들은 [09:SetBackgroundColor],[02:DefineShape],[26:PlaceObject],[01:ShowFrame], 및 [00:End]이다. DefineShape 태그는 FillStyle들의 배열 및 ShapeRecord들의 배열을 포함한다.
도 17a 및 17b은 크로스-컴파일러을 이용하여 생성된 중간 표현으로서 예시적인 JSON 객체를 도시한다.
크로스-컴파일러는 도 16의 SWF 추상 구문 트리(AST: Abstract Syntax Tree)를 분석하고, SWF 추상 구문 트리를 중간 표현로 변환한다. AST의 아웃라인은 유사하지만, 다수의 방법들에서 원래의 SWF AST와 다르다.
원래의 SWF 파일의 (DefineShape 태그에서 포함된) 벡터 그래픽들이 SWF-특정 포맷으로 정의된 반면, 크로스-컴파일러는 이것을 SVG 벡터 그래픽들의 중간 표현으로 변환한다. 예를 들어, SWF는 각 에지에 관해 2개의 채움형태들: 에지의 좌측에 대해 하나 및 우측에 대해 하나를 허용한다. SVG는 그러한 행위를 지원하지 않아, 크로스-컴파일러는 경로를 2개의 피스들: 적색 사각형을 그리는 하나 및 녹색 사각형을 그리는 하나로 자동적으로 분할한다. 더욱이, 크로스-컴파일러는 SVG 벡터 데이터의 중간 표현("M2479"으로 시작하는 스트링)으로서 경로 정의를 생성한다.
위에서 언급한 것처럼, JSON AST는 SWF AST보다 단순하다:더 작은 수의 다른 태그들이 존재한다. SWF 명세에서, 특정 태그의 여러 변형들(예를 들어, DefineShape, DefineShape2, DefineShape3 및 DefineShape4)이 존재할 수 있다. 크로스-컴파일러 맵들은 그것들 모두를 중간-코드 DefineShape에 매핑하여, 중간-코드 실시간 심플러로 만든다. 동일한 것은 다수의 버전들을 갖는 다른 SWF 태그들을 적용한다.
도 17a, 17b에서 도시되지 않지만, 크로스-컴파일러는 여러 다른 SWF-특정 특징들을 웹-준비 포맷(web-ready format)으로 변환한다. 예를 들어, 이미지, 오디오, 비디오, 및 폰트 정의들은 모두 브라우저에서 사용하기 용이한 포맷으로 변환된다.
위에서 언급된 것처럼, JSON 객체는 키:중괄호로 둘러싸인 한 쌍의 값들 및 대괄호로 둘러싸인 배열들로 구성된다. 도 17a, 17b에 도시된 JSON 객체는 첫번째 대괄호 내의 요소들의 배열을 갖는 JSON DefineShape 태그로 구성된다. "경로(path)" 및 "채움형태(fillstyles)"은 DefineShape 태그 내의 배열들로 표현된다. 이후, DefineShape 태그가 SVG 변환 행렬로 변환된 SWF 변환 행렬이 된다. 아래에서 변환 매트릭스는 JSON PlaceObject 태그이고, 그후, SWF 헤더로부터 얻어진 ShowFrame 태그 "backgroundColor", "frameSize", "frameCount" 및 "frameRate"는 키:한쌍의 값들로 제공된다.
도 18은 도 17a, 17b의 JSON 객체를 이용한 중간-코드 런타임에 의해 생성될 수 있는 SVG 코드의 예이다. 중간-코드 런타임은 SVG 태그들 및 HTML5을 렌더링하기 위해 웹 브라우저에 의해 제공된 디스플레이 동작들을 이용하고, MovieClip을 플레이하기 위해 각 프레임에 대해 SVG를 업데이트하는 것과 같은 액션들을 수행한다.
중간-코드 런타임에 의해 생성된 MovieClip의 예시적인 출력은 도 19에서 도시된다. 도시의 목적을 위해, 적색 사각형은 사선형의 해시(hash) 마크 패턴을 사용하여 도시되고, 녹색 사각형은 크로스해치(crosshatch) 패턴을 사용하여 도시된다.
예시적인 동작 2
다른 예시적인 동작은 서로 상호대화하는 여러 SWF 파일들을 포함한다. Adobe® Flash® 플레이어의 특징은 다른 차일드(child) 애니메이션들을 호출하기 위한 애니메이션들의 기능이다. 예시적인 동작은 이러한 특징을 제공하기 위해 중간-코드 런타임의 사용을 도시한다.
어도비 플레시 IDE를 사용하는 개발자는 소스-레벨 ActionScript를 생성하고, 호출 "loadMovie"를 포함한다. 어도비 플레시 IDE는 ActionScript 바이트코드를 포함하는 SWF DoAction 태그에서 발생하는 ActionScript를 컴파일링한다. ActionScript 바이트코드는 ActionGetURL2 명령(ActionScript에서 loadMovie의 동등물)을 포함할 것이다. Adobe® Flash® 플레이어는 SWF 파일을 실행할 수 있고 ActionScript 바이트코드를 해석할 수 있다. ActionGetURL 명령을 인카운터할 때, 플레이어는 차일드 SWF 파일을 불러온다.
예시적인 동작 2에서, 각 애니메이션은 각 SWF 파일들로 어도비 플레시 IDE를 사용하여 컴파일링된다. 페어런트(parent) 애니메이션은 loadMovie의 ActionScript 2.0 함수를 포함한다. 도 20은 ActionScript 2.0 loadMovie 함수:loadMovie("child.swf",_root)를 예시적인 페어런트 SWF 파일을 도시한다. ActionScript 2.0 "loadMovie" 함수를 갖는 페어런트 플래시 파일은 ActionGetURL2 명령을 포함하는 ActionScript 바이트코드를 생성하기 위해 컴파일링된다. 어떤 차일드 애니메이션들은 각각의 SWF 파일들로 컴파일링된다.
크로스-컴파일러(204)는 페어런트 SWF 파일을 컴파일한다. HTML 페이지는 위에서 기술한 것처럼, 스테이지 객체로서 페어런트 SWF 파일을 통합한다. 또한, 어떤 차일드 SWF 파일들은 크로스-컴파일링된다. 이후, 플레임의 디스플레이동안 또는 버튼 이벤트의 핸들링동안과 같이 페어런트 무비 타임라인의 실행동안, 페어런트 무비는 ActionGetURL2 ActionScript 명령을 인카운트할 수 있다. ActionGetURL2 명령은 DoAction JSON 태그에 포함된 ActionScript 바이트코드의 형식이다. ActionGetURL2 함수가 인카운터될 때, 중간-코드 런타임은, JSON 객체의 형식으로, XmlHttpRequest를 이용한 크로스-컴파일링된 차일드 SWF 파일을 로딩할 것이다. JSON 객체는 ActionGetURL2 함수에서 특정된 위치에 두어진다. 차일드 무비를 표현하는 JSON 객체를 수신한 후에, 객체는 MovieClip으로 해석되고, 페어런트 타임라인 내의 중첩된 MovieClip으로 렌더링되어 얻어진다.

Claims (16)

  1. 서버 컴퓨터(302, 500) 및 상기 서버 컴퓨터와 통신하는 적어도 하나의 타입의 클라이언트 컴퓨터(304, 400, 108, 110, 112, 114)를 갖는 시스템(300)에 있어서,
    상기 서버 컴퓨터(302)는 크로스-컴파일러(308, 520)를 실행하고;
    상기 적어도 하나의 타입의 클라이언트 컴퓨터(304, 400)는 연관된 디스플레이 부분(408)을 갖고, 적어도 하나의 타겟 웹 브라우저(312, 430)를 실행할 수 있고, 상기 적어도 하나의 타겟 웹 브라우저는 런타임 스크립트(314, 428)를 수행할 수 있고;
    상기 크로스-컴파일러(308, 520)는, 상기 적어도 하나의 타겟 웹 브라우저(312, 430)에 대한 중간 객체를 생성(618)하기 위해, 포맷된 멀티미디어 객체를 분석(606)하고, 태그된 데이터 블록 객체들을 생성(610)하고, 상기 멀티미디어 객체에 포함된 멀티미디어 데이터 상에 리코딩을 수행(612)하고;
    상기 리코딩은 상기 멀티미디어 객체 내의 여러 변형들을 갖는 적어도 하나의 태그를 상기 멀티미디어 객체 내의 단일 태그로 변환하고;
    상기 런타임-스크립트(314, 428)는 상기 타겟 웹 브라우저(312, 430)에 의해 멀티미디어 콘텐트를 렌더링(806)하기 위해 스케일러블 벡터 그래픽 태그들을 동적으로 생성하고 수정(804)하기 위해 상기 중간 객체를 사용(802)하는,
    시스템.
  2. 휴대용 디스플레이 디바이스(304, 400, 108, 110, 112, 114)에 있어서,
    런타임 스크립트(runtime script)(314, 428), 중간 데이터 구조(310), 및 브라우저(312, 430)을 저장하는 저장 매체(424) - 상기 중간 데이터 구조는 포맷된 멀티미디어 객체(306)에 기초하여 상기 브라우저에 대해, 크로스-컴파일레이션(cross-compilation)에 의해 생성되고, 상기 크로스-컴파일레이션은 중간 객체를 생성(618)하기 위해, 포맷된 멀티미디어 객체를 분석(606)하고, 태그된 데이터 블록 객체들을 생성(610)하고, 상기 멀티미디어 객체에 포함된 멀티미디어 데이터 상에 리코딩을 수행(612)하고, 상기 리코딩은 상기 멀티미디어 객체 내의 여러 변형들을 갖는 적어도 하나의 태그를 상기 멀티미디어 객체 내의 단일 태그로 변환하고 - 와;
    디스플레이(408)와; 그리고
    상기 중간 데이터 구조를 획득(802)하고, 상기 브라우저(312, 430)에 의한 해석(interpretation)을 위해 스케일러블 벡터 그래픽 코드들을 동적으로 생성하고 수정(804)하기 위해 상기 런타임 스크립트를 수행하는 프로세서(406)를 포함하고,
    상기 브라우저는 상기 스케일러블 벡터 그래픽 코드들을 해석함으로써 상기 휴대용 디스플레이 디바이스의 디스플레이 상에서 멀티미디어 이미지를 렌더링(806)하는,
    휴대용 디스플레이 디바이스.
  3. 제 2 항에 있어서,
    상기 스케일러블 벡터 그래픽 코드들은 하이퍼텍스트 마크업 언어 문서의 문서 객체 모델로 인서트(insert)(1002)되는, 휴대용 디스플레이 디바이스.
  4. 제 2 항에 있어서,
    상기 프로세서(406)는 구조화된 태그를 생성(1002), 상기 태그에 대한 한 쌍의 속성값들을 설정(1004), 프레임레이트를 설정(1006), 사전 구조(dictionary structure)를 생성(1010), 및 무비 클립을 생성(1012)함으로써 그래픽 코드들을 생성하고 수정(804)하기 위해 상기 런타임 스크립트(428)를 수행하는, 휴대용 디스플레이 디바이스.
  5. 제 4 항에 있어서,
    상기 무비 클립은 타임라인을 구성하는 복수의 프레임들을 갖고, 애니매이션으로서 상기 디스플레이 상에서 렌더링(1302, 1304, 1306, 1308)되는, 휴대용 디스플레이 디바이스.
  6. 제 5 항에 있어서,
    상기 중간 데이터 구조는 데이터 정의 태그들, 제어 태그들 및 액션 태그들 중 하나 이상을 포함하고, 상기 프로세서(406)는 상기 중간 데이터 구조에 인카운터된 각각의 데이터 정의 태그 및 제어 코드 태그에 대한 그래픽 정의 태그를 생성(1214, 1216, 1240, 1242, 1244, 1246, 1248, 1280, 1282)하고, 상기 제어 코드 태그에 기초하여 디스플레이 리스트 상에 적어도 하나의 디스플레이 객체를 배치(place)(1412)함으로써, 상기 애니매이션을 수행하도록 상기 런타임 스크립트(428)를 처리하고, 상기 디스플레이 리스트 상에 상기 적어도 하나의 디스플레이 객체를 배치하는 것은 스케일러블 벡터 그래픽 태그들에 기초하여 디스플레이하기 위해 디스플레이 객체를 생성하는 것(1410) 또는 상기 무비 클립의 프레임들을 플레이(play)하기 위해 디스플레이 객체에 대한 스케일러블 벡터 태그를 수정하는 것(1408)을 포함하는, 휴대용 디스플레이 디바이스.
  7. 제 6 항에 있어서,
    상기 프로세서(406)는 상기 무비 클립 내의 각각 다음 프레임에 대해 그래픽들 정의 태그들을 갱신하기 위해 상기 런타임 스크립트를 수행(1304)하는, 휴대용 디스플레이 디바이스.
  8. 제 2 항에 있어서,
    상기 저장 매체(424)는 페어런트 멀티미디어 객체(parent multimedia object)에 대한 페어런트 중간 데이터 구조 및 복수의 차일드 멀티미디어 객체(child multimedia object)들에 대한 복수의 차일드 데이터 구조들을 저장하고, 상기 프로세서(406)는 복합 무비 클립(composite movie clip)을 생성하기 위해 상기 차일드 중간 데이터 구조들을 상기 페어런트 중간 데이터 구조로 동적으로 로딩하는, 휴대용 디스플레이 디바이스.
  9. 제 2 항에 있어서,
    상기 저장 매체(424)는 타겟 브라우저(target browser)에 의해 해석될 수 있는 포맷들로 리코딩된 적어도 하나의 이미지, 비디오 및 오디오를 저장하는, 휴대용 디스플레이 디바이스.
  10. 삭제
  11. 제 1 항에 있어서,
    상기 시스템(300)은 복수의 타입들의 클라이언트 컴퓨터들(108, 110, 112, 114)을 포함하고, 상기 복수의 타입들의 클라이언트 컴퓨터들(108, 110, 112, 114)은 다른 각각의 타겟 웹 브라우저(312, 430)를 실행할 수 있고, 상기 크로스 컴파일러(308)는 상기 타겟 웹 브라우저들의 각각에 대해 중간 객체(310)를 생성하는, 시스템.
  12. 제 1 항에 있어서,
    상기 클라이언트 컴퓨터(304)는 복수의 타겟 웹 브라우저들(312)을 포함하고, 상기 크로스 컴파일러(308)는 상기 타겟 웹 브라우저들의 각각에 대해 중간 객체(310)를 생성하는, 시스템.
  13. 제 1 항에 있어서,
    상기 크로스 컴파일러(308)는 태그된 데이터 블록 객체들로서 생성될 수 없는 상기 포맷된 멀티미디어 객체의 부분들에 대한 경고 메시지들을 생성하는, 시스템.
  14. 삭제
  15. 삭제
  16. 삭제
KR1020137028403A 2011-03-28 2012-02-07 중간 포맷을 이용한 swf와 html의 크로스-컴파일링 KR101569765B1 (ko)

Applications Claiming Priority (3)

Application Number Priority Date Filing Date Title
US13/073,916 US20120249870A1 (en) 2011-03-28 2011-03-28 Cross-Compiling SWF to HTML Using An Intermediate Format
US13/073,916 2011-03-28
PCT/US2012/024121 WO2012134633A1 (en) 2011-03-28 2012-02-07 Cross-compiling swf to html using an intermediate format

Publications (2)

Publication Number Publication Date
KR20130143725A KR20130143725A (ko) 2013-12-31
KR101569765B1 true KR101569765B1 (ko) 2015-11-27

Family

ID=45607412

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020137028403A KR101569765B1 (ko) 2011-03-28 2012-02-07 중간 포맷을 이용한 swf와 html의 크로스-컴파일링

Country Status (6)

Country Link
US (1) US20120249870A1 (ko)
EP (1) EP2691880B1 (ko)
JP (1) JP5815114B2 (ko)
KR (1) KR101569765B1 (ko)
CA (1) CA2831588C (ko)
WO (1) WO2012134633A1 (ko)

Families Citing this family (20)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9600919B1 (en) 2009-10-20 2017-03-21 Yahoo! Inc. Systems and methods for assembling and/or displaying multimedia objects, modules or presentations
CA2754520A1 (en) 2010-10-07 2012-04-07 Dundas Data Visualization, Inc. Systems and methods for dashboard image generation
US20120180108A1 (en) 2011-01-06 2012-07-12 Dundas Data Visualization, Inc. Methods and systems for providing a discussion thread to key performance indicator information
KR20120139019A (ko) * 2011-06-16 2012-12-27 삼성전자주식회사 편집 가능한 플래시 파일을 제공하는 장치 및 방법
US10387503B2 (en) 2011-12-15 2019-08-20 Excalibur Ip, Llc Systems and methods involving features of search and/or search integration
US10296158B2 (en) 2011-12-20 2019-05-21 Oath Inc. Systems and methods involving features of creation/viewing/utilization of information modules such as mixed-media modules
US10504555B2 (en) 2011-12-20 2019-12-10 Oath Inc. Systems and methods involving features of creation/viewing/utilization of information modules such as mixed-media modules
US11099714B2 (en) 2012-02-28 2021-08-24 Verizon Media Inc. Systems and methods involving creation/display/utilization of information modules, such as mixed-media and multimedia modules
WO2013177476A1 (en) 2012-05-23 2013-11-28 Qwiki, Inc. Systems and methods involving creation of information modules, including server, media searching. user interface and/or other features
US10417289B2 (en) 2012-06-12 2019-09-17 Oath Inc. Systems and methods involving integration/creation of search results media modules
US10303723B2 (en) 2012-06-12 2019-05-28 Excalibur Ip, Llc Systems and methods involving search enhancement features associated with media modules
US9465882B2 (en) 2012-07-19 2016-10-11 Adobe Systems Incorporated Systems and methods for efficient storage of content and animation
US10127327B2 (en) * 2014-05-21 2018-11-13 Adobe Systems Incorporated Cloud-based image processing web service
CA2893912C (en) 2014-06-09 2022-10-18 Dundas Data Visualization, Inc. Systems and methods for optimizing data analysis
WO2016053331A1 (en) * 2014-10-01 2016-04-07 Landmark Graphics Corporation Image based transfer of wellsite data between devices in a petroleum field
US11004170B2 (en) * 2015-11-17 2021-05-11 Google Llc Converting flash content to HTML content by generating an instruction list
WO2019004670A1 (en) * 2017-06-30 2019-01-03 Samsung Electronics Co., Ltd. METHOD AND ELECTRONIC DEVICE FOR RENDERING SVG CONTENT
CN109445778A (zh) * 2018-09-13 2019-03-08 珠海豆饭科技有限公司 一种基于svg文件的界面辅助生成的方法和装置
US10824405B2 (en) * 2018-11-14 2020-11-03 Adobe Inc. Layer-based conversion with functionality retention
CN113516737A (zh) * 2020-03-27 2021-10-19 北京小米松果电子有限公司 动画转换方法、装置及智能设备

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100271374A1 (en) 2009-04-27 2010-10-28 Research In Motion Limited Conversion of swf shape definitions for vector graphics rendering

Family Cites Families (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6167441A (en) * 1997-11-21 2000-12-26 International Business Machines Corporation Customization of web pages based on requester type
US6964011B1 (en) * 1998-11-26 2005-11-08 Canon Kabushiki Kaisha Document type definition generating method and apparatus, and storage medium for storing program
US6757678B2 (en) * 2001-04-12 2004-06-29 International Business Machines Corporation Generalized method and system of merging and pruning of data trees
US20040044960A1 (en) * 2002-09-04 2004-03-04 Gilbert Quenton Lanier System and method for creating efficient markup based language transactions
GB2400780B (en) * 2003-04-17 2006-07-12 Research In Motion Ltd System and method of converting edge record based graphics to polygon based graphics
US20080052381A1 (en) * 2006-08-22 2008-02-28 Koon Wah Yu Method and system for selecting a transcoder to convert between content types
US20100281042A1 (en) * 2007-02-09 2010-11-04 Novarra, Inc. Method and System for Transforming and Delivering Video File Content for Mobile Devices
WO2010124356A1 (en) * 2009-04-27 2010-11-04 Research In Motion Limited Conversion of swf morph shape definitions for vector graphics rendering
CN102238151B (zh) * 2010-04-27 2014-07-16 中兴通讯股份有限公司 一种基于Flash的媒体流生成系统及方法
JP5759187B2 (ja) * 2011-01-21 2015-08-05 株式会社 ディー・エヌ・エー ＡｄｏｂｅＦｌａｓｈ（登録商標）によるＳＷＦ形式の画像表現をＨＴＭＬ形式の画像表現に変換するプログラム

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100271374A1 (en) 2009-04-27 2010-10-28 Research In Motion Limited Conversion of swf shape definitions for vector graphics rendering

Also Published As

Publication number Publication date
EP2691880A1 (en) 2014-02-05
KR20130143725A (ko) 2013-12-31
JP2014519630A (ja) 2014-08-14
CA2831588A1 (en) 2012-10-04
WO2012134633A1 (en) 2012-10-04
CA2831588C (en) 2017-07-18
EP2691880B1 (en) 2019-05-08
US20120249870A1 (en) 2012-10-04
JP5815114B2 (ja) 2015-11-17

Similar Documents

Publication Publication Date Title
KR101569765B1 (ko) 중간 포맷을 이용한 swf와 html의 크로스-컴파일링
US20150286739A1 (en) Html5-protocol-based webpage presentation method and device
CN105574049B (zh) 移动应用的页面处理方法、装置和系统
Anthes HTML5 leads a web revolution
CN112114807A (zh) 界面显示方法、装置、设备及存储介质
Boduch et al. React and React Native: A complete hands-on guide to modern web and mobile development with React. js
US20090300472A1 (en) Method of authoring, deploying and using interactive, data-driven two or more dimensional content
Hales HTML5 and JavaScript Web Apps
JP6588577B2 (ja) 命令リストを生成することによるｆｌａｓｈコンテンツのｈｔｍｌコンテンツへの変換
US20120254724A1 (en) Encoder compiler, computer readable medium, and communication device
US20150169518A1 (en) Context editing without interfering with target page
US6957416B2 (en) Document builder classes and methods
Flotyński et al. Building multi-platform 3D virtual museum exhibitions with Flex-VR
US9560401B2 (en) Method of transmitting at least one content representative of a service, from a server to a terminal, and associated device and computer program product
US9529573B2 (en) Graphical user interface generation through use of a binary file
US20100077298A1 (en) Multi-platform presentation system
US20150121338A1 (en) Providing context in a swf file processor
CN113934959A (zh) 一种程序预览方法、装置、计算机设备和存储介质
CN116595284B (zh) 网页系统运行方法、装置、设备、存储介质和程序
CN114217780A (zh) 一种支持网页和小程序可视化开发的方法、系统及终端
CN115373683A (zh) 页面的展示方法、编译源代码的方法及相关设备
CN114817133A (zh) 一种pdf文件的生成方法、装置、设备及可读存储介质
Maheshwari Transforming Flash files to HTML5 and JavaScript
Mathiasson Isomorphic web applications: Depends on how you react
Sarkissian Evaluation of HTML5 Graphics for Data Structure Visualization

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
GRNT Written decision to grant
FPAY Annual fee payment

Payment date: 20181025

Year of fee payment: 4

FPAY Annual fee payment

Payment date: 20191030

Year of fee payment: 5