Re Thai…♪
http://ReThai.blogspot.com … The RE Programe Game Bot Music etc.

post:

20 ก.พ. 2555

Re Pro : ทำ Flash สำหรับโชว์สินค้าในหน้าเว็บ


ทำ Flash สำหรับโชว์สินค้าในหน้าเว็บ


mazda1 ทำ Flash สำหรับโชว์สินค้าในหน้าเว็บ
ในการทำเว็บไซต์ บ้างครั้งเราต้องนำเสอนผลงานหรือสินค้า ผ่านบนเว็บไซต์ วันนี้ผมขอเสนอการทำ Flash สำหรับเสนอสินค้าผ่านหน้าเว็บเพจของเรา โดยเราจะมีหน้าของสินค้าไว้ แล้วให้ผู้เข้าชมเว็บไซต์กดเลือกดูผ่านคีย์บอร์ดว่าต้องการดูมุมไหน พูดแล้วจะงงลองมาดูตัวอย่างกันก่อนครับ
ตัวอย่าง การ ทำ Flash สำหรับโชว์สินค้าในหน้าเว็บ
.
ลองคลิกที่ Flash ดูก่อนครับ จากนั้นก็กดปุ่มที่คีย์บอร์ดเลยครับว่าต้องการดูมุมไหน โดยคลิกที่ปุ่มลูกศร ซ้าย – ขวา ที่คีย์บอร์ดได้เลยครับ
ใครสนใจวิธีการสร้าง Flash แบบนี้ลองมาทำดูครับไม่อยากเลย
1.อย่างแรกเราเตรียมภาพที่ต้องการนำเสนอผ่าน Flash นี้ก่อนเลยนะครับ จากตัวอย่างผมเตรียมไว้ รูปดังนี้ครับ
mazda11 ทำ Flash สำหรับโชว์สินค้าในหน้าเว็บ
mazda2 ทำ Flash สำหรับโชว์สินค้าในหน้าเว็บ
mazda3 ทำ Flash สำหรับโชว์สินค้าในหน้าเว็บ
2. เปิดโปรแกรม Flash ขึ้นมาเลยครับ แล้วเลือก ActionScript3.0 เลยครับ
3.จากนั้นเรามากำหนดพื้นที่การแสดงของ Flash เราเลยนะครับ จากตัวอย่างผมจะใช้ขนาด 500 x 195 นะครับ โดยไปที่เมนู Modify > Document Setting แล้วกำหนดขนาดตามต้องการได้เลยครับ จากนั้นกด OK ไปเลยครับ
flash action3 3 ทำ Flash สำหรับโชว์สินค้าในหน้าเว็บ
4. จากนั้นเราไปส่วนของ Timeline นะครับไปสร้างเลเยอร์ ให้ได้ 2 เลเยอร์ วิธีการสร้างเลเยอร์ คือไปที่ New Layer คลิก 1 ครั้งเราก็จะได้ Layer ใหม่ หนึ่งเลเยอร์แล้ว และให้ดับเบิ้ลคลิก
flash action3 4 ทำ Flash สำหรับโชว์สินค้าในหน้าเว็บ
ที่เลเยอร์นั้นๆ และเปลี่ยนชื่อ Layer ดังภาพ
5.ให้เราไปนำภาพที่เตรียมไว้เข้ามาใส่ LIBRARY ของเรา โดยไปที่เมนู File > Import > Import to Library.. แล้วเลือกรูปภาพที่ต้องการใช้มาทั้งหมด
flash action3 5 ทำ Flash สำหรับโชว์สินค้าในหน้าเว็บ
6.เมื่อใน LIBRARY เรามีรูปภาพแล้วให้เรานำรูปภาพมาไว้ในเลเยอร์ที่ชื่อ img ครับ การนำเมาส์ไปคลิกที่เลเยอร์ img เฟรมที่ 1
flash action3 6 1 ทำ Flash สำหรับโชว์สินค้าในหน้าเว็บ
จากนั้นก็ลากรูปจาก LIBRARY มาใส่ในเฟรม ดังรูป
flash action3 6 2 ทำ Flash สำหรับโชว์สินค้าในหน้าเว็บ
7. ยังอยู่ที่เลเยอร์ img นะครับแต่ไปเฟรมที่2 ของเลเยอร์ โดยให้คลิกขวาเลือก Insert Blank Keyframe
flash action3 7 ทำ Flash สำหรับโชว์สินค้าในหน้าเว็บ
8.จากนั้นก็ลากรูปต่อไปจาก LIBRARY มาใส่ในเฟรม ดังรูป
flash action3 8 ทำ Flash สำหรับโชว์สินค้าในหน้าเว็บ
9. เพิ่มเฟรมเหมือนขั้นตอนที่ 7 และใส่รูปลงไปเหมือนขั้นตอนที่ 8 อีกครั้งนะครับ ถ้าใครมีรูปมากกว่า 3 รูปก็ทำไปจนกว่าจะครบทุกรูปนะครับ
10.จากนั้นไปที่เลเยอร์ Action โดยไปที่เฟรมสุดท้ายที่เรานำรูปใส่เข้าไปจากตัวอย่างมีอย่าง 3 รูป จึงไปที่เฟรมที่ 4 แล้วเลือก Insert Keyframe
flash action3 10 ทำ Flash สำหรับโชว์สินค้าในหน้าเว็บ
11.ยังอยู่ที่เฟรมเดิมเลเยอร์เดิมนะครับ ให้คลิกขวาแล้วเลือก Action
flash action3 11 ทำ Flash สำหรับโชว์สินค้าในหน้าเว็บ
12 ใส่
gotoAndStop(1);
ลงไปใน Action จากนั้นก็ปิดหน้าต่างนี้ไป
13 ไปที่เลอเยอร์ action เฟรมที่ 1 แล้วคลิกขวาเลือก Action พร้อมทั้งใส่ Script นี้ลงไป
stop();
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
function onKeyPressed(evt:KeyboardEvent):void
 {
  if(evt.keyCode==39)
   {
   nextFrame();
   } 
   else
    { 
    if(evt.keyCode==37)
     {
      if(this.currentFrame==1)
      {
      gotoAndStop(3)
      }
      else
       {
       prevFrame();
       }
      }
    }
 }
14 จากนั้นก็รันผลด้วยการกด CTRL+ENTER ได้เลยครับ
ผมทำ VDO แบบย่อมาให้ดูครับ
<<< google Plus (กูเกิ้ล พลัส)ซัดที่นี่