Kinetic scrolling experiment 2.

두 번째로 만든 키네틱 스크롤(플리킹) 효과. 스크롤이 되는 도중에는 MOUSE_DOWN 이벤트가 디스패치되지 않도록 하여, 프레스 및 클릭이 실행되지 않도록 했습니다.

8 thoughts on “Kinetic scrolling experiment 2.”

  1. 안녕하세요. (주)이지스 라는 업체에 근무하는 김찬엽 입니다. (사내 유일 플래시 작업자 입니다. 흑흑)

    땡굴이님이 운영하는 까페에서 이름 몇번 봤었는데,

    구글 코드검색으로 Flicking에 대해 찾아보는 중, 우연히 찾아온 이 블로그에서 이렇게 Flicking을 확인하게 되었습니다.

    우왕…정말 제가 너무나도 찾고 싶었던 바로 그 Flicking이 제 이상에 가장 가깝게 구현되어있어서 계속 스크롤을 돌리며 보는 중입니다.

    제가 한번 구현해보려 했던 flicking은 EnterFrame당 time이라는 변수를 점점 증가시킨 후,

    속력 = 거리/시간을 하여 나름대로 짜봤지만…

    일정시간 이상 같은 자리에 머무르면 시간을 리셋, 저의 짧은실력으로 끼워맞춘 숫자놀음에 억지로 억지로 숫자를 변경시켜서 억지스러운 flicking(헉 이렇게 적으니 왠지 욕같이 ㅎㄷㄷ) 기능을 만들다보니 조금 우습더라구요. ㅠㅠ

    사실 구현도 다 못했습니다.

    너무 깔끔하고 자연스러운 Flicking기능에 대해 약간의 힌트만이라도 알려주실수 있으실까…해서 이렇게 리플을 남기게 되었습니다.

    오메;

    사실 제 수준이 미흡하여 이해할 수 없을진 모르겠지만, 혹시나 제 질문에 대한 답변이 달린다면 어떤 답이 달려도 답해주신 정성에 더욱 열심히 만들어보려 노력해보겠습니다.

    그럼 오늘 하루도 좋은 하루 되시길 바랍니다!

    1. 안녕하세요. 플리킹이 간단한 것 같으면서도 어려운 녀석이더라고요 ^^
      개념적인 부분을 설명드리도록 할게요. 속도 구하는 것을 거리/시간 방식이 아니라, 그냥 거리만 구하는 방식을 사용했습니다.
      1. MouseDown 이벤트에 배열을 초기화합니다.
      2. MouseMove 이벤트 마다 이동한 거리를 배열에 푸시하여 넣습니다. 이때 배열의 길이를 일정수준(저의 경우는 4)으로 유지하여 쓸데없이 배열의 길이가 늘어나지 않도록 합니다.
      3. MouseUp 이벤트에 배열의 값으로 평균 속도를 구합니다.
      4. EnterFrame 이벤트 시에 이 속도만큼 이동을 하면서, 점점 속도를 줄여줍니다.
      기본 원리는 이상과 같습니다만, 제대로 만들려면 약간의 살은 더 붙여 주어야 할 겁니다. 어느정도 코드가 완성되면 공개하려고 만들던 거였는데, 요즘에 시간이 별로 없어서 계속 미루고 있네요. 시간 날때 정리해서 공개 할 생각입니다. 그럼 꼭 성공하세요 ^^

    2. 참, 빼먹은 내용이 있네요.
      MouseMove 이벤트 마다 타이머를 리셋해 주어서, 일정시간 동안 마우스가 움직이지 않으면 배열을 초기화 해 주어야 합니다. 그래야 마우스가 일정시간 멈춘 상태에서 릴리즈 했을 때 오동작을 막을 수 있습니다.

      1. 헙 ㅠㅠ 너무 감사합니다.

        제가 시간을 추가시켜 구현했을때 문제는 과연 몇초동안 마우스가 가만히 있어야 시간이 초기화 되어야 하는가,

        그리고 그 시간값은 얼마를 해야 하는가 (flash의 fps를 60으로 준 뒤, 1프레임당 1/60 time씩 증가시켜 현실감이 최대한 있게끔 했지만 너무 빨라서 결국 마지막에 1/10을 줬지만…결정적으로 뭔가 부자연스럽다는 느낌이 계속 들어 슬퍼했었습니다.

        전 사실 바쁘신데 답변해주시기 힘들지 않을까, 라는 생각도 했는데 이렇게까지 적어주셔서 감사합니다.

        그럼 저도 즐겁게 만들겠습니다!

        오늘도 좋은 하루 가득하시길 ㅎㅎ!

  2. 안녕하세요!! 저번에 적었던 리플이 그대로 있어서 다시금 소개할 필요는 없는 김찬엽입니다.

    으허 ㅎ

    오늘, 그러니까 3월 29일 10시 15분에 (ㅋㅋ) 드디어 Flicking기능을 구현하여 만들었습니다 ㅠㅠ

    몇일간 고민했었던, 해당되는 객체의 (object?) 범위가 판때기(stage)의 범위를 벗어날때 처리를 어떻게 해야 하나 정말 고민을 많이 했었는데,

    오늘 드디어 고민을 끝내고 만들게 되었습니다.

    사실 이게 프로젝트에 쓴다! 하는 엄포장과 함께 저에게 굉장히 무거웠었지만, 어느순간 ‘어? 그거 안쓰려고 했던거 말 안해줬었나??’하면서 하시길래 그냥 시간 짬내서 짬짬히 만들었습니다.

    이거…도움받아 만들었는데, 만들어진 결과물을 보여드려야 예의가 아닌가 싶었습니다만, 파일을 올리거나 하는 곳이 없네요. ㅎㅎ

    여하튼, 이제 flicking기능 안에 mc를 java에 데이터를 받아서 서로 데이터 통신을 하는 부분은 금방 만들 수 있으니 ㅠㅠ

    큰 맥락을 잡아주셔서 너무 감사합니다. (전 F.A카페에서 한상훈!이라는 이름의 포스에 눌려서 감히 여쭤볼 생각도 못하다가 너무 친절한 답변 주셔서 폭풍감동 ㅠㅠ)

    회사내에 필요는 하나 할줄아는 사람은 없으니 니가 해라, 라는 말에 아무것도 모르는 맨땅에 해딩하여,

    지금도 너무 아쉬운건 제가 할줄아는 코딩은 timeline 1에 줄코딩밖에 없어,

    as파일을 만들어보고 싶은데, 너무 큰 벽에 가로막혀 진입을 못하겠습니다.

    저번에 적어주신 글 보고 (as파일을 뽑아 객체지향적 구조로 작업하시는 외국회사들의 실태와 우리나라의 플래시 작업 현황) 충격좀 받았었는데,

    더 열심히 하겠습니다. 감사합니다!!!

    ㅎㅎ 오늘도 좋은하루 가득하시길~!

    1. 무사히 마무리가 되었다니 다행이네요. 덧글에는 파일 첨부하는 부분이 없기 때문에, 나중에 적용한 프로젝트가 오픈하면 링크라도 올려 주시면 될 것 같네요 ^^

      객체지향으로 작업하면 좋기는 하지만, 저도 아직 제대로 객체지향적 개발을 하는 것은 아니라서 ㅎㅎ
      안해보면 어렵게 보이지만 막상 한 번 해보면 별거 아니란걸 느끼실 거에요. 일단 클래스 하나에 모든 기능을 때려 넣는 막코딩이라도 시작을 하면, 결국 필요에 의해서 점점 객체지향에 가까워져 가게 되니, 그냥 질러 버리면 됩니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다