☆随F 教你如何制作代码音画☆

一曲醉心

 



初学者必看，高手们不要见笑。由于 相思随F 文化有限,语言表达能力不强，再加上时间问题，在这里简单介绍如何制作代码音画，希望对朋友们在学习上有所帮助。熟话说师傅领进门，修行在个人，随F 希望朋友们早日制作出自己的漂亮代码音画！ 如果朋友们在制作代码音画时，有什么地方不是很明白，也可以请朋友们留言。同时，请朋友们多提宝贵建议，相思随F 在此谢过！希望朋友们制作的代码音画比我好。  
  




下面是文字穿越代码 

 <DIV style="LEFT: 30px; WIDTH: 400px; POSITION: absolute; TOP: 0px; HEIGHT: 800px">
<DIV style="FILTER: shadow(color=#000093, strength=3)">
<DIV align=left><BR><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 18pt; COLOR: #ffffff; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_GB2312><B>写文字 </B></FONT><FONT size=+0></B></FONT></DIV></DIV>
<P style="MARGIN: 0px"></P></DIV>
<DIV align=left>

 

下面是添加动画的代码

不是黄钻也可以用flash的代码

 

<DIV style="Z-INDEX: 1; LEFT: 0px; WIDTH: 0px; POSITION: absolute; TOP: 0px">
<DIV align=center><EMBED align="center><br/>&#13;&#10;&#10;<EMBED" src=//open.qzone.qq.com/url_check?appid=99&amp;url=动画地址 width=870 height=600 type=application/x-shockwave-flash center="center" wmode="transparent" quality="high" invokeurls="false" allownetworking="internal" allowscriptaccess="never">
<P style="MARGIN: 0px"></P></DIV></DIV></DIV> 


    

  在打开写日志后，如果新版编辑器不好用，我们就点击旧版编辑器，
点击图片点击图片清空编辑器里的代码，把下面的
背景代码粘贴在里面

双用音画背景代码

<table style="BACKGROUND-IMAGE:url(在这里放闪图地址)" title="相思随F 情感音画空间欢迎您QQ1206921946" border="5" borderColor="Fuchsia" width="870" bgColor=" Blue " align="center" height="6000">
<TBODY><TR><TD></TD></TR></TBODY>
</table>
代码使用方法

这个背景代码你可以用彩色图片闪图  动态图片 来做音画的背景也可以用颜色代码来做背景颜色

1，    border="5" 边的宽度

 

2.       borderColor="Fuchsia" 边的颜色代码

 

3，    width="870" 背景的宽度

 

 4.       bgColor=" Blue "   背景的颜色代码

说明：取图片地址，找一张你喜欢的背景，右击图片在点击最下边的属性，看下图
图片 
  复制图片地址，记住从第一位字母开始向后拉蓝，一直到完全不再动，地址才是完全复制好了，把这里放闪图地址这7个字删掉，记住括号千万不要删掉，把取好的图片地址粘贴在里面。

 融图代码

<CENTER>

<img src="这里放图地址" style="FILTER: alpha(opacity=100,style=3)"width=800>

</CENTER>

融图代码带定位的

<DIV style="LEFT: 0px; POSITION: absolute; TOP: 200px">

<CENTER><STRONG><IMG style="BACKGROUND: none transparent scroll repeat 0% 0%; FILTER: alpha(opacity=200,style=3); WIDTH: 870px; HEIGHT: 700px" alt= 相思随F QQ 1206921946 src="图片地址"> </STRONG></CENTER></DIV>
说明：1.粉色LEFT:0px是调整图片在日志里的左右位置，蓝色TOP:0px是图片在日志里的上下位置，绿色 WIDTH:870px是图片的宽度，蓝色HEIGHT:700px是图片的高度，红色图片地址一定要取图片地址，直接粘贴图片是不可以的，如果想在同一位置加两张图片，宽度可调的小些。

 做完背景之后如何放融图代码，列如：在日志里随便打一个（我）字作为记号，再点高级、把融图代码复制粘贴在我字上，在取图片地址复制粘贴在这里放图地址上就可以了。

图片做好之后，我们开始添加文字。

定位文字代码：
 <div style="POSITION:absolute;WIDTH:410px;HEIGHT:746px;TOP:400px;LEFT:50px"><P style="MARGIN:0px"><FONT color="#ffcc00" size="7" face="楷体_GB2312"><STRONG><FONT size="4">&nbsp;&nbsp;&nbsp;<FONT style="FILTER:glow(color=#000093,strength=3);WIDTH:346px;DISPLAY:inline-block;HEIGHT:768px;COLOR:rgb(255,255,0)" glowcolor="#000000">要写的字 </FONT></FONT></STRONG></FONT></p>

</div>

说明

LEFT:50px是在日志的左右位置。

TOP:400px是在日志的上下位置。

WIDTH:410px是在日志的宽窄位置。

注：添加文字和融图方法一样在这里就不多说了。 

动画羽化代码

<P>&nbsp;</P>

<P align=center><EMBED pluginspage=  http://www.macromedia.com/go/getflashplayer src=动画地址 width=800 height=300 type=application/x- shockwave-flash quality="high" wmode="opaque"></P>

不是黄钻也可以用flash的代码 
<DIV style="Z-INDEX: 1; LEFT: 0px; WIDTH: 0px; POSITION: absolute; TOP: 200px">
<DIV align=center><EMBED align="center><br/>&#13;&#10;&#10;<EMBED" src=//open.qzone.qq.com/url_check?appid=99&amp;url=动画地址 width=870 height=400 type=application/x-shockwave-flash center="center" wmode="transparent" quality="high" invokeurls="false" allownetworking="internal" allowscriptaccess="never">
<P style="MARGIN: 0px"></P></DIV></DIV></DIV>

关于定位flash的问题：

很多朋友喜欢大图音画上面的flash，在大图上面插入flash，可以使得音画栩栩如生，美丽动人。但是很多朋友不知道怎样定位它。怎样计算。下面我谈谈我的一些做法，欢迎朋友们参考。

比如定位flash，我们想布满和日志宽度一样宽，可以把宽度参数改成870.left=0.如果left=100，我们可以把870改成970.如果left=200,那么就把870改成1070.说明白了就是970-100=870,1070-200=870.因为我们的日志宽度是870.

如果高度不够，可以修改高度参数。高度参数的计算是这样的。比如我的第一幅flash高度是1000，想让第二幅的高度和第一幅一样，那么第二幅也修改成为1000.以此类推。

如果不想让第一幅与第二幅上下重合，又有连贯性。可以让第一幅top与第二幅top相距和flash的高度一致。比如我的flash高度是1000，第一幅top=30，那么第二幅top就是1030，第三幅就是2030.第四幅就是3030.也就是下一幅与上一幅相距1000.

所有的步骤完成以后，我们加音乐。在高级状态下我们点击图片
图片 

我们选择歌曲时可以试听一下，可以的话我们在点击选择，然后再自动播放本日志内的音乐内打勾，最后点击确定，添加音乐完成。预览全篇日志没有问题我们就可以发表日志了。

下面是我搜集的几个不错的代码：

单张图片双向滚动代码

 

<div style="POSITION:absolute;TOP:-100px;LEFT:0px">
<div style="FILTER:flipH;WIDTH:1750px"><MARQUEE>

<IMG style="FILTER:alpha(opacity=400,style=3);WIDTH:670px;BACKGROUND:none transparent scroll

repeat 0% 0%;background-color:transparent" border="0" alt="向右图片" src=""图片地址"> </MARQUEE></div><div style="POSITION:absolute;

WIDTH:870px;HEIGHT:670px;TOP:0px;LEFT:5px"><MARQUEE>
<div style="WRITING-MODE:lr-tb" align="center">

<P style="MARGIN:0.7em" opacity="100,style=3);" repeat="repeat" scroll="scroll"

transparent="transparent" none="none" width:="width:"

background:="background:" alt=" "><IMG style="FILTER:

alpha(opacity=100,style=3);WIDTH:670px;BACKGROUND:none

transparent scroll repeat 0% 0%;background-color:transparent" alt="向左图片" src="图片地址"> </p>
</div></MARQUEE></div></div>
 

 

单张图片向中合拢代码 

 

<div style="POSITION:absolute;TOP:0px;LEFT:0px">
<table width="890" align="center"><TBODY><TR><TD style="FILTER:flipH" width="0"><MARQUEE>
<table width="0" align="center"><TBODY><TR><TD><P align="center"></p>

<table align="center"><TBODY><TR><TD>

<IMG style="BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent"

src="图片地址" idx="右"> </TD></TR></TBODY><P></p>
</TD></TR></TBODY></TD></TR></TBODY></TD></TR></TBODY>

<div style="POSITION:absolute;TOP:450px;LEFT:0px">
</div></table></TD></TR></TBODY></table>
</MARQUEE></TD><TD width="0"><MARQUEE>
<table width="0" align="center"><TBODY><TR><TD><P align="center"></p>

<table align="center"><TBODY><TR><TD>

<IMG style="BACKGROUND:none transparent scroll repeat 0% 0%;background-color:transparent"

src="图片地址" idx="左"> </TD></TR></TBODY><div>
</div><div></div></TD></TR></TBODY></TD></TR></TBODY>
</table></TD></TR></TBODY></table></MARQUEE><div>
</div><div></div><div></div><div></div><div></div><div></div>
<CENTER></CENTER><CENTER></CENTER><div></div><div></div

图片从中间向两边分开代码

<div style="LEFT: 横坐标px; POSITION: absolute; TOP: 纵坐标px">
<div style="FILTER: flipH; WIDTH: 效果显示宽度px">
<MARQUEE>
<table title=http://1206921946.qzone.qq.com/ style="FILTER: alpha(opacity=图片高度,style=2); BACKGROUND-IMAGE: url(图片地址)" borderColor=#cccccc height=图片高度 cellSpacing=0 cellPadding=0 width=图片宽度 align=center bgColor=#000000 border=0><TR><TD></TD></TR>
</table>
</MARQUEE></div>
</div>

图片面对面移动代码

 

<DIV style="LEFT: 横坐标px; POSITION: absolute; TOP: 纵坐标px">
<MARQUEE>
<DIV style="FILTER: flipH; WIDTH: 870px">
<TABLE style="FILTER: alpha(opacity=100,style=3); BACKGROUND-IMAGE: url(图片地址)" height=图片高度 width=图片宽度 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></DIV></MARQUEE>
<DIV></DIV>
<DIV style="LEFT: 0px; POSITION: absolute; TOP: 0px">
<DIV style="FILTER: flipH; WIDTH: 870px">
<MARQUEE>
<DIV style="FILTER: flipH; WIDTH: 870px">
<TABLE style="FILTER: alpha(opacity=100,style=3); BACKGROUND-IMAGE: url(图片地址)" height=图片高度 width=图片宽度 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></DIV>
<DIV></DIV></MARQUEE></DIV>

让文字在日志里滚动代码

 

<marquee>这里写你要写的字</marquee>

 

点击加好友代码

<a href=" http://wp.qq.com/email/stop/email_stop.html?qq=1206921946" target="_blank"><font color="#ff0000" face="隶书_gb2312"><b><font size="5.5">★点此加 相思随F 为好友★&nbsp;</font></b></font>&nbsp;</a><br/>

</div>

 点击进入空间代码 

<P><A href="http://1206921946.qzone.qq.com/" target=_blank><FONT style="LINE-HEIGHT: 1.3em" size=5><FONT style="LINE-HEIGHT: 1.3em" face=华文彩云><FONT style="LINE-HEIGHT: 1.3em" color=#ff0000>★点击进入 相思随F 的情感音画空间★</FONT></FONT></FONT></A></P>

<P>&nbsp;</P>

隐藏腾讯播放器的代码
 图片

<div>

<div style="POSITION: absolute; TOP: 0px; LEFT: -1000px"> 

 <DIV style="OVERFLOW: scroll; WIDTH: 21px; HEIGHT: 0px"> 

 

 

颜色代码表
#000000#2F0000#600030#460046#28004D
#272727#4D0000#820041#5E005E#3A006F
#3C3C3C#600000#9F0050#750075#4B0091
#4F4F4F#750000#BF0060#930093#5B00AE
#5B5B5B#930000#D9006C#AE00AE#6F00D2
#6C6C6C#AE0000#F00078#D200D2#8600FF
#7B7B7B#CE0000#FF0080#E800E8#921AFF
#8E8E8E#EA0000#FF359A#FF00FF#9F35FF
#9D9D9D#FF0000#FF60AF#FF44FF#B15BFF
#ADADAD#FF2D2D#FF79BC#FF77FF#BE77FF
#BEBEBE#FF5151#FF95CA#FF8EFF#CA8EFF
#d0d0d0#ff7575#ffaad5#ffa6ff#d3a4ff
#E0E0E0#FF9797#FFC1E0#FFBFFF#DCB5FF
#F0F0F0#FFB5B5#FFD9EC#FFD0FF#E6CAFF
#FCFCFC#FFD2D2#FFECF5#FFE6FF#F1E1FF
#FFFFFF#FFECEC#FFF7FB#FFF7FF#FAF4FF
#000079#000079#003E3E#006030#006000
#000093#003D79#005757#01814A#007500
#0000C6#004B97#007979#019858#009100
#0000C6#005AB5#009393#01B468#00A600
#0000E3#0066CC#00AEAE#02C874#00BB00
#2828FF#0072E3#00CACA#02DF82#00DB00
#4A4AFF#0080FF#00E3E3#02F78E#00EC00
#6A6AFF#2894FF#00FFFF#1AFD9C#28FF28
#7D7DFF#46A3FF#4DFFFF#4EFEB3#53FF53
#9393FF#66B3FF#80FFFF#7AFEC6#79FF79
#AAAAFF#84C1FF#A6FFFF#96FED1#93FF93
#B9B9FF#97CBFF#BBFFFF#ADFEDC#A6FFA6
#CECEFF#ACD6FF#CAFFFF#C1FFE4#BBFFBB
#DDDDFF#C4E1FF#D9FFFF#D7FFEE#CEFFCE
#ECECFF#D2E9FF#ECFFFF#E8FFF5#DFFFDF
#FBFBFF#ECF5FF#FDFFFF#FBFFFD#F0FFF0
#467500#424200#5B4B00#844200#642100
#548C00#5B5B00#796400#9F5000#842B00
#64A600#737300#977C00#BB5E00#A23400
#73BF00#8C8C00#AE8F00#D26900#BB3D00
#82D900#A6A600#C6A300#EA7500#D94600
#8CEA00#C4C400#D9B300#FF8000#F75000
#9AFF02#E1E100#EAC100#FF9224#FF5809
#A8FF24#F9F900#FFD306#FFA042#FF8040
#B7FF4A#FFFF37#FFDC35#FFAF60#FF8F59
#C2FF68#FFFF6F#FFE153#FFBB77#FF9D6F
#CCFF80#FFFF93#FFE66F#FFC78E#FFAD86
#D3FF93#FFFFAA#FFED97#FFD1A4#FFBD9D
#DEFFAC#FFFFB9#FFF0AC#FFDCB9#FFCBB3
#E8FFC4#FFFFCE#FFF4C1#FFE4CA#FFDAC8
#EFFFD7#FFFFDF#FFF8D7#FFEEDD#FFE6D9
#F5FFE8#FFFFF4#FFFCEC#FFFAF4#FFF3EE
#613030#616130#336666#484891#6C3365
#743A3A#707038#3D7878#5151A2#7E3D76
#804040#808040#408080#5A5AAD#8F4586
#984B4B#949449#4F9D9D#7373B9#9F4D95
#AD5A5A#A5A552#5CADAD#8080C0#AE57A4
#B87070#AFAF61#6FB7B7#9999CC#B766AD
#C48888#B9B973#81C0C0#A6A6D2#C07AB8
#CF9E9E#C2C287#95CACA#B8B8DC#CA8EC2
#D9B3B3#CDCD9A#A3D1D1#C7C7E2#D2A2CC
#E1C4C4#D6D6AD#B3D9D9#D8D8EB#DAB1D5
#EBD6D6#DEDEBE#C4E1E1#E6E6F2#E2C2DE
#F2E6E6#E8E8D0#D1E9E9#F3F3FA#EBD3E8




 

 





☆随F 教你如何制作代码音画☆


文章评论

似 水 驕 陽

じ☆ ↘純潔的友情[url=http://piccache2.soso.com/face/_15855102722405729250][img,80,131]http://piccache2.soso.com/face/_15855102722405729250[/img][/url]永遠用心珍藏 ..じ☆ ↘

似 水 驕 陽

じ☆ ↘純潔的友情[url=http://piccache2.soso.com/face/_15855102722405729250][img,80,131]http://piccache2.soso.com/face/_15855102722405729250[/img][/url]永遠用心珍藏 ..じ☆ ↘

似 水 驕 陽

じ☆ ↘純潔的友情[url=http://piccache2.soso.com/face/_15855102722405729250][img,80,131]http://piccache2.soso.com/face/_15855102722405729250[/img][/url]永遠用心珍藏 ..じ☆ ↘

温馨的月光【忙留评关闭】

[url=http://soso7.gtimg.cn/sosopic/0/13132429236067521577/640][img]http://soso7.gtimg.cn/sosopic/0/13132429236067521577/640?pt=3&ek=1&kp=1&sce=0-12-12[/img][/url]

温馨的月光【忙留评关闭】

[url=http://soso7.gtimg.cn/sosopic/0/13132429236067521577/640][img]http://soso7.gtimg.cn/sosopic/0/13132429236067521577/640?pt=3&ek=1&kp=1&sce=0-12-12[/img][/url]

似 水 驕 陽

珍藏那份美好 [url=http://piccache1.soso.com/face/_5453128989179005509][img,150,127]http://piccache1.soso.com/face/_5453128989179005509[/img][/url]愿祝福和快乐-----------永远伴随着您----------

我心飞扬♀{淡网}

轻轻的问候，带来我真切的关怀 简短的文字，捎去我真切的问候； 浓浓的友情，传递我诚挚的祝愿； 深深地祝福，送上最美好的心愿： 祝友天天开心快乐! 幸福平安!