<table bgcolor=#efefef width=600><tr><td> </td><td align=right><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="60" height="30"><param name="movie" value="http://www.hompydesign.com/club/blogzoom.swf"/><param name="wmode" value="opaque" /><param name="allowScriptAccess" value="always" /><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogzoom.swf width=60 height=30 type=application/x-shockwave-flash quality="high" allowScriptAccess=always /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="90" height="30"><param name="movie" value="http://www.hompydesign.com/club/translate.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/531"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/translate.swf width=90 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/531" /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="360" height="30"><param name="movie" value="http://www.hompydesign.com/club/bookmark.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/531&title=훌륭한 무료 소프트웨어로 내 PC를 토핑해볼까?"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/bookmark.swf width=360 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/531&title=훌륭한 무료 소프트웨어로 내 PC를 토핑해볼까?" /></object></td></tr></table> 무료라지만 유료로 써도 아깝지 않을 만큼 잘 만든 프리웨어 소프트웨어들이 생각보다 많고 이런 소프트웨어들만 가지고 내 PC를 토핑해도 불편하지 않을 정도입니다. 물론 새로운 소프트웨어의 사용법을 익히고 내 것으로 만드는 데 시간이 필요하긴 합니다. 무료 소프트웨어만으로 내 PC를 꾸미고 불편함 없이 PC를 사용하는 것이 가능할까요? 도전해 볼 만한 일입니다. 프리웨어 소프트웨어 중에는 소스 코드 또한 오픈 되어 있어 소프트웨어 개발에 관련된 분들에게 유익한 학습 자료가 될 수 있습니다.
아래 나열한 프리웨어 소프트웨어 리스트는 프로그램 이름, 홈페이지 주소, 프로그램 다운로드 링크 순으로 배치 되었습니다.

GIMP - 사진보정/이미지 저작툴
   http://www.gimp.org/
   http://downloads.sourceforge.net/gimp-win/gimp-2.6.2-i686-setup.exe
3D Box Shot Maker - 소프트웨어 상자 표지 디자인툴
   http://www.bosseye.com/boxshot/
   http://www.bosseye.com/dlfree/boxshot_setup.exe
7-Zip - 압축률이 높은 파일 압축 관리툴
   http://www.7-zip.org/
   http://downloads.sourceforge.net/sevenzip/7z457.exe
바닥 - 동영상 변환 유틸리티
   http://www.kipple.pe.kr/doc/badak/
   http://www.kipple.pe.kr/doc/badak/badak20081013.exe
빵집 - 국산 무료 파일 압축 관리툴
   http://www.bkyang.com/
   http://www.bkyang.com/download/bz3setup.exe
칼무리 - 국산 화면,웹페이지 캡쳐툴
   http://kalmuri.kilho.net/
   http://www.kilho.net/bbs/download.php?bo_table=temppds&wr_id=270&KaMuRi.exe
AbiWord - 워드 프로세서, 문서 편집툴
   http://www.abisource.com/
   http://www.abisource.com/download/
Alch Icon Suite - 윈도우즈 아이콘 추출, 편집툴
   http://alch.info
   http://www.brothersoft.com/alch-icon-suite-download-94853.html
AmitySource Userbar Generator - 가로형 막대 배너 제작툴
   http://www.amitysource.com/userbar_maker.php
   http://www.amitysource.com/distfiles/UBarGen2.2_en.exe
AnimPixels - 픽셀/비트맵 애니메이션 제작툴
   http://www.animpixels.com/
   http://www.animpixels.com/download.html
Aptana - 웹개발툴 IDE
   http://www.aptana.com/
   http://www.aptana.com/studio/download
Aqua Data Studio - 데이타베이스 관리툴 IDE
   http://www.aquafold.com/
   http://www.aquafold.com/downloads.html
Audacity - 사운드 녹음, 믹싱, 편집의 종합툴
   http://audacity.sourceforge.net/
   http://audacity.sourceforge.net/download/windows
Blender - 3D 애니매니션 툴
   http://www.blender.org/
   http://www.blender.org/download/get-blender/
   http://download.blender.org/release/Blender2.48a/blender-2.48a-windows.exe
CamStudio - 동영상 캡쳐 툴
   http://camstudio.org/
   http://www.camstudio.org/CamStudio20.exe
Code::Blocks - C++ 개발 툴 IDE
   http://www.codeblocks.org/
   http://www.codeblocks.org/downloads
Color Cop - 색상 추출 툴
   http://www.colorcop.net/
   http://www.colorcop.net/download
   http://www.colorcop.net/re/?download_colorcop
ColorPic - 색상 추출 툴
   http://iconico.com/colorpic/
   http://iconico.com/download.aspx?app=ColorPic
CPU-Z - PC 시스템 정보 조회 툴
   http://www.cpuid.com/cpuz.php
   http://www.cpuid.com/download/cpuz_148.zip
CutePDF Writer - 문서를 PDF 파일로 출력 및 변환 해주는 툴
   http://www.cutepdf.com/Products/CutePDF/writer.asp
   http://www.cutepdf.com/download/CuteWriter.exe
Cygwin - 윈도우즈에서 유닉스 환경 시뮬레이션 해주는 툴
   http://www.cygwin.com/
   http://www.cygwin.com/setup.exe
Digital Image Tool - 이미지 관리 및 변환 툴
   http://www.digitalimagetool.com/
   http://www.digitalimagetool.com/tank/digitalimagetoolinstaller1.3.exe
DrawPlus - 벡터 그래픽 애니메이션 제작 툴
   http://www.freeserifsoftware.com/software/DrawPlus/
   http://www.freeserifsoftware.com/commence-download.asp?CommenceDownload=drawplus&navproduct=drawplus&Check=True
DTaskManager - 윈도우즈 작업 관리자
   http://dimio.altervista.org/eng/
   http://dimio.altervista.org/stats/download.php?id=4
Easy Thumbnails - 이미지 섬네일 제작 및 변환 툴
   http://www.fookes.com/ezthumbs/
   http://www.fookes.com/ftp/free/EzThmb_Setup.exe
Eclipse - 통합 개발 환경 IDE
   http://www.eclipse.org/
   http://www.eclipse.org/downloads/
eMule - P2P 파일 공유 툴
   http://www.emule-project.net/
   http://www.emule-project.net/home/perl/general.cgi?l=1&rm=download
FastStone Image Viewer - 이미지 뷰어
   http://www.faststone.org/FSViewerDetail.htm
   http://www.faststone.org/FSViewerDownload.htm
FastStone Photo Resizer - 이미지 변환 툴
   http://www.faststone.org/FSResizerDetail.htm
   http://www.faststone.org/FSResizerDownload.htm
   http://www.faststone.org/DN/FSResizerSetup27.exe
Fedora - 리눅스 배포판
   http://fedoraproject.org/
   http://fedoraproject.org/en/get-fedora
Filezilla - 파일 FTP 전송 툴
   http://sourceforge.net/projects/filezilla/
   http://sourceforge.net/project/showfiles.php?group_id=21558
Firefox - 웹브라우져
   http://www.mozilla.or.kr/ko/products/firefox/
Flash Slide Show Maker Professional - 플래시 앨범을 슬라이드 쇼로 만들어주는 툴
   http://www.flash-slideshow-maker.com/
   http://www.flash-slideshow-maker.com/setup_flash_slideshow_maker.exe
FontHit Font Tools - 윈도우즈 글꼴/폰트 관리 툴
   http://www.download.com/FontHit-Font-Tools/3000-2316_4-10332216.html
   http://downloads.zdnet.com/abstract.aspx?docid=204056
FontInfo - 윈도우즈 글꼴/폰트 관리 툴
   http://www.xlmsoft.de/fontinfo.php
   http://www.xlmsoft.de/download/fisetup.exe
FontRenamer - 폰트에 사용된 이름들을 변경해주는 툴
   http://www.neuber.com/free/fontrenamer/
   http://www.webattack.com/dlnow/rdir.dll?id=105070
Foobar2000 - 음악/사운드 재생 툴
   http://www.foobar2000.org/
   http://www.foobar2000.org/?page=Download
FreeCommander - 윈도 탐색기 대체용 파일관리 툴
   http://www.freecommander.com/
   http://www.freecommander.com/fc_downl_en.htm
FreeMind - 무료 마인트맵 소프트웨어
   http://freemind.sourceforge.net/
   http://freemind.sourceforge.net/wiki/index.php/Download
Gadwin PrintScreen - 화면 캡쳐 툴
   http://www.gadwin.com/printscreen/
   http://www.gadwin.com/download/
GIMPShop - GIMP 를 포토샵 처럼 꾸며주는 툴
   http://thegimpshop.net/
   http://www.computerdefense.org/gimpshop/gimpshop_2.2.8_fix1_setup.exe
Google Chrome - 구글 웹브라우져
   http://www.google.com/chrome/
   http://www.google.com/chrome/eula.html
Google Docs - MS 오피스를 대체할 수 있는 구글 오피스 서비스
   http://docs.google.com/
Google Talk - 구글 메신져
   http://www.google.com/talk/intl/ko/
Handbrake - 강력한 DVD 리핑툴
   http://handbrake.fr/
   http://handbrake.fr/?article=download
HoverIP - 네트워크 IP 관리 툴
   http://www.hoverdesk.net/freeware.htm
   http://www.hoverdesk.net/dl/en/HoverIP.zip
ImageDiff - 픽셀단위의 이미지 비교 툴
   http://www.ionforge.com/products/
   http://www.ionforge.com/products/imagediff/imagediff.zip
ImageMagick - 명령어 방식으로 사용하는 그래픽 툴
   http://www.imagemagick.org/script/
   http://www.imagemagick.org/script/download.php
Inkscape - 일러스트레이터와 유사한 벡터 그래픽 편집기
   http://www.inkscape.org/
   http://downloads.sourceforge.net/inkscape/Inkscape-0.46.win32.exe
InsightPoint - 벡터 그래픽 편집기
   http://www.icytec.com/
   http://www.icytec.com/insightpoint/download/insightpoint-3.2.5.2-win.exe
IOBit Smart Defrag - 하드디스크의 조각모음 최적화 툴
   http://www.iobit.com/iobitsmartdefrag.html
   http://www.download.com/Smart-Defrag/3000-2094-10759533.html?part=dl-SmartDefr&subj=uo&tag=button
IrfanView - 이미지 뷰어 및 사운드, 동영상 재생기
   http://www.irfanview.com/
   http://www.irfanview.com/main_download_engl.htm
Jahshanka - 디자인 환경 통합 관리 툴
   http://jahshaka.org/
   http://jahshaka.org/Downloads
jEdit - 오픈소스 텍스트 에디터
   http://www.jedit.org/
   http://www.jedit.org/index.php?page=download
JR Screen Ruler - 윈도우즈 화면 길이/높이 측정 툴
   http://www.spadixbd.com/freetools/jruler.htm
   http://www.convertjunction.com/download/jruler.zip
Juice - 음악 재생 툴
   http://juicereceiver.sourceforge.net/
   http://prdownloads.sourceforge.net/juicereceiver/Juice22Setup.exe?download
KompoZer - 홈페이지 제작 공개 웹에디터
   http://kompozer.net/
   http://kompozer.net/download.php
LiveSwif Lite - 플래시 애니메이션 제작 툴
   http://www.download.com/LiveSwif-Lite/3000-6676_4-10276527.html
   http://www.zdnet.com.au/downloads/0,139024478,10276528s,00.htm
LOOXIS Faceworx - 2차원 사진을 이용해 3차원 얼굴 사진을 제작 하는 툴
   http://www.looxis.com/
   http://www.looxis.com/en/k75.Downloads_Bits-and-Bytes-to-download.htm
   http://www.looxis.com/download/LOOXIS_Faceworx_v1.exe
LS Screen Capture - 화면 캡쳐 툴
   http://www.linos-software.com/capture.html
   http://www.linos-software.com/FileDownload/SetupCapture.msi
Magnifier - 데스크탑 돋보기 화면 확대, 부분 캡쳐 툴
   http://iconico.com/magnifier/
   http://iconico.com/download.aspx?app=Magnifier
Media Coder - 오디오 및 비디오 일괄 변환 툴
   http://mediacoder.sourceforge.net/
   http://mediacoder.sourceforge.net/download.htm
Media Player Classic - 동영상 재생 툴
   http://sourceforge.net/projects/guliverkli/
   http://sourceforge.net/project/showfiles.php?group_id=82303
MPlayer - 동영상 재생 툴
   http://www.mplayerhq.hu/
   http://www.mplayerhq.hu/MPlayer/releases/win32/MPlayer-1.0rc2-gui.zip
NetBeans - 자바 통합 개발 환경 IDE
   http://www.netbeans.org/
   http://www.netbeans.org/downloads/index.html
Notepad++ - 프로그래밍 소스 편집기
   http://notepad-plus.sourceforge.net/
   http://notepad-plus.sourceforge.net/uk/download.php
Notepad2 - 텍스트 편집기
   http://www.flos-freeware.ch/notepad2.html
   http://www.flos-freeware.ch/zip/notepad2.zip
nPOP - POP3 이메일 클라이언트 툴
   http://www.nakka.com/soft/npop/index_eng.html
   http://www.nakka.com/soft/npop/download/npop109win32_EN.zip
ntop - 네트워크 모니터링 툴
   http://www.ntop.org/
   http://www.ntop.org/download.html
Open Capture - 화면 캡쳐 툴
   http://openproject.nazzim.net/opencapture.htm
   http://openproject.nazzim.net/download/opencapture_v1.3.5.exe
OpenOffice.org - MS 오피스 대체할 수 있는 오픈 오피스 툴
   http://www.openoffice.org/
   http://openoffice.or.kr/main/page.php?id=download
   ftp://ftp.daum.net/openoffice/localized/ko/3.0.0/OOo_3.0.0_Win32Intel_install_ko.exe
openSUSE - 노벨의 리눅스 배포판
   http://www.opensuse.org/en/
   http://software.opensuse.org/
Opera - 웹브라우져
   http://www.opera.com/
   http://www.opera.com/download/get.pl?id=31867&thanks=true&sub=true
Paint.NET - 그래픽 편집 툴
   http://www.getpaint.net/
   http://www.dotpdn.com/files/Paint.NET.3.36.zip
   http://fileforum.betanews.com/download/PaintNET/1096481993/1
ParticleDraw - 추상적인 이미지를 그려주는 툴
   http://www.anandavala.info/TASTMOTNOR/code/v5.1/ParticleDraw/SMNPD5_1.html
   http://www.anandavala.info/TASTMOTNOR/code/v5.1/ParticleDraw/SMN_v5.1_ParticleDraw.zip
PC Wizard - 하드웨어, 시스템 정보 제공 툴
   http://www.cpuid.com/pcwizard.php
   http://www.cpuid.com/download/pcw2008_v187.exe
photoWORKS - 디지털 이미지 수정 툴
   http://andojung.com/photoWORKS/
Picasa - 이미지 관리 툴
   http://picasa.google.com/
   http://picasa.google.com/picasa_thanks.html
PicPick - 캡쳐, 눈금자, 각도기, 색상추출 그래픽 툴
   http://picpick.wiziple.net/
   http://picpick.wiziple.net/features
Pidgin - 인스턴트 메신저
   http://www.pidgin.im/
   http://www.pidgin.im/download/
PrimoPDF - 인쇄물을 PDF 파일로 변환 해주는 툴
   http://www.primopdf.com/
   http://www.download.com/PrimoPDF/3000-10743_4-10264577.html?part=dl-10264577&subj=dl&tag=button
Project Dogwaffle - 애니메이션 제작이 가능한 그래픽 툴
   http://www.thebest3d.com/dogwaffle/free/
   http://www.thebest3d.com/dogwaffle/free/Dogwaffle_Install_1_2_free.exe
PuTTY - 텔넷/SSH 접속 툴
   http://www.chiark.greenend.org.uk/~sgtatham/putty/
   http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html
Safari - 애플 웹브라우져
   http://www.apple.com/kr/safari/
   http://www.apple.com/kr/safari/download/
ScreenHunter - 화면 캡쳐 툴
   http://wisdom-soft.com/products/screenhunter_free.htm
   http://www.wisdom-soft.com/downloads/setupscreenhunterfree.exe
SharpDevelop - C#, VB.NET, Boo 프로젝트를 위한 개발 툴 IDE
   http://www.sharpdevelop.net/OpenSource/SD/
   http://www.sharpdevelop.net/OpenSource/SD/Download/
SketchUp - 3D 그래픽툴
   http://sketchup.google.com/
   http://sketchup.google.com/download/
SmoothDraw NX - freehand 드로잉/스케치 그래픽 툴
   http://www.smoothdraw.com/product/freeware.htm
   http://www.smoothdraw.com/sdnx/SmoothDrawNXSetup.exe
Sothink SWF Catcher - 플래시 파일 추출/저장 툴
   http://www.sothink.com/product/swfcatcher/ie/
   http://www2.sothink.com/download/swfcatcher_IE.zip
SPRAY vector generator - Vector sceleton creation tool, 이미지 제작 툴
   http://xaraxtv.at.tut.by/
   http://www.download.com/3001-2191_4-10623896.html
Spread32 - 스프레드시트
   http://www.byedesign.co.uk/
   http://www.byedesign.co.uk/s32/spre32en.zip
SQLTools - 오라클 관리 툴
   http://www.sqltools.net/
   http://www.sqltools.net/downloads.html
SQLTools for ORACLE - 오라클 관리 툴
   http://heiya.webice.kr/
   http://heiya.webice.kr/PDS/SQLTools.zip
SQuirreL SQL Client - 자바 기반 데이타베이스 관리 툴
   http://www.squirrelsql.org/
   http://www.squirrelsql.org/#installation
Starter - 시작 프로그램, 프로세서, 서비스 관리 툴
   http://codestuff.tripod.com/products_starter.html
   http://codestuff.tripod.com/Starter_English.zip
Stickies - 포스트잇, 윈도우즈 메모장 툴
   http://www.zhornsoftware.co.uk/stickies/
   http://www.zhornsoftware.co.uk/stickies/download.html
Synfig Studio - 2D 애니메이션 툴
   http://www.synfig.com/
   http://www.synfig.com/download/
Tail for Win32 - 로그 파일 모니터링 툴
   http://tailforwin32.sourceforge.net/
   http://sourceforge.net/projects/tailforwin32
Terragen - 지형 제작 툴
   http://www.planetside.co.uk/terragen/
   http://www.planetside.co.uk/terragen/win/downloadwin.shtml
The Font Thing - 윈도우즈 트루타입 폰트 관리 툴
   http://members.ozemail.com.au/~scef/tft.html
   http://members.ozemail.com.au/~scef/tft/tftdownloadmain.html
The KMPlayer - 동영상 재생 툴
   http://www.kmplayer.com/
   http://www.kmplayer.com/forums/showthread.php?t=4094
Thunderbird - 이메일 클라이언트 프로그램
   http://www.mozilla.com/en-US/thunderbird/
   http://www.mozilla.com/products/download.html?product=thunderbird-2.0.0.18&os=win&lang=ko
Tomahawk PDF+ - PDF 파일 생성 툴
   http://www.nativewinds.montana.com/software/tpdfplus.html
   http://www.nativewinds.montana.com/downloads/TPDFPlus.zip
TortoiseSVN - SVN 클라이언트 툴
   http://tortoisesvn.tigris.org/
   http://tortoisesvn.net/downloads
TouchArt Sampler - 3D 아트워크 조절 및 실행 툴
   http://www.derivativeinc.com/TouchArt/TouchArtSampler.asp
   http://www.derivativeinc.com/Temp/TouchArtSampler017.exe
Ubuntu - 리눅스 배포판
   http://www.ubuntu.com/
   http://www.ubuntu.com/getubuntu/download
uMark Lite - 워터마크 삽입 툴
   http://www.uconomix.com/Products/uMark/
   http://www.uconomix.com/Downloads.aspx
UnFREEz - 실행창 닫기, 컴퓨터 종료 툴
   http://www.whitsoftdev.com/unfreez/
   http://www.whitsoftdev.com/files/unfreez.zip
uTorrent - P2P 파일 공유 툴
   http://www.utorrent.com/
   http://www.utorrent.com/download.php
VirtualDub - 동영상 편집 및 형식 변환 툴
   http://www.virtualdub.org/
   http://virtualdub.sourceforge.net/
VirtuaWin - 윈도우즈 가상 데스크탑 관리 툴
   http://virtuawin.sourceforge.net/
   http://virtuawin.sourceforge.net/downloads.php
VLC Media Player - 동영상 재생 툴
   http://www.videolan.org/vlc/
   http://www.videolan.org/vlc/download-windows.html
Winamp - 음악 파일 재생 툴
   http://www.winamp.com/
   http://www.winamp.com/player
WinTail - 로그 파일 모니터링 툴
   http://www.baremetalsoft.com/wintail/
   http://www.baremetalsoft.com/wintail/download.php?p=p
X-Chat - IRC 채팅 툴
   http://silverex.info/
   http://silverex.info/download/
Xnews - 뉴스리더 툴
   http://xnews.newsguy.com/
   http://xnews.newsguy.com/#download
XnView - 이미지 관리 툴
   http://pagesperso-orange.fr/pierre.g/xnview/enxnview.html
   http://pagesperso-orange.fr/pierre.g/xnview/endownload.html

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info

<table bgcolor=#efefef width=600><tr><td> </td><td align=right><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="60" height="30"><param name="movie" value="http://www.hompydesign.com/club/blogzoom.swf"/><param name="wmode" value="opaque" /><param name="allowScriptAccess" value="always" /><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogzoom.swf width=60 height=30 type=application/x-shockwave-flash quality="high" allowScriptAccess=always /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="90" height="30"><param name="movie" value="http://www.hompydesign.com/club/translate.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/518"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/translate.swf width=90 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/518" /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="360" height="30"><param name="movie" value="http://www.hompydesign.com/club/bookmark.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/518&title=자바스크립트 복수 게시물 더보기/접기(more/less) 소스"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/bookmark.swf width=360 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/518&title=자바스크립트 복수 게시물 더보기/접기(more/less) 소스" /></object></td></tr></table> 자바스크립트로 만든 더보기/접기(more/less)  소스입니다. 본 소스는 여러개의 게시물 중에 지정된 제한 높이 보다 긴 게시물만 더보기/접기 버튼을 일괄적으로 붙여주고 있습니다. 게시물 샘플 중에는 이미지가 포함된 것도 있고 플래시가 포함된 것도 있습니다. 구현 원리는 레이어 속성 중에 offsetHeight 속성으로 해당 레이어의 높이를 확인할 수 있고 이와 제한 높이를 비교해서 제한 높이 이외의 내용은 숨겨주고 바로 밑에 더보기 버튼을 붙여 주는 것입니다. 이는 서버 스크립트와 조합해서 블로그나 게시판에 적용해볼 수 있습니다. 이를 체험할 수 있는 하단에 제시된 HTML 소스의 실행화면은 아래 링크를 통해 확인할 수 있습니다. 자바스크립트 입문자 여러분들은 본 소스를 자신에 맞게 수정 개선해보시면 자바스크립트 학습에 도움이 될 것입니다.

[실행화면 확인 링크]
http://www.hompydesign.com/javascript/more/more_less.html

[더보기/접기 HTML 소스]
<HTML>
<HEAD>
<TITLE>More/Less TEST</TITLE>
<script type='text/javascript'>
<!--
var content_height = 112;
var content_idx_array = [1001,1002,1004,1005,1008];
var content_show_array = [];
var content_push_array = [];
for (i=0;i<content_idx_array.length;i++) {
    content_show_array[content_idx_array[i]] = 'div_show_' + content_idx_array[i];
    content_push_array[content_idx_array[i]] = 'div_push_' + content_idx_array[i];
}
function get_more_html(idx){
    return "<a href=\"javascript:print_more('"+idx+"')\">--- [더보기] ---</a>";
}
function get_less_html(idx){
    return "<a href=\"javascript:print_less('"+idx+"')\">--- [접기] ---</a>";
}
function print_less(idx){
    sobj = document.getElementById(content_show_array[idx]);
    pobj = document.getElementById(content_push_array[idx]);
    if (sobj) {
        sobj.style.height=content_height+'px';
        pobj.innerHTML = get_more_html(idx);
    }
}
function print_more(idx){
    sobj = document.getElementById(content_show_array[idx]);
    pobj = document.getElementById(content_push_array[idx]);
    if (sobj) {
        sobj.style.height='';
        pobj.innerHTML = get_less_html(idx);
    }
}
function init_more_less(){
    var i, max=content_idx_array.length;
    for (i=0;i<max;i++) {
        sobj = document.getElementById(content_show_array[content_idx_array[i]]);
        pobj = document.getElementById(content_push_array[content_idx_array[i]]);
        if (sobj && parseInt(sobj.offsetHeight)>content_height) {
            sobj.style.height=content_height+'px';
            pobj.innerHTML = get_more_html(content_idx_array[i]);
        }
    }
}
function onload_event(){
    init_more_less();
}
if (window.attachEvent) window.attachEvent('onload', onload_event);
else if (window.addEventListener) window.addEventListener('load', onload_event, false);
-->
</script>
<style>
div{margin:0; padding:0;}
body {font-family:Dotum, tahoma, sans-serif; font-size:12px;}
.my_title {font-weight:bold; margin-top:20px;}
.my_show {width:460px; overflow:hidden; word-wrap: break-word; word-break:break-all;}
.my_push {font-size:11px; margin-top:4px;}
a:link {color:blue; text-decoration:none; }
a:visited {color:blue; text-decoration:none;}
a:hover {color:blue; text-decoration:underline;}
</style>
</HEAD>
<BODY>
<div id="div_title_1001" class="my_title"><a href="http://hompy.info/517" target="_blank">위자드팩토리 위젯으로 블로그를 토핑해볼까?</a></div>
<div id="div_show_1001" class="my_show">
몇일전 위자드웍스에 의해 런칭한 위자드 팩토리에 있는 이쁜 위젯들로 블로그를 토핑해보면 어떨까요? 막 오픈한 서비스라서 선택할 수 있는 위젯의 폭이 아직은 좁은 편이나 좀더 쉽고 좀더 간편하게 사용할 수 있도록 구성한 유저 인터페이스와 아기자기한 디자인이 돋보입니다.<br>
<img src="http://hompy.info/attach/1/1182021495.jpg"><br>
유저가 직접 위젯을 제작할 수 있도록 이미 공개되었고 이번에 추가 버전업 된 오픈API도 제공하고 있으니 유저가 손수 만들어서 올릴 수 있습니다. 이렇게 만들어진 공개된 위젯은 위자드 팩토리에 의해 다양한 채널로 배포될 수 있습니다. 앞으로 퍼가고 싶은 다양하고 개성있는 위젯들이 얼마나 많이 진열될 것이냐에 따라 위젯공장의 역할을 할 수 있을지 여부가 결정될 것 같습니다. 위젯공장에 있는 눈에 띄는 시계,날씨,아기 위젯과 이번에 추천 블로그 선정으로 위젯공장에 등록된 제 블로그 RSS피드 위젯을 띄워봅니다.
</div>
<div id="div_push_1001" class="my_push"></div>

<div id="div_title_1001" class="my_title"><a href="http://hompy.info/516" target="_blank">뉴스 기사 소재, 블로깅 소스를 찾을 수 있는 뉴스와이어</a></div>
<div id="div_show_1002" class="my_show">
기자나 블로거들이 뉴스 기사 소재, 블로깅 소스를 찾을 수 있는 뉴스와이어라는 홈페이지가 있습니다. 2004년에 오픈한 이 서비스를 이용하는 기자분들이 많은 것으로 알고 있고 또한 기업이나 정부,기관,단체 입장에서 보면 홍보할 수 있는 채널로 활용될 수 있어 홍보나 마케팅에 관여하는 분들이 이 서비스를 많이 이용하고 있기도 합니다. 네이버 백과사전으로 검색해 보면 아래와 같은 소개가 나오는군요.
</div>
<div id="div_push_1002" class="my_push"></div>

<div id="div_title_1001" class="my_title"><a href="http://hompy.info/515" target="_blank">위젯 공유 서비스 위자드 팩토리 런칭 파티 후기</a></div>
<div id="div_show_1004" class="my_show">
저번에 위자드닷컴 추천 블로그로 선정되어 VIP(?) 초대장을 받고 어제 위젯 공유 서비스 위자드 팩토리 런칭 파티에 놀러 갔었습니다. 개인적으로 플래시 위젯 만드는 일이 취미이기도 하고 몇년 전 표철민 대표님과 메시지를 교환한 인연도 있었고 이번에 선정된 추천 블로거들도 만나볼려고 겸사겸사 퇴근하고 연세대 공학원에 마련된 행사장으로 직행했습니다. "1부, 위자드 팩토리 소개 및 시연회"에선 라면 이야기와 하루 2시간 자며 만들었다는 이야기가 인상적이었습니다. 위자드 웍스에 대한 자세한 회사 소개와 위자드 팩토리에 대한 간단한 소개를 들을 수 있었습니다. 1부는 식사 시간을 많이 늦출 수 없는 이유로 간소하게 진행된 것 같습니다. 위자드웍스가 어떤 일에 애정을 쏟고 있는 지 알 수 있게 되었고 앞으로 위젯 관련해서 어떤 일들이 벌어질 지 예측할 수 있는 시간이었습니다. "2부, 후원사들과 함께 하는 신나는 파티"에서는 깔끔한 식단의 뷔페식 식사 시간이 있었고 위젯을 내장한 흑맥주를 마시며 스텐딩 파티 형태의 참가자들 간 만남의 시간이 있었습니다. 예상 만큼 많은 블로거들과 인사를 나누지 못했고 위젯 관련해서 많은 정보를 교환하지 못해 아쉬운 부분이 있었습니다. 앞으로 또 다른 이름의 행사로 그 아쉬움을 채울 수 있는 기회가 만들어 질 것이라 기대하며 행사장을 빠져나왔습니다. 빠져나오는 중에 명찰을 반납하고 나니 "웹 패러다임을 바꾸는 위젯" 이라는 책이 포함된 선물을 한 보따리 주시더군요. 받은 선물을 들고 귀가 하느라 팔이 빠지는 줄 알았습니다.^^ 선물 감사했습니다.
위자드웍스 임직원 여러분들이 마련한 뜻 깊은 행사 즐거웠습니다. 앞으로 위자드웍스가 끊임없는 발전을 해서 위젯 업계의 부흥기를 이끌어갈 수 있기를 바라며 언제나 블로거들에게 사랑 받는 기업이 되주시길 바랍니다. 위하여!!!
</div>
<div id="div_push_1004" class="my_push"></div>

<div id="div_title_1001" class="my_title"><a href="http://hompy.info/514" target="_blank">전문직 직장인들이 함께하는 가을 축제가 있습니다.</a></div>
<div id="div_show_1005" class="my_show">
2008년 11월 1일에 전문직 직장인들과 함께하는 링크나우 가을 축제가 있습니다. 대학가요제 입상 경력이 있는 직장인 밴드와 가수들의 공연도 즐길 수 있고 노래와 춤 그리고 연주가 있는 직장인들의 장기자랑도 보며 즐거운 시간 가질 수 있게 될겁니다. 상품도 있다고 하니 장기자랑에 참여해보는 것도 좋겠지요. 더불어 부페 식사도 하고 맥주도 마시며 만남과 교류의 시간도 가질 수 있습니다. 행사명은 "링크나우 가을 페스티벌-음악과 만남의 밤"이고 최대 참석인원은 200명이군요. 행사 예약 페이지를 보시면 자세한 행사 내용과 어떤 분들이 참가하는 지 확인할 수 있습니다. 일정이 맞는 분들은 부담없이 참여해봐도 좋겠습니다.
</div>
<div id="div_push_1005" class="my_push"></div>

<div id="div_title_1001" class="my_title"><a href="http://hompy.info/513" target="_blank">플래시, 외부 파일 데이터 가져오기 통신 샘플 소스 #2</a></div>
<div id="div_show_1008" class="my_show">
플래시로 외부 파일 데이터를 가져오기 위한 웹서버와 통신하기 두번째 샘플 소스 코드입니다. 플래시 액션스크립트 초급자를 위해 학습용으로 부담없이 테스트할 수 있도록 만들었으므로 차근 차근 살펴 보시면 이해에 도움이 될 것이라 생각됩니다.<br>
<EMBED pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.hompydesign.com/club/blogchat.swf" width="190" height="200" type="application/x-shockwave-flash" quality="high" wmode="transparent"></EMBED><br>
아래 예제 처럼 LoadVars 객체를 이용해서 통신을 하는 것이 먼저 소개해드렸던 XML 객체를 이용하는 것 보다는 좀더 손쉽게 사용될 수 있습니다. 그러나 전달해야할 데이터가 복잡한 구조를 가질 경우 XML 객체를 이용하는 것 보다 혼란스러울 수 있으며 눈으로 손쉽게 데이터를 해석하기 어려울 수 있습니다. 아래 제공하는 샘플 소스 코드를 필요에 맞게 수정하고 개선해보면 어떻게 사용하는 것인지 이해하기 쉽습니다. 잘 익혀두었다가 사용자의 데이터를 등록하고 갱신하는 응용 프로그램 모양의 플래시를 만드는데 활용해보세요.
</div>
<div id="div_push_1008" class="my_push"></div>
</BODY>
</HTML>

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info

<table bgcolor=#efefef width=600><tr><td> </td><td align=right><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="60" height="30"><param name="movie" value="http://www.hompydesign.com/club/blogzoom.swf"/><param name="wmode" value="opaque" /><param name="allowScriptAccess" value="always" /><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogzoom.swf width=60 height=30 type=application/x-shockwave-flash quality="high" allowScriptAccess=always /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="90" height="30"><param name="movie" value="http://www.hompydesign.com/club/translate.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/513"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/translate.swf width=90 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/513" /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="360" height="30"><param name="movie" value="http://www.hompydesign.com/club/bookmark.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/513&title=플래시, 외부 파일 데이터 가져오기 통신 샘플 소스 #2"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/bookmark.swf width=360 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/513&title=플래시, 외부 파일 데이터 가져오기 통신 샘플 소스 #2" /></object></td></tr></table> 플래시로 외부 파일 데이터를 가져오기 위한 웹서버와 통신하기 두번째 샘플 소스 코드입니다. 플래시 액션스크립트 초급자를 위해 학습용으로 부담없이 테스트할 수 있도록 만들었으므로 차근 차근 살펴 보시면 이해에 도움이 될 것이라 생각됩니다. 아래 예제 처럼 LoadVars 객체를 이용해서 통신을 하는 것이 먼저 소개해드렸던 XML 객체를 이용하는 것 보다는 좀더 손쉽게 사용될 수 있습니다. 그러나 전달해야할 데이터가 복잡한 구조를 가질 경우 XML 객체를 이용하는 것 보다 혼란스러울 수 있으며 눈으로 손쉽게 데이터를 해석하기 어려울 수 있습니다. 아래 제공하는 샘플 소스 코드를 필요에 맞게 수정하고 개선해보면 어떻게 사용하는 것인지 이해하기 쉽습니다. 잘 익혀두었다가 사용자의 데이터를 등록하고 갱신하는 응용 프로그램 모양의 플래시를 만드는데 활용해보세요.

[product.txt]
title=system&attribute=name|price|total|date&product=desktop|380000|10|2008-10-01,monitor|270000|5|2008-10-04,printer|160000|2|2008-09-28,notebook|870000|15|2008-10-06,mouse|12000|20|2008-09-20

[product_txt.fla]
System.useCodepage = true;
var product_vars = new LoadVars();
product_vars.onLoad = function(success) {
    if (success) {
        var attribute_str = this.attribute;
        var product_str = this.product;
        var attribute_array = this.attribute.split('|');
        var tmp_array = product_str.split(',');
        var product_array = [tmp_array[0].split('|'), tmp_array[1].split('|'), tmp_array[2].split('|'), tmp_array[3].split('|'), tmp_array[4].split('|')];
        tf_textarea.text += '[text file tester]\n';
        tf_textarea.text += '01: ' + this.title + '\n';
        tf_textarea.text += '02: ' + this.attribute + '\n';
        tf_textarea.text += '03: ' + this.product + '\n';
        tf_textarea.text += '\n';
        tf_textarea.text += '04: ' + this.attribute.split('|')[0] + '\n';
        tf_textarea.text += '05: ' + this.attribute.split('|')[1] + '\n';
        tf_textarea.text += '06: ' + this.attribute.split('|')[2] + '\n';
        tf_textarea.text += '07: ' + this.attribute.split('|')[3] + '\n';
        tf_textarea.text += '\n';
        tf_textarea.text += '08: ' + this.product.split(',')[0] + '\n';
        tf_textarea.text += '09: ' + this.product.split(',')[1] + '\n';
        tf_textarea.text += '10: ' + this.product.split(',')[2] + '\n';
        tf_textarea.text += '11: ' + this.product.split(',')[3] + '\n';
        tf_textarea.text += '12: ' + this.product.split(',')[4] + '\n';
        tf_textarea.text += '\n';
        tf_textarea.text += '13: ' + this.product.split(',')[0].split('|')[0] + '\n';
        tf_textarea.text += '14: ' + this.product.split(',')[0].split('|')[1] + '\n';
        tf_textarea.text += '15: ' + this.product.split(',')[0].split('|')[2] + '\n';
        tf_textarea.text += '16: ' + this.product.split(',')[0].split('|')[3] + '\n';
        tf_textarea.text += '\n';
        tf_textarea.text += '17: ' + tmp_array[1].split('|')[0] + '\n';
        tf_textarea.text += '18: ' + tmp_array[1].split('|')[1] + '\n';
        tf_textarea.text += '19: ' + product_array[1][2] + '\n';
        tf_textarea.text += '20: ' + product_array[1][3] + '\n';
        tf_textarea.text += '\n';
        textarea += '21: ' + product_array[2][0] + '\n';
        textarea += '22: ' + product_array[2][1] + '\n';
        textarea += '\n';
        //trace(this.title);
    } else {
        //trace('error');
    }
}
product_vars.load("product.txt");

[product_txt.swf]



[product_txt.html]
<embed src="http://www.hompydesign.com/flash/sample/product_txt.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="520" height="420" base="http://www.hompydesign.com/flash/sample/"></embed>

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info

<table bgcolor=#efefef width=600><tr><td> </td><td align=right><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="60" height="30"><param name="movie" value="http://www.hompydesign.com/club/blogzoom.swf"/><param name="wmode" value="opaque" /><param name="allowScriptAccess" value="always" /><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogzoom.swf width=60 height=30 type=application/x-shockwave-flash quality="high" allowScriptAccess=always /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="90" height="30"><param name="movie" value="http://www.hompydesign.com/club/translate.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/512"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/translate.swf width=90 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/512" /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="360" height="30"><param name="movie" value="http://www.hompydesign.com/club/bookmark.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/512&title=플래시, 외부 파일 데이터 가져오기 통신 샘플 소스 #1"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/bookmark.swf width=360 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/512&title=플래시, 외부 파일 데이터 가져오기 통신 샘플 소스 #1" /></object></td></tr></table> 플래시로 외부 파일 데이터를 가져오기 위한 웹서버와 통신하기 샘플 소스 코드입니다. 플래시 액션스크립트 초급자를 위해 학습용으로 부담없이 테스트할 수 있도록 만들었으므로 차근 차근 살펴 보시면 이해에 도움이 될 것이라 생각됩니다. XML 로 규격화된 자료 파일을 플래시에서 읽을 수 있다는 것은 자료에 근거하여 어플리케이션 처럼 동작하는 동적 플래시를 만들 수 있는 장점이 있습니다. 플래시로 XML 객체를 어떻게 다루는지 잘 익혀두시고 차후에 쓸만한 플래시 만드는 일에 잘 활용해보세요.

[product.xml]
<?xml version="1.0" encoding="euc-kr" ?>
<product>
    <item>
        <name>desktop</name>
        <price>380000</price>
        <total>10</total>
        <date>2008-10-01</date>
    </item>
    <item>
        <name>monitor</name>
        <price>270000</price>
        <total>5</total>
        <date>2008-10-04</date>
    </item>
    <item>
        <name>printer</name>
        <price>160000</price>
        <total>2</total>
        <date>2008-09-28</date>
    </item>
    <item>
        <name>notebook</name>
        <price>870000</price>
        <total>15</total>
        <date>2008-10-06</date>
    </item>
    <item>
        <name>mouse</name>
        <price>12000</price>
        <total>20</total>
        <date>2008-09-20</date>
    </item>
</product>

[product_xml.fla]
System.useCodepage = true;
function product_loader() {
    var product_xml = this.firstChild.childNodes;
    var product_len = product_xml.length;
    var item_xml = product_xml[0].childNodes;
    var item_len = item_xml.length;
    var name_xml = item_xml[0].childNodes;
    var name_len = name_xml.length;
    tf_textarea.text += '[xml file tester]\n';
    tf_textarea.text += '01: ' + product_len + "\n";
    tf_textarea.text += '02: ' + product_xml + "\n";
    tf_textarea.text += '03: ' + item_len + "\n";
    tf_textarea.text += '04: ' + item_xml + "\n";
    tf_textarea.text += '05: ' + name_len + "\n";
    tf_textarea.text += '06: ' + name_xml + "\n";
    tf_textarea.text += '\n';
    tf_textarea.text += '07: ' + item_xml[0].nodeName + "\n";
    tf_textarea.text += '08: ' + item_xml[0].firstChild.nodeValue + "\n";
    tf_textarea.text += '07: ' + item_xml[1].nodeName + "\n";
    tf_textarea.text += '08: ' + item_xml[1].firstChild.nodeValue + "\n";
    tf_textarea.text += '09: ' + item_xml[2].nodeName + "\n";
    tf_textarea.text += '10: ' + item_xml[2].firstChild.nodeValue + "\n";
    tf_textarea.text += '11: ' + item_xml[3].nodeName + "\n";
    tf_textarea.text += '12: ' + item_xml[3].firstChild.nodeValue + "\n";
    tf_textarea.text += '\n';
    textarea += '13: ' + product_xml[3].childNodes[0].nodeName + "\n";
    textarea += '14: ' + product_xml[3].childNodes[0].firstChild.nodeValue + "\n";
    textarea += '15: ' + product_xml[3].childNodes[1].nodeName + "\n";
    textarea += '16: ' + product_xml[3].childNodes[1].firstChild.nodeValue + "\n";
    textarea += '17: ' + product_xml[3].childNodes[2].nodeName + "\n";
    textarea += '18: ' + product_xml[3].childNodes[2].firstChild.nodeValue + "\n";
    textarea += '19: ' + product_xml[3].childNodes[3].nodeName + "\n";
    textarea += '20: ' + product_xml[3].childNodes[3].firstChild.nodeValue + "\n";
    tf_textarea.text += '\n';
    textarea += '21: ' + product_xml[3].firstChild.nextSibling.nodeName + "\n";
    textarea += '22: ' + product_xml[3].firstChild.nextSibling.nextSibling.nodeName + "\n";
    /*
    trace('product len = ' + product_len);
    trace('product xml = ' + product_xml);
    trace('item len = ' + item_len);
    trace('item xml = ' + item_xml);
    trace('name len = ' + name_len);
    trace('name xml = ' + name_xml);
    */
}
my_xml = new XML();
my_xml.onLoad = product_loader;
my_xml.ignoreWhite = true;
my_xml.load("product.xml");

[product_xml.swf]
 

[product_xml.html]
<embed src="http://www.hompydesign.com/flash/sample/product_xml.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="520" height="420" base="http://www.hompydesign.com/flash/sample/"></embed>

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info

<table bgcolor=#efefef width=600><tr><td> </td><td align=right><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="60" height="30"><param name="movie" value="http://www.hompydesign.com/club/blogzoom.swf"/><param name="wmode" value="opaque" /><param name="allowScriptAccess" value="always" /><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogzoom.swf width=60 height=30 type=application/x-shockwave-flash quality="high" allowScriptAccess=always /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="90" height="30"><param name="movie" value="http://www.hompydesign.com/club/translate.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/510"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/translate.swf width=90 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/510" /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="360" height="30"><param name="movie" value="http://www.hompydesign.com/club/bookmark.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/510&title=막대 그래프 만들기, 플래시 차트 소스"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/bookmark.swf width=360 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/510&title=막대 그래프 만들기, 플래시 차트 소스" /></object></td></tr></table> 오늘 오후에 있을 플래시 스터디 과제인 막대 그래프 만들기에 대한 이해를 돕기 위해 간소화 시킨 플래시 차트 소스를 준비했습니다. 그래프 막대로 사용하기 위해 다섯 가지 색상의 무비클립을 만들었습니다. 차트에 적용할 데이터는 2차원 배열에 담았고 Tween 클래스를 활용해 막대 그래프에 활력을 불어 넣었습니다. 여러가지 Tween 클래스 효과를 실험하기 위해 onEnterFrame 이벤트를 이용해 5가지 다른 스타일을 일정한 시간 간격으로 보여주고 있습니다. 플래시 입문자들은 아래 소스를 수정하고 개선해 보시면 플래시 액션스크립트 학습이 도움이 될 것입니다. 뭐든 직접 해보는 것이 중요하므로 손수 멋진 디자인을 입혀서 자신만의 개성있는 막대 그래프를 만들어보세요.

 


import mx.transitions.Tween;
import mx.transitions.easing.*;

var chart_array = Array(
    Array('80','94','70','80','60')
    ,Array('60','100','78','50','80')
    ,Array('90','80','100','75','95')
);

var style_array = Array(
    Strong.easeOut, Elastic.easeOut, Bounce.easeOut, Regular.easeOut, Back.easeOut
);

var menu_max = chart_array.length;
var part_max = chart_array[0].length;
var time_step = 0, style_pos = 0;

function show_chart(set_style){
var i, j, y1, y2, style, mc;
    y1 = 0;
    for (i=0;i<part_max;i++) {
        for (j=0;j<menu_max;j++) {
            mc = this['mc_bar_'+j+'_'+i];
            y2 = chart_array[j][i] * 2;
            style = style_array[set_style];
            new Tween(mc,"_yscale",style,y1,y2,20,false);
        }
    }
}

this.onEnterFrame = function(){
    if (time_step>100) time_step = 0;
    if (time_step==0) {
        show_chart(style_pos);
        style_pos = (style_pos+1)%5;
    }
    time_step ++;
}

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info

<table bgcolor=#efefef width=600><tr><td> </td><td align=right><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="60" height="30"><param name="movie" value="http://www.hompydesign.com/club/blogzoom.swf"/><param name="wmode" value="opaque" /><param name="allowScriptAccess" value="always" /><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogzoom.swf width=60 height=30 type=application/x-shockwave-flash quality="high" allowScriptAccess=always /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="90" height="30"><param name="movie" value="http://www.hompydesign.com/club/translate.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/507"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/translate.swf width=90 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/507" /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="360" height="30"><param name="movie" value="http://www.hompydesign.com/club/bookmark.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/507&title=학습용 배너 이미지 슬라이더 플래시 소스"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/bookmark.swf width=360 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/507&title=학습용 배너 이미지 슬라이더 플래시 소스" /></object></td></tr></table> 이미지 슬라이더는 좁은 공간에 좀더 많은 것을 보기 좋게 보여주기 위해 유용한 유저 인터페이스입니다. 아래 소개하는 내용은 이번 플래시 스터디 과제를 해결하기 위한 힌트이기도 하며 플래시 액션스크립트 초급자를 위한 학습용 플래시 소스이기도 합니다. Tween 클래스를 사용해서 매끄러운 배너 이동에 적용했으며 주기적으로 반복해서 함수를 실행하게 해주는 setInterval 함수를 이용해 일정 시간 간격으로 배너를 교체하도록 하였습니다. 그리고 마우스를 배너 위에 올렸을 경우 clearInterval 함수로 반복하는 것을 중지 하도록 했고 마우스가 배너 위를 벗어났을 때 다시 setInterval 함수를 이용해 다시 반복 하도록 했습니다. 배너의 갯수(menu_max), 배너의 폭(menu_width), 이동 시간 간격(show_time), 어떤 스타일로 이동할 것인지(show_style)를 변경할 수 있는 변수도 적용하였습니다.
백번 설명하는 것 보다 한번 직접 해보는 것이 플래시 액션스크립트 학습의 지름길입니다. 자신의 필요나 구미에 맞게 아래 플래시 소스를 수정 보완 해보시면 학습에 도움이 될 것입니다. 이렇게 만들어진 플래시는 블로그나 홈페이지 배너로 사용하면 보기 좋을 것이며 실제 많이 사용하고 있기도 합니다.







import mx.transitions.Tween;
import mx.transitions.easing.*;

var menu_pos = 0;
var menu_max = 4;
var menu_width = 200;
var show_style = 0;
var show_time = 4000;
var menu_distance = menu_width * -1;
var time_id = setInterval(_root,"do_next", show_time);
mc_screen.onRollOver = function (){
    clearInterval(time_id);
}
mc_screen.onRollOut = function (){
    time_id = setInterval(_root,"do_next", show_time);
}
mc_screen.onRelease = function (){
    getURL("http://hompy.info/507","_blank");
}
function do_next(){
    var pos1, pos2, x1, x2;
    pos1 = menu_pos;
    menu_pos = menu_pos + 1;
    pos2 = menu_pos;
    x1 = pos1 * menu_distance;
    x2 = pos2 * menu_distance;
    menu_pos = (menu_pos) % menu_max;
    switch (show_style){
        case 1: new Tween(mc_screen,"_x",Elastic.easeOut,x1,x2,20,false); break;
        case 2: new Tween(mc_screen,"_x",Bounce.easeOut,x1,x2,20,false); break;
        case 3: new Tween(mc_screen,"_x",Regular.easeOut,x1,x2,20,false); break;
        case 4: new Tween(mc_screen,"_x",Back.easeOut,x1,x2,20,false); break;
        default: new Tween(mc_screen,"_x",Strong.easeOut,x1,x2,20,false); break;
    }
    trace (menu_pos+":"+x1+"->"+x2);
}

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info

<table bgcolor=#efefef width=600><tr><td> </td><td align=right><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="60" height="30"><param name="movie" value="http://www.hompydesign.com/club/blogzoom.swf"/><param name="wmode" value="opaque" /><param name="allowScriptAccess" value="always" /><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogzoom.swf width=60 height=30 type=application/x-shockwave-flash quality="high" allowScriptAccess=always /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="90" height="30"><param name="movie" value="http://www.hompydesign.com/club/translate.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/500"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/translate.swf width=90 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/500" /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="360" height="30"><param name="movie" value="http://www.hompydesign.com/club/bookmark.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/500&title=플래시 스터디, 세로형 네비게이션 만들기"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/bookmark.swf width=360 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/500&title=플래시 스터디, 세로형 네비게이션 만들기" /></object></td></tr></table> 9월 20일 오늘 스터디에서는 각자 만들어온 플래시에 대해 설명하고 제작할때 생긴 문제에 대해 질문하고 함께 풀어보고 트윈 클래스와 배열에 대해서 이해하는 시간을 가졌고 즉석에서 플래시 네비게이션을 만들어보는 시간을 가졌습니다. 10월 4일 스터디 과제는 이번에 학습한 몇가지를 응용하셔서 플래시 그래프와 전광판을 만들어보는 것입니다. 하단에 있는 자료들을 참고하시면 도움이 될 것입니다.
그리고 과제는 반드시 직접 해보시고 잘 안되는 부분에 대해 질문할 내용을 준비해두세요.

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info

[제3회 스터디 학습 자료]

세로형 네비게이션 액션 스크립트 소스 - flashmenu.as
아래 소스는 몇년전 플래시에 대해 제대로 파악하고 있지 못했던 시기에 만든 것으로 부족한 부분이 있을 수 있으나 오히려 입문자를 위한 학습 자료가 될 수 있어 공개합니다.

flashmenu.as

flashmenu.fla

import flash.geom.ColorTransform;
import flash.geom.Transform;

var mc_max = 8;
var mc_top = 10;
var mc_height = 30;
var mc_sub_height = 20;
var mmc_height = new Array();
var mmc_height_more = 26;
var mc_select = -1;

menu_list = new Array("플래시(Flash)","포토샵(Photoshop)","서비스(Service)","카페(Cafe)","블로그(Blog)");
menu_link = new Array("http://www.hompydesign.com/club/meet.htm","http://www.hompydesign.com/club/ani.htm","http://www.hompydesign.com/showdir.php","http://coordy.cyworld.com/","http://www.hompydesign.com/ex/main_index.htm");

submenu_list = new Array();
submenu_list[0] = new Array("미니홈피","플래시채팅","플래시소스","플래시갤러리","RSS 리더","PHP 사전","한자게임","달력과 시계");
submenu_list[1] = new Array("포토 라이브러리","랜덤 이미지");
submenu_list[2] = new Array("무료 도메인","한글 도메인","블로그 스크랩","미니홈피 갤러리","프로게이머");
submenu_list[3] = new Array("패션 코디 클럽","직장인 인맥만들기","플래시 카페","스타크래프트 클럽");
submenu_list[4] = new Array("블로그","싸이월드 홈2","미니홈피","게시판");

submenu_link = new Array();
submenu_link[0] = new Array("http://www.hompydesign.com/club/flash.htm","http://www.hompydesign.com/flash/chat.htm","http://www.hompydesign.com/club/flash_movie.php","http://www.hompydesign.com/club/photo.htm","http://www.hompydesign.com/club/xmlreader.htm","http://www.hompydesign.com/flash/phpdic/phpdic.htm","http://www.hompydesign.com/hanja/","http://www.hompydesign.com/club/calendar.htm");
submenu_link[1] = new Array("http://www.hompydesign.com/club/photolib.html","http://www.hompydesign.com/club/ani.htm","","","","","","","");
submenu_link[2] = new Array("http://www.hompydesign.com/showdir.php","http://www.hompydesign.com/club/korean_domain.php","http://www.hompydesign.com/club/post.com","http://www.hompydesign.com/club/photo_list.com","http://www.hompydesign.com/club/rank_write_starcraft.com","","","");
submenu_link[3] = new Array("http://coordy.cyworld.com/","http://makehost.cyworld.com/","http://cafe.naver.com/q69.cafe","http://starcraft.or.kr/","","","");
submenu_link[4] = new Array("http://hompy.info","http://www.cyworld.com/onblog","http://www.cyworld.com/makehost","http://www.hompydesign.com/ex/main_index.htm","","","");
ready();

function text_over(){
    this.title_tf.textColor = 0xFFFFFF;
}
function text_out(){
    this.title_tf.textColor = 0xE8EB91;
}
function text_click(){
    getURL(this.link,"_main_");
}

function ready() {
    for (i=0;i<mc_max;i++) {
        var obj = this["mc_"+i];
        obj.targetX = 0;
        obj.targetY = mc_height * i;
        obj.speedX = 0.2;
        obj.speedY = 0.2;
        obj.mlist._visible = false;
        obj.submenu._visible = false;
        obj.mlist_head._visible = false;
        obj.mlist_tail._visible = false;
        obj.main.onRollOver = move_mc;
        obj.main.title = menu_list[i];
        obj.main.title_tf.textColor = 0xfdffc7;
        obj.main._xscale = 100;
        obj.main._yscale = 100;
        obj.no = i;
        obj.main.link = menu_link[i];
        obj.main.onRelease = text_click;
        for (j in submenu_list[i]){
            obj.submenu["title"+j].str = submenu_list[i][j];
            obj.submenu["title"+j].onRollOver = text_over;
            obj.submenu["title"+j].onRollOut = text_out;
            obj.submenu["title"+j].link = submenu_link[i][j];
            obj.submenu["title"+j].onRelease = text_click;
        }
        for (j=submenu_list[i].length;j<mc_max;j++) obj.submenu["title"+j]._visible = false;
        obj.submenu["title"+(submenu_list[i].length-1)].line_mc._visible = false;
        obj.mlist._visible = false;
        obj.over_mc._visible = false;
        mmc_height[i] = submenu_list[i].length*mc_sub_height;
    }
}


first_mc(0);
function first_mc(menu_no){
    for (i=0;i<mc_max;i++) {
        var obj = _root["mc_"+i];
        /*
        var colorTrans:ColorTransform = new ColorTransform();
        var trans:Transform = new Transform(obj.over_mc);
        */
        obj.main._xscale = 100;
        obj.main._yscale = 100;
        if (menu_no==i)     {
            obj.main.title_tf.textColor = 0xfdffc7;
            obj.mlist._height = mmc_height[i];
            //obj.mlist_tail._y = obj.mlist._y + mmc_height[i];
            obj.submenu._visible = true;
            obj.mlist._visible = true;
            obj.mlist_head._visible = true;
            obj.mlist_tail._visible = true;
            obj.over_mc._visible = true;
            //colorTrans.rgb = 0x0000ff; trans.colorTransform = colorTrans;
            if (obj.no != mc_select) {
                //obj.main.onEnterFrame = show_mainmc;
                obj.submenu.gotoAndPlay(1);
                obj.submenu._alpha = 10;
                obj.submenu.onEnterFrame = show_submc;
                obj.mlist._alpha = 10;
                obj.mlist._height = 1;
                obj.mlist.onEnterFrame = show_submc_h;
                obj.mlist_head._alpha = 10;
                obj.mlist_head.onEnterFrame = show_submc;
                obj.mlist_tail._alpha = 10;
                obj.mlist_tail.onEnterFrame = show_submc;
            }
        } else {
            obj.over_mc._visible = false;
            obj.main.title_tf.textColor = 0xfdffc7;
            obj.mlist._visible = false;
            obj.submenu._visible = false;
            obj.mlist_head._visible = false;
            obj.mlist_tail._visible = false;
            colorTrans.rgb = 0x00ccff; trans.colorTransform = colorTrans;
        }
        obj.targetY = mc_top + mc_height * i;
        if (menu_no < i) obj.targetY += mmc_height[menu_no]+ mmc_height_more;
        //trace(obj.no+':'+obj.targetY);
        obj.onEnterFrame = go_mc;
    }
    mc_select = menu_no;
}


function move_mc(){
    for (i=0;i<mc_max;i++) {
        var obj = _root["mc_"+i];
        /*
        var colorTrans:ColorTransform = new ColorTransform();
        var trans:Transform = new Transform(obj.over_mc);
        */
        obj.main._xscale = 100;
        obj.main._yscale = 100;
        if (this._parent.no==i)     {
            obj.main.title_tf.textColor = 0xfdffc7;
            obj.mlist._height = mmc_height[i];
            //obj.mlist_tail._y = obj.mlist._y + mmc_height[i];
            obj.submenu._visible = true;
            obj.mlist._visible = true;
            obj.mlist_head._visible = true;
            obj.mlist_tail._visible = true;
            obj.over_mc._visible = true;
            //colorTrans.rgb = 0x0000ff; trans.colorTransform = colorTrans;
            if (obj.no != mc_select) {
                //obj.main.onEnterFrame = show_mainmc;
                obj.submenu.gotoAndPlay(1);
                obj.submenu._alpha = 10;
                obj.submenu.onEnterFrame = show_submc;
                obj.mlist._alpha = 10;
                obj.mlist._height = 1;
                obj.mlist.onEnterFrame = show_submc_h;
                obj.mlist_head._alpha = 10;
                obj.mlist_head.onEnterFrame = show_submc;
                obj.mlist_tail._alpha = 10;
                obj.mlist_tail.onEnterFrame = show_submc;
            }
        } else {
            obj.over_mc._visible = false;
            obj.main.title_tf.textColor = 0xfdffc7;
            obj.mlist._visible = false;
            obj.submenu._visible = false;
            obj.mlist_head._visible = false;
            obj.mlist_tail._visible = false;
            colorTrans.rgb = 0x00ccff; trans.colorTransform = colorTrans;
        }
        obj.targetY = mc_top + mc_height * i;
        if (this._parent.no < i) obj.targetY += mmc_height[this._parent.no]+ mmc_height_more;
        //trace(obj.no+':'+obj.targetY);
        obj.onEnterFrame = go_mc;
    }
    mc_select = this._parent.no;
}

function show_mainmc(){
    if (this._xscale<110) {
        this._xscale += 2;
        if (this._xscale > 110) this._xscale = 110;
        this._yscale = this._xscale;
    } else {
        this.onEnterFrame = null;
    }
}

function show_submc(){
    if (this._alpha<100) {
        this._alpha += 10;
        if (this._alpha > 100) this._alpha = 100;
    } else {
        this.onEnterFrame = null;
    }
}

function show_submc_h(){
    if (this._alpha<100) {
        this._alpha += 10;
        if (this._alpha > 100) this._alpha = 100;
        this._height = mmc_height[this._parent.no]*this._alpha / 100;
        this._parent.mlist_tail._y = this._y + this._height;
    } else {
        this.onEnterFrame = null;
    }
}

function go_mc() {
    var obj = this;
    var len = (obj._x - obj.targetX)*(obj._x - obj.targetX)+(obj._y - obj.targetY)*(obj._y - obj.targetY)/2;
    if (len < 1){
        obj._x = obj.targetX;
        obj._y = obj.targetY;
        obj.onEnterFrame = null;
    }
    obj._x = obj._x + obj.speedX*(obj.targetX - obj._x);
    obj._y = obj._y + obj.speedY*(obj.targetY - obj._y);
}

[제4회 스터디 학습 과제]

1차원 배열과 Tween 클래스를 이용해서 전광판을 만들어보세요.
전광판 참고 URL : http://hompy.info/204

2차원 배열과 Tween 클래스를 이용해서 그래프를 만들어보세요.
그래프 참고 URL : http://hompy.info/192

[Tween 클래스 참고 게시물]

http://cafe.naver.com/q69/38901
http://cafe.naver.com/q69/115118

[플래시 배열 참고 게시물]

http://cafe.naver.com/q69/115164

[html에서 플래시로 변수 전달 참고 게시물]

http://cafe.naver.com/q69/7386

<table bgcolor=#efefef width=600><tr><td> </td><td align=right><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="60" height="30"><param name="movie" value="http://www.hompydesign.com/club/blogzoom.swf"/><param name="wmode" value="opaque" /><param name="allowScriptAccess" value="always" /><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogzoom.swf width=60 height=30 type=application/x-shockwave-flash quality="high" allowScriptAccess=always /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="90" height="30"><param name="movie" value="http://www.hompydesign.com/club/translate.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/480"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/translate.swf width=90 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/480" /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="360" height="30"><param name="movie" value="http://www.hompydesign.com/club/bookmark.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/480&title=미리보기 이미지 썸네일 만들기 함수 PHP 소스 코드"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/bookmark.swf width=360 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/480&title=미리보기 이미지 썸네일 만들기 함수 PHP 소스 코드" /></object></td></tr></table> PHP에서 GD 라이브러리를 활용해서 썸네일을 만들어주는 함수의 소스 코드입니다. 홈페이지를 만들다 보면 사진첩과 같이 이미지를 다수 노출해야 되는 페이지를 구성할 때 필요한 것이 썸네일이며 이를 이용하면 페이지의 로딩 속도를 향상시켜 주며 원본 이미지를 작게 보여줄 때 좀더 선명하게 표현해줄 수 있습니다. 자신의 필요에 맞게 함수를 구성할 수 있는 분이 아니라면 복사해서 활용해보시면 되겠습니다. 함수 파라메터 끝에는 썸네일을 저장할 파일 경로를 입력하시면 되고 경로를 입력하지 않으면 바로 출력됩니다.

make_thumbnail("원본이미지파일경로", 83, 100, "저장할썸네일파일경로");

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info
<?
make_thumbnail("http://hompy.info/attach/1/1196323499.jpg", 83, 100, "");

function make_thumbnail($source_path, $width, $height, $thumbnail_path){
    list($img_width,$img_height, $type) = getimagesize($source_path);
    if ($type!=1 && $type!=2 && $type!=3 && $type!=15) return;
    if ($type==1) $img_sour = imagecreatefromgif($source_path);
    else if ($type==2 ) $img_sour = imagecreatefromjpeg($source_path);
    else if ($type==3 ) $img_sour = imagecreatefrompng($source_path);
    else if ($type==15) $img_sour = imagecreatefromwbmp($source_path);
    if ($img_width > $img_height) {
        $w = round($height*$img_width/$img_height);
        $h = $height;
        $x_last = round(($w-$width)/2);
        $y_last = 0;
    } else {
        $w = $width;
        $h = round($width*$img_height/$img_width);
        $x_last = 0;
        $y_last = round(($h-$height)/2);
    }
    if ($img_width < $width && $img_height < $height) {
        $img_last = imagecreatetruecolor($width, $height);
        $x_last = round(($width - $img_width)/2);
        $y_last = round(($height - $img_height)/2);

        imagecopy($img_last,$img_sour,$x_last,$y_last,0,0,$w,$h);
        imagedestroy($img_sour);
        $white = imagecolorallocate($img_last,255,255,255);
        imagefill($img_last, 0, 0, $white);
    } else {
        $img_dest = imagecreatetruecolor($w,$h);
        imagecopyresampled($img_dest, $img_sour,0,0,0,0,$w,$h,$img_width,$img_height);
        $img_last = imagecreatetruecolor($width,$height);
        imagecopy($img_last,$img_dest,0,0,$x_last,$y_last,$w,$h);
        imagedestroy($img_dest);
    }
    if ($thumbnail_path) {
        if ($type==1) imagegif($img_last, $thumbnail_path, 100);
        else if ($type==2 ) imagejpeg($img_last, $thumbnail_path, 100);
        else if ($type==3 ) imagepng($img_last, $thumbnail_path, 100);
        else if ($type==15) imagebmp($img_last, $thumbnail_path, 100);
    } else {
        if ($type==1) imagegif($img_last);
        else if ($type==2 ) imagejpeg($img_last);
        else if ($type==3 ) imagepng($img_last);
        else if ($type==15) imagebmp($img_last);
    }
    imagedestroy($img_last);
}
?>

<table bgcolor=#efefef width=600><tr><td> </td><td align=right><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="60" height="30"><param name="movie" value="http://www.hompydesign.com/club/blogzoom.swf"/><param name="wmode" value="opaque" /><param name="allowScriptAccess" value="always" /><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogzoom.swf width=60 height=30 type=application/x-shockwave-flash quality="high" allowScriptAccess=always /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="90" height="30"><param name="movie" value="http://www.hompydesign.com/club/translate.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/479"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/translate.swf width=90 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/479" /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="360" height="30"><param name="movie" value="http://www.hompydesign.com/club/bookmark.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/479&title=자유로운 메시지 교환을 위한 플래시톡(Flash Talk)."><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/bookmark.swf width=360 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/479&title=자유로운 메시지 교환을 위한 플래시톡(Flash Talk)." /></object></td></tr></table> 어떤 카페, 어떤 블로그, 어떤 홈페이에도 자유롭게 복사되어 붙여넣기 될 수 있는 플래시의 장점을 살려 홈페이지를 넘나들며 자유로운 메시지 교환을 손쉽게 해볼 수 있는 플래시톡(Flash Talk)입니다. 플래시톡은 채팅과 게시판의 중간단계이며 간편하게 메시지를 작성해서 올릴 수 있습니다. 간편한 메시지 입력, 간편한 메시지 보기에 주안점을 둔 유저인터페이스(UI) 입니다. 차차 로그인 기능이나 나만의 플래시톡을 만들 수 있는 기능 등이 추가될 수 있습니다.

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info



개인용 플래시톡을 만들려면 아래 태그에 빨간색 부분을 자신의 아이디(myid)로 수정해서 사용해야 되며 아이디 개설은 http://www.hompydesign.com/blog/에서 해야합니다. 아이디를 개설하면 블로그 채팅이나 블로그 카운터 등을 사용할 수 있습니다.

[플래시톡 HTML 태그 소스 코드]
<EMBED FlashVars="myid=hompy" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/flash/flashtalk.swf width=300 height=400 type=application/x-shockwave-flash quality="high"></EMBED>

<table bgcolor=#efefef width=600><tr><td> </td><td align=right><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="60" height="30"><param name="movie" value="http://www.hompydesign.com/club/blogzoom.swf"/><param name="wmode" value="opaque" /><param name="allowScriptAccess" value="always" /><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogzoom.swf width=60 height=30 type=application/x-shockwave-flash quality="high" allowScriptAccess=always /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="90" height="30"><param name="movie" value="http://www.hompydesign.com/club/translate.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/471"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/translate.swf width=90 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/471" /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="360" height="30"><param name="movie" value="http://www.hompydesign.com/club/bookmark.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/471&title=삽질할 수 있는 PHP로 이메일 보내기 샘플 소스 코드"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/bookmark.swf width=360 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/471&title=삽질할 수 있는 PHP로 이메일 보내기 샘플 소스 코드" /></object></td></tr></table> 홈페이지를 운영하다 보면 회원들에게 상태를 알리는 메일이나 안내 메일을 보낼 필요가 있습니다. 관리하는 홈페이지에서 이메일 전송이 제대로 안되는 문제가 발생해서 이것 저것 테스트 하기 위해 만들어본 샘플 소스 코드입니다. 이 PHP 소스를 이용해 포털 이메일 계정으로 메일을 보내 보니 대체적으로 잘 전송이 되었습니다. 그런데 엠파스나 야후 메일 같은 경우 조금 늦게 도착하는 것 같더군요. 이메일 루틴 관련해서 노하우를 가지고 계신 분이 있다면 관심 있는 분들을 위해 살짝 노출해주시길 바랍니다. UTF-8 기준으로 작성된 테스트 소스이므로 캐릭터셋이 다를 경우 수정이 필요합니다.

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info

<?
$charset = "UTF-8";
$boundary = uniqid(rand(),true);

$mail_array[to_name] = "웹디자이너";
$mail_array[to_email] = "design@hompydesign.com";

$mail_array[from_name] = "웹프로그래머";
$mail_array[from_email] = "program@hompy.info";

$mail_array[title] = "[소식] 홈페이지 정보 블로그" . date("YmdHi");

$mail_array[content] = <<<MSG
<html>
<head>
<title>홈페이지 정보 블로그</title>
</head>
<body>
<a href='http://hompy.info/471' target='_blank'>홈페이지 정보 블로그</a><br>
<a href='http://hompy.info/471' target='_blank'>"http://hompy.info/471"</a><br>
</body>
</html>
MSG;

$mail_array[title] = '=?utf-8?b?'.base64_encode($mail_array[title]).'?=';
$mail_array[from_name] = '=?utf-8?b?'.base64_encode($mail_array[from_name]).'?=';
$mail_array[to_name] = '=?utf-8?b?'.base64_encode($mail_array[to_name]).'?=';
$recipient = $mail_array[to_name] . " <". $mail_array[to_email] . ">";

$headers =
"From: ". $mail_array[from_name] . " <".$mail_array[from_email] . ">\n" .
"Return-Path: ".$mail_array[to_name] . " <" . $mail_array[from_email] . ">\n" .
"Subject: ".$mail_array[title] . "\n" .
"MIME-Version: 1.0\n" .
"Content-Type: multipart/alternative; boundary=\"" . $boundary . "\"";

$body =
"--" . $boundary . "\n".
"Content-Type: text/plain; charset=" . $charset . "; format=flowed\n" .
"Content-Transfer-Encoding: base64\n" .
"Content-Disposition: inline\n\n" .
chunk_split(base64_encode(strip_tags($mail_array[content]))) . "\n\n" .
"--" . $boundary . "\n" .
"Content-Type: text/html; charset=" . $charset . "\n" .
"Content-Transfer-Encoding: base64\n" .
"Content-Disposition: inline\n\n" .
chunk_split(base64_encode($mail_array[content]))."\n\n" .
"--" . $boundary . "--\n";

mail($recipient , $mail_array[title], $body, $headers);
?>

<table bgcolor=#efefef width=600><tr><td> </td><td align=right><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="60" height="30"><param name="movie" value="http://www.hompydesign.com/club/blogzoom.swf"/><param name="wmode" value="opaque" /><param name="allowScriptAccess" value="always" /><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogzoom.swf width=60 height=30 type=application/x-shockwave-flash quality="high" allowScriptAccess=always /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="90" height="30"><param name="movie" value="http://www.hompydesign.com/club/translate.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/361"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/translate.swf width=90 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/361" /></object><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="360" height="30"><param name="movie" value="http://www.hompydesign.com/club/bookmark.swf"/><param name="allowScriptAccess" value="always" /><param name="flashvars" value="link=http://hompy.info/361&title=움직이는 막대그래프 자바스크립트 소스"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/bookmark.swf width=360 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/361&title=움직이는 막대그래프 자바스크립트 소스" /></object></td></tr></table> 움직이는 막대 그래프 만들기 자바스크립트 소스입니다. 개별 막대가 점진적으로 목표 크기에 다가가는 모션이 적용되었으며 막대의 현재 크기와 목표 크기 사이의 간격을 기준으로 일정 비율(1/8)로 더해주는 방식입니다. bar_init 함수 내 80 이라는 숫자와 bar_timer 함수 내 8 이라는 숫자를 수정하여 개인 취향에 맞게 모션에 변화를 줄 수 있습니다. 해당 막대의 목표 크기는 img 태그의 barwidth 와 barheight 에 의해서 결정됩니다. 웹페이지에서 오브젝트의 동적인 움직임을 구현할 때 setInterval 이라는 함수가 요긴하게 사용됩니다. 비슷한 방식으로 플래시로 막대 그래프를 구현한다면 setInterval 함수나 onEnterFrame 이라는 이벤트를 사용할 수 있습니다. 그런데 Tween 객체를 쓰면 보다 손쉽게 모션을 구현할 수 있지요. 막대그래프를 그리는 방법에 대한 정답은 당신에게 있습니다. 자신의 개성에 맞게 수정하고 보완한다면 그 정답을 찾을 수 있을겁니다.  

<HTML>
<HEAD>
<TITLE>막대그래프</TITLE>
<script>
var bar_obj = [], ybar_obj = [], bar_obj_max = 14, ybar_obj_max = 21;
function bar_timer(pos){
	var obj = bar_obj[pos], more;
	if ((obj.barwidth - obj.width)>1){
		more = (obj.barwidth - obj.width) / 8;
		obj.width += more;
	} else {
		clearInterval(obj.timer_id);
		obj.width = obj.barwidth;
	}
}
function ybar_timer(pos){
	var obj = ybar_obj[pos], more;
	if ((obj.barheight - obj.height)>1){
		more = (obj.barheight - obj.height) / 8;
		obj.height += more;
	} else {
		clearInterval(obj.timer_id);
		obj.height = obj.height;
	}
}
function bar_init(){
	for (i=0;i<bar_obj_max;i++){
		bar_obj[i] = document.getElementById('bar_img_'+i);
		bar_obj[i].timer_id = setInterval('bar_timer('+i+')',30);
	}
	for (i=0;i<ybar_obj_max;i++){
		ybar_obj[i] = document.getElementById('ybar_img_'+i);
		ybar_obj[i].timer_id = setInterval('ybar_timer('+i+')',30);
	}
}
</script>
<style>
.box_id {width:360px}
.box_id td {background-color:#111111;}
.ybox_id {height:200px;}
.ybox_id td {background-color:#111111; text-align:center; vertical-align:bottom}
</style>
</HEAD>
<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onload="javscript:bar_init();">
<table cellspacing=2 cellpadding=2 border=0 width=500 class=box_id>
<tr><td><img id='bar_img_0' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_0.gif" width="1" height="12" barwidth=280></td></tr>
<tr><td><img id='bar_img_1' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_1.gif" width="1" height="12" barwidth=250></td></tr>
<tr><td><img id='bar_img_2' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_2.gif" width="1" height="12" barwidth=310></td></tr>
<tr><td><img id='bar_img_3' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_3.gif" width="1" height="12" barwidth=180></td></tr>
<tr><td><img id='bar_img_4' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_4.gif" width="1" height="12" barwidth=320></td></tr>
<tr><td><img id='bar_img_5' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_5.gif" width="1" height="12" barwidth=290></td></tr>
<tr><td><img id='bar_img_6' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_6.gif" width="1" height="12" barwidth=380></td></tr>
<tr><td><img id='bar_img_7' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_0.gif" width="1" height="12" barwidth=280></td></tr>
<tr><td><img id='bar_img_8' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_1.gif" width="1" height="12" barwidth=250></td></tr>
<tr><td><img id='bar_img_9' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_2.gif" width="1" height="12" barwidth=300></td></tr>
<tr><td><img id='bar_img_10' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_3.gif" width="1" height="12" barwidth=180></td></tr>
<tr><td><img id='bar_img_11' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_4.gif" width="1" height="12" barwidth=270></td></tr>
<tr><td><img id='bar_img_12' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_5.gif" width="1" height="12" barwidth=290></td></tr>
<tr><td><img id='bar_img_13' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_6.gif" width="1" height="12" barwidth=280></td></tr>
</table>
<table cellspacing=2 cellpadding=2 border=0 class=ybox_id>
<tr>
<td><img id='ybar_img_0' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_0.gif" width="12" height="1" barheight=60></td>
<td><img id='ybar_img_1' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_1.gif" width="12" height="1" barheight=75></td>
<td><img id='ybar_img_2' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_2.gif" width="12" height="1" barheight=160></td>
<td><img id='ybar_img_3' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_3.gif" width="12" height="1" barheight=40></td>
<td><img id='ybar_img_4' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_4.gif" width="12" height="1" barheight=120></td>
<td><img id='ybar_img_5' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_5.gif" width="12" height="1" barheight=95></td>
<td><img id='ybar_img_6' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_6.gif" width="12" height="1" barheight=90></td>
<td><img id='ybar_img_7' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_0.gif" width="12" height="1" barheight=140></td>
<td><img id='ybar_img_8' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_1.gif" width="12" height="1" barheight=75></td>
<td><img id='ybar_img_9' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_2.gif" width="12" height="1" barheight=160></td>
<td><img id='ybar_img_10' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_3.gif" width="12" height="1" barheight=40></td>
<td><img id='ybar_img_11' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_4.gif" width="12" height="1" barheight=100></td>
<td><img id='ybar_img_12' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_5.gif" width="12" height="1" barheight=95></td>
<td><img id='ybar_img_13' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_6.gif" width="12" height="1" barheight=90></td>
<td><img id='ybar_img_14' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_0.gif" width="12" height="1" barheight=140></td>
<td><img id='ybar_img_15' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_1.gif" width="12" height="1" barheight=75></td>
<td><img id='ybar_img_16' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_2.gif" width="12" height="1" barheight=160></td>
<td><img id='ybar_img_17' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_3.gif" width="12" height="1" barheight=40></td>
<td><img id='ybar_img_18' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_4.gif" width="12" height="1" barheight=50></td>
<td><img id='ybar_img_19' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_5.gif" width="12" height="1" barheight=95></td>
<td><img id='ybar_img_20' border="0" src="http://www.hompydesign.com/open_source/images/status_bar_6.gif" width="12" height="1" barheight=90></td>
</tr>
</table>
</BODY>
</HTML>

웹프로그래머의 홈페이지정보 블로그 http://hompy.info