KR20160096360A

KR20160096360A - Method for real-time generation and reproducing of EPUB animation using style sheet animation and real-time generation and reproducing of EPUB animation system using thereof

Info

Publication number: KR20160096360A
Application number: KR1020150017887A
Authority: KR
Inventors: 한정준; 최태준
Original assignee: 주식회사 윌드림
Priority date: 2015-02-05
Filing date: 2015-02-05
Publication date: 2016-08-16
Also published as: KR101651928B1

Abstract

The present invention relates to a system for generating and reproducing electronic publication (EPUB) using a style sheet animation in real time, and a method of generating and reproducing the EPUB animation, which is performed by the system. The system includes a cascading style sheet 3 (CSS3) animation element input module (10), a hypertext markup language 5 (HTML5) custom attribute conversion module (20), and an e-book file generation module (30). The CSS3 animation element input module (10) receives the selection of the type of an animation from a user, a CSS3 animation element required to set the selected type of animation, and receives a CSS3 animation element required for at least one operation change for the selected type of the animation to create an operating list of the animation. The HTML5 custom attribute conversion module (20) converts the input CSS3 animation element into an HTML5 custom attribute to be stored, and inputs the CSS3 animation element converted to the HTML5 custom attribute into an HTML tag to be stored into the form of an HTML5 document file. The e-book file generation module (30) creates an EPUB3 file using the stored HTML5 document file. Accordingly, an ordinary user can easily make various EPUB files including an EPUB animation.

Description

스타일시트 애니메이션을 이용한 이펍 애니메이션의 실시간 생성 및 재생방법과 이를 이용한 이펍 애니메이션 생성 및 재생 시스템{Method for real-time generation and reproducing of EPUB animation using style sheet animation and real-time generation and reproducing of EPUB animation system using thereof}METHOD FOR REAL-TIME GENERATION AND REPRODUCTION OF PUB ANIMATION USING STYLESHEET ANIMATION AND PUBLIC ANIMATION GENERATION AND REPRODUCTION SYSTEM USING THE SAME thereof}

본 발명은 이펍 애니메이션의 생성 및 재생 방법에 관한 것으로, 보다 상세하게는 스타일시트 애니메이션을 이용한 이펍 애니메이션의 실시간 생성 및 재생 방법 및 이를 이용한 이펍 애니메이션 생성 및 재생 시스템에 관한 것이다.The present invention relates to a method for generating and playing back pub animations, and more particularly, to a real-time creating and playing method of pub animations using style sheet animation, and a pub animation creating and playing system using the method.

이펍(EPUB, electronic publication)은 국제 디지털 출판 포럼(IDPF, International Digital Publishing Forum)에서 제정한 개방형 자유 전자서적 표준이다. EPUB은 자동공간조정(reflowable)이 가능하게 설계되어 EPUB으로 만들어진 내용을 볼 때 디스플레이하는 기계의 형식, 크기에 자동으로 최적화되어 보여줄 수 있게 한다.The EPUB (electronic publication) is an open, free electronic book standard established by the International Digital Publishing Forum (IDPF). EPUB is designed to be automatically reflowable so that it can be automatically optimized for the type and size of the display machine when you view the contents created by EPUB.

EPUB는 2007년 9월 이전에 있던 오픈 eBook 표준을 대체하기 위해 국제 디지털 출판 포럼에서 공식 표준으로 채택되으며, 최근 HTML5를 기준으로 하고 있는 EPUB3가 발표되어 사용되면서, 이전의 EPUB보다 표현할 수 있는 범위가 매우 확대되고 즉, EPUB3 기반의 전자서적은 웹과 마찬가지로 다양한 애니메이션 등 멀티미디어 컨텐츠의 제공이 가능해 진 환경이다. EPUB has been adopted as an official standard in the international digital publishing forum to replace the open eBook standard that was in place before September 2007. Recently, EPUB3, based on HTML5, has been announced and used, In other words, EPUB3-based e-book is an environment where multimedia contents such as various animations can be provided like web.

한편 현재 HTML5의 애니메이션은 주로 캔버스(canvas) 기법을 이용하여 화면에 애니메이션을 직접 만들어내는 방식을 채택하고 있다.On the other hand, HTML5 animation mainly adopts a method of creating animation directly on the screen using a canvas technique.

그러나, 캔버스(canvas) 기법을 이용하여 제작된 애니메이션은 대부분 이펍과 호환성이 낮다. 즉, 현존하는 EPUB3 뷰어(viewer)들이 캔버스(canvas)를 대부분 지원하지 않고 있으며, 캔버스(canvas)를 지원하는 뷰어(viewer)도 이미지의 동적로딩(loading)을 금지하고 있는 실정이다. 이에 따라, HTML5의 캔버스(canvas)기법을 이용하여 이펍 애니메이션을 제작하더라도 이러한 애니메이션을 재생할 수 없는 뷰어가 대부분이다.However, animation produced using the canvas technique is not compatible with most pubs. That is, existing EPUB3 viewers do not support most of the canvas, and viewers that support canvas also prohibit dynamic loading of images. Accordingly, most of viewers can not reproduce such an animation even if this pub animation is produced using the HTML5 canvas technique.

또한, 이러한 뷰어에서 재생가능한 애니메이션을 제작하더라도 사진파일이나 이미지 파일을 이용할 수 없고, 사용자가 점,선,면 등의 이동에 대한 수식을 만들어 객체의 이동을 설정한 애니메이션만이 재생이 가능한 환경이다.In addition, even if an animation that can be reproduced by such a viewer is produced, an image file or an image file can not be used, and an animation in which a user sets movement of an object by creating an expression for movement of a point, a line, .

즉, 기존의 캔버스(canvas) 방식으로는 예컨대 축구공이 날아가는 이동 애니메이션이나, 예컨대 말이 뛰는 프레임 애니메이션(frame Animation), 예컨대 바람개비가 빙글빙글 도는 회전 애니메이션, 예컨대 새가 날개짓을 하며 날아가는 복합 애니메이션 등을 EPUB3로 표현할 수 없으며, 이를 위해서는 사용자는 점,선,면을 기반으로 객체를 만들고, 이들의 이동에 관한 수식을 통해 애니메이션을 제작하여야 하며, 이는 일반 사용자에게는 거의 불가능에 가까운 작업이다.That is, in the conventional canvas method, for example, a moving animation in which a soccer ball flies, a frame animation in which a horse spins, for example, a spinning animation in which a pinwheel turns round and round, In order to do this, users must create objects based on points, lines, and faces, and create animations by expressions about their movements. This is almost impossible for ordinary users.

따라서, 사용자가 용이하게 EPUB3 애니메이션을 제작하고 이를 일반적인 EPUB3뷰어에서 재생하는 것이 가능한 이펍 애니메이션 생성 시스템 및 생성방법과 이에 연동하는 이폅 애니메이션의 재생방법이 절실히 요구되고 있다.Accordingly, there is an urgent need for a pub animation generation system and a reproduction method capable of easily creating an EPUB3 animation and reproducing the EPUB3 animation in a general EPUB3 viewer, and a reproduction method of the animation corresponding to the pub animation generation system.

한편, 현재 EPUB3를 지원하는 EPUB3 뷰어들은 위와 같이 캔버스(canvas) 방식을 지원하지 않는 반면, CSS3는 대부분 지원하고 있다. CSS 또는 캐스케이딩 스타일 시트(Cascading Style Sheets)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 이에 따라 CSS3 애니메이션을 제작하는 경우 CSS3를 통해 사용할 이미지를 미리 처리하기 때문에 이미지 동적 로딩의 문제도 해결할 수 있다.Meanwhile, EPUB3 viewers currently supporting EPUB3 do not support the canvas method as described above, but most of them support CSS3. CSS or Cascading Style Sheets is a language that describes how the markup language is actually rendered. It is used primarily in HTML and XHTML, and can also be used in XML. It is a W3C standard and has a high degree of freedom in defining layout and style. As a result, if you are creating CSS3 animations, you can also solve the problem of dynamic image loading by preprocessing images for use with CSS3.

그러나, CSS3는 정적인 방식으로 사용자가 원하는 애니메이션을 동적으로 생성할 수 없다. 즉, HTML이나 이폅이 표현되기 전에 CSS가 완성되어 있어야 하므로, 현재의 애니메이션 툴(Animation Tool)이나 위그지그 에디터(WISIWYG Editor)로는 CSS3 애니메이션을 동적으로 만들어낼 수 없는 문제가 있다.However, CSS3 can not dynamically create the animation that the user wants in a static way. In other words, there is a problem that CSS3 animation can not be created dynamically with the current animation tool or WISIWYG editor because the CSS must be completed before the HTML or image is expressed.

대한민국 특허공개공보 공개번호 10-2010-0007702호 (애니메이션 제작 방법 및 장치)Korean Patent Laid-Open Publication No. 10-2010-0007702 (Method and Apparatus for Producing Animation)

따라서, 본 발명은 상술한 문제를 해결하여, EPUB3 뷰어와 호환되는 CSS3 애니메이션을 이용하여 사용자가 실시간으로 애니메이션 툴(Animation Tool)이나 위지위그 에디터(WISIWYG editor)로 입력한 애니메이션을 EPUB3 애니메이션으로 생성하여 재생할 수 있고 결과적으로 일반 사용자도 이폅 애니메이션을 포함한 다양한 형태의 이펍 파일을 용이하게 제작할 수 있도록 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 방법 및 이를 이용하는 이펍 애니메이션의 생성 및 재생 시스템을 제공하는 것을 목적으로 한다.Accordingly, the present invention solves the above-mentioned problem and generates an EPUB3 animation as an animation inputted by a user in real time as an animation tool or a WISIWYG editor using a CSS3 animation compatible with the EPUB3 viewer The present invention relates to a method for realizing generation of a pub animation using a style sheet animation that enables a general user to easily reproduce various pub files including various animations, and to provide a system for creating and reproducing a pub animation using the generated pub animation. do.

상기 과제를 해결하기 위하여 본 발명은 일 측면에서, 스타일시트 애니메이션을 이용한 이펍 애니메이션의 실시간 생성 및 재생방법으로, 사용자로부터 애니메이션의 종류에 대한 선택을 입력받고 선택된 종류의 애니메이션의 설정에 필요한 CSS3 애니메이션 요소를 입력받으며, 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 애니메이션 동작 리스트를 생성하는 CSS3 애니메이션 요소 입력단계; 상기 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하여 저장하고 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하여 HTML5 문서 파일로 저장하는 HTML5 커스텀 어트리뷰트 변환단계; 및 상기 저장된 HTML5 문서 파일을 이용하여 EPUB3 파일을 생성하는 전자책 파일 생성단계;를 포함하는 것을 특징으로 한다.According to one aspect of the present invention, there is provided a method for real-time generation and playback of a pub animation using a style sheet animation, the method comprising: receiving a selection of an animation type from a user; receiving a CSS3 animation element A CSS3 animation element input step of inputting a CSS3 animation element necessary for at least one operation change of a selected type of animation and generating an animation operation list; An HTML5 custom attribute conversion step of converting the input CSS3 animation element into an HTML5 custom attribute and storing the converted CSS3 animation element into an HTML tag and storing the converted HTML3 custom attribute into an HTML5 document file; And generating an EPUB3 file using the stored HTML5 document file.

바람직하게는, CSS3 애니메이션 요소 입력단계는, 상기 CSS3 애니메이션 요소와 연관된 변수들을 초기화하는 변수 초기화 단계; 애니메이션의 종류 선택을 위한 애니메이션의 종류 선택 사용자 인터페이스를 디스플레이하여, 상기 애니메이션의 종류 선택 사용자 인터페이스를 통해 애니메이션의 종류에 대한 선택을 입력받고 각 선택된 애니메이션의 CSS3 애니메이션 요소를 입력받는 애니메이션종류 선택 단계; 애니메이션 동작 리스트 생성을 위한 동작 리스트 생성 사용자 인터페이스를 디스플레이하여, 동작 리스트 생성 사용자 인터페이스를 통해 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 동작 리스트를 생성하여 디스플레이하는 동작리스트 생성단계;를 포함하여 수행된다. Preferably, the step of inputting the CSS3 animation element comprises: a variable initialization step of initializing variables associated with the CSS3 animation element; An animation type selecting step of displaying an animation type selection user interface for selecting a type of animation, receiving a selection of a type of animation through a type selection user interface of the animation, and receiving a CSS3 animation element of each selected animation; Creating an action list for creating an animation action list A user interface is displayed to generate an action list. The action list creation user interface is used to input a CSS3 animation element necessary for at least one action change of a selected type of animation, Step < / RTI >

여기서 애니메이션의 종류는 회전 애니메이션, 이동 애니메이션, 프레임 애니메이션, 복합 애니메이션으로, 선택된 애니메이션의 크기, 반복횟수, 실행시간을 CSS3 애니메이션 요소로서 입력받는 것이 바람직하다.Here, it is preferable that the type of the animation is a rotation animation, a moving animation, a frame animation, and a composite animation, and the size, repetition count, and execution time of the selected animation are input as a CSS3 animation element.

또한, 여기서 상기 동작 변화에 필요한 CSS3 애니메이션 요소는 상기 애니메이션의 종류에 따라 상이한 요소가 입력되는 것이 바람직하다.It is preferable that a different element is input to the CSS3 animation element required for the operation change according to the kind of the animation.

또한, 바람직하게는 상기 HTML5 커스텀 어트리뷰트로 변환단계는, 상기 입력된 CSS3 애니메이션 요소의 값을 상기 변수에 설정하는 변수 설정단계; 상기 설정된 변수에 각각에 대응하는 HTML5 커스텀 어트리뷰트를 정의하여, 설정된 변수값을 상기 정의된 HTML5 커스텀 어트리뷰트의 밸류값으로 저장하여 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하는 HTML5 커스텀 어트리뷰트 변환단계; 및 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하고 DIV 태그를 입력받아 HTML 파일로 저장하는 HTML5 파일 생성단계를 포함하여 수행된다.Preferably, the step of transforming into the HTML5 custom attribute includes: setting a value of the input CSS3 animation element to the variable; An HTML5 custom attribute conversion step of defining an HTML5 custom attribute corresponding to each of the set variables, storing the set variable value as the value of the defined HTML5 custom attribute, and converting the inputted CSS3 animation element into HTML5 custom attribute; And an HTML5 file generation step of inputting a CSS3 animation element converted into an HTML5 custom attribute into an HTML tag, receiving a DIV tag, and storing the HTML file as an HTML file.

여기서, 전자책 파일 생성단계(S30)는 HTML 태그를 분석할 자바스크립트 파일(javascript file)을 포함하여 상기 전자책 파일을 생성하는 것이 바람직하다.Here, it is preferable that the electronic book file generation step S30 includes generating a javascript file for analyzing the HTML tags to generate the electronic book file.

또한, 여기서 상기 전자책 파일에 포함된 HTML5 커스텀 어트리뷰트를 분석하여 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 이를 기초로 EPUB3 애니메이션을 실행하는 EPUB3 애니메이션 실행단계;를 포함하는 것이 바람직하다.Here, it is preferable that the EPUB3 animation execution step of analyzing the HTML5 custom attribute included in the electronic book file to extract the CSS3 attribute of the CSS3 animation element and executing the EPUB3 animation based on the CSS3 attribute.

나아가, 여기서 상기 EPUB3 애니메이션 실행단계는, 상기 전자책 파일을 로딩하여 HTML 태그를 분석할 자바스크립트 파일(javascript file)의 메소드(method)를 호출하는 전자책 파일 로딩단계; HTML5 커스텀 어트리뷰트를 분석하여 CSS3애니메이션 요소로 변환하고 JSon 형태로 패킹(packing)하는 HTML5 커스텀 어트리뷰트를 분석단계; 패킹된 JSon을 기반으로 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 추출된 속성들을 CSS3의 문법에 맞게 문자열로 조합하여 바디(body)의 스타일 시트로 등록하는 CSS3 애니메이션 속성추출단계; 및 CSS3 애니메이션의 동작 리스트를 추출하여 동작 단위로 키프레임(KeyFrame)에 등록하며 등록되는 동작들을 CSS3의 문법에 맞게 문자열로 조합하여 스타일 요소로 등록하는 키프레임등록단계;를 포함하여 스타일 시트로 등록된 CSS3 애니메이션 요소의 CSS3 속성과 동작의 스타일 요소에 따라 이펍파일의 로딩 완료시 EPUB3 애니메이션 이 자동 실행되는 것이 바람직하다. Further, in the execution of the EPUB3 animation, the electronic book file loading step of loading the electronic book file and calling a method of a javascript file for analyzing the HTML tag; Analyzing HTML5 custom attributes to convert them into CSS3 animation elements and packing HTML5 custom attributes that are packed in JSon form; A CSS3 animation attribute extracting step of extracting a CSS3 attribute of a CSS3 animation element based on the packed JSon and combining the extracted attributes into a character string according to the grammar of CSS3 and registering the extracted attribute as a style sheet of a body; And a key frame registration step of extracting an operation list of the CSS3 animation and registering the extracted operation list in a key frame in an operation unit and registering the registered operations as a style element by combining them into a character string according to the grammar of CSS3, Depending on the CSS3 properties of the rendered CSS3 animation element and the style elements of the action, it is desirable that the EPUB3 animation be automatically launched upon completion of loading of this pub file.

다른 측면에서 본 발명은 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 시스템으로, 사용자로부터 애니메이션의 종류에 대한 선택을 입력받고 선택된 종류의 애니메이션의 설정에 필요한 CSS3 애니메이션 요소를 입력받으며, 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 애니메이션 동작 리스트를 생성하는 CSS3 애니메이션 요소 입력모듈, 상기 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하여 저장하고 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하여 HTML5 문서 파일로 저장하는 HTML5 커스텀 어트리뷰트 변환모듈; 및 상기 저장된 HTML5 문서 파일을 이용하여 EPUB3 파일을 생성하는 전자책 파일 생성 모듈;를 포함하는 것을 특징으로 한다.In another aspect of the present invention, there is provided a system for generating and playing a pub animation using a style sheet animation. The system includes a user selecting a type of an animation and receiving a CSS3 animation element required for setting a selected type of animation. A CSS3 animation element input module for inputting a CSS3 animation element necessary for one or more operation changes to the HTML5 custom attribute and generating an animation operation list, a CSS3 animation element for converting the input CSS3 animation element into an HTML5 custom attribute and storing the converted HTML5 custom attribute, An HTML5 custom attribute conversion module for storing the HTML5 document file as an HTML5 document file; And an electronic book file generation module for generating an EPUB3 file using the stored HTML5 document file.

바람직하게는 상기 HTML5 커스텀 어트리뷰트를 분석하여 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 이를 기초로 EPUB3 애니메이션을 실행하는 EPUB3 애니메이션 분석 및 실행 모듈;을 더 포함한다.And an EPUB3 animation analysis and execution module for analyzing the HTML5 custom attribute to extract the CSS3 attribute of the CSS3 animation element and execute the EPUB3 animation based on the CSS3 attribute.

본 발명에 의하면, HTML5를 이용한 이펍 파일 즉, EPUB3 파일의 제작에 있어, EPUB3 애니메이션과 HTML5의 애니메이션의 호환성의 문제를 해결하여, EPUB3 뷰어와 호환되는 CSS3 애니메이션을 EPUB3 애니메이션으로 생성하여 재생할 수 있으므로 전문가가 아닌 사용자도 애니메이션 툴이나 위지위그 에디터(WISIWYG editor)를 사용하여 용이하게 이펍 애니메이션을 실시간으로 제작 및 재생할 수 있게 하는 효과가 있다.According to the present invention, since the compatibility of the EPUB3 animation and the HTML5 animation is solved in the production of the pub file, that is, the EPUB3 file using the HTML5, the CSS3 animation compatible with the EPUB3 viewer can be generated and reproduced as the EPUB3 animation, The user can easily make and reproduce the pub animation in real time by using the animation tool or the WISIWYG editor.

도 1은 본 발명의 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 시스템의 개략 구성도.
도 2는 본 발명의 스타일시트 애니메이션을 이용한 이펍 애니메이션◎실시간 생성 및 재생 방법의 흐름도.
도 3a는 본 발명의 일 실시예의 CSS3 애니메이션 요소 입력단계의 흐름도.
도 3b는 본 발명의 일 실시예의 CSS3 애니메이션 요소 입력단계를 설명하기 위한 도면.
도 3c는 본 발명의 일 실시예의 CSS3 애니메이션 요소 입력단계를 설명하기 위한 도면.
도 4는 본 발명의 일 실시예의 HTML5 커스텀 어트리뷰트 변환단계의 흐름도.
도 5는 본 발명의 일 실시예의 EPUB3 애니메이션 실행단계의 흐름도.1 is a schematic block diagram of a real-time generation and playback system of a pub animation using a style sheet animation of the present invention.
FIG. 2 is a flowchart of the pub animation using the style sheet animation of the present invention.
FIG. 3A is a flowchart of a CSS3 animation element input step in an embodiment of the present invention. FIG.
FIG. 3B is a diagram for explaining a CSS3 animation element input step of an embodiment of the present invention; FIG.
3C is a diagram for explaining a CSS3 animation element input step of an embodiment of the present invention.
4 is a flow diagram of the HTML5 custom attribute conversion step of an embodiment of the present invention.
5 is a flowchart of an EPUB3 animation execution step according to an embodiment of the present invention;

후술하는 본 발명에 대한 상세한 설명은, 본 발명이 실시될 수 있는 특정 실시예를 예시로서 도시하는 첨부 도면을 참조한다. 이들 실시예는 당업자가 본 발명을 실시할 수 있기에 충분하도록 상세히 설명된다. 본 발명의 다양한 실시예는 서로 다르지만 상호 배타적일 필요는 없음이 이해되어야 한다. 따라서, 후술하는 상세한 설명은 한정적인 의미로서 취하려는 것이 아니며, 본 발명의 범위는 적절하게 설명된다면 그 청구항들이 주장하는 것과 균등한 모든 범위와 더불어 첨부된 청구항에 의해서만 한정된다. 도면에서 유사한 참조부호는 여러 측면에 걸쳐서 동일하거나 유사한 기능을 지칭한다.The following detailed description of the invention refers to the accompanying drawings, which illustrate, by way of illustration, specific embodiments in which the invention may be practiced. These embodiments are described in sufficient detail to enable those skilled in the art to practice the invention. It should be understood that the various embodiments of the present invention are different, but need not be mutually exclusive. The following detailed description is, therefore, not to be taken in a limiting sense, and the scope of the present invention is to be limited only by the appended claims, along with the full scope of equivalents to which the claims are entitled, if properly explained. In the drawings, like reference numerals refer to the same or similar functions throughout the several views.

본 발명은 CSS3, HTML5, EPUB3의 기술표준에 기반으로 구현되는 HTML5를 이용한 이펍 파일 즉, EPUB3 파일의 제작에 있어, EPUB3 애니메이션과 HTML5의 애니메이션의 호환성의 문제를 해결하여, EPUB3 뷰어와 호환되는 CSS3 애니메이션을 EPUB3 애니메이션으로 생성하여 재생할 수 있으므로 전문가가 아닌 사용자도 애니메이션 툴이나 위지위그 에디터(WISIWYG editor)를 사용하여 용이하게 이펍 애니메이션을 실시간으로 제작 및 재생할 수 있게 하며, EPUB3 파일 또는 이로 변환이 가능한 HTML5 파일의 생성 및/또는 재생을 위한 EPUB3 에디터 또는 편집툴, HTML5 에디터 또는 편집툴, 또는 이에 포함되는 애니메이션 툴에 포함되어 이를 구성하거나 이에 삽입 또는 연동하는 모듈형태의 소프트웨어 형태로 구현된다. 이하, 본 명세서에 있어서는 CSS3, HTML5, EPUB3의 기술표준 및 EPUB3 에디터 또는 편집툴, HTML5 에디터 또는 편집툴, 또는 이에 포함되는 애니메이션 툴의 일반적인 기술적 사항의 설명은 생략하고 본 발명의 특징을 중심으로 도면을 참조하여 설명한다.The present invention solves the problem of compatibility between EPUB3 animation and HTML5 animation in the production of EPUB3 file using HTML5, which is implemented based on the technical standards of CSS3, HTML5 and EPUB3, Since animations can be created and played back as EPUB3 animations, non-professional users can easily create and play these pub animations in real time using animation tools or the WISIWYG editor. The EPUB3 file or HTML5 An EPUB3 editor or an editing tool for creating and / or reproducing a file, an HTML5 editor or an editing tool, or an animation tool included in the EPUB3 editor or editing tool. Hereinafter, description of general technical aspects of the technical standards of CSS3, HTML5, and EPUB3, EPUB3 editor or editing tool, HTML5 editor or editing tool, or animation tool included therein will be omitted, .

도 1은 본 발명의 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 시스템의 개략 구성도이다.1 is a schematic block diagram of a real-time creation and playback system of a pub animation using a style sheet animation of the present invention.

도 1을 참조하면, 본 발명의 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 시스템은 CSS3 애니메이션 요소 입력모듈(10), HTML5 커스텀 어트리뷰트 변환모듈(20), 전자책 파일 생성 모듈(30), EPUB3 애니메이션 분석 및 실행 모듈(40)을 포함하여 구성된다. 이외 애니메이션의 종류 선택을 위한 애니메이션의 종류 선택 사용자 인터페이스 및 애니메이션 동작 리스트 생성을 위한 동작 리스트 생성 사용자 인터페이스를 포함하는 것으로 정의된다.Referring to FIG. 1, the system for generating and reproducing the pub animation using the style sheet animation of the present invention includes a CSS3 animation element input module 10, an HTML5 custom attribute conversion module 20, an electronic book file generation module 30, And an animation analysis and execution module 40. It is further defined to include a user interface for selecting a type of animation for selecting a type of animation, and a motion list generation user interface for generating an animation motion list.

CSS3 애니메이션 요소 입력모듈(10)은 사용자로부터 애니메이션의 종류에 대한 선택을 입력받고 선택된 종류의 애니메이션의 설정에 필요한 CSS3 애니메이션 요소를 입력받으며, 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 애니메이션 동작 리스트를 생성한다. 본 명세서에 있어서도 3a 내지 도 3c를 참조하여 설명되는 일 실시예의 CSS3 애니메이션 요소 입력단계(S10)를 수행한다.The CSS3 animation element input module 10 receives a selection of a type of animation from a user, receives a CSS3 animation element necessary for setting a selected kind of animation, and receives a CSS3 animation element And generates an animation operation list. In this specification, the CSS3 animation element input step (S10) of the embodiment described with reference to Figs. 3A to 3C is performed.

HTML5 커스텀 어트리뷰트 변환모듈(20)은 상기 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하여 저장하고 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하여 HTML5 문서 파일로 저장하는 기능을 수행한다. 본 명세서에 있어서 도 4를 참조하여 설명되는 일 실시예의 HTML5 커스텀 어트리뷰트 변환단계(S20)를 수행한다,The HTML5 custom attribute conversion module 20 converts the inputted CSS3 animation element into an HTML5 custom attribute and stores the HTML5 custom attribute into an HTML tag and saves it as an HTML5 document file. In this specification, the HTML5 custom attribute conversion step (S20) of the embodiment described with reference to Fig. 4 is performed,

전자책 파일 생성 모듈(30)은 상기 저장된 HTML5 문서 파일을 이용하여 EPUB3 파일을 생성하는 기능을 수행하는 모듈로서 정의된다. 본 명세서에 있어서 도 4를 참조하여 설명되는 일 실시예의 전자책 파일 생성단계(S30)를 수행한다.The electronic book file generation module 30 is defined as a module that performs a function of generating an EPUB3 file using the stored HTML5 document file. In this specification, an e-book file generation step (S30) of the embodiment described with reference to Fig. 4 is performed.

EPUB3 애니메이션 분석 및 실행 모듈(40)은 상기 HTML5 커스텀 어트리뷰트를 분석하여 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 이를 기초로 EPUB3 애니메이션을 실행하는 기능을 수행하는 모듈로서 정의된다. 본 명세서에 있어서 도 5를 참조하여 설명되는 일 실시예의 EPUB3 애니메이션 실행단계(S40)를 수행한다.The EPUB3 animation analysis and execution module 40 is defined as a module for analyzing the HTML5 custom attribute to extract the CSS3 attribute of the CSS3 animation element and executing the EPUB3 animation based on the extracted CSS3 attribute. In this specification, the EPUB3 animation execution step (S40) of the embodiment described with reference to FIG. 5 is performed.

CSS3 애니메이션 요소 입력모듈(10), HTML5 커스텀 어트리뷰트 변환모듈(20), 및 전자책 파일 생성 모듈(30)은 이펍 툴(EPUB tool)에 포함되고, EPUB3 애니메이션 분석 및 실행 모듈(40)은 이펍 뷰어(EPUB viewer)에 포함될 수 있으며, 이펍 뷰어(EPUB viewer)는 독자적인 프로그램일 수도 있으나 이에 한정되지 않고 이펍 툴(EPUB tool)의 한 기능 모듈로서 이펍 툴(EPUB tool)에 통합될 수도 있다. 각 모듈에서 수행되는 세부 과정 및 이를 구현하는 소스코드 등 기술은 하기 본 발명의 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생방법과 관련하여 상세히 설명한다.The EPUB3 animation analysis and execution module 40 includes the EPUB3 animation element input module 10, the HTML5 custom attribute conversion module 20 and the electronic book file generation module 30 in the EPUB tool, (EPUB viewer). The EPUB viewer may be an independent program, but is not limited thereto. It may be integrated into the EPUB tool as a function module of the EPUB tool. The detailed process performed in each module and the source code implementing the same will be described in detail with respect to the real-time generation and playback method of the pub animation using the style sheet animation of the present invention.

도 2는 본 발명의 스타일시트 애니메이션을 이용한 이펍 애니메이션의 실시간 생성 및 재생 방법의 흐름도이다.2 is a flowchart of a real-time generation and playback method of the pub animation using the style sheet animation of the present invention.

도 2를 참조하면, 본 발명의 본 발명의 스타일시트 애니메이션을 이용한 이펍 애니메이션의 실시간 생성 및 재생 방법은 사용자로부터 애니메이션의 종류에 대한 선택을 입력받고 선택된 종류의 애니메이션의 설정에 필요한 CSS3 애니메이션 요소를 입력받으며, 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 애니메이션 동작 리스트를 생성하는 CSS3 애니메이션 요소 입력단계(S10), 상기 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하여 저장하고 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하여 HTML5 문서 파일로 저장하는 HTML5 커스텀 어트리뷰트 변환단계(S20), 및 상기 저장된 HTML5 문서 파일을 이용하여 EPUB3 파일을 생성하는 전자책 파일 생성단계(S30)를 기본적으로 이펍 애니메이션의 실시간 생성과정을 수행한다.Referring to FIG. 2, a method for real-time generation and playback of a pub animation using a style sheet animation according to the present invention includes inputting a selection of an animation type from a user and inputting a CSS3 animation element necessary for setting a selected type of animation A CSS3 animation element input step (S10) for inputting a CSS3 animation element necessary for at least one operation change of a selected type of animation and generating an animation operation list, a step for converting the input CSS3 animation element into HTML5 custom attributes, An HTML5 custom attribute conversion step (S20) of inputting a CSS3 animation element converted into an HTML5 custom attribute into an HTML tag and storing the HTML5 custom element into an HTML5 document file, and an electronic book file generation step (step S20) of generating an EPUB3 file using the stored HTML5 document file S30) Seen to perform the real-time generation process of yipeop animation.

이와 같이 생성된 이펍 애니메이션 또는 이를 포함한 전자책 파일은 EPUB3 애니메이션 실행단계(S40)를 통해 상기 전자책 파일에 포함된 HTML5 커스텀 어트리뷰트를 분석하여 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 이를 기초로 EPUB3 애니메이션을 실행하는 방식으로 이펍 애니메이션의 실시간 재생된다.The pub animation or the electronic book file including the EPUB3 animation thus generated analyzes the HTML5 custom attribute included in the electronic book file through the EPUB3 animation execution step (S40), extracts the CSS3 attribute of the CSS3 animation element, This pub animation is played in real time in real time.

도 3a는 본 발명의 일 실시예의 CSS3 애니메이션 요소 입력단계의 흐름도, 도 3b는 본 발명의 일 실시예의 CSS3 애니메이션 요소 입력단계를 설명하기 위한 도면, 도 3c는 본 발명의 일 실시예의 CSS3 애니메이션 요소 입력단계를 설명하기 위한 도면으로, 도 3a 내지 도 3c를 참조하면, CSS3 애니메이션 요소 입력단계(S10)는 구체적으로, 상기 CSS3 애니메이션 요소와 연관된 변수들을 초기화하는 변수 초기화 단계(S11), 애니메이션의 종류 선택을 위한 애니메이션의 종류 선택 사용자 인터페이스를 디스플레이하여, 상기 애니메이션의 종류 선택 사용자 인터페이스를 통해 애니메이션의 종류에 대한 선택을 입력받고 각 선택된 애니메이션의 CSS3 애니메이션 요소를 입력받는 애니메이션 종류 선택 단계(S12), 애니메이션 동작 리스트 생성을 위한 동작 리스트 생성 사용자 인터페이스를 디스플레이하여, 동작 리스트 생성 사용자 인터페이스를 통해 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 동작 리스트를 생성하여 디스플레이하는 동작 리스트 생성단계(S13)를 포함하여 수행하여, 사용자로부터 애니메이션을 구성하는 CSS3 애니메이션 요소와 애니메이션의 동작 방법에 관한 CSS3 애니메이션 요소를 입력받는다.FIG. 3A is a flow chart of a CSS3 animation element inputting step in an embodiment of the present invention, FIG. 3B is a view for explaining a CSS3 animation element inputting step in an embodiment of the present invention, 3A to 3C, a CSS3 animation element input step S10 includes a variable initialization step S11 for initializing variables associated with the CSS3 animation element, An animation type selection step (S12) of displaying a type selection user interface of the animation for the animation type selection input for receiving the selection of the animation type through the type selection user interface of the animation and receiving the CSS3 animation element of each selected animation, Action List Generator for List Generation (S13) of displaying an operation list by inputting a CSS3 animation element necessary for one or more operation changes of a selected type of animation through an operation list generating user interface by displaying the user interface, and generating and displaying an operation list , A CSS3 animation element constituting an animation from a user, and a CSS3 animation element related to an operation method of the animation.

변수 초기화 단계(S11)에서는 사전 설정된 애니메이션 변수 값 즉, CSS3 애니메이션 요소의 값이 하기와 같이 초기값으로 설정된다.In the variable initialization step S11, the preset animation parameter value, that is, the value of the CSS3 animation element, is set to an initial value as follows.

- aniID: 각각의 Animation을 분별하기 위한 Animation 고유변호. - aniID: An animation-specific defense to distinguish each animation.

- image: Animation에서 사용될 Image 파일의 경로. - image: Path of the image file to be used in animation.

- duration: 1회의 Animation이 지속되는 실행 시간. - duration: The execution time at which one animation lasts.

- count: Animation 동작횟수. 반복 횟수의 수치나 무한대를 의미하는 infinite 입력. - count: Number of animation operations. Infinite input, meaning the number of repetitions or infinity.

- opacity: 이미지 투명도. 0~1 까지의 실수를 입력 - opacity: Image transparency. Enter a real number from 0 to 1

- left position: Animation이 위치할 우측 위치 - left position: the position to the right of the animation

- top position: Animation이 위치할 상단 위치 - top position: the top position where the animation will be located

애니메이션 종류 선택 단계(S12)는 회전 애니메이션, 이동 애니메이션, 프레임 애니메이션, 복합 애니메이션 중 1개에 대한 사용자의 선택을 애니메이션의 종류 선택 사용자 인터페이스를 통해 입력받으며, 애니메이션의 종류 선택 사용자 인터페이스는 도 3b에서와 같이 각각의 애니메이션의 종류에 따라 해당하는 레이어를 표기하는 방식으로 구현되며, 각 레이어 별로 입력받을 CSS3 애니메이션 요소들이 구분되어 사용자에 의하여 선택된 애니메이션 종류에 따른 요소의 값 또는 선택을 입력받는다. 레이어는 총 하기와 같이 총 3개로 구분될 수 있다. In the animation type selection step (S12), the selection of the user for one of the rotation animation, the moving animation, the frame animation, and the composite animation is inputted through the type selection user interface of the animation. Similarly, the corresponding layer is displayed according to the type of each animation, and the CSS3 animation elements to be input for each layer are classified and input values or selections of elements according to the animation type selected by the user. The layers can be divided into three as follows.

- ani_abpos_span : 애니메이션의 절대 위치의 요소를 입력받는 layer. - ani_abpos_span: The layer that receives the element at the absolute position of the animation.

- ani_frame_span : 프레임 애니메이션의 요소를 입력받는 layer. - ani_frame_span: The layer that receives the elements of the frame animation.

- ani_alternate_span : 되돌리기 Animation의 요소를 입력받는 layer. - ani_alternate_span: The layer that receives the elements of animation animation.

- ani_common_span : Animation의 크기, 반복횟수, 실행시간 등의 공통 요소들을 입력받는 layer - ani_common_span: The layer that receives common elements such as animation size, repetition frequency, execution time, etc.

선택된 애니메이션에 사용되는 이미지, 애니메이션의 크기, 반복횟수, 실행시간의 요소는 공통요소로서 입력된다. 애니메이션의 종류를 입력받아 각 종류별로 서로 다른 형태의 레이어를 만들어 주는 것은 하기 표 1과 같은 프로그램 소스코드에 의하여 구현될 수 있다.The elements used in the selected animation, the size of the animation, the number of repetitions, and the execution time are input as common elements. The types of animation are inputted and different types of layers are formed for each type, can be implemented by the program source code as shown in Table 1 below.

동작 리스트 생성단계(S13)에서는 애니메이션의 시작과 종료 동작을 생성하며, 애니메이션의 중간의 중요한 포인트를 기점으로 하는 동작 리스트를 생성한다. 도 3b와 같이 동작 리스트 생성 사용자 인터페이스를 통해 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 동작 리스트를 생성하여 디스플레이한다. In the operation list creation step S13, animation start and end operations are generated, and an operation list is created starting from an important point in the middle of the animation. As shown in FIG. 3B, an action list is generated and displayed by receiving a CSS3 animation element necessary for one or more operation changes of an animation of a selected type through an operation list creation user interface.

동작 리스트의 각 항목들은 애니메이션의 종류에 따라 각각 다르게 구성되며 상이한 요소가 입력되며, 도 3b 좌측의 경우 복합 애니메이션에 관한 것으로 위치변형, 크기변형, 회전처리, 투명처리, 애니시간 등에 필요한 요소가 입력된다. 회전 애니메이션의 경우 “회전각도” 항목이 존재하고, 이동 애니메이션의 경우 “이동 위치”가 존재하며, 프레임 애니메이션의 경우 “프레임 수”라는 항목이 표시되어 요구되는 요소를 입력받는다.Each item of the motion list is configured differently according to the kind of animation and different elements are input. In the left side of FIG. 3B, regarding the composite animation, elements necessary for position transformation, size transformation, rotation processing, transparency processing, do. In the case of the rotating animation, there is the item of "rotation angle", in the case of the moving animation there is the "moving position", and in the case of the frame animation, the item "number of frames" is displayed to receive the required element.

각각 동작은 애니메에션(Animation)의 지속시간의 100분율을 기반으로 구별된다. 즉, 애니메이션의 최초의 동작은 0% 동작으로, 애니메이션의 최종 동작은 100% 동작으로 정의되어 입력된다. 기타 주요한 동작들은 해당 %의 동작으로 정의 된다. 이와 같이 입력된 동작 변화에 필요한 CSS3 애니메이션 요소는 상술한 CSS3 애니메이션 요소와 함께 사용되어 동작 리스트를 생성하며, 하기 표 2와 같은 소스코드를 통해 구현될 수 있다. Each motion is distinguished based on 100 percent of the duration of the animation. That is, the first operation of animation is defined as 0% operation, and the final operation of animation is defined as 100% operation. Other major operations are defined by their% behavior. The CSS3 animation element necessary for the input operation change as described above is used together with the CSS3 animation element to generate an operation list, and can be implemented through the source code as shown in Table 2 below.

// 애니메이션 동작 리스트 생성
$("#ani_action_list").empty();
aniActionCount = e.getAttribute('sa_ActionList_cnt').replace(/[^0-9\.]+/g, '');
for( idx = 1; idx <= aniActionCount; idx++ ) {
var left = e.getAttribute('sa_Act'+idx+'_left').replace(/[^0-9\.]+/g, '');
var top = e.getAttribute('sa_Act'+idx+'_top').replace(/[^0-9\.]+/g, '');
var width = e.getAttribute('sa_Act'+idx+'_bkpos').split(' ')[0].replace(/[^0-9\.]+/g, '');
var height = e.getAttribute('sa_Act'+idx+'_bkpos').split(' ')[1].replace(/[^0-9\.]+/g, '');
var degree = e.getAttribute('sa_Act'+idx+'_rotate').replace(/[^0-9\.]+/g, '');
var opacity = e.getAttribute('sa_Act'+idx+'_opacity').replace(/[^0-9\.]+/g, '');
var time = e.getAttribute('sa_Act'+idx+'_time').replace(/[^0-9\.]+/g, '');

var contentStr = "<div id='action_"+idx+"' class='blockline'>"
if ( dragPosChangeFlg == true ) { // drag로 위치자동 수정.
if ( editAniActionIdx == idx ) {
left = document.getElementById('ani_left').value;
top = document.getElementById('ani_top').value;
}
}

… 중략 …

contentStr = contentStr + "<b>시간</b>"+time+"%";
contentStr = contentStr + "</div>";
contentStr = contentStr + "</div>";
$("#ani_action_list").append(contentStr);
}// Create animation action list
$ ("# ani_action_list"). empty ();
aniActionCount = e.getAttribute ('sa_ActionList_cnt'). replace (/ [^ 0-9 \.] + / g, '');
for (idx = 1; idx < = aniActionCount; idx ++) {
var left = e.getAttribute ('sa_Act' + idx + '_ left'). replace (/ [^ 0-9 \.] + / g, '');
var top = e.getAttribute ('sa_Act' + idx + '_ top'). replace (/ [^ 0-9 \.] + / g, '');
var width = e.getAttribute ('sa_Act' + idx + '_ bkpos'). split ('') [0] .replace (/ [^ 0-9 \.] + / g, '');
var height = e.getAttribute ('sa_Act' + idx + '_ bkpos'). split ('') [1] .replace (/ [^ 0-9 \.] + / g, '');
var degree = e.getAttribute ('sa_Act' + idx + '_ rotate'). replace (/ [^ 0-9 \.] + / g, '');
var opacity = e.getAttribute ('sa_Act' + idx + 'opacity'). replace (/ [^ 0-9 \.] + / g, '');
var time = e.getAttribute ('sa_Act' + idx + '_ time'). replace (/ [^ 0-9 \.] + / g, '');

id = "action id" + idx + "'class =' blockline '>"
if (dragPosChangeFlg == true) {// Auto fix position with drag.
if (editAniActionIdx == idx) {
left = document.getElementById ('ani_left'). value;
top = document.getElementById ('ani_top'). value;
}
}

... Skip ...

contentStr = contentStr + "<b> time </ b>" + time + "%";
contentStr = contentStr + "</ div>";
contentStr = contentStr + "</ div>";
$ ("# ani_action_list"). append (contentStr);
}

참고로 위 소스코드에 있어서, degree, opacity, time 변수값이 동작 리스트 생성단계(S13)에서 입력된 동작 변화에 필요한 CSS3 애니메이션 요소이다.For reference, in the above source code, the degree, opacity, and time variable values are the CSS3 animation elements necessary for the operation change input in the operation list generation step (S13).

도 4는 본 발명의 일 실시예의 HTML5 커스텀 어트리뷰트 변환단계의 흐름도이다. 도 4를 참조하면, HTML5 커스텀 어트리뷰트 변환단계(S20)는 상기 입력된 CSS3 애니메이션 요소의 값을 상기 변수에 설정하는 변수 설정단계(S21), 상기 설정된 변수에 각각에 대응하는 HTML5 커스텀 어트리뷰트를 정의하여, 설정된 변수값을 상기 정의된 HTML5 커스텀 어트리뷰트의 밸류값으로 저장하여 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하는 HTML5 커스텀 어트리뷰트 변환단계(S22), 및 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하고 DIV 태그를 입력받아 HTML 파일로 저장하는 HTML5 파일 생성단계(S23)의 일련의 과정을 포함하여 수행하여, 상기 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하여 저장하고 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하여 HTML5 문서 파일을 생성하여 저장한다.4 is a flowchart of the HTML5 custom attribute conversion step of an embodiment of the present invention. Referring to FIG. 4, the HTML5 custom attribute conversion step S20 includes a variable setting step S21 of setting a value of the input CSS3 animation element to the variable, an HTML5 custom attribute corresponding to each of the set variables, An HTML5 custom attribute transformation step (S22) of transforming the input CSS3 animation element into an HTML5 custom attribute by storing the set variable value as a value of the defined HTML5 custom attribute, and transforming the CSS3 animation element converted into the HTML5 custom attribute into HTML And a HTML5 file generation step (S23) of inputting the DIV tag and storing the DIV tag as an HTML file, converting the input CSS3 animation element into an HTML5 custom attribute, storing the HTML5 custom attribute, and storing the HTML5 custom attribute Enter the converted CSS3 animation element into the HTML tag to create an HTML5 document Create and save the file.

변수 설정단계(S21)는 상기 입력된 CSS3 애니메이션 요소의 값을 상기 변수에 설정하고, HTML5 커스텀 어트리뷰트 변환단계(S22)는 상기 설정된 변수에 각각에 대응하는 HTML5 커스텀 어트리뷰트를 정의하여, 설정된 변수값을 상기 정의된 HTML5 커스텀 어트리뷰트의 밸류값으로 저장하여 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환한다. 여기서 각 애니메이션에는 고유의 ID 부여되어 관리되며, 입력된 애니메이션의 요소의 값을 변수에 저장하는 것은 하기 표 3과 같은 소스코드로 구현될 수 있다.The variable setting step S21 sets the value of the input CSS3 animation element to the variable, the HTML5 custom attribute conversion step S22 defines an HTML5 custom attribute corresponding to each of the set variables, And stores the value as the value of the HTML5 custom attribute defined above, and converts the inputted CSS3 animation element into HTML5 custom attribute. Herein, each animation is given a unique ID and managed, and storing the value of the element of the input animation in a variable can be implemented by the source code as shown in Table 3 below.

// 애니메이션 요소 저장
var cnt = Number($("#ani_action_list").children().length); // 액션리스트 갯수
var id = "sptani" + new Date().getTime(); // 애니메이션 ID
var left = document.getElementById('ani_left').value.replace(/[^0-9\.]+/g, '');//좌측pos
var top = document.getElementById('ani_top').value.replace(/[^0-9\.]+/g, '');// 상단pos
var width = document.getElementById('ani_width').value.replace(/[^0-9\.]+/g, '');// 넓이
var height = document.getElementById('ani_height').value.replace(/[^0-9\.]+/g,'');//높이
var count = document.getElementById('ani_count').value.replace(/[^0-9\.]+/g, '');// 애니 횟수
if( $("#ani_repeat").is(":checked") ) {
count = "infinite";
}
var duration = document.getElementById('ani_duration').value.replace(/[^0-9\.]+/g, ''); // 애니 지속시간
var delay = document.getElementById('ani_delay').value.replace(/[^0-9\.]+/g, '');//최조 지연시간
var frame = document.getElementById('ani_frame').value.replace(/[^0-9\.]+/g,'');//frame 수
var anikind = document.getElementById('ani_kind').value.replace(/[^0-9\.]+/g, ''); //애니 종류
…중략…
// 절대값 체크
if( e.getAttribute('sa_absolute') == 'true' ) {
document.getElementById('ani_absolute').checked = true;
document.getElementById("ani_pos_span").style.display = "block";
} else {
document.getElementById('ani_absolute').checked = false;
//document.getElementById("ani_pos_span").style.display = "none";
}
// 무한반복 체크
editAniID = e.getAttribute('ID');
editAniSaveID = editAniID;
if( e.getAttribute('sa_count') == 'infinite' ) {
document.getElementById('ani_repeat').checked = true;
document.getElementById('ani_count').value = '';
} else {
document.getElementById('ani_repeat').checked = false;
document.getElementById('ani_count').value = e.getAttribute('sa_count');
}
// 이미지 정보
aniImageUrl = e.getAttribute('sa_aniImg');
document.getElementById('ani_duration').value = e.getAttribute('sa_duration').replace(/[^0-9\.]+/g, '');
document.getElementById('ani_delay').value = e.getAttribute('sa_delay').replace(/[^0-9\.]+/g, '');
document.getElementById('ani_frame').value = e.getAttribute('sa_frame').replace(/[^0-9\.]+/g, '');
if( e.getAttribute('sa_alternate') == 'true' ) {
document.getElementById('ani_alternate').checked = true;
document.getElementById("ani_alternate_span").style.display = "block";
} else {
document.getElementById('ani_alternate').checked = false;
//document.getElementById("ani_alternate_span").style.display = "none";
}// Save the animation element
var cnt = Number ($ ("# ani_action_list"). children (). length); // number of action list
var id = "sptani" + new Date (). getTime (); // Animation ID
// left pos = document.getElementById ('ani_left'). value.replace (/ [^ 0-9 \.] + / g,
var top = document.getElementById ('ani_top'). value.replace (/ [^ 0-9 \.] + / g,
var width = document.getElementById ('ani_width'). value.replace (/ [^ 0-9 \.] + / g,
var height = document.getElementById ('ani_height'). value.replace (/ [^ 0-9 \.] + / g,
var count = document.getElementById ('ani_count'). value.replace (/ [^ 0-9 \.] + / g,
if ($ ("# ani_repeat"). is (": checked")) {
count = "infinite";
}
var duration = document.getElementById ('ani_duration'). value.replace (/ [^ 0-9 \.] + / g, ''); // Annie duration
var delay = document.getElementById ('ani_delay'). value.replace (/ [^ 0-9 \.] + / g,
var frame = document.getElementById ('ani_frame'). value.replace (/ [^ 0-9 \.] + / g,
var anikind = document.getElementById ('ani_kind'). value.replace (/ [^ 0-9 \.] + / g, ''); // Annie Kind
... syncopation…
// absolute value check
if (e.getAttribute ('sa_absolute') == 'true') {
document.getElementById ('ani_absolute'). checked = true;
document.getElementById ("ani_pos_span"). style.display = "block";
} else {
document.getElementById ('ani_absolute'). checked = false;
//document.getElementById("ani_pos_span").style.display = "none";
}
// infinite repeat check
editAniID = e.getAttribute ('ID');
editAniSaveID = editAniID;
if (e.getAttribute ('sa_count') == 'infinite') {
document.getElementById ('ani_repeat'). checked = true;
document.getElementById ('ani_count'). value = '';
} else {
document.getElementById ('ani_repeat'). checked = false;
document.getElementById ('ani_count'). value = e.getAttribute ('sa_count');
}
// Image information
aniImageUrl = e.getAttribute ('sa_aniImg');
document.getElementById ('ani_duration'). value = e.getAttribute ('sa_duration'). replace (/ [^ 0-9 \.] + / g, '');
document.getElementById ('ani_delay'). value = e.getAttribute ('sa_delay'). replace (/ [^ 0-9 \.] + / g, '');
document.getElementById ('ani_frame'). value = e.getAttribute ('sa_frame'). replace (/ [^ 0-9 \.] + / g, '');
if (e.getAttribute ('sa_alternate') == 'true') {
document.getElementById ('ani_alternate'). checked = true;
document.getElementById ("ani_alternate_span"). style.display = "block";
} else {
document.getElementById ('ani_alternate'). checked = false;
//document.getElementById("ani_alternate_span").style.display = "none";
}

HTML5 파일 생성단계(S23)에서는 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력한다, In the HTML5 file creation step (S23), the CSS3 animation element converted into the HTML5 custom attribute is input to the HTML tag,

구체적으로는, 먼저 각각의 요소들은 “sa_” 접두사가 붙은 custom attribute로 변환한다. 예컨대, aniID 는 sa_aniID로 변환. aniImg는 sa_aniImg로 변환. aniID는 sa_aniID로 변환, aniImg는 sa_aniImg로 변환, duration은 sa_duration으로 변환, count는 sa_count로 변환, frame은 sa_frame으로 변환, delay는 sa_delay로 변환, alternate는 sa_alternate로 변환, time은 sa_Act_time으로 변환, rotate는 sa_Act_rotate로 변환, opacity는 sa_Act_opacity로 변환, left는 sa_Act_left로 변환, bkpos는 sa_Act_bkpos로 변환한다. Specifically, each element is first converted to a custom attribute with the prefix "sa_". For example, aniID is converted to sa_aniID. aniImg converted to sa_aniImg. aniIm translates to sa_aniID, aniImg translates to sa_aniImg, duration translates to sa_duration, count translates to sa_count, frame translates to sa_frame, delay translates to sa_delay, alternate translates to sa_alternate, time translates to sa_Act_time, rotate convert to sa_Act_rotate, opacity to sa_Act_opacity, left to sa_Act_left, and bkpos to sa_Act_bkpos.

또한, 모든 커스텀 어트리뷰트는 예컨대 id="sptani1419276091913" sa_left="46px" sa_top="684px" sa_width="87px" sa_height="85px" sa_absolute="true" sa_ani_kind="4" sa_aniexist="true" sa_aniid="sptani1419276091913" sa_aniimg="../images/bookimg_16.png" sa_duration="1s" sa_count="10" sa_frame="0" sa_delay="0s" sa_alternate="true" sa_fillmode="" sa_actionlist_cnt="3" sa_act1_time="0" sa_act1_rotate="0" sa_act1_opacity="1.0" sa_act1_left="46" sa_act1_top="684" sa_act1_bkpos="0px, 0px" sa_act2_time="50" sa_act2_rotate="360" sa_act2_opacity="1.0" sa_act2_left="300" sa_act2_top="395" sa_act2_bkpos="0px, 0px" sa_act3_bkpos="0px, 0px" sa_act3_top="684" sa_act3_left="500" sa_act3_opacity="1.0" sa_act3_rotate="360" sa_act3_time="100”와 같이 KEY=“VALUE”의 형태로 HTML의 TAG에 기입한다.In addition, all custom attributes may be set to "id =" sptani1419276091913 "sa_left =" 46px "sa_top =" 684px "sa_width =" 87px "sa_height =" 85px "sa_absolute =" true "sa_ani_kind = " sa_actionlist_cnt = "3" sa_act1_time = " sa_data = " sa_data = " sa_data = " "0" sa_act1_rotate = "0" sa_act1_opacity = "1.0" sa_act1_left = "46" sa_act1_top = "684" sa_act1_bkpos = "0px, 0px" sa_act2_time = "50" sa_act2_rotate = "360" sa_act2_opacity = sa_act2_top = "395" sa_act2_bkpos = "0px, 0px" sa_act3_bkpos = "0px, 0px" sa_act3_top = "684" sa_act3_left = "500" sa_act3_opacity = "1.0" sa_act3_rotate = "360" sa_act3_time = "In the HTML TAG.

이어 div tag가 입력되어 예컨대 <div class="SptStyleAni" id="sptani1419276091913" sa_left="46px" sa_top="684px" sa_width="87px" sa_height="85px" sa_absolute="true" sa_ani_kind="4" sa_aniexist="true" sa_aniid="sptani1419276091913" sa_aniimg="../images/bookimg_16.png" sa_duration="1s" sa_count="10" sa_frame="0" sa_delay="0s" sa_alternate="true" sa_fillmode="" sa_actionlist_cnt="3" sa_act1_time="0" sa_act1_rotate="0" sa_act1_opacity="1.0" sa_act1_left="46" sa_act1_top="684" sa_act1_bkpos="0px, 0px" sa_act2_time="50" sa_act2_rotate="360" sa_act2_opacity="1.0" sa_act2_left="300" sa_act2_top="395" sa_act2_bkpos="0px, 0px" sa_act3_bkpos="0px, 0px" sa_act3_top="684" sa_act3_left="500" sa_act3_opacity="1.0" sa_act3_rotate="360" sa_act3_time="100"></div>와 같은 형태로 덧붙여지며, div tag의 입력에는 위그지그 애디터(WYSIWYG Edito) 등 다양한 애디터가 사용될 수 있다. Then div tag is inputted and the div tag is inputted, for example, for example, <div class = "SptStyleAni" id = "sptani1419276091913" sa_left = "46px" sa_top = "684px" sa_width = "87px" sa_height = "85px" sa_absolute = "true" sa_ani_kind = sa_id = "true" sa_aniid = "sptani1419276091913" sa_aniimg = "../images/bookimg_16.png" sa_duration = "1s" sa_count = "10" sa_frame = "0" sa_delay = "0s" sa_alternate = "true" sa_fillmode = sa_act2_rotate = " 360 "sa_act2_opacity =" 0 ", sa_act2_rotate = "0" sa_act1_rotate = "0" sa_act1_opacity = "1.0" sa_act1_left = "46" sa_act1_top = "684" sa_act1_bkpos = "0px, 0px" sa_act2_time = Sa_act3_top = "500" sa_act3_opacity = "1.0" sa_act3_rotate = "360" sa_act3_time = "100" sa_act2_left = "300" sa_act2_top = "395" sa_act2_bkpos = "0px, 0px" sa_act3_bkpos = "0px, 0px" sa_act3_top = "> </ div>, and various adjectives such as WYSIWYG Edito can be used to input the div tag.

div tag안에 커스텀 어트리뷰트가 기입되며, 특정 루틴의 소스코드로 구현될 수 있으며, div tag가 기입된 HTML5 파일로서 저장된다. sa_ 접두사가 붙은 커스텀 어트리뷰트들을 div tag에 기입하는 것은 하기 표 4와 같은 소스코드로 구현될 수 있다.The custom attributes are written in the div tag, can be implemented in the source code of the specific routine, and saved as an HTML5 file in which the div tag is written. Writing custom attributes with the sa_ prefix to the div tag can be implemented in source code as shown in Table 4 below.

// div tag안에 custom attribute 기입
var contentStr = "<div id='"+id+"' class='SptStyleAni'";
contentStr = contentStr + "sa_left='"+left+"px' sa_top='"+top+"px' sa_width='"+width+"px' sa_height='"+height+"px' ";
contentStr = contentStr + "sa_absolute='"+String($("#ani_absolute").is(":checked"))+"' sa_ani_kind='"+anikind+"' ";
contentStr = contentStr + "sa_aniexist='true' sa_aniid='"+id+"' sa_aniimg='"+aniImageUrl+"' sa_duration='"+duration+"s' ";
contentStr = contentStr + "sa_count='"+count+"' sa_frame='"+frame+"' sa_delay='"+delay+"s' sa_alternate='"+String($("#ani_alternate").is(":checked"))+"' ";
contentStr = contentStr + "sa_fillmode='' sa_actionlist_cnt='"+String(cnt)+"' ";
for( n = 1; n <= cnt; n++ ) {
var actLeft = $("#action_info_"+n).attr('action_left_'+n).replace(/[^0-9\.]+/g, '');
var actTop = $("#action_info_"+n).attr('action_top_'+n).replace(/[^0-9\.]+/g, '');
var actWidth = $("#action_info_"+n).attr('action_width_'+n).replace(/[^0-9\.]+/g, '');
var actHeight = $("#action_info_"+n).attr('action_height_'+n).replace(/[^0-9\.]+/g, '');
var actOpacity = $("#action_info_"+n).attr('action_opacity_'+n).replace(/[^0-9\.]+/g, '');
var actRotate = $("#action_info_"+n).attr('action_degree_'+n).replace(/[^0-9\.]+/g, '');
var actTime = $("#action_info_"+n).attr('action_time_'+n).replace(/[^0-9\.]+/g, '');
var actBkPos = "0px, 0px";
if ( n == 1 ) {
actTime = 0;
} else if ( n == cnt ) {
actTime = 100;
if ( frame > 0 ) {
actBkPos = "-"+(frame*width)+"px 0px";
}
}
contentStr = contentStr + "sa_act"+n+"_time='"+actTime+"' sa_act"+n+"_rotate='"+actRotate+"' sa_act"+n+"_opacity='"+actOpacity+"' ";
contentStr = contentStr + "sa_act"+n+"_left='"+actLeft+"' sa_act"+n+"_top='"+actTop+"' sa_act"+n+"_bkpos='"+actBkPos+"'";
//contentStr = contentStr + "sa_act"+n+"_left='"+actLeft+"' sa_act"+n+"_top='"+actTop+"' sa_act"+n+"_bkpos='"+actWidth+"px "+actHeight+"px'";
}
contentStr = contentStr + "></div>";// Write custom attribute in div tag
var contentStr = "<div id = '" + id + "' class = 'SptStyleAni'";
contentStr = contentStr + "sa_left =""+ left +" px "sa_top =""+ top +" px "sa_width =""+ width +" px "sa_height =""+ height +" px '";
contentStr = contentStr + "sa_absolute =""+ String ($ ("# ani_absolute "). is (": checked ")) +"'sa_ani_kind='"+ anikind +"'";
contentStr = contentStr + "sa_aniexist = 'true' sa_aniid = '" + id + "sa_aniimg =""+ aniImageUrl +" sa_duration = "" + duration + "s'";
(": checked") contentStr = contentStr + "sa_count =""+ count +" sa_frame = "" + frame + "sa_delay =""+ delay +"s' sa_alternate = ")) +"'";
contentStr = contentStr + "sa_fillmode =" sa_actionlist_cnt = "" + String (cnt) + "'";
for (n = 1; n < = cnt; n ++) {
var actLeft = $ ("# action_info _" + n) .attr ('action_left _' + n) .replace (/ [^ 0-9 \.] + / g, '');
var actTop = $ ("# action_info _" + n) .attr ('action_top _' + n) .replace (/ [^ 0-9 \.] + / g, '');
var actWidth = $ ("# action_info _" + n) .attr ('action_width _' + n) .replace (/ [^ 0-9 \.] + / g, '');
var actHeight = $ ("# action_info _" + n) .attr ('action_height _' + n) .replace (/ [^ 0-9 \.] + / g, '');
var actOpacity = $ ("# action_info _" + n) .attr ('action_opacity _' + n) .replace (/ [^ 0-9 \.] + / g, '');
var actRotate = $ ("# action_info _" + n) .attr ('action_degree _' + n) .replace (/ [^ 0-9 \.] + / g, '');
var actTime = $ ("# action_info _" + n) .attr ('action_time _' + n) .replace (/ [^ 0-9 \.] + / g, '');
var actBkPos = "0px, 0px";
if (n == 1) {
actTime = 0;
} else if (n == cnt) {
actTime = 100;
if (frame> 0) {
actBkPos = "-" + (frame * width) + "px 0px";
}
}
contentStr = contentStr + "sa_act" + n + "_ time =" + actTime + "sa_act" + n + "_ rotate =" + actRotate + "sa_act" + n + "_ opacity =" + actOpacity + "'";
contentStr = contentStr + "sa_act" + n + "_ left =" + actLeft + "sa_act" + n + "_ top =" + actTop + "sa_act" + n + "_ bkpos =""+ actBkPos +"'";
+ act + + + + + + + + + + + actHeight + + + + + + + + + + + + + + + sa_act + px ''';
}
contentStr = contentStr + "></div>";

이어 수행되는 전자책 파일 생성단계(S30)는 저장된 HTML5 파일을 타이틀 파일(title file), 이북 리스트 파일(list file) 등과 같이 구분하여 EPUB3 규약에 맞는 이펍 파일을 생성하며, 이펍 파일을 생성시 HTML 파일내 기입된 상기 태그를 분석하는 자바스크립트 파일(javascript file)을 압축등의 방식으로 동봉한다. 이에 따라 다음과 같은 소스파일에 의하여 HTML5 파일의 생성시 타이틀 파일(title file), 이북 리스트 파일(list file)과 함께 애니메이션 관련 파일(animation contents file), 스타일 시트 파일,자바스크립트 파일(javascript file) 및 이를 로드하기 위한 파일 등이 포함된 전자책 파일이 생성된다. 다음과 같은 소스파일에서와 같이 필요한 폴더 생성 및 조회, cover image 파일복사처리, ePub안의 이미지 파일 복사, content.opf 파일생성, toc.xhtml 파일생성, toc.ncx 파일생성, book_list.xhtml 파일생성, ePub안의 contents 파일생성, ePub3 파일 생성등의 루틴을 포함하여 구현된다. 이는 하기 표 5 및 이와 연속된 표 6과 같은 소스코드로 구현될 수 있다.The electronic book file creation step S30, which is performed subsequently, divides the stored HTML5 file into a title file, a list file, and the like to generate a pub file conforming to the EPUB3 protocol. When generating the pub file, A javascript file for analyzing the tag written in the file is enclosed in a manner such as compression. Accordingly, when an HTML5 file is generated by the following source file, an animation contents file, a style sheet file, a javascript file, a title file, a book list file, And a file for loading the electronic book file are generated. You can create and view required folders as in the following source files, cover image file copy, copy image files in ePub, create content.opf file, generate toc.xhtml file, create toc.ncx file, create book_list.xhtml file, It is implemented by including routines such as creation of contents file in ePub and creation of ePub3 file. This can be implemented in the source code as shown in Table 5 and Table 6 below.

// 필요한 폴더 생성 및 조회
nImgFolder = bookFile.getUserSysFolder(tUserID, tBookIDX );
nSaveFolder = bookFile.makeBookPubSysFolder(tBookIDX);

// cover image 파일복사처리
nOrgFile = GlobalDefine.UPLOADFOLDER_BOOK + "/book_"+tBookIDX+"/"+nCoverImg;
nSaveFile = nSaveFolder + "/OEBPS/images/"+nCoverImg;
if ( ComFileUtil.FileExit(nOrgFile) && nCoverImg.length() > 3 )
ComFileUtil.FileCopyByChannel( nOrgFile , nSaveFile );

// ePub안의 이미지 파일 복사
nChptStr += this.copyEpubImgFile ( tSampleChapterNum, nChapterVector, nSaveFolder );

// content.opf 파일생성
nSaveFile = nSaveFolder + "/OEBPS/content.opf";
nSaveContents = ComFileUtil.ReadFileAddLF(nSaveFile,GlobalDefine.CharacterSystemEncoding);
for (i=0; i<nTempArr.length; i++)
nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$"+nTempArr[i]+"$$", ComDataCtrl.getStringFromHash(nBookHash,nTempArr[i],"") );

nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$CONT_MANIFEST$$", nChptStr );
nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$CONT_SPINE$$", nSpintStr );
ComFileUtil.WriteFile(nSaveFile,nSaveContents,GlobalDefine.CharacterSystemEncoding);

// toc.xhtml 파일생성
nSaveFile = nSaveFolder + "/OEBPS/toc.xhtml";
nSaveContents = ComFileUtil.ReadFileAddLF(nSaveFile,GlobalDefine.CharacterSystemEncoding);
for (i=0; i<nTempArr.length; i++)
nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$"+nTempArr[i]+"$$", ComDataCtrl.getStringFromHash(nBookHash,nTempArr[i],"") );

nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$CONT_NAVMAP$$", nContNaviMap );
ComFileUtil.WriteFile(nSaveFile,nSaveContents,GlobalDefine.CharacterSystemEncoding);

중략...
// toc.ncx 파일생성
nSaveFile = nSaveFolder + "/OEBPS/toc.ncx";
nSaveContents = ComFileUtil.ReadFileAddLF(nSaveFile,GlobalDefine.CharacterSystemEncoding);
for (i=0; i<nTempArr.length; i++)
nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$"+nTempArr[i]+"$$", ComDataCtrl.getStringFromHash(nBookHash,nTempArr[i],"") );

nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$NCS_NAVMAP$$", nNcxNaviMap );
ComFileUtil.WriteFile(nSaveFile,nSaveContents,GlobalDefine.CharacterSystemEncoding);
// Create and view required folders
nImgFolder = bookFile.getUserSysFolder (tUserID, tBookIDX);
nSaveFolder = bookFile.makeBookPubSysFolder (tBookIDX);

// cover image file copy processing
nOrgFile = GlobalDefine.UPLOADFOLDER_BOOK + "/ book _" + tBookIDX + "/" + nCoverImg;
nSaveFile = nSaveFolder + "/ OEBPS / images /" + nCoverImg;
if (ComFileUtil.FileExit (nOrgFile) && nCoverImg.length ()> 3)
ComFileUtil.FileCopyByChannel (nOrgFile, nSaveFile);

// Copy the image file in ePub
nChptStr + = this.copyEpubImgFile (tSampleChapterNum, nChapterVector, nSaveFolder);

// Create content.opf file
nSaveFile = nSaveFolder + "/ OEBPS/content.opf";
nSaveContents = ComFileUtil.ReadFileAddLF (nSaveFile, GlobalDefine.CharacterSystemEncoding);
for (i = 0; i <nTempArr.length; i ++)
nSaveContents = ComDataCtrl.replaceStr (nSaveContents, "$$" + nTempArr [i] + "$$", ComDataCtrl.getStringFromHash (nBookHash, nTempArr [i], ""));

nSaveContents = ComDataCtrl.replaceStr (nSaveContents, "$$ CONT_MANIFEST $$", nChptStr);
nSaveContents = ComDataCtrl.replaceStr (nSaveContents, "$$ CONT_SPINE $$", nSpintStr);
ComFileUtil.WriteFile (nSaveFile, nSaveContents, GlobalDefine.CharacterSystemEncoding);

// Create the toc.xhtml file
nSaveFile = nSaveFolder + "/OEBPS/toc.xhtml";
nSaveContents = ComFileUtil.ReadFileAddLF (nSaveFile, GlobalDefine.CharacterSystemEncoding);
for (i = 0; i <nTempArr.length; i ++)
nSaveContents = ComDataCtrl.replaceStr (nSaveContents, "$$" + nTempArr [i] + "$$", ComDataCtrl.getStringFromHash (nBookHash, nTempArr [i], ""));

nSaveContents = ComDataCtrl.replaceStr (nSaveContents, "$$ CONT_NAVMAP $$", nContNaviMap);
ComFileUtil.WriteFile (nSaveFile, nSaveContents, GlobalDefine.CharacterSystemEncoding);

syncopation...
// Create toc.ncx file
nSaveFile = nSaveFolder + "/ OEBPS / tooc.ncx";
nSaveContents = ComFileUtil.ReadFileAddLF (nSaveFile, GlobalDefine.CharacterSystemEncoding);
for (i = 0; i <nTempArr.length; i ++)
nSaveContents = ComDataCtrl.replaceStr (nSaveContents, "$$" + nTempArr [i] + "$$", ComDataCtrl.getStringFromHash (nBookHash, nTempArr [i], ""));

nSaveContents = ComDataCtrl.replaceStr (nSaveContents, "$$ NCS_NAVMAP $$", nNcxNaviMap);
ComFileUtil.WriteFile (nSaveFile, nSaveContents, GlobalDefine.CharacterSystemEncoding);

..중략...

// book_list.xhtml 파일생성
nSaveFile = nSaveFolder + "/OEBPS/text/book_list.xhtml";
nSaveContents = ComFileUtil.ReadFileAddLF(nSaveFile,GlobalDefine.CharacterSystemEncoding);
for (i=0; i<nTempArr.length; i++)
nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$"+nTempArr[i]+"$$", ComDataCtrl.getStringFromHash(nBookHash,nTempArr[i],"") );

nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$BOOK_LIST$$", nBookListStr );
ComFileUtil.WriteFile(nSaveFile,nSaveContents,GlobalDefine.CharacterSystemEncoding);
// ePub안의 contents 파일생성
this.copyEpubContentsFile ( tSampleChapterNum, nChapterVector, nSaveFolder, nTempArr, nBookHash );
//writeLog.addErrLog( "BookWrite check 010 ");

// ePub3 파일 생성
String nTmpFileName = "";
if ( tSampleChapterNum > 0 ) // sample mode
nTmpFileName = "sample_book_"+tBookIDX+".epub";
else
nTmpFileName = tUserID+"_book_"+tBookIDX+".epub";

if ( tPublishMode == GlobalDefine.PUBLISHING_TEST ) // test publishing mode
nSaveFile = GlobalDefine.UPLOADFOLDER_TMP + "/" + nTmpFileName;
else if ( tPublishMode == GlobalDefine.PUBLISHING_USER ) // user publishing mode
nSaveFile = GlobalDefine.BOOK_PUBLISH_USER + "/" + nTmpFileName;
else if ( tPublishMode == GlobalDefine.PUBLISHING_ADMIN ) // admin publishing mode
nSaveFile = GlobalDefine.BOOK_PUBLISH_ADMIN + "/" + nTmpFileName;

ComZipUtils.zip(nSaveFolder, nSaveFile);

..syncopation...

// Create book_list.xhtml file
nSaveFile = nSaveFolder + "/ OEBPS/text/book_list.xhtml";
nSaveContents = ComFileUtil.ReadFileAddLF (nSaveFile, GlobalDefine.CharacterSystemEncoding);
for (i = 0; i <nTempArr.length; i ++)
nSaveContents = ComDataCtrl.replaceStr (nSaveContents, "$$" + nTempArr [i] + "$$", ComDataCtrl.getStringFromHash (nBookHash, nTempArr [i], ""));

nSaveContents = ComDataCtrl.replaceStr (nSaveContents, "$$ BOOK_LIST $$", nBookListStr);
ComFileUtil.WriteFile (nSaveFile, nSaveContents, GlobalDefine.CharacterSystemEncoding);
// Create contents file in ePub
this.copyEpubContentsFile (tSampleChapterNum, nChapterVector, nSaveFolder, nTempArr, nBookHash);
//writeLog.addErrLog ("BookWrite check 010");

// Create an ePub3 file
String nTmpFileName = "";
if (tSampleChapterNum> 0) // sample mode
nTmpFileName = "sample_book_" + tBookIDX + ".epub";
else
nTmpFileName = tUserID + "_ book _" + tBookIDX + ".epub";

if (tPublishMode == GlobalDefine.PUBLISHING_TEST) // test publishing mode
nSaveFile = GlobalDefine.UPLOADFOLDER_TMP + "/" + nTmpFileName;
else if (tPublishMode == GlobalDefine.PUBLISHING_USER) // user publishing mode
nSaveFile = GlobalDefine.BOOK_PUBLISH_USER + "/" + nTmpFileName;
else if (tPublishMode == GlobalDefine.PUBLISHING_ADMIN) // admin publishing mode
nSaveFile = GlobalDefine.BOOK_PUBLISH_ADMIN + "/" + nTmpFileName;

ComZipUtils.zip (nSaveFolder, nSaveFile);

도 5는 본 발명의 일 실시예의 EPUB3 애니메이션 실행단계의 흐름도이다. 도 5를 참조하면, 상기 EPUB3 애니메이션 실행단계(40)는, 상기 전자책 파일을 로딩하여 HTML 태그를 분석할 자바스크립트 파일(javascript file)의 메소드(method)를 호출하는 전자책 파일 로딩단계(S41), HTML5 커스텀 어트리뷰트를 분석하여 CSS3애니메이션 요소로 변환하고 JSon 형태로 패킹(packing)하는 HTML5 커스텀 어트리뷰트를 분석단계(S42), 패킹된 JSon을 기반으로 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 추출된 속성들을 CSS3의 문법에 맞게 문자열로 조합하여 바디(body)의 스타일 시트로 등록하는 CSS3 애니메이션 속성추출단계(S43) 및 CSS3 애니메이션의 동작 리스트를 추출하여 동작 단위로 키프레임(KeyFrame)에 등록하며 등록되는 동작들을 CSS3의 문법에 맞게 문자열로 조합하여 스타일 요소로 등록하는 키프레임등록단계(S44)를 포함하여 스타일 시트로 등록된 CSS3 애니메이션 요소의 CSS3 속성과 동작에 따라 이펍파일의 로딩완료시 EPUB3 애니메이션이 자동 실행되도록 수행되어, 전자책 파일에 포함된 HTML5 커스텀 어트리뷰트를 분석하여 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 이를 기초로 EPUB3 애니메이션을 실행한다, 5 is a flowchart of an EPUB3 animation execution step according to an embodiment of the present invention. Referring to FIG. 5, the EPUB3 animation execution step 40 includes an electronic book file loading step S41 for calling a method of a javascript file for loading the electronic book file and analyzing HTML tags ), HTML5 custom attribute is analyzed and converted into a CSS3 animation element and packed in JSon form. In step S42, a CSS3 attribute of the CSS3 animation element is extracted based on the packed JSon, A CSS3 animation attribute extracting step (S43) of registering the CSS3 animation as a style sheet of a body in combination with a string according to the grammar of the CSS3, and an operation list of the CSS3 animation extracted and registered in a key frame (KeyFrame) A key frame registration step (S44) of registering the actions as a style element by combining them into a character string in accordance with the grammar of CSS3, Based on the CSS3 property and behavior of the S3 animation element, the EPUB3 animation is automatically executed when the pub file is loaded, and the CSS3 attribute of the CSS3 animation element is extracted by analyzing the HTML5 custom attribute included in the e-book file, Run animation,

EPUB3 애니메이션 실행 단계는 이펍 뷰어(EPUB viewer)에서 수행되며, 이펍 뷰어(EPUB viewer)는 독자적인 프로그램일 수도 있으나 이에 한정되지 않고 이펍 툴(EPUB tool)의 한 기능 모듈로서 이펍 툴(EPUB tool)에 통합될 수도 있다. The EPUB3 animation stage is performed in the EPUB viewer. The EPUB viewer may be an independent program, but it is not limited to this, and may be integrated into the EPUB tool as a functional module of the EPUB tool. .

전자책 파일 로딩단계(S41)는 이펍 뷰어(EPUB viewer)에서 이펍 파일을 로딩하며, 로딩시 애니메이션 ID(aniID)를 추출하고 분석할 자바스크립트 파일의 메소드(Method)를 호출한다. 자바스크립트 메소드의 호출은 body tag에서 이루어지며, 다음의 코드로 구현될 수 있다.The electronic book file loading step S41 loads the pub file from the EPUB viewer and extracts the animation ID (aniID) upon loading and calls a method of a JavaScript file to analyze. The invocation of the JavaScript method is done in the body tag and can be implemented in the following code.

<body onload="initFunc()"><! - Call the animation analysis JavaScript method. ->
<body onload = "initFunc ()">

HTML5 커스텀 어트리뷰트를 분석단계(S42)는 HTML5 커스텀 어트리뷰트를 분석하여 CSS3애니메이션 요소로 변환하고 JSon 형태로 패킹(packing)한다. 즉, “SptStyleAni“ class의 존재를 check하여 animation이 기입되어 있는지 판단하고, 애니메이션 ID(aniID)의 개수를 체크하여 해당 개수 만큼의 애니메이션을 생성한다. 여기서, 앞서 살핀“sa_” 접두사가 붙은 각각의 커스텀 어트리뷰트에서 상기 접두사를 제거하는 방식, 즉, sa_aniID를 aniID로 변환, sa_aniImg 를 aniImg로 변환, sa_duration를 duration로 변환, sa_count를 count로 변환, sa_frame을 frame으로 변환, sa_delay를 delay로 변환, sa_alternate를 alternate로 변환, sa_Act_time을 time으로 변환, sa_Act_rotate를 rotate로 변환, sa_Act_opacity를 opacity로 변환, sa_Act_left를 left로 변환, sa_Act_bkpos를 bkpos로 변환하는 방식으로 각각의 커스텀 어트리뷰트를 CSS3 애니메이션 요소로 변환하고 Key=“Value” 형태의 커스텀 어트리뷰트를 분석하여 JSon형태로 패킹(Packing)한다.The HTML5 custom attribute analysis step S42 analyzes the HTML5 custom attributes, converts them into CSS3 animation elements, and packs them in JSon form. That is, it checks whether the animation is written by checking existence of the "SptStyleAni" class, checks the number of animation IDs (aniID), and generates animation corresponding to the number. Here, the method of removing the prefix from each custom attribute with the prefix "sa_" preceeded, that is, converting sa_aniID to aniID, sa_aniImg to aniImg, sa_duration to duration, sa_count to count, sa_frame convert sa_delay to alternate, sa_Act_time to time, sa_Act_rotate to rotate, sa_Act_opacity to opacity, sa_Act_left to left, and sa_Act_bkpos to bkpos. It converts the custom attributes into CSS3 animation elements and analyzes the custom attributes of Key = "Value" type and packs them in JSon form.

즉, key=value, key=value 형태의 커스텀 어트리뷰트를 key:value, key:value형태의 JSon형태로 변환한다. 이는 추후 JSon을 파싱(Parsing)하면 key 문자열을 그대로 변수로 사용할 수 있도록 해준다. key=value, key=value 형태의 커스텀 어트리뷰트를 복잡하고 에러 가능성이 높은 문자열 분석을 이용하기 보다, JSon의 형태로 이용하는 것이 보다 쉽고 에러의 가능성도 낮추어준다.That is, it converts a custom attribute of type key = value, key = value to JSon type of key: value, key: value type. This allows you to use the key string as a variable when parsing JSon later. It is easier to use custom attributes of the form key = value, key = value in the form of JSon, rather than using a complicated and error-prone string analysis, and reduces the possibility of errors.

다음 표 8과 같은 루틴의 프로그램 코드에 의하여 구현될 수 있다.Can be implemented by the program code of the routine shown in Table 8 below.

// 애니메이션 분석
$('.SptStyleAni').each(function() {
var jQueryStr = "";
jQueryStr += " { "; // json 시작
if( $(this).attr("sa_aniexist") != undefined && $(this).attr("sa_aniexist") != "" )
jQueryStr += " \"aniExist\":"+$(this).attr("sa_aniexist")+", "; // ani 존재 flag --> 모두 true
if( $(this).attr("sa_aniid") != undefined && $(this).attr("sa_aniid") != "" )
jQueryStr += " \"aniID\":\""+$(this).attr("sa_aniid")+"\", "; // ani를 실행할 div의 ID. 고유번호의 형태.
if( $(this).attr("sa_aniimg") != undefined && $(this).attr("sa_aniimg") != "" )
jQueryStr += " \"aniImg\":\""+$(this).attr("sa_aniimg")+"\", "; // 이미지 위치
if( $(this).attr("sa_duration") != undefined && $(this).attr("sa_duration") != "" )
jQueryStr += " \"duration\":\""+$(this).attr("sa_duration")+"\", "; // 애니 지속시간(Sec)
if( $(this).attr("sa_count") != undefined && $(this).attr("sa_count") != "" )
jQueryStr += " \"count\":\""+$(this).attr("sa_count")+"\", "; // 애니 반복 횟수 : 1,2,3,... infinite(무한반복)
if( $(this).attr("sa_alternate") != undefined && $(this).attr("sa_alternate") != "" )
jQueryStr += " \"alternate\":"+$(this).attr("sa_alternate")+", "; // alterante flag
…. 중략
if( Number($(this).attr("sa_actionlist_cnt")) > 0 )
jQueryStr += " \"ActionList\": ["; // 동작 리스트 배열
for( n=1; n <= Number($(this).attr("sa_actionlist_cnt")); n++ ) {
jQueryStr += " { ";
if( $(this).attr("sa_act"+n+"_time") != undefined && $(this).attr("sa_act"+n+"_time") != "" )
jQueryStr += " \"time\":\""+$(this).attr("sa_act"+n+"_time")+"\", "; // animation 동작 시간
if( $(this).attr("sa_act"+n+"_rotate") != undefined && $(this).attr("sa_act"+n+"_rotate") != "" )
jQueryStr += " \"rotate\":\""+$(this).attr("sa_act"+n+"_rotate")+"\", "; // 회전각도
if( $(this).attr("sa_act"+n+"_opacity") != undefined && $(this).attr("sa_act"+n+"_opacity") != "" )
jQueryStr += " \"opacity\":\""+$(this).attr("sa_act"+n+"_opacity")+"\", "; // 투명도
… 중략 .. }
}
if( Number($(this).attr("sa_actionlist_cnt")) > 0 )
jQueryStr += " ]";
jQueryStr += " }";
AnimationCtrl( jQueryStr );
// Animation analysis
$ ('. SptStyleAni'). Each (function () {
var jQueryStr = "";
jQueryStr + = "{"; // start json
= ("this.attr (" sa_aniexist ")! ="")! = undefined && $ (this)
jQueryStr + = "\" aniExist \ ":" + $ (this) .attr ("sa_aniexist") + ","; // ani presence flag -> all true
= ("this.attr (" sa_aniid ")! ="")! = undefined && $ (this)
jQueryStr + = "\" aniID \ ": \""+ $ (this) .attr (" sa_aniid ") +" \ ","; // ID of div to execute ani. The form of the unique number.
= ("this.attr (" sa_aniimg ")! ="")! = undefined && $ (this)
jQueryStr + = "\" aniImg \ ": \""+ $ (this) .attr (" sa_aniimg ") +" \ ","; // Image location
= ("this.attr (" sa_duration ")! ="")! = undefined && $ (this)
jQueryStr + = "\" duration \ ": \""+ $ (this) .attr (" sa_duration ") +" \ ","; // Annie duration (sec)
= ("this.attr (" sa_count ")! ="")! = undefined &
jQueryStr + = "\" count \ ": \""+ $ (this) .attr (" sa_count ") +" \ ","; // Number of repetitions of the animation: 1,2,3, ... infinite (infinite repetition)
= ("this.attr (" sa_alternate ")! ="")! = undefined && $ (this)
jQueryStr + = "\" alternate \ ":" + $ (this) .attr ("sa_alternate") + ","; // alterante flag
... . syncopation
if (Number ($ (this) .attr ("sa_actionlist_cnt"))> 0)
jQueryStr + = "\" ActionList \ ": [""; // array of action list
n + 1); < RTI ID = 0.0 >
jQueryStr + = "{";
("sa_act" + n + "_ time")! = "")! = undefined && $ (this) .attr ("
jQueryStr + = "\" time \ ": \""+ $ (this) .attr (" sa_act "+ n +" _ time ") +" \ ","; // animation run time
("sa_act" + n + "_ rotate")! = "")! = undefined && $ (this) .attr ("
jQueryStr + = "\" rotate \ ": \""+ $ (this) .attr (" sa_act "+ n +" _ rotate ") +" \ ","; // rotation angle
("sa_act" + n + "opacity")! = "")! = undefined && $ (this) .attr ("
jQueryStr + = "\" opacity \ ": \""+ $ (this) .attr (" sa_act "+ n +" opacity ") +" \ ","; // Transparency
... ..}
}
if (Number ($ (this) .attr ("sa_actionlist_cnt"))> 0)
jQueryStr + = "]";
jQueryStr + = "}";
AnimationCtrl (jQueryStr);

CSS3 애니메이션 속성추출단계(S43)는 패킹된 JSon을 기반으로 추출작업을 진행하며, Json을 파싱(Parsing)하여 애니메이션 속성을 추출한다. In the CSS3 animation property extraction step S43, the extraction operation is performed based on the packed JSon, and the animation attribute is extracted by parsing Json.

Json 파싱(Parsing)은 다음의 코드로 구현될 수 있다.Json parsing can be implemented with the following code:

// Json Parsing
AniRes = jQuery.parseJSON(originalRequest);// Json Parsing
AniRes = jQuery.parseJSON (originalRequest);

이때, 애니메이션의 속성명은 Key에서 추출하고 해당 속성에 대한 값들은 밸류 값(Value)에서 추출한다. 추출된 애니메이션의 속성들을 CSS3의 문법에 맞게 문자열로 조합하며, 조합된 문자열을 바디(body)의 스타일 시트(style sheet)로 등록한다.At this time, the attribute name of the animation is extracted from the key, and the values for the attribute are extracted from the value value. The attributes of the extracted animation are combined into a string according to the grammar of CSS3, and the combined string is registered as a style sheet of the body.

키프레임등록단계(S44)는 먼저,애니메이션의 전체동작을 “key_”라는 접두사를 붙여서 동작 키프레임(KeyFrame)을 생성한다. 이어 생성된 키프레임(KeyFrame)에 각각의 동작들을 단위별로 구분하여 등록한다. 각각의 단위는 애니메에션(Animation)의 지속시간의 100분율을 기반으로 구별된다. 즉,애니메이션의 최초의 동작은 0% 동작으로, 애니메이션의 최종 동작은 100% 동작으로 등록한다. 기타 주요한 동작들은 해당 %의 동작으로 등록한다. 이때, 등록하는 애니메이션의 동작은 회전각도, 투명도, 프레임위치, 좌측위치, 상단위치 등의 요소들로 정의되며, 정의된 애니메이션의 동작들을 CSS3의 문법에 맞게 문자열로 조합하며, 조합된 문자열을 스타일 요소(element)로 등록한다. 스타일 요소는 CSS3에서 각각의 속성을 등록하는 객체들을 말하며, 여기에서는 애니메이션 동작을 등록시킬 대상 객체이다. 즉, 애니메이션의 좌측 위치를 등록시킬 때는 divObj.style['left']= AniRes.left;에서 left라는 객체가 스타일 요소이다. 백그라운드 이미지를 등록시킬 때는 divObj.style['background']= "url("+AniRes.aniImg+") no-repeat";에서 background라는 객체가 스타일 요소에 해당한다.In the key frame registration step (S44), an operation key frame (KeyFrame) is generated by prefixing the entire operation of the animation with " key_ ". Then, each of the operations is registered in the generated key frame (KeyFrame) by unit. Each unit is distinguished based on 100 percent of the duration of the animation. That is, the first operation of animation is 0% operation, and the last operation of animation is 100% operation. Other major operations are registered with the corresponding% operation. At this time, the operation of the registered animation is defined by the elements of rotation angle, transparency, frame position, left position, and upper position, and the operations of the defined animation are combined into a string according to the grammar of CSS3, Register as an element. The style element refers to the objects that register each attribute in CSS3, in this case the object to register the animation operation. That is, when registering the left position of the animation, the left object is a style element in divObj.style ['left'] = AniRes.left; When registering a background image, an object named background corresponds to a style element in divObj.style ['background'] = "url (" + AniRes.aniImg + ") no-repeat";

CSS3 애니메이션 속성추출단계(S43) 및 키프레임등록단계(S44)는 다음 표 10 및 이와 연속된 표 11과 같은 루틴의 프로그램 코드에 의하여 구현될 수 있다.The CSS3 animation property extraction step S43 and the key frame registration step S44 may be implemented by the program codes of the routines shown in the following Table 10 and the following Table 11. [

이에 따라, 스타일 시트로 등록된 CSS3 애니메이션 요소의 CSS3 속성과 동작의 스타일 요소에 따라 이펍파일의 로딩완료시 EPUB3 애니메이션 이 자동 실행되며, 애니메이션이 입력되는 경우 바디(Body)에 등록된 스타일 시트의 애니메이션 요소와 동작의 스타일 요소에 따라 EPUB3 파일의 로딩이완료되는 시점에 자동으로 실행되는 이펍 애니메이션이 구현된다. 한편, 애니메이션이 수정되는 경우 스타일 요소가 재등록 되는 시점에 애니메이션이 실행된다.
Accordingly, according to the CSS3 attribute of the CSS3 animation element registered as the style sheet and the style element of the action, the EPUB3 animation is automatically executed when the pub file is loaded. When the animation is input, the animation of the style sheet registered in the body This pub animation is implemented automatically when EPUB3 file loading is completed according to the elements of elements and the style of action. On the other hand, when the animation is modified, the animation is executed at the time when the style element is re-registered.

이상, 본 발명은 특정 기능들 및 그의 관계들의 성능을 나타내는 방법 단계들의 목적을 가지고 위에서 설명되었다. 이러한 기능적 구성 요소들 및 방법 단계들의 경계들 및 순서는 설명의 편의를 위해 여기에서 임의로 정의되었다. 상기 특정 기능들 및 관계들이 적절히 수행되는 한 대안적인 경계들 및 순서들이 정의될 수 있다. 임의의 그러한 대안적인 경계들 및 순서들은 그러므로 상기 청구된 발명의 범위 및 사상 내에 있다. 추가로, 이러한 기능적 구성 요소들의 경계들은 설명의 편의를 위해 임의로 정의되었다. 어떠한 중요한 기능들이 적절히 수행되는 한 대안적인 경계들이 정의될 수 있다. 마찬가지로, 흐름도 블록들은 또한 어떠한 중요한 기능성을 나타내기 위해 여기에서 임의로 정의되었을 수 있다. 확장된 사용을 위해, 상기 흐름도 블록 경계들 및 순서는 정의되었을 수 있으며 여전히 어떠한 중요한 기능을 수행한다. 그러므로 기능적 구성 요소들 및 흐름도 블록들 및 순서들 둘 다의 대안적인 정의들은 청구된 본 발명의 범위 및 사상 내에 있다.The present invention has been described above with the aim of method steps illustrating the performance of certain functions and their relationships. The boundaries and order of these functional components and method steps have been arbitrarily defined herein for convenience of description. Alternative boundaries and sequences may be defined as long as the specific functions and relationships are properly performed. Any such alternative boundaries and sequences are therefore within the scope and spirit of the claimed invention. In addition, the boundaries of these functional components have been arbitrarily defined for ease of illustration. Alternative boundaries can be defined as long as certain important functions are properly performed. Likewise, the flow diagram blocks may also be arbitrarily defined herein to represent any significant functionality. For extended use, the flowchart block boundaries and order may have been defined and still perform some important function. Therefore, alternative definitions of both functional components and flowchart blocks and sequences are within the scope and spirit of the claimed invention.

본 발명은 또한 하나 이상의 실시 예들의 용어로, 적어도 부분적으로 설명되었을 수 있다. 본 발명의 실시 예는 본 발명, 그 측면, 그 특징, 그 개념, 및/또는 그 예를 나타내기 위해 여기에서 사용된다. 본 발명을 구현하는 장치, 제조의 물건, 머신, 및/또는 프로세스의 물리적인 실시 예는 여기에 설명된 하나 이상의 실시 예들을 참조하여 설명된 하나 이상의 측면들, 특징들, 개념들, 예들 등을 포함할 수 있다. 더구나, 전체 도면에서, 실시 예들은 상기 동일한 또는 상이한 참조 번호들을 사용할 수 있는 상기 동일하게 또는 유사하게 명명된 기능들, 단계들, 모듈들 등을 통합할 수 있으며, 그와 같이, 상기 기능들, 단계들, 모듈들 등은 상기 동일한 또는 유사한 기능들, 단계들, 모듈들 등 또는 다른 것들일 수 있다.The invention may also be described, at least in part, in the language of one or more embodiments. Embodiments of the invention are used herein to describe the invention, aspects thereof, features thereof, concepts thereof, and / or examples thereof. The physical embodiment of an apparatus, article of manufacture, machine, and / or process for implementing the invention may include one or more aspects, features, concepts, examples, etc., described with reference to one or more embodiments described herein . Moreover, in the entire drawings, embodiments may incorporate the same or similarly named functions, steps, modules, etc. that may use the same or different reference numerals, and so forth, Steps, modules, etc., may be the same or similar functions, steps, modules, etc., or the like.

이상과 같이 본 발명에서는 구체적인 구성 요소 등과 같은 특정 사항들과 한정된 실시 예 및 도면에 의해 설명되었으나 이는 본 발명의 보다 전반적인 이해를 돕기 위해서 제공된 것일 뿐, 본 발명은 상기의 실시 예에 한정되는 것은 아니며, 본 발명이 속하는 분야에서 통상적인 지식을 가진 자라면 이러한 기재로부터 다양한 수정 및 변형이 가능하다.As described above, the present invention has been described with reference to particular embodiments, such as specific elements, and specific embodiments and drawings. However, it should be understood that the present invention is not limited to the above- And various modifications and changes may be made thereto by those skilled in the art to which the present invention pertains.

따라서, 본 발명의 사상은 설명된 실시 예에 국한되어 정해져서는 아니되며, 후술하는 특허청구범위뿐 아니라 이 특허청구범위와 균등하거나 등가적 변형이 있는 모든 것들은 본 발명 사상의 범주에 속한다고 할 것이다.
Accordingly, the spirit of the present invention should not be construed as being limited to the embodiments described, and all of the equivalents or equivalents of the claims, as well as the following claims, belong to the scope of the present invention .

10: CSS3 애니메이션 요소 입력모듈 20: HTML5 커스텀 어트리뷰트 변환모듈
30: 전자책 파일 생성 모듈 40: EPUB3 애니메이션 분석 및 실행 모듈10: CSS3 animation element input module 20: HTML5 custom attribute conversion module
30: electronic book file generation module 40: EPUB3 animation analysis and execution module

Claims

사용자로부터 애니메이션의 종류에 대한 선택을 입력받고 선택된 종류의 애니메이션의 설정에 필요한 CSS3 애니메이션 요소를 입력받으며, 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 애니메이션 동작 리스트를 생성하는 CSS3 애니메이션 요소 입력단계(S10);
상기 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하여 저장하고 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하여 HTML5 문서 파일로 저장하는 HTML5 커스텀 어트리뷰트 변환단계(S20); 및
상기 저장된 HTML5 문서 파일을 이용하여 EPUB3 파일을 생성하는 전자책 파일 생성단계(S30);를 포함하는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 방법.Receives a selection of a type of animation from a user, receives a CSS3 animation element necessary for setting a selected type of animation, receives an input of a CSS3 animation element necessary for at least one operation change of a selected type of animation, and generates an animation operation list A CSS3 animation element input step (S10);
An HTML5 custom attribute conversion step (S20) of converting the input CSS3 animation element into an HTML5 custom attribute, storing the input CSS3 animation element, storing the converted CSS3 animation element into an HTML5 document file, storing the converted HTML3 custom attribute into an HTML5 document file, And
And generating an EPUB3 file using the stored HTML5 document file (S30). [5] The method according to claim 1,

제1 항에 있어서,
CSS3 애니메이션 요소 입력단계(S10)는,
상기 CSS3 애니메이션 요소와 연관된 변수들을 초기화하는 변수 초기화 단계(S11);
애니메이션의 종류 선택을 위한 애니메이션의 종류 선택 사용자 인터페이스를 디스플레이하여, 상기 애니메이션의 종류 선택 사용자 인터페이스를 통해 애니메이션의 종류에 대한 선택을 입력받고 각 선택된 애니메이션의 CSS3 애니메이션 요소를 입력받는 애니메이션종류 선택 단계(S12);
애니메이션 동작 리스트 생성을 위한 동작 리스트 생성 사용자 인터페이스를 디스플레이하여, 동작 리스트 생성 사용자 인터페이스를 통해 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 동작 리스트를 생성하여 디스플레이하는 동작리스트 생성단계(S13); 를 포함하여 수행되는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 방법. The method according to claim 1,
The CSS3 animation element input step (S10)
A variable initializing step (S11) of initializing variables associated with the CSS3 animation element;
An animation type selection user interface for selecting an animation type, an animation type selection step S12 for inputting a selection of an animation type through the animation type selection user interface and receiving a CSS3 animation element of each selected animation );
Creating an action list for creating an animation action list A user interface is displayed to generate an action list. The action list creation user interface is used to input a CSS3 animation element necessary for at least one action change of a selected type of animation, Step S13; And generating and reproducing the pub animation using the style sheet animation.

제2 항에 있어서, 상기 애니메이션의 종류는 회전 애니메이션, 이동 애니메이션, 프레임 애니메이션, 복합 애니메이션으로, 선택된 애니메이션의 크기, 반복횟수, 실행시간을 CSS3 애니메이션 요소로서 입력받는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 방법. 3. The method according to claim 2, wherein the type of the animation is rotation animation, movement animation, frame animation, and composite animation, and the size, repetition count, and execution time of the selected animation are input as CSS3 animation elements. How to create and play this pub animation in real time.

제3 항에 있어서,
상기 동작 변화에 필요한 CSS3 애니메이션 요소는 상기 애니메이션의 종류에 따라 상이한 요소가 입력되는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 방법. The method of claim 3,
Wherein the CSS3 animation element necessary for the operation change inputs a different element depending on the type of the animation.

제2 항에 있어서,
상기 HTML5 커스텀 어트리뷰트로 변환단계(S20)는,
상기 입력된 CSS3 애니메이션 요소의 값을 상기 변수에 설정하는 변수 설정단계(S21);
상기 설정된 변수에 각각에 대응하는 HTML5 커스텀 어트리뷰트를 정의하여, 설정된 변수값을 상기 정의된 HTML5 커스텀 어트리뷰트의 밸류값으로 저장하여 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하는 HTML5 커스텀 어트리뷰트 변환단계(S22); 및
HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하고 DIV 태그를 입력받아 HTML 파일로 저장하는 HTML5 파일 생성단계(S23)를 포함하여 수행되는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 방법. 3. The method of claim 2,
In the HTML5 custom attribute conversion step S20,
Setting a value of the input CSS3 animation element to the variable (S21);
An HTML5 custom attribute conversion step (S22) of defining an HTML5 custom attribute corresponding to each of the set variables, storing the set variable value as a value of the defined HTML5 custom attribute, and converting the input CSS3 animation element into HTML5 custom attribute ); And
And an HTML5 file generation step (S23) of inputting a CSS3 animation element converted into an HTML5 custom attribute into an HTML tag and receiving a DIV tag and storing the HTML file as an HTML file (S23). And reproducing method.

제5 항에 있어서, 전자책 파일 생성단계(S30)는 HTML 태그를 분석할 자바스크립트 파일(javascript file)을 포함하여 상기 전자책 파일을 생성하는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 방법. 6. The method according to claim 5, wherein the e-book file creation step (S30) includes creating a e-book file including a javascript file for analyzing the HTML tag. And reproducing method.

제6 항에 있어서,
상기 전자책 파일에 포함된 HTML5 커스텀 어트리뷰트를 분석하여 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 이를 기초로 EPUB3 애니메이션을 실행하는 EPUB3 애니메이션 실행단계(S40);을 포함하는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 방법.The method according to claim 6,
And an EPUB3 animation execution step (S40) of analyzing the HTML5 custom attribute included in the electronic book file to extract the CSS3 attribute of the CSS3 animation element and executing the EPUB3 animation based on the CSS3 attribute of the CSS3 animation element How to create and play this pub animation in real time.

제7 항에 있어서,
상기 EPUB3 애니메이션 실행단계(40)는,
상기 전자책 파일을 로딩하여 HTML 태그를 분석할 자바스크립트 파일(javascript file)의 메소드(method)를 호출하는 전자책 파일 로딩단계(S41);
HTML5 커스텀 어트리뷰트를 분석하여 CSS3애니메이션 요소로 변환하고 JSon 형태로 패킹(packing)하는 HTML5 커스텀 어트리뷰트를 분석단계(S42);
패킹된 JSon을 기반으로 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 추출된 속성들을 CSS3의 문법에 맞게 문자열로 조합하여 바디(body)의 스타일 시트로 등록하는 CSS3 애니메이션 속성추출단계(S43); 및
CSS3 애니메이션의 동작 리스트를 추출하여 동작 단위로 키프레임(KeyFrame)에 등록하며 등록되는 동작들을 CSS3의 문법에 맞게 문자열로 조합하여 스타일 요소로 등록하는 키프레임등록단계(S44);를 포함하여
스타일 시트로 등록된 CSS3 애니메이션 요소의 CSS3 속성과 동작의 스타일 요소에 따라 이펍파일의 로딩완료시 EPUB3 애니메이션 이 자동 실행되는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 방법. 8. The method of claim 7,
The EPUB3 animation execution step (40)
An electronic book file loading step (S41) of calling a method of a javascript file for loading the electronic book file and analyzing HTML tags;
Analyzing HTML5 custom attributes to convert them into CSS3 animation elements and packing HTML5 custom attributes in JSon form (step S42);
A CSS3 animation attribute extracting step (S43) of extracting a CSS3 attribute of a CSS3 animation element based on the packed JSon, combining the extracted attributes into a string according to the syntax of CSS3, and registering the extracted attribute as a style sheet of a body; And
A key frame registration step (S44) of extracting an action list of the CSS3 animation, registering the extracted action list in a key frame (Frame) on a per action basis, and registering the registered actions as a style element by combining them into a character string according to the grammar of CSS3
The EPUB3 animation is automatically executed when the pub file is loaded according to the CSS3 property of the CSS3 animation element registered as the style sheet and the style element of the action, and a method for real-time generation and reproduction of the pub animation using the style sheet animation.

스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 시스템에 있어서,
사용자로부터 애니메이션의 종류에 대한 선택을 입력받고 선택된 종류의 애니메이션의 설정에 필요한 CSS3 애니메이션 요소를 입력받으며, 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 애니메이션 동작 리스트를 생성하는 CSS3 애니메이션 요소 입력모듈(10);
상기 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하여 저장하고 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하여 HTML5 문서 파일로 저장하는 HTML5 커스텀 어트리뷰트 변환모듈(20); 및
상기 저장된 HTML5 문서 파일을 이용하여 EPUB3 파일을 생성하는 전자책 파일 생성 모듈(30);를 포함하는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 시스템.In this pub animation real time production and reproduction system using style sheet animation,
Receives a selection of a type of animation from a user, receives a CSS3 animation element necessary for setting a selected type of animation, receives an input of a CSS3 animation element necessary for at least one operation change of a selected type of animation, and generates an animation operation list A CSS3 animation element input module 10;
An HTML5 custom attribute conversion module 20 for converting the input CSS3 animation element into an HTML5 custom attribute and storing the converted CSS3 animation element into an HTML tag and storing the converted HTML3 custom attribute into an HTML5 document file; And
And an electronic book file generation module (30) for generating an EPUB3 file by using the stored HTML5 document file.

제9 항에 있어서,
상기 HTML5 커스텀 어트리뷰트를 분석하여 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 이를 기초로 EPUB3 애니메이션을 실행하는 EPUB3 애니메이션 분석 및 실행 모듈(40);을 더 포함하는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 시스템.10. The method of claim 9,
And an EPUB3 animation analysis and execution module (40) for analyzing the HTML5 custom attribute and extracting a CSS3 attribute of the CSS3 animation element and executing an EPUB3 animation on the basis of the CSS3 attribute of the CSS3 animation element. Generation and reproduction system.