[Flash Action Script/플래시 액션 스크립트] ImageViewer or Gallery ( 이미지 뷰어 or 갤러리 )

소개

Flash 의 ActionScript 2 ( 2.0 ) 을 이용해서 만든 ImageViewer 입니다.
ImageViewer 는 Android의 Gallery 와 비슷하다고 보면 되겠습니다.

현재 설정은 한 페이지당 8개 그림의 Thumbnail 을 보여주도록 되어 있습니다.
Thumbnail page (미리보기 페이지) 의 기본 기능은 이전 페이지로 이동 ( 버튼 ), 다음 페이지로 이동( 버튼 ), Thumbnail Click 시 큰 이미지로 보기 기능이 있습니다.
첫 페이지에서 이전 페이지 버튼은 disable (클릭할 수 없음) 처리되어 있고, 마찬가지로 마지막 페이지에서는 다음 페이지 버튼이 disable ( 클릭할 수 없음 ) 처리가 되어 있습니다.
총 페이지와 현재 페이지가 가운데에 표시되어 있습니다.
Thumbnail 을 클릭하면 해당 이미지를 크게 볼 수 있습니다. ( One image view mode )

코드에 주석이 있는데, 페이지 내에 표시할 thumbnail 수를 수정하면 8개가 아니라 다른 갯수로도 thumbnail 배치를
할 수 있습니다.

단일 이미지 ( one image ) view mode 에서의 기능도 비슷합니다.
이전 이미지 버튼과 다음 이미지 버튼이 있으며, 처음과 마지막 페이지에서 disable 됩니다.
가운데에는 이미지 이름이 표시되어 있습니다.
단일 이미지에서 이미지를 클릭하면 다시 thumbnail mode ( 미리보기 mode ) 로 돌아가는데,
현재 보던 이미지를 표시하기 위해서 포커스가 표시됩니다.

현재는 이미지를 flash 쪽에 미리 load 하고 표시해주는 기능을 하고 있지만,
코딩을 조금만 보태면 컴퓨터 내의 모든 폴더에 있는 이미지들을 로드할 수도 있습니다.

Actionscript 코드에 주석이 달려 있고, 변수이름이나, 함수이름을 명확하게 표시하여
수정이 쉬울 것으로 생각됩니다.

컴파일 실행환경

Adobe Flash

본문내용

Flash 의 ActionScript 2 ( 2.0 ) 을 이용해서 만든 ImageViewer 입니다.
ImageViewer 는 Android의 Gallery 와 비슷하다고 보면 되겠습니다.

현재 설정은 한 페이지당 8개 그림의 Thumbnail 을 보여주도록 되어 있습니다.
Thumbnail page (미리보기 페이지) 의 기본 기능은 이전 페이지로 이동 ( 버튼 ), 다음 페이지로 이동( 버튼 ), Thumbnail Click 시 큰 이미지로 보기 기능이 있습니다.
첫 페이지에서 이전 페이지 버튼은 disable (클릭할 수 없음) 처리되어 있고, 마찬가지로 마지막 페이지에서는 다음 페이지 버튼이 disable ( 클릭할 수 없음 ) 처리가 되어 있습니다.
총 페이지와 현재 페이지가 가운데에 표시되어 있습니다.
Thumbnail 을 클릭하면 해당 이미지를 크게 볼 수 있습니다. ( One image view mode )

코드에 주석이 있는데, 페이지 내에 표시할 thumbnail 수를 수정하면 8개가 아니라 다른 갯수로도 thumbnail 배치를
할 수 있습니다.

단일 이미지 ( one image ) view mode 에서의 기능도 비슷합니다.
이전 이미지 버튼과 다음 이미지 버튼이 있으며, 처음과 마지막 페이지에서 disable 됩니다.
가운데에는 이미지 이름이 표시되어 있습니다.
단일 이미지에서 이미지를 클릭하면 다시 thumbnail mode ( 미리보기 mode ) 로 돌아가는데,
현재 보던 이미지를 표시하기 위해서 포커스가 표시됩니다.

현재는 이미지를 flash 쪽에 미리 load 하고 표시해주는 기능을 하고 있지만,
코딩을 조금만 보태면 컴퓨터 내의 모든 폴더에 있는 이미지들을 로드할 수도 있습니다.

Actionscript 코드에 주석이 달려 있고, 변수이름이나, 함수이름을 명확하게 표시하여
수정이 쉬울 것으로 생각됩니다.

[스크린샷 설명]
좌상단 : 초기페이지입니다. Thumbnail ( 미리보기 ) 이미지들이 8장 기본으로 load 되어 있습니다.
하단에 이전 페이지, 다음 페이지 버튼이 있고, 첫 페이지이기 때문에 이전 페이지 버튼이
disable 되어 있습니다. 가운데에는 총 5장 페이지 중 첫번째 페이지를 보고 있다고 표시하고 있습니다.
버튼모양도 원하면 쉽게 바꿀 수 있습니다.

우상단 : 세번째 페이지로 이동한 모습입니다. 이전페이지로 가기 버튼이 enable 되어 있고, 다른 그림이 표시됩니다.

좌중단 : Thumbnail ( 미리보기 ) 에서 이미지 한 장을 클릭한 경우입니다.
해당 그림을 크게 볼 수 있고, 가운데에는 이미지 이름이 적혀 있습니다.
One Image view mode 에서도 이전 그림, 다음 그림 기능을 사용할 수 있습니다.

우중단 : One image view mode 에서 이미지를 클릭하면, 마지막에 봤던 그림이 무엇인지 표시하기 위해
Focus 를 추가하였습니다. 마지막으로 본 image 는 애플 그림이라는 것을 focus 로 알 수 있습니다.

좌하단 : 마지막 페이지입니다. 여기서도 마지막 그림을 봤다는 것을 Focus 로 알 수 있습니다.
다음 페이지 버튼은 disable 되어 있습니다.

우하단 : 큰 그림은 사이즈에 맞도록 축소되어 나옵니다. ( 실제 이미지는 크지만, 설정된 이미지 크기에 맞게 fit 됨 )

참고자료

· 없음