การสร้างแอนิเมชั่นด้วย Flash

1. ความรู้ทั่วไปเกี่ยวกับโปรแกรม Flash

   โปรแกรม Flash คืออะไร ?

โปรแกรม Flash เป็นซอฟต์แวร์ที่ช่วยในการสร้างสื่อมัลติมีเดีย, ภาพเคลื่อนไหว (Animation), ภาพกราฟิกที่มีความคมชัด เนื่องจากเป็นกราฟิกแบบเว็คเตอร์(Vector), สามารถเล่นเสียงและวีดิโอ แบบสเตริโอได้, สามารถสร้างงานให้โต้ตอบกับ
ผู้ใช้(Interactive Multimedia) มีฟังก์ชั่นสำหรับการเขียนโปรแกรม (Action Script) และยังทำงานในลักษณะ CGI โดยเชื่อมต่อกับ การเขียนโปรแกรมภาษาอื่นๆ ได้มากมาย เช่น ภาษา PHP, JSP, ASP, ASP.NET, C/C++, C#, C#.NET, VB, VB.NET, JAVAและอื่นๆ โดยเฉพาะข้อดีของโปรแกรม Flash คือ ความสามารถในการบีบอัดไฟล์ให้มีขนาดเล็ก มีผลทำให้แสดงผลได้อย่างรวดเร็ว นอกจากนั้นยังแปลงไฟล์ไปอยู่ในฟอร์แมตอื่น ได้หลากหลาย เช่น avi, mov, gif, wav, emf,eps, ai, dxf, bmp, jpg, gif, png เป็นต้น

การเปิดใช้งานโปรแกรม

วิธีที่ 1 ดับเบิลคลิกรูปสัญลักษณ์ icon Desktop ดังภาพ   

 วิธีที่ 2 คลิกปุ่ม Start > Programs > Macromedia > Macromedia Flash 8

โปรแกรมจะเริ่มทำงานแล้วเข้าสู่หน้าต่างต้อนรับดังภาพ

3. ส่วนประกอบของโปรแกรม Flash 8

หมายเลข 1 คือ	Title Bar แสดงปุ่มควบคุมหลัก (Control Menu) ชื่อโปรแกรม และปุ่มควบคุมหน้าต่างโปรแกรม
หมายเลข 2 คือ	Menu Bar แสดงรายการคำสั่งต่างๆ ของโปรแกรม
หมายเลข 3 คือ	Toolbar แสดงปุ่มเครื่องมือการทำงานมาตรฐานของโปรแกรม เช่น ปุ่มเปิดงานใหม่เปิดไฟล์เอกสาร, จัดเก็บไฟล์ เป็นต้น
หมายเลข 4 คือ	Toolbox แสดงปุ่มเครื่องมือเกี่ยวกับการวาดภาพ สร้างภาพ
หมายเลข 5 คือ	Timeline หน้าต่างแสดงเส้นควบคุมเวลาสำหรับการนำเสนอผลงาน ประกอบด้วยส่วนทำงาน  เกี่ยวกับ Layer และ Timeline
หมายเลข 6 คือ	Stage พื้นที่ส่วนที่ใช้ในการวางวัตถุต่างๆ หรืออาจจะเรียกว่า "เวที" เมื่อมีการนำเสนอผลงานจะ แสดงเฉพาะวัตถุบน Stage เท่านั้น
หมายเลข 7 คือ	Panel หน้าต่างควบคุมฟังก์ชันงาน ซึ่งมีหลายฟังก์ชัน (หลายหน้าต่าง)

แถบคำสั่ง (Menu Bar)

แถบคำสั่ง (Menu bar) ประกอบด้วยคำสั่งต่าง ๆ สำหรับใช้งานทั่วไป เหมือนโปรแกรมอื่น ๆ
ได้แก่ เมน ูFile, Edit, Insert, Modify, Text, Commands, Control, Windows และ Help

      

แถบเครื่องมือ (Tool Bar)

            

ในการเปิดใช้งานครั้งแรกแถบเครื่องมือจะไม่แสดงให้คลิกที่เมนู Windows > Toolbars > แล้วคลิกทำเครื่องหมายถูกที่ Main, Controller และ Edit Bar ดังภาพ
          

        

กล่องเครื่องมือ (Toolbox)

กล่องเครื่องมือ (Toolbox) เป็นส่วนที่เก็บเครื่องมือต่างๆ เพื่อให้สามารถเรียกใช้งานได้สะดวกและรวดเร็วขึ้น แบ่งเป็นกลุ่มต่างๆ เพื่อสะดวกในการเรียกใช้งาน ดังภาพ

 

1. รายละเอียดกลุ่มเครื่องมือสำหรับเลือก

  

2. รายละเอียดกลุ่มเครื่องมือสำหรับวาดและตกแต่งภาพ

  

3. รายละเอียดกลุ่มเครื่องมือสำหรับปรับมุมมอง

 

4. รายละเอียดกลุ่มเครื่องมือสำหรับปรับสีเส้นและสีพื้นหลัง

5. ถาดเครื่อง (Palate Tool) อยู่ด้านขวามือของหน้าจอเช่น ถาดปรับแต่งสี ถาดเก็บทรัพยกรต่างๆ

ถาดปรับแต่งสี (Color Mixer Palate)ใช้เลือกสีเส้นและสีพื้นหลังรวมถึงผสมสีแบบต่างๆ

ถาดเก็บทรัพยากรต่างๆ (Library Palate) เช่น ซิมโบล เสียง ภาพ วิดีโอ เป็นต้น

Timeline Frame และ Layer

Timeline เป็นส่วนที่กำหนดความสั้นยาวของมูฟวี่ (Movie)Frame    เป็นส่วนที่เก็บข้อมูลซึ่งอาจเป็นคำสั่ง รูปภาพหรือข้อความที่แสดงให้ผู้ชมได้เห็น 
Layer      เป็นส่วนที่เก็บข้อมูล แยกออกจากกันเป็นชั้นๆเหมือนแผ่นใสเพื่อง่ายต่อการจัดการและแก้ไข
Stage     เป็นพื้นที่แสดงมูฟวี่ (Movie) ที่อยู่ในเฟรม (Frame) และ เลเยอร์ (Layer)

 

1. ปุ่มแสดงหรือซ่อน Timeline  2. เลเยอร์ เฟรมจะต้องวางบนเลเยอร  3. ปุ่มซ่อนและแสดงข้อมูลบนเลเยอร์  4. ปุ่มอนุญาตให้แก้ไขและป้องการแก้ไข     ข้อมูลบนเลเยอร์   5. เพลย์เฮดหัวอ่านเฟรมแต่ละช่อง  6. หมายเลขประจำเฟรม  7. เฟรม เปรียบเหมือนช่องเก็บเหตุการณ์ของมูฟวี่  8. ปุ่มสร้างเลเยอร์ใหม่  9. ปุ่มสร้างไกด์เลเยอร์ 10.ปุ่มสร้างโฟล์เดอร์เลเยอร์

11. ปุ่มลบเลเยอร์ 12. ปุ่มเซ็นเตอร์เฟรม 13. ปุ่มโอเนียน สกิน 14. ปุ่มโอเนียน สกินแบบโครงร่าง 15. ปุ่มแก้ไขเฟรมหลายเฟรมพร้อมกัน 16. ปุ่มโอเนียนมาร์คเกอร์ 17. บอกตำแหน่งหมายเลขเฟรมในขณะทำงาน18. บอกความเร็วการแสดงกี่เฟรมต่อวินาที19. เวลาที่ใช้ในการมูฟวี่

ที่มา:http://www.kroojan.com/flash/content/flash-intro.html#

ตัวอย่าง Stop motion

การทำพิซซ่า

การทำอาหารโดยการใช้สิ่งอื่นมาประกอบแทน

การทำขนมปังโทส

 การ์ตูนที่ใช้การนำเสนอรูปแบบแบบStop motion

Stop motion คืออะไร?

ความหมายของ Stop motion

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

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

เทคนิค

สต็อปโมชั่นมีเทคนิคทำได้หลากหลาย เช่น

·     เคลย์แอนิเมชัน (Clay animation –เรียกย่อๆ ว่า เคลย์เมชั่น / claymation)

คือแอนิเมชันที่ใช้หุ่นซึ่งทำจากดินเหนียว ขี้ผึ้ง หรือวัสดุใกล้เคียง โดยใส่โครงลวดไว้ข้างในเพื่อให้ดัดท่าทางได้

·     คัตเอาต์แแอนิเมชัน (Cutout animation)

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

·     กราฟิกแอนิเมชัน (Graphic animation)

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

·     โมเดลแอนิเมชัน (Model animation)

คือการทำตัวละครโมเดลขึ้นมาขยับ แล้วซ้อนภาพเข้ากับฉากที่มีคนแสดงจริงและแบ็คกราวด์เหมือนจริง

·     แอนิเมชันที่เล่นกับวัตถุอื่นๆ (Object animation)

ไม่ว่าจะเป็นของเล่น หุ่น ตุ๊กตา ตัวต่อเลโก้ ฯลฯ อะไรก็ตามที่ไม่ใช่วัสดุซึ่งดัดแปลงรูปร่างหน้าตาได้แบบดินเหนียว

พิกซิลเลชั่น (Pixilation)

เป็นสต็อปโมชั่นที่ใช้คนจริงๆ มาขยับท่าทางทีละนิดแล้วถ่ายไว้ทีละเฟรม เทคนิคนี้เหมาะมากถ้าเราทำแอนิเมชันที่มีหุ่นแสดงร่วมกับคน และอยากให้ทั้ง หุ่นทั้งคนดูเคลื่อนไหวคล้ายคลึงกัน หรือที่อยากได้อารมณ์กระตุกๆ

อ้างอิง

Lord, Peter and Brian Sibley. Creating 3-D Animation. Harry N. Abrams, New York, 1998. ISBN 0-8109-1996-6

Animation คืออะไร?

แอนิเมชัน (Animation) หมายถึง กระบวนการที่เฟรมแต่ละเฟรมของภาพยนตร์ ถูกผลิตขึ้นต่างหากจาก กันทีละเฟรม แล้วนำมาร้อยเรียงเข้าด้วยกัน โดยการฉายต่อเนื่องกัน ไม่ว่าจากวิธีการ ใช้คอมพิวเตอร์กราฟิก ถ่ายภาพรูปวาด หรือ หรือรูปถ่ายแต่ละขณะของหุ่นจำลองที่ค่อย ๆ ขยับเมื่อนำภาพดังกล่าวมาฉาย ด้วยความเร็ว ตั้งแต่ 16 เฟรมต่อวินาที ขึ้นไป เราจะเห็นเหมือนว่าภาพดังกล่าวเคลื่อนไหวได้ต่อเนื่องกัน ทั้งนี้เนื่องจาก การเห็นภาพติดตาในทาง คอมพิวเตอร์ การจัดเก็บภาพแบบอนิเมชันที่ใช้กันอย่างแพร่หลายในอินเทอร์เน็ต ได้แก่เก็บในรูปแบบ GIF MNG SVG และ แฟลช

ชนิดของแอนิเมชั่น สามารถแบ่งออกได้เป็นสามชนิดคือ

1. Drawn Animation คือแอนิเมชั่นที่เกิดจากการวาดภาพหลายๆพันภาพ แต่การฉายภาพเหล่านั้นผ่านกล้องอาจใช้เวลาไม่กี่นาที ข้อดีของการทำแอนิเมชั่นชนิดนี้คือ มีความเป็นศิลปะสวยงามน่าดูชม แต่ข้อเสียคือต้องใช้เวลาในการผลิตมากต้องใช้แอนิเมเตอร์จำนวนมากและต้นทุน ก็สูงตามไปด้วย

 

2. Stop Motion หรือเรียกว่า Model Animation เป็นการถ่ายภาพแต่ละขณะของหุ่นจำลองที่ค่อยๆขยับ อาจจะเป็นของเล่นหรืออาจจะสร้างตัวละครจาก Plasticine วัสดุที่คล้ายกับดินน้ำมันโดยโมเดลที่สร้างขึ้นมาสามารถใช้ได้อีกหลายครั้ง และยังสามารถผลิตได้หลายตัว ทำให้สามารถถ่ายทำได้หลายฉากในเวลาเดียวกัน แต่การทำ Stop Motmotion นั้นต้องอาศัยเวลาและความทุ่มเทมาก เช่น การผลิตภาพยนตร์เรื่อง James and the Giant Peach สามารถผลิตได้ 10 วินาที ต่อวันเท่านั้น วิธีนี้เป็นงานที่ต้องอาศัยความอดทนมาก

3. Computer Animation 
ปัจจุบันมีซอฟท์ที่สามารถช่วยให้การทำแอนิเมชั่นง่ายขึ้น เช่น โปรแกรม Maya, Macromediaและ 3D Studio Max เป็นต้น วิธีนี้เป็นวิธีที่ประหยัดเวลาการผลิตและประหยัดต้นทุนเป็นอย่างมาก เช่น ภาพยนตร์เรื่องToy Story ใช้แอนิเมเตอร์เพียง 110 คนเท่านั้น

ที่มา
http://www.kanlayanee.ac.th/animation/web/animation.htm

องค์ประกอบของระบบสารสนเทศ

องค์ประกอบของระบบสารสนเทศ  

        

   

มี 5 องค์ประกอบ  ได้แก่  ฮาร์ดแวร์   ซอฟต์แวร์   ข้อมูล บุคลากร  และขั้นตอนการปฏิบัติงาน

       ฮาร์ดแวร์เป็นองค์ประกอบสำคัญ หมายถึง เครื่องคอมพิวเตอร์และอุปกรณ์รอบข้าง

       ซอฟต์แวร์หรือโปรแกรมคอมพิวเตอร์ เป็นชุดคำสั่งที่สั่งให้ฮาร์ดแวร์ทำงาน

       ข้อมูล เป็นส่วนที่จะนำไปจัดเก็บในเครื่องคอมพิวเตอร์

       บุคลากรเป็นผู้ที่มีส่วนเกี่ยวข้องกับงานคอมพิวเตอร์

       ขั้นตอนการปฏิบัติงาน เป็นสิ่งที่จะต้องเข้าใจเพื่อให้ทำงานได้ถูกต้องเป็นระบบ

HTML คืออะไร?

HTML

HTML หรือชื่อเต็มๆ ก็คือ Hypertext Markup Language เป็นภาษาประเภท Markup ที่ออกแบบมาเพื่อใช้ในการสร้างเว็บเพจ มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ รูปภาพ เสียง อื่นๆ ที่สามารถเรียกดูผ่านทางเว็บเบราว์เซอร์ได้ แต่ละ Tag สามารถระบุหรือควบคุมการแสดงผลของเว็บให้เป็นไปตามที่ผู้ออกแบบเว็บไซต์กำหนดไว้ หรือจะให้เข้าใจง่ายๆ ก็คือ เว็บที่เราเข้าอยู่ในทุกๆ วันนี้ ก็ล้วนถูกแสดงผลด้วยโค้ด HTML ทั้งนั้น

HTML พัฒนามาจากภาษา SGML และถูกพัฒนามาเรื่อยๆ ตั้งแต่เวอร์ชั่นแรก สู่เวอร์ชั่น HTML 2.0, HTML 3.2, HTML 4.1 และตัวล่าสุดคือ HTML 5 (ซึ่งอยู่ในระหว่างการพัฒนา) และยังมีการพัฒนารูปแบบของ HTML แบบใหม่ที่เรียกกันว่า XHTML ซึ่งมีความสามารถและมาตราฐานที่รัดกุมกว่า

HTML มีรูปแบบการเขียนที่ชัดเจน จะประกอบด้วย Tag พื้นฐาน ดังนี้

Tag  <html>…</html>

 เป็นส่วนประกาศที่กำหนดหัวละท้ายของเอกสาร เพื่อให้บราว์เซอร์ทราบและแสดงผลได้ถูกต้อง

Tag <head>…</head>

 เป็นส่วนหัวเรื่องของเอกสาร ภายในจะมี Tag <title>…</title> ใช้สำหรับการกำหนดชื่อของเอกสาร

Tag <body>…</body>  

เป็นส่วนที่มีรายละเอียดมากที่สุด จะบรรจุข้อมูลต่างๆ ที่ต้องการให้แสดงบนหน้าเว็บไซต์ของเรา ทั้งข้อความ รูปภาพ เป็นต้น

Responsive Web คืออะไร?

Responsive Web  คืออะไร? 

ความหมาย และ ความสำคัญ ของ Responsive Web Design

     Responsive Web Design คือ การออกแบบเว็บไซต์ด้วยแนวคิดใหม่ ที่จะทำให้เว็บไซต์ สามารถแสดงผลได้อย่างเหมาะสม บนอุปกรณ์ที่แตกต่างกัน โดยใช้ โค้ดร่วมกัน URL เดียวกัน เพื่อแก้ปัญหาดังกล่าว หรือก็คือสามารถเปิดได้กับทุกเครื่อง

ข้อเสียของ Responsive Web Design

    เนื่องจากการเขียนโค้ดเดียว ให้รองรับหลายๆ Devices จึงอาจทำให้เกิดปัญหา เช่น โทรศัพท์มือถือที่มีหน้าจอขนาดเล็ก ถึงแม้เราจะซ่อนเนื้อหาบางส่วนที่ไม่จำเป็นเอาไว้ เช่น โฆษณา แต่ในบางเว็บบราวเซอร์ ข้อมูลเหล่านี้ยังจะถูกโหลดเข้ามาอยู่ รวมไปถึงเรื่องของ Image Resizing ที่เราไม่ได้ไปลด File Size ของตัว Image จริงๆ ทำให้โทรศัพท์มือถือจำเป็นต้องโหลดรูปเดียวกับรูปที่ใช้แสดงบน Desktop ทำให้เสียเวลาโดยไม่จำเป็น