Transcript
Page 1: Flash professional cs5-01-2012-01-12a_2

Flash Professional CS5

2012-01-14

Jaroot Busarathid

ARIT@PBRU, [email protected]

Page 2: Flash professional cs5-01-2012-01-12a_2

เนอหา 2012-01-14 (เชา)

แนะน ำเครองมอ Flash Professional CS5

ค ำสงพนฐำนทควรจ ำ

กำรวำดชนงำน

ชนงำนทเปนรปภำพ

ตวอกษร

ตกแตงส

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 3: Flash professional cs5-01-2012-01-12a_2

เนอหา 2012-01-14 (บาย)

กำรแกไขและปรบปรงเปลยนรปทรง

กำรจดกำรกบชนงำน

ซมโบล (Symbol) และโครงสรำงของชนงำน

หลกกำรเคลอนไหวเบองตน

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 4: Flash professional cs5-01-2012-01-12a_2

ความสามารถเดนของ 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, [email protected])

Page 5: Flash professional cs5-01-2012-01-12a_2

เอนเมชน

เอนเมชน (Animation) คอ กำรสรำงภำพเคลอนไหวดวยกำรฉำยภำพนงตอเนองกนจนดเสมอนภำพนนมควำมเคลอนไหว

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 6: Flash professional cs5-01-2012-01-12a_2

Flash ใชท าอะไรไดบาง

เอนเมชน

เกม

น ำเสนอผลงำน

เวบแบบตอบสนองกบผใช (Interaction)

สอกำรสอน

สอประสม (Multimedia)

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 7: Flash professional cs5-01-2012-01-12a_2

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

Jaroot Busarathid (ARIT@PBRU, [email protected])

1

2

3

Page 8: Flash professional cs5-01-2012-01-12a_2

(User Interface)

Jaroot Busarathid (ARIT@PBRU, [email protected])

1

2

3 4

5

Menu bar

Stage

Timeline

Panel

Tools

Page 9: Flash professional cs5-01-2012-01-12a_2

แถบเมน (Menu Bar)

เปนทรวบรวมแถบค ำสงตำงๆ เพอจดกำรกบ

File

Edit

View

Insert

Text

Commands

Control

Debug

Window

Help

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 10: Flash professional cs5-01-2012-01-12a_2

สเตจ (Stage)

พนทแสดงผลงำนทสรำงขน

เปนเสมอนเวทกำรแสดง

ชนสวนหรอวตถทอยนอกกรอบของสเตจจะไมถกแสดงผลเมอท ำงำน

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 11: Flash professional cs5-01-2012-01-12a_2

จ านวนเฟรมตอวนาท

ขนาดของสเตจ

สพนหลง ของสเตจ

Jaroot Busarathid (ARIT@PBRU, [email protected])

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

ไทมไลน

เสนชวงเวลำ

1 ชองแทน 1 เฟรม หรอ 1 ฉำก

ปกตใช 24 เฟรม ตอ วนำท

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 13: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Playhead เฟรมปจจบน

Layer ฉากทซอนกน

ลบเลเยอร

สราง Folder

สรางเลเยอร ควบคมการเลน

จ านวนเฟรมตอวนาท

ความยาวของ เอนเมชน

Page 14: Flash professional cs5-01-2012-01-12a_2

พาเนล

เปนตวเสรม/ชวยในกำรปรบแตงคำ เชน กำรปรบคำส

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 15: Flash professional cs5-01-2012-01-12a_2

เครองมอ

Jaroot Busarathid (ARIT@PBRU, [email protected])

Selection/ transform

Drawing

Paint

View

Color

Option

Page 16: Flash professional cs5-01-2012-01-12a_2

ค าส งพนฐานทควรจ า

เรมงำนใหม (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, [email protected])

Page 17: Flash professional cs5-01-2012-01-12a_2

กำรปรบมมมอง

ยอนกลบ (Undo, Ctrl+Z)

ท ำซ ำ (Repeat, Ctrl+Y)

เลอกทงหมด (Ctrl+A)

คดลอก (Ctrl+C)

วำง (Ctrl+V)

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 18: Flash professional cs5-01-2012-01-12a_2

การวาดชนงาน

Shape & Stroke

Jaroot Busarathid (ARIT@PBRU, [email protected])

Shape วงกลม/วงร

Strokeเสนขอบ

Page 19: Flash professional cs5-01-2012-01-12a_2

Tools>Oval

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 20: Flash professional cs5-01-2012-01-12a_2

สงทเราท ากบ Shape ได

ก ำหนดส (Stroke Color, Fill Color)

Stroke Color No Color ไมม Stroke

Fill Color No Color ไมมสภำยในวตถ

Alpha % ก ำหนดคณสมบตกำรโปรงใส

ตดรปทรง

ตอรปทรง

เลอกบำงสวน (ใช Selection)

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 21: Flash professional cs5-01-2012-01-12a_2

ก าหนดคณสมบต

Poly Star Tool

Oval Primitive Tool

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 22: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 23: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 24: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 25: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 26: Flash professional cs5-01-2012-01-12a_2

วาดเสน

เสนตรง (Line Tool)

เสนดนสอ (Pencil Tool)

ปำกกำตดเสน (Pen Tool)

แปรงทำส (Brush Tool)

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 27: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 28: Flash professional cs5-01-2012-01-12a_2

การวาดแบบ Object Drawing

มองวำแตะละครงทมกำรวำดจะไดวตถ 1 ชน

เมอวตถซอนกนจะไมมผลตอกน

สำมำรถจดเรยงวตถ (Arrange) เพอจดล ำดบต ำแหนงกำรซอนได

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 29: Flash professional cs5-01-2012-01-12a_2

มาเลน Deco Tool กน

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 30: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 31: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 32: Flash professional cs5-01-2012-01-12a_2

ประเภทของรปภาพ

เวกเตอร (Vector)

Flash Drawing

Illustrator

CorelDRAW!

บตแมพ (Bitmap) หรอ รำสเตอร (Raster)

PhotoShop

Paint

PhotoPaint

รปถำย

ภำพทสแกนเขำคอมพวเตอร

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 33: Flash professional cs5-01-2012-01-12a_2

การใสภาพบตแมพ

Import to Stage

File > Import > Import to Stage …

Import to Library

File > Import > Import to Library…

ลำกวำงจำก Library ไปท Stage

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 34: Flash professional cs5-01-2012-01-12a_2

ตวอกษร

ประเภทของตวอกษร

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, [email protected])

Page 35: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

จดตวอกษร

แบบอกษร

ขนำด

ระยะหำง

ยกก ำลง/หอย

Page 36: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 37: Flash professional cs5-01-2012-01-12a_2

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

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 38: Flash professional cs5-01-2012-01-12a_2

เอฟเฟคตวอกษร

Drop Shadow

Blur

Glow

Bevel

Gradient Glow

Gradient Bevel

Adjust Color

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 39: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 40: Flash professional cs5-01-2012-01-12a_2

ใชแมส RGB (Red/Green/Blue)

รองรบ Alpha (โปรงแสง)

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 41: Flash professional cs5-01-2012-01-12a_2

ตกแตงส

None

Solid Color

Linear Gradient

Radial Gradient

Bitmap Fill

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 42: Flash professional cs5-01-2012-01-12a_2

Solid Color

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 43: Flash professional cs5-01-2012-01-12a_2

Linear Gradient

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 44: Flash professional cs5-01-2012-01-12a_2

Radial Gradient

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 45: Flash professional cs5-01-2012-01-12a_2

Bitmap Fill

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 46: Flash professional cs5-01-2012-01-12a_2

Paint Buck (กระปองส)

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 47: Flash professional cs5-01-2012-01-12a_2

การแกไขชนงาน

Jaroot Busarathid (ARIT@PBRU, [email protected])

Lasso Tool Free Transform

SubselectionTool

SelectionTool

Page 48: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Selection Tool

Selection Tool

Lasso Tool

Page 49: Flash professional cs5-01-2012-01-12a_2

Free Transform

Jaroot Busarathid (ARIT@PBRU, [email protected])

จดหมน

Page 50: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 51: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 52: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 53: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 54: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 55: Flash professional cs5-01-2012-01-12a_2

การจดการกบชนงาน

กำรยำย (Drag and Drop)

กำรคดลอก (Ctrl+C, Ctrl+V)

กำรจดกลม (Ctrl+G)

กำรจดระเบยบชนงำน (Align)

กำรจดล ำดบ (Arrange)

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 56: Flash professional cs5-01-2012-01-12a_2

ซมโบล

ซมโบล (Symbol) คอชนงำนทสรำงเอำไวและน ำกลบมำใชอก

อนสแตนซ (Instance) คอวตถ/ช นงำนทสรำงมำจำกซมโบล

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 57: Flash professional cs5-01-2012-01-12a_2

การแปลงซมโบลเปนกราฟก

เปนซมโบลส ำหรบภำพนงทเปนรปทรงเวกเตอรหรอบตแมพ

ใชเปนสวนประกอบของภำพเคลอนไหว

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 58: Flash professional cs5-01-2012-01-12a_2

การแปลงซมโบลเปนป ม

สรำงเพอใชตอบสนองตอกำรกระท ำของเมำส

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 59: Flash professional cs5-01-2012-01-12a_2

การแปลงซมโบลเปนคลปภาพยนต

ใชสรำงคลปภำพยนตยอย

นยมใชเตรยมทำทำงของตวแสดง

จะอสระจำก Timeline

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 60: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 61: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 62: Flash professional cs5-01-2012-01-12a_2

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 63: Flash professional cs5-01-2012-01-12a_2

โครงสรางของงาน

Jaroot Busarathid (ARIT@PBRU, [email protected])

Flash Movie

Scene Scene Scene

Movie Clip, Button, Graphic,

Drawing Object

Movie Clip, Button, Graphic,

Drawing Object

Movie Clip, Button, Graphic,

Drawing Object

Page 64: Flash professional cs5-01-2012-01-12a_2

หลกการเคลอนไหวเบองตน

เฟรม (Frame)

เฟรมทมช นงำน (Keyframe)

เฟรมปกต (Frame)

เฟรมเปลำ (Blank Frame)

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 65: Flash professional cs5-01-2012-01-12a_2

ภาพตอเนอง

ภำพตอภำพ (frame-by-frame)

เคลอนยำยชนงำน (Motion Tween)

เปลยนรปทรงชนงำน (Shape Tween)

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 66: Flash professional cs5-01-2012-01-12a_2

มาท าตวอกษรวงกนเถอะ

สรำง Text ทเปนชอของนกศกษำและตกแตงใหสวยงำม

ลำกใหอยนอกสเตจ

ท ำเฟรมหลกตำมผสอน

ทดลองรน (กด Enter)

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 67: Flash professional cs5-01-2012-01-12a_2

นกบนบนทองฟา

วำดนกและจดกบเปนซมโบล (Bird)

ลบ Instance ของนกทงไปกอน

วำดฉำกหลง

สรำงนกจำกซมโบล โดยเอำไวดำนนอกสเตจ

สรำงเฟรมหลกตำมผสอนครบ

ทดลองรน

Jaroot Busarathid (ARIT@PBRU, [email protected])

Page 68: Flash professional cs5-01-2012-01-12a_2

แนะน าตนเอง

วำดรปตวเองและเกบเปนซมโบล

สรำง Text เปนรหสของนกศกษำ แลวเกบเปนซมโบล

สรำง Text เปนชอของนกศกษำ แลวเกบเปนซมโบล

สรำง Text เปนขอควำมแนะน ำตนเอง แลวเกบเปนซมโบล

ท ำอยำงไรกไดใหรปเลอนจำกบนลงลำง (หยดทมมบนซำยของจอภำพ)

ท ำอยำงไรกไดใหรหสและชอของนกศกษำเลอนมำจำกทำงขวำมำหยดทขอบดำนขวำของรป

ท ำอยำงไรกไดใหขอควำมแนะน ำตนเองเลอจำกดำนลำงมำหยดทดำนลำงของรป

รอ 10 วนำท

Jaroot Busarathid (ARIT@PBRU, [email protected])

รป รหสประจ ำตว

ชอ-นำมสกล

ขอควำมแนะน ำตนเอง

Page 69: Flash professional cs5-01-2012-01-12a_2

จบวนท 1

พรงนมำท ำ Animation กนตอ

พรงนมำใสเสยงกน

พรงนมำท ำงำนน ำเสนอของแตละคน เพอเปนกำรยนยนวำพวกเรำท ำสอดวย Flash เปนแลว

Jaroot Busarathid (ARIT@PBRU, [email protected])


Top Related