17
บบ 7 บบบบบบบบบบบ บบบบบบบบบบบบบบบบ

หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

Embed Size (px)

Citation preview

Page 1: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

บทท�� 7 ใช้�งานภาพบ�ทแมพและเวคเตอร์�จากภายนอก

Page 2: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

ปร์ะเภทของไฟล�ภาพและการ์อ�มพอร์�ตเข�าสู่"# Flash

ค$ณสู่ามาร์ถอ�มพอร์�ตไฟล�ภาพกร์าฟ'กเข�ามาใช้�งานใน Flash ได้�หลายปร์ะเภทด้*งน�+- ภาพบ�ทแมพ Flash สู่ามาร์ถน,าเข�าภาพบ�ทแมพช้น�ด้ต#างๆ ไม#ว#าจะเป.น JPG, GIF, BMP, PNG, TIFF, PCT และ PSD

- ภาพเวคเตอร์� Flash ร์"�จ*กไฟล�ภาพเวคเตอร์ท��น�ยมใช้�ก*น ไม#ว#าจะเป.น WMF, EMF, AI, DXF, SGI, PNTG, QTIF, TGA, FreeHand (.fh) และม"ฟว��ของ FutureSplash Player (.spl)

- ภาพเคล/�อนไหว ใช้�ได้�ท*+งแบบ animated GIF และไฟล�ม"ฟว��ของ Flash (.swf)

Page 3: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

ร์"ปแบบการ์อ�มพอร์�ตการ์อ�มพอร์�ตไฟล�ภาพไม#ว#าจะเป.นปร์ะเภทบ�ท

แมพ, เวคเตอร์� และภาพเคล/�อนไหว (ร์วมท*+งไฟล�เสู่�ยง)ท,าได้� 2 ว�ธี�ด้�วยก*น ซึ่2�งค$ณสู่ามาร์ถเล/อกใช้�ว�ธี�ใด้ว�ธี�หน2�งได้�ตามความเหมาะสู่มด้*งน�+

- Import to Stage เป.นการ์วางภาพไว�บนสู่เตจของซึ่�นท��ก,าล*งเป'ด้อย"# ร์วมท*+งอาจจะน,าภาพน�+ไปเก3บในไลบร์าร์�ให�ด้�วยอ*ตโนม*ต�

- Import to Library เป.นการ์น,าภาพเข�ามาเก3บไว�ในไลบร์าร์�ในร์"ปของซึ่�มโบลก#อน ซึ่2�งเม/�อต�องการ์ใช้�งานค$ณก3สู่ามาร์ถคล�กลากจากไลบร์าร์�ออกมาวางบนสู่เตจอ�กท�หน2�ง

Page 4: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

อ�มพอร์�ตและใช้�งานภาพบ�ทแมพอ�มพอร์�ตแบบภาพต#อภาพ

ค$ณสู่ามาร์ถใช้�ค,าสู่*�ง Import to Stage หร์/อ Import to Library เพ/�อน,าภาพใด้ภาพหน2�งหร์/อหลายภาพมาใช้�งานได้� โด้ยม�ข*+นตอนด้*งน�+

Page 5: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

อ�มพอร์�ตช้$ด้ภาพมาเร์�ยงเป.นเฟร์มถ�าภาพอย"#ในโฟลเด้อร์�เด้�ยวก*น โด้ยม�ช้/�อไฟล�

เหม/อนก*นแต#ลงท�ายด้�วยต*วเลขท��เป.นล,าด้*บต#อเน/�อง เช้#น DSC001, DSC002,…หร์/อ baby_02,baby_03,…เป.นต�น โปร์แกร์มจะย�นยอมให�ค$ณน,าภาพเหล#าน*+นมาเร์�ยงต#อก*นเป.นเฟร์มภาพเคล/�อนไหวได้� ซึ่2�งข�อด้�ค/อ ถ�าภาพช้$ด้น*+นถ"กถ#ายมาแบบต#อเน/�องก3จะท,าให�ได้�ภาพท��ม�การ์เคล/�อนไหว (เร์�ยกว#า ภาพเคล/�อนไหวแบบ Frame-by-Frame) ขณะแสู่ด้งผล ซึ่2�งการ์อ�มพอร์�ตว�ธี�น�+จะต�องใช้�ค,าสู่*�ง Import to Stage เท#าน*+น โด้ยม�ข*+นตอนด้*งน�+

Page 6: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

ปร์*บแต#งภาพบ�ทแมพปร์*บแต#งค$ณสู่มบ*ต�ของภาพบ�ทแมพ

ภาพบ�ทแมพท��อ�มพอร์�ตเข�ามาน*+น ค$ณสู่ามาร์ถปร์*บแต#งค$ณสู่มบ*ต�บางอย#างได้� เช้#น การ์ปร์*บภาพให�น$#มเพ/�อลด้ร์อยหย*กบร์�เวณร์อยต#อของสู่�, การ์ก,าหนด้ร์ะด้*บการ์บ�บอ*ด้ข�อม"ล และการ์ปร์*บปร์$งภาพในม"ฟว��ใหม#หากไฟล�ต�นฉบ*บภายนอกถ"กแก�ไข เป.นต�นแก�ไขภาพต�นฉบ*บ

หล*งจากน,าภาพบ�ทแมพมาใช้�งานแล�ว หากต�องแก�ไขร์ายละเอ�ยด้หร์/อปร์*บแต#งเน/+อหาของภาพต�นฉบ*บ เช้#น ปร์*บแต#งสู่� หร์/อต*ด้ต#อภาพบางสู่#วน เป.นต�น ท,าได้�โด้ยอาศั*ยโปร์แกร์มกร์าฟ'กท��สู่ามาร์ถแก�ไขภาพบ�ทแมพได้� เช้#น Photoshop, Fireworks, MS-Paint หร์/อ ACDSee เป.นต�น โด้ยม�ข*+นตอนด้*งน�+

Page 7: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

6 ĕôúŤõćóÝąëĎÖđðŗé×ċĚîöćéšü÷ēðøĒÖøöìĊęđúČĂÖǰĔĀšĒÖšĕ×õćóêćöêšĂÜÖćøÝîđÿøĘÝ ǰǰǰǰĒúšüĔßšÙĞćÿĆęÜïĆîìċÖĒúąðŗéĕôúŤõćóǰ

สู่ล*บภาพบ�ทแมพเม/�อต�องการ์เปล��ยนหร์/อสู่ล*บภาพบ�ทแมพท��วา

งบนสู่เตจให�ไปเป.นภาพอ/�นๆ สู่ามาร์ถท,าได้�โด้ยค$ณต�องอ�มพอร์�ตภาพท��ต�องการ์แทนท��เข�ามาเก3บไว�ในไลบร์าร์�เสู่�ยก#อน แล�วใช้�ค,าสู่*�ง swap เพ/�อเปล��ยนภาพ

Page 8: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

แปลงภาพบ�ทแมพไปเป.นภาพเวคเตอร์�การ์แปลงภาพบ�ทแมพให�เป.นภาพเวคเตอร์�

จะช้#วยให�ค$ณสู่ามาร์ถปร์*บแต#งองค�ปร์ะกอบภายในของภาพได้�ในล*กษณะเด้�ยวก*บออบเจ3คท*�วไปท��สู่ร์�างจาก Flash และข�อด้�อ�กอย#างค/ออาจจะช้#วยให�ขนาด้ไฟล�เล3กลงด้�วยนอกจากน�+ย*งอาจก,าหนด้ค#าการ์แปลงเพ/�อให�ได้�ภาพท��ด้"คล�ายก*บภาพวาด้ ซึ่2�งก3สู่วยงามไปอ�กแบบหน2�งได้�

Page 9: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

ออปช้*�นการ์แปลงภาพในข*+นตอนท�� 3 ให�ก,าหนด้ต#างๆบน

ได้อะล3อกบ3อกซึ่� Trace Bitmap ด้*งน�+- Color threshold ก,าหนด้ร์ะด้*บความแตกต#างของสู่� (ต*+งแต# 0-100) ซึ่2�งหากบร์�เวณใด้ม�ค#าสู่�แตกต#างก*นน�อยกว#าค#าท��ก,าหนด้ โปร์แกร์มจะร์วมให�เป.นพ/+นท��ท��ใช้�สู่�เด้�ยวก*น ด้*งน*+น การ์ก,าหนด้ค#าท��ต,�าก3จะท,าให�ได้�ภาพผลล*พธี�ท��เหม/อนต�นฉบ*บมากกว#าค#าท��สู่"ง แต#ก3จะท,าให�ขนาด้ไฟล�ใหญ่#ข2+นด้�วย- Minimum area ก,าหนด้จ,านวนพ�กเซึ่ลใกล�เค�ยงท��จะถ"กเปล��ยนสู่�ไปด้�วยก*น โด้ยค#าต,�าจะให�ภาพท��ม�ร์ายละเอ�ยด้ด้�กว#าค#าสู่"งๆ - Curve fit ก,าหนด้ว#าจะให�เสู่�นขอบของสู่�ในสู่#วนต#างๆ เร์�ยบโค�งมากเพ�ยงใด้ ถ�าย��งก,าหนด้ให�เร์�ยบมาก ผลล*พธี�ก3จะย��งเพ�+ยนไปจากต�นฉบ*บ- Corner threshold ก,าหนด้ว#าจะให�คงม$มท��แหลมๆของเสู่�นขอบสู่�ในภาพไว� หร์/อปร์*บให�ม$มเหล#าน*+นเร์�ยบข2+น

Page 10: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

อ�มพอร์�ตไฟล� PSD จาก Photoshopถ�าหากค$ณม�ช้�+นงานกร์าฟ'กท��สู่ร์�างด้�วย

Photoshop ไว�แล�ว เม/�อต�องการ์น,าเสู่นอเป.นภาพเคล/�อนไหวก3น,าไฟล� PSD ด้*งกล#าวมาใช้�ได้�ท*นท� โด้ยค$ณสู่ามาร์ถก,าหนด้ค$ณสู่มบ*ต�ของออบเจ3คในเลเยอร์�ต#างๆได้�ตามความเหมาะสู่ม

การ์ก,าหนด้ค$ณสู่มบ*ต�ของออบเจ3คในเลเยอร์�ของไฟล� PSDเป.นการ์ก,าหนด้ว#าออบเจ3คแต#ละช้น�ด้จากเลเยอร์�ของไฟล� PSD น*+นจะถ"กน,ามาใช้�อย#างไร์ใน Flash ออปช้*�นการ์วางเลเยอร์�ร์"ฟภาพ (Image layer)

ถ�าเลเยอร์�น*+นเป.นภาพบ�ทแมพ จะม�ออปช้*�นต#างๆใหก,าหนด้ด้*งน�+A การ์วางร์"ปภาพ โด้ยให�เล/อกร์ะหว#าง- Bitmap image…หากเลเยอร์�น*+นม�การ์ปร์*บแต#งด้�วยเลเยอร์�สู่ไตล�ก3คงไว�ด้�วย (เลเยอร์�สู่ไตล�จะถ"กเปล��ยนเป.นภาพบ�ทแมพอ�กช้�+นหน2�ง)- Flattened bitmap…ย$บร์วมร์"ปภาพและเลเยอร์�สู่ไตล�ให�เป.นภาพบ�ทแมพเพ�ยงเลเยอร์�เด้�ยว

Page 11: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

B แปลงร์"ปภาพให�เป.นซึ่�มโบลม"ฟว��คล�ป โด้ยเล/อก Create movie clip

- Instance name ต*+งช้/�ออ�นสู่แตนซึ่�ของม"ฟว��คล�ป

- Registration คล�กเล/อกจ$ด้อ�างอ�งของภาพในม"ฟว��คล�ปC ก,าหนด้การ์บ�บอ*ด้ข�อม"ลภาพเม/�อพ*บล�ช้ไฟล�ม"ฟว�� SWF

- Compression เล/อกว�ธี�การ์บ�บอ*ด้ข�อม"ล โด้ย Lossy จะบ�บอ*ด้แบบลด้ค$ณภาพ (เหมาะก*บภาพถ#าย) และ Lossless จะบ�บอ*ด้โด้ยคงค$ณภาพของภาพไว�ตามเด้�ม (เหมาะก*บภาพลายเสู่�นหร์/อภาพสู่�ท2บ)

- Quality ก,าหนด้ค#าการ์บ�บอ*ด้ โด้ย Use publish setting จะใช้�ตามค#าซึ่2�งจะก,าหนด้ตอนพ*บล�ช้และ Custom ก,าหนด้ค#าการ์บ�บอ*ด้เองโด้ยม�ค#าต*+งแต# 0-100

- คล�กป$:ม Calculate Bitmap Size เพ/�อให�แสู่ด้งผลของการ์บ�บอ*ด้ขนาด้ภาพตามท��ก,าหนด้ข�างต�น

Page 12: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

ออปช้*�นการ์วางเลเยอร์�ข�อความ (Text Layer)ออปช้*�นของเลเยอร์�ข�อความโด้ยสู่#วนใหญ่#จะ

เหม/อนก*นก*บเลเยอร์�ภาพบ�ทแมพแต#ม�บางสู่#วนท��ต#างก*นค/อ การ์วางร์"ปภาพ ซึ่2�งม� 3 แบบค/อ- Editable text วางเป.นข�อความ ซึ่2�งจะสู่ามาร์ถปร์*บแต#งฟอนต�และแก�ไขข�อความด้�วยการ์พ�มพ�ได้�- Vector outlines วางเป.นภาพเวคเตอร์� ท��ม�เสู่�นพาธีเป.นโค�งร์#างต*วอ*กษร์ สู่ามาร์ถปร์*บแต#งร์"ปทร์งจากเสู่�นพาธีได้� (เหม/อนก*บการ์ break apart ต*วอ*กษร์)

- Flattened bitmap image วางเป.นภาพบ�ทแมพซึ่2�งไม#สู่ามาร์ถแก�ไขได้�

Page 13: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

ออปช้*�นการ์วางเลเยอร์�ร์"ปทร์ง (Shape Layer) สู่,าหร์*บเลเยอร์�ร์"ปทร์ง หร์/อเลเยอร์�ท��ม�เวคเตอร์�มาสู่ก�ก3จะม�สู่#วนท��ต#างออกไปด้*งน�+ - Editable path and layer styles ให�ร์"ปทร์งน*+นย*งคงเป.นร์"ปทร์งใน Flash ซึ่2�งสู่ามาร์ถแก�ไขได้� - Flatten bitmap image ย$บร์วมร์"ปทร์งและเลเยอร์�สู่ไตล�ให�เป.นภาพบ�ทแมพช้�+นเด้�ยวออปช้*�นอ/�นๆ - Convert layers to เล/อกร์"ปแบบการ์วาง โด้ย Flash Layers ค/อวางภาพจากแต#ละเลเยอร์�ของ Photoshop ไว�ในเฟร์มแร์กของ Flash โด้ยแยกเป.นแต#ละเลเยอร์�เช้#นก*น และ Keyframes ค/อวางเป.นคนละค�ย�เผ�มต#อๆก*นไปในเลเยอร์�เด้�ยวก*น - Place layers at… เล/อกเพ/�อให�วางภาพในต,าแหน#งช้�ด้ม$มบนซึ่�ายของสู่เตจ ถ�าไม#เล/อกจะวางตร์งกลางว�นโด้ว�โปร์แกร์ม (เฉพาะค,าสู่*�ง Import to Stage) - Set stage size to…เล/อกเพ/�อปร์*บสู่เตจให�ม�ขนาด้เท#าก*บภาพท��อ�มพอร์�ตเข�ามา (เฉพาะค,าสู่*�ง Import to Stage)

Page 14: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

อ�มพอร์�ตไฟล� Al จาก IllustratorAdobe Illustrator เป.นโปร์แกร์มท��ใช้�

สู่,าหร์*บสู่ร์�งไฟล�ภาพแบบเวคเตอร์� ค$ณสู่ามาร์ถน,าไฟล� AI เข�ามาใช้�งานใน Flash ได้�โด้ยย*งคงค$ณสู่มบ*ต�ของออบเจ3คแบบเวคเตอร์�ต#างๆไว�ค#อนข�างสู่มบ"ร์ณ� เช้#น ค$ณสู่มบ*ต�ของเลเยอร์�, ข�อความ, ร์"ปทร์ง และสู่�ของภาพ เป.นต�นก,าหนด้ค$ณสู่มบ*ต�ของออบเจ3คจากไฟล� AI A การ์วางออบเจ3ค โด้ยให�เล/อกร์ะหว#าง

- Edittable path ให�วางออบเจ3คแบบเวคเตอร์�ของ Illustrator เป.นร์"ปทร์งแบบ Object Drawing ซึ่2�งจะสู่ามาร์ถแก�ไขได้�

- Bitmap ให�แปลงออบเจ3คเป.นร์"ปภาพบ�ทแมพ

- Import as bitmap (กร์ณ�เล/อกเลเยอร์�) ย$บร์วมเลเยอร์�ให�เป.นภาพบ�ทแมพช้�+นเด้�ยว

Page 15: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

ก;อปป<+ ออบเจ3คจากโปร์แกร์ม Illustratorนอกจากการ์น,าไฟล� AI เข�ามาใช้�ด้�วยค,าสู่*�ง

Import แล�ว ค$ณย*งสู่ามาร์ถใช้�ว�ธี�การ์ก;อปป<+ ออบเจ3คจากโปร์แกร์ม Illustrator แล�วน,ามาวางใน Flash หร์/อใช้�ว�ธี�คล�กลากมาวาง (drag and drop) ได้� ซึ่2�งว�ธี�น�+จะช้#วยให�ค$ณสู่ามาร์ถเล/อกใช้�เฉพาะออบเจ3คบางช้�+นท��ต�องการ์ได้�สู่ะด้วก

B แปลงออบเจ3คให�เป.นซึ่�มโบลม"ฟว��คล�ป โด้ยเล/อก Create movie clip…

- Instance name ต*+งช้/�ออ�นสู่แตนซึ่�ของม"ฟว��คล�ป

- Registration คล�กเล/อกจ$ด้อ�างอ�งของภาพในม"ฟว��คล�ป

Page 16: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

อ�มพอร์�ตและใช้�งานภาพเคล/�อนไหวในกร์ณ�ท��อ�มพอร์�ตภาพเคล/�อนไหวปร์ะเภท

animated GIF หร์/อไฟล�ม"ฟว�� (.swf) ของ Flash เองโปร์แกร์มจะพยามร์*กษาการ์เคล/�อนไหวเด้�มไว� โด้ยสู่ร์�างเฟร์มท��จ,าเป.นข2+นมาร์องร์*บโด้ยอ*ตโนม*ต�

Page 17: หน่วยที่ 7 ใช้งานภาพบิทแมพและเวคเตอร์จากภายนอก

จบบทท�� 7 ค#ะ