HTML5 Contents Authoring ToolDIEHARD Touch the Real World! 비트도트 주식회사 제작년도 | 2013.02 대표 | 조희제
이제플래시를버려라!
모바일 리치미디어 컨텐츠20분이면 만들수 있다!!!
01     DieHard 개요          Framework DieHard                                         BitDot 보유 Library                    ...
02     기능소개                도구막대        Canvas                프로젝트 저장 및   프로젝트 크기를 규정하고 각                오브젝트 삽입     오브젝트의 ...
02A    Project 관리                            Project를 새로 생성하거나 기존에 저장해놓은                  Open                            ...
02 B   Properties                                               속성 분류                                                 캔버스 ...
02C    Insert & Timeline                                     이미지, 3D, 동영상 등의 객체를 캔버스에 삽입                         Insert   ...
02D    Preset      Flash          깜박거림      Bounce         수직으로 튀었다 제자리      Shake          좌우로 흔들거림      BounceIn       튀...
03     시스템구조                                                                             CLOUD                            ...
04 E   시연              직접 만드는 과정을 보여드리겠습니다.          개발자 5시간 코딩을, 디자이너가 20분만에 만들어 냅니다.              http://youtu.be/1gQ_AP...
05     DieHard 특징                             설치가 아닌 웹상에서 바로 제작 가능                  Cloud                  환경 제공      HTML...
06 E     DieHard 장점                1                         2                     3           제작속도 혁신               다양한 프...
07 E   경쟁저작툴                                                                                                 HERE       To...
08 E   추가개발예정목 록          기능개선          기능추가              UX 개선        Easing 기능 적용    Preset 추가    Drag & Drop 오브젝트 삽입   ...
09 E   버티컬확장가능       저작툴알                           포털        파                         모바일 광고 네트워크사                 모바일 광...
10 E   주요 이해 관계자 및 수익방안                               BITDOT                                   저작툴            툴           ...
11 E   비즈니스 전개방 향      버티컬 확장/다양화                     TOOL       Analysis & Matching    Platform                    전자책&잡지...
12 E   비즈니스 마일스 톤                마일스톤                 2012년 3Q    2012년 4Q       2013년 1Q    2013년 2Q    2013년 3Q    2013년...
HTML5 Contents Authoring Tool DIEHARDThankyou
Upcoming SlideShare
Loading in …5
×

HTML5 Authoring Tool - Die hard_alpha

2,177 views

Published on

Finally DIEHARD alpha Version came out last week!
This tool is for Designers and Planners to create animated and interactive HTML5 mobile ad in ease without knowing code .
We (Bitdot) are always open minded to hear your feedback hoping our final product is able to not only save time but also assist your creative work process.

HTML5 컨텐츠를 만들 수 있는 비트도트(www.bitdot.kr)의 저작툴 Die Hard의 알파버전입니다.
다이하드를 사용하여 HTML5로 제작된 멀티미디어 광고를 제작할 수 있습니다.
개발자가 5시간 이상 걸려 개발해야 할 것을 20분 내에 제작할 수 있습니다.
모바일에서 플래쉬로는 불가능한 애니메이션 효과, 인터렉티브 효과 등을 쉽게 구현할 수 있습니다.

http://youtu.be/i-GgmsW4B2E

http://youtu.be/NbJk9ghTvTg

DieHard - alpha : HTML5 Authoring Tool
We can make html5 contents and Rich Media mobile AD with DieHard
DieHard can make easily animation & interactive effect which Flash can't at Mobile

ouyaa@bitdot.kr

Published in: Technology
1 Comment
8 Likes
Statistics
Notes
  • diehardを開発した会社の代表です。
    動画も作ったので見てみてください。
    http://www.youtube.com/watch?v=i-GgmsW4B2E
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,177
On SlideShare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
2
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

HTML5 Authoring Tool - Die hard_alpha

  1. 1. HTML5 Contents Authoring ToolDIEHARD Touch the Real World! 비트도트 주식회사 제작년도 | 2013.02 대표 | 조희제
  2. 2. 이제플래시를버려라!
  3. 3. 모바일 리치미디어 컨텐츠20분이면 만들수 있다!!!
  4. 4. 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 관리시스템 콘텐츠 생산 플랫폼으로 가치를 가지게 됨.
  5. 5. 02 기능소개 도구막대 Canvas 프로젝트 저장 및 프로젝트 크기를 규정하고 각 오브젝트 삽입 오브젝트의 위치 구성Properties캔버스나 오브젝트의 크기, 색깔 등 성격 규정 Preset 오브젝트에 미리 규정된 움직 임효과들을 적용 Timeline 전체적인 애니메이션을 시간 순으로 기록하고 각 순간 개별 오브젝트의 동작을 표현
  6. 6. 02A Project 관리 Project를 새로 생성하거나 기존에 저장해놓은 Open 파일을 엽니다 Save 현재 작업하고 있는 Project를 저장합니다 Preview 작업 화면에서 미리보기를 합니다 작업한 Project를 HTML5으로 자동으로 변환시 Build 켜줍니다 Exit DIEHARD를 종료합니다
  7. 7. 02 B Properties 속성 분류 캔버스 사각형 오브젝트 General Import한 파일의 ID를 설정합니다 Import한 파일의 기본적인 사이즈와 좌표값을 설 Dimension 정합니다 Color 색상을 지정하고 투명값을 줄 수 있습니다 사이즈 조절, 회전, 기울기등의 값을 줌으로써 다양 Transform 한 애니메이션 효과를 줄 수 있습니다 전화걸기, Out Link, Mail, SNS 연결 등의 기능 Function 을 객체에 부여합니다.
  8. 8. 02C Insert & Timeline 이미지, 3D, 동영상 등의 객체를 캔버스에 삽입 Insert 합니다. 객체와 효과를 시간순으로 배치합니다. Timeline 시간의 흐름에 따라 연속적으로 객체의 정보와 효 과의 변화를 반영합니다.
  9. 9. 02D Preset Flash 깜박거림 Bounce 수직으로 튀었다 제자리 Shake 좌우로 흔들거림 BounceIn 튀면서 빌드인 RotateIn 회전하면서 빌드인 LightSpeedIn 한 쪽이 찌그러지면서 빌드인 Flip 뒤집기 Wobble 떨기 Hinge 달려있다가 떨어지기 Drag&Drop 드래그 앤 드롭 Wheel 바퀴처럼 돌리기 Scratch 긁어서 지우기거나 그리기 3D 3D로 돌리면서 보기 Accelerometer 중력센서를 이용한 효과 Puzzle 퍼즐맞추기 (미니게임)
  10. 10. 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
  11. 11. 04 E 시연 직접 만드는 과정을 보여드리겠습니다. 개발자 5시간 코딩을, 디자이너가 20분만에 만들어 냅니다. http://youtu.be/1gQ_APHhRj0
  12. 12. 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, 중력센서, 웹서비스 연동 등 네이티 브 앱 수준의 다양한 효과 구현 가능
  13. 13. 06 E DieHard 장점 1 2 3 제작속도 혁신 다양한 프리셋과 템플릿 코드 수정 가능 5시간 작업을 20분 내로 제작 속도 단축 2년 이상의 HTML5 인터렉티브 컨텐츠 HTML만 알면 쉬운 코드 수정 개발자 없이 디자이너만으로도 개발 가능 제작 경험이 저작툴로 반영 4 5 6 인터렉티브 컨텐츠 제작 용량최적화 클라우드 환경 제공 애니메이션, 리치미디어를 넘어선 모바일 광고에 최적화된 언제 어디서나 작업가능 인터렉티브 저작툴 최소 용량의 결과물
  14. 14. 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 • 사용성이 편리하지만 제 • 인터렉션 기능 약함 특징 공되는 프리셋기능이 약 • 인터렉션 기능 불가 • 코드가 복잡하고 무거움 하고 탬플릿 없음
  15. 15. 08 E 추가개발예정목 록 기능개선 기능추가 UX 개선 Easing 기능 적용 Preset 추가 Drag & Drop 오브젝트 삽입 Canvas 변환엔진적용 Function 추가 TimeLine 기능개선 Cloud 서비스 Scene 기능 추가 해상도별 퍼블리싱
  16. 16. 09 E 버티컬확장가능 저작툴알 포털 파 모바일 광고 네트워크사 모바일 광고 배너&랜딩 모바일 광고 제작사 동영상 포털 모바일 동영상 광고 전자책/잡지 출판사 전자책 유통사 전자책 &인터렉티브 잡지 광고
  17. 17. 10 E 주요 이해 관계자 및 수익방안 BITDOT 저작툴 툴 제공 사용 광고주 료 사용료 툴 제공 파트너쉽 모바일 광고 광고제작사 비 플랫폼 사업자 제작 광고기획사 대행 제작 미디어랩 매체 집행 의의 광고료 저작툴 개발 후 광고제작사를 대상으로 저작툴 사용료 수익 발생
  18. 18. 11 E 비즈니스 전개방 향 버티컬 확장/다양화 TOOL Analysis & Matching Platform 전자책&잡지 이용자행위 및 광고매칭 광고/컨텐츠 저작툴 패턴분석 시스템 NEW Mobile 동영상 광고 AD 저작툴 Network 모바일광고 모바일 광고 분석툴 저작툴 플랫폼화
  19. 19. 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 테스트 분석 및 설계 확장 저작툴 개발 및 테스트 환경 구성 동영상, 전자책 동영상 광고저작툴 전자책 광고저작툴 사업기획 및 제휴 분석툴 개발 모바일 매칭 시스템 개발 광고플랫폼 등록 시스템 개발 사이트 개발
  20. 20. HTML5 Contents Authoring Tool DIEHARDThankyou

×