【空间攻略】FLASH制作幸运转盘,惊喜竟在偶然间 (12/815)

< 上一篇下一篇 >
本帖地址: 复制地址

修改 回帖 引用 楼主: 点滴

用户形象图片

去年在浏览各大酷站的时候,幸运的看到了[D2U]的作品,他们的作品有着很强的视觉效果,正是这种视觉效果吸引了我,让我留连忘返,并一一看了他们的作品,看到其中一个作品中间有一个转盘,而且能用鼠标控制,当时我就想占为己有嘞,可是他们的作品都加过密,无法获得AS源码。这事就这样过去了。直到上一次空间中用了一种效果——鼠标控制图片滚动的方向,前几天在网上看数码PS作品时看见一圆形的东西,就想起了那个转盘的效果,我就在网上找相关的资料,找了很久很久,都是一些无关痛痒不着边际的介绍,就在要放弃的时候看了一篇只有AS代码的文章,仔细看了后,发现代码没有提到转运,只是提到用鼠标滑轮控制物体坐标,不过也好里面提到了鼠标滑轮。在FLASH中测试的时候,修改了这段代码,用了旋转函数,这个圆可以用鼠标滑轮转动了,但是鼠标没有滑动滑轮时,是静止不动的,这时就能用到鼠标控制图片滚动的方向这个效果了,两个结合起来,就能使转盘自己转动并能受鼠标滑轮的控制,这次转盘间接性算是挪用了[D2U]的。 看见他们的作品并能做出梦寐以求的最终效果即幸运又惊喜。

+-----------------------------------------------------------------------------------------------------

+-----------------------------------------------------------------------------------------------------
转盘样式绘制:为空间打造墨迹写字和制作个性loading样式
千纸鹤绘制:Qzone自定义彰显个性的独特Style
自动转盘:空间主页图片滚动鼠标控制,个性味十足

上面这三个文章是介绍这次用到的方法,要做出这次空间的效果,先学会这三篇文章中的方法
+--------------------------------------------------------------------------------------

效果地址:http://www.yddi.net/qzone/090319/air.swf(本来该命名为cir的一不小心按错了)


 
上面FLASH效果文件,我把按钮搞用功能取消了,在此日志不会提调用的功能,只提转盘由鼠标滑轮控制的功能。

顺便提一下我是用FLASH软件制作的此效果,总有一些人不知道用的什么软件

先在FLASH中绘制一个如效果Flash上的转盘:新建影片命名为[cir]用椭圆工具【O】在绘制时按住Shift键绘制,这样绘制出来的圆才是等比例的圆,如果绘制圆的时候没有按住Shift键,没有关系,可以在属性面板中设置圆的高和宽相同就行了,大小随意,这个大小是转盘的大小根据自己需要设定,如图所示。


绘制出一圆后,新建图层,用同样的操作再绘制一个圆比刚才画的圆稍小一些,颜色不要一样,然后剪切这个小圆粘贴到大图这个图层(粘贴到当前位置),最后删掉小圆(这样大圆中间就是空心的,在Flash中这叫失量切割),如图所示。


 
所要的圆绘制好了,新建图层,用矩形工具【R】绘制一长方条居中对齐【Ctrl+k】,并复制进行旋转【Ctrl+T】操作(旋转弧度60),如图所示。


 
接下的操作和上面圆的切割一样的把上图上蓝色的星形架剪切,在大圆图片右击鼠标执行【粘贴到当前位置】然后删除蓝色星架(删除是选中后按Delete键),如图所示。


 

现在对这个圆颜色上作一些修改,让它更漂亮,这里选中其它一块用颜色调出混色器【Shift+F9】,然后用填充变形工具调整渐变的方位【F】(并不是每一块都要线性填充,中间相隔一块,不要做成一样的了,如果做成一样的,呆会在旋转的时候效果不是很明显),如图所示。

到这里转盘不绘制好了,接下来就是在转盘上的每一块打上字,在Flash中用字体工具【T】关键在于调整文字的位置,可用任意变形工具调整【Q】,这里不提怎么调整文字。下面另外创建影片命名为[cir_as],把刚才做的转盘影片拖入这个影片中,并命名实例名为[cir](一定要居中对齐,怎么居中对齐上面有说到用对齐面板),以往的日志中也有提到怎么添加实例名的,如图所示。

实例名添加好以后,在该影片新建一层命名为[帧标签],在第二帧和第四帧分别创建关键帧,并分别添加标签名[left,right](添加标签名后帧上会有小红旗和标签名,这里面看到你添加是否成功),如图所示。
 
接下来再添加一层命名为[AS]该层用来写使转盘自己旋转的AS代码的,从第一帧到第六帧都创建成关键帧(在Flash中中同一层每一帧上可以写不同的AS而互不干扰),并分别为各帧添加AS代码,如图所示。
  

  

  

回到帖子顶部

回帖 引用 1楼[楼主] 点滴

用户形象图片

这里的AS写完了后,我们回到场景,把[cir_as]影片元拖入场景中,选中该元件打开属性面板【Ctrl+F3】为它命名实例名[cir_mc],如图所示。

在场景中新建一层选中第一层按【F9】打开动作面板写入使转盘用鼠标控制的AS代码,如图所示。

现在用【Ctrl+Enter】测试一下试试看能否用鼠标滑轮控制转盘旋转方向,可以用鼠标控制滑轮的旋转方向了,当我们把鼠标放在某一个(关于点滴、作品展示等)上面时,怎么让转盘停止转动呢,这里要看看转盘自动旋转那一步里面AS代码,我们给转盘设定了旋转弧度的初始值cirStep=2,那么我可以得出这个值不存在或等于0时转盘是否就停止不动呢!这个时候我们要为转盘上的每一点作一个按钮并在按钮上写出使cirStep=0的AS代码来实现鼠标放在某一个上面时停止旋转、鼠标离开时又开始旋转,先要做一个热点按钮,如图所示。


热点按钮做好后,把这个按钮拖入cir影片元件里面,一一对齐,这里可以利用任意变形工具来对齐各按钮,并为每一个按钮写上使鼠标放在按钮时停止旋转的As代码,如图所示。
 

到这里整体鼠标滑轮控制转盘旋转方向的方法就介绍完了,你做成功了么!
这次我不提供源文件下载(让我留一点私心),有一些朋友有源文件作参考都做不出来效果,提供源文件都是多余....

+------------------------------------------------------------------------------------------------------------------------

空间教程推荐流程及方法:
推荐到邮箱:itquan@qq.com
邮件主题:[空间攻略]*******(*为日志标题)
文章标题:
文章链接:
文章作者:
内容摘要:(简要阐述文章内容)

  
  


  
我们圈的口号:鼎力支持原创 分享创作乐趣
JUST SHOW IT
IT游戏圈Q吧:
http://itbar520.qbar.qq.com
IT游戏圈空间:http://992126567.qzone.qq.com
游戏博客专区:http://blog.qq.com/game
回到帖子顶部

回帖 引用 2楼梅子

用户形象图片

高难度哎!写了这么多,辛苦辛苦,一定要支持的!
回到帖子顶部

回帖 引用 3楼240973913

用户形象图片

                             辛苦辛苦
回到帖子顶部

回帖 引用 4楼√七喜瘋子←

用户形象图片

正在学习中呢 呵呵 很棒 支持了
回到帖子顶部

回帖 引用 5楼240973913

用户形象图片

第一至第六关键桢AS    整理了下,顺便拿来
var cirStep=2
gotoAndPlay("left");

cir._rotation = cir._rotation - cirStep;
if (cir._rotation <= -1.338300E+003)
{
cir._rotation = -5.859000E+002;
}


gotoAndPlay("left");


cir._rotation = cir._rotation + cirStep;
if (cir._rotation <= -2.056000E+002)
{
cir._rotation <= -9.589000E+002;
}


gotoAndPlay("right");

主场景中AS
var mouseListener = new Object();
mouseListener.onMouseWheel = function (delta)
{
if(delta > 0)
{
  cir_mc._rotation = cir_mc._rotation-30;
  _root.cir_mc.gotoAndPlay("left");
}
if(delta < 0)
{
  cir_mc._rotation = cir_mc._rotation+30;
  _root.cir_mc.gotoAndPlay("right");
}
};
Mouse.addListener(mouseListener);
回到帖子顶部

回帖 引用 6楼小雅樱

用户形象图片

太复杂啦!
对于我这种新手来说!
回到帖子顶部

回帖 引用 7楼

用户形象图片

顶,  狠难啊  
回到帖子顶部

回帖 引用 8楼孤燕纷飞

用户形象图片

                    辛苦辛苦 
回到帖子顶部

回帖 引用 9楼爱情麻辣烫

用户形象图片

喜欢是喜欢大有难度啊

回到帖子顶部

回帖 引用 10楼Dream☆飘雪

用户形象图片

。。。。。。             
回到帖子顶部

回帖 引用 11楼Dream☆飘雪

用户形象图片

入门的都不会。                    
回到帖子顶部

回帖 引用 12楼Dream☆飘雪

用户形象图片

更别说这些了。                  
回到帖子顶部
个人信息
  • 荣誉+3
  • 荣誉+2
  • 荣誉+1
  • 荣誉-1
  • 荣誉-2
  • 荣誉-3
发表留言
  • 文章不错!
  • 精华好文!
  • 支持原创文章!
  • 帖子图文并茂,好!
  • 真知灼见,说得好!
  • 恶意广告
  • 违规内容
  • 严重灌水
  • 重复发帖
  • 标题党
你确定要删除此楼层吗
扣20点经验值

快速回复进入高级回复

插入图片 选择表情

验证码 看不清?换一张(不区分大小写)

[完成后按Ctrl+Enter发表]
[回复须知]