HTML5 Authoring Tool - Die hard_alpha

HTML5 Contents Authoring Tool

DIEHARD

Touch the Real World!

비트도트 주식회사
제작년도 | 2013.02 대표 | 조희제

이제
플래시를
버려라!

모바일 리치미디어 컨텐츠
20분이면 만들수 있다!!!

01
DieHard 개요

Framework DieHard BitDot 보유 Library

Simple Zoom in /
360 View
Paging / Contents Animation out

Menu / 환경설정파일 Interactive
Scratch Drag & Drop
animation

Javascript Library
Device
Fade in /
Sliding Orientation
Opensource Javascript Library out
event

• 콘텐츠와 환경설정 파일의 수정으로 전차책 및 광고 컨텐츠 제작이 가능 • 경량의 배너 페이지에 적용하기 위한 최소한의 기능으로 구성된
한 프레임워크 보유 경량 자바스크립트 라이브러리 보유
• HTML5/CSS3, Javascript기반으로 개발되어 웹브라우저,웹뷰를 사 • 배너의 기본 기능외 인터렉티브한 사용자 경험을 위한 별도의 라이브러리를 보유

Contents 저작툴 HTML5 Contents 생산 플랫폼
DieHard를 기반으로 Contents 저작툴, 환경 설정 파일 자동화 기능을 연계했을 때 -HTML5
Contents 관리시스템 콘텐츠 생산 플랫폼으로 가치를 가지게 됨.

02
기능소개
도구막대 Canvas
프로젝트 저장 및 프로젝트 크기를 규정하고 각
오브젝트 삽입 오브젝트의 위치 구성

Properties
캔버스나 오브젝트의 크
기, 색깔 등 성격 규정

Preset
오브젝트에 미리 규정된 움직
임효과들을 적용

Timeline
전체적인 애니메이션을 시간 순으로 기록하고
각 순간 개별 오브젝트의 동작을 표현

02
A Project 관리

Project를 새로 생성하거나 기존에 저장해놓은
Open
파일을 엽니다

Save 현재 작업하고 있는 Project를 저장합니다

Preview 작업 화면에서 미리보기를 합니다

작업한 Project를 HTML5으로 자동으로 변환시
Build
켜줍니다

Exit DIEHARD를 종료합니다

02
B Properties
속성 분류

캔버스
사각형
오브젝트

General Import한 파일의 ID를 설정합니다

Import한 파일의 기본적인 사이즈와 좌표값을 설
Dimension
정합니다

Color 색상을 지정하고 투명값을 줄 수 있습니다

사이즈 조절, 회전, 기울기등의 값을 줌으로써 다양
Transform
한 애니메이션 효과를 줄 수 있습니다

전화걸기, Out Link, Mail, SNS 연결 등의 기능
Function
을 객체에 부여합니다.

02
C Insert & Timeline

이미지, 3D, 동영상 등의 객체를 캔버스에 삽입
Insert
합니다.

객체와 효과를 시간순으로 배치합니다.

Timeline 시간의 흐름에 따라 연속적으로 객체의 정보와 효

과의 변화를 반영합니다.

02
D Preset
Flash 깜박거림

Bounce 수직으로 튀었다 제자리

Shake 좌우로 흔들거림

BounceIn 튀면서 빌드인

RotateIn 회전하면서 빌드인

LightSpeedIn 한 쪽이 찌그러지면서 빌드인

Flip 뒤집기

Wobble 떨기

Hinge 달려있다가 떨어지기

Drag&Drop 드래그 앤 드롭

Wheel 바퀴처럼 돌리기

Scratch 긁어서 지우기거나 그리기

3D 3D로 돌리면서 보기

Accelerometer 중력센서를 이용한 효과

Puzzle 퍼즐맞추기 (미니게임)

03
시스템구조

CLOUD
(Environment)

스 Network Server Storage
저작기 서비 소
장
Backup Firewall CDN
Canvas Object Timeline
Load Balancing Co-location

Preset Preview

Function

Project 관리 버젼 및 이슈 관리 외부API

URL Shortener

building

HTML5 Creative

04
E 시연

직접 만드는 과정을 보여드리겠습니다.
개발자 5시간 코딩을, 디자이너가 20분만에 만들어 냅니다.
http://youtu.be/1gQ_APHhRj0

05
DieHard 특징
설치가 아닌 웹상에서 바로 제작 가능
Cloud
환경 제공 HTML5/CSS3의 이점을 살릴 수 있음. 실시간

수정 및 배포 용이(위젯으로도 활용가능)
TEMPLATE 지원(2년간 비트도트의 컨텐츠 제

작 노하우가 녹아있는 TEMPLATE 제공)

WYSIWYG/CODE EDIT Interface지원

쉬운 사용성 WIZARD MODE지원

TIMELINE MODE/SCENE Mode 지원

SOURCE/DESIGN/WEBKIT EDIT MODE지

원
리치미디어 광고/인터렉티브 광고/HTML5

CONTENTS 저작 기능에 중점
배너/랜딩페이지/HTML5/CSS3
최적화된 결과물
CONTENTS/HTML5 콘텐츠
HTML5 CONTENTS Platform을 이용한 전자

도서앱과 거의 비슷한 결과물 저작할 수 있음.

비트도트가 축적한 다양한 라이브러리 제공
크리에이티브

최대화 드래그, 3D, 중력센서, 웹서비스 연동 등 네이티

브 앱 수준의 다양한 효과 구현 가능

06
E
DieHard 장점

1 2 3

제작속도 혁신 다양한 프리셋과 템플릿 코드 수정 가능

5시간 작업을 20분 내로 제작 속도 단축 2년 이상의 HTML5 인터렉티브 컨텐츠
HTML만 알면 쉬운 코드 수정
개발자 없이 디자이너만으로도 개발 가능 제작 경험이 저작툴로 반영

4 5 6
인터렉티브 컨텐츠 제작 용량최적화 클라우드 환경 제공

애니메이션, 리치미디어를 넘어선 모바일 광고에 최적화된
언제 어디서나 작업가능
인터렉티브 저작툴 최소 용량의 결과물

07
E 경쟁저작툴
HERE

Tool iAd Producer Sprout Sencha Animator Adobe Edge DieHard

$99/year 미정
가격 Members of the - $199 미정
(Preview Version)
iOS Developer Program

인터렉티브 상 중 X X 지원

애니메이션 O O O O O

라이브러리 제공 O O X X O

탬플릿 제공 O X X O O

코딩 지원 일부지원 일부지원 일부지원 지원

적용범위 iAd(iOS) 한정 inMobi 한정 All All All

클라우딩 X O X X All

• 사용성이 편리하지만 제
• 인터렉션 기능 약함
특징 공되는 프리셋기능이 약 • 인터렉션 기능 불가
• 코드가 복잡하고 무거움
하고 탬플릿 없음

08
E 추가개발예정목 록

기능개선 기능추가 UX 개선
Easing 기능 적용 Preset 추가 Drag & Drop 오브젝트 삽입

Canvas 변환엔진적용 Function 추가 TimeLine 기능개선

Cloud 서비스 Scene 기능 추가

해상도별 퍼블리싱

09
E 버티컬확장가능

저작툴알 포털

파 모바일 광고 네트워크사

모바일 광고 배너&랜딩 모바일 광고 제작사

동영상 포털

모바일 동영상 광고

전자책/잡지 출판사

전자책 유통사

전자책 &인터렉티브 잡지 광고

10
E 주요 이해 관계자 및 수익방안

BITDOT
저작툴 툴
제공
사용
광고주 료
사용료 툴 제공

파트너쉽
모바일 광고
광고제작사
비 플랫폼 사업자
제작

광고기획사 대행
제작

미디어랩
매체 집행 의의 광고료

저작툴 개발 후 광고제작사를 대상으로 저작툴 사용료 수익 발생

11
E 비즈니스 전개방 향
버티컬 확장/다양화

TOOL Analysis & Matching Platform

전자책&잡지
이용자행위 및 광고매칭
광고/컨텐츠 저작툴
패턴분석 시스템
NEW Mobile
동영상 광고
AD
저작툴 Network
모바일광고
모바일 광고
분석툴
저작툴

플랫폼화

12
E 비즈니스 마일스 톤

마일스톤 2012년 3Q 2012년 4Q 2013년 1Q 2013년 2Q 2013년 3Q 2013년 4Q

1차분류 2차분류 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12

대형광고 기획사 제휴

인터렉티브광고 렌딩 페이지 역량 강화

종합 프로모션 역량 강화

광고솔루션 개발

분석 및 설계
모바일
개발 및 테스트 환경 구성
광고저작툴
광고저작툴 Beta 개발

Beta 테스트

분석 및 설계

확장 저작툴 개발 및 테스트 환경 구성
동영상, 전자책 동영상 광고저작툴

전자책 광고저작툴

사업기획 및 제휴

분석툴 개발
모바일
매칭 시스템 개발
광고플랫폼
등록 시스템 개발

사이트 개발

HTML5 Contents Authoring Tool DIEHARD

Thankyou

HTML5 Authoring Tool - Die hard_alpha

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (6)

Featured

Featured (20)

HTML5 Authoring Tool - Die hard_alpha