| سایت نوسنده: www.majidonline.com | سطح مقاله : مقدماتي | نام مقاله: ساختن فیلم متنی با کدهای html | تاريخ : 15 شهریور 1385 | نويسنده : سایت majidonline.com | طبقه : طراحی وب چاپ این صفحه |
| 
|
ساختن فیلم متنی با کدهای html بلاخره فرصتی شد و تونستم که این آموزش رو هم آماده کنم و در اختیار شما دوستان عزیز قرار بدیم. در ابتدای کار شما برای ساخت فیلم هایی از نوع نوشتاری باید اون تيكه فیلم یا عکسی را که قصد تبدیل اون رو دارید فریم فریم کنید . یعنی مثلا با یک برنامه که کارش فریم فریم کردن فیلم است فیلم رو فریم فریم کنید و اون فریم های لازم رو به عکس تبدیل کنید . مثلا اگر بخواهید یک عکس متحرک رو فریم فریم کنید می تونید از نرم افزار فلش برای این کار استفاده کنید. به این ترتیب که اول اون فایل رو Import کنید بعد از منوی فایل گزینه Export Move رو اجرا کنید و بعد نوع Export رو از نوع JPEG Sequence قرار دهید و بعد در مسیر مورد نظر اون فایل رو Export کنید . حالا می بینید که فلش اون رو فریم فریم کرده و به صورت عکس عکس در اون مسیری که شما انتخاب کرده بودید تبدیل کرده. خوب حالا باید با استفاده از این برنامه (اين برنامه كاري ار آقاي ايمان ياري ميباشد) یا برنامه ای شبیه این اون عکس ها رو دونه به دونه به txt یا در اصل به Html تبدیل کنید. حالا یک فایل Html بسازید و تیکه کد زیر رو داخل اون قرار بدید : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>ascii-movie</TITLE><!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= --><!-- this time: raw --><!--- DHTML 4 --><!-- Method-5 Code -:- Layers and CSS --><!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= --><!-- Netscape 4.x -:- Explorer 4.x --><!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= --><!-- javascript-code - cjr - colin --><!-- dhtml-mechanics - miK - mic --><!-- timing-controls - Meph - marc --><!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= --><!-- Method-5 version 1.0a 14-04-1999 --><!-- updated version 1.123 31-03-2001 --><!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= --><!-- Ascii-Artwork - Mic Barendsz --><!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
<META content=Ascii-Animation name=Description>
<META content="Visual, Ascii-Art, Ascii-Animation, Ascii, Animation"
name=KeyWords>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css>
<!--
PRE { font-family:fixed,fixedsys,"Courier New",monaco,monospace;
color:#ff9090 }
-->
</STYLE>
<SCRIPT language=JavaScript type=text/javascript><!--// Method-5 animation script (compressed)
/***** initialize global film variables ******/
var max_pics=12; // <---- total number of pictures in film
var delay=80; // <---- delay after each frame
/***** initialize anim screen position (in pixels) *****/
var top=60; // <---- window position top
var left=8; // <---- window position left
var width=300; // <---- window width
var height=187; // <---- window height
/***** initialize anim control variables *****/
var posi=0; // <---- actual picture position (frame counter)
var prev=1; // <---- previous picture number
var run=true; // <---- boolean : true (play) or !true (pause)
/***** initialize style sheets ****/
document.write("<"+"style type='text/css'><"+"!-- ");
for (i=0;i<=max_pics;i++) document.write("#text"+i+" {position:absolute; left:"+left+"px; top:"+top+"px; width:"+width+"px; height:"+height+"px; z-index:"+i+"; visibility:hidden}");
document.write("--"+"><"+"/style>");
/******* browser detect ******/
with(navigator) {
Browser=appName;
Version=parseInt(appVersion.charAt(0));
} //document.write(Browser+" "+Version+" : ");
/******* browser config ******/
if (document.layers) {
var doc = 'document.';
var vis = '.visibility';
var bsr = "Ns4";
}
else
if (document.all) {
var doc = 'document.all.';
var vis = '.style.visibility';
var bsr = "Ie4";
}
else
if (document.getElementById) {
var doc = 'document.getElementById(\"';
var vis = '\").style.visibility';
var bsr = "Ns6";
}
else {
document.write("<"+"h2><"+"font color='#888888'>This animation requires a Mozilla 4 Browser minimum!<"+"/font><"+"/h2>");
}
/******* animation module ******/
function show() {
posi=posi+1;
if (posi>max_pics) posi=1;
eval(doc + 'text' + prev + vis + ' = "hidden"');
eval(doc + 'text' + posi + vis + ' = "visible"');
prev=posi;
if (run) setTimeout("show()",delay);
}
/******* pause & play button ******/
function stat() {
run=!run;
if (run) {document.F0.B0.value=" Pause "; show();}
else document.F0.B0.value=" Play ";
}
//--></SCRIPT>
<META content="MSHTML 6.00.2719.2200" name=GENERATOR></HEAD>
<BODY bgColor=#FFFFFF onload=document.F0.D0.value=delay;show();>
<CENTER>
<FORM name=F0>
<font size="1" face="Courier New, Courier, mono" color="#000000">
<INPUT style="FONT-FAMILY: 'Courier New'" onclick=stat(); type=button value="Stop" name=B0>
<INPUT style="FONT-FAMILY: 'Courier New'" onclick="document.F0.B0.value=' Play ';run=false;show();" type=button value="-->">
<INPUT name=D0 size=1>
</font>
</FORM>
</CENTER>
<font face="Courier New, Courier, mono" size="1" color="#000000">
<!-- frames -->
<!-- these pictures created by Mic Barendsz -->
<!-- each frame has the same number of lines -->
</font>
<DIV id=text1>
<PRE>
</PRE>
</DIV>
<DIV id=text2>
<PRE>
</PRE>
</DIV>
<DIV id=text3>
<PRE>
</PRE>
</DIV>
<DIV id=text4>
<PRE>
</PRE>
</DIV>
<DIV id=text5>
<PRE>
</PRE>
</DIV>
<DIV id=text6>
<PRE>
</PRE>
</DIV>
<DIV id=text7>
<PRE>
</PRE>
</DIV>
<DIV id=text8>
<PRE></PRE>
</DIV>
<DIV id=text9>
<PRE>
</PRE>
</DIV>
<DIV id=text10>
<PRE>
</PRE>
</DIV>
<DIV id=text11>
<PRE>
</PRE>
</DIV>
<DIV id=text12>
<PRE>
</PRE>
</DIV>
</BODY></HTML> |
البته باید بگم یک سری از خط های بالا اضافی است اما من به دلایل خاص (از جمله کپی رایت) اون ها رو پاک نکردم. در کد بالا متغیر های متعددی وجود دارد که من زیاد لازم نیست به توضیح آن ها بپردازم و شما می تونید خودتون متوجه بشید. اما یکی از اون ها که خیلی مهم است این است : var max_pics=3; // <---- total number of pictures in film در اینجا متغیر max_pics مقدار دهی شده است این مقداری (عدد) که شما در اینجا باید به این متغیر نسبت دهید همان تعداد فریمی است می خواهید از آن عکس یا فیلم به فیلم نوشتاری تبدیل کنید. بعد از این اگر به قسمت پایینی کد نگاه کنید به قسمت هایی می رسید که به DIV هایی تقسیم شده که به ترتیب به اسم های Text1 ,Text2 ,Text3 قرار گرفته اند (به این صورت : <DIV id=text1> ) . حالا شما باید به تعداد فریمی که می خواهید DIV بسازید مثلا اگر فیلم شما دارای 5 فریم است باید به این صورت باشد : <DIV id=text1>
<PRE>
Type text1
</PRE>
</DIV>
<DIV id=text2>
<PRE>
Type text2
</PRE>
</DIV>
<DIV id=text3>
<PRE>
Type text3
</PRE>
</DIV> <DIV id=text4>
<PRE>
Type text4
</PRE>
</DIV>
<DIV id=text5>
<PRE>
Type text5
</PRE>
</DIV> |
البته شما باید مقدار متغیر max_pics را نیر برابر 5 قرار بدهیم . و در نهایت در باید در آنجا هایی که نوشتم Type Text به ترتیب اون فایل های Html که ساختید (با برنامه ای در بالا معرفی کردم) را در آن قسمت قرار بدید. امیدورام تونسته باشم جوری توضیح داده باشم که متوجه شده باشید . البته اگه مقداری این آموزش گنگ هست باید بگم کاریش نمیشه کرد شما باید خودتون یه بار عملی انجام بدید تا دقیق متوجه بشین من چی می گم. | 
