• supameeh
  • ranking : สมาชิกทั่วไป
  • วันที่สร้าง : 2007-07-22
  • จำนวนเรื่อง : 419
  • จำนวนผู้ชม : 631193
  • จำนวนผู้โหวต : 940
  • ส่ง msg :
  • โหวต 940 คน
<< พฤศจิกายน 2008 >>
อา พฤ
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            

[ Add to my favorite ] [ X ]


วันพุธ ที่ 5 พฤศจิกายน 2551
Posted by supameeh , ผู้อ่าน : 3130 , 14:55:02 น.  
หมวด : วิทยาศาสตร์/ไอที

พิมพ์หน้านี้
โหวต 0 คน

คำแนะนำ : โปรดอ่านตอนที่แล้วก่อน (ถ้ายังไม่ได้อ่านครับ)

ยุ่งวุ่นวายกับงานอดิเรกนิดหน่อยครับ
ตอนนี้เลยมาเขียนต่อช้าไปหน่อย

เอนทรีนี้ ชวนมาสร้างเอฟเฟคเปิดหน้าหนังสือกันต่อครับ แต่เดิมนี่ผมตั้งใจจะแนะนำ
ตอนที่ 2 นี้ด้วยการสาธิตการใช้ Flash และ Component ที่บอกไป
แต่เปลี่ยนใจ เอาตอนถัดไปมาแทนครับซะเลยครับ

เนื่องจากเห็นว่าหลาย ๆ ท่าน ส่วนใหญ่ยังไม่เคยใช้ Flash กัน
ก็เอาเป็นการใช้งานสำหรับเสียงส่วนใหญ่ก่อนละกันครับ
นี่คือการใช้งานแบบสำเร็จรูป สำหรับผู้ที่ไม่มีพื้นฐานมากนัก

แล้วเอาไว้ผมจะเขียนแนะนำการใช้งาน Adobe Flash ขั้นต้นให้อ่านกัน
แล้วหลังจากนั้นค่อยกลับไปใหม่น่าจะดีกว่า

เอนทรีนี้ผมเลยปรับแต่ง Component ที่ว่า ออกมาสำหรับใช้กับบล็อกโอเคฯ โดยเฉพาะ
ให้ใช้งานได้แบบกึ่งสำเร็จรูป

ถ้าพร้อมกันแล้วเรียนเชิญเรียนรู้กันได้เลย เริ่มจากการดาวน์โหลด
โดยคลิกที่ปุ่มข้างล่างนี้ครับ



ภายในไฟล์ที่คุณโหลดไป จะประกอบไปด้วยไฟล์ ดังที่เห็นอยู่นี้ครับ



ไฟล์ที่ชื่อว่า page00.jpg ....
page01.jpg page02.jpg page03.gif

ซึ่งไฟล์นี้ก็คือไฟล์หน้าหนังสือแต่ละหน้า
เริ่มจากหน้าปกครับ page00.jpg ไล่ไปตามลำดับ

จะเห็นได้ว่านอกจาก .jpg คุณยังสร้างไฟล์เป็น .gif
(และ .swf ได้ด้วยถ้าต้องการ Flash Animation)



โดยไฟล์เหล่านี้จะมีขนาด 360 x 480 pixel สำหรับหนังสือ 1 หน้า
และสำหรับหน้าคู่ มีขนาด 720 x 480 pixel


ซึ่งผมกำหนดขึ้นเอง ด้วยเห็นว่าลงตัวกับหน้าบล็อกของโอเค
มากที่สุด เมื่อใช้ Template แบบที่ 9 ของโอเคเนชั่น

ถ้าใช้ Template แบบอื่นมันจะล้นออกนะครับ
แต่คุณก็ย่อขนาด Flash ให้พอดีได้ แต่ปัญหาคือ
หน้าหนังสือจะอ่านไม่ชัด

ดังนั้นถ้าจะทำหนังสือเปิดๆ หน้าแบบนี้ โดยใช้เทคนิคสำเร็จรูป
ของผมนี้ ต้องใช้ Template แบบที่ 9 เท่านั้นครับ

ถ้าไม่งั้น คุณจะต้องสร้างหน้าหนังสือขึ้นจากโปรแกรม Flash
และ Flash Component ด้วยตนเอง ตามคู่มือและไฟล์ตัวอย่าง
ที่ให้โหลดไปคราวก่อน อันนั้น คุณสามารถจัดหน้าจัดขนาดได้
ตามใจชอบจะใหญ่ขึ้น หรือเล็กลงก็ตามใจคุณ

เอาละครับ มาเรียนกันต่อ

ตอนนี้ยังไม่ต้องสนใจไฟล์หน้าหนังสือที่ผมบอกไป
เพราะจริง ๆ หน้าหนังสือ คุณต้องสร้างขึ้นด้วยตัวเองตามใจชอบครับ
ไฟล์ชุดนี้ ผมแนบมาให้เพื่อยกต้วอย่างให้เข้าใจน่ะครับ

มาดูไฟล์สำคัญ 2 ไฟล์ กันก่อนนั่นคือ ok_flippage.swf และ page.xml
2 ไฟล์นี้แหละครับ ที่สำคัญ

ok_flippage.swf ไม่ต้องทำการแก้ไขใด ๆ ครับ เพราะแก้ไม่ได้ถ้าไม่มีเครื่องมือการ
แก้ไข flash และความรู้พื้นฐานค่อนไปทาง Advance แนว ๆ Hacker หน่อย

เอาเป็นว่าไฟล์นี้เอาไว้ upload ขึ้น server ครับ
ไม่ต้องทำอะไรกับมันทั้งสิ้น เอาไว้เรียกใช้งานเท่านั้นพอ

มาดูต่อที่ไฟล์ page.xml ครับ มาลองเปิดดูกัน
โดยใช้โปรแกรม Notepad ในเครื่องของคุณเปิดดู และแก้ไขนะครับ
มันเป็นไฟล์ข้อความธรรมดานั่นเอง!


เมื่อเปิดมาจะเจอโครงสร้าง code xml ซึ่งมีหน้าตาประมาณนี้

<FlippingBook>

<width>720</width>
<height>480</height>

<scaleContent>false</scaleContent>
<firstPage>1</firstPage>
<alwaysOpened> false </alwaysOpened>
<autoFlip> 120 </autoFlip>
<flipOnClick> true </flipOnClick>

<staticShadowsDepth> 1 </staticShadowsDepth>
<dynamicShadowsDepth> 1 </dynamicShadowsDepth>

<moveSpeed> 2 </moveSpeed>
<closeSpeed> 2 </closeSpeed>
<gotoSpeed> 3 </gotoSpeed>

<flipSound></flipSound>
<pageBack> #CCCCCC </pageBack>

<loadOnDemand> true </loadOnDemand>
<cachePages> true </cachePages>

<cacheSize> 5 </cacheSize>
<preloaderType> Round </preloaderType>
<userPreloaderId></userPreloaderId>

<pages>

<page> page00.jpg </page>
<page> page01.jpg </page>
<page> page02.jpg </page>
<page> page03.gif </page>
<page> page04.swf </page>
<page> page05.jpg?wide=true </page>
<page> page05.jpg?wide=true </page>
<page> page06.gif </page>

</pages>

</FlippingBook>


แต่ละจุดสามารถแก้ไขสิ่งที่อยู่ระหว่าง <page> กับ </page>
ใครรู้เรื่อง html ก็คงจะร้องอ๋อ เข้าใจได้ไม่ยาก
การแก้คุณสมบัติจุดอื่นผมจะข้ามไปก่อนนะครับเพราะไม่ใช่ส่วนสำคัญนัก
ส่วนที่คุณจะแก้ไขเพื่อเพิ่ม-ลดหน้าหนังสือก็คือไฟล์ระหว่าง
 
นี่แหละครับ นั่นคือส่วนที่กำหนดว่า แต่ละหน้าของหนังสือ
คือไฟล์อะไร เรียงลำดับไปเรื่อย ๆ ครับ

เช่นตัวอย่างของผมคือ

page00.jpg
page01.jpg
page02.jpg
page03.gif
page04.swf
page05.jpg?wide=true
page05.jpg?wide=true
page06.gif

 


ในขั้นนี้ สิ่งที่คุณต้องเตรียมคือไฟล์รูปภาพครับ
ที่จะทำให้มันเป็นหน้าหนังสือตามใจคุณ ขอให้สร้างจาก
โปรแกรมกราฟฟิคที่คุณถนัดก็แล้วกัน คนส่วนใหญ่คงเป็น Photoshop

แต่สำหรับผม งานบนหน้าจอแบบนี้ต้อง RealDraw Pro เท่านั้น
ง่ายและเร็วสุด ๆ Photoshop ชิดซ้ายตกขอบทางไป!
(โปรแกรมนี้เคยแนะนำไปเมื่อปีก่อน ลองอ่านดูจากเอนทรีเก่า ๆ ของผมนะครับ
สำหรับใครที่สนใจ เร็ว ๆ นี้ผมจะปัดฝุ่นเพิ่มเติมข้อมูล และเทคนิคพิเศษ
ของโปรแกรมนี้ที่น่าทึ่งอีกหลายอย่าง)

อย่าสร้างให้ไฟล์ใหญ่เกิน 100 KB นะครับเพราะมันจะ upload ไปเก็บไม่ได้
นั่นคือข้อจำกัดของบล็อกของเรา และถ้าใช้บล็อกของเราเป็นที่เก็บไฟล์
ต้องระบุ URL แบบเต็ม ๆ ด้วยนะครับ กล่าวคือต้องระบุลงไปเลยว่า

http://www.oknation.net/blog/home/blog_data/747/10747/images/page001.jpg

แต่ละบล็อกจะมีค่า directory ตรงหลัง home/blog_data/ นี่ต่างกันไปนะครับ
ทำได้โดยลองคลิกขวาดูรูปภาพของคุณที่มีอยู่ จะรู้ว่าบล็อกโอเคกำหนดให้
โฟลเดอร์ของคุณในตัวเลขไหน

สำหรับผู้มีความรู้เรื่อง Flash ถ้า็สร้างเป็นไฟล์แต่ละหน้าเป็น .swf จะทำให้สามารถ
เคลื่อนไหว
และโต้ตอบได้เช่นคลิกแล้วไปที่อื่นตามต้องการ เป็นต้น แต่ต้องไม่เกิน 100 KB
เช่นกัน ไม่งั้นต้องหาที่เก็บใหม่ครับ ซึ่งจริง ๆ แล้ว แนะนำให้หาที่เก็บไฟล์บน
web server อื่นเพื่อความสะดวกครับ เอนทรีต่อ ๆ ไปจะแนะนำให้นะครับ

สำหรับหน้าหนังสือนี่ คุณเพิ่มหน้าไปได้เรื่อย ๆ ได้เลยนะครับ
อย่างไรก็อย่าพยายามให้หลายร้อยหน้าเกินไปก็แล้วกัน
(จริง ๆ ผู้เขียน component บอกได้ว่า เพิ่มได้เป็นพัน ๆ หน้าเลยครับ)

สร้างไฟล์หน้าหนังสือ(ชื่ออะไรก็ได้)แล้วนำมาพิมพ์เรียงกันไปในแต่ละหน้า ๆ ละบรรทัดให้ตรงกับชื่อไฟล์ของคุณนะครับ

ถ้าเป็นหน้าคู่ ให้พิมพ์เหมือนกัน 2 บรรทัด โดยเพิ่ม code ?wide=true ต่อท้ายไฟล์ไป เช่น

page00.jpg
page01.jpg
page02.jpg
yourpage.jpg?wide=true
yourpage.jpg?wide=true
page04.jpg
page05.jpg


ระวังการลำดับหน้า ต้องเรียงอย่างถูกต้อง โดยมันต้องเปิดอยู่คู่กันนะครับ
ถ้าคุณวางลำดับผิด หน้าหนึ่งหน้าใด จะทำให้การแสดงผลดูสับสน ซึ่งจะทำให้
คุณสังเกตได้เองว่าต้องแก้ไขอย่างไร

คุณไม่จำเป็นต้องตั้งชื่อไฟล์ page00.jpg page01.jgp แบบผมก็ได้ครับ
ตั้งตามสบาย ข้อสำคัญตั้งอะไรก็พิมพ์ลงไปให้เหมือนชื่อที่คุณตั้งก็แล้วกัน
ไม่งั้นเวลาแสดงผล หน้านั้นจะหายไป เพราะชื่อไม่ตรงนะครับ



ให้ Save ไฟล์ page.xml ของคุณนั้น ในชื่อใหม่ว่า page.jpg ครับ
ที่ต้อง save เป็นชื่อนี้เพราะไฟล์นามสกุล .xml บล็อกไม่อนุญาตให้ อัพโหลด
ดังนั้นต้องเล่นลูกหลอกนิดหน่อย

ห้าม save ชื่ออื่นด้วยนะครับ อันนี้ตามใจไม่ได้
เพราะผมกำหนดชื่อนี้ผูกโยงอยู่กับไฟล์ ok_pageflip.swf ด้วย
ไฟล์ที่ผมไม่ได้ให้ยุ่งนั่นแหละ ดังนั้น ถ้า save ชื่ออื่นก็จะไม่มี
หน้าหนังสือใด ๆ ปรากฏขึ้นครับ

เมื่อตั้งชื่อเสร็จแล้ว เข้าสู่หน้าต่างการเขียนบล็อก
ทำการ upload ไฟล์ขึ้น server ครับ
ประกอบด้วยไฟล์หนังสือแต่ละหน้าของคุณ
พร้อม ok_pageflip.swf และ page.jpg (ซึ่งไม่ใช่รูปภาพ)

ควรแบ่งโฟลเดอร์ออกมาต่างหากนะครับ โดยให้ไฟล์ทั้งหมดอยู่ด้วยกัน

ลองใช้ browser ของคุณเปิดไฟล์ ok_pageflip.swf ดูก่อนได้ครับ
ว่ามันทำงานเป็นอย่างไร แต่ละหน้าแสดงผลถูกต้องหรือไม่
ก่อนทำการ Upload

จากนั้นได้เวลาเพิ่มไฟล์ ok_pageflip.swf ลงในหน้าบล็อก
กำหนดได้ผ่านเครื่องมือของบล็อกของเรา



 

ลองดูนะครับ
หวังว่าคงไม่ยากเกินความพยายามนะครับ
ผมพยายามอธิบายให้ง่ายที่สุดแล้วครับ

พบกันเอนทรีหน้าครับ ...


อ่านความคิดเห็น

ความคิดเห็นที่ 13
ตาเรน วันที่ : 07/11/2008 เวลา : 13.31 น.
http://oknation.nationtv.tv/blog/sammaapii
เรียนฟรีจริง ๆ  ขอเชิญแวะเยี่ยมตาเรนที่  >>> http://www.webudon.net

(0)
ตามมาหล๋อย..ต่อ..ครับ
ขอบคุณมากครับ
ความคิดเห็นที่ 12
plsforgiveme วันที่ : 06/11/2008 เวลา : 15.05 น.
http://oknation.nationtv.tv/blog/plsforgiveme
@#@# อ ย า ก ม า ก ทุ ก ข์ ม า ก #@#@

(0)
เข้ามาเก็บความรู้ค่ะ ขอบคุณค่ะ
ความคิดเห็นที่ 11
จุ่มเท้าทะเลฝัน วันที่ : 06/11/2008 เวลา : 13.28 น.
http://oknation.nationtv.tv/blog/lovemyself
อย่าคิดรำคาญ เพราะเดี่ยวก็ไป แค่พักร้อนผ่อนคลายเท่านั้นเอง

(0)

ขอบคุณค่ะ ขอนำไปปฏิบัตรต่อคะ เรียนให้ข้อมูลอันเป็นประโยชน์เช่นนี้ที่บล็อกด้วยนะค่ะ
เรียนเชิญช่วยพันธมิตรด้วยคะ จากใจนะค่ะ
http://www.oknation.net/blog/lovemyself/2008/11/05/entry-2
ความคิดเห็นที่ 10
ต้นฝ้าย วันที่ : 06/11/2008 เวลา : 12.38 น.
http://oknation.nationtv.tv/blog/123shoot
“If we are to teach real peace in this world, and if we are to carry on a real war against war, we shall have to begin with the children.” Mahatma Gandhi

(0)
ขอบคุณครับ....
ความคิดเห็นที่ 9
aumpradya วันที่ : 05/11/2008 เวลา : 22.26 น.
http://oknation.nationtv.tv/blog/aumpradya

(0)
ขอบคุณมากครับ จะศึกษาดูนะครับ ชอบจริงๆ ^ ^
ความคิดเห็นที่ 8
โฟล์คเหน่อ วันที่ : 05/11/2008 เวลา : 22.16 น.
http://oknation.nationtv.tv/blog/folkner
..เขียนเพลง เขียนกวี ชีวิตนักดนตรีบ้านนอก..

(0)
:::ติดขัด ไอ แค๊ก แค๊ก แจกอย่าแก้ไอ หลังไมค์ให้ด้วยขอรับบบบ::
ความคิดเห็นที่ 7
mookie วันที่ : 05/11/2008 เวลา : 16.57 น.
http://oknation.nationtv.tv/blog/mookie
เราอาจไม่ได้มีความสุขในทุกนาทีของชีวิต  แต่เราอยากให้ทุกนาทีของความสุข...ถูกบันทึก

(0)
เอาเข้าไป... แล้วม๊ะแซบบว่าพี่ลูกเสือพันธุ์หน๋ายยอ่ะคับ...
V
V
V
ความคิดเห็นที่ 6
ลูกเสือหมายเลข9 วันที่ : 05/11/2008 เวลา : 15.50 น.
http://oknation.nationtv.tv/blog/chai
<<==แวะไปทัก..แล้วคุณจะรักหนุ่มคนนี้

(0)
โหย...........ยาก
ผมเป็นคนละพันธุ์กับความเห็นที่ 4 ครับ
ความคิดเห็นที่ 5
mookie วันที่ : 05/11/2008 เวลา : 15.29 น.
http://oknation.nationtv.tv/blog/mookie
เราอาจไม่ได้มีความสุขในทุกนาทีของชีวิต  แต่เราอยากให้ทุกนาทีของความสุข...ถูกบันทึก

(0)
อ้อ ต้องกลับไปอ่านตอนที่แล้วก่อง เพราะตอนที่แล้วยังไม่ได้อ่าน ยังเฮิร์ทอยู่ (กล้องหายยย)

เลยจมปลักอยู่กับเอนทรี่วันพระของพี่หมี เพื่อทำใจอยู่ตั้งหลายวันอ่ะคับ...
ความคิดเห็นที่ 4
mookie วันที่ : 05/11/2008 เวลา : 15.27 น.
http://oknation.nationtv.tv/blog/mookie
เราอาจไม่ได้มีความสุขในทุกนาทีของชีวิต  แต่เราอยากให้ทุกนาทีของความสุข...ถูกบันทึก

(0)
เย๊สสสสสส

แล้วฟายๆ อย่างมุกกี้ จามีปัญญาม๊ะเนี่ย...

ต้องมาค่อยๆ อ่าน ค่อยๆ ทำตามไปทีละขั้นตอน

เด๋วมาใหม่คร๊าบบพี่หมี...
ความคิดเห็นที่ 3
รวงข้าวล้อลม วันที่ : 05/11/2008 เวลา : 14.59 น.
http://oknation.nationtv.tv/blog/roungkaw
กัลยาณมิตร    เป็นสิ่งหาง่ายเสมอ   แค่รู้จักคำว่า....ให้....และคำว่า...รับ 

(0)
ค่อนข้างยาว และยาก แต่จะพยายามแกะดูนะคะ คุณศุภหมี สบายดีนะคะน้อง
ความคิดเห็นที่ 2
apooh วันที่ : 05/11/2008 เวลา : 14.58 น.
http://oknation.nationtv.tv/blog/bedtaled
Reduce..Re-use..Re-cycle

(0)
เอี๊ยดดดดดดดดดดดดดดดดดดดดด

วิ่งไปตามมุกกี้มาดูด่วน

ความคิดเห็นที่ 1
สิงห์มือซ้าย วันที่ : 05/11/2008 เวลา : 14.57 น.
http://oknation.nationtv.tv/blog/SingMeuSai
ร้านพร สิงห์มือซ้ายwww.facebook.com/lefthandshop 

(0)
มาทักทายก่อนนะคะ
แสดงความคิดเห็น


ถึง บล็อกเกอร์ ทุกท่าน โปรดอ่าน
   ด้วยทาง บริษัท จีเอ็มเอ็ม แกรมมี่ จำกัด (มหาชน) ได้ติดต่อขอความร่วมมือ มายังเว็บไซต์และเว็บบล็อกต่าง ๆ รวมไปถึงเว็บบล็อก OKnation ห้ามให้มีการเผยแพร่ผลงานอันมีลิขสิทธิ์ ของบริษัท จีเอ็มเอ็ม แกรมมี่ฯ บนเว็บ blog โดยกำหนดขอบเขตของสิ่งที่ห้ามทำ และสามารถทำได้ ดังนี้
ห้ามทำ
- การใส่ผลงานเพลงต้นฉบับให้ฟัง ทั้งแบบควบคุมเพลงได้ หรือซ่อนเป็นพื้นหลัง และทั้งที่อยู่ใน server ของคุณเอง หรือ copy code คนอื่นมาใช้
- การเผยแพร่ file ให้ download ทั้งที่อยู่ใน server ของคุณเอง หรือฝากไว้ server คนอื่น
สามารถทำได้
- เผยแพร่เนื้อเพลง ต้องระบุชื่อเพลงและชื่อผู้ร้องให้ชัดเจน
- การใส่เพลงที่ร้องไว้เอง ต้องระบุชื่อผู้ร้องต้นฉบับให้ชัดเจน
จึงเรียนมาเพื่อโปรดปฎิบัติตาม มิเช่นนั้นทางบริษัท จีเอ็มเอ็ม แกรมมี่ฯ จะให้ฝ่ายดูแลลิขสิทธิ์ ดำเนินการเอาผิดกับท่านตามกฎหมายละเมิดลิขสิทธิ์
OKNATION



กฎกติกาการเขียนเรื่องและแสดงความคิดเห็น
1 การเขียน หรือแสดงความคิดเห็นใด ๆ ต้องไม่หมิ่นเหม่ หรือกระทบต่อสถาบันชาติ ศาสนา และพระมหากษัตริย์ หรือกระทบต่อความมั่นคงของชาติ
2. ไม่ใช้ถ้อยคำหยาบคาย ดูหมิ่น ส่อเสียด ให้ร้ายผู้อื่นในทางเสียหาย หรือสร้างความแตกแยกในสังคม กับทั้งไม่มีภาพ วิดีโอคลิป หรือถ้อยคำลามก อนาจาร
3. ความขัดแย้งส่วนตัวที่เกิดจากการเขียนเรื่อง แสดงความคิดเห็น หรือในกล่องรับส่งข้อความ (หลังไมค์) ต้องไม่นำมาโพสหรือขยายความต่อในบล็อก และการโพสเรื่องส่วนตัว และการแสดงความคิดเห็น ต้องใช้ภาษาที่สุภาพเท่านั้น
4. พิจารณาเนื้อหาที่จะโพสก่อนเผยแพร่ให้รอบคอบ ว่าจะไม่เป็นการละเมิดกฎหมายใดใด และปิดคอมเมนต์หากจำเป็นโดยเฉพาะเรื่องที่มีเนื้อหาพาดพิงสถาบัน
5.การนำเรื่อง ภาพ หรือคลิปวิดีโอ ที่มิใช่ของตนเองมาลงในบล็อก ควรอ้างอิงแหล่งที่มา และ หลีกเลี่ยงการเผยแพร่สิ่งที่ละเมิดลิขสิทธิ์ ไม่ว่าจะเป็นรูปแบบหรือวิธีการใดก็ตาม 6. เนื้อหาและความคิดเห็นในบล็อก ไม่เกี่ยวข้องกับทีมงานผู้ดำเนินการจัดทำเว็บไซต์ โดยถือเป็นความรับผิดชอบทางกฎหมายเป็นการส่วนตัวของสมาชิก
คลิ้กอ่านเงื่อนไขทั้งหมดที่นี่"
OKnation ขอสงวนสิทธิ์ในการปิดบล็อก ลบเนื้อหาและความคิดเห็น ที่ขัดต่อความดังกล่าวข้างต้น โดยไม่ต้องชี้แจงเหตุผลใดๆ ต่อเจ้าของบล็อกและเจ้าของความคิดเห็นนั้นๆ
   

กลับไปหน้าที่แล้ว กลับด้านบน