http://labs.adobe.com/technologies/edge/ (http://labs.adobe.com/technologies/edge/)
ทำ HTML5 Animation จากเครื่องมือของอโดบี้ :27c:
รอมานาน รู้สึกแจกฟรีด้วยมั้งเนี่ย รุ่นพรีวิวครับ
อ้างอิงThis version of Edge focuses primarily on adding rich motion design to new or existing HTML projects, that runs beautifully on devices and desktops.
Create new compositions with Edge's drawing and text tools.
Import popular web graphics such as SVG, PNG, JPG or GIF files.
Easily choreograph animation with the timeline editor. Animate position, size, color, shape, rotation and more at the property level.
Energize existing HTML files with motion, while preserving the integrity of CSS-based HTML layouts.
Copy and paste transitions, invert them, and choose from over 25 built-in easing effects for added creativity.
ตัวอย่าง
http://labs.adobe.com/technologies/edge/resources/gettingjumpy1/wordAnimation.html (http://labs.adobe.com/technologies/edge/resources/gettingjumpy1/wordAnimation.html)
http://labs.adobe.com/technologies/edge/resources/gettingjumpy2/wordAnimation2.html (http://labs.adobe.com/technologies/edge/resources/gettingjumpy2/wordAnimation2.html)
http://labs.adobe.com/technologies/edge/resources/sunshinesailing/Test.html (http://labs.adobe.com/technologies/edge/resources/sunshinesailing/Test.html)
http://labs.adobe.com/technologies/edge/resources/ferriswheel/Wheel.html (http://labs.adobe.com/technologies/edge/resources/ferriswheel/Wheel.html)
http://labs.adobe.com/technologies/edge/resources/richad/csAd004.html (http://labs.adobe.com/technologies/edge/resources/richad/csAd004.html)
จาก http://labs.adobe.com/technologies/edge/resources/ (http://labs.adobe.com/technologies/edge/resources/)
:25: ต้องฝึกทำแล้วจะได้ไปทำงานกับพี่แอน
ลองเล่นดูแล้ว :12: ไม่ยาก แต่ไม่มีอะไรมาก
พอเซฟปั๊บมันจะให้ไฟล์มาสามสี่ห้าหกไฟล์
นี่คือ Source Code ของ HTML
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
<script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="test_edge.js"></script>
<link rel="stylesheet" href="test_edge.css"/>
<!--Adobe Edge Runtime End-->
</head><body>
<div id="stage" class="symbol_stage">
</div>
</body>
</html>
แบบนี้แฟลชก็ตายสนิทเลยซิ :05:
:12: หัดๆ สายอื่นไว้บ้างละกัน
อ่อ อันนี้สินะเห็นอีก่อทวิตเลอะเทอะเปรอะเปื้อน สวนกระแสโบว์ท้องตอนเย็นๆ :30:
รีวิวหน่อยดิ ตูได้ดูแค่ผ่านๆ
อ๊ะ!! :25a:
เดี๋ยวจะมีมุข " ยุคนี้มันต้อง Adobe 3G แล้ว " แน่ๆ
:30:
อู๊ย ยังอุตส่าห์ฮา :30:
ในประเทศนี้จะมีคนเก็ตสักกี่คนเนี่ย :30:
ทำเว็บเดี๋ยวนี้ไม่ได้แตะ flash อีกเลย
ลูกค้าบอกว่าเปิดใน iphone ไม่ได้ :05:
ตามไม่ทันแล้ว :05:
เอ้า มีจู๋นี้อีก ถึงว่าหาไม่เจอ :30:
Adobe มาแรงมากนะครับ :07:
แล้วก็ต้องกลับไปดูใช่ไหมว่า อะไรมันใช้ HTML5 ได้มั่ง
แล้วเบราเซอร์ปัญญาอ่อน ต้องทำยังไง
ไม่ใช่สิ ลูกค้าปัญญาอ่อนต้องอธิบายยังไง
เห็นสถิติคนเข้าเว็บปีนี้ใช้หมาย่างอันดับ 1
ค่อยมีแรงไปเถียงกับเจ้าของเว็บหน่อย ว่าอย่าไปใส่ใจมันมาก IE 6 ที่เปิดแล้วเว็บเละเทะน่ะ
IE6 เหลือแค่ 4-6 เปอร์เซ็นต์ก็ต้องง้อมันครับ
ขุดแปะคลิป
Adobe Edge HTML5 Interactive Web Banner Tutorial (http://www.youtube.com/watch?v=8x2y69e4kvM#ws)
สอนทำแบนเนอร์ที่มีลิงก์ HTML5 ให้กดได้ (ได้มาจากห้าโอ)
อันนี้คลิปสอนใช้งานทั้งหมด
Adobe Edge Intro Tutorial (http://www.youtube.com/watch?v=Ztq301zHaK0#ws)
http://www.youtube.com/watch?v=Ztq301zHaK0&feature=list_related&playnext=1&list=SP8907EE780071B36E
แจ่มแมวเลยครับ หัดทำดีกว่า
.
ขุดข้ามปี
Introduction to Reflow (http://www.youtube.com/watch?v=o3fJoiC8OEQ#ws)
http://www.blognone.com/node/41016 (http://www.blognone.com/node/41016)
:25:
นี่มันเริ่มใช้ได้จริงแล้วนะเนี่ย