Multimedia application in business bcom 3301 3 2 2 5
Download
1 / 181

บทที่ 7 (ต่อ) การสร้าง Animation ด้วย โปรแกรม Adobe Flash - PowerPoint PPT Presentation


  • 103 Views
  • Uploaded on

วิชา การประยุกต์ใช้งานด้านธุรกิจด้วยมัลติมีเดีย ( Multimedia Application in Business) รหัสวิชา BCOM 3301 3(2-2-5).

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' บทที่ 7 (ต่อ) การสร้าง Animation ด้วย โปรแกรม Adobe Flash' - tamira


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Multimedia application in business bcom 3301 3 2 2 5

วิชา การประยุกต์ใช้งานด้านธุรกิจด้วยมัลติมีเดีย (Multimedia Application in Business)รหัสวิชา BCOM3301 3(2-2-5)

ภาคเรียนที่ 1 ปีการศึกษา 2555ผู้สอน อ. เล็กฤทัย ขันทองชัย โทร. (085)138-6677 ห้อง 925/1E-mail :[email protected]ชา : http://msci.chandra.ac.th/lrk/


7 animation adobe flash

บทที่ 7 (ต่อ) การประยุกต์ใช้งานด้านธุรกิจด้วยมัลติมีเดีย (การสร้าง Animation ด้วยโปรแกรม Adobe Flash


ความต้องการระบบคอมพิวเตอร์

ความต้องการระบบของโปรแกรม Flash CS3

เครื่องคอมพิวเตอร์ที่มีหน่วยประมวลผลกลางระดับ Pentium 4,Core Duo 1 GHz ขึ้นไป

ระบบปฏิบัติการ Windows XP ServicePack2 หรือ Windows Vista

หน่วยความจำ (RAM) อย่างต่ำ 512 MB (แนะนำให้ใช้ 1 GB)

เนื้อที่ของฮาร์ดดิสก์อย่างน้อย 2.5 GB จอภาพสีที่ความละเอียด

1024 x 768 pixels (32 bit)

3


วิทยากร : อ.เล็กฤทัยขันทองชัย


การสร้างไฟล์ด้วยการกำหนดรูปแบบเองการสร้างไฟล์ด้วยการกำหนดรูปแบบเอง

Flash Document ไฟล์รูปแบบปกติ ที่ใช้สร้างงานแอนนิเมชันทั่วไป

Flash Slide Presentationไฟล์งานที่เหมาะกับการสร้างงานนำเสนอ

Flash Form Application ใช้สร้างฟอร์มสำหรับทำเป็นโปรแกรมใช้งานทั่วไป

ActionScript File เป็นหน้าต่างที่ไว้เขียนสคริปต์เพียงอย่างเดียว

ActionScriptCommunication Fileเขียนไฟล์เพื่อติดต่อกับเชิร์ฟเวอร์

Flash JavaScriptFile เหมาะสำหรับงานเขียนสคริปต์ที่ทำงานร่วมกับ JavaScript หรือ API

Flash Project เป็นการรวมกลุ่มงานที่สร้างทั้งหมด ให้ออกมาเป็น Project ไฟล์


แนะนำโปรแกรมการสร้างไฟล์ด้วยการกำหนดรูปแบบเอง

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

  • ปัจจุบันนิยมสร้างไฟล์ Flash เพื่อใช้ในการนำเสนองานมัลติมีเดียบนเว็บ (SWF )

วิทยากร : อ.เล็กฤทัย ขันทองชัย


ประเภทของกราฟิกการสร้างไฟล์ด้วยการกำหนดรูปแบบเอง

  • Bitmap

    เป็นภาพที่เกิดจากจุดสีจุดเล็ก ๆ ที่เรียกว่า Pixel

    ประกอบกันเป็นรูปร่างบนพื้นที่ที่มีลักษณะเป็น

    ตาราง จะมีปัญหาภาพแตกเมื่อมีการขยายภาพ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


ประเภทของกราฟิกการสร้างไฟล์ด้วยการกำหนดรูปแบบเอง(ต่อ)

  • Vector

    ใช้สมการทางคณิตศาสตร์

    เป็นตัวสร้างภาพ เมื่อขยายภาพ

    ความคมชัดของภาพก็จะยังคงเดิม

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Flash
หลักการทำงานของ การสร้างไฟล์ด้วยการกำหนดรูปแบบเองFlash

ขั้นตอนที่ 1

นำเข้าภาพกราฟิกหรือ

ภาพที่สร้างขึ้นมา

ขั้นตอนที่ 3

ทำการสร้าง Animation

โดยจะใส่เสียง หรือ Script

ขั้นตอนที่ 2

แปลงส่วนประกอบต่าง ๆ

ให้เป็น Symbol

ขั้นตอนที่ 4

Publish ออกมาเป็น

ชิ้นงาน

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Flash1
นามสกุลของ การสร้างไฟล์ด้วยการกำหนดรูปแบบเองFlash

  • *.fla (Flash Movie)

    • เป็นไฟล์ที่ได้จากการสร้างชิ้นงานใน Flash ที่สามารถนำมาแก้ไขเปลี่ยนแปลงได้

  • *.swf (Shockwave Flash)

    • เป็นไฟล์ที่ Flash สร้างขึ้นหลังจากการแสดงผลออกมา

    • สามารถดูผลการแสดงได้โดยไม่ต้องเปิดโปรแกรม Flash

  • ในการ Publish จะมีการสร้างไฟล์ .html เพิ่ม เพื่อเป็นตัวเรียกใช้ไฟล์ *.swf ขึ้นมาให้ทำงาน

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Flash8
การเข้าสู่โปรแกรม การสร้างไฟล์ด้วยการกำหนดรูปแบบเองFlash8

  • Start

    • Programs

      • Adobe Master Collection CS5

        • Adobe Flash Professional CS5

วิทยากร : อ.เล็กฤทัย ขันทองชัย


ส่วนประกอบหน้าจอโปรแกรมส่วนประกอบหน้าจอโปรแกรม

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Toolbox
การแสดง ส่วนประกอบหน้าจอโปรแกรม/ ซ่อน Toolbox

  • เมนู Window  Tools

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Panels
การแสดง ส่วนประกอบหน้าจอโปรแกรม/ ซ่อน Panels

  • Window  เลือก Panels ต่าง ๆ

  • กดปุ่ม F4 เพื่อซ่อน

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Toolbox1

Selection : ใช้เลือก เคลื่อนย้ายวัตถุ

Subselection : ใช้ปรับแต่งเส้น

Line : ใช้สร้างเส้น

Lasso : ใช้เลือกวัตถุ

Pen : ใช้วาดเส้นตรงหรือเส้นโค้ง

เครื่องมือต่าง ๆ (Toolbox)

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Toolbox2

Text : ใช้สร้างตัวอักษร เคลื่อนย้ายวัตถุ

Oval : ใช้สร้างวงกลม วงรี

Rectangle:ใช้สร้างรูปสี่เหลี่ยม

Pencil : ใช้วาดเส้น

Brush : ใช้ระบายสี

เครื่องมือต่าง ๆ (Toolbox) ต่อ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Toolbox3

Free Transform : ใช้ปรับขนาดและเปลี่ยนแปลงรูปทรงวัตถุ

Fill Transform : ใช้ปรับแต่งเฉดสี

Ink Bottle : ใช้กำหนดสีเส้น

Paint Bucket : ใช้กำหนดสีพื้นให้วัตถุ

Eyedropper : ใช้ดูดสี

เครื่องมือต่าง ๆ (Toolbox) ต่อ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Toolbox4

Eraser : ใช้ลบส่วนของวัตถุ ใช้ปรับขนาดและเปลี่ยนแปลงรูปทรงวัตถุ

Hend : ใช้เลื่อนหน้าจอ

Zoom : ใช้ย่อขยาย มุมมอง

Option : เป็นที่กำหนดคุณสมบัติของเครื่องมือต่าง ๆ

เครื่องมือต่าง ๆ (Toolbox) ต่อ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การสร้างชิ้นงานใหม่ ใช้ปรับขนาดและเปลี่ยนแปลงรูปทรงวัตถุ

  • เมนู File  New

  • Ctrl + N

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การกำหนดคุณสมบัติเอกสารการกำหนดคุณสมบัติเอกสาร

  • เมนู Modify  Document

    • Dimensions : ขนาดของเอกสาร

    • Background Color : สีพื้นหลัง

    • Frame Rate : จำนวน Frame ที่แสดงต่อวินาที

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การกำหนดคุณสมบัติเอกสารการกำหนดคุณสมบัติเอกสาร(ต่อ)

  • Ruler units : หน่วยของไม้บรรทัด

  • Make Default : บันทึกค่าที่ได้กำหนดไว้ให้เป็นค่ามาตราฐาน

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การปรับการแสดงขนาดพื้นที่ทำงานการปรับการแสดงขนาดพื้นที่ทำงาน

  • เลือกขนาดที่ต้องการ

  • Show Frame : แสดงขนาดชิ้นงานให้พอดีกับพื้นที่ว่าง

วิทยากร : อ.เล็กฤทัย ขันทองชัย


เมนู View > Rulersการปรับการแสดงขนาดพื้นที่ทำงาน

ลากเส้นไม้บรรทัดมาไว้ใช้

ถ้าไม่ต้องการใช้ก็ลากเก็บไว้ที่เดิม

การเรียกใช้ ไม้บรรทัด

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Hand tool h
Hand Tool (H)การปรับการแสดงขนาดพื้นที่ทำงาน

  • ใช้ในการเลื่อนดูข้อมูล

ในกรณีที่ใช้ Tool ใดๆ แล้วต้องการใช้ Hand Tool

ให้กด Space bar ค้างไว้

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Zoom tool

ขยายการปรับการแสดงขนาดพื้นที่ทำงาน

ย่อ

Zoom Tool

ใช้ ย่อ – ขยายหน้าจอ ดูที่ Option

กด Alt ค้างขณะคลิก จะได้การ Zoom Tool ตรงกันข้าม

Zoom 100% ให้ double click ที่เครื่องมือ Zoom

Zoom เท่าขนาดพื้นที่ให้ double click ที่เครื่องมือ Hand

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การวาดภาพการปรับการแสดงขนาดพื้นที่ทำงาน

  • Line : ใช้วาดเส้นตรง

  • Oval : ใช้วาดวงกลม, วงรี

  • Rectangle : ใช้วาดรูปสี่เหลี่ยม

  • Pen : ใช้วาดเส้นโค้ง

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Oval tool
Oval Toolการปรับการแสดงขนาดพื้นที่ทำงาน

  • ใช้วาดวงกลม หรือวงรี

  • กำหนดรูปแบบที่ Properties

กด Shift ค้างขณะวาด จะได้วงกลม

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Rectangle tool
Rectangle Toolการปรับการแสดงขนาดพื้นที่ทำงาน

  • ใช้วาดสี่เหลี่ยมมุมเหลี่ยม หรือมุมโค้ง

กด Shift ค้างขณะวาด จะได้สี่เหลี่ยมจัตุรัส

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Line tool
Line Toolการปรับการแสดงขนาดพื้นที่ทำงาน

  • ใช้วาดเส้น

  • กำหนดรูปแบบที่ Properties

ถ้าต้องการให้เส้นตรง ให้กด Shift ค้างขณะวาด

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Arrow tool

ใช้ปรับโค้งการปรับการแสดงขนาดพื้นที่ทำงาน

ใช้ย้ายจุด

Arrow Tool

ใช้เลือก หรือปรับแต่งรูปทรงวัตถุ

  • - ใช้เลือกวัตถุ

  • - ย้ายวัตถุ

  • คัดลอกวัตถุ

  • (กด Alt ขณะย้าย)

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Arrow tool1

Snapการปรับการแสดงขนาดพื้นที่ทำงาน

Smooth

Straighten

Arrow Tool (ต่อ)

  • Option Bar

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Rectangle tool1
Rectangle Toolการปรับการแสดงขนาดพื้นที่ทำงาน

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Free transform tool
Free Transform Toolการปรับการแสดงขนาดพื้นที่ทำงาน

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Free transform tool1

Rotateการปรับการแสดงขนาดพื้นที่ทำงาน

Distort

Scale

Envelope

Free Transform Tool

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การปรับขนาดวัตถุการปรับการแสดงขนาดพื้นที่ทำงาน

  • เลือกวัตถุ

  • เมนู Modify  Transform  Scale

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การหมุนวัตถุการปรับการแสดงขนาดพื้นที่ทำงาน

  • เลือกวัตถุ

  • เมนู Modify  Transform  Rotate

Rotate 90 CW

Rotate 90 CCW

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การพลิกกลับภาพการปรับการแสดงขนาดพื้นที่ทำงาน

  • เลือกวัตถุ

  • เมนู Modify  Transform

    • Flip Vertical : บนลงล่าง

    • Flip Horizontal : ซ้ายไปขวา

วิทยากร : อ.เล็กฤทัย ขันทองชัย


กำหนดสีเส้นการปรับการแสดงขนาดพื้นที่ทำงาน

กำหนดสีพื้น

สลับระหว่าง สีเส้นกับสีพื้น

ไม่กำหนดสี

สีที่เป็น Default

การปรับแต่งสีวัตถุ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Workshop
Workshopการปรับการแสดงขนาดพื้นที่ทำงาน

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การบันทึกเอกสารการปรับการแสดงขนาดพื้นที่ทำงาน

  • เมนู File  Save as

  • ระบุแหล่งที่เก็บไฟล์

  • ตั้งชื่อไฟล์

  • OK

** จะได้นามสกุล .fla **

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การเปิดไฟล์เก่าการปรับการแสดงขนาดพื้นที่ทำงาน

  • เมนู File  Open

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Pencil tool

ปรับให้เส้นตรงการปรับการแสดงขนาดพื้นที่ทำงาน

ปรับให้เส้นโค้ง

แทบจะไม่ปรับ

Pencil Tool

  • ใช้วาดเส้น

กด Shift ค้างขณะวาด จะเส้นตรงในแนวตั้งและแนวนอน

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Brush tool

กำหนดว่าจะ การปรับการแสดงขนาดพื้นที่ทำงานLock ไม่ใช้สี

แบบเฉดหรือไม่

กำหนดลักษณะการทาสี

เลือกขนาดของ Brush

เลือกรูปทรงของ Brush

Brush Tool

  • ใช้ทาสีพื้นให้กับวัตถุ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Brush tool1

ระบายสีโดยทับทั้งสีพื้นและสีเส้นระบายสีโดยทับทั้งสีพื้นและสีเส้น

ระบายสีพื้นไม่ทับสีเส้น

ระบายสีนอกบริเวณวัตถุ

ระบายสีเฉพาะส่วนที่เลือก

ระบายสีเฉพาะในบริเวณกลุ่มที่คลิกเริ่มต้น

Brush Tool

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Eraser tool

เลือกรูปแบบของ ระบายสีโดยทับทั้งสีพื้นและสีเส้นEraser

ลบทั้งสีพื้นและสีเส้น

ลบเฉพาะสีพื้น

ลบเฉพาะเส้น

ลบเฉพาะสีพื้นที่ถูกเลือก

ลบเฉพาะในบริเวณกลุ่มที่คลิกเริ่มต้น

ลบส่วนที่คลิกทั้งหมด

Eraser Tool

  • ใช้ลบวัตถุ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Ink bottle tool
Ink Bottle Toolระบายสีโดยทับทั้งสีพื้นและสีเส้น

  • ใช้ใส่สีเส้นโดย Click ที่ขอบวัตถุ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Paint bucket tool

กำหนดว่าจะ ระบายสีโดยทับทั้งสีพื้นและสีเส้นLock ไม่ใช้สีแบบเฉดหรือไม่

Paint Bucket Tool

  • ใช้ใส่สีพื้นของวัตถุ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Dropper tool

หากชี้ที่เส้นขอบ ระบายสีโดยทับทั้งสีพื้นและสีเส้นเป็นการดูดสีเก็บไว้ที่ Stroke Color

หากชี้ที่พื้นวัตถุ เป็นการดูดสีเก็บไว้ที่ Fill Color

Dropper Tool

  • ใช้ดูดสีมาเก็บไว้ใช้งาน

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การปรับแต่ง การไล่สีระบายสีโดยทับทั้งสีพื้นและสีเส้น

  • เมนู Window > Color Mixer

  • Linear การไล่สีแนวเส้นตรง

  • Radial การไล่สีแนวรัศมี

  • (ใส่แนวการไล่สี ได้สูงสุด 8 สี)

  • Bitmap การใช้รูปภาพ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การปรับแต่ง การไล่สีระบายสีโดยทับทั้งสีพื้นและสีเส้น(ต่อ)

  • การเพิ่มสี

  • คลิกขวาที่

  • เลือก Add Swatch

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Fill transform tool
Fill Transform Toolระบายสีโดยทับทั้งสีพื้นและสีเส้น

  • ปรับแต่งทิศทางการไล่เฉดสี

วิทยากร : อ.เล็กฤทัย ขันทองชัย


ตัวอย่างระบายสีโดยทับทั้งสีพื้นและสีเส้น

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Pen tool

เพิ่ม ระบายสีโดยทับทั้งสีพื้นและสีเส้นpoint

จบการวาดเส้นโค้งแล้ว

ลบ point

ใช้วาดเส้นโค้ง ณ. จุดใดๆ

ปรับเส้นโค้งเป็นเส้นตรง

เส้นโค้งนั้น ยังไม่จบการทำงาน

Pen Tool

  • ใช้วาดเส้นโค้ง ซึ่งสามารถปรับโค้งขณะวาดได้ โดยกดเมาส์ค้างแล้วปรับโค้ง

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Subselection tool
Subselection Toolระบายสีโดยทับทั้งสีพื้นและสีเส้น

  • ใช้ปรับแต่งเส้น Path

กด Alt ค้างแล้วลากที่จุด จะทำให้จุดปรับโค้งได้

กด Shift ค้างแล้วลากปรับโค้ง จะได้มุม 45 องศา

กด Alt ค้างแล้วลากปรับโค้ง จะปรับแขนเดียว

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การคัดลอกวัตถุระบายสีโดยทับทั้งสีพื้นและสีเส้น

  • เลือกวัตถุ

  • เมนู Edit  Copy , Edit  Paste

    หรือ

  • เลือกวัตถุ

  • กดปุ่ม Ctrl ค้างไว้แล้วลากวัตถุ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การจัดตำแหน่งวัตถุระบายสีโดยทับทั้งสีพื้นและสีเส้น

  • เลือกกลุ่มวัตถุ

  • เมนู Window  Design Panels Align

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การรวมกลุ่มวัตถุระบายสีโดยทับทั้งสีพื้นและสีเส้น

  • เลือกกลุ่มวัตถุ

  • เมนู Modify  Group

  • Ctrl + G

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Text tool
Text Toolระบายสีโดยทับทั้งสีพื้นและสีเส้น

  • ใช้พิมพ์ข้อความ

  • ให้ลากเป็นกรอบข้อความ แล้วพิมพ์ข้อความที่ต้องการ

  • สามารถเลือกชนิดตัวอักษร ใส่สี ปรับขนาดได้

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การจัดรูปแบบตัวอักษรระบายสีโดยทับทั้งสีพื้นและสีเส้น

  • ที่ Properties

ชนิดตัวอักษร

ตำแหน่งข้อความ

ขนาดตัวอักษร

ตัวหนา

ตัวเอียง

ลักษณะการพิมพ์

สีตัวอักษร

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การแยกองค์ประกอบภาพระบายสีโดยทับทั้งสีพื้นและสีเส้น

  • เลือกภาพที่ต้องการ

  • เมนู Modify  Break Apart

  • Ctrl + B

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การนำภาพมาใช้งานระบายสีโดยทับทั้งสีพื้นและสีเส้น

  • เมนู File  Import  Import to stage

  • เลือกไฟล์ภาพ

  • คลิกปุ่ม Open

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Lasso tool

เลือกกลุ่มสีที่ใกล้เคียงกัน ขึ้นกับการกำหนดค่า

กำหนดค่าขอบเขตการเลือก

เลือกโดยการคลิกเมาส์วาดเส้นต่อเนื่อง

Lasso Tool

  • ใช้เลือกวัตถุ (ใช้เมาส์ลากวาด)

วิทยากร : อ.เล็กฤทัย ขันทองชัย


แนะนำ Timeline และ ขึ้นกับการกำหนดค่าFrame Key Frame

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Timeline
Timeline ขึ้นกับการกำหนดค่า

  • Timeline คือ ส่วนที่เป็นตารางเวลา ที่ใช้สำหรับกำหนดการสร้าง Animation ในแต่ละช่วงเวลา

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Keyframe
การกำหนด Keyframe ขึ้นกับการกำหนดค่า

  • Keyframe คือ Frame ที่มีการเปลี่ยนแปลงของเนื้อหา

    การแทรก Keyframe

  • เลือก Frame ที่ต้องการ

  • เมนู Insert  Timeline  Keyframe หรือ

  • กดปุ่ม F6

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Keyframe1
การลบ Keyframe ขึ้นกับการกำหนดค่า

  • เลือก Keyframe ที่ต้องการ

  • คลิกขวา เลือก Clear Keyframe หรือ

  • กดปุ่ม Shift + F6

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Frame
การแทรก Frame ขึ้นกับการกำหนดค่า

  • Frame คือ ส่วนที่มีเนื้อหาเดียวกับ Keyfarme ที่อยู่ด้านซ้าย

    การแทรก Frame

  • เลือกตำแหน่งเฟรมที่ต้องการ

  • เมนู Insert Timeline  Frame หรือ

  • กดปุ่ม F5

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Frame1
การลบ Frame ขึ้นกับการกำหนดค่า

  • เลือก Frame ที่ต้องการลบ

  • คลิกขวา เลือก Remove Frames หรือ

  • กดปุ่ม Shift + F5

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Blank keyframe
Blank Keyframe ขึ้นกับการกำหนดค่า

  • คือการ keyframe ที่ยังไม่มีเนื้อหา

  • เมนู Insert  Timeline  Blank Keyframe

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Animation พื้นฐานของ Flash ขึ้นกับการกำหนดค่า

  • Frame by Frame

  • Motion Tween

  • Shape Tween

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Frame by frame
Frame By Frame ขึ้นกับการกำหนดค่า

  • สร้างวัตถุ

  • กำหนด Keyframe ใหม่ (F6)

  • ปรับแต่งวัตถุให้เคลื่อนที่ทีละ 1 Step

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การแสดงภาพเคลื่อนไหว ขึ้นกับการกำหนดค่า

  • กดปุ่ม Enter

    การแสดงแบบวนรอบ

  • เมนู Control  Loop playback

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Motion tween
Motion Tween ขึ้นกับการกำหนดค่า

  • Move  เคลื่อนที่

  • Scale  ย่อ-ขยาย

  • Rotate  หมุน

  • Effect  เปลี่ยนสี

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Motion tween move
Motion Tween ขึ้นกับการกำหนดค่า Move

  • สร้างวัตถุในเฟรมที่ 1

  • Insert Timeline Create Motion Tween หรือ คลิกขวา Create Motion Tween

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Motion Tween ขึ้นกับการกำหนดค่า Move (ต่อ)

  • เลือกเฟรมสุดท้าย (เฟรมที่ 15)

  • กดคีย์ F6 (Insert  Timeline Key Frame)

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Motion tween move1
Motion Tween ขึ้นกับการกำหนดค่า Move (ต่อ)

  • ลากวัตถุไปตำแหน่งที่ต้องการ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Motion tween scale
Motion Tween ขึ้นกับการกำหนดค่า Scale

  • สร้างวัตถุในเฟรมที่ 1

  • Insert  Timeline Create Motion Tween หรือ คลิกขวา  Create Motion Tween

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Motion tween scale1
Motion Tween ขึ้นกับการกำหนดค่า Scale

  • เลือกเฟรมสุดท้าย (เฟรมที่ 15)

  • กดคีย์ F6 (Insert  Timeline Key Frame)

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Motion tween scale2
Motion Tween ขึ้นกับการกำหนดค่า Scale

  • ปรับขนาดวัตถุตามต้องการ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


สร้างลูกบอลกระดอนลงพื้นสร้างลูกบอลกระดอนลงพื้น

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Motion tween rotate
Motion Tween สร้างลูกบอลกระดอนลงพื้น Rotate

  • สร้างวัตถุในเฟรมที่ 1

  • Insert Timeline Create Motion Tween หรือ คลิกขวา Create Motion Tween

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Motion tween rotate1
Motion Tween สร้างลูกบอลกระดอนลงพื้น Rotate

  • เลือกเฟรมสุดท้าย (เฟรมที่ 15)

  • กดคีย์ F6 (Insert  Timeline Key Frame)

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Motion tween rotate2
Motion Tween สร้างลูกบอลกระดอนลงพื้น Rotate

  • หมุนวัตถุไปตำแหน่งที่ต้องการ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Motion tween1
การปรับแต่ง Motion Tweenสร้างลูกบอลกระดอนลงพื้น

  • Click เลือก Frame เริ่มต้น

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Motion tween2
การปรับแต่ง Motion Tween สร้างลูกบอลกระดอนลงพื้น(ต่อ)

  • เลือก Keyframe (ด้านซ้าย)

  • ปรับแต่งที่ Properties

  • Ease : อัตราเร่ง

    • ค่าบวก : จากเร็วไปช้า

    • ค่าลบ : จากช้าไปเร็ว

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Motion tween3
การปรับแต่ง Motion Tween สร้างลูกบอลกระดอนลงพื้น(ต่อ)

  • Rotate : กำหนดให้มีการหมุน

    • CW : หมุนตามเข็มนาฬิกา

    • CCW : หมุนทวนเข็มนาฬิกา

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Motion tween4
การปรับแต่ง Motion Tween สร้างลูกบอลกระดอนลงพื้น(ต่อ)

  • Times : กำหนดจำนวนครั้ง

  • Orient to path : กำหนดให้วัตถุหมุนโค้งตาม path

  • Synchronize : กำหนดให้สัมพันธ์กัน

  • Snap : กำหนดให้วัตถุเคลื่อนไปติดเส้น path

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Motion tween effect
Motion Tween สร้างลูกบอลกระดอนลงพื้น Effect

  • การกำหนด Effect ให้กับวัตถุ

  • เลือก Frame

  • เลือกวัตถุ

  • ที่ Properties

ไม่เปลี่ยนแปลง

สว่าง/มืด

เปลี่ยนสี

โปร่งใส

ค่าต่างๆ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


กำหนดให้วัตถุค่อยๆ แสดงแล้วหายไป

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การสร้างภาพเคลื่อนไหวการสร้างภาพเคลื่อนไหว

แบบ Shape Tweening

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Shape tween
Shape Tweenการสร้างภาพเคลื่อนไหว

  • สร้างวัตถุที่เฟรมที่ 1

  • เลือกเฟรมสุดท้าย (เฟรมที่ 15)

  • กดคีย์ F6 (Insert  Timeline Key Frame)

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • เลือก Frame เริ่มต้น

  • ที่ Properties เลือก Shape

วิทยากร : อ.เล็กฤทัย ขันทองชัย


แสดงทิศทางการเคลื่อนที่วัตถุแสดงทิศทางการเคลื่อนที่วัตถุ

  • คลิกเฟรมที่ต้องการแสดง

  • คลิก Tool

Onion Skin

วิทยากร : อ.เล็กฤทัย ขันทองชัย


แสดงโครงร่างการเคลื่อนที่วัตถุแสดงโครงร่างการเคลื่อนที่วัตถุ

  • คลิกเฟรมที่ต้องการแสดง

  • คลิก Tool

Onion Skin Outlines

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การกำหนดจำนวนโครงร่างการกำหนดจำนวนโครงร่าง

ขยาย หรือ ลด

ขอบเขตของ Markers

Modify Onion Markers

ให้แสดงตำแหน่งของ

Markers เสมอ

ช่วยยึด Markers ไม่ให้เคลื่อนตาม Playhead

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Keyframe2
แก้ไขวัตถุพร้อมกันหลายๆ Keyframe

1. เลือก

Onion All

2. เลือก Edit Multiple Frames

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การ Keyframeทำงานกับ

Layer

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Layer
การทำงานกับ Layer Keyframe

  • Layer เป็นเหมือนแผ่นใสวางซ้อนกัน เพื่อแยกการทำงานในแต่ละ Layer ออกจากกันอย่างชัดเจน

  • ในแต่ละ Layer จะสามารถทำ Motion Tween ได้เพียงหนึ่ง Motion Tween เท่านั้น

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Layer1
การแทรก Layer Keyframe

  • เมนู Insert  Layer

  • หรือ คลิกที่

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Layer2
การเปลี่ยนชื่อ Layer Keyframe

  • ดับเบิ้ลคลิก ที่ชื่อ Layer ที่ต้องการ

  • พิมพ์ชื่อ Layer ใหม่

  • กดปุ่ม Enter

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Layer3
การลบ Layer Keyframe

  • เลือก Layer ที่ต้องการ

  • คลิกขวาเลือก Delete Layer

  • หรือ คลิกที่

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การสลับตำแหน่งของเลเยอร์การสลับตำแหน่งของเลเยอร์

  • ลากเมาส์ที่เลเยอร์ที่ต้องการเปลี่ยนลำดับ

  • ลากไปปล่อย ณ ตำแหน่งใหม่

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Layer4
การควบคุม Layerการสลับตำแหน่งของเลเยอร์

  • Layer ที่กำลังทำงานอยู่

  • ซ่อน / แสดง Layer

  • Lock Layer

  • Outline

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การสร้างภาพเคลื่อนไหวการสร้างภาพเคลื่อนไหว

ตามลายเส้น

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Guide layer
Guide Layerการสร้างภาพเคลื่อนไหว

  • Insert >> Motion Guide

  • คลิกเลือก Guide Layer

  • ใช้ Pen Tool สร้างเส้น Path

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Guide layer1
Guide Layer การสร้างภาพเคลื่อนไหว(ต่อ)

  • ปรับแต่งเส้น Path ตามความต้องการ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การสร้างภาพเคลื่อนไหวการสร้างภาพเคลื่อนไหว

ด้วย (Mask Layer)

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Layer mask
Layer Mask การสร้างภาพเคลื่อนไหวคืออะไร?

  • การสั่งให้มองเห็น Layer ที่อยู่ใต้ Layer Mask เพียงบางส่วนที่ Layer Mask กำหนดไว้ให้เท่านั้น

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Layer mask1
การใช้งาน การสร้างภาพเคลื่อนไหวLayerMask แบบข้อความ

  • New เอกสารใหม่

  • Modify  Movie

  • กำหนด Width = 510 และ Height = 200

  • OK

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Layer mask2
การใช้งาน การสร้างภาพเคลื่อนไหวLayerMask แบบข้อความ(ต่อ)

  • Layer 1

    • ใช้ Rectangle Tool วาดเท่าพื้นที่ Stage

    • กำหนดสีเข้ม

    • คลิกเฟรมที่ 30 กดคีย์ F5

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Layer mask3
การใช้งาน การสร้างภาพเคลื่อนไหวLayerMask แบบข้อความ(ต่อ)

  • Insert Layer (Layer 2)

    • พิมพ์ข้อความตามต้องการ

    • กำหนดขนาดตัวอักษร และสีอ่อน

  • ( ปกติจะแทรกเฟรมให้เลย ถ้าไม่มีต้องแทรกเอง )

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Layer mask4
การใช้งาน การสร้างภาพเคลื่อนไหวLayerMask แบบข้อความ(ต่อ)

  • Insert Layer (Layer 3)

  • วาดวงกลมวางที่ต้นข้อความ

  • Double Click ที่วงกลม

  • Modify >> Group (Ctrl + G)

  • คลิกเฟรมที่ 15 กดคีย์ F6

  • ลากวงกลมวางที่ท้ายข้อความ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Layer mask5
การใช้งาน การสร้างภาพเคลื่อนไหวLayerMask แบบข้อความ(ต่อ)

  • คลิกขวา  Create Motion Tween

  • คลิกเฟรมที่ 30

  • ลากวงกลมวางที่ต้นข้อความ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Layer mask6
การใช้งาน การสร้างภาพเคลื่อนไหวLayerMask แบบข้อความ(ต่อ)

คลิกขวาที่ Layer 3

Mask

Enter เพื่อดูผลลัพธ์

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Mask layer
สร้าง การสร้างภาพเคลื่อนไหวMask Layer ในภาพ

  • File  Import  Import to Stage

  • เลือกภาพที่ต้องการ

  • ปรับขนาดภาพให้พอดีกับ Stage

  • คลิกเลือกภาพ

  • Modify  Convert to Symbol

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Mask layer1

ตั้งชื่อ การสร้างภาพเคลื่อนไหวSymbol

เลือก Graphic  OK

Window  Panels  Effect

เลือก Brightness กำหนดให้ภาพดูมืดๆ

คลิกเลือกเฟรม 30 กดคีย์ F5

สร้าง Mask Layer ในภาพ (ต่อ)

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • คลิกขวาที่การสร้างภาพเคลื่อนไหว Layer Insert Layerเฟรม 1

  • วาดวงกลม

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • คลิกเฟรม 1การสร้างภาพเคลื่อนไหว0>> กดคีย์ F6

  • Insert >> Motion Tween

  • เลื่อนวงกลมไปด้านขวา

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • คลิกเฟรม 20 การสร้างภาพเคลื่อนไหว>> กดคีย์ F6

  • เลื่อนวงกลมไปด้านล่าง

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • คลิกเฟรม 30 การสร้างภาพเคลื่อนไหว>> กดคีย์ F6

  • เลื่อนวงกลมไปมุมบนขวา

วิทยากร : อ.เล็กฤทัย ขันทองชัย


กด Enter

ทดสอบ Movie

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Symbol & Instanceการสร้างภาพเคลื่อนไหว

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Symbol
Symbolการสร้างภาพเคลื่อนไหว

คือ ภาพนิ่ง (Graphic)

ภาพเคลื่อนไหว (Movie) หรือ

ปุ่ม (Button) ที่ใช้เป็นต้นฉบับ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Instance
Instanceการสร้างภาพเคลื่อนไหว

คือ Symbol ที่นำมาใช้งาน

(การกระทำต่างๆของ Symbol)

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Symbols
ประเภทของ การสร้างภาพเคลื่อนไหวSymbols

  • Graphic

  • Movie Clip

  • Button

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Graphic

Ctrl + F8การสร้างภาพเคลื่อนไหว

การสร้าง Graphic

Insert  New Symbol

  • ตั้งชื่อ Symbol

  • เลือก Graphic

  • OK

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Scene
การสลับไปทำงานกับ การสร้างภาพเคลื่อนไหวScene

คลิกเพื่อแสดง Scene

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Symbol1

Ctrl + Lการสร้างภาพเคลื่อนไหว

การใช้งาน Symbol ที่สร้าง

  • สลับไปในส่วนของ Scene

  • เมนู Window  Library

  • ลากปุ่มวางใน Scene

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Movie clip
การสร้าง การสร้างภาพเคลื่อนไหวMovie Clip

Insert  New Symbol

  • ตั้งชื่อ Symbol (Rec)

  • เลือก Movie Clip

  • OK

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • คลิกเลือกเฟรม (เฟรม 20) กดคีย์ F6

  • ปรับขนาดสี่เหลี่ยมให้ใหญ่ขี้น

  • กำหนด Shape Tween

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • คลิกเลือกเฟรม วาดรูปสี่เหลี่ยมไม่มีสีพื้นขนาดเล็ก(เฟรม 25) กดคีย์ F6

  • กำหนดสีเส้นเป็นสีขาว

  • กำหนด Shape Tween

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • สลับไปที่ วาดรูปสี่เหลี่ยมไม่มีสีพื้นขนาดเล็กScene

  • Window  Library (Ctrl + L)

  • ลาก Movie Clip วางใน Scene

  • Control  Test Movie

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Movie

Ctrl + Enterวาดรูปสี่เหลี่ยมไม่มีสีพื้นขนาดเล็ก

การทดสอบ Movie

Control 

Test Movie

Shock Wave File

เมื่อทำการ Test Movie จะเกิดไฟล์ (.swf)

ซึ่งเป็นไฟล์ที่สามารถแสดงผลด้วยตัวเอง

(ไม่ต้องใช้ Flash เปิด)

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Button symbol
การสร้าง วาดรูปสี่เหลี่ยมไม่มีสีพื้นขนาดเล็กButton Symbol

Insert  New Symbol

  • ตั้งชื่อ Symbol (Next Button)

  • เลือก Button

  • OK

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Button
สถานะของ วาดรูปสี่เหลี่ยมไม่มีสีพื้นขนาดเล็กButton

  • Up คือเมื่อปล่อยปุ่มเมาส์

  • Over คือเมื่อเมาส์อยู่เหนือปุ่ม

  • Down คือเมื่อกดปุ่มของเมาส์

  • Hit คือพื้นที่ที่ปุ่มจะทำงาน

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • เลือก Time line ในส่วน Over

  • กดคีย์ F6 แล้วกำหนดสีของวัตถุใหม่

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การกำหนดการทำงานกับปุ่มการกำหนดการทำงานกับปุ่ม

คลิกขวาที่ปุ่ม Action

  • กำหนดการทำงานให้กับปุ่ม

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Actions play
Actions การกำหนดการทำงานกับปุ่ม Play

กำหนดให้ Movie ทำงาน

Actions  Stop

กำหนดให้ Movie หยุดทำงาน

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Event button
Event การกำหนดการทำงานกับปุ่มของ Button

  • Press เมื่อกดปุ่ม

  • Release เมื่อปล่อยปุ่ม

  • Release Outsideกดบนปุ่มแล้วปล่อยปุ่มด้านนอก

  • Key Press [ ] เมื่อกดคีย์ตามที่ระบุ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Event button1
Event การกำหนดการทำงานกับปุ่มของ Button (ต่อ)

Event ของ Button

  • Roll Over เมื่อเมาส์อยู่ด้านบน

  • Roll Out เมื่อเลื่อนเมาส์ออก

  • Drag Over เมื่อลากเมาส์ออก แล้ว ลากไปอยู่ด้านบนปุ่ม

  • Drag Out เมื่อลากเมาส์ออกจากปุ่ม

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Actions go to
Actions การกำหนดการทำงานกับปุ่ม Go To

ใช้กระโดดข้ามไปยัง Scene หรือ Frame

  • Scene : ระบุชื่อ scene ที่จะไปทำงาน

  • Type : กำหนดรูปแบบของเฟรม

  • Frame : ระบุค่า ตำแหน่ง หรือ label

  • gotoAndPlay หรือ gotoAndStop

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Actions get url
Actions การกำหนดการทำงานกับปุ่ม Get URL

ใช้โหลดไฟล์ที่ระบุ

  • URL : ระบุเป้าหมายเพื่อที่จะโหลดไฟล์

  • Window : ระบุหน้าต่างที่จะแสดง

วิทยากร : อ.เล็กฤทัย ขันทองชัย



Ctrl + F8 ขันทองชัย

สร้างวงกลมให้เลื่อนตามเมาส์

  • Insert  New Symbol

  • กำหนดชื่อ Symbol (Move Mouse)

  • เลือก Movie Clip

  • OK

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • คลิกขวาที่เฟรม 1  Actions

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Actions startdrag
Actions >> startDrag

กำหนดว่าจะทำอะไรเมื่อเริ่ม Drag Mouse

  • Target : ระบุค่าตำแหน่งที่จะทำงาน

  • Constrain to rectangle : ขอบเขตการทำงาน

  • Lock mouse to center : ตำแหน่งเมาส์ตรง +

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • +  Actions Movie Clip Control

     start Drag

วิทยากร : อ.เล็กฤทัย ขันทองชัย


วิทยากร : อ.เล็กฤทัย ขันทองชัย


Ctrl + F8

ให้วัตถุเคลื่อนที่เฉพาะพื้นที่ที่กำหนด

  • Insert  New Symbol

  • กำหนดชื่อ Symbol (Move Area)

  • เลือก Movie Clip

  • OK

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • สลับไปส่วน Scene

  • Window  Library (Ctrl + L)

  • ลาก Movie Clip วางใน Scene

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Instance1
กำหนดชื่อให้ Instance

  • คลิกเลือก Movie Clip

  • ตั้งชื่อที่ Properties

ball

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • + Actions Movie Clip Control

     startDrag

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Top

Left

Right

Bottom

startDrag (“ball”, true, 0, 0, 200, 200) ;

  • Control  Test Movie

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Symbol2
การเรียกใช้งาน Symbol มาตรฐาน

  • Window  Common Libraries

    Buttons

    Graphics

วิทยากร : อ.เล็กฤทัย ขันทองชัย


การกำหนดการทำงานกับเฟรมการกำหนดการทำงานกับเฟรม

คลิกขวาที่ Keyframe

Actions

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Ctrl + F8การกำหนดการทำงานกับเฟรม

การทำงานกับเมาส์

  • Insert New Symbol

  • กำหนดชื่อ Symbol (Rec Button)

  • เลือก Button

  • OK

วิทยากร : อ.เล็กฤทัย ขันทองชัย


วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • Insert  New Symbol

  • กำหนดชื่อ Symbol (Rec Movie)

  • เลือก Movie Clip

  • OK

  • Window  Library (Ctrl + L)

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • ลาก Rec Button วางตรงเครื่องหมาย +

  • เลือกเฟรม 2 กดคีย์ F6

  • ลบ Button ออก แล้ววาดสีเหลี่ยม เส้นสีดำขนาดเล็กแทน

วิทยากร : อ.เล็กฤทัย ขันทองชัย


วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • เลือกเฟรม 2 5 กดคีย์ F6

  • เปลี่ยนสีเส้นเป็นสีขาว Alpha = 0%

  • กำหนด Shape Tween

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Double Click

  • คลิกขวาที่เฟรม 1  Actions

วิทยากร : อ.เล็กฤทัย ขันทองชัย


2

วิทยากร : อ.เล็กฤทัย ขันทองชัย


วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • Control  Test Movie

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Movie1
กำหนดให้ลากวัตถุใน Movie ได้

  • Insert>> New Symbol

  • กำหนดชื่อ Symbol (eye1)

  • เลือก Button

  • OK

  • วาดรูปตา ตามต้องการ

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Pic1

Control >> Test Movie

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • +  Movie Clip Control  startDrag

  • กำหนด Target เป็นชื่อ Instance

  • Event Mouse เลือก Press

วิทยากร : อ.เล็กฤทัย ขันทองชัย


วิทยากร : อ.เล็กฤทัย ขันทองชัย


การใส่ไฟล์เสียงคลิกเครื่องหมายปีกกาด้านล่าง

  • Import ไฟล์เสียง (.wav,.mp3) เก็บใน Library

  • Window  Library (Ctrl + L)

  • คลิกเลือกเฟรมจาก layer ที่จะใส่เสียง

  • ดูที่ Properties

วิทยากร : อ.เล็กฤทัย ขันทองชัย


เลือกเสียง ที่ต้องการ

เลือกรูปแบบการแสดง

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • Sound : ที่ต้องการเลือกไฟล์เสียง

  • Effect

    • None : เล่นเสียงตามปกติ ลำโพงดังทั้งด้านขวาและซ้าย

    • Left Channel : ลำโพงดังเฉพาะด้านขวา

    • Right Channel : ลำโพงดังเฉพาะด้านซ้าย

    • Fade Left to Right : เป็นการเล่นเสียงจากด้านซ้ายแล้วค่อยๆ เปลี่ยนมาเป็นด้านขวา

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • Fade Right to Left : ที่ต้องการเป็นการเล่นเสียงจากด้านขวาแล้วค่อยๆ เปลี่ยนมาเป็นด้านซ้าย

  • Fade In : ค่อยๆ เพิ่มความดังของเสียงเป็นลำดับ

  • Fade Out : ค่อยๆ ลดความดังของเสียงเป็นลำดับ

  • Custom : ผู้ใช้กำหนดเอง [ Edit… ]

วิทยากร : อ.เล็กฤทัย ขันทองชัย


  • Sync ที่ต้องการ

    • Event : วนเล่นเสียงใหม่เมื่อวนเฟรมใหม่ แม้เสียงเก่าจะยังคงค้างอยู่ก็ตาม

    • Start : เล่นเสียงไปเรื่อยๆ จนกว่าจะจบ แม้ว่าจะวนเฟรมอีกกี่รอบก็ตาม

    • Stop : ใช้กำหนดให้หยุดเสียง

    • Stream : เสียงจะเล่นและหยุดตามเฟรม

  • Loop : กำหนดจำนวนรอบของเสียง

วิทยากร : อ.เล็กฤทัย ขันทองชัย


จุดจบเสียง

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Scene1
การแทรก ปรับรูปแบบเสียงตามต้องการScene เพิ่ม

  • Insert  Scene

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Scene2
การทำงานกับ ปรับรูปแบบเสียงตามต้องการScene

  • Modify Scene

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Scene3
การทดสอบเฉพาะ ปรับรูปแบบเสียงตามต้องการScene

  • Control Test Scene

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Movie web

F12 ปรับรูปแบบเสียงตามต้องการ

การทดสอบ Movie บน Web

  • เมนู File  Publish Preview

    HTML

จะสร้างไฟล์ .swf และไฟล์ .html ให้ด้วย

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Exe file
การสร้าง ปรับรูปแบบเสียงตามต้องการexe file

  • File  Publish Settings

  • คลิกเลือก Windows Projector (.exe)

  • คลิกปุ่ม Publish

  • คลิกปุ่ม OK

วิทยากร : อ.เล็กฤทัย ขันทองชัย


Export image
การ ปรับรูปแบบเสียงตามต้องการExport Image

  • File  Export Image

  • กำหนดชื่อไฟล์

  • เลือกชนิดของไฟล์

  • Save

วิทยากร : อ.เล็กฤทัย ขันทองชัย


ad