วันพุธที่ 7 กันยายน พ.ศ. 2554

นาฬิกาปลุกดิจิตอล(FLASH 8)

ขั้นแรก ทำส่วน metal fram และจอ LCD
1.เปิด new flash document ขนาด 364x60
2.วาดกล่องสี่เหลี่ยม ด้วยเครื่องมือ Rectangle tool (R) ขนาด350x45 pixel ไม่ต้องมีกรอบ สีไม่มีความสำคัญเพราะจะเปลี่ยนทีหลัง
3.ทำขอบด้านข้างของรูปสี่เหลี่ยมให้โค้งดังรูปด้านล่างโดยใช้เครื่องมือ Selection tool (V)
4.จากนั้นให้ไปที่ Color Mixer panel (Window>Color Mixer) ให้เลือก Fill color และเลือกประเภทเป็น Linear ให้เพิ่มสีโดยการคลิกขวา และกำหนดค่าสี  #575861, #E1E3FF,#FFFFFF,#D9DEE6,#596069,#9D9Ea3,#2A2B30
5. ใช้เครื่องมือ Paint Bucket (K)  เพื่อเติมสีให้กับ Frame โดยคลิกเมาท์ค้าง และลากจากบนลงล่าง
6.เมื่อได้แล้วให้กำหนดชื่อ layer นี้เป็น metal bar แล้ว lock layer นี้ไว้
7.สร้าง layer ใหม่ โดยให้ชื่อว่า lcd screen
8.ใช้ Rctangle tool (R) เพื่อวาดกล่องสี่เหลี่ยมขนาด 103x24  pixel โดยใช้โค้ดสี #7CC5C9 เพื่อเพิ่มความเหมือนจริง อาจเพิ่มกรอบโดยกำหนดเส้นให้ขอบซ้ายและด้านบนเป็นสีดำ ขอบด้านล่างและด้านขวาเป็นสี่เทา (F8hf#CCCCCC) เมื่อเสร็จแล้วจะได้
9.ให้ไปดาวน์โหลด quartz font ได้ที่http://www.fonts101.com/fonts/view/Brandname/15293/Quartz.aspx  เมื่อได้แล้วให้ install font นี้ไว้ในเครื่อง
ขั้นที่ 2 ส่วนของ text field
1.เพิ่ม layer ใหม่โดยให้ชื่อว่า faded numbers ใช้เครื่องมือ Text tool (T) กำหนด font เป็น Quartz ขนาด 26 และเลือกเป็น Static Text กำหนดสีเป็น #438A92 และ alpha 41% คลิกที่สกรีนแล้วใส่ ?88:88? ไม่ต้องใส่เครื่องหมายคำพูด วางตำแหน่งให้เหมาะสมจะได้
2. layer เดิม ให้เอาเมาท์ไปคลิกที่ text field แล้วกด Copy (Ctrl C)
3. Lock faded number layer และสร้าง layerใหม่ชื่อว่า numbers และให้ Paste text field ที่ copy มา (Edit>Paste in Place)ในส่วนของ Properties ให้เปลี่ยนประเภทเป็น Dynamic Text และกำหนดชื่อ text field นี้เป็น lcdScreen ทางด้านขวาจะมีปุ่ม Embed ให้คลิกเลือก Numbers และใส่ semicolon  และคลิก spacebar หนึ่งครั้ง สุดท้ายเปลี่ยนสี text field เป็นสีดำ (#000000)
Text field นี้จะถูกใช้เป็นตัวโชว์เวลา ให้สลับในตัวเลขใน text field นี้ออกแต่ให้คงขนาดความกว้าง text field ไว้Copy text field และ Lock layer นี้ไปเลย
4. สร้างlayer ใหม่ให้ชื่อว่า alarm text field Paste text field โดยให้ชื่อว่า alarmScreen และ Lock layer นี้เช่นกัน
5.สร้าง layer ใหม่โดยให้ชื่อว่า on/off/set faded โดยใช้ font เป็น Arial ขนาด 6 สีดำโค้ด #43A92 และ alpha 41% ทำให้เป็นตัวหนา เปลี่ยน text field type เป็น Staic Text สร้าง ? text field :ON,OFFและ SET แยกกัน โดยกำหนดตำแหน่ง
6. เลือก text field ทั้งสามและ Copy แล้ว lock layer นี้ไปเลย จากนั้นสร้าง lsyer ใหม่ให้ชื่อว่า on/off/set black และ Paste text field ทั้ง3 ที่นี่เลย โดยเปลี่ยนสีให้เป็นสีดำ แล้ว unselect
Convert แต่ละ  text field ให้เป็น movie clip เพื่อให้สามารถเปิดมันได้ทีหลัง ดังนั้น text fieldตัวแรก ให้คลิกที่ ON แล้วเลือกไปที่ Modify >Convert Symbol จากนั้นให้เลือกเป็น movie clip ให้ชื่อว่า alarm on sign ทำเช่นเดียวกับอีกสองตัวที่เหลือโดยให้ชื่อว่า alarm off sign และ set alarm sign
ขั้นที่ 3 เซตปุ่มนาฬิกา
1. สร้าง layer ใหม่ให้ชื่อว่า labels ใช้เครื่องมือ text tool เลือก font สวยๆ อย่าง Fixed_v01 ดาวน์โหลดได้ที่นี่ กำหนดขนาด 8 สีขาวและประเภทเป็น Static Text พิมพ์
ALARM: ON OFF     SET MIN HRS
2. Copy text field และ Paste ใน layer นี้ โดยให้เปลี่ยนสีตัวหนังสือเป็นสีดำ และวางเหลื่อมขึ้นไปด้านบน 1 pixel และด้านซ้าย 1 pixel ถึงตรงนี้ลองทดสอบนาฬิกา โดยให้ไปที่ Control > Test Movie ?ถ้าได้เหมือนภาพด้านล่างถือว่าถูกต้อง
3. สร้าง layer ใหม่ ให้ชื่อว่า buttons Zoom in จะช่วยให้ทำได้ง่ายขึ้นสร้าง invisible button ทับ label ONโดยการวาดสีเหลี่ยมทับ Rectangle tool (R)
เมื่อวาดสี่เหลี่ยมแล้วให้กด F8 เพื่อ convert เป็น symbol โดยเลือประเภทเป็น button ในหน้าต่างของ Convert to Symbol โดยให้ชื่อว่า invisible botton
4. Double-click ที่ button ที่คุณพึ่งสร้างขึ้นมา คุณจะได้ timeline ของปุ่มดังรูป
คลิกที่ Up keyframe และลากไปที่ Hit keyframe จะได้
5. Copy button และ Pastes 4 ครั้ง แล้วนำไปวางตามปุ่มต่างๆ โดยสามารถปรับขนาดให้เหมาะสมกับแต่ละตัวได้โดยใช้ Free Transform tool (Q) จะได้
6. ให้กำหนดชื่อของแต่ละปุ่มดังนี้ โดยเรียงจากซ้ายไปขวา ?alarmOn, alarmOff, setAlarm, setMins, setHrs จะเปลี่ยนชื่อก็ได้แต่สิ่งสำคัญคือแต่ละปุ่มจะต้องชื่อไม่ซ้ำกัน lock layer นี้ได้เลย


ขั้นที่ 4 เป็นการใส่เสียงปลุก
ดาวน์โหลดเสียงได้ที่ http://www.lukamaras.com/tutorials/cool-design/materials/alarm.zip Unpack ก่อน
1. กลับไปที่ flash เลือก File > Import > Import to Library หา alarm.wav ที่คุณพึ่งดาวน์โหลดมา
2. คลิกขวาที่ alarm.wav  และเลือก Linkage จะได้หน้าต่างดังภาพด้านล่าง ให้คลิกที่ "Export for ActionScript" box ส่วน "Export in first frame" จะถูกเช็คโดยอัตดนมัติ? กำหนดชื่อเป็น digitalAlarm คลิก OK
3. คลิกขวาที่ alarm.wav? อีกครั้งและเลือก Export Settings เลือก MP3 และset Bit rate เป็น 16 kbps และ Quality to Medium คลิก OK

ไม่มีความคิดเห็น:

แสดงความคิดเห็น