本实例教程是关于使用Flash制作毛笔题诗贺中秋动画,主要使用了椭圆、矩形和文字工具以及渐变填充,操作实用,适合初学者练习。祝全国的网友中秋快乐!  值此中秋佳节,让我们用Flash来做一个月圆之夜举笔题诗的动画吧。本教程主要使用了椭圆、矩形和文字工具以及渐变填充,操作实用,适合练习。先看下效果吧:  效果预览  制作步骤:  1、新建一个默认大小的Flash文档,用矩形工具画一个矩形用来作为夜空。 图1   2、选中矩形,在混色器面板中将填充设为从浅蓝到深蓝的渐变,类型为“线性”。图2  3、选中矩形,在对齐面板中按下“相对于舞台”按钮,再按“匹配高和宽”,最后按“垂直中齐”和“水平中齐”。这样矩形就铺满了整个画布。图3  4、新建一个图层,命名为“moon”,选择椭圆工具,按住Shift键画出一个正圆。图4  5、在混色器面板中将填充设为由黄到白色的渐变,类型为“放射状”,注意渐变条上黄色色块的位置。用填充变形工具调整渐变到如下大小,形成带着光晕的月亮。图5  6、画信纸。Ctrl F8新建一个元件,命名为“paper”,用矩形工具画一个白色的矩形。图6  7、在白色矩形内再画一个红色矩形框,无填充。

CSS内容: 复制代码代码如下: @charset "utf-8"; /* CSS Document */ /* author:JiYun_Lai date:2011/01/11 desc:纯CSS+Div 的标签 */ /*舌签鼠标样式*/ .tongue a:visited, a:active, a:link { color:#666666; text-decoration: none; } .tongue a:hover {color:#FF3399; text-decoration:blink; } /*主容器样式*/ /*200*300 px*/ .tongue_main{ width:198px; height:298px; font-size:12px; border-color:#FFFF00; border-style:solid; border-width:1px;} /*舌签容器样式*/ /*200*25 px*/ .tongue{ border-bottom-color:#FFFF33; border-bottom-style:solid; border-bottom-width:1px; height:24px; background:#BCA7B0; } /*主舌签样式 默认舌签样式*/ /*25 * 60 px */ .tongue_M_title{ width:55px; float:left; height:17px; background-color:#FFFFFF; margin:0px 2px 0px 0px ; padding:5px 3px 0px ;; border-bottom-color:#FFFFFF; border-bottom-style:solid; border-bottom-width:1px; font-weight:600;} /*副舌签样式*/ /*25 * 60 px */ .tongue_title{ width:55px; float:left; height:17px; background-color:#EFEFEF; margin:0px 2px 0px 0px ; padding:5px 3px 0px ;} /*舌签内容样式*/ /*198 * 273 px*/ .tongue_content{ background-color:#FFFFFF; width:180px; height:255px; float:left; padding:9px 9px; } .tongue_clear{ clear:both;} Html 内容: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <link rel="stylesheet" type="text/css" href="tongue.css" /> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS+Div 的标签</title> <script type="text/javascript" language="javascript"> { function change(id_M,id_O){ document.getElementById('tongue_'+id_M).className ="tongue_M_title"; document.getElementById('tongue_content_'+id_M).style.display="block"; var id_o_List =String(id_O).split(','); for (x in id_o_List){ document.getElementById('tongue_content_'+id_o_List[x]).style.display="none"; document.getElementById('tongue_'+id_o_List[x]).className ="tongue_title"; } } } </script> </head> <body> <div class="tongue_main"> <div class="tongue"> <a href="#" class="tongue_title" id="tongue_1" onmouseover="javascript:change('1','2,3');">新闻中心</a> <a href="#" class="tongue_M_title" id="tongue_2" onmouseover="javascript:change('2','1,3');">广东新闻</a> <a href="#" class="tongue_M_title" id="tongue_3" onmouseover="javascript:change('3','1,2');">深圳新闻</a> <div class="tongue_clear"></div> <div class="tongue_content" id="tongue_content_1"> 新闻中心</div> <div class="tongue_content" id="tongue_content_2" style="display:none"> 广东新闻</div> <div class="tongue_content" id="tongue_content_3" style="display:none"> 深圳新闻</div> </div> </div> </body> </html> 效果:

这是您将创建:步骤01255px的文件,创建255个。首先,打开网格(“视图”>“”网格“),并对齐到网格(视图>对齐到网格)。接下来,你需要一个网格每5px。转到编辑>首选项>指南>电网,在网格线进入细分中的每一个方块和1。您还可以打开“信息”面板(“窗口”>“信息)与形状的大小和位置的实时预览。不要忘记,以取代的​​计量单位从编辑>首选项>单位>总像素。铝这些选项将大大增加您的工作效率。步骤02让我们开始用矩形工具(M)。创建一个190 220px【来电形状,用任何颜色填充和删除中风。选择这个新鲜的形状和去影响>风格化>圆角。输入一个110px半径,单击OK,然后去影响>经>鱼眼镜头。在20%以上的折弯滑块拖动,单击“确定”,然后转到对象>展开外观。步骤03继续用椭圆工具(L),创建一个70 180px形状,并去影响>经>鱼眼镜头。折弯滑块拖动30%,点击OK,然后去到对象>展开外观。步骤04选择两个创建至今的形状和添加在后面(控制+控制+ B)的副本。关闭了这些新鲜副本的知名度,你会需要它们。选择剩下的,可见的形状,然后单击“从”路径查找器“面板上的”负接待按钮。resdulting形状填充R = 224,G = 20 B = 72。步骤05选择在上一步中创建的形状和去效果> 3D>凸出和斜角。输入如下图所示的数据,单击OK,然后去到对象>展开外观。步骤06让我们把重点放在“图层”面板。你应该找到一个简单的组。点击小箭头图标,直到找到剪贴路径(在下面的图片箭头所指),它们全部删除。现在,选择的第一个图所示的形状,单击“携手探路者面板按钮,并填写生成的路径与R = 131,G = 5 = 42。remainging形状填充R = 224,G = 20 B = 72。最后,你应该有四个形状,在图层面板,两个可见的和无形的两个。步骤07选择大的,可见的形状和外观面板。打开弹出菜单,并点击“添加新的填充。这将添加一个第二填补你的形状。选择它,并使用线性渐变,如下图所示。从梯度图像的黄色零表示不透明度百分比。这意味着你需要选择渐变滑块,降低其不透明度为0%。接下来,添加一个简单的形状中风,并从它的外观面板选择。它5pt宽,对齐内,设置它的颜色,在R = 255 G = 255 B = 255,并降低其不透明度为5%。最后,重新选择整个路径和TOT的影响>风格化>内发光。进入下图所示的数据,并单击“确定”。步骤08选择矩形工具(M),创建两个广场(50像素50),将它们放置在第一幅图像显示。顶部的形状和填充黑色与白色的底部形状。抓住直接选择工具(A)和专注于黑色的形状。选择两个,底部的锚点,去对象>路径>平均。检查然后单击“确定”。这会变成一个三角形的广场,在第二幅图像所示。移至底部平方米。同样,使用直接选择工具(A)选择上方的锚点,对象>路径>平均。检查然后单击“确定”。步骤09选择在上一步中的两个三角形,并去影响>模糊>高斯模糊。输入7px半径,单击OK,然后组这两个形状。选择小,“O”型,并在前面的一个副本(控制+控制+ F)。把这个复制到前面(按Shift +控制+]),并用白色填充它。选择与本集团一起去“透明度”面板(“窗口”>“透明度”)。打开弹出菜单,然后单击“设为不透明蒙版。最终您的插图应该像在第四图像。第10步转动大,呈椭圆形(第四步)回可见。与没有填充和添加0.75pt,黑色中风。对齐外,然后去对象>展开外观。在第二幅图像所示的线性渐变填充形状。第11步重新选择大的“O”形,并在前面的副本(控器+控制+ F),然后抢椭圆工具(L),创建125px的形状为190,并把它作为第二个图像显示。选择这个新的形状alonw和用新鲜的副本从探路者“面板相交”按钮上单击。在第四图像所示的线性渐变填充的形状和其不透明度降低到80%。第12步转小,椭圆形(第四步)回可见。与没有填充和添加1PT,黑色中风。对齐外,然后去对象>展开外观。在第二幅图像所示的线性渐变填充形状,降低其透明度为50%,并把它前面(SHIFT +控制+])。第13步禁用对齐网格“(视图>对齐到网格)。选择大“O”型,并在前面的两个副本(SHIFT +控制+])。选择顶部的副本,并击中一次向下箭头。重新选择的两个副本,并减去从探路者“面板前端按钮的点击。您将有两个薄形GRET一组。卸下底部的形状(由箭头指出的第三个图像),然后选择其余的形状。转到外观,删除中风,效果只保留一个填充。白色和降低其不透明度为50%。第14步重新选择大的“O”形,并在前面两个新副本(按Shift +控制+])。选择顶部的副本,并击中了一次向上箭头。重新选择的两个副本,并减去从探路者“面板前端按钮的点击。同样,你将GRET两个薄形一组。卸下顶部的形状(箭头所指),然后选择其余的形状。删除中风,效果,只保留一补。它的颜色设置在R = 120克= 5 B = 24。第15步选择椭圆工具,按一下您的画板.. 输入10在宽度框中的高度框和2.5然后单击确定。这将创建一个由10 2.5 PX形状。填写与R = 237 G = 166 B = 168,并把它作为在如下图所示。这个副本,并用白色填充,然后将其旋转的地方,如下图所示。第16步专注于在上一步中所取得的形状。选择在上一步的粉红色的形状,并去影响>模糊>高斯模糊。输入2.5px半径,单击“确定”,然后选择白色的形状,并去影响>模糊>高斯模糊。输入3px半径,然后单击确定。第17步最后,重新启用对齐网格(视图>对齐到网格),然后选择“椭圆工具(L)。创建25px形状90,填充与R = 71,G = 5 B = 42,然后将其发送到回(按Shift +控制+)和去影响>模糊>高斯模糊。输入5px半径,单击“确定”就大功告成了。

缺省情况下span的宽度设定无效 在html中如何设定span的宽度?这看上去是个很简单的问题,似乎用style中的width属性就可以。例如, 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Test Span</title> <style type="text/css"> span { background-color:#ffcc00; width:150px; } </style> </head> <body> fixed <span>width</span> span </body> </html> 通过试验以后发现,无效,无论是在Firefox还是IE中都无效。通过查阅CSS2标准中关于width的定义发现,原来CSS中的width属性并不总是有效的,如果对象是inline对象,width属性就会被忽略。Firefox和IE原来是遵循了标准才这样做的。修改span为block类型并设置float不是完美解决 在span的CSS中增加display属性,将span设置为block类型的Element,这样宽度的确有效了,不过也把前后文字隔在不同行里面。这样其实span就完全变成了div。 复制代码代码如下: span { background-color:#ffcc00; display:block; width:150px; } 很多人会建议再增加一个CSS属性float,这样的确在某种条件下能解决问题。比如我们的例子中,如果span前面没有文字,那的确是可行的。但是如果有了,前后文字就会连在一起,而span跑到了第二行。 复制代码代码如下: span { background-color:#ffcc00; display:block; float:left; width:150px; } button的情况 其实,在Html的各种Element中,的确有既是inline,又能够设定宽度的情况存在。例如下面代码就显示了button对象,就可以很好的在文字中间出现,并且设定宽度。 复制代码代码如下: <body> fixed <button style="width:150px;">width</button> button </body> 能不能让span象button那样显示呢?通过CSS2标准中display的定义和inline对象的解释,发现CSS2标准的制定者把所有的Element在是否属于inline上做了非此即彼的规定,要么是inline,要么是block,没有制定button那样既是inline,又可以象block那样设置宽度的属性值。更新的标准CSS 2.1再看更新的标准,在CSS2.1标准草案中display的定义中增加了一个叫inline-block的属性值,针对的恰好是我们面对的这种情形。那么再看看各种浏览器的对应情况。Firefox通过display的文档了解到,inline-block在未来的Firefox 3中会实现。通过Mozllia扩展属性参考了解到,在Firefox 3以前的版本,例如现在的Firefox 2中,可以用-moz-inline-box达到同样的效果。IE通过MSDN中的display文档了解到,inline-block已经实现。实际测试发现IE 6.0以后都没问题。完美的解决方案下面代码的CSS定义完美解决了span的宽度设置问题。由于浏览器通常对不支持的CSS属性采取忽略处理的态度,所以最好将display:inline -block行写在后面,这样在Firefox里面,如果到了未来的Firefox 3,这一行就能起作用,代码可以同时兼容各种版本。复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Test Span</title> <style type="text/css"> span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:

今天给大家带来Flash中MP3导入及同步歌词图文教程,教程非常不错,介绍的很详细,对于初学Flash的朋友很有帮助。推荐给脚本之家的朋友,一起来学习吧!  了解音乐的几种常见格式:  1、mp3(mpeg-1 audio layer 3): 能够以高音质、低采样率对数字音频文件进行压缩。换句话说,音频文件(主要是大型文件,比如WAV文件)能够在音质丢失很小的情况下(人耳根本无法察觉这种音质损失)把文件压缩到更小的程度。     2. wma(windows media audio):是微软在互联网音频、视频领域的力作。常常用于在线收听和广播的首选,wma格式是以减少数据流量但保持音质的方法来达到更高的压缩率目的,其压缩率一般可以达到1:18。     3. wav 也叫一种波形声音文件格式,是最早的数字音频格式,被Windows 平台及其应用程序广泛支持。采用44.1kHz 的采样频率,16 位量化位数,跟CD 一样,对存储空间需求太大不便于交流和传播。     属性(采样频率):     1、5KHZ:只适合于说话声音   2、11khz:相当于电话音质。是标准CD采样率的1/2,是最低的推荐品质   3、22khz:相当于FM广播的声音品质。相当于标准CD采样率的1/2,是供WEB播放的通用选择   4、44khz:理论上的CD音质界限。标准CD采样率     采样位数:   如:一段相同的音乐信息,16位声卡能把它分为64K,80K,96K,,,等精度单位进行处理,但这个数值越大,解析度就越高,声音就越真实。     当对采样频率、采样位数(音质)二因素质量越高时,同时音乐的体积也成正比表现出越大。    了解goldwave软件   类似于音乐编辑软件还有coolper2及其它。在接触的2款软件中,goldwave相当小巧,界面友好,当然最重要的是易上手性和操作性。  确定音乐被flash无法识别导入后,首先我们要考虑以下几个问题:     1、再次确认无法导入的mp3歌曲是我们需要编辑的文件。包括再次确定2点因素:音乐大小、音质   我们要知道即使是相同的歌曲体积大小不同,也会出现音质的等级不同。一支质量好、体积小的音乐对MV是很有益处的。     2、搜索网络音乐资源,在以上2点基础上再进行确定。并不是没有这样的可能:相等音质歌曲体积大小相差3倍左右,并可直接导入。     当然以上只是在处理音乐时的2点心得体会~它告诉我们遇到事情多想想办法解决,对于从事flash、或设计的成员来说,思维的活跃往往能带给我们更大的收获!不仅仅只是一个解决MP3的办法    下面我们打开Goldwave软件~来看看如何操作     音乐无法导入的问题主要是所导入MP3音乐与flash所要求格式、属性不符,那么我们在这儿通过修改音乐属性包括音层,HZ(赫兹)的改变。     01、打开goldwave软件。在界面找到“打开”或:文件“文件---打开”选中转换歌曲  02、解压音乐后,找开菜单栏---“文件”。导入选择文件“另存为”   当然如果需要对音乐段进行裁剪,可通过工具栏中进行选择,这里我们不再讨论。  03、在弹出菜单中,选择保存类型:MP3。打开属性菜单  04、选择各属性并修改     采样频率:22050HZ,已相当于标准CD采样率1/2。采样位数:64KPa,已接近最真实声音  05、检查体积大小、试听音质。主要是对编辑后的体积大小检查,及音质确认:体积是否满足需要,音乐是否清晰   那有人就想,我再设置高效果会更好!~没问题!可是要知道音乐效果好了,在flash中体积就大了。从flash减肥上来说不可取,音乐只是flash一部分。     当然你也可以保存更低的采样频率、采样位数,从而音乐体积更小~音质则根据每个人的需要量力而行:)     我们选择较好音质同时体积不大,这也是我们结合flash对音乐的要求。音乐1~2m以上、整体swf文件大小,对下载、播放是否流利或有影响,也是我们要考虑的。  06、回到flash软件,导入mp3,正常导入并检查库中元件   flash的声音属性设置。这儿让我感觉有点抠,每一个能减肥环节都不要放过,当然也是玩笑话了:)     07、打开库面板,选中元件鼠标右键,选择“导出设置”  08、选择“声音设置”--改“默认”为“MP3”。再来一次比特率、品质设置   09、再选择“输出”--声音设置,进行修改设置   查看swf文件已降至1.33m,当然还可以降到更低,16KPS时为800K,但这时音质无法保证~因此提倡合理、适当分配音乐质量及体积大小     下面我们再来制作歌词和音乐的同步~     歌词同步,更多用于swf中的字幕制作。先来看看歌词、音乐同步     01、点击音乐文件,鼠标右键选择“链接属性”,修改标识符“music”如下图   02、新建图层命名为“文本”   03、输入第一句歌词,打开属性面板并修改文本属性为“动态”,自变量为“x”   在第1帧处插入如下代码:复制代码代码如下:inc = 0; music = new Sound(); music.attachSound("music"); music.start();  执行导入库中的声音文件  04、新建图层2,命名“as”层,第一帧处插入以下代码:复制代码代码如下:stop(); this.onEnterFrame = function() { if (inc>10) { gotoAndStop(1); } labelTimeList = [ 5, 11.5, 16, 21.5, 26.5 ,31.5]; musictext = ["这样的空气让人心收不下", "风吹的树叶轻轻沙沙的响", "象你眼底跳动的迷人火花", "多少种快乐悲伤我们一起分享", "拥抱彼此灿烂的梦想"]; if (getTimer()>labelTimeList[inc]*1000) { x = musictext[inc]; inc == inc++; } }; this.onEnterFrame = function() { //自定义函数,当这个场景载入的时候执行自定义函数if (getTimer()>labelTimeList[inc]*1000) { //如果以用时间大于下载时间.则X变量的值为musictext[inc], inc变量加一后在返回值给incx = musictext[inc]; inc == inc++; } };labelTimeList=[5,11.5,16,21.5,26.5,31.5] //分别为歌词“起”的时间  05、Ctrl+Enter回车测试。  以上就是Flash中MP3导入及同步歌词图文教程,希望对大家有所帮助!

分类:网页制作

时间:2016-01-12 08:29:06