Flash professional cs5-01-2012-01-12a_22. ้ ้
เนือหา 2012-01-14 (เชา)
แนะนำเครืองมือ Flash Professional CS5
่
ั่ ้
คำสงพืนฐำนทีควรจำ
่
ิ้
กำรวำดชนงำน
ิ้
ชนงำนทีเป็ นรูปภำพ
่
ตัวอักษร
ตกแต่งส ี
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
3. ้
เนือหา 2012-01-14 (บ่าย)
กำรแก ้ไขและปรับปรุงเปลียนรูปทรง
่
ิ้
กำรจัดกำรกับชนงำน
ิ ิ้
ซมโบล (Symbol) และโครงสร ้ำงของชนงำน
หลักกำรเคลือนไหวเบืองต ้น
่ ้
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
4. ความสามารถเด่นของ Flash CS5
ระบบจัดกำรตัวอักษรทีดขนเมือมีกำรถ่ำยโอนข ้อมูลจำก Adobe Indesign
่ ี ึ้ ่
้
ทำงำนและใชงำนข ้อมูลแบบ XML
เพิมเครืองมือเขียน ActionScript ทีเรียกว่ำ Code Snippets
่ ่ ่
ทำงำนร่วมกับ Flash Builder ซงเป็ นเครืองมือสำหรับใช ้ Flex Framework
ึ่ ่
ผนวกเข ้ำกับ PHP (ใช ้ PHP ติดต่อฐำนข ้อมูล และ Flash Builder จัดกำรกับ
User Interface)
ื่
เชอมต่อกับ Video ได ้ดีขน
ึ้
เพิมเติม Deco ได ้
่
ึ่ ้
รองรับกำรสร ้ำง .ipa ซงเป็ นไฟล์สำหรับ iPhone และรองรับกำรใชงำนกับ
Adobe Air ทำให ้งำนทีสร ้ำงทำงำนได ้ทัง Windows, OS X, Linux
่ ้
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
5. ั
เอนิเมชน
ั
เอนิเมชน (Animation) คือ กำรสร ้ำงภำพเคลือนไหวด ้วยกำรฉำยภำพนิง
่ ่
ต่อเนืองกันจนดูเสมือนภำพนันมีควำมเคลือนไหว
่ ้ ่
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
6. ้
Flash ใชทาอะไรได้บาง
้
ั
เอนิเมชน
เกม
นำเสนอผลงำน
เว็บแบบตอบสนองกับผู ้ใช ้ (Interaction)
ื่
สอกำรสอน
ื่
สอประสม (Multimedia)
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
8. (User Interface) 1 Menu bar
2
Stage
Tools
3 Panel
5
Timeline 4
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
9. แถบเมนู (Menu Bar)
่ ั่
เป็ นทีรวบรวมแถบคำสงต่ำงๆ เพือจัดกำรกับ
่
File
Edit
View
Insert
Text
Commands
Control
Debug
Window
Help
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
10. สเตจ (Stage)
พืนทีแสดงผลงำนทีสร ้ำงขึน
้ ่ ่ ้
เป็ นเสมือนเวทีกำรแสดง
ิ้ ่
ชนสวนหรือวัตถุทอยูนอกกรอบของสเตจจะไม่ถกแสดงผลเมือทำงำน
ี่ ่ ู ่
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
11. จานวนเฟรมต่อ
วินาที
ขนาดของสเตจ
ี ื้
สพนหล ัง
ของสเตจ
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
12. ไทม์ไลน์
้ ่
เสนชวงเวลำ
่
1 ชองแทน 1 เฟรม หรือ 1 ฉำก
ปกติใช ้ 24 เฟรม ต่อ วินำที
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
13. Layer Playhead
่ ้
ฉากทีซอนก ัน เฟรมปัจจุบ ัน
ลบเลเยอร์
สร้าง Folder
จานวนเฟรมต่อ ความยาวของ
สร้างเลเยอร์ วินาที ั
เอนิเมชน
ควบคุมการเล่น
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
15. เครืองมือ
่
Selection/
transform
Drawing
Paint
View
Color
Option
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
16. ่ั ้
คาสงพืนฐานทีควรจา
่
เริมงำนใหม่ (File > New…)
่
เปิ ดงำนเดิม (File > Open)
บันทึก (File > Save)
บันทึกเป็ นแฟ้ มใหม่ (File > Save As…)
แสดงแถบไม ้บรรทัด (View > Ruler)
แสดงกริด (View > Grid > Show Grid)
้ ้ ่ ั
เสนไกด์ (View > Guide) ใชคูกบไม ้บรรทัด
สแนป (View > Snap) ใชเป็ นตัวชวยในกำรขยับเข ้ำสู่ Grid, Guide, Pixels
้ ่
และ Object
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
17. กำรปรับมุมมอง
ย ้อนกลับ (Undo, Ctrl+Z)
ทำซ้ำ (Repeat, Ctrl+Y)
เลือกทังหมด (Ctrl+A)
้
คัดลอก (Ctrl+C)
วำง (Ctrl+V)
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
19. Tools>Oval
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
20. ิ่ ่
สงทีเราทาก ับ Shape ได้
กำหนดส ี (Stroke Color, Fill Color)
Stroke Color No Color ไม่ม ี Stroke
ี ี
Fill Color No Color ไม่มสภำยในวัตถุ
Alpha % กำหนดคุณสมบัตกำรโปร่งใส
ิ
ตัดรูปทรง
ต่อรูปทรง
เลือกบำงสวน (ใช ้ Selection)
่
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
26. ้
วาดเสน
้
เสนตรง (Line Tool)
้
เสนดินสอ (Pencil Tool)
้
ปำกกำตัดเสน (Pen Tool)
แปรงทำส ี (Brush Tool)
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
28. การวาดแบบ Object Drawing
ิ้
มองว่ำแตะละครังทีมกำรวำดจะได ้วัตถุ 1 ชน
้ ่ ี
่ ้
เมือวัตถุซอนกันจะไม่มผลต่อกัน
ี
้
สำมำรถจัดเรียงวัตถุ (Arrange) เพือจัดลำดับตำแหน่งกำรซอนได ้
่
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
32. ประเภทของรูปภาพ
เวกเตอร์ (Vector)
Flash Drawing
Illustrator
CorelDRAW!
บิตแมพ (Bitmap) หรือ รำสเตอร์ (Raster)
PhotoShop
Paint
PhotoPaint
รูปถ่ำย
ภำพทีสแกนเข ้ำคอมพิวเตอร์
่
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
33. ่
การใสภาพบิตแมพ
Import to Stage
File > Import > Import to Stage …
Import to Library
File > Import > Import to Library…
ลำกวำงจำก Library ไปที่ Stage
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
34. ต ัวอ ักษร
ประเภทของตัวอักษร
Classic Text มี 3 รูปแบบ
ิ้ ่
Static Text เป็ นชนงำนทีสร ้ำงขึนเชนเดียวกับ Drawing Object
่ ้
Input Text เป็ นตัวอักษรทีนำเข ้ำจำกผู ้ใช ้
่
่ ้
Dynamic Text เป็ นตัวเลขหรือตัวอักษรทีใชควบคูกบกำรคำนวณ
่ ั
้ ึ่ ่ ้
TLF Text ใชได ้กับ ActionScript 3.0 เท่ำนัน ซงเป็ นรูปแบบเดียวกับทีใชใน
้
Adobe InDesign และเป็ นตัวอักษรเหมือนกับ Static และ Dynamic Text
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
35. แบบอักษร
ระยะห่ำง
ขนำด
ยกกำลัง/
จัดตัวอักษร ห ้อย
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
38. เอฟเฟคต ัวอ ักษร
Drop Shadow
Blur
Glow
Bevel
Gradient Glow
Gradient Bevel
Adjust Color
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
40. สี
ใชแม่ส ี RGB (Red/Green/Blue)
้
รองรับ Alpha (โปร่งแสง)
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
41. ตกแต่งส ี
None
Solid Color
Linear Gradient
Radial Gradient
Bitmap Fill
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
42. Solid Color
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
45. Bitmap Fill
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
47. ิ้
การแก้ไขชนงาน
Subselection Free Lasso Tool
Tool Transform
SelectionToo
l
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
48. Lasso Tool
Selection
Tool
Selection
Tool
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
49. Free Transform
จุดหมุน
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
55. ิ้
การจ ัดการก ับชนงาน
กำรย ้ำย (Drag and Drop)
กำรคัดลอก (Ctrl+C, Ctrl+V)
กำรจัดกลุม (Ctrl+G)
่
ิ้
กำรจัดระเบียบชนงำน (Align)
กำรจัดลำดับ (Arrange)
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
56. ิ
ซมโบล
ิ ิ้ ้
ซมโบล (Symbol) คือชนงำนทีสร ้ำงเอำไว ้และนำกลับมำใชอีก
่
อินสแตนซ ์ (Instance) คือวัตถุ/ชนงำนทีสร ้ำงมำจำกซมโบล
ิ้ ่ ิ
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
57. ิ
การแปลงซมโบลเปนกราฟิ ก
็
ิ
เป็ นซมโบลสำหรับภำพนิงทีเป็ นรูปทรงเวกเตอร์หรือบิตแมพ
่ ่
้ ่
ใชเป็ นสวนประกอบของภำพเคลือนไหว
่
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
58. ิ
การแปลงซมโบลเปนปุม
็ ่
สร ้ำงเพือใชตอบสนองต่อกำรกระทำของเมำส ์
่ ้
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
59. ิ
การแปลงซมโบลเปนคลิปภาพยนต์
็
้
ใชสร ้ำงคลิปภำพยนต์ยอย
่
้
นิยมใชเตรียมท่ำทำงของตัวแสดง
จะอิสระจำก Timeline
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
63. โครงสร้างของงาน
Flash Movie
…
…
Scene Scene Scene
…
Movie Clip, Button, Movie Clip, Button, … Movie Clip, Button,
Graphic, Graphic, Graphic,
Drawing Object Drawing Object Drawing Object
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
64. ้
หล ักการเคลือนไหวเบืองต้น
่
เฟรม (Frame)
่ ี ิ้
เฟรมทีมชนงำน (Keyframe)
เฟรมปกติ (Frame)
เฟรมเปล่ำ (Blank Frame)
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
65. ภาพต่อเนือง
่
ภำพต่อภำพ (frame-by-frame)
ิ้
เคลือนย ้ำยชนงำน (Motion Tween)
่
ิ้
เปลียนรูปทรงชนงำน (Shape Tween)
่
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
66. มาทาต ัวอ ักษรวิงก ันเถอะ
่
ื่ ึ
สร ้ำง Text ทีเป็ นชอของนักศกษำและตกแต่งให ้สวยงำม
่
ลำกให ้อยูนอกสเตจ
่
ทำเฟรมหลักตำมผู ้สอน
ทดลองรัน (กด Enter)
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
67. นกบินบนท้องฟา
้
ิ
วำดนกและจัดก็บเป็ นซมโบล (Bird)
ลบ Instance ของนกทิงไปก่อน
้
วำดฉำกหลัง
ิ
สร ้ำงนกจำกซมโบล โดยเอำไว ้ด ้ำนนอกสเตจ
สร ้ำงเฟรมหลักตำมผู ้สอนครับ
ทดลองรัน
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
68. รหัสประจำตัว
รูป
ื่
ชอ-นำมสกุล
แนะนาตนเอง
ข ้อควำมแนะนำตนเอง
ิ
วำดรูปตัวเองและเก็บเป็ นซมโบล
ึ ิ
สร ้ำง Text เป็ นรหัสของนักศกษำ แล ้วเก็บเป็ นซมโบล
ื่ ึ ิ
สร ้ำง Text เป็ นชอของนักศกษำ แล ้วเก็บเป็ นซมโบล
ิ
สร ้ำง Text เป็ นข ้อควำมแนะนำตนเอง แล ้วเก็บเป็ นซมโบล
่ ่ ุ ้
ทำอย่ำงไรก็ได ้ให ้รูปเลือนจำกบนลงล่ำง (หยุดทีมมบนซำยของจอภำพ)
ื่ ึ
ทำอย่ำงไรก็ได ้ให ้รหัสและชอของนักศกษำเลือนมำจำกทำงขวำมำหยุดทีขอบ
่ ่
ด ้ำนขวำของรูป
ทำอย่ำงไรก็ได ้ให ้ข ้อควำมแนะนำตนเองเลือจำกด ้ำนล่ำงมำหยุดทีด ้ำนล่ำง
่ ่
ของรูป
รอ 10 วินำที
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)
69. จบว ันที่ 1
พรุงนีมำทำ Animation กันต่อ
่ ้
่ ี
พรุงนีมำใสเสยงกัน
่ ้
่ ้ ่ ื่
พรุงนีมำทำงำนนำเสนอของแต่ละคน เพือเป็ นกำรยืนยันว่ำพวกเรำทำสอด ้วย
Flash เป็ นแล ้ว
Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)