[加入收藏]
[
教程购买
]
[服务指南]
首页
|
办公自动化
|
网页制作
|
平面设计
|
动画制作
|
数据库开发
|
程序设计
|
全部视频教程
应用视频:
Windows
|
Word2007
|
Excel2007
|
PowerPoint2007
|
Dreamweaver 8
|
Fireworks 8
|
Flash 8
|
Photoshop cs
|
CorelDraw 12
编程视频:
C语言视频教程
|
HTML
|
Div+Css布局
|
Javascript
|
Access数据库
|
Asp
|
Sql Server数据库
|
Asp.net
|
Flash AS
编程视频:
C语言视频教程
|
HTML
|
Div+Css布局
|
Javascript
|
Access数据库
|
Asp
|
Sql Server数据库
|
Asp.net2.0
|
Flash AS
应用视频:
Windows
|
Word2007
|
Excel2007
|
PowerPoint2007
|
Dreamweaver 8
|
Fireworks 8
|
Flash 8
|
Photoshop cs
|
CorelDraw 12
文字教程:
Windows教程
|
Word教程
|
Excel教程
|
PowerPoint教程
视频教程
:
Windows视频教程
|
Word2007视频教程
|
Excel2007视频教程
|
PPT2007视频教程
文字教程:
Dreamweaver教程
|
Fireworks教程
|
Flash教程
|
PhotoShop教程
|
HTML教程
|
Div+Css布局教程
视频教程:
Dreamweaver视频教程
|
Fireworks视频教程
|
Flash视频教程
|
PhotoShop视频教程
|
HTML视频教程
|
DIV+CSS视频教程
文字教程:
Fireworks教程
|
PhotoShop教程
|
CorelDraw教程
视频教程:
Fireworks 8视频教程
|
PhotoShop CS视频教程
|
CorelDraw12视频教程
文字教程:
Flash教程
|
Flash AS脚本教程
视频教程:
Flash 8视频教程
|
Flash AS视频教程
文字教程:
Access教程
|
sql server教程
视频教程:
Access数据库视频教程
|
Sql Server2005数据库视频教程
文字教程:
C语言教程
|
Javascript教程
|
Asp教程
|
Asp.Net网站开发教程
视频教程:
C语言视频教程
|
JavaScript视频教程
|
ASP视频教程
|
ASP.NET视频教程
|
网站制作视频教程
|
ASP动态网站制作视频教程
当前位置 >
文字教程
>
Fireworks教程
Tag:
切片
,
gif
,
动画
,
文字
,
图标
,
照片
,
网页
,
效果图
,
表情
,
按钮
,
工作
,
8.0
,
cs
,
视频教程
在Fireworks中实现复杂的图像交互
文章类别:
Fireworks
| 发表日期:2008-9-20 19:32:32
图像交互技术在网页制作当中被广泛的应用于按钮效果和图像展示当中。即当鼠标指向网页中的某一图像时,会触发另一图像的显示。下面就让我们来看一下具体的操作过程。
效果预览
点击这里在新窗口中预览。
启动FW后可新建一个如网页般大小的画布。然后用绘图工具随意画上三个矩形按钮,并在按钮上输入相关的文字内容。当然,你也可以使用各类工具绘制出更加美观的按钮。在此我在三个按钮上分别输入“手机”、“摄像机”和“随身听”的字样。然后把每个按钮的对象及文字选中后使用“修改—组合”命令,使这三个按钮成为三个各自独立的组合对象。接着可按网页制作时的需要,将这三个按钮进行排列对齐。
把这三个按钮全部选中,并在任意一个按钮上点击鼠标右键,然后从弹出菜单中选择“插入切片”项。这时会弹出一个提示窗口,可直接点击“多重”按钮。这样,就为这三个按钮建立了导出切片。如图01。
图01
点击“帧”面板右下角中的“添加帧”按钮,新建三个空白帧。如图02。
图02
然后在第2帧中绘制或导入一张与手机相关的图片,放置在合适的位置后,在该图片上点击鼠标右键,从弹出菜单中选择“插入切片”项。同样的,在第3和第4帧中也分别导入一张用于与“摄像机”和“随身听”按钮进行交互的图像,然后都为图像建立导出切片。如图03。
图03
点选“手机”按钮的切片,然后用鼠标左键按住该切片中间的圆形控制图示不放,拖拽鼠标到与其进行图像交换的切片上,这时在这两个切片之间会出现一条蓝色的链接曲线,如图04。
图04
松开鼠标后会立即弹出一个“交换图像”的设置窗口,在下拉菜单上选择与“手机”按钮切片进行交换的图像所在的帧。在这里我们选择“帧2”。如图05。
图05
用相同的方法继续为“摄像机”和“随身听”按钮在“交换图像”对话框中建立各自的图像切片链接。完成后我们就可以按F12键在浏览器中查看了。怎么样,效果还不错吧!如图06。
图06
最后通过“文件—导出”选项即可将制作的效果保存为网页格式了。以后随时随地都可以打开来欣赏一番。
上一篇:
FW教程移动虚线框
人气:2883
下一篇:
(初级教程)手绘韩式手提袋
人气:2934
Fireworks视频教程
Windows操作
[文]
Word教程
[文]
Excel教程
[文]
PowerPoint
[文]
Dreamweaver
[文]
Fireworks
[文]
Flash教程
[文]
PhotoShop
[文]
CorelDraw
[文]
C语言教程
[文]
Html教程
[文]
Div+Css布局
[文]
Javascript
[文]
ACCESS数据库
[文]
ASP教程
[文]
SQLServer
[文]
ASP.NET教程
[文]
FlashAS
[文]
视频教程列表
计算机基础入门及办公自动化:
Windows视频教程
Word视频教程
Excel视频教程
PPT视频教程
网页制作开发视频教程:
Dreamweaver视频教程
Fireworks视频教程
Flash视频教程
Photoshop视频教程
HTML视频教程
Div+Css布局视频教程
静态网站项目实例视频教程
平面广告设计视频教程
Fireworks视频教程
Photoshop视频教程
CorelDraw视频教程
初级程序设计及ASP动态网站开发
C语言视频教程
Javascript视频教程
Access数据库视频教程
Asp网站开发视频教程
Asp项目实例开发视频教程
Asp.net动态网站开发视频教程
Sql Server数据库视频教程
Asp.net视频教程
Flash 动画角本编程视频教程
Flash视频教程
Falsh MTV视频教程
文章教程搜索
输入您的搜索字词
google
本站
提交搜索表单
Fireworks推荐教程
.Fireworks绘制圣诞节新年Kitty猫
.Fireworks绘制圣诞老人贺卡桌面
.Fireworks 8视频教程(21视频教程
.Fireworks巧妙制作地球旋转动画
.Fireworks制作立体质感3D水晶字
.Firewoks打造液体金属表面特效
.Fireworks绘制精致打印机图标
.运用Fireworks“建立控点法”绘炫
.Fireworks图标绘制:精致水晶羽毛
.Fireworks制作波普网点画面特效
.用Fireworks滤镜轻松制作可爱Gi
.用Fireworks渐变工具做简单图片
.Fireworks不抠图实现标识反白特
.Fireworks绘制可爱的Q版电视机图
.Fireworks Eyecandy滤镜作虚化残
.首例为FWMX编写的命令集IATA
.Fireworks MX之旅:导入文字的再
.Fireworks MX的新特性
Fireworks热门教程
.Fireworks教程:如何绘制小老鼠图
.Fireworks教程:CS6官方简体中文
.Fireworks教程:如何绘制可爱水杯
.Fireworks教程:如何绘制可爱水杯
.Fireworks教程:如何制作一个水晶
.帮助客户消除创意的疑虑,踏踏实
.设计心得:让产品往更好的体验方
.Fireworks抠图方法实例汇总
.相似重复页对网站的影响和解决方
.Fireworks教程:绘制灯泡
.Fireworks CS3切片和优化功能
.了解Fireworks通道原理及快捷运
.Photoshop制作动画教程:美妙的留
.门户网站改版:网易首页2011新版
.互联网产品设计:显性内容决定社
.移动社交即时沟通工具Kik messe
.网站频道编辑转型PM的四个障碍
.社交网站的设计:让用户完善设计
.网站设计限制用户权限 新贵Path
.作为设计的利器 设计师的黄金分
.计师设计品质和设计价值参考:卡
.制作节日logo 敲开2011元旦LOGO
.20幅创意2011年日历
.2010 图标设计趋势
.浅议Wap网页设计中的锚点链接
.22个HTML5的初级技巧
.手机页面浏览可用性研究
.图片格式与设计2
.图片格式与设计2
.图片格式与设计
Word教程网
Excel教程网
Dreamweaver
教程网
Fireworks教程网
PPT教程网
FLASH教程网
PS教程网
HTML教程网
DIV CSS教程网
FLASH AS教程网
ACCESS教程网
SQL SERVER教程网
C语言教程网
JAVASCRIPT教程网
ASP教程网
ASP.NET教程网
CorelDraw教程网
关于我们
|
教程购买
|
广告刊登
|
网站地图
|
湖北继续教育网
|
QQ:2693987339(点击联系)购买教程光盘
地址:湖北省武汉市曹家湾32号501室 电话:027-86646545 15972130058
--
教程购买问题汇总
21视频教程网专业的网站开发视频教程学习网站
ICP备案号:
鄂ICP备14009716号-13
公安备案号:
42011102002974
看全部视频教程
购买方式/价格
:
咨询客服
tel:
15972130058