نسخه بتای Adobe Flash Player ۱۰
بدون پاسخ
اردیبهشت ۲۶م, ۱۳۸۷
وبلاگ داتیس
طراحی برای برقراری ارتباط
شرکت Adobe امروز نسخه بتای پلاگین مرورگر Adobe Flash Player 10 (قبلا به نام Astro شناخته می شد) را معرفی کرد. این نسخه قابلیتهای جدیدی را به طراحان و برنامه نویسان وب می دهد تا بتوانند افکتهای ویژه و جلوه های سینمایی به کار خود بدهند.
این نسخه جدید پشتیبانی از افکتها و فیلترهایی که از بسته Pixel Border استفاده می کنند را می دهد. Adobe گفته که این بسته در نرم افزار Adobe After Effects CS3 به کار برده شده است، که امکان ایجاد افکتهای ویژه تصویری و متحرک را دارد.
"ما داریم کارهایی انجام می دهیم که آنچه در دنیای وب امکان دارد را تغییر می دهد." این جمله را آقای تام بارکلی مدیر ارشد بازاریابی بخش Flash Player گفته است. او اضافه کرد : "انجمن الان این قابلیت را دارد که قابلیتهایی را به کاربر اضافه کند که بتواند افکتهای ویژه ای را بوجود بیاورد که تا به حال در هیچ مرور گری دیده نشده است."
نسخه بتای این پلاگین همچنین دارای قابلیت های سه بعدی برای متحرک سازی، محیط متنی بسیار پیشرفته و واحد توسعه دهنده سخت افزاری پردازش گرافیکی می باشد.
او اضافه کرد : " پشتیبانی جدید از حالت سه بعدی واقعا برای ما سه بعدی است ! " این ویژگی به کاربر اجازه می دهد که آنچه را که در دنیای دو بعدی ایجاد کرده تغییر حالت بدهد و به دنیای سه بعدی وارد کند. این قابلیت درون این پلاگین است و برای همین بسیار سریع است و منجر به افزایش حجم فایل نمی شود.
این شرکت می گوید، نرخ بیت جدید برای Video Streaming بین Flash Player و نسخه های آتی Flash Media Server این امکان را می دهد که به صورت اتوماتیک کیفیت ویدئو بر حسب پهنای باند تغییر کند بدون آنکه لازم به بافر کردن دوباره (Rebuffer) باشد. بارکلی اضافه کرد : "این قابلیت این امکان را می دهد که کاربر بر حسب پهنای باند خود ویدئو را بدون وقفه و نیاز به بافر کردن ببیند. "
علاوه بر این، موتور متن جدید در Flash Player 10 به طراحان و برنامه نویسان این امکان را می دهد که کنترل بیشتری بر روی فونتها از جمله چرخش و Style ها داشته باشند. نسخه جدید حالتهای جدید متن از جمله Vertical و Bidirectional (عمودی و دو سمتی) را ایجاد کرده است که امکان ساخت Interactive E-Books و نشر آنلاین را برای زبانهای مختلف فراهم کرده است.
نسخه بتای Adobe Flash Player 10 بر روی سیستم عاملهای Vista، XP، 2000، Windows Server 2003 و Mac OSX و Linux قابل اجراست. Adobe Pixel Bender برای کاربرانی که بخواهند افکتهای خاصی را ایجاد کنند قابل دریافت است.
نسخه نهایی به نظر می رسد اواخر امسال آماده شود.
منبع : ComputerWorld.com
مهندس
یکی از مسائل مهمی که طراحان وب سایت با آن درگیر هستند، ساختن یک وب سایت است که Valid XHTML و Valid CSS و از روی قالبی که در Photoshop یا برنامه دیگری تهیه کرده اند باشد. در این آموزش من سعی می کنم نحوه تبدیل یک قالب که در Photoshop آماده شده است را به یک سایت آموزش دهم. توجه کنید که این آموزش در دو قسمت تهیه شده که در قسمت اول آماده سازی فایل HTML توضیح داده می شود و در قسمت دوم آموزش مربوط به دادن Style ها توسط CSS خواهد بود.
آماده کردن قالب
اگر به وب سایتها دقت کنید معمولا از یک ساختار ثابتی پیروی می کنند و در بعضی موارد المانهای کمتر و در بعضی موارد المانهای بیشتری دارند. شما هم بهتر است موقعی که در حال طراحی قالب سایت می باشید به این اجزا و نحوه قرار دادن آنها در کنار هم دقت کنید. اگر به تصویر زیر دقت کنید بیشتر متوجه منظور من می شوید :
در این تصویر که یک قالب ساده وب سایت است که در Photoshop تهیه شده، می بینید که سایت ها معمولا از یک Header، یک Navigation، یک قسمت برای Content، یک قسمت برای Sidebar و یک قسمت هم برای Site Info یا همان Footer در نظر گرفته می شود. ممکن است در بعضی موارد یک سایت دارای Sidebar دیگری باشد و .... ولی در کل می توان یک وب سایت را به اجزای ساده فوق تجزیه کرد. حال به شکل زیر دقت کنید :
در این شکل من قالب را به قسمتهایی که قبلا گفتم تجزیه کردم، حال به راحتی می توان این اجزا را در یک فایل HTML ایجاد کرد. (برای بزرگتر دیدن عکسها روی آنها کلیک کنید)
ایجاد فایل HTML
برای ساختن فایل HTML از بالای تصویر شروع می کنیم، اولین بخشی که دیده می شود قسمت Header سایت می باشد. پس به راحتی توسط DIV یک بخش برای Header ایجاد می کنیم و به آن Header ID می دهیم، همینطور برای سایر اجزا هم همین DIV ها را می سازیم :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website</title>
</head>
<body>
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="siteinfo"></div>
</body>
</html>
در ساخت یک وب سایت که هم Valid XHTML و هم Valid CSS باشد و هم از نظر SEO دارای موقعیت مناسبی باشد حتما باید همان مطالبی را که در قالب آورده اید به صورت HTML ایجاد کنید، مثلا من در قسمت Header یک نوشته درشت با عنوان Welcome to my Website ایجاد کردم، من این نوشته را درون تگ H1 قرار می دهم و در پایان وقتی خواستم به آن Style بدهم آنرا به شکل مورد نظر در قالب تبدیل می کنم. با این کار در پایان متوجه می شوید که سایت شما حتی بدون داشتن هیچ Style دارای خوانایی بسیار بالایی است، همه اجزا سر جای خودشان قرار دارند و از Semantic بودن هم بسیار مناسب می باشد، هر Screen Reader به راحتی می تواند سایت شما را بدون داشتن هیچ Style بخواند.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website</title>
</head>
<body>
<div id="header">
<h1 id="header_title"> Welcome to my Site </h1>
<h2 id="slogan"> A Webdesigner Portfolio </h2>
</div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="siteinfo"></div>
</body>
</html>
دادن ID بسیار مناسب می باشد چون بعدا موقع دادن CSS به راحتی می توانید به آنها رجوع کنید، فقط توجه داشته باشید هر ID می تواند یکبار استفاده شود. حال برای ایجاد Navigation می توانیم از تگهای ul و li استفاده کنیم، بدین صورت :
<div id="navigation">
<ul id="main_nav">
<li id="home"><a href="#" title="home">home</a></li>
<li id="about"><a href="#" title="about">about</a></li>
<li id="portfolio"><a href="#" title="portfolio">portfolio</a></li>
<li id="services"><a href="#" title="services">services</a></li>
<li id="contact"><a href="#" title="contact">contact</a></li>
</ul>
</div>کد فوق را درون Navigation DIV قرار دهید. حال نوبت Content DIV است، برای این قسمت هم مانند Header به یک تگ H1 نیاز داریم، علاوه بر آن چون این قسمت دارای پاراگراف است به تگ p هم نیاز خواهیم داشت :
<div id="content">
<h1 id="content_header"> What Can I Do For You ? </h1>
<p id="main_content"> Lorem ipsum vis eu hinc animal iuvaret, agam munere apeirian cum in. Erroribus suscipiantur ad vim. Eu qui euismod appetere scriptorem, duo in unum porro. Erant alterum cu qui, mea ut partiendo pertinacia, an sea viris alienum.
Ea duo viris intellegat, nam ut quando elaboraret. Populo omnium appetere et eos. Dicant docendi nominavi mel an, eam an probo consul. Eu has quem blandit maiestatis, soleat fierent ex ius.
Et cum facete propriae, mei eu aliquid urbanitas interesset. Nam ex docendi omittantur. Duo cetero laboramus ei, cu dolores accumsan persecuti ius. Liber vivendo vix id, mel ad omnis voluptatibus. Pri an accumsan appareat singulis, ne mel veri epicurei philosophia, te nam enim sonet dolorum.
Vis an sadipscing dissentiunt. Atqui omnium eos id, ei senserit erroribus sed. Est aeterno virtute id, harum aperiri graecis vel eu. Posse quidam nostrud mel no, habeo adipisci at mel. Has munere audire aperiam cu.
Ex vix cetero euripidis, ius tantas perfecto similique ne. Ea duo mundi detracto appareat, pri vocent menandri prodesset ex. Vide labores te vix. Illud aliquam eum ad. Mel in illud vidisse, nec tota iudicabit ad, pericula honestatis eum cu. Qui sonet utroque gloriatur id.</p>
</div>حال به سراغ Sidebar می رویم، در این قسمت ما می خواهیم دو تصویر از نمونه کارهایمان بگذاریم پس به تگ img نیاز داریم :
<div id="sidebar">
<h3 id="recent_work_title"> My Recent Works </h3>
<div class="portfolio_image"> <a href="#"><img src="" alt="Image 1" width="150" height="150"></a> </div>
<div class="portfolio_image"> <a href="#"><img src="" alt="Image 2" width="150" height="150"></a> </div>
</div>در این قسمت من از یک DIV دیگر استفاده کردم چون من دو تا تصویر دارم که دارای Style یکسان خواهند بود به این Div یک Class اضافه کردم و تگهای img را درون آنها قرار دادم.
و در نهایت قسمت Site Info که تقریبا مانند Navigation می باشد :
<div id="siteinfo">
<h4 id="siteinfo_title">
www.mysite.com
</h4>
<ul id="siteinfo_nav">
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="about">about</a></li>
<li><a href="#" title="portfolio">portfolio</a></li>
<li><a href="#" title="services">services</a></li>
<li><a href="#" title="contact">contact</a></li>
</ul>
</div>خب آماده کردن فایل HTML برای وب سایت تقریبا تمام شد، حال اگر این فایل را اجرا کنید شما یک فایل کاملا خوانا و Semantic و آماده برای دادن Style مشاهده می کنید. امیدوارم از این آموزش لذت برده باشید، در قسمت بعدی نحوه دادن Style را آموزش خواهم داد... به امید دیدار...
کل کد
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website</title>
</head>
<body>
<div id="header">
<h1 id="header_title"> Welcome to my Site </h1>
<h2 id="slogan"> A Webdesigner Portfolio </h2>
</div>
<div id="navigation">
<ul id="main_nav">
<li id="home"><a href="#" title="home">home</a></li>
<li id="about"><a href="#" title="about">about</a></li>
<li id="portfolio"><a href="#" title="portfolio">portfolio</a></li>
<li id="services"><a href="#" title="services">services</a></li>
<li id="contact"><a href="#" title="contact">contact</a></li>
</ul>
</div>
<div id="content">
<h1 id="content_header"> What Can I Do For You ? </h1>
<p id="main_content"> Lorem ipsum vis eu hinc animal iuvaret, agam munere apeirian cum in. Erroribus suscipiantur ad vim. Eu qui euismod appetere scriptorem, duo in unum porro. Erant alterum cu qui, mea ut partiendo pertinacia, an sea viris alienum.
Ea duo viris intellegat, nam ut quando elaboraret. Populo omnium appetere et eos. Dicant docendi nominavi mel an, eam an probo consul. Eu has quem blandit maiestatis, soleat fierent ex ius.
Et cum facete propriae, mei eu aliquid urbanitas interesset. Nam ex docendi omittantur. Duo cetero laboramus ei, cu dolores accumsan persecuti ius. Liber vivendo vix id, mel ad omnis voluptatibus. Pri an accumsan appareat singulis, ne mel veri epicurei philosophia, te nam enim sonet dolorum.
Vis an sadipscing dissentiunt. Atqui omnium eos id, ei senserit erroribus sed. Est aeterno virtute id, harum aperiri graecis vel eu. Posse quidam nostrud mel no, habeo adipisci at mel. Has munere audire aperiam cu.
Ex vix cetero euripidis, ius tantas perfecto similique ne. Ea duo mundi detracto appareat, pri vocent menandri prodesset ex. Vide labores te vix. Illud aliquam eum ad. Mel in illud vidisse, nec tota iudicabit ad, pericula honestatis eum cu. Qui sonet utroque gloriatur id.</p>
</div>
<div id="sidebar">
<h3 id="recent_work_title"> My Recent Works </h3>
<div class="portfolio_image"> <a href="#"><img src="" alt="Image 1" width="150" height="150"></a> </div>
<div class="portfolio_image"> <a href="#"><img src="" alt="Image 2" width="150" height="150"></a> </div>
</div>
<div id="siteinfo">
<h4 id="siteinfo_title">
www.mysite.com
</h4>
<ul id="siteinfo_nav">
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="about">about</a></li>
<li><a href="#" title="portfolio">portfolio</a></li>
<li><a href="#" title="services">services</a></li>
<li><a href="#" title="contact">contact</a></li>
</ul>
</div>
</body>
</html>
یکی از مهمترین ابزارها برای هر طراح و برنامه نویس سایت نرم افزار FTP است. نزم افزارهای خیلی زیادی برای این منظور وجود دارند و من چند تایی از این نرم افزارهارو تست کردم ولی این اواخر فکر کنم بهترین نرم افزار رو پیدا کردم.
FileZilla FTP Client واقعا نرم افزار خوبیه، کار کردن با اون خیلی راحته و قبل اطمینان هم هست، مهمتر از همه اینه که این نرم افزار رایگان عرضه میشه ! شما میتونید برای اکثر سیستم عاملها دانلود کنید.
چند Screen Shot از این برنامه :
قابلیتهای اصلی:
- راحتی کار کردن
- پشتیبانی از FTP, FTP over SSL/TLS (FTPS) and SSH File Transfer Protocol (SFTP)
- در اکثر سیستم عاملها کار می کنه : Windows, Linux, *BSD, OSX و ...
- در چند زبان وجود داره
- قابلیت ارسال فایلهای بزرگتر از 4 گیگابایت
- مدیریت سایت و لیست دریافت و ارسال قدرتمند
- پشتیبانی از Drag & Drop
- قابلیت تنظیم سرعت
- فیلتر کردن نام فایلها
- قابلیت تنظیم شبکه اتوماتیک
- ویرایش فایل به صورت Remote
- Keep-alive
- پشتبیانی از FTP-Proxy
شما می توانید از این لینک دانلود کنید، همینطور از سایت برنامه هم دیدن کنید.
یکی از مشتریان که توسط یکی از دوستانم بهم معرفی شده بود دو تا وب سایت برای طراحی سفارش داد و مشخصات این دو صفحه رو در دو صفحه فایل Word به من داد !! دیگه هیچ گونه مشخصاتی درباره این سایتها به من نداد و تنها چیزی که گفت این بود که سایت ساده باشه و سریع آماده بشه و زیاد هم هزینه نداشته باشه ! من هم در عرض 3 روز آماده کردم، نتیجه بد نشد ولی نباید از یه فایل word و 3 روز زمان انتظار بیشتری داشت.
سایت Khalil Sharaf
این سایت برای یک شرکت تجاری است که در دبی فعالیت می کنه. آدرس این سایت http://www.khalilsharaf.com هستش. در طراحی این سایت از Adobe Illustrator و Adobe Photoshop استفاده کردم و برای ساخت از HTML 4.01 Strict و CSS.
سایت Makcolour
این سایت هم مربوط به یک شرکت که در زمینه تولید رنگ و مواد اولیه فعالیت می کنه هستش، آدرس : http://www.makcolour.co.uk هست . در ساخت این سایت هم از Adobe Illustrator و Photoshop و HTML 4.01 Strict و CSS استفاده کردم.
در این آموزش من نحوه ساخت یک آیکان موبایل طی چند مرحله بسیار ساده را در Adobe Illustrator به شما آموزش می دهم. در نهایت از Photoshop برای ایجاد یک سری افکت های زیبا کننده هم استفاده خواهم کرد.شما از این تکنیکهای ساده می توانید برای ساخت هر آیکان دیگری هم استفاده کنید. امیدوارم برایتان مفید باشد.
شروع کار در Adobe Illustrator
ابتدا یک سند جدید در Illustrator ایجاد کنید. از Toolbar ابزار Rounded Rectangle Tool را انتخاب کنید و یک مستطیل به اندازه دلخواه رسم کنید. رنگ دلخواه را برای Fill Color انتخاب کنید و Stroke Color را None بگذارید. از Toolbar ابزار Mesh Tool را انتخاب کنید و یک رنگ که از رنگ مستطیل روشن تر باشد را انتخاب کنید و در گوشه سمت چپ بالای مستطیل یک بار کلیک کنید. شکل ما تا اینجا بدین شکل خواهد بود :
حال دوباره ابزار Rounded Rectangle Tool را انتخاب کنید رنگ آبی روشن را برای Fill Color انتخاب کنید و یک مستطیل کوچکتر درون مستطیل اولی رسم کنید، حال ابزار Mesh Tool را دوباره انتخاب کنید و با رنگ آبی روشن تر در قسمت بالا چپ یکبار کلیک کنید، شکل بدین صورت خواهد بود :
حال برای ساخت دکمه های موبایل باز هم از ابزار Rounded Rectangle Tool استفاده می کنیم و چند مستطیل کوچک در پایین مستطیل آبی رنگ ایجاد می کنیم :
نهایی کردن کار در Adobe Photoshop
حال Photoshop را اجرا کنید و یک فایل جدید ایجاد کنید (250x250 پیکسل). به این نکته دقت کنید :
من برای بهتر انجام دادن کار قسمتهای موبایل را به صورت جداگانه وارد Photoshop می کنم، بدین صورت که هم Illustrator و هم Photoshop باهم Open هستند. اگر از نسخه CS2 به بعد استفاده می کنید وقتی این لایه ها را به درون Photoshop می آورید به صورت Smart Object می شناسد که خیلی قابلیت مناسبی است.
برای این کار هنگامی که در Illustrator هستید هر لایه را به صورت جداگانه انتخاب کنید و آنرا Drag کنید و در Photoshop درون فایل جدیدی که ایجاد کردید Drop کنید. برای مثال لایه مستطیل طوسی رنگ را جدا، مستطیل آبی رنگ را جدا و دکمه ها را جدا درون Photoshop بیاورید، با این کار شما سه لایه Smart Object خواهید داشت.
حال لایه مستطیل طوسی رنگ را انتخاب کنید و با Right Click روی آن گزینه Blending Options را انتخاب کنید، به این لایه Inner Shadow و Gradient Overlay می دهیم، بدین صورت :
به مستطیل آبی رنگ هم Inner Shadow می دهیم :
به لایه دکمه ها Bevel and Emboss و Gradient Overlay می دهیم :
تمام شد ! این هم تصویر نهایی :
امیدوارم برایتان مفید واقع شده باشد... فایلها را برایتان قرار می دهم :
دریافت فایل 521Kb
یکی از گزینه های بسیار مفید در Adobe Illustrator امکان trace کردن یک تصویر می باشد. بدین معنی که شما می توانید یک تصویر Raster را در Illustrator قرار بدهید و توسط این ابزار آنرا به یک تصویر Vector تبدیل نمایید. اما این کار چگونه انجام می شود ؟
من برای توضیح از نسخه CS3 استفاده کرده ام.
ابتدا ین فایل جدید در Illustrator ایجاد کنید، سپس تصویر Raster مورد نظر خودتان را توسط گزینه Place از منوی File در فایل جدید قرار دهید. به محض Place کردن تصویر شما یک نوار در قسمت Option Bar بدین شکل اضافه می شود :
با کلیک کردن بر روی Live Trace تصویر شما به راحتی به Vector تبدیل می شود :
شما می توانید با کلیک کردن روی Tracing Option Dialog به گزینه های بیشتری برای کنترل کردن نحوه Trace شدن تصویر دسترسی داشته باشید :
گزینه های Tracing :
- Preset مشخص کننده نوع preset استفاده شده می باشد.
- Mode مشخص کننده حالت رنگ می باشد.
- Threshold مشخص کننده آستانه برای تولید تصویر سیاه و سفید می باشد، پیکسلهای روشن تر از این آستانه به سفید و تاریکتر به مشکی تبدیل می شوند، این گزینه فقط در حالت سیاه و سفید فعال است.
- Palette مشخص کننده نوع رنگ در trace می باشد، این گزینه فقط در حالت رنگی فعال است.
- Max Colors مشخص کننده بیشترین تعداد رنگ استفاده شده در حالت trace رنگی یا grayscale می باشد.
- Output to Swatches برای هر رنگ استفاده شده در Trace یک swatch اضافه می کند.
- Blur تصویر Trace را blur می کند.
- Resample تصویر Trace را به اندازه رزولوشن مورد نظر resample می کند.
- Fills قسمتهایی را به صورت Fill در می آورد.
- Strokes قسمتهایی را به صورت Stroke path در می آورد.
- Max Stroke Weight مشخص کننده بیشترین مقدار پهنا برای تبدیل شدن به stroke می باشد.
- Min Stroke Length مشخص کننده کمترین مقدار برای تبدیل شدن به Stroke می باشد.
- Path Fitting کنترل کننده فاصله بین شکل trace شده و شکل اصلی می باشد. مقادیر کمتر خطوط سفت تر و مقادیر بیشتر خطوط شل تری ایجاد می کنند.
- Minimum Area مشخص کننده کوچکترین مقدار در تصویر اصلی می باشد که باید trace شود.
- Corner Angle مشخص کننده مقدار دقت یک زاویه ها در تصویر trace شده می باشد.
- Raster مشخص کننده نحوه نمایش تصویر bitmap در تصویر trace شده است.
- Vector مشخص کننده نحوه نمایش تصویر trace شده است.
همانطور که قبلا گفته بودم Validate کردن یک سایت از کارهای بسیار مهمی است که هر طراح وب سایت باید به آن توجه داشته باشد و آنرا انجام دهد. اما مشکلی که معمولا برای Validate کردن ممکن است برای بسیاری بوجود آید هنگامی است که بخواهیم اجزای Flash را در سایت قرار دهیم. این اجزا به تنهایی Validate نخواهند شد و برای رفع این مشکل روشهای زیادی است، روشی که من پیشنهاد می کنم استفاده از UFO می باشد.
ابتدا فایل UFO را از این لینک دریافت کنید.
سپس سند HTML یا XHTML مورد نظر خود را ایجاد کنید. یک Placeholder برای فایل Flash در آن قرار دهید. سپس به آن یک Unique ID بدهید. مثل کد زیر :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UFO Test Document</title>
</head>
<body>
<div id="ufo">
<p>Place Flash Content Here</p>
</div>
</body>
</html>در مرحله بعد باید UFO Script را به صفحه خود لینک کنیم. کد زیر را در قسمت head اضافه کنید. توجه کنید که آدرس Script را درست داده باشید :
<script src="ufo.js" type="text/javascript"></script>سپس برای هر یک از اجزای Flash در سایت باید یک Object برایشان تعریف کنیم. به کد زیر دقت کنید :
<script type="text/javascript">
var FO = { movie:"swf/myMovie.swf", width:"300", height:"120",
majorversion:"6", build:"40" };
</script>در مرحله بعد برای هر یک از اجزای فلش باید UFO را فرا بخوانیم. کد زیر را به انتهای script که در آن Object را تعریف کردیم اضافه می کنیم :
UFO.create(FO, "ufo");دقت کنید که نام ID که در فایل به عنوان placeholder در نظر گرفته بودیم در این قسمت استفاده می شود.
کل کد :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UFO Test Document</title>
<script type="text/javascript" src="ufo.js"></script>
<script type="text/javascript">
var FO = { movie:"swf/myMovie.swf", width:"300", height:"120",
majorversion:"6", build:"40" };
UFO.create(FO, "ufo");
</script>
</head>
<body>
<div id="ufo">
<p>Place Flash Content Here</p>
</div>
</body>
</html>معمولا هنگام استفاده از این Script شما به همین پارامترهایی که در کد بالا دیدید نیاز خواهید داشت. پارامتر movie آدرس فایل swf را از شما می گیرد، پارامتر width و height اندازه فایل swf را از شما می گیرند، پارامتر majorversion و build نسخه فایل فلش را از شما می گیرد. پارامترهای دیگری هم به صورت optional وجود دارد که شما می توانید اطلاعات بیشتری را در سایت آن ببینید. البته این نکته را یاد آوری می کنم که این script دیگر از طرف سازندگانش ادامه پیدا نخواهد کرد، شما اگر دوست داشته باشید می توانید از script دیگری به نام SWFObject استفاده کنید، اما من استفاده از UFO را به دلیل سادگی و کارایی آن ترجیح می دهم.
ممکن است تا حالا با واژه Destructive Editing و Non-Destructive Editing در Photoshop برخورد کرده باشید. اما معنی این دو نوع ویرایش چیست ؟ کاربران حرفه ای Photoshop همیشه سعی می کنند که از ویرایش غیر تخریبی یا همان Non-Destructive Editing استفاده کنند. این نوع ویرایش بدین معنی است که شما در هر مرحله که بر روی فایل خود تغیراتی ایجاد می کنید، در هر زمانی می توانید این تغییرات را به حالت اول برگردانده یا آنرا تغییر دهند، دقت کنید که این روش با History Palette ارتباطی ندارد در این روش شما حتی بعد از ذخیره کردن و بستن فایل خود می توانید به راحتی آنرا به حالت اول خودش برگردانید، در صورتیکه اگر بخواهید از History استفاده کنید بعد از بستن فایل این امکان برای شما وجود ندارد.
به چه روشهایی می توان از ویرایش غیر تخریبی استفاده کرد ؟
یکی از قسمتهایی که هنگام ویرایش زیاد مرد استفاده قرار می گیرد قسمت Image Adjustment است، شما در صورتیکه از منوی Image و انتخاب Adjustment ها اقدام به ویرایش فایل خود کنید حالت تخریبی را انجام می دهید و انتخاب این روش زیاد مناسب نمی باشد. در صورتیکه شما به راحتی می توانید این ویرایشها را در حالت غیر تخریبی انجام دهید. برای انجام این کار در حالی که لایه مورد نظر را انتخاب کردید در Layer Palette و در قسمت پایینی آن می توانید به این Adjustment ها دسترسی داشته باشید. به شکل زیر دقت کنید :
همانطور که در این شکل میبینید، سه آیکان وجود دارد، برای استفاده کردن از Adjustment ها می توان لایه مورد نظر را انتخاب کرد و بر روی Create a new fill or adjustment layer کلیک کرد. بعد از این انتخاب می توانید در هر زمان با کلیک کردن بر روی لایه ایجاد شده تغییرات خود را ویرایش کنید یا آنرا به حالت اول برگردانید. اما توجه داشته باشید که این روش شامل همه امکانات منوی Adjustment نمی شود !
در این شکل شما دو آیکان دیگر می بینید، Add layer mask یکی دیگر از ابزارهای مهم در ویرایش غیر تخریبی است، بارها خواسته اید یک قسمت از تصویر را ببرید یا جدا کنید یا ... ممکن است توسط ابزار eraser یا selection ها این کار را کرده باشید اما بعد که خواسته باشید دوباره تصویر را ویرایش کنید به مشکل برخورده اید، توسط ساختن layer mask می توانید به راحتی قسمتی از تصویر را حذف کنید و در بعد هم به راحتی آنرا تغییر دهید.
همچنین توسط Add a layer style می توانید به راحتی به لایه مورد نظر افکت بدهید و در آینده آنرا به راحتی ویرایش و یا حذف کنید.
یکی دیگر از ویژگیهایی که از نسخه CS2 به Photoshop اضافه شده است، امکان تبدیل یک لایه به Smart Object است. این ویژگی بسیار قدرتمند این امکان را به شما می دهد که بعد از تبدیل لایه خود به Smart Object حتی بعد از transform , resize کردن تصویر bitmap خود کیفیت آن از بین نرود (البته بستگی به کیفیت فایل اصلی هم دارد). همچنین شما می توانید به راحتی یک فایل را از Illustrator به درون Photoshop بیاورید و بعد از هر ویرایش در Illustrator فایل شما به راحتی در Photoshop به روز می شود.
برای تبدیل یک لایه به Smart Object می توانید از منوی layer و انتخاب Smart Objects و انتخاب Convert to smart object استفاده کنید یا بر روی لایه مورد نظر راست کلیک کنید و Convert to smart object را انتخاب کنید. بعد از تبدیل شدن یک آیکان به thumbnail آن لایه اضافه می شود، به شکل زیر دقت کنید :
اگر بر روی این آیکان دوبار کلیک کنید می توانید این لایه را به راحتی ویرایش کنید، اگر از برنامه دیگری Import کرده باشید آن برنامه اجرا می شود و اگر درون Photoshop آنرا به smart object تبدیل کرده باشید یک فایل با پسوند psb باز می شود و بعد از ویرایش آن و ذخیره کردن آن و برگشت به فایل اصلی آن smart object به روز می شود.
در پایان همیشه به یاد داشته باشید که استفاده کردن از ویرایش غیر تخریبی ممکن است زمان کار شما را بالا ببرد اما همیشه این امکان را خواهید داشت که تغییرات خود را ویرایش و یا حذف کنید بدون اینکه فایل اصلی شما آسیب ببیند ! موفق باشید...
برای اینکه بتوانیم از صدا در Actionscript استفاده کنیم باید ابتدا توسط Linkage Properties و انتخاب گزینه Export for Actionscript آنرا برای استفاده آماده کنیم، به شکل زیر دقت کنید :
برای Identifier نام مناسبی انتخاب کنید چون در Actionscript به آن نیاز پیدا خواهیدکرد.
در مرحله بعدی باید یک Object از صدا بسازیم :
mySound = new Sound();سپس توسط نام Identifier که قبلا مشخص کرده بودیم را به این Object متصل می کنیم :
mySound.attachSound("test");توسط متد Start می توانیم فایل صوتی را اجرا کنیم، اگر پارامتر اول مشخص شود به همان اندازه از ابتدای فایل نادیده گرفته می شود (بر حسب ثانیه) و پارامتر دوم مشخص کننده تعداد دفعات تکرار می باشد.
mySound.start(0,99999);بعضی از متدهای Sound
- متد Stop اجرای صدا را متوقف می کند.
- متد Position محل توقف صدا را بر حسب میلی ثانیه نگه داری می کند.
- متد setVolume شدت صدا را تنظیم می کند (بین 0 تا 100)
- متد getVolume مقدار شدت صدا را بر می گرداند.
- متد setPan جهت انتقال صدا را به کانالهای چپ و راست مشخص می کند. (بین 100و100-)
- متد getPan موقعیت فعلی Pan را بر می گرداند.
- متد setTransform چهار پارامتر می گیرد، که باید به صورت یک obejct به آن داده شود.
- متد duration مدت زمان کل صدا را بر حسب میلی ثانیه بر می گرداند.
با عرض تبریک سال نو به همه دوستان،
سالی پر از شادی و موفقیت برای شما و خانواده محترمتان آرزو می کنم.
فرشاد
