</HEAD> <body text=#000000 bgProperties=fixed><!--'"</title></head>--> <script type="text/javascript"> //OwnerIQ var __oiq_pct = 50; if( __oiq_pct>=100 || Math.floor(Math.random()*100/(100-__oiq_pct)) > 0 ) { var _oiqq = _oiqq || []; _oiqq.push(['oiq_addPageBrand','Lycos']); _oiqq.push(['oiq_addPageCat','Internet > Websites']); _oiqq.push(['oiq_addPageLifecycle','Intend']); _oiqq.push(['oiq_doTag']); (function() { var oiq = document.createElement('script'); oiq.type = 'text/javascript'; oiq.async = true; oiq.src = document.location.protocol + '//px.owneriq.net/stas/s/lycosn.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(oiq, s); })(); } //Google Analytics var _gaq = _gaq || []; _gaq.push(['_setAccount','UA-21402695-19']); _gaq.push(['_setDomainName','tripod.com']); _gaq.push(['_setCustomVar',1,'member_name','kroonoi',3]); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //Lycos Init function getReferrer() { var all= this.document.cookie; if (all== '') return false; var cookie_name = 'REFERRER='; var start = all.lastIndexOf(cookie_name); if (start == -1) return false; start += cookie_name.length; var end = all.indexOf(';', start); if (end == -1) end = all.length; return all.substring(start, end); } function getQuery() { var rfr = getReferrer(); if (rfr == '') return false; var q = extractQuery(rfr, 'yahoo.com', 'p='); if (q) return q; q = extractQuery(rfr, '', 'q='); return q ? q : ""; } function extractQuery(full, site, q_param) { var start = full.lastIndexOf(site); if (start == -1) return false; start = full.lastIndexOf(q_param); if (start == -1) return false; start += q_param.length; var end = full.indexOf('&', start); if (end == -1) end = full.length; return unescape(full.substring(start, end)).split(" ").join("+"); } function generateHref(atag, template){ atag.href=template.replace('_MYURL_', window.location.href.replace('http://', '')).replace('_MYTITLE_','Check%20out%20this%20Tripod%20Member%20site!'); } var lycos_ad = Array(); var lycos_onload_timer; var cm_role = "live"; var cm_host = "tripod.lycos.com"; var cm_taxid = "/memberembedded"; var tripod_member_name = "kroonoi"; var tripod_member_page = "kroonoi/animation.html"; var tripod_ratings_hash = "1506416178:295003dfc400657e6266210182040228"; var lycos_ad_category = {"dmoz":"health\/addictions","ontarget":"&CAT=health&L2CAT=diseases%20and%20conditions&L3CAT=substance%20abuse","find_what":"paris"}; var lycos_ad_remote_addr = "209.202.244.9"; var lycos_ad_www_server = "www.tripod.lycos.com"; var lycos_ad_track_small = "http://members.tripod.com/adm/img/common/ot_smallframe.gif?rand=554098"; var lycos_ad_track_served = "http://members.tripod.com/adm/img/common/ot_adserved.gif?rand=554098"; var lycos_search_query = getQuery(); </script> <script type="text/javascript" src="http://scripts.lycos.com/catman/init.js"></script> <script type='text/javascript'> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; (function() { var gads = document.createElement('script'); gads.async = true; gads.type = 'text/javascript'; var useSSL = 'https:' == document.location.protocol; gads.src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js'; var node = document.getElementsByTagName('script')[0]; node.parentNode.insertBefore(gads, node); })(); </script> <script type='text/javascript'> googletag.cmd.push(function() { googletag.defineSlot('/95963596/TRI_300X250_dfp', [300, 250], 'div-gpt-ad-1450204159126-0').addService(googletag.pubads()); googletag.defineSlot('/95963596/TRI_above_728x90_dfp', [728, 90], 'div-gpt-ad-1450204159126-1').addService(googletag.pubads()); googletag.defineSlot('/95963596/TRI_below_728x90_dfp', [728, 90], 'div-gpt-ad-1450204159126-2').addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.enableServices(); }); </script> <script type="text/javascript"> (function(isV) { if( !isV ) { return; } var adMgr = new AdManager(); var lycos_prod_set = adMgr.chooseProductSet(); var slots = ["leaderboard", "leaderboard2", "toolbar_image", "toolbar_text", "smallbox", "top_promo", "footer2", "slider"]; var adCat = this.lycos_ad_category; adMgr.setForcedParam('page', (adCat && adCat.dmoz) ? adCat.dmoz : 'member'); if (this.lycos_search_query) { adMgr.setForcedParam("keyword", this.lycos_search_query); } else if(adCat && adCat.find_what) { adMgr.setForcedParam('keyword', adCat.find_what); } for (var s in slots) { var slot = slots[s]; if (adMgr.isSlotAvailable(slot)) { this.lycos_ad[slot] = adMgr.getSlot(slot); } } adMgr.renderHeader(); adMgr.renderFooter(); }((function() { var w = 0, h = 0, minimumThreshold = 300; if (top == self) { return true; } if (typeof(window.innerWidth) == 'number' ) { w = window.innerWidth; h = window.innerHeight; } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { w = document.documentElement.clientWidth; h = document.documentElement.clientHeight; } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { w = document.body.clientWidth; h = document.body.clientHeight; } return ((w > minimumThreshold) && (h > minimumThreshold)); }()))); window.onload = function() { var f = document.getElementById("FooterAd"); var b = document.getElementsByTagName("body")[0]; b.appendChild(f); f.style.display = "block"; document.getElementById('lycosFooterAdiFrame').src = '/adm/ad/footerAd.iframe.html'; // DOM Inj Ad (function(isTrellix) { var e = document.createElement('iframe'); e.style.border = '0'; e.style.margin = 0; e.style.display = 'block'; e.style.cssFloat = 'right'; e.style.height = '254px'; e.style.overflow = 'hidden'; e.style.padding = 0; e.style.width = '300px'; var isBlokedByDomain = function( href ) { var blockedDomains = [ "ananyaporn13000.tripod.com", "xxxpornxxx.tripod.com" ]; var flag = false; for( var i=0; i<blockedDomains.length; i++ ) { if( href.search( blockedDomains[ i ] ) >= 0 ) { flag = true; } } return flag; } var getMetaContent = function( metaName ) { var metas = document.getElementsByTagName('meta'); for (i=0; i<metas.length; i++) { if( metas[i].getAttribute("name") == metaName ) { return metas[i].getAttribute("content"); } } return false; } var getCommentNodes = function(regexPattern) { var nodes = {}; var nodesA = []; var preferredNodesList = ['a', 'c', 'b']; (function getNodesThatHaveComments(n, pattern) { if (n.hasChildNodes()) { if (n.tagName === 'IFRAME') { return false; } for (var i = 0; i < n.childNodes.length; i++) { if ((n.childNodes[i].nodeType === 8) && (pattern.test(n.childNodes[i].nodeValue))) { var areaName = pattern.exec(n.childNodes[i].nodeValue)[1]; nodes[areaName] = n; } else if (n.childNodes[i].nodeType === 1) { getNodesThatHaveComments(n.childNodes[i], pattern); } } } }(document.body, regexPattern)); for (var i in preferredNodesList) { if (nodes[preferredNodesList[i]]) { if( isTrellix && nodes[preferredNodesList[i]].parentNode.parentNode.parentNode.parentNode ) { nodesA.push(nodes[preferredNodesList[i]].parentNode.parentNode.parentNode.parentNode); } else { nodesA.push( nodes[preferredNodesList[i]] ); } } } return nodesA; } var properNode = null; var areaNodes = getCommentNodes( new RegExp( '^area Type="area_(\\w+)"' ) ); for (var i = 0; i < areaNodes.length; i++) { var a = parseInt(getComputedStyle(areaNodes[i]).width); if ((a >= 300) && (a <= 400)) { properNode = areaNodes[i]; break; } } var propertyName = getMetaContent("property") || false; if( isTrellix && (properNode) ) { e.src = '/adm/ad/injectAd.iframe.html'; properNode.insertBefore(e, properNode.firstChild); } else if( isTrellix && !( properNode ) ) // Slap the ad eventhought there is no alocated slot { e.src = '/adm/ad/injectAd.iframe.html'; e.style.cssFloat = 'none'; var cdiv = document.createElement('div'); cdiv.style = "width:300px;margin:10px auto;"; cdiv.appendChild( e ); b.insertBefore(cdiv, b.lastChild); } else if( !isBlokedByDomain( location.href ) ) { var injF = document.createElement('iframe'); injF.style.border = '0'; injF.style.margin = 0; injF.style.display = 'block'; injF.style.cssFloat = 'none'; injF.style.height = '254px'; injF.style.overflow = 'hidden'; injF.style.padding = 0; injF.style.width = '300px'; injF.src = '/adm/ad/injectAd.iframe.html'; if( b && ( !isTrellix || ( typeof isTrellix == "undefined" ) ) ) // All other tripod props { var cdiv = document.createElement('div'); cdiv.style = "width:300px;margin:10px auto;"; cdiv.appendChild( injF ); b.insertBefore(cdiv, b.lastChild); } } }( document.isTrellix )); } </script> <div id="tb_container" style="background:#DFDCCF; border-bottom:1px solid #393939; position:relative; z-index:999999999!important"> <!--form name="search" onSubmit="return searchit()" id='header_search' > <input type="text" placeholder="Search" size=30 name="search2" value=""> <input type="button" value="Go!" onClick="searchit()"> </form> <style> form#header_search { width: 916px; margin: 0 auto 8px; position: relative; } form#header_search input { height: 40px; font-size: 14px; line-height: 40px; padding: 0 8px; box-sizing: border-box; background: #F4F2E9; border: 1px solid #BBB8B8; transition: background-color 300ms ease-out, color 300ms ease; } form#header_search input[type="text"] { width: 100%; } form#header_search input[type="text"]:focus { border-color: #A2D054; background-color: #fff; box-shadow: 0 0px 12px -4px #A2D054; } form#header_search input[type="button"] { position: absolute; top: 1px; right: 1px; opacity: 1; background: #DFDCCF; color: #463734; width: 125px; cursor: pointer; height: 38px; border: none; } form#header_search input[type="text"]:focus ~ input[type='button']:hover, form#header_search input[type='button']:hover { background-color: #A5CE56; color: #fff; } form#header_search input[type="text"]:focus ~ input[type='button'] { background-color: #52AEDF; color: #fff; } </style> <script> function searchit(){ // determine environment var search_env if (lycos_ad_www_server.indexOf(".pd.") > -1) { search_env = 'http://search51.pd.lycos.com/a/'; } else if (lycos_ad_www_server.indexOf(".qa.") > -1) { search_env = 'http://search51.qa.lycos.com/a/'; } else { search_env = 'http://search51.lycos.com/a/'; } var search_term = encodeURIComponent(document.search.search2.value) var search_url = search_env+search_term; window.open(search_url); return false } </script--> <style> .adCenterClass{margin:0 auto} </style> <div id="tb_ad" class="adCenterClass" style="display:block!important; overflow:hidden; width:916px;"> <a href="http://adtrack.ministerial5.com/clicknew/?a=637394" title="build your own website at Tripod.com" style="float:left; width:186px; border:0"> <img src="http://ly.lygo.com/ly/tpSite/images/freeAd2.jpg" alt="Make your own free website on Tripod.com" style="border:0; display:block" /> </a> <div id="ad_container" style="display:block!important; float:left; width:728px "> <script type="text/javascript">document.write(lycos_ad['leaderboard']);</script> </div> </div> </div> <script type="text/javascript">document.write(lycos_ad['slider']);</script> <!-- added 7/22 --> <div id="FooterAd" style="background:#DFDCCF; border-top:1px solid #393939; clear:both; display:none; width:100%!important; position:relative; z-index:999999!important; height:90px!important"> <div class="adCenterClass" style="display:block!important; overflow:hidden; width:916px;"> <a href="http://adtrack.ministerial5.com/clicknew/?a=637394" title="build your own website at Tripod.com" style="float:left; display:block; width:186px; border:0"> <img src="http://ly.lygo.com/ly/tpSite/images/freeAd2.jpg" alt="Make your own free website on Tripod.com" style="border:0; display:block; " /> </a> <div id="footerAd_container" style="display:block!important; float:left; width:728px"> <iframe id="lycosFooterAdiFrame" style="border:0; display:block; float:left; height:96px; overflow:hidden; padding:0; width:750px"></iframe> </div> </div> </div> <div align="center"> </div> </CENTER></XMP>  

  

  

  

  

  

  

          ภาพเคลื่อนไหว  หมายถึง ภาพกราฟฟิกที่มีการเคลื่อนไหวเพื่อแสดงขั้นตอนหรือปรากฏ การณ์ต่างๆ ที่เกิดขึ้นอย่างต่อเนื่อง เช่น การเจริญเติบโตของต้นไม้ หรือการเคลื่อนที่ของลูกสูบของเครื่องยนต์ เป็นต้น ทั้งนี้เพื่อสร้างสรรค์จินตนาการให้เกิดแรงจูงใจจากผู้ชม  อันที่จริงก็หลักการของการถ่ายทำภาพยนต์นั่นแหละครับ สำหรับภาพยนต์จะใช้แผ่นฟิล์มที่บันทึกภาพเป็นช่วงๆ  และนำมาฉายลงแผ่นระนาบซึ่งอาจเป็นฉากที่มีพื้นผิวที่ไม่สะท้อนแสง (ผิวด้าน)   ความเร็วในการแสดงภาพในแผ่นฉากรับภาพนั้นจะทำให้เรามองเห็นเสมือนว่าภาพนั้นเคลื่อนไหวได้  การผลิตภาพเคลื่อนไหวด้วยคอมพิวเตอร์จะต้องใช้โปรแกรมที่มีคุณสมบัติเฉพาะทาง  ซึ่งอาจมีปัญหาเกิดขึ้นอยู่บ้างเกี่ยวกับขนาดความจุของไฟล์ที่จะมากกว่าภาพนิ่งในขณะที่ขนาดของภาพที่เท่ากัน  ภาพเคลื่อนไหวนี้  สามารถสร้างได้จากหลายโปรแกรม  วันนี้ผมจะมาแนะนำให้ทำจากโปรแกรม adobe image ready เพราะคิดว่าดอมพิวเตอร์ส่วนใหญ่น่าจะมีการติดตั้งมาแล้ว    ซึ่งโปรแกรมนี้จะถูกติดตั้งแถมมากับโปรแกรมด้านกราฟฟิกยอดฮิตนามว่า adobe photo shop  นั่นเอง  ซึ่งไฟล์ที่แสดงจะเป็น *.gif  หรือใครอยากจะเรียกว่า gif animation ก็ได้ครับ  เผื่อใครอยากสร้างภาพของตัวเอง ไม่ซ้ำกับคนอื่นเอาไว้ดูเล่น ประดับหน้าเว็บ หรือใช้เป็นภาพประจำตัวเราตามเว็บบอร์ดต่างๆ

          อย่างแรกก่อนสอนทำงานนี้  ผมขอออกตัวก่อนว่าผมไม่ชำนาญเท่าไหร่นักหรอกในงานกราฟฟิก  พอทำให้แค่พอให้ภาพมันดิ้นๆ ได้เท่านั้นแหละครับ แต่ที่มาเขียนออกมาเป็นเว็บเพจนี้ก็เพื่อกันตัวผมเองลืมวิธีการสร้างไป  เผื่อวันไหนผมอยากทำภาพเคลื่อนไหวเล่นๆ ขึ้นมาแต่ดันลืมก็จะกลับมาเปิดดูวิธีการที่ตัวเองเคยเขียนเอาไว้  แต่ผมก็จะพยายามแนะนำไปเรื่อยๆ (บอกแล้วว่าผมเองก็เพิ่งหัดครับ เลยน่าจะสามารถแนะนำให้คนที่ไม่เคยทำมาก่อนให้ทำได้)

           เริ่มเข้าโปรแกมกันเลยครับ  เปิดโปรแกรม adobe image ready ขึ้นมา ไปที่ file > new หน้าตา และการตั้งค่าต่างๆ ก็จะคล้ายๆ adobe photo shop แหละครับ  จะมีหน้าต่างการกำหนดรายละเอียดต่างๆ เช่น ชื่องาน, ขนาด, ความละเอียด, ขนิดสีของงาน, แบ็กกราวนด์ของงาน ฯลฯ  การทำภาพ animation นี้  ไม่นิยมทำกับภาพที่ใหญ่มากเพราะไฟล์ *.gif  ปกติก็จะมีขนาดความจุที่มากอยู่แล้ว  ยิ่งมาทำเป็น animation จะยิ่งมีขนาดใหญ่มากขึ้นไปอีก จึงไม่ค่อยมีใครนิยมทำภาพนามสกุลนี้ให้มีขนาดภาพที่ใหญ่ ผมกำหนดไว้แบบกลางๆ นะครับว่าไม่ควรเกินขนาด 250 X 250 pixels, สี RGB,ความละเอียด 72 Pixels/Inch ที่สำคัญคือ เลือก Background Contents เป็น Transparent หรือทำให้พื้นงานเป็นพื้นใส หรือ ถ้าหากต้องสร้างให้มีแบ็กกราวน์สีเดียวกับพื้นเว็บ หรือเอาภาพมาใส่พื้นหลัง ก็ใส่แบ็กกราวนด์ทีหลังก็ได้ครับ

             

         
adobe image ready  มีชุดเครื่องมือที่ใช้งานกับงานของเราค่อนข้างจะเยอะพอๆกันกับ adobe photo shop  มีทั้งแบบถูกจัดอยู่ในส่วนที่แยกออกมาต่างหาก ถ้าหากไม่มี เปิดการใช้งานที่ menu > window > tool ใช้งานร่วมกับ menu tools option bar (อยู่ด้านล่างของ เมนูบาร์) จะเป็นส่วนปรับแต่งในรายละเอียดต่างๆของ เครื่องมือที่เลือกใช้ ผมจะค่อยๆแนะนำในส่วนที่จะใช้ไปเรื่อยๆ ส่วนไหนที่ยังไม่ได้แนะนำ ก็ลองใช้ดูเล่นๆ ไปก่อนก็ได้ครับ

          สำหรับการสร้างภาพเคลื่อนไหวนามสกุล *.gif ด้วยคอมพิวเตอร์ ในทุกโปรแกรมมีหลักการก็คือทำให้ภาพนั้นมีหลายๆภาพในชุดเดียวกันเสมือน ซ้อนทับกันอยู่  และภาพชุดนั้นสามารถลำดับการแสดงภาพตามเฟรมที่เรากำหนดได้  สำหรับ adobe image ready ก็เช่นเดียวกัน  ผมขอเริ่มแนะนำงานง่ายๆ 2 หลักการใหญ่ๆ  จากภาพเดี่ยว เลเยอร์เดียวก่อนนะครับ

         
          เปิดโปรแกรม
adobe image ready สร้างงานใหม่ (New) กำหนดพื้นที่ตามชอบครับ  แต่อย่าใหญ่มากนัก  จากตัวอย่างผมตั้งไว้ที่  81 X 108 pixels เลือกพื้นแบบใส อาจเลือกเครื่องมึอ paintbrush tool ในการสร้างภาพ  ในตัวอย่างผมก็ใช้ paintbrush tool สร้างภาพหมีน้อยขึ้นมา  และเมื่อสร้างเสร็จก็   คลิ๊ก 1 ครั้งที่มุมซ้ายล่างของแถบเมนู animation ตรงที่เป็นรูปเอกสารที่มีรอยพับมุมล่าง 1 ครั้ง จะเกิดเฟรมใหม่ขึ้นมา 1 อัน  กด 2 ครั้ง จะเกิดเฟรมใหม่ขึ้นมา 2 อัน จะเอากี่เฟรมก็กดตามจำนวนที่ต้องการเป็นอันเสร็จแล้ว ง่ายไหมครับ  ขอขยายความคำว่าเลเยอร์หน่อยนะครับ  เลเยอร์ เปรียบเหมือนแผ่นใส ที่สามารถแยกออกจากกันในการทำงาน และสามารถนำมารวมกัน เพื่อการแสดงผล สามารถวางทับซ้อนกัน สลับสับเปลี่ยนให้งานไหนอยู่บน - ล่าง โดยการคลิกซ้ายค้าง ลากงานขึ้น - ลง ตามการแสดงผล งานที่อยู่เหนือกว่า จะแสดงผลทับงานที่อยู่ล่างเสมอ  เมื่อสร้างภาพงานแล้ว จะมีหน้าต่างแสดงเลเยอร์แสดงอยู่ ถ้าไม่มีไปที่ เมนูบาร์ > window > ทำเครื่องหมายถูกหน้า layers จากนั้นดูที่แท็บเครื่องมือ คลิกที่แท็บ Layers ก็จะเห็นเลเยอร์งานที่ทำอยู่

          การสร้างเลเยอร์เพิ่ม ที่ด้านล่างของส่วนเลเยอร์ คลิกที่เครื่องหมายสัญลักษณ์ รูปเอกสารพับมุม ถ้าต้องการจะก้อปปี้เลเยอร์ ให้คลิกซ้ายค้างที่เลเยอร์ที่ต้องการ ลากไปที่ สัญลักษณ์ รูปเอกสารพับมุม ส่วนการลบ ก็ใช้การลากเลเยอร์ที่ไม่ต้องการไปที่ สัญลักษณ์ ถังขยะ



          แถบเมนู animation ถ้าไม่มี เปิดได้จาก window > animation  ส่วนถ้าเฟรมไหนที่เราไม่ต้องการ  ก็สามารถลบได้โดยการ ลากเฟรมที่ไม่ต้องการไปที่ สัญลักษณ์ถังขยะเช่นเดียวกับการลบเลเยอร์นั่นเองครับ


          1.เราจะพบว่าหมีน้อยที่สร้างขึ้นมานี้มีภาพ 1 เลเยอร์ แต่มีอยู่มากกว่าสองเฟรม (ตามแต่ว่าใครจะให้ภาพนั้นมีลำดับการเคลื่อนไหวกี่จังหวะนะครับ  แต่อย่าลืมที่บอกข้างต้นว่า ยิ่งหลายเฟรมหรือหลายเลเยอร์ขนาดภาพเคลื่อนไหวของเราก็จะมีขนาดความจุไฟล์มากขึ้นไปด้วยนะครับ) เราจะเริ่มทำงานที่เฟรมที่สองภาพแรกไม่ต้องไปยุ่งอะไรกะมันหรอกครับ
          2. เอาเม้าส์คลิกตรงเฟรมที่สอง   แล้วกดปุ่มลูกศร ขึ้น - ลง  - ซ้าย - ขวา บนคีย์บอร์ดดู  จะเห็นว่าภาพในเฟรมนั้นๆ เริ่มถูกย้ายที่ออกไปจากตำแหน่งเดิม  สมมติว่าผมต้องการให้หมีน้อยนี้เคลื่อนที่ 5 จังหวะ  ผมก็จะต้องสร้างเฟรมนี้ขึ้นมาเพิ่มอีกสี่เฟรม  ดูตัวอย่างนะครับ  ผมก็จะต้องเคลื่อนย้ายหมีตัวนี้ออกเป็นอีกสี่ตำแหน่งในแต่ละเฟรมครับ  จะตำแหน่งไหนนั้นก็ขึ้นกับความชอบของแต่ละคนครับ

(1) (2)( 3)( 4)(5)


          3. หลังจากนั้น ก็มาทำงานกับเฟรมที่สาม  เฟรมที่สี่ เฟรมที่ห้า ทำเหมือนกันครับ   ลองคลิกเม้าส์สลับภาพเฟรมหนึ่งกับห้า เราก็จะเห็น animation ย่อม ๆ ได้เกิดขึ้นแล้ว


          4. ที่แต่ละเฟรมของเรา ด้านล่างจะเห็นส่วนที่ สามารถกำหนดเวลา (time delay) ได้ด้วยว่าเฟรมไหนต้องการให้แสดงเวลาเท่าไหร่ เลือกได้เป็นเฟรมๆ ถ้าจะเลือกในหลายๆ เฟรมที่ต่อกัน คลิ๊กที่เฟรมแรก และกด shift ค้างไว้ คลิกที่เฟรมสุดท้าย จะสามารถเลือกเวลาในทุกเฟรมที่เลือกไว้พร้อมๆ กัน  ทีนี้เรามากำหนดเวลาให้กับ animation กันเลย  อาจจะเป็น 0.2 ให้กับทุกเฟรมก็ได้ครับ
จากนั้น ไปที่ด้าน ล่าง-ซ้าย ของส่วน animation จะมีส่วนให้เลือกว่า จะให้แสดงภาพในลักษณะใด (looping) ถ้าเลือก forever คือการแสดงภาพแบบชนิดที่แสดงภาพแบบวนไปเรื่อยๆ, once คือการแสดงแบบเที่ยวเดียว หรือ เลือกเองว่าจะให้แสดงกี่รอบก็ได้ที่ other

          เราจะทดสอบงานที่สร้างได้ที่ปุ่ม play ที่เป็นรูปสัญลักษณ์สามเหลี่ยมเหมือนเล่นเทปนะแหละครับ  ต้องการหยุดก็กดหยุด  ไม่พอใจแก้ได้ในเฟรมที่ต้องการจนพอใจ จากนั้นก็ถึงขั้นตอน เซฟงาน ไปที่ menu > file ถ้าสั่งเซฟ ธรรมดา (save) จะเซฟไฟล์เป็น *.psd ซึ่งเป็นไฟล์ของ photoshop สามารถกลับมาแก้ได้ทุกเมื่อ และถ้าหากต้องการเซฟเป็นไฟล์ *.gif ต้องเลือกเซฟที่ save optimized as ... เลือกเป็น image only...(*.gif) หรือ ตอนที่ต้องการทดสอบงาน เลือกทดสอบที่ preview in default browser... ถ้าหากพอใจงานที่ทำก็สั่ง save picture as... ก็เสร็จเรียบร้อยแล้วครับ

นี่ไงครับ " หมีกระโดด"  ใช้วิธีจากการสร้างภาพเดี่ยว เลเยอร์เดียว....... ผลงานครูเก๋

          

          วิธีการแรกนั้นเราใช้เพียงภาพเดียว เลเยอร์เดียว  เพียงแต่อาศัยการเลื่อนตำแหน่งเฟรมเท่านั้น  แต่ถ้าเราต้องการให้ชุดภาพนั้นมีการแสดงรายละเอียดการเคลื่อนไหวมากๆ หรือละเอียดมากกว่านั้นเรามักจะใช้เทคนิคการสลับภาพที่เลเยอร์มากกว่า  ดูวิธีการเลยละกันนะครับ

          1. ที่ต้องเตรียมก็คือรูปภาพตามขนาดที่เราต้องการ 2 - 3 ลำดับภาพ  สำหรับการตั้งขนาดนั้นผมคงไม่ขอแนะนำเพิ่มเติมอีกนะครับ  เอาเป็นว่าตามใจชอบก็แล้วกันแต่อย่าให้ใหญ่มาก เพราะไฟล์มันจะใหญ่  ตามตัวอย่างนี้ผมได้รูปคุณติ๊ก  และผมก็อยากให้รูปคุณติ๊กนี้สามารถกระพริบตาได้ ผมจึงได้ทำการตกแต่ง ภาพคุณติ๊กให้หลับตา 1 ภาพ, และลืมตา 1 ภาพ (ต้นฉบับ)  รวมทั้งหมด 2 ภาพหรือ 2 ไฟล์ จากโปรแกรม  adobe image ready นี้แหละ ไม่ต้องให้ผมสอนนะครับว่าลบยังไง  เพราะบอกแล้วว่าผมเองก็เพิ่งจะหัดเหมือนกัน  กว่าจะลบภาพ  กว่าจะตกแต่งภาพคุณติ๊กได้ก็งมๆ หาเครื่องมือของโปรแกรมซะเหนื่อย   อีกอย่างพอเห็นสายตาของคุณติ๊กในภาพ ใจผมมันดันไม่กล้าลบ ไม่กล้าตกแต่ง  มือก็สั่นๆ ยังไงก็ไม่รุเหมือนกัน  อิๆ

  <<<< ภาพคุณติ๊กต้นฉบับ <<<< ภาพคุณติ๊กแต่งให้หลับตา


          2. ทีนี้ก็เหลือแต่สลับภาพสองภาพนี้ให้ทำงานเป็นลำดับครับ  ก็ใช้โปรแกรม   
adobe image ready เปิดภาพใดภาพหนึ่งก็ได้  (ของผมจะเป็นภาพลืมตา) ก็จะปรากฎเลเยอร์ของภาพนั้นขึ้นมา  จากนั้นก็คลิ๊ก file>open ไฟล์ที่ต้องการสลับ (ของผมจะเป็นภาพหลับตา) หน้าต่างโปรแกรมจะเปิดมาดูอีกภาพหนึ่ง  กด Ctrl+c หรือคำสั่ง copy ภาพนี้ซะ

          3. กลับมายังหน้าต่างเดิมอีกครั้ง กด Ctrl+v  หรือ paste ภาพอีกหน้าต่างมาวางไว้ จะเกิดเลเยอร์เพิ่มมาอีกอันหนึ่ง  

          4. ไปดูที่ แถบเมนู animation ทำการกด คลิกที่เครื่องหมายสัญลักษณ์ รูปเอกสารพับมุม  จะเกิดเฟรมขึ้นมาอีก 1 อัน  คราวนี้ให้มาดูที่เลเยอร์จะเห็นสัญลักษณ์ รูปลูกตา  ให้จำเอาไว้ว่า  " เลเยอร์ไหนที่ต้องการจะโชว์ให้เห็นในเฟรม จะต้องมีสัญลักษณ์รูปลูกตานี้เสมอ "  ซึ่งหมายความว่าถ้าไม่มีรูปลูกตานี้ปรากฎให้เห็นแล้ว เลเยอร์นั้นจะมองไม่เห็นนั่นเองครับ  เอาละครับ  เมื่อรู้อย่างนี้เราก็มาปรับตั้งเอาเลย  ผมต้องการให้รูปคุณติ๊กในเฟรมที่ 1 ลืมตา  เพราะฉะนั้น ในเลเยอร์ที่หนึ่ง จะมีรูปลูกตาอยู่   ส่วนในเลเยอร์ที่สองจะไม่มี วิธีการใส่สัญลักษณ์รูปลูกตาหรือเอาสัญลักษณ์นี้ออก ก็เพียงแต่คลิ๊กที่ตัวสัญลักษณ์นี้ก็จะหาย หรือคลิ๊กที่ตัวสัญลักษณ์นี้อีกทีก็จะปรากฎให้เห็นแล้วครับ

          5. ที่ แถบเมนู animation คลิ๊กเฟรมที่ 2  ทำการกด คลิ๊กสัญลักษณ์รูปลูกตาให้มองเห็นเลเยอร์ที่สอง  และปิดภาพเลเยอร์ที่หนึ่งซะ  ทำการกำหนดเวลาในแต่ละเฟรม ทดสอบงานที่สร้างได้ที่ปุ่ม play เหมือนดังวิธีการแรกแล้ว save ไฟล์เป็น *.gif เป็นอันเสร็จ  ซึ่งอาจจะกำหนดเวลาในแต่ละเฟรมไม่เท่ากันก็ได้ เช่นในรูปนี้ผมทำภาพคุณติ๊กให้มี 4 เฟรม และตั้งเวลาไม่เท่ากัน  ก็ได้ภาพที่ออกมาน่ารักดีไปอีกแบบ

งครับ ....... ผลงานนี้  ภาพคุณติ๊กกระพริบตา  น่ารักดีไหม

เจอกันใหม่โอกาสหน้า ถ้าง่วงๆ แล้วจะแอบมาเขียนบทความแก้ง่วงกันใหม่ครับ          ครูเก๋ ..... วีระวัฒน์  ทองงาม    สวก. มทร. ล้านนา ลำปาง
 

 

Nedstat Basic - Free web site statistics
Personal homepage website counter