Flash professional cs5-01-2012-01-12a_2

Flash Professional
CS5
2012-01-14
Jaroot Busarathid
ARIT@PBRU, CSC@SCAAT.PBRU

้ ้
เนือหา 2012-01-14 (เชา)
 แนะนำเครืองมือ Flash Professional CS5
่
ั่ ้
 คำสงพืนฐำนทีควรจำ
่
ิ้
 กำรวำดชนงำน
ิ้
 ชนงำนทีเป็ นรูปภำพ
่
 ตัวอักษร
 ตกแต่งส ี

Jaroot Busarathid (ARIT@PBRU, CSC@SCAAT.PBRU)

้
เนือหา 2012-01-14 (บ่าย)
 กำรแก ้ไขและปรับปรุงเปลียนรูปทรง
่
ิ้
 กำรจัดกำรกับชนงำน
ิ ิ้
 ซมโบล (Symbol) และโครงสร ้ำงของชนงำน
 หลักกำรเคลือนไหวเบืองต ้น
่ ้


ความสามารถเด่นของ 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
่ ้


ั
เอนิเมชน
ั
 เอนิเมชน (Animation) คือ กำรสร ้ำงภำพเคลือนไหวด ้วยกำรฉำยภำพนิง
่ ่
ต่อเนืองกันจนดูเสมือนภำพนันมีควำมเคลือนไหว
่ ้ ่


้
Flash ใชทาอะไรได้บาง
้
ั
 เอนิเมชน
 เกม
 นำเสนอผลงำน
 เว็บแบบตอบสนองกับผู ้ใช ้ (Interaction)
ื่
 สอกำรสอน
ื่
 สอประสม (Multimedia)


หน้าตาของโปรแกรม (Welcome Screen)

1
3

2


(User Interface) 1 Menu bar

2
Stage

Tools

3 Panel
5
Timeline 4


แถบเมนู (Menu Bar)
่ ั่
 เป็ นทีรวบรวมแถบคำสงต่ำงๆ เพือจัดกำรกับ
่
 File
 Edit
 View
 Insert
 Text
 Commands
 Control
 Debug
 Window
 Help


สเตจ (Stage)
 พืนทีแสดงผลงำนทีสร ้ำงขึน
้ ่ ่ ้
 เป็ นเสมือนเวทีกำรแสดง
ิ้ ่
 ชนสวนหรือวัตถุทอยูนอกกรอบของสเตจจะไม่ถกแสดงผลเมือทำงำน
ี่ ่ ู ่


จานวนเฟรมต่อ
วินาที

ขนาดของสเตจ

ี ื้
สพนหล ัง
ของสเตจ


ไทม์ไลน์
้ ่
 เสนชวงเวลำ
่
 1 ชองแทน 1 เฟรม หรือ 1 ฉำก
 ปกติใช ้ 24 เฟรม ต่อ วินำที


Layer Playhead
่ ้
ฉากทีซอนก ัน เฟรมปัจจุบ ัน

ลบเลเยอร์
สร้าง Folder
จานวนเฟรมต่อ ความยาวของ
สร้างเลเยอร์ วินาที ั
เอนิเมชน
ควบคุมการเล่น


พาเนล
 เป็ นตัวเสริม/ชวยในกำรปรับแต่งค่ำ เชน กำรปรับค่ำส ี
่ ่


เครืองมือ
่
Selection/
transform

Drawing

Paint

View

Color

Option


่ั ้
คาสงพืนฐานทีควรจา
่
 เริมงำนใหม่ (File > New…)
่
 เปิ ดงำนเดิม (File > Open)
 บันทึก (File > Save)
 บันทึกเป็ นแฟ้ มใหม่ (File > Save As…)
 แสดงแถบไม ้บรรทัด (View > Ruler)
 แสดงกริด (View > Grid > Show Grid)
้ ้ ่ ั
 เสนไกด์ (View > Guide) ใชคูกบไม ้บรรทัด
 สแนป (View > Snap) ใชเป็ นตัวชวยในกำรขยับเข ้ำสู่ Grid, Guide, Pixels
้ ่
และ Object


 กำรปรับมุมมอง

 ย ้อนกลับ (Undo, Ctrl+Z)
 ทำซ้ำ (Repeat, Ctrl+Y)
 เลือกทังหมด (Ctrl+A)
้
 คัดลอก (Ctrl+C)
 วำง (Ctrl+V)


ิ้
การวาดชนงาน
 Shape & Stroke

Shape วงกลม/วงรี

้
Strokeเสนขอบ


Tools>Oval


ิ่ ่
สงทีเราทาก ับ Shape ได้
 กำหนดส ี (Stroke Color, Fill Color)
 Stroke Color  No Color  ไม่ม ี Stroke
ี ี
 Fill Color No Color ไม่มสภำยในวัตถุ
 Alpha % กำหนดคุณสมบัตกำรโปร่งใส
ิ

 ตัดรูปทรง
 ต่อรูปทรง
 เลือกบำงสวน (ใช ้ Selection)
่


กาหนดคุณสมบ ัติ
 Poly Star Tool
 Oval Primitive Tool


้
วาดเสน
้
 เสนตรง (Line Tool)
้
 เสนดินสอ (Pencil Tool)
้
 ปำกกำตัดเสน (Pen Tool)
 แปรงทำส ี (Brush Tool)


การวาดแบบ Object Drawing
ิ้
 มองว่ำแตะละครังทีมกำรวำดจะได ้วัตถุ 1 ชน
้ ่ ี
่ ้
 เมือวัตถุซอนกันจะไม่มผลต่อกัน
ี
้
 สำมำรถจัดเรียงวัตถุ (Arrange) เพือจัดลำดับตำแหน่งกำรซอนได ้
่


มาเล่น Deco Tool ก ัน


ประเภทของรูปภาพ
 เวกเตอร์ (Vector)
 Flash Drawing
 Illustrator
 CorelDRAW!

 บิตแมพ (Bitmap) หรือ รำสเตอร์ (Raster)
 PhotoShop
 Paint
 PhotoPaint
 รูปถ่ำย
 ภำพทีสแกนเข ้ำคอมพิวเตอร์
่


่
การใสภาพบิตแมพ
 Import to Stage
 File > Import > Import to Stage …

 Import to Library
 File > Import > Import to Library…
 ลำกวำงจำก Library ไปที่ Stage


ต ัวอ ักษร
 ประเภทของตัวอักษร
 Classic Text มี 3 รูปแบบ
ิ้ ่
Static Text เป็ นชนงำนทีสร ้ำงขึนเชนเดียวกับ Drawing Object
่ ้
Input Text เป็ นตัวอักษรทีนำเข ้ำจำกผู ้ใช ้
่
่ ้
Dynamic Text เป็ นตัวเลขหรือตัวอักษรทีใชควบคูกบกำรคำนวณ
่ ั
้ ึ่ ่ ้
 TLF Text ใชได ้กับ ActionScript 3.0 เท่ำนัน ซงเป็ นรูปแบบเดียวกับทีใชใน
้
Adobe InDesign และเป็ นตัวอักษรเหมือนกับ Static และ Dynamic Text


แบบอักษร

ระยะห่ำง
ขนำด

ยกกำลัง/
จัดตัวอักษร ห ้อย


การแยกต ัวอ ักษร


เอฟเฟคต ัวอ ักษร
 Drop Shadow
 Blur
 Glow
 Bevel
 Gradient Glow
 Gradient Bevel
 Adjust Color


สี
 ใชแม่ส ี RGB (Red/Green/Blue)
้
 รองรับ Alpha (โปร่งแสง)


ตกแต่งส ี
 None
 Solid Color
 Linear Gradient
 Radial Gradient
 Bitmap Fill


Solid Color


Linear Gradient


Radial Gradient


Bitmap Fill


ี
Paint Buck (กระปองส)
๋


ิ้
การแก้ไขชนงาน
Subselection Free Lasso Tool
Tool Transform

SelectionToo
l


Lasso Tool

Selection
Tool

Selection
Tool


Free Transform

จุดหมุน


ิ้
การจ ัดการก ับชนงาน
 กำรย ้ำย (Drag and Drop)
 กำรคัดลอก (Ctrl+C, Ctrl+V)
 กำรจัดกลุม (Ctrl+G)
่
ิ้
 กำรจัดระเบียบชนงำน (Align)
 กำรจัดลำดับ (Arrange)


ิ
ซมโบล
ิ ิ้ ้
 ซมโบล (Symbol) คือชนงำนทีสร ้ำงเอำไว ้และนำกลับมำใชอีก
่
 อินสแตนซ ์ (Instance) คือวัตถุ/ชนงำนทีสร ้ำงมำจำกซมโบล
ิ้ ่ ิ


ิ
การแปลงซมโบลเปนกราฟิ ก
็
ิ
 เป็ นซมโบลสำหรับภำพนิงทีเป็ นรูปทรงเวกเตอร์หรือบิตแมพ
่ ่
้ ่
 ใชเป็ นสวนประกอบของภำพเคลือนไหว
่


ิ
การแปลงซมโบลเปนปุม
็ ่
 สร ้ำงเพือใชตอบสนองต่อกำรกระทำของเมำส ์
่ ้


ิ
การแปลงซมโบลเปนคลิปภาพยนต์
็
้
 ใชสร ้ำงคลิปภำพยนต์ยอย
่
้
 นิยมใชเตรียมท่ำทำงของตัวแสดง
 จะอิสระจำก Timeline


โครงสร้างของงาน
Flash Movie

…

…
Scene Scene Scene

…

Movie Clip, Button, Movie Clip, Button, … Movie Clip, Button,
Graphic, Graphic, Graphic,
Drawing Object Drawing Object Drawing Object


้
หล ักการเคลือนไหวเบืองต้น
่
 เฟรม (Frame)
่ ี ิ้
 เฟรมทีมชนงำน (Keyframe)
 เฟรมปกติ (Frame)
 เฟรมเปล่ำ (Blank Frame)


ภาพต่อเนือง
่
 ภำพต่อภำพ (frame-by-frame)
ิ้
 เคลือนย ้ำยชนงำน (Motion Tween)
่
ิ้
 เปลียนรูปทรงชนงำน (Shape Tween)
่


มาทาต ัวอ ักษรวิงก ันเถอะ
่
ื่ ึ
 สร ้ำง Text ทีเป็ นชอของนักศกษำและตกแต่งให ้สวยงำม
่
 ลำกให ้อยูนอกสเตจ
่
 ทำเฟรมหลักตำมผู ้สอน
 ทดลองรัน (กด Enter)


นกบินบนท้องฟา
้
ิ
 วำดนกและจัดก็บเป็ นซมโบล (Bird)
 ลบ Instance ของนกทิงไปก่อน
้
 วำดฉำกหลัง
ิ
 สร ้ำงนกจำกซมโบล โดยเอำไว ้ด ้ำนนอกสเตจ
 สร ้ำงเฟรมหลักตำมผู ้สอนครับ
 ทดลองรัน


รหัสประจำตัว
รูป
ื่
ชอ-นำมสกุล
แนะนาตนเอง
ข ้อควำมแนะนำตนเอง
ิ
 วำดรูปตัวเองและเก็บเป็ นซมโบล
ึ ิ
 สร ้ำง Text เป็ นรหัสของนักศกษำ แล ้วเก็บเป็ นซมโบล
ื่ ึ ิ
 สร ้ำง Text เป็ นชอของนักศกษำ แล ้วเก็บเป็ นซมโบล
ิ
 สร ้ำง Text เป็ นข ้อควำมแนะนำตนเอง แล ้วเก็บเป็ นซมโบล
่ ่ ุ ้
 ทำอย่ำงไรก็ได ้ให ้รูปเลือนจำกบนลงล่ำง (หยุดทีมมบนซำยของจอภำพ)
ื่ ึ
 ทำอย่ำงไรก็ได ้ให ้รหัสและชอของนักศกษำเลือนมำจำกทำงขวำมำหยุดทีขอบ
่ ่
ด ้ำนขวำของรูป
 ทำอย่ำงไรก็ได ้ให ้ข ้อควำมแนะนำตนเองเลือจำกด ้ำนล่ำงมำหยุดทีด ้ำนล่ำง
่ ่
ของรูป
 รอ 10 วินำที


จบว ันที่ 1
 พรุงนีมำทำ Animation กันต่อ
่ ้
่ ี
 พรุงนีมำใสเสยงกัน
่ ้
่ ้ ่ ื่
 พรุงนีมำทำงำนนำเสนอของแต่ละคน เพือเป็ นกำรยืนยันว่ำพวกเรำทำสอด ้วย
Flash เป็ นแล ้ว


Flash professional cs5-01-2012-01-12a_2

More Related Content

Similar to Flash professional cs5-01-2012-01-12a_2 (20)

Flash professional cs5-01-2012-01-12a_2