Flash8制作精彩高级动态网页图片菜单

菜单|动态|高级|网页

  本教程利用Flash8制作一个动态的高级图片菜单,你可以把该菜单放到你的网页中,也可以利用该实例中的一些技术创作自己喜欢的动画效果。

  本教程涉及知识:导入图片到舞台;如何把位图转变为影片剪辑元件;如何使用自由变换工具;如何使用Action Script等一些基础知识。

  先看动画效果及源文件(源文件解压密码:www.webjx.com

点击这里下载源文件

  制作步骤:

  1、创建Flash文档,然后按Ctrl+J修改文档属性:

  2、准备好动画中用到6幅图片,大小要一样啊!在这里我给大家提供一下!大家点这里下载压缩包吧!压缩包里是6幅大小相同的图片。点击这里下图片文件(解压密码为:www.webjx.com)

  3、选择“文件”>“导入”>“导入到库”,然后把6幅图片都选中一次都导入到库中。按Ctrl+L你可以看到导入到库中的6幅图片了!然后利用鼠标把库中6幅图片分别拖到舞台中来,排列好顺序,如下图所示:

  4、分别把它们转变为电影剪辑元件,选择第一个图片然后按F8转变为MC元件:

  5、当转变为MC的时候,保持该图片仍然被选中状态下,按Ctrl+F3打开属性面板,我们给影片剪辑命名为一个实例名:picture1_mc:

  6、下面我们开始制作该影片剪辑的动画效果,双击该影片剪辑元件,保持该图片仍然被选中状态下,按F8把图片转变为MC元件:

  在15帧处按F6插入关键帧。选择该元件,然后按Ctrl+F3打开属性面板,设置颜色高级效果:

  7、在1到15帧中间任何一帧处右击创建补间动画。在该图层上面创建一个新图层,命名为titlebar,在第10帧处按F6插入关键帧。然后使用矩形工具,颜色设置#CCCCCC,绘制一个小的矩形100x12px,放在图片的下面位置。保持选中状态下按F8转变为MC元件:

  8、然后在15帧处按F6,然后再回到第10帧,使用任意变形工具按住Alt调整到最小:

  9、仍然在第10帧的地方,选择工具选择该小矩形,然后按Ctrl+F3打开属性面板,设置属性如下:

  10、右击10到15帧任何地方,创建补间动铪。再次选择第15帧后按6次F6插入6个关键帧:

  11、然后分别选择第16帧,第18帧,第20帧,设置这些帧处的元件的颜色的Alpha为0%。在titlebar上面再创建一个图层,命名为aboutus。然后选择文本工具,设置如下:静态文本、MGI Archon字体字号10、颜色为#003333:

  注:如果字体不清楚可以看看我以前写的这篇文章:Flash动画中使字体清晰的三种方法。

  12、然后在第21帧处按F6插入关键帧左下部输入:ABOUT US。

  13、然后把该文字转变为MC元件,选择该文字,按F8键就可以了:

  14、然后在第25帧处按F6,然后回到第21帧处,选中该文字,然后调整属性面板中的Alpha为0%。之后在第21和25帧之间创建补间动画,在下面两个图层中的第25帧处都按F5插入帧:

  同样方法创建其它图片的影片剪辑。

  15、回到场景1中,双击layer 1改名为pictures。创建新图层,命名为InvisibleButton(看不到的按钮)。下面我们开始创建不可见的按钮。创建的方法非常简单,这里我就不给大家详细讲解了!在这里提供一个不可见按钮的源文件:点击这里下载源文件。(基本思路就是:创建按钮元件,就只使用按钮的点击帧,绘制一个区域,其他帧都空白。一个图层输入文字,然后上面图层使用该按钮正好盖上下面的图层内容)。

  然后使用选择工具选取该按钮后按F9打开动作面板,输入ActionScript代码:

  同样方法,再创建5个图层分别添加代码。最后在InvisibleButton层上面创建一个action script层,选择第1帧然后输入下面代码:

_root.picture1_mc.onEnterFrame = function() {
if (mouse_over_picture1_mc) {
_root.picture1_mc.nextFrame();
} else {
_root.picture1_mc.prevFrame();
}
};

  最后可以按Ctrl+Enter看看测试效果了!谢谢浏览!

时间: 2024-10-30 20:50:42

Flash8制作精彩高级动态网页图片菜单的相关文章

Flash8制作精彩的心灵运输动画效果

简单介绍:心灵运输是瞬间移动物体从一个时空点到另一个时空点的能力.心灵运输是从一个地方到另外的地方接近瞬间的精神传送,因而没有比心灵运输更快的其它形式的旅行了 本教程主要利用Flash 8实现心灵运输效果动画,这种动画实用性比较强,本教程中不涉及Action Script,希望大家喜欢. 效果如下: 点击这里下载源文件 步骤一:设置文件属性和引入自己喜欢的一张图片做背景使用,然后修改时间轴的图层1名称为background,然后导入图片: 建立一个图层命名为picture然后导入一幅图片,图片你

PS制作HDR高动态渲染图片效果

第一次上教程,可能说的不好希望大家见谅.首先要感谢那些网上奉献教程的人们,因为他们的奉献让我学到了很多, 所以我也想分享下自己的个人经验也希望大家以后多支持那些默默上教程的人.个人觉得这是对初学者来说比较简单的一种HDR的方法吧. 原图 效果图 1.首先复制图层ctrl+J,ctrl+L打开色阶,我个人比较懒所以自动色阶. 2.感觉海水有些偏黄不够蓝,打开可选颜色,如下调整: 3.盖印图层ctrl+shift+E 4.发现图片还是有些偏亮,云朵的效果不突出.我用的方法是通道调整,先进入通道界面.

企业网站建设为何选择动态网页设计

众所周知,网站主要是分静态网页和动态网页.静态网页是以HTML语言制作,而动态网页则以ASP或PHP或 JSP等语言制作.简而言之,静态网页就是以静态化的页面和代码组成,永远不会变.而动态网页则相反由程序编写页面构架,再从数据调用对应内容进行显示.那么,为何企业网站建设大多都选择动态网页呢? 1.动态页面以数据库为基础,降低工作量 动态网站采用了数据库技术,通过代码调用数据库来显示,依靠动态网站技术,也可以将网页内容转化为静态网页发布.动态网站采用静动结合的原则,适合采用动态网页的地方用动态网页

Flash8制作动态开门效果网页菜单

菜单|动态|网页 今天给大家讲解一个如何利用Flash制作动态网页菜单,如果好你就可以直接拿去用了!你也可以自己改进,改进好了别忘了去论坛告诉一声啊! 先看效果和源文件: 点击这里下载源文件 制作方法非常简单,在这里给大家简单的叙述一下!如果不明白就看源文件吧! 首先制作五个影片剪辑片段,说说方法,建立两个图层,下面这个图层绘制一个矩形,至于填充为什么颜色按你的喜好定就可以了!上面的图层输入要显示的文字.然后分别都在第15帧插入关键帧,下面的矩形稍微调整一下形状,上面的文字层稍微向上移动一点位置

高手进阶:用FrontPage2000制作动态网页

frontpage|动态|网页 DHTML是动态网页的意思,它其实并不是一个标准的术语.事实上没有一种技术叫作DHTML.DHTML是利用CSS(层叠样式表),JavaScript,HTML等技术而建立的能与访问者产生互动的网页.比如在动态网页里,当访问者单击了某一张图片后,这张图片会自动的移动,这就是DHTML效果.也就是说,当网页下载完毕后,它无需再与服务器连接就能产生变化了.FrontPage2000提供了一套容易制作动态网页的方法,你可以建立起属于自己特色的动态网页. 使用DHTML的基

动态网页巧制作

    每一个网页制作的初学者,都想让自己的网页更漂亮,看起来更专业.要想制作 出声形兼俱的动态网页,您需要了解动态网页制作技术,它是建立在动态HTML语言(即DHTL语言)之上的一 种新技术,它包括CSS文字效果,层技术,框架结构,push技术,JavaScript.Java和ASP等.(听不懂, 太专业了!),听不懂没关系,您只要清楚,要使用Dreamwave3.0以上制作网页,因为Dreamwave3.0内置 以上大部分技术,您所要做的仅仅是插入层,拖动,复制,粘贴.也就是把动态网页脚本插

动态网页制作技术JSP与ASP的比较

js|比较|动态|网页|js 总的来讲,JavaSever PagesTM(JSP)和 微软的Active Sever Pages(ASP)在技术方面有许多相似之处.两者都是为基于WEB应用实现动态交互网页制作提供的技术环境支持.同等程度上来讲,两者都能够为程序开发人员提供实现应用程序的编制与自带组件设计网页从逻辑上分离的技术.而且两者都能够替代CGI使网站建设与发展变的较为简单与快捷. 尽管JavaSever Pages 技术和微软的Active Sever Pages在许多方面都有相似的,但

JSP动态网页制作一定要知道的基础知识

js|动态|网页 一个普通的错误是把JSP当作简化的 Java.它不是,(事实上, JSP 是简化的 servlets .)程序员通常试着没有学习要求的支持技巧而 直接学习 JSP .JSP 是一个衔接技术,并且成功地连接你需要理解的另外的技术.如果你已经知道 Java , HTML 和 javascript,这意味着 JSP 将确实是简单的. 需要成为一个成功的 JSP 程序员可以参考这个时间表.请注意下列: *忽略你已经熟悉的步骤. *训练的时间只是代表学习好足够的基础时间,这样才能转移到下

动态网页制作技术ASP开发中的常见问题

动态|网页|问题 <table style="TABLE-LAYOUT: fixed" width="200" border="0" cellspacing="0" cellpadding="7" bgcolor="#f7f7f7"> <tr> <td style="LEFT: 0px; WIDTH: 100%; WORD-WRAP: break-