linnou
11-01-2013, بتوقيت غرينيتش 03:44 PM
http://www.dzbatna.com/images/icons/iconrote.gif spritely jquery ط§ظ„ط·ظپط±ظ‡ ط§ظ„ط*ظ‚ظٹظ‚ظٹظ‡ ط§ظ„طھظ‰ ط³طھط¬ط¹ظ„ظƒ طھطµظ…ظ… ظ‡ظٹط¯ط± ظ…طھط*ط±ظƒ ط¨ط¯ظˆظ† ظپظ„ط§ط´ (http://www.dzbatna.com/t1598541/)
http://i46.tinypic.com/hrzm02.gif
http://i49.tinypic.com/sxdmo0.jpg
نعود معكم زوار موقعنا الكرام , واليوم نستعرض معكم واحد من الدروس الشيقه والتى ستعجب بها
لانك ستتعرف اليوم على شىء جديد, قد تستمتع به عيناك لتشاهده
فهرس الموضوع:
1-مقدمه سريعه
2-المثال العملى لموقع
3-شرح طريقة الأوامر الخاصه بspritely المهمه لتعدل عليها
4-شرح طريقة كيفيه استخدامه وتركيب installه على صفحه تريد استخدام spritely فيها
أولا: مقدمه سريعه:
كثير من يريد تصميم هيدر او اى جزء فى موقعه, ويريد استخدام المؤثرات الحركيه فى موقعه , ويلجأ الى
الفلاش لينفذ ذلك, ولكن بالرغم من جمال الفلاش الا انه له عيوب وهى:
1-يتطلب برنامج مشغل الفلاش لتشغيله
2-عمل لود على الصفحه وسحب الترافيك خصوصا لو كان ملف كبير
3-ازعاج زوار الموقع فقد لا يظهر من بطىء التحميل ........الخ
لذلك , ما رأيك ان نستغنى عن الفلاش ونستخدم مكتبة الjquery البرمجيه الرائعه لنقوم بذلك
باستخدام الspritely
ماهو spritely: هو عباره عن plugin قامت شركة artlogic ببرمجته لينضم لاحد مزايا الjquery الرائعه
صفحة المشروع الرئيسيه من هـــــــــنــــــــا (http://www.spritely.net)
وظيفة spritely : يقدم لك هذا الplugin امكانيات متكامله لعمل مؤثرات حركيه للصور
ثانيا: المثال العملى :
قبل ان ابدأ فى شرح طريقةه بأذن الله أريدك ان تشاهد المثال العملى :
مثال عملى لموقع يعمل بspritely وشاهد مدى جمال الهيدر header ورونقه http://www.dzbatna.com/images/smilies/icon30.gif
ملحوظه: هذا الplugin يعمل بنجاح مع كافة المتصفحات الجديده بشكل جيد أفضل من المتصفحات القديمه , وهذا يختلف بأختلاف التصميم نفسه وليس كعيب فى plugin نفسه
يعنى يفضل تشوفه على chrome ,opera,ie7,8,firefox3
مثال عملى:
http://i43.tinypic.com/2cz8vpy.png
(http://www.advphp.com/tuts/7r/sprite/)
حمل الملفات والمثال من موقع المشروع:
http://i39.tinypic.com/2ppc5ly.jpg
(http://www.spritely.net/download/)
ثالثا: شرح طريقة الأوامر الخاصه بspritely المهمه لتعدل عليها :
1- اولا: دعونا نشوف الأوامر البرمجيه المهمه الخاصه spritely:
http://i46.tinypic.com/sgmubm.jpg
الحين واحده واحده ونشرح طريقة المهم وما يخصنا منه:
1-كيفية تحريك الطائر او اى صوره تريدها ؟
اولا سوف نقوم بعمل صوره للطائر بحيث تتغير حركة جناحيه بالترتيب
وأهم شرط ان عرض وطول للطائر الواحد او نقوم الفريم سيكون 180px فى 180px
http://i46.tinypic.com/33ljlec.jpg
http://i45.tinypic.com/otdpol.jpg
تمام , الحين سنقوم بعمل div اسمه bird وسنقوم بعمل القيم الاتيه له :
رمز Code:
#bird { background: transparent url(images/bird-forward-back.png) 0 0 no-repeat; position: absolute; top: 150px; left: 65px; width: 180px; height: 123px; z-index: 2000; cursor: pointer; }
وبعد ذلك سنعطى أمر التحريك للطائر كالتى:
رمز Code:
$('#bird').sprite({fps: 12, no_of_frames: 3});
حيث fps هى سرعة الفريم (الطائر الواحد) وno_of_frames هى عدد الفريمات
وكما نشاهد فالطائر له ثلاث حركات لذلك ستكون 3
2-كيفية جلب الطائر لنقرة الماوس فى اى جزء الصفحة :
سنقوم بوضع هذا الامر :
رمز Code:
$('#bird').sprite({fps: 12, no_of_frames: 3}).activeOnClick().active(); $('body').flyToTap();
3-كيفية تحريك صورة الاعشاب لتظهر كأنها تتحرك؟
http://i45.tinypic.com/xnyhd2.jpg
سنقوم بعمل div واسمه hill
ونقوم باعطاء خلفيه له واهم شىء التكرار الافقى,
رمز Code:
#hill1 { background: transparent url(images/hill-with-windmill.png) 0 104px repeat-x;
بعد ذلك , ستجد صورة أخرى للاعشاب بالطاحونه
أيضا بالمثل نسوى لها div ونقوم باعطاء خلفيه لها
رمز Code:
#hill2 { background: transparent url(images/hill2.png) 0 258px repeat-x; }
الان بعد ما وضعنا هذه الصوره , نريد تحريكها فى الهيدر header,
سوف نعطيها الامر الاتى:
رمز Code:
$('#hill').pan({fps: 30, speed: 2, dir: 'left'});
حيث fps هى سرعة حركة الفريم, والspeed هى سرعة الصوره نفسها, والdir هو اتجاه حركه الصورة
وستكون من اليسار لليمين
4- كيف يمكننا تنسيق الصوره وعمق الصور فى الهيدر header لتظهر كأنها تتحرك بكاملها؟
هذه نقطه مهمه وجلست اتطلع فى هذه الجزئيه كثير واقرأ المقصود منها, والحمدلله فهمناها
الحين لو تلاحظ فى الهيدر header انه يوجد صور للاتى:
1-الطائر
2-الاعشاب
3-السحاب
كيف يمكننا ان نجعل السرعه بين هذول الثلاثه متناسقه ؟
اولا: فى أمر pan السابق لابد ان نحدد عمق الصوره فى الهيدر header؟
يعنى شو عمق؟ http://www.dzbatna.com/images/smilies/nosweat.gif
شوف الصوره الاتيه :
http://www.spritely.net/images/depth-explained.jpg
العمق المقصود منها مكان الصوره بالهيدر header, يعنى لو تلاحظ ان صورة الاعشاب الاولى هى التى فى المقدمه, ثم أتى بعدها صورة الاعشاب بالطاحونه, ثم صورة السحاب
لذلك لابد لكل صوره ان نعطى لها أمر العمق depth فى الامر السابق Pan بحيث يصبح كالاتى:
رمز Code:
$('#hill2').pan({fps: 30, speed: 2, dir: 'left', depth: 30})
تمام , نرجع لمحور نقطتتا وهو كيفية التنسيق بين سرعة الصور ,
سوف نستخدم لذلك الفانشكن spRelSpeed بحيث راح نختار الصور التى نريد التنسيق بينها
ونحدد لها سرعة
مثال:
رمز Code:
$('#clouds, #hills').spRelSpeed(30);
الامر السابق سيقوم بعمل تنسيق بسرعة 30 على افتراض اننا اعطينا العمق hill2 30
5- كيفية تحديد اتجاه حركة الطائر؟
http://www.spritely.net/images/bird-forward-back.png
لو تلاحظ فى اول صوره سويناها للطائر, فهى مقسمه لصفين
-صف علوى خاص باتجاه حركة الطائر من اليسار لليمين
-صف سفلى خاص باتجاه حركة الطائر من اليمين لليسار
وحتى نحدد حركة اتجاه الطائر سوف نستخدم spstate
مثال:
رمز Code:
$('#bird').spState(2); // fly backwards (row 2 of the sprite) $('#bird').spState(1); // fly forwards (row 1 of the sprite)
خامسا: شرح طريقة كيفيه استخدامه وتركيب installه على صفحه تريد استخدام spritely فيها ؟
اولا: نجلب ملفاتنا بوضعها بين وسم head
رمز Code:
<link rel="stylesheet" type="text/css" href="styles/main.css" /> <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="scripts/jquery-ui-1.7.2.spritely.custom.min.js" type="text/javascript"></script> <script src="scripts/jquery.spritely-0.2.js" type="text/javascript"></script>
ثانيا: الcss:
فى نفس الصفحه اللى راح تضعها بين وسمى head:
رمز Code:
<style type="text/css"> #stage { top: 0px; left: 0px; z-index: 100; } .stage { position: absolute; top: 0; left: 0; width: 100%; min-width: 900px; height: 359px; overflow: hidden; } #bg { background: #aedfe5 url(images/sky1.png) 0 0 repeat-x; } #clouds { background: transparent url(images/cloud.png) 305px 102px repeat-x; } #hill2 { background: transparent url(images/hill2.png) 0 258px repeat-x; } #hill1 { background: transparent url(images/hill-with-windmill.png) 0 104px repeat-x; } #bird { background: transparent url(images/bird-forward-back.png) 0 0 no-repeat; position: absolute; top: 150px; left: 65px; width: 180px; height: 123px; z-index: 2000; cursor: pointer; } </style>
3- أوامر الjquery
بين وسمى head........
رمز Code:
<script type="text/javascript"> (function($) { $(document).ready(function() { $('#logo').click(function() { document.location.href = 'http://www.spritely.net/'; }); $('#bird') .sprite({fps: 9, no_of_frames: 3}) .spRandom({top: 50, bottom: 200, left: 300, right: 320}) .isDraggable() .activeOnClick() .active(); $('#clouds').pan({fps: 30, speed: 0.7, dir: 'left', depth: 10}); $('#hill2').pan({fps: 30, speed: 2, dir: 'left', depth: 30}); $('#hill1').pan({fps: 30, speed: 3, dir: 'left', depth: 70}); $('#hill1, #hill2, #clouds').spRelSpeed(8); window.actions = { fly_slowly_forwards: function() { $('#bird') .fps(10) .spState(1); $('#hill1, #hill2, #clouds') .spRelSpeed(10) .spChangeDir('left'); }, fly_slowly_backwards: function() { $('#bird') .fps(10) .spState(2); $('#hill1, #hill2, #clouds') .spRelSpeed(10) .spChangeDir('right'); }, fly_quickly_forwards: function() { $('#bird') .fps(20) .spState(1); $('#hill1, #hill2, #clouds') .spRelSpeed(30) .spChangeDir('left'); }, fly_quickly_backwards: function() { $('#bird') .fps(20) .spState(2); $('#hill1, #hill2, #clouds') .spRelSpeed(30) .spChangeDir('right'); }, fly_like_lightning_forwards: function() { $('#bird') .fps(25) .spState(1); $('#hill1, #hill2, #clouds') .spSpeed(40) .spChangeDir('left'); }, fly_like_lightning_backwards: function() { $('#bird') .fps(25) .spState(2); $('#hill1, #hill2, #clouds') .spSpeed(40) .spChangeDir('right'); } }; window.page = { hide_panels: function() { $('.panel').hide(300); }, show_panel: function(el_id) { this.hide_panels(); $(el_id).show(300); } } }); })(jQuery); </script>
4-الdivs
بين وسمى body:
رمز Code:
<div id="container"> <div id="stage" class="stage"> <div id="tap" class="stage"></div> <div id="bg" class="stage"></div> <div id="clouds" class="stage"></div> <div id="hill2" class="stage"></div> <div id="hill1" class="stage"></div> <div id="logo">Spritely</div> </div> <div id="bird"></div> </div>
انتهى الدرس مفصل
أتمنى أكون وٌفقت فى شرح طريقةه ولو بشىء بسيط من الفهم
أخوكم محمد
التعديل الأخير كان بواسطة vista-design; 25 - 06 - 2014 الساعة 01:56
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://i46.tinypic.com/hrzm02.gif
http://i49.tinypic.com/sxdmo0.jpg
نعود معكم زوار موقعنا الكرام , واليوم نستعرض معكم واحد من الدروس الشيقه والتى ستعجب بها
لانك ستتعرف اليوم على شىء جديد, قد تستمتع به عيناك لتشاهده
فهرس الموضوع:
1-مقدمه سريعه
2-المثال العملى لموقع
3-شرح طريقة الأوامر الخاصه بspritely المهمه لتعدل عليها
4-شرح طريقة كيفيه استخدامه وتركيب installه على صفحه تريد استخدام spritely فيها
أولا: مقدمه سريعه:
كثير من يريد تصميم هيدر او اى جزء فى موقعه, ويريد استخدام المؤثرات الحركيه فى موقعه , ويلجأ الى
الفلاش لينفذ ذلك, ولكن بالرغم من جمال الفلاش الا انه له عيوب وهى:
1-يتطلب برنامج مشغل الفلاش لتشغيله
2-عمل لود على الصفحه وسحب الترافيك خصوصا لو كان ملف كبير
3-ازعاج زوار الموقع فقد لا يظهر من بطىء التحميل ........الخ
لذلك , ما رأيك ان نستغنى عن الفلاش ونستخدم مكتبة الjquery البرمجيه الرائعه لنقوم بذلك
باستخدام الspritely
ماهو spritely: هو عباره عن plugin قامت شركة artlogic ببرمجته لينضم لاحد مزايا الjquery الرائعه
صفحة المشروع الرئيسيه من هـــــــــنــــــــا (http://www.spritely.net)
وظيفة spritely : يقدم لك هذا الplugin امكانيات متكامله لعمل مؤثرات حركيه للصور
ثانيا: المثال العملى :
قبل ان ابدأ فى شرح طريقةه بأذن الله أريدك ان تشاهد المثال العملى :
مثال عملى لموقع يعمل بspritely وشاهد مدى جمال الهيدر header ورونقه http://www.dzbatna.com/images/smilies/icon30.gif
ملحوظه: هذا الplugin يعمل بنجاح مع كافة المتصفحات الجديده بشكل جيد أفضل من المتصفحات القديمه , وهذا يختلف بأختلاف التصميم نفسه وليس كعيب فى plugin نفسه
يعنى يفضل تشوفه على chrome ,opera,ie7,8,firefox3
مثال عملى:
http://i43.tinypic.com/2cz8vpy.png
(http://www.advphp.com/tuts/7r/sprite/)
حمل الملفات والمثال من موقع المشروع:
http://i39.tinypic.com/2ppc5ly.jpg
(http://www.spritely.net/download/)
ثالثا: شرح طريقة الأوامر الخاصه بspritely المهمه لتعدل عليها :
1- اولا: دعونا نشوف الأوامر البرمجيه المهمه الخاصه spritely:
http://i46.tinypic.com/sgmubm.jpg
الحين واحده واحده ونشرح طريقة المهم وما يخصنا منه:
1-كيفية تحريك الطائر او اى صوره تريدها ؟
اولا سوف نقوم بعمل صوره للطائر بحيث تتغير حركة جناحيه بالترتيب
وأهم شرط ان عرض وطول للطائر الواحد او نقوم الفريم سيكون 180px فى 180px
http://i46.tinypic.com/33ljlec.jpg
http://i45.tinypic.com/otdpol.jpg
تمام , الحين سنقوم بعمل div اسمه bird وسنقوم بعمل القيم الاتيه له :
رمز Code:
#bird { background: transparent url(images/bird-forward-back.png) 0 0 no-repeat; position: absolute; top: 150px; left: 65px; width: 180px; height: 123px; z-index: 2000; cursor: pointer; }
وبعد ذلك سنعطى أمر التحريك للطائر كالتى:
رمز Code:
$('#bird').sprite({fps: 12, no_of_frames: 3});
حيث fps هى سرعة الفريم (الطائر الواحد) وno_of_frames هى عدد الفريمات
وكما نشاهد فالطائر له ثلاث حركات لذلك ستكون 3
2-كيفية جلب الطائر لنقرة الماوس فى اى جزء الصفحة :
سنقوم بوضع هذا الامر :
رمز Code:
$('#bird').sprite({fps: 12, no_of_frames: 3}).activeOnClick().active(); $('body').flyToTap();
3-كيفية تحريك صورة الاعشاب لتظهر كأنها تتحرك؟
http://i45.tinypic.com/xnyhd2.jpg
سنقوم بعمل div واسمه hill
ونقوم باعطاء خلفيه له واهم شىء التكرار الافقى,
رمز Code:
#hill1 { background: transparent url(images/hill-with-windmill.png) 0 104px repeat-x;
بعد ذلك , ستجد صورة أخرى للاعشاب بالطاحونه
أيضا بالمثل نسوى لها div ونقوم باعطاء خلفيه لها
رمز Code:
#hill2 { background: transparent url(images/hill2.png) 0 258px repeat-x; }
الان بعد ما وضعنا هذه الصوره , نريد تحريكها فى الهيدر header,
سوف نعطيها الامر الاتى:
رمز Code:
$('#hill').pan({fps: 30, speed: 2, dir: 'left'});
حيث fps هى سرعة حركة الفريم, والspeed هى سرعة الصوره نفسها, والdir هو اتجاه حركه الصورة
وستكون من اليسار لليمين
4- كيف يمكننا تنسيق الصوره وعمق الصور فى الهيدر header لتظهر كأنها تتحرك بكاملها؟
هذه نقطه مهمه وجلست اتطلع فى هذه الجزئيه كثير واقرأ المقصود منها, والحمدلله فهمناها
الحين لو تلاحظ فى الهيدر header انه يوجد صور للاتى:
1-الطائر
2-الاعشاب
3-السحاب
كيف يمكننا ان نجعل السرعه بين هذول الثلاثه متناسقه ؟
اولا: فى أمر pan السابق لابد ان نحدد عمق الصوره فى الهيدر header؟
يعنى شو عمق؟ http://www.dzbatna.com/images/smilies/nosweat.gif
شوف الصوره الاتيه :
http://www.spritely.net/images/depth-explained.jpg
العمق المقصود منها مكان الصوره بالهيدر header, يعنى لو تلاحظ ان صورة الاعشاب الاولى هى التى فى المقدمه, ثم أتى بعدها صورة الاعشاب بالطاحونه, ثم صورة السحاب
لذلك لابد لكل صوره ان نعطى لها أمر العمق depth فى الامر السابق Pan بحيث يصبح كالاتى:
رمز Code:
$('#hill2').pan({fps: 30, speed: 2, dir: 'left', depth: 30})
تمام , نرجع لمحور نقطتتا وهو كيفية التنسيق بين سرعة الصور ,
سوف نستخدم لذلك الفانشكن spRelSpeed بحيث راح نختار الصور التى نريد التنسيق بينها
ونحدد لها سرعة
مثال:
رمز Code:
$('#clouds, #hills').spRelSpeed(30);
الامر السابق سيقوم بعمل تنسيق بسرعة 30 على افتراض اننا اعطينا العمق hill2 30
5- كيفية تحديد اتجاه حركة الطائر؟
http://www.spritely.net/images/bird-forward-back.png
لو تلاحظ فى اول صوره سويناها للطائر, فهى مقسمه لصفين
-صف علوى خاص باتجاه حركة الطائر من اليسار لليمين
-صف سفلى خاص باتجاه حركة الطائر من اليمين لليسار
وحتى نحدد حركة اتجاه الطائر سوف نستخدم spstate
مثال:
رمز Code:
$('#bird').spState(2); // fly backwards (row 2 of the sprite) $('#bird').spState(1); // fly forwards (row 1 of the sprite)
خامسا: شرح طريقة كيفيه استخدامه وتركيب installه على صفحه تريد استخدام spritely فيها ؟
اولا: نجلب ملفاتنا بوضعها بين وسم head
رمز Code:
<link rel="stylesheet" type="text/css" href="styles/main.css" /> <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="scripts/jquery-ui-1.7.2.spritely.custom.min.js" type="text/javascript"></script> <script src="scripts/jquery.spritely-0.2.js" type="text/javascript"></script>
ثانيا: الcss:
فى نفس الصفحه اللى راح تضعها بين وسمى head:
رمز Code:
<style type="text/css"> #stage { top: 0px; left: 0px; z-index: 100; } .stage { position: absolute; top: 0; left: 0; width: 100%; min-width: 900px; height: 359px; overflow: hidden; } #bg { background: #aedfe5 url(images/sky1.png) 0 0 repeat-x; } #clouds { background: transparent url(images/cloud.png) 305px 102px repeat-x; } #hill2 { background: transparent url(images/hill2.png) 0 258px repeat-x; } #hill1 { background: transparent url(images/hill-with-windmill.png) 0 104px repeat-x; } #bird { background: transparent url(images/bird-forward-back.png) 0 0 no-repeat; position: absolute; top: 150px; left: 65px; width: 180px; height: 123px; z-index: 2000; cursor: pointer; } </style>
3- أوامر الjquery
بين وسمى head........
رمز Code:
<script type="text/javascript"> (function($) { $(document).ready(function() { $('#logo').click(function() { document.location.href = 'http://www.spritely.net/'; }); $('#bird') .sprite({fps: 9, no_of_frames: 3}) .spRandom({top: 50, bottom: 200, left: 300, right: 320}) .isDraggable() .activeOnClick() .active(); $('#clouds').pan({fps: 30, speed: 0.7, dir: 'left', depth: 10}); $('#hill2').pan({fps: 30, speed: 2, dir: 'left', depth: 30}); $('#hill1').pan({fps: 30, speed: 3, dir: 'left', depth: 70}); $('#hill1, #hill2, #clouds').spRelSpeed(8); window.actions = { fly_slowly_forwards: function() { $('#bird') .fps(10) .spState(1); $('#hill1, #hill2, #clouds') .spRelSpeed(10) .spChangeDir('left'); }, fly_slowly_backwards: function() { $('#bird') .fps(10) .spState(2); $('#hill1, #hill2, #clouds') .spRelSpeed(10) .spChangeDir('right'); }, fly_quickly_forwards: function() { $('#bird') .fps(20) .spState(1); $('#hill1, #hill2, #clouds') .spRelSpeed(30) .spChangeDir('left'); }, fly_quickly_backwards: function() { $('#bird') .fps(20) .spState(2); $('#hill1, #hill2, #clouds') .spRelSpeed(30) .spChangeDir('right'); }, fly_like_lightning_forwards: function() { $('#bird') .fps(25) .spState(1); $('#hill1, #hill2, #clouds') .spSpeed(40) .spChangeDir('left'); }, fly_like_lightning_backwards: function() { $('#bird') .fps(25) .spState(2); $('#hill1, #hill2, #clouds') .spSpeed(40) .spChangeDir('right'); } }; window.page = { hide_panels: function() { $('.panel').hide(300); }, show_panel: function(el_id) { this.hide_panels(); $(el_id).show(300); } } }); })(jQuery); </script>
4-الdivs
بين وسمى body:
رمز Code:
<div id="container"> <div id="stage" class="stage"> <div id="tap" class="stage"></div> <div id="bg" class="stage"></div> <div id="clouds" class="stage"></div> <div id="hill2" class="stage"></div> <div id="hill1" class="stage"></div> <div id="logo">Spritely</div> </div> <div id="bird"></div> </div>
انتهى الدرس مفصل
أتمنى أكون وٌفقت فى شرح طريقةه ولو بشىء بسيط من الفهم
أخوكم محمد
التعديل الأخير كان بواسطة vista-design; 25 - 06 - 2014 الساعة 01:56
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
