专注于互联网--专注于架构

最新标签
网站地图
文章索引
Rss订阅

首页 »Dreamweaver » dreamweaver做网页:Dreamweaver做动画 »正文

dreamweaver做网页:Dreamweaver做动画

来源: 发布时间:星期四, 2009年2月12日 浏览:93次 评论:0


 有什么好办法让每个进入自己网站WebSite球迷朋友也起激动下呢?本文将告诉你怎样使用Dreamweaver和几个简单步骤完成漂亮而富有创意动画效果

  效果描述:
  当浏览者进入你网站WebSite后会看到屏幕左侧有个足球右侧是个球门足球将以漂亮弧线直挂球门死角并如此循环
  听起来好象很复杂别担心有Macromedia 网页魔法师Dreamweaver MX在此切将迎刃而解制作中主要应用了表格、层以及时间线控制
  步骤1:
  首先你应当拥有两张图片个是足球个是球门在世界杯期间我实在不知道还有什么比这两样东西更容易找到了你可以在Fireworks中对找到图片素材做进步处理当然也可以自己直接在Fireworks中绘制值得注意是两张图片都请制作为GIF格式透明图像现在我们拥有了张足球图片Ball.g宽为30 高也是30;
\" _disibledevent=>

  另外还有张球门图片Door.g宽为60 高为80
\" _disibledevent=>

  步骤2:
  打开Dreamweaver MX新建个页面并以你喜欢名字保存点击工具栏上Insert Table图标按钮插入表格:
\" _disibledevent=>

  在弹出对话框中设置Rows为1(行)Columns为1(列)Width为778px
  点击OK按钮完成表格插入使用鼠标选择刚刚插入表格(鼠标在表格框线上单击)在下方Properties面板中设置表格位于页面正中即Align属性为Center
\" _disibledevent=>

  步骤3:
  在表格中任意位置单击鼠标在下面Properties面板中设置Align为Right
\" _disibledevent=>

  这是设置表格中单元格对齐属性在工具栏上选择Insert Image按钮在弹出对话框中选择图片Door.g效果如图所示
\" _disibledevent=>

  步骤4:
  在工具栏上选择Draw Layer按钮:
\" _disibledevent=>

  拖曳鼠标绘制个层在层中任意位置单击鼠标后在工具栏上选择Insert Image按钮在弹出对话框中选择图片Ball.g点击ok按钮
  步骤5:
  鼠标右键单击绘制在弹出菜单中选择Add Timelines
\" _disibledevent=>

  这样就添加了根时间线我们可以在下方Timelines面板中看到
\" _disibledevent=>

  步骤6:
  我们在Timeline上最后帧(第15帧)按下鼠标并拖拽将最后帧拖拽到第35帧
\" _disibledevent=>

  确认你现在选择了第35帧(如果没有请用鼠标单击第35帧)然后鼠标拖曳绘制好层向球门方向运动并放置在球门上
\" _disibledevent=>

  你可以看到条线段将Ball.g起始位置(第1帧位置)和终点位置(第35帧)连接起来这就是它运动轨迹
  步骤7:
  下面来为运动轨迹增加弧度鼠标右键单击第10帧在弹出菜单中选择Add Keyframe即可在这帧添加关键帧
\" _disibledevent=>

  确认你现在选择了第10帧然后鼠标拖曳绘制好层向球门防线运动我们可以看到运动轨迹将按照我们拖曳位置区别而改变将图片并放置在合适位置放置时候适当考虑球速度和轨迹
\" _disibledevent=>

  如果想更夸张或者更精确控制运动可以使用同样思路方法添加关键帧并拖曳移动位置即可
  步骤8:
  将Timeline面板AutoPlay选项和Loop选项后选择框选中启动Autopaly选项可以使浏览者进入页面就看到动画效果不需要其他事件激活Loop选项可以使动画循环播放


\" _disibledevent=>

  好了我们完成了动画效果制作你可以按下键盘F12键来检测动画效果做进修改漂亮弧线球进了!
0

相关文章

读者评论

发表评论

  • 昵称:
  • 内容: