d r t w i n

스마트폰에서 동작할 수 있도록 Phonegap App으로 만드는 과정을 소개합니다. 맨처음 등장할 제작사 장면을 만들어둡니다. 첫번째 장면의 파일명은 반드시 index.html 이어야 합니다. 그리고 icon 파일과 config.xml 파일이 필요합니다. 아이콘 파일명도 반드...

아래의 경우와 동일한 방법입니다만 약간 다른 점은, 화분을 던질듯 말듯 모션을 취하고 있는 곰의 모습(A)과 클릭하면 화분을 던지는 곰의 모습(B)입니다. 즉 이전의 올빼미 경우는 A가 서있는 정지 상태였다면 이번 경우는 두 가지가 모두 액션을 가지고 있...

서있는 올빼미(A)와 날아가는 올빼미(B)가 만들어졌다면 이들을 하나의 Symbol로 만들어줘야 합니다. 먼저 서있는 위치(stand)와 날아가는 위치(fly)를 Marker 입력으로 구분해주었습니다. 이후 이 심볼안에 들어가서 타임라인 상에서 간격을 벌려주고 클릭하...

특정한 캐릭터를 클릭하는 경우 모션으로 반응하는 것으로 좀 더 재미있는 콘텐츠를 만들 수 있습니다. 이를 위해서 서있는 올빼미(A)와 날아갔다 다시 돌아오는 올빼미(B)가 필요합니다. 특히 B의 경우 자체적인 모션을 하는 것이 또다른 움직임을 연출할 경...

HTML 페이지를 모바일앱으로 만들 경우 뿐만 아니라 일반 PC환경 사용자의 해상도를 고려하자면, 페이지의 해상도 문제는 해결해야할 부분입니다. 화면의 크기가 어떻든 그에 맞춰 보일 수 있게 해주는 Script를 이용하면 간단히 이러한 문제를 해결할 수 있습...

After Effect에서 Image Sequence로 추출된 이미지를 가지고 이제 GIF Animator라는 프로그램에서 움직이는 GIF 애니메이션을 만드는 방법을 소개합니다. 이번 예제에 필요한 프로그램 설치는 아래의 수업자료실 게시물에서 확인하세요. http://www.drtwin.com...

After Effect에서 만들어놓은 움직임을 Edge Animate에서 애니메이션 클립으로 만들려면 Image Sequence 즉 일련의 이미지로 뽑아내어야 합니다. 현재 CC Page Turn 기능을 이용하여 페이지가 넘어가는 듯한 장면을 연출했습니다. 이것을 JPEG Sequence로 추출...

장면이 모두 만들어졌기 때문에 이들을 연결시킬 네비게이션을 만들어봅니다. 먼저 상대경로의 개념을 이해해야만 합니다. 자신(html 파일)을 기준으로, 현재 자기가 위치한 폴더는 . 으로 표현하며 자기를 포함하고 있는 상위폴더를 지칭하는 것은 .. 입니다....

예제의 마지막 페이지인 인트로 페이지를 만드는 것입니다. 이는 여러분이 조별작업에서 조이름을 정하고 로고를 만들어서 프러덕션 이름을 나타내는 과정입니다. 재미는 연출을 위하여, 떨어지는 글자에 원숭이들이 깔리는 것을 연출하려고 시도하였으며 Moti...

세번째 장면을 만드는 과정인데, 이번 동영상에서는 Motion Path 기능이 가장 중요합니다. 아래의 이미지처럼 Motion Path를 선택합니다. 그리고 움직임을 준 후, Path의 곡선을 조정해줍니다. 다운로드 : HTML5_Edge_Animate_09.exe