what’s up flash - serazu€¦ · หน าตาโปรแกรม [interface flash cs6] 007...

24

Upload: others

Post on 13-Aug-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน
Page 2: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

I

INTRO 1

What’s up Flash ? ทําไมตอง Flash 002

» แอนเิมชนัคอือะไร ............................................................. 002

ตัวอยางของหลักการแอนิเมชัน 002Flash ทําอะไรไดบาง 003

» Flash Animation ................................................................ 003 » Flash Game ....................................................................... 003 » Multimedia ......................................................................... 004

มีอะไรใหมๆ ที่นาสนใจใน CS6 [New Feature] 005 » Support for HTML5........................................................... 005 » Working with Sprite Sheet ............................................... 006 » Working with Devices ...................................................... 006

หนาตาโปรแกรม [Interface Flash CS6] 007 » หนาตาง Welcome Screen ............................................... 007 » สวนประกอบของหนา Interface ....................................... 008 » เมนูบาร [Menu Bar] ......................................................... 008 » สเตจ [Stage] ..................................................................... 009

ไทมไลน [Timeline] 010หนาตางพาเนล [Panels] 012

» แถบเครื่องมอื [Tools] ........................................................ 013

จัดการกับพาเนล 014 » จดัวาง Panel ตามการใชงาน ........................................... 014 » เปด/ปด Panel ที่ตองการ .................................................. 014 » ซอน/แสดง Panel ที่ตองการ ............................................. 015 » เปลี่ยนตาํแหนงของ Panel ................................................ 015 » จดัวางพาเนลตามการใชงาน [Workspace] ...................... 015 » เปด/ปดพาเนลตามตองการ [Open/Close Panel] ............. 016 » ซอน/แสดงพาเนลที่ตองการ .............................................. 017 » เคลื่อนยายตาํแหนงพาเนลตามตองการ .......................... 018

INTRO 2

The basic คําสั่งพื้นฐานที่ควรจําคําสั่งเกี่ยวกับไฟลงาน [Flash document] 020

» เริ่มงานใหม [New] ............................................................ 020 » เปดงานที่เคยทาํไว [Open] ................................................ 020 » บนัทกึไฟลงานที่ทาํเอาไว [Save] ...................................... 021 » ลองเปดไฟลเดมิขึ้นมาใช [Open] ...................................... 021 » ลองสรางไฟลงานขึ้นมาใหม [Create New] ...................... 022 » ลองเกบ็งานแบบทั่วๆ ไป [Save] ....................................... 023 » ลองเกบ็งานเปนชื่ออื่น [Save As] ..................................... 024 » ควบคมุมมุมองในการทาํงาน [View] ................................ 025 » ปรบัมมุมองภาพรวม ......................................................... 026 » ยอ/ขยายมมุมองของภาพ [Zoom In/Zoom Out] .............. 027 » เลื่อนมมุมองพื้นที่สเตจ [Pan] ........................................... 028 » แถบไมบรรทดั [Rulers] ..................................................... 029 » เสนไกด [Guides] ............................................................... 030 » เสนกรดิ [Grid] ................................................................... 031

แกไขดวยการยอนขั้นตอนการทํางาน [Undo/Redo/History] 032

» ยอนขั้นตอนกลบัไป [Undo] .............................................. 032 » ยอนขั้นตอนกลบัมา [Redo] .............................................. 032 » ยอนไปที่ขั้นตอนไหนกไ็ด [History] ................................... 033 » ยอนขั้นตอนการทาํงานกลบัไป [Undo]............................. 033 » ยอนขั้นตอนการทาํงานกลบัมา [Redo] ............................ 034

CHAPTER 01

Drawing Object วาดชิ้นงานขึ้นเองรูจักกับชิ้นงานที่วาดขึ้นเอง 036

» ชิ้นงานแบบ Drawing Object ............................................ 036 » ชิ้นงานแบบ Shape ............................................................ 037 » แปลงชิ้นงาน Drawing Object และ Shape ...................... 042

รูปทรงตางๆ [Geometry] 043 » วาดรูปสี่เหลี่ยมดวย Rectangle Tool ................................ 046 » เพิ่มเตมิเกี่ยวกบั Rectangle Tool ...................................... 047 » วาดรูปวงกลมหรอืวงรดีวย Oval Tool............................... 048 » เพิ่มเตมิเกี่ยวกบั Oval Tool ............................................... 049 » วาดรูปหลายเหลี่ยมหรอืรูปดาวดวย PolyStar Tool.......... 050 » เพิ่มเตมิเกี่ยวกบั PolyStar Tool ......................................... 051

วาดเสนขอบ [Stroke] 052 » เสนตรง [Line Tool] ........................................................... 052 » เสนดนิสอ [Pencil Tool] ..................................................... 052 » แปรงทาส ี[Brush Tool] ..................................................... 053 » ปากกาดดัเสน [Pen Tool] ................................................. 053 » วาดเสนตรงดวย Line Tool ............................................... 054 » เพิ่มเตมิเกี่ยวกบั Line Tool .............................................. 055 » วาดเสนดนิสอดวย Pencil Tool ......................................... 056 » เพิ่มเตมิเกี่ยวกบั Pencil Tool ........................................... 057 » ระบายสดีวย Brush Tool .................................................. 058 » เพิ่มเตมิเกี่ยวกบั Brush Tool ........................................... 059 » วาดเสนจากปากกาดดัเสนดวย Pen Tool ........................ 060

Page 3: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

II

Flash CS6 Essential

CONTENTSCONTENTSCONTENTSCONTENTSCONTENTS

» เพิ่มเตมิเกี่ยวกบั Pen Tool ................................................ 061 » เพิ่มเตมิเกี่ยวกบัเสนขอบ [Stroke] .................................... 064

วาดชิ้นงานตกแตงสําเร็จรูป [Decorative Drawing] 066 » รูปแบบของชิ้นงาน [DRAWING EFFECT] ......................... 066 » วาดชิ้นงานสาํเรจ็รูปดวย Deco Tool ................................ 067

CHAPTER 02

Bitmap Object ชิ้นงานที่เปนรูปภาพ รูจักกับรูปภาพที่นํามาใชงาน 070

» ภาพแบบ Vector ............................................................... 070 » ภาพแบบ Raster ............................................................... 070

นํารูปภาพมาใชงาน [Import Bitmap] 071 » นาํภาพมาวางบนสเตจ [Import to Stage] ........................ 071 » นาํภาพไปเกบ็ในไลบราร ี[Import to Library] ................... 072 » นาํรูปภาพมาไวบนสเตจ [Import to Stage] ..................... 073 » นาํรูปภาพเกบ็ไวในพาเนล LIBRARY [Import to Library] ....074 » เพิ่มเตมิเกี่ยวกบั Bitmap Object ....................................... 075

CHAPTER 03

Text Object ชิ้นงานตัวอักษร ประเภทของตัวอักษร 078

» ตวัอกัษรรูปแบบเดมิ [Classic Text] .................................. 078 » ตวัอกัษรรปูแบบใหม [TLF : Text Layout Framework Text].......079

การพิมพตัวอักษร 080 » พมิพขอความคาํสั้นๆ ดวย Text Tool .............................. 081 » พมิพประโยคยาวๆ ดวย Text Tool .................................. 082

จัดพิมพตัวอักษรแบบ TLF Text 087 » เพิ่มเตมิเกี่ยวกบั TLF Text .............................................. 088

ปรับเปลี่ยนแกไข ใสเอฟเฟกตตัวอักษร 089 » ปรบัเปลี่ยนแกไขตวัอกัษรเฉพาะบางตวั .......................... 090 » ใส Filter ใหกบัตวัอกัษร ................................................... 092

CHAPTER 04

Color ตกแตงสีใหกับชิ้นงานเลือกสีจากตรงไหน 100

» Toolbar ............................................................................... 100 » พาเนล SWATCHES .......................................................... 100 » พาเนล PROPERTIES ........................................................ 101 » พาเนล COLOR ................................................................. 101

รูปแบบของสีพื้นและเสนขอบ [Color Type] 102 » สแีบบธรรมดา [Solid color]/สแีบบโปรงใส [Alpha] .......... 102 » สแีบบรูปภาพ [Bitmap fill] ................................................ 102 » สแีบบไลเฉดสเีปนเสนตรง [Linear gradient] .................... 103 » สแีบบไลเฉดสเีปนรศัม ี[Radial gradient] .......................... 103 » เปลี่ยนสพีื้นและเสนขอบ [Solid color] .............................. 103 » เปลี่ยนสเีปนแบบโปรงใส [Alpha] ..................................... 105 » เพิ่มเตมิเกี่ยวกบัพาเนล Swatches ................................ 106 » เปลี่ยนสเีปนแบบรูปภาพ [Bitmap fill] .............................. 107 » เพิ่มเตมิเกี่ยวกบัพาเนล Color ........................................... 108 » เปลี่ยนสเีปนแบบไลเฉดสเีสนตรง [Linear gradient] ......... 109 » เพิ่มเตมิเกี่ยวกบั Linear gradient ...................................... 111 » เปลี่ยนสเีปนแบบไลเฉดรศัมวีงกลม [Radial gradient] ..... 113 » เพิ่มเตมิเกี่ยวกบั Radial gradient ...................................... 115

เพิ่มสีและผสมสีขึ้นใหม 117 » เพิ่มเสนขอบใหกบั Shape [Ink Bottle Tool] ..................... 117 » เพิ่มสพีื้นใหกบั Shape [Paint Bucket Tool] ...................... 117 » ผสมสขีึ้นมาใหม [Custom color] ...................................... 118 » เพิ่มสพีื้นใหกบัชิ้นงานดวย Paint Bucket Tool ................. 118 » เพิ่มเตมิเกี่ยวกบั Paint Bucket Tool ................................. 119 » เพิ่มเสนขอบชิ้นงานดวย Ink Bottle Tool ......................... 120 » ผสมสขีึ้นมาใชใหม ............................................................ 120 » เพิ่มเตมิเกี่ยวกบั Custom Color ........................................ 122

CHAPTER 05

Edit & Transform แกไขรูปราง เปลี่ยนแปลงรูปทรงดัดแปลงชิ้นงาน [Transform] 124

» เมนูคาํสั่ง Transform ....................................................... 124 » เครื่องมอื 3D Rotation Tool .............................................. 124 » เครื่องมอื Free Transform Tool......................................... 125 » พาเนล Transform ............................................................. 125 » ดดัแปลงรูปทรงชิ้นงานดวย Transform ............................ 126 » เพิ่มเตมิเกี่ยวกบั Transform .............................................. 127 » หมนุมูวี่คลปิดวย 3D Rotation Tool.................................. 132 » เพิ่มเตมิเกี่ยวกบั 3D Rotation Tool .................................. 132

เปลี่ยนแปลงรูปทรงชิ้นงาน 133 » เปลี่ยนรูปทรงจากดานและมมุ ......................................... 133 » เปลี่ยนรูปทรงจากจดุดดั ................................................... 134 » เปลี่ยนรูปทรงจากดานและมมุดวย Selection Tool .......... 135 » เพิ่มเตมิเกี่ยวกบัการเปลี่ยนรูปทรงจากดานและมมุดวย Selection Tool ................................................................... 137

Page 4: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

III

» เปลี่ยนรูปทรงจากจดุดดัดวย Subselection Tool.............. 139 » เพิ่มเตมิเกี่ยวกบัการเปลี่ยนรูปทรง ................................... 141

CHAPTER 06

Manage Object จัดการกับชิ้นงาน เคลื่อนยาย ก็อปป และรวมกลุมชิ้นงาน 144

» เคลื่อนยายชิ้นงาน [Move] ................................................ 144 » กอ็ปปชิ้นงาน [Copy] ......................................................... 145 » รวมกลุมชิ้นงานเขาดวยกนั [Group] ................................. 145 » เคลื่อนยายชิ้นงานดวย Selection Tool ............................. 146 » เพิ่มเตมิเกี่ยวกบัการเคลื่อนยายชิ้นงาน ........................... 147 » โคลนนิ่งชิ้นงานดวยการ Copy .......................................... 148 » จบักลุมชิ้นงานดวยคาํสั่ง Group ....................................... 149

จัดเรียงชิ้นงาน 150 » จดัลาํดบัชิ้นงาน [Arrange] ................................................ 150 » จดัระเบยีบชิ้นงาน [Align] ................................................. 150 » จดัลาํดบัชิ้นงานกอนหลงัดวย Arrange ............................ 151 » เพิ่มเตมิเกี่ยวกบัคาํสั่ง Arrange ......................................... 152 » จดัเรยีงชิ้นงานดวย Align .................................................. 154 » เพิ่มเตมิเกี่ยวกบัพาเนล ALIGN ........................................ 156

CHAPTER 07

Symbol & Structure ซิมโบลและโครงสรางของชิ้นงานชิ้นงานที่ใชทําแอนิเมชัน [Symbol & Instance] 162

» การสรางซมิโบลแบบตางๆ ............................................... 163 » ประเภทของซมิโบล ........................................................... 164 » แปลงชิ้นงานเปนซมิโบลแบบกราฟก [Convert to Symbol Graphic] ............................................................................. 166

» สรางซมิโบลแบบกราฟกขึ้นใหม [Create New Symbol Graphic] ............................................................................. 167

» แปลงชิ้นงานเปนซมิโบลแบบปุม [Convert to Symbol Button] ............................................................................... 168

» เพิ่มเตมิเกี่ยวกบัซมิโบลปุม [Symbol Button] ................... 170

» สรางซมิโบลแบบมูวี่คลปิขึ้นใหม [Create New Symbol Movie Clip] ........................................................................ 172

» เพิ่มเตมิเกี่ยวกบัซมิโบลมูวี่คลปิ [Symbol Movie Clip] ..... 174

ตกแตงแสงสี ใสเทคนิคพิเศษใหกับซิมโบล 176 » แตงแสงยอมส ี[Color effect] ............................................ 176 » ผสมสจีางซอน [Blending] ................................................. 177 » ใสเทคนคิพเิศษ [Filter] ...................................................... 177 » ลองแตงแสงสใีหซมิโบลดวย Color effect ........................ 178 » เพิ่มเตมิเกี่ยวกบั Color effect ........................................... 179 » ลองผสมสจีางซอนใหซมิโบลดวย Blending ..................... 180 » เพิ่มเตมิเกี่ยวกบั Blending ................................................ 181 » ลองใสเทคนคิพเิศษใหซมิโบลดวย Filter .......................... 182

ทําความรูจักกับโครงสรางโดยรวม 183 » ลองเขาถงึโครงสรางของซมิโบลกราฟก ........................... 187 » เพิ่มเตมิเกี่ยวกบัโครงสรางซมิโบลกราฟก ........................ 187 » ลองเขาถงึโครงสรางของซมิโบลปุม .................................. 188 » เพิ่มเตมิเกี่ยวกบัโครงสรางซมิโบลปุม ............................. 189 » ลองเขาถงึโครงสรางของซมิโบลมูวี่คลปิ ........................... 189 » เพิ่มเตมิเกี่ยวกบัโครงสรางซมิโบลมูวี่คลปิ ....................... 190

CHAPTER 08

Basic of Animation หลักการเคลื่อนไหว เบื้องตนภาพขยับไดอยางไร 192

» พื้นที่แสดงภาพ [Stage] ..................................................... 192 » ตวักาํหนดเวลา [Timeline] ................................................ 192

รูปแบบของเฟรม [Frame] 193 » เฟรมที่มชีิ้นงาน [Keyframe] .............................................. 193 » เฟรมปกต ิ[Frame]............................................................. 194 » เฟรมเปลาๆ [Blank Keyframe] .......................................... 194

รูปแบบการทําแอนิเมชัน 195 » ภาพตอภาพ [Frame by Frame] ....................................... 195 » เคลื่อนยายชิ้นงาน [Motion Tween] ................................. 195 » เปลี่ยนรูปทรงชิ้นงาน [Shape Tween] .............................. 196 » ลองทาํภาพเคลื่อนไหวแบบ Frame by Frame ................. 197 » เพิ่มเตมิเกี่ยวกบั Frame by Frame ................................... 200 » ลองทาํภาพเคลื่อนไหวแบบ Motion Tween [Classic Tween] ................................................................. 201

» เพิ่มเตมิเกี่ยวกบั Motion Tween [Classic Tween] ........... 203 » ลองทาํภาพเคลื่อนไหวแบบ Shape Tween ...................... 205 » เพิ่มเตมิเกี่ยวกบั Shape Tween ........................................ 208 » เพิ่มเตมิเกี่ยวกบัคยีลดัคาํสั่งตางๆ ที่ใชกบัเฟรม .............. 210

CHAPTER 09

Technique of Animation ทําภาพเคลื่อนไหวดวยเทคนิคใหม

เปลี่ยนรูปทรงจากจดุดดัดวย Subselection Toolเปลี่ยนรูปทรงจากจดุดดัดวย Subselection Tool

ตกแตงแสงสี ใสเทคนิคพิเศษใหกับซิมโบล 176

Page 5: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

IV

Flash CS6 Essential

CONTENTS

เเทคนิคการทําแอนิเมชัน 212 » เคลื่อนที่ตามเสนที่กาํหนดดวย Motion Tween แทน Motion Guide ................................................................................. 212

» เคลื่อนที่ใหเหน็เฉพาะบางสวน [Mask Tween] ................ 212 » เคลื่อนที่ดวยกระดูกขอตอ [Bone] .................................... 213 » ลองเทคนคิเคลื่อนที่ตามเสนที่กาํหนดดวย Motion Tween ... 213 » เพิ่มเตมิเกี่ยวกบั Motion Tween ...................................... 215 » ลองเทคนคิเคลื่อนที่ใหเหน็เฉพาะบางสวน [Mask Tween] ................................................................... 218

» เพิ่มเตมิเกี่ยวกบั Mask Tween ......................................... 220 » ลองใสกระดูกขอตอใหชิ้นงานเคลื่อนไหว [Bone] ............. 221 » เพิ่มเตมิเกี่ยวกบัการใสกระดูกขอตอ [Bone] .................... 223

CHAPTER 10

ActionScript ควบคุมการทํางานดวยสคริปต รูจักกับ ActionScript 228

» ใส ActionScript ไวที่ไหนไดบาง ........................................ 228 » โหมดในการใช ActionScript.............................................. 229 » ลองใส ActionScript แบบ Normal Mode ......................... 230 » เพิ่มเตมิเกี่ยวกบัการใส ActionScript แบบ Normal Mode .................................................................... 231

» ลองใส ActionScript แบบ Code Snippets ........................ 232 » เพิ่มเตมิเกี่ยวกบัการใส ActionScript แบบ Code Snippets ................................................................... 234

ActionScript ที่นาสนใจ 235 » Browser/Network .............................................................. 235 » Timeline Control ................................................................ 236 » ลองใช ActionScript ควบคมุการเลนมูวี่ [Timeline Control] .............................................................. 237

» เพิ่มเตมิเกี่ยวกบัการควบคมุการเลนมูวี่ [Timeline Control] .............................................................. 239

» ลองใช ActionScript ควบคมุการแสดงผลหนาจอ [fscommand] .................................................................... 241

» เพิ่มเตมิเกี่ยวกบัการควบคมุการแสดงผลหนาจอ [fscommand] ...................................................................... 243

» ลองใช ActionScript โหลดมูวี่ [loadMovie] ....................... 245

CHAPTER 11

Sound ใสเสียงลงในงานเสียงที่นํามาใชใน Flash 250

» ประเภทของไฟลเสยีง........................................................ 250 » ใสเสยีงที่ไหนไดบาง .......................................................... 250 » ไฟลสกลุของเสยีง ............................................................. 251 » ลองใสเสยีงลงในเฟรม [Sound Loop] ............................... 251 » เพิ่มเตมิเกี่ยวกบั Sync ของเสยีง ...................................... 253 » ใสเสยีงลงในปุม [Sound FX] ............................................. 254 » เพิ่มเตมิเกี่ยวกบั Sync ของเสยีงในปุม............................. 256 » หาเสยีงไดจากที่ไหน [Download Sound] .......................... 257

เทคนิคเพิ่มเติมเกี่ยวกับเสียง 259 » ใสเอฟเฟกตใหกบัเสยีง ..................................................... 259 » ปรบัแตงเสยีงดวยตวัเอง ................................................... 260 » ควบคมุการเลนของเสยีง .................................................. 260 » ลองเลอืกใสเอฟเฟกตเสยีง ............................................... 261 » เพิ่มเตมิเกี่ยวกบัรูปแบบเอฟเฟกต .................................... 262 » ลองปรบัแตงเสยีงเพิ่มเตมิ [Edit sound envelope] ........... 263 » ลองควบคมุการเลนของเสยีง ............................................ 265 » เพิ่มเตมิเกี่ยวกบัการควบคมุเสยีง .............................................267

CHAPTER 12

Video เพิ่มความนาสนใจดวยวิดีโอรูจักกับไฟลวิดีโอ 270

» นาํไฟลวดิโีอมาใช [Import Video] ..................................... 270 » ไฟลวดิโีอที่รองรบั .............................................................. 271 » ลองนาํไฟลวดิโีอเขามาใชแบบ Embed FLV in SWF... [ไมตองแปลงไฟล] ........................................................... 272

» ลองนาํไฟลวดิโีอเขามาใชแบบ Load external video...[ไมตองแปลงไฟล] ............................................................. 274

» ลองนาํไฟลวดิโีอเขามาใชแบบแปลงไฟล ......................... 276 » เพิ่มเตมิเกี่ยวกบัการนาํไฟลวดิโีอเขามาใช ....................... 278 » ลองหาไฟล FLV จาก YouTube มาใช .............................. 279

CHAPTER 13

Publish & Export นําผลงานที่สรางไปใชการนํางานออกไปใช 282

» Publish ............................................................................... 282 » Export ................................................................................ 283 » ลองนาํงานออกไปใชแบบ Publish .................................... 284 » เพิ่มเตมิเกี่ยวกบัรูปแบบของไฟล (Type) ในการ Publish ................................................................... 285

» ลองนาํงานออกไปใชแบบ Export Image ......................... 290 » เพิ่มเตมิเกี่ยวกบัการ Export Image .................................. 291 » รูปแบบภาพวดิโีอ [Export Movie] .................................... 292 » เพิ่มเตมิเกี่ยวกบัการ Export Movie .................................. 293

ประเภทของไฟลทั้งหมด 294

CONTENTSCONTENTSCONTENTSCONTENTS

เเทคนิคการทําแอนิเมชัน 212

Page 6: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

1What’s up Flash ?ทําความรูจักกับ Flash

ในสวนแรกนี้เราจะมาทาํความรูจกักบั Flash CS6 กนักอนวามนัคอือะไร ใชทาํอะไร

ไดบาง มีหนาตาเปนอยางไร มีสวนประกอบอะไรบาง แลวมีอะไรใหมๆ ที่นาสนใจเพิ่ม

ขึ้นมาบางสาํหรบัเวอรชนันี้

I N T R O

Page 7: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

INTRO 1 What’s up Flflash ? | 002

ทําความรูจักกับ Flashทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Flashlashlash

ทําไมตอง FlashFlash เปนโปรแกรมกราฟกอยางหนึ่งที่อยูในกลุมของ Adobe ซึ่งจะแตกตางจากโปรแกรม Photoshop

และ Illustrator ตรงที่ Photoshop และ Illustrator จะใชในการตกแตงภาพและวาดภาพกราฟก งานที่ไดจะเปน

ภาพนิ่ง สวน Flash จะเปนการนาํภาพที่แตงแลวหรอืภาพวาดกราฟกที่นิ่งๆ นั้นมาขยบัหรอืทาํใหมนัเคลื่อนไหว

ได Flash จงึเปนโปรแกรมที่ใชในการทาํงานแอนเิมชนั (Animation) นั่นเอง

แอนิเมชันคืออะไรแอนิเมชัน (Animation) หมายถึง การสรางภาพ

เคลื่อนไหว โดยการฉายภาพนิ่งหลายๆ ภาพตอเนื่องกันดวย

ความเร็วที่เหมาะสม (เฟรม/วินาที) ซึ่งหลักการจะคลายๆ กับ

การฉายภาพยนตร แตภาพยนตรจะเปนการใชฟลม โดยที่ใน

แตละเฟรมของฟลมกจ็ะเปนภาพนิ่งเชนกนั เมื่อนาํมาฉายภาพ

ตอเนื่องกนัดวยความเรว็ 24 เฟรมตอวนิาท ีกจ็ะทาํใหเกดิภาพ

เคลื่อนไหวที่เรยีกวาภาพยนตรนั่นเอง

สําหรับปจจุบันนี้คอมพิวเตอร ได มีส วนในการทํา

แอนิเมชัน โดยการใชคอมพิวเตอรกราฟกในการคํานวณและ

สรางภาพ ทาํใหภาพนั้นเคลื่อนไหวอยางเชน โปรแกรม Flash ที่

เราจะไดลองทาํกนั

สวนอกีวธิคีอื การใชเทคนคิการถายภาพ ภาพวาด หรอืการถายรปูปน หุนจาํลอง หรอืวตัถทุี่คอยๆ ขยบั

จะเปนภาพที่เคลื่อนไหวกระตกุๆ ไมไหลลื่น เราเรยีกภาพเคลื่อนไหวแบบนี้วา สตอ็ปโมชนั (Stop motion) อยาง

การตูนแอนเิมชนัที่ใชดนินํ้ามนัปนกใ็ชเชนกนั

ตัวอยางของหลักการแอนิเมชันอยางที่บอกวาแอนิเมชันคือ การสราภาพเคลื่อนไหวดวยการฉายภาพนิ่งหลายเฟรมตอเนื่องกันดวย

ความเรว็ที่เหมาะสม ซึ่งการใช Flash ในการทาํแอนเิมชนัจะเปนการสรางภาพกราฟกแบบเวคเตอรลงไปในเฟรม

แลวใชคาํสั่งใหเคลื่อนไหว โปรแกรมจะคาํนวณและสรางภาพเคลื่อนไหวแตละเฟรมออกมา เมื่อเราสั่งเลนภาพ

ดวยความเรว็ที่กาํหนด จงึมองเหน็ภาพนิ่งเหลานั้นเคลื่อนไหวไดนั่นเอง

การตูนแอนิเมชันที่ใชดินนํ้ามันปน

ภาพแสดงกราฟกตัวการตูนใหเคลื่อนไหวในแตละเฟรมดวย Flash

Page 8: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

003 | Flash CS6 Essential

สวนการทาํแอนเิมชนัที่เรยีกวา สตอ็ปโมชนั จะเปนการถายภาพวตัถทุลีะภาพ โดยในการถายภาพแตละ

ครั้งจะขยบัวตัถหุรอืเปลี่ยนแปลงวตัถไุปดวย และเมื่อนาํภาพถายมาฉายเรยีงกนักจ็ะทาํใหเกดิภาพเคลื่อนไหว ซึ่ง

วิธีนําภาพถายมาฉายเรียงกันนี้ อาจทําไดหลายวิธีดวยกันแลวแตผูที่สราง อาจจะนํามาเรียงในโปรแกรมตัดตอ

หรอืจะบนัทกึดวยกลองวดิโีอโดยการอดัภาพถายทลีะภาพแลวหยดุ ทาํไปเรื่อยๆ จนครบทกุภาพ เมื่อเลนภาพที่

เราบนัทกึไวทั้งหมดกจ็ะทาํใหภาพถายนั้นขยบัไดเชนกนั

Flash ทําอะไรไดบางหนาที่หลกัๆ ของโปรแกรม Flash นั้นกค็ือ การสรางแอนเิมชนั ซึ่งเราสามารถที่จะนาํแอนเิมชนัที่สรางนั้น

ไปประยกุตใชในงานตางๆ ไดหลากหลาย ขึ้นอยูกบัวาจะนาํไปใชในดานไหน นอกจากการทาํแอนเิมชนัแลว Flash

ยังมีความสามารถในการคํานวณคาทางคณิตศาสตร การจัดเก็บขอมูล การสรางปุมเพื่อเชื่อมโยงขอมูลตางๆ

รวมถึงยังสามารถนําไฟลเสียงและไฟลวิดีโอเขามาใชงานรวมกันไดอีกดวย Flash จึงสามารถนําไปทําเปนสื่อ

มลัตมิเีดยีไดหลากหลายรูปแบบ

Flash Animationแอนเิมชนัมอียูหลายความหมายดวยกนั แตสวนมากเราจะนกึถงึการตนูแอนเิมชนัที่จะเปนแอนเิมชนัแบบ 2

มติ ิ(2D) ถาเปนภาพแบบ Vector เราจะเรยีกวา Flash Animation ซึ่งเกดิจากการวาดขึ้นดวยโปรแกรม Flash นั่นเอง

หรอือาจจะวาดขึ้นจากโปรแกรม Illustrator กไ็ด แตจะนาํมาทาํแอนเิมชนัใน Flash นอกจากภาพวาดแบบ Vector แลว

ภาพถายนิ่งๆ แตถามกีารเคลื่อนที่กถ็อืวาเปนการทาํแอนเิมชนัเหมอืนกนั แตจะออกไปทางงานพรเีซนเตชนัมากกวา

Flash Game เกมที่เราเคยเขาไปเลนจากเวบ็ฯ ตางๆ หรอืเคยโหลดมาเลนกต็าม จะเปนเกมที่มสีสีันสดใส เลนไมยาก

ไมมคีวามซบัซอนมากนกั

ภาพแสดงการถายวัตถุทีละภาพแลวนํามาฉายเรียงตอกันเพื่อทําใหภาพนั้นเคลื่อนไหว

การตูนที่ทําจาก Flash เกมที่ทําจาก Flash

Page 9: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

INTRO 1 What’s up Flflash ? | 004

ทําความรูจักกับ Flashทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Flashlashlash

Multimedia มลัตมิเีดยีเปนการผสมผสานของสื่อตางๆ เขาไวดวยกนัทั้งภาพ แสงส ี เสียง ขอความ ภาพเคลื่อนไหว

หรอืภาพวดิโีอ ที่จะทาํใหสื่อนั้นมคีวามนาสนใจมากขึ้น Website กเ็ปนมลัตมิเีดยีอยางหนึ่งที่ใหสาระความบนัเทงิ

และสรางความนาสนใจโดยใหอิสระกับผูชมในการเลือกดูสวนตางๆ ไดจากหนาโฮมเพจหรือเมนูหลัก Interface

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

เวบ็ไซตเชนกนั

Presentation คอื การนาํเสนอบางสิ่งบางอยางออกไปใหกบัผูที่ดนูั้นไดรบัรูถงึสิ่งที่เราไดนาํเสนอออกไป ซึ่ง

Flash นั้นไมวาจะเปนงานพรเีซนตเชงิวชิาการ ที่ไมใชแคนาํเสนอเฉพาะขอมูลเทานั้น แตจะมลีูกเลนตางๆ ที่ทาํให

งานนั้นนาสนใจยิ่งขึ้น หรอืจะเปนการพรเีซนตเพื่อความบนัเทงิอยางในวนัสาํคญัตางๆ เชน งานวนัเกดิ งานเลี้ยง

อาํลา งานแตงงาน ฯลฯ

หนาเมนูหลักของสื่อมัลติมีเดียหรือเว็บไซต ก็สรางไดดวย Flash

งานพรเีซนตเชงิวิชาการ งานพรีเซนตงานแตงงาน

Page 10: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

005 | Flash CS6 Essential

มีอะไรใหมๆ ที่นาสนใจใน CS6 [New Feature]สาํหรบัเวอรชนันี้มอีะไรใหมๆ เพิ่มขึ้นมามากมายที่จะชวยใหการใชงานนั้นงายยิ่งขึ้น และยงัสามารถนาํ

ไปใชงานรวมกบัโปรแกรมใน Adobe อื่นๆ อยาง Adobe Photoshop, Adobe Illustrator, Adobe InDesign และ Adobe

After Effect ไดงายขึ้นอกีดวย โดยจะแนะนาํเฉพาะบางสวนที่เหน็เดนๆ หากถาตองการอยากจะรูวามอีะไรที่เพิ่ม

ขึ้นมาใหมอกีบาง ใหเขาไปศกึษาไดที่ Flash Help ของโปรแกรม Flash ไดเลย

Support for HTML5ใชครบั เปนความสามารถที่หลายๆ คนจบัตาดู

มากวา Adobe Flash จะเปนอยางไร และโดยสวนตวั

ผูเขียนเอง ก็มีการคาดหวังไวเยอะเชนกันวาจะไดเห็น

Flash สามารถ Publish ไปเปน HTML5 ไดเลยแบบเตม็ๆ

แตใน Adobe Flash Professional CS6 นี้ การ Publish

นั้นอาศยัความสามารถของ CreateJS ซึ่งเปน Extension

สามารถดาวนโหลดมาติดตั้งไดฟรีจากเว็บไซตของ

Adobe แลวจากนั้นกเ็ปด Toolkit for CreateJS panel

ขึ้นมา คลิกปุม Publish ก็จะสามารถสงไฟลงานจาก

Flash ไปเปน HTML5 ไดเลย แตจะไมสามารถแปลง

ActionScript เปน JavaScript ไดนะครบั

Page 11: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

INTRO 1 What’s up Flflash ? | 006

ทําความรูจักกับ Flashทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Flashlashlash

Working with Sprite Sheetเปนความสามารถที่จะชวยใหนกัพฒันาเกมนั้นสราง Sprite Sheet ไดงายยิ่งขึ้น เพยีงแคคลกิเลอืกซมิโบล

คลกิขวาแลวเลอืกคาํสั่ง Generate Sprite Sheet... เพยีงเทานี้กส็ามารถสราง Sprite Sheet ไดแลว

Working with DevicesFlash CS6 ไดนาํเอา Adobe AIR มาใชงาน ทาํใหสามารถนาํไปใชงานไดแบบเตม็ๆ ทาํใหชิ้นงานที่เรา

พฒันาขึ้นมาสามารถนาํไปใชงานไดกบั Smartphone หรอื Tablet ทั้งระบบปฏบิตักิาร iOS และ Android

Page 12: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

007 | Flash CS6 Essential

หนาตาโปรแกรม [Interface Flash CS6]

หรือหาไอคอน Adobe Flash Professional CS6 แลวดับเบิลคลิกเพื่อเขาโปรแกรม

หนาตาง Welcome Screen หนา Welcome Screen จะแสดงขึ้นทกุครั้งที่เราเขาโปรแกรม เราสามารถเลอืกใชไฟลงานตางๆ เพื่อเขาสู

หนาโปรแกรมไดจากสวนนี้

A Create from Template เปนการเลือกรูปแบบไฟลงานสําเร็จรูปใหเหมาะสมกับการทํางาน เชน ถาเลือก

Banners จะมีรูปแบบไฟลสําเร็จรูปที่ใชสําหรับการทํา Banner โดยเฉพาะ

B Open a Recent Item เปนการเลือกเปดไฟลที่เราเคยทําเอาไวครั้งลาสุด เราสามารถเลือกเปดไฟลอื่นๆ

ได โดยคลิกที่ Open... แตถาไมเคยเปดใชมากอนจะไมมีไฟลในสวนนี้

C Create New เปนการเลือกสรางไฟลใหม โดยจะมีรูปแบบตางๆ ใหไดเลือกตามการใชงานของเรา ในที่นี้

แนะนําใหเลือกเปน ActionScript 2.0

เมื่อดบัเบลิคลกิเขามาในโปรแกรมแลว จะเจอกบัหนา Welcome

Screen สามารถเลอืกการทาํงานไดจากจดุนี้ เพื่อเขาไปในหนาโปรแกรม

เรามาเริ่มจากการเขาโปรแกรมกนักอน

A

B

C

คลิกปุม Start > All Programs > Adobe Flash Professional CS6

Page 13: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

INTRO 1 What’s up Flflash ? | 008

ทําความรูจักกับ Flashทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Flashlashlash

สวนประกอบของหนา Interfaceหลงัจากที่ผานหนา Welcome Screen เขามาแลวจะมาเจอกบัหนาตาของโปรแกรม ซึ่งมสีวนประกอบตางๆ

ดงันี้

B

C

A

D

E

A Menu Bar เปนสวนที่รวบรวมคําสั่งตางๆ โดย

จะแบงเปนหมวดหมู

B Stage เปนพื้นที่ที่ใชแสดงผลงาน

C Timeline เปนสวนที่ใชกําหนดชวงเวลาในการ

แสดงผลงานแอนิเมชัน

D Panels เปนตัวชวยในการปรับแตงคาตางๆ ให

ทํางานมีประสิทธิภาพยิ่งขึ้น

E Tools เปนเครื่องมือตางๆ ที่ใชในการสราง

ตกแตง และแกไขชิ้นงาน

เมนูบาร [Menu Bar]อยางที่บอกเอาไวขางตนวาคาํสั่งหลกัๆ จะถูกรวบรวมไวในสวนนี้อยางเปนหมวดหมู เมื่อคลกิหมวดไหน

กจ็ะมคีาํสั่งในนั้นออกมาใหเราไดเลอืกใชอกีมากมาย เชน

File จะเปนคาํสั่งเกี่ยวกบัการจดัการไฟล

Edit เปนคาํสั่งแกไขการทาํงาน

Modify การดดัแปลงแกไขชิ้นงาน

Text คาํสั่งที่เกี่ยวของกบัตวัอกัษร

Window การจดัการกบัหนาตางเครื่องมอื

Page 14: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

009 | Flash CS6 Essential

ซึ่งคําสั่งตางๆ เหลานี้อาจจะมีอยูในพาเนล

ตางๆ อกีดวย การเลอืกใชคาํสั่งในเมนูบารอาจจะทาํให

เสียเวลาในการเลือกหา ดังนั้น เราสามารถที่จะใชคีย

ลดัในการเรยีกใชคาํสั่งนั้นๆ ได โดยจะมบีอกที่ดานหลงั

ของแตละคาํสั่งนั้นๆ เชน คาํสั่ง New... สามารถกดปุม

+ ที่คยีบอรดไดเชนกนั

สเตจ [Stage] Stage เปนพื้นที่ที่ใชในการแสดงผลงานที่เราไดสรางขึ้น เปรยีบเสมอืนเวทกีารแสดงหรอืกค็อืหนาจอนั่นเอง

เราอยากจะแสดงอะไร อยากใหเหน็อะไรในหนาจอนี้กใ็สช่ิ้นงานนั้นลงไป สวนพื้นที่รอบๆ ที่เปนสเีทาๆ นั้นเรยีกวา

Work Area เปนพื้นที่ใชงานที่สามารถนาํชิ้นงานไปวางตรงบรเิวณนี้ได เปรยีบเสมือนกับหลงัเวท ีถาตองการแสดง

ชิ้นงานกค็อยนาํมาวางบนพื้นที่สเตจ สวนจะออกมาชวงเวลาไหนนั้น จะขึ้นอยูกบัการกาํหนดของเรา ซึ่งจะสมัพนัธ

กบัเฟรมบน Timeline ดวย และแถบดานบนเรยีกวา Edit Bar เปนแถบที่ใชแสดงการเขาไปแกไขในชิ้นงานตางๆ

มีคียลัดบอกดานหลังคําสั่งเพื่อใหรวดเร็วเมื่อตองการเรียกใช

Work Area Edit Bar

Stage

Page 15: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

INTRO 1 What’s up Flflash ? | 010

ทําความรูจักกับ Flashทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Flashlashlash

เมื่อเวลาที่เรานาํผลงานออกมาแสดง เราจะเหน็แคพื้นที่ของสเตจเทานั้น เพราะฉะนั้นไมตองกลวัวาถาเรา

เอาชิ้นงานไปวางไวที่ Work Area แลวจะมอีะไรแสดงขึ้นมา นอกเสยีจากวาเราเกบ็ชิ้นงานไมดจีนมบีางสวนเลย

เขามาตรงสเตจ

จะไมเห็นชิ้นงานที่อยูนอกพื้นที่สเตจ

ไทมไลน [Timeline] Timeline เปนเหมอืนตวักาํหนดวาชวงเวลาไหนจะมอีะไรเกดิขึ้น โดยจะแบงเปนเฟรมๆ เหมอืนในแผนฟลม

ที่เราเหน็เปนชองๆ เมื่อเอาเขาเครื่องฉาย โดยหมนุฟลมผานไปแตละชองดวยความเรว็ 24 ชองตอ 1 วนิาท ีเราก็

จะเหน็เปนภาพที่เคลื่อนไหวได

เหมือนที่เราเคยวาดรูปลงที่มุมสมุดทีละหนา แลวเมื่อกรีดกระดาษภาพก็จะเคลื่อนไหวได สําหรับการดู

ภาพเคลื่อนไหวใน Timeline เมื่อเราสั่งใหเลน แถบเสนสีแดงก็จะทําหนาที่เหมือนตาของเรา จะวิ่งไปตามเฟรม

ทาํใหเราเหน็ภาพทกุๆ เฟรมตอเนื่องกนัจนเกดิเปนภาพเคลื่อนไหว ซึ่ง Timeline จะมสีวนประกอบตางๆ อกีดังนี้

A เลเยอร (Layer) การทํางานของ Flash นั้นจะแบงออกเปนชั้นๆ ที่เรียกวา เลเยอร เชน ฉากหลังอยูเลเยอร

หนึ่ง ตัวละครอื่นๆ ก็อยูแยกกันคนละเลเยอร เพื่อใหงายในการควบคุมการเคลื่อนไหวหรือการแกไข

Page 16: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

011 | Flash CS6 Essential

C เฟรม (Frame) ความหมายเหมือนกับเฟรมใน

ฟลมที่ใชกับงานภาพยนตร ในที่นี้ก็เชนกัน 1

ชองคือ 1 เฟรม ในเฟรมก็จะมีชิ้นงานหรือตัวละครที่เรา

สรางไวบนสเตจ เพลยเฮดก็จะวิ่งไปบนเฟรม ทําใหเห็น

ชิ้นงานที่เราไดสรางไวในแตละเฟรม แลวภาพก็จะ

ออกมาดูเคลื่อนไหวได

D ออเนียนสกินนิ่ง (Onion Skinning) เมื่อเลือกใช

จะเปนการแสดงชิ้นงานที่อยูบนเฟรมกอนหนา

หรือเฟรมหลังที่เพลยเฮดแสดงอยู จะเปนภาพจางๆ

เพื่อเปนไกดใหเราเห็นวาเฟรมกอนหนานี้วัตถุอยูที่ไหน

ทาํใหงายตอการสรางชิน้งานใหเคลือ่นไหวไดตอเนือ่งกนั

เราสามารถเลอืกชวงเฟรมในการแสดงได หรอืเลอืกการ

แสดงเปนลายเสนก็ได

B เพลยเฮด (Play Head) เปนแถบเสนสีแดงๆ ที่เห็นอยูใน Timeline ใชในการบอกตําแหนงวาตอนนี้ไดเลนมา

ถึงเฟรมที่เทาไร เราสามารถแดรกเมาสเลื่อนเพลยเฮดดูในเฟรมที่เราตองการ เพื่อดูการเคลื่อนไหวหรือจะ

เลื่อนไปเพื่อแกไขชิ้นงานในเฟรมที่เราตองการ

BA

Page 17: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

INTRO 1 What’s up Flflash ? | 012

ทําความรูจักกับ Flashทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Flashlashlash

E เพิ่มเลเยอร (New Layer), เพิ่มโฟลเดอร (New Folder), ลบเลเยอร (Delete) คลิกปุม New Layer เพื่อเพิ่ม

เลเยอรขึ้นมาใหม หรือถาตองการที่จะสรางโฟลเดอรเพื่อเก็บเลเยอรไวในนั้น ก็ใหคลิกปุม New Folder สวน

ถาตองการที่จะลบเลเยอรไหน ก็คลิกปุม Delete

หนาตางพาเนล [Panels]หนาตางพาเนลจะเปนตัวเสริมหรือตัวชวยใหการปรับแตงคาตางๆ ทํางานมีประสิทธิภาพยิ่งขึ้น ซึ่งมีอยู

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

เชน พาเนล Properties เปนพาเนลที่ใชแสดงรายละเอยีดของสิ่งตางๆ ที่เราเลอืก ถาเราคลกิเลอืกชิ้นงานกจ็ะแสดง

รายละเอยีดของชิ้นงานนั้น ถาเลอืกที่สเตจกจ็ะแสดงรายละเอยีดของพื้นที่สเตจ ถาคลกิเลอืกเครื่องมอืกจ็ะแสดง

รายละเอยีดของเครื่องมอืนั้นๆ

Properties ของชิ้นงาน Properties ของสเตจ Properties ของเครื่องมือ

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

เครื่องมอื แลวตองการกาํหนดรายละเอยีดของส ีหรอืใชคณุสมบตัพิเิศษกต็องมากาํหนดที่พาเนล Color

Page 18: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

013 | Flash CS6 Essential

เลือกสีที่พาเนล Color กําหนดรายละเอียดไดมากมาย เลือกสีที่แถบเครื่องมือกําหนด

รายละเอียดไมได

แถบเครื่องมือ [Tools]Tools Panel เปนแถบเครื่องมอืที่รวมเครื่องมอืตางๆ ที่ใชในการสราง เลอืก และปรบัแตงแกไขชิ้นงาน โดย

จะแบงเปนกลุมๆ ดงันี้

A

B

C

D

E

F

A

B

C

D

E

F

A Selection/Transform กลุมนีจ้ะมเีครือ่งมอือยู

2 ลักษณะคือ Selection จะใชสําหรับคลิกเลือก

ชิ้นงานหรือพื้นที่ของชิ้นงาน เพื่อเคลื่อนยาย ลบ หรือ

แกไขชิ้นงานนั้นๆ สวน Transform จะเปนเครื่องมือที่ใช

ปรับเปลี่ยนรูปทรง จะมีทั้งแบบ 2 มิติและ 3 มิติ

B Drawing กลุมนีจ้ะเปนพวกเครือ่งมอืทีใ่ชในการ

วาดหรอืสรางชิน้งาน ไมวาจะเปนเสน วาดรูปทรง

ตางๆ รวมถึงการสรางตัวอักษรอีกดวย

C Paint จะเปนพวกการเทสี ทั้งสีพื้นแลวก็สี

เสนขอบ รวมถึงการดูดสี การลบชิ้นงานดวย

ยางลบ และเครื่องมือที่ใชสรางขอตอในการขยับ

ชิ้นงานก็จะอยูในสวนนี้

D View จะเปนเครื่องมือที่ใชควบคุมมุมมองของ

ภาพ ทั้งการซูมมุมมองของภาพและการเลื่อน

ดูภาพ

สีพื้นและสีขอบดวย

F Option เปน

คําสั่งเพิ่มเติม

ใหกับเครื่องมือตางๆ

ที่ เรา เลื อก ซึ่ งจะ

เปลี่ยนไปตามแตละ

เครื่องมือที่ เลือกใช

Opt ion จะเปนตัว

เพิ่ มประสิทธิภาพ

ของเครื่องมือ จาก

ตั วอย า ง เรา เลื อก

เครือ่งมอื Free Trans-

form Tool ที่ Option

ก็จะมี รูปแบบของ

Transform มาใหคลิก

เลือกเพิ่มเติม

E Color จะเปนสวนที่ ใชใน

การเลือกสีทั้งสีพื้นและสีขอบ

รวมถงึการตัง้คาสเีริม่ตนและการสลบั

Page 19: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

INTRO 1 What’s up Flflash ? | 014

ทําความรูจักกับ Flashทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Flashlashlash

จัดการกับพาเนล พาเนลตางๆ นั้นมอียูมากมายหลายที่ ซึ่งบางอยางเรากไ็มไดใช บางอยางที่ใชกห็าไมเจอ หรอืการจดัวาง

ตาํแหนงตางๆ ไมถนดักบัการทาํงานของเรา และเนื่องจากพื้นที่ในการทํางานมอียูจาํกดัแตพาเนลมอียูมาก เรา

จงึตองจดัการกบัพาเนลใหเหมาะสมกบัการทาํงานของเรา

จัดวาง Panel ตามการใชงานเปนการเลอืกรปูแบบในการจดัวางของพาเนลตามการใชงาน โดยจะมรีปูแบบสาํเรจ็มาใหเราเลอืกใช ชอบ

รูปแบบไหนกเ็ลอืกใชรูปแบบนั้นไดเลย สวนรูปแบบที่กาํหนดมาใหจะเปนแบบ Essentials

เปด/ปด Panel ที่ตองการถาหาพาเนลไหนไมเจอ หรอืไมตองการใชงานพาเนลไหนกส็ามารถเปด/ปดพาเนลนั้นได โดยเขาไปคลกิ

เลอืกที่เมนู Window ไดเลย

Page 20: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

015 | Flash CS6 Essential

ซอน/แสดง Panel ที่ตองการพาเนลที่เราเปดใชงานอาจจะกนิเนื้อที่ในการทาํงานของเรา ถาปดกต็องเปดขึ้นมาใชใหม ดงันั้น เราสามารถ

ที่จะเกบ็ซอนใหมขีนาดที่เลก็ลงได เพื่อความสะดวกในการเรยีกใชงานนั่นเอง

เปลี่ยนตําแหนงของ Panelหากตําแหนงของพาเนลที่โปรแกรมจัดวางมาใหนั้น ไมถนัดกับการทํางานของเรา ก็สามารถที่จะเคลื่อน

ยายตาํแหนงของพาเนลตางๆ ไดตามที่เราตองการ

1

1. รูปแบบ Essentials เปนการจัดวางใน

รูปแบบของการใชงานจรงิ (แบบปกต)ิ

จัดวางพาเนลตามการใชงาน [Workspace]เราสามารถจดัวางรูปแบบของพาเนลตางๆ ใน

ตําแหนงใหม ใหเหมาะสมกับการใชงานดวยการคลิก

เลอืกรูปแบบ Workspace ตามที่เราตองการ

Page 21: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

INTRO 1 What’s up Flflash ? | 016

ทําความรูจักกับ Flashทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Flashlashlash

2 2. คลิกเลือกรูปแบบของ Workspace เปนแบบ

Animator เหมาะสาํหรบัคนทาํแอนเิมชนั

3. พาเนลจะถูกจัดวางตําแหนงใหมใหเหมาะกับคนที่

ทาํงานแอนเิมชนั

4. รปูแบบ Small Screen พาเนลจะถกูซอนไวใหเหมาะ

กบัคนที่ไมชอบใหมพีาเนลรกหนาจอ

3

5. ถาคุนเคยกบัการจดัวางในรูปแบบเวอรชนัเกาๆ ให

เลอืกรูปแบบ Classic

4

5

1

2

เปด/ปดพาเนลตามตองการ [Open/Close Panel]หากตองการที่จะเปดพาเนลอื่นๆ ขึ้นมาใชงานเพิ่มเตมิ หรอืถาไมตองการจะใชพาเนลนี้แลว กส็ามารถปด

พาเนลนี้ได โดยเราสามารถเขาไปคลกิเลอืกปดหรอืเปดพาเนลไดที่เมนู Window

1. คลกิเมนู Window > Properties

2. พาเนล Properties จะถูกปดลง

Page 22: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

017 | Flash CS6 Essential

3

3. คลกิเมนู Window > Properties อกีครั้ง

4. พาเนล Properties จะถูกเปดขึ้นมา

4

พาเนลทั้งหมด

หนาตางพาเนลทั้งหมดจะถูกรวบรวมเอาไวที่เมนู Window เมื่อคลกิเขาไปจะเหน็รายชื่อพาเนลมากมาย ถา

รายชื่อไหนมเีครื่องหมายถกูขางหนา แสดงวาหนาตางพาเนลนั้นถกูเปดใชงานอยู ถาไมมแีสดงวาถกูปดหรอืพาเนล

ถูกซอนเอาไวนั่นเอง

Note

1

2

3. คลกิปุมลูกศรเลก็ๆ

4. พาเนลที่ถูกซอนจะแสดงขึ้นมาทั้งแถบ คลิกปุม

ลูกศรอกีครั้งเพื่อซอนพาเนล

1. พาเนลที่ถูกซอนและแสดง

2. คลิกปุมพาเนลที่ถูกซอน ก็จะแสดงขึ้นมา

และคลกิปุมเดมิเพื่อซอนพาเนล

ซอน/แสดงพาเนลที่ตองการ การซอนและแสดงพาเนลมีอยูหลายระดับดวยกัน ไมวาจะเปนการซอนและแสดงพาเนลทั้งชุดหรือซอน

และแสดงทลีะพาเนล กส็ามารถทาํไดขึ้นอยูกบัความตองการในการใชงานของเรา

Page 23: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน

INTRO 1 What’s up Flflash ? | 018

ทําความรูจักกับ Flashทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Fทําความรูจักกับ Flashlashlash

3

4

เคลื่อนยายตําแหนงพาเนลตามตองการหากเราตองการที่จะเปลี่ยนตาํแหนงของพาเนล กส็ามารถทาํไดดวยการแดรกเมาสที่แถบสเีทาหรอืที่แทบ็

ชื่อพาเนลดงึออกมา แลวเกบ็ไวในตาํแหนงที่ตองการ

1

2

3

1. วางเมาสที่แถบพาเนลสีเทา แลวแดรกเมาสดึง

พาเนลออกมา

2. ลากพาเนลไปเกบ็ไว โดยใหแสดงแถบเสนสฟีา

3. พาเนลจะถูกยายไปอยูดานบนแลว

ถาลากพาเนลไปตรงไหนแลวมแีถบเสนสฟีา แสดงวาสามารถนาํพาเนลไปวางไวตรงนั้นได สวนถาตองการ

ใหพาเนลกลบัมาอยูในตาํแหนงเดมิ ใหเราคลกิที่รูปแบบของ Workspace แลวเลอืกคาํสั่ง Reset พาเนลจะกลบั

มาอยูในตาํแหนงเดมิ

Page 24: What’s up Flash - SERAZU€¦ · หน าตาโปรแกรม [Interface Flash CS6] 007 » หน าต าง Welcome Screen ..... 007 » ส วนประกอบของหน