بهترین راهکار برای قراردادن فلش در صفحات وب
استفاده از کلیپ های فلش در وب چه به صورت بنرهای تبلیغاتی و چه به صورت بخشی از طراحی سایت و منوها، از همون ابتدای به وجود اومدن فلش، مورد بحث بود. عدهای به طور کلی مخالف این کار هستند و برخی فقط استفاده از بنرهای فلش رو مناسب میدونند.
به هر حال بعد از سالها همچنان استفاده کردن یا نکردن از فلش به عنوان یک استاندارد بیان نشده است اما بر روی چگونگی به کار گزفتن آنها در وب، بسیار بحث شده است.
توجه به نکاتی مثل افزایش حجم صفحه و طولانی شدن مدت دانلود و نمایش صفحه همواره باید مورد توجه باشد. اگر یک بنر فلش که باید بالافاصله در چشم بازدید کننده بیاد تا نظر اون رو جلب کنه، انقدر حجم بالایی داشته باشه که تا بخواد لود بشه، بازدیدکننده از صفحه رفته، اون وقت دیگه این بنر به چه دردی میخوره؟
و یا برای طراحی های حجیم که لود شدن فلش ممکن است طول بکشد، نشان دادن یه چیزی به بازدیدکننده مثل درصد لود شدن فلش و یا حتی یک کلمه “Loading” ضروری به نظر میرسد.
اما در نهایت، این کلیپ یا بنر یا نمونه کار فلش رو باید در وب جای سازی کنیم. کد اچ تی ام ال که از دیرباز مورد استفاده قرار میگرفت به صورت زیر بود:
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="300" height="300">
<param name="movie" value="movie.swf">
<embed src="movie.swf" quality="high" width="300" height="300"
name="movie" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>
اما این کد به علت وجود تگ embed استاندارد نیست!
استاندارد سازی این کد از یک طرف و ایجاد امکاناتی از قبیل ارتباط با فلش از طریق جاوااسکریپت، تشخیص ورژن فلش پلیر و آپدیت خودکار اون در صورت نیاز و مواردی دیگر باعث به وجود آمدن قطعه کد و تکنیک جدیدی در جاوااسکریپت به نام swfobject شد.
نمونه کدی که برای استفاده از فلش در صفحات وب استاندارد میشود به صورت زیر است:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="300" height="300" id="movie1">
<param name="movie" value="movie.swf" />
<param name="quality" value="high" />
<param name="allowfullscreen" value="false" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash"
data="movie.swf" width="300" height="300">
<param name="quality" value="high" />
<param name="allowfullscreen" value="false" />
<!--<![endif]-->
شما باید فلش پلیر نصب کنید
<!--[if !IE]>-->
</object>
<!--<![endif]-->
این کد هم استاندارد هست و هم با تمامی مرورگرهای امروزی سازگار.
نقش swfobject چیست؟
توسط این کتابخونه جاوا اسکریپتی، امکانات اضافی در اختیار ما قرار داده میشود. ابتدا باید این فایل رو به صفحه خودمون اضافه کنیم. گوگل این فایل را در شبکه CDN خودش قرار داده است. پس چه بهتر که به صورت زیر استفاده کنیم:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
</script>
حالا به توابع swfobject دسترسی داریم. توسط این توابع میتوانیم مقادیری را به صورت داینامیک به فلش ارسال کنیم و همینطور فایل فلش را هم به صورت داینامیک لود کنیم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
</script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.menu = "false";
params.quality = "high";
params.allowfullscreen = "false";
var attributes = {};
swfobject.embedSWF("untitled.swf", "movieDIV", "800", "600", "9.0.0", false, flashvars, params, attributes);
</script>
</head>
<body>
<div id="movieDIV">
شما باید فلش پلیر نصب کنید
</div>
</body>
</html>
در این مثال یک تگ div با آی دی movieDIV ایجاد کرده ایم و توسط جاوا اسکریپت، فلش را داخل آن قرار میدهیم. کار بسیار ساده هست. اگر فلش پلیر موجود نباشد، متن داخل div نمایش داده خواهد شد: “شما باید فلش پلیر نصب کنید”
این مدل، یک مشکل دارد و اون هم وابستگی به جاوا اسکریپت هست. اگر بازدیدکننده سایت شما جاوا اسکریپت نداشته باشد، نمیتواند فلش شما را ببیند. بنابراین اگر در مورد این مساله حساس هستید، از قطعه کدی در بالاتر ذکر شد میتوانید استفاده کنید.
شما نیازی نیست این کدها رو خودتون بنویسید! تیم سازنده swfobject برای شما یک برنامه نوشته که شما فقط پارامترها را مشخص میکنید و اون خودش چه به صورت داینامیک و چه به صورت قطعه کد استاتیک، کد نهایی را به شما میدهد. از آنجا که دسترسی به گوگل کد، برای ما مقدور نیست، من این برنامه تولید کننده کد رو آپلود کردم که میتونید از لینک زیر دانلود کنید:
swfobject generator 1.2 html
نکته ای در مورد ExpressInstall
یکی از امکاناتی که توابع ExpressInstall در فلش به شما میدهد این است که ورژن فلش پلیر را در سیستم بازدیدکننده چک می کند و اگر ورژن قدیمی داشت به او پیغام داده می شود که باید ورژن جدیدتر را بگیرد.
در مجموعه swfobject یک فایل فلش با اکشن اسکریپت های مناسب طراحی شده است تا این کار را برای شما انجام دهد. پس اگر از این امکان میخواهید استفاده کنید، در هنگام ساختن کد مورد نظر از طریق swfobject generator تیک این گزینه را بزنید. همچنین نیاز به خود این فایل هم دارید که به همون دلیل گفته شده در بالا، من تمامی فایلهای مربوط به این پروژه در گوگل کد را آپلود کردم که میتونید از لینک زیر دانلود کنید:
swfobject version 2.2
جلوگیری از خطای Nested Object
در حالت استفاده از قطعه کد استاتیک، اگر به خطای زیر برخورد کردید:
Active Server Pages error 'ASP 0139'
Nested Object
An object tag cannot be placed inside another object tag.
فقط کافی هست که اولین تگ object را به صورت زیر تغییر دهید تا مشکل دیدن دو تگ object داخل هم از بین برود:
<%="<"%>object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="movie" value="movie.swf" />
.
.
.
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="movie.swf">
.
.
.
<!--<![endif]-->
شما باید فلش پلیر نصب کنید
<!--[if !IE]>-->
</object>
<!--<![endif]-->
*این مطالب از خودم میباشد! اگر درآن اشتباهی میبینید، ممنون میشم که اعلام کنید. استفاده از این مطلب آزاد هست و اگر دوست دارید با انصاف باشید، منبع رو هم ذکر کنید.