很早之前尝试过3D效果也曾创建过这样的效果,现在使用CS4自身的能力去创建这种效果。在学习这种效果的时候,个人依旧强调效果背后的数学和物理原理,这些工具为我们创建效果带来帮助。

Flash cs3 到cs4过渡,改造了DisplayObject类,引人z轴和旋转等概念后,做3D的效果带来很多帮助。过去要采用引擎或者通过其他计算方式创建3D一些常见的效果,现在使用flash自身的能力也能够完成一些效果,不过相比目前流行引擎flash cs4自身的3D能力还是有缺陷,但是创建一些简单3d效果,flash cs4还是能够应付到。

今天,尝试创建一种像螺旋楼梯的效果,什么?螺旋楼梯,那不是建筑学上的?怎样和flash 联系了?对,没错,现在我们就借助建筑学的螺旋楼梯的一些原理来创建这种螺旋效果。

1.  基本原理

从图中可以看出,螺旋楼梯围绕一个圆柱体旋转而来,从俯视图看起来,圆柱体底是一个圆,没错你看得没错,它正是一个圆。你应该为看到这个圆而高兴,因为它是你熟悉的事物,接下来是否会联系接下来要做什么?三角函数?对,就是三角函数,又是转换数学的问题 通过三角函数能够确定圆上每一个点的坐标,前提是提供半径和角度。

假设圆的半径为R,那么每一个点的位置通过三角函数就能确定下来了。

X=cosA*R;

y=sinA *R;

数学上的左右手坐标系

有了这个公式后,我们可以遵循使用这种规律来设计这个螺旋效果。

首先创建一个Main.as 文件,同样我们需要准备一张图片,导入flash cs4里面进行库的链接 给个名称为photo。

这一张图片就相当于一个螺旋点

如var image:photo=new photo();

通过简单的代码演示

代码

package 
{
    import flash.display.MovieClip;
    import flash.events. * ;
    import flash.geom.PerspectiveProjection;
     public   class  Main extends MovieClip
    {
         private  var num: int = 50 ; // 一共有多少个螺旋点
         private  var numOfRotations: int = 3 ; // 圈数
         private  var anglePer:Number  =  ((Math.PI * 2 )  * numOfRotations)  /  num;
         private  var R: int = 400 ; // 半径
         private  var h: int = 0 ; // 高度
         private  var contain:MovieClip = new  MovieClip(); // 容器
         private  var list:Array = new  Array();
         public  function Main()
        {

init();
            creat3D();
        }
              
         private  function init(): void
        {
            root.transform.perspectiveProjection.fieldOfView = 100 ; // 初始化透视角度
            addChild(contain);
            contain.x = stage.stageWidth / 2 ;
            contain.y = stage.stageHeight / 2 - 800 ;
            contain.z = 1000 ;            
        }

// 创建螺旋效果
         private  function creat3D(): void
        {

for  (var i: int = 0 ; i < num; i ++ )
            {
                var image:photo = new  photo();
                list.push(image);
                contain.addChild(image);
                image.x = Math.cos(anglePer * i) * R;
                image.z = Math.sin(anglePer * i) * R;
                image.y = h += 30 ; // 每一个螺旋点都递增30
                image.rotationY  =  ( - i * anglePer)  *  ( 180 / Math.PI) + 90 ; // 偏移
                image.addEventListener(Event.ENTER_FRAME,Run);
            }
        }

private  function Run( event :Event): void
        {
            contain.rotationY += 0.01 ;
            sortZ();
        }

// 深度交互
         private  function sortZ(): void
        {
            list.sortOn( " z " ,Array.DESCENDING | Array.NUMERIC);
             for  (var i: int = 0 ; i < list.length; i ++ )
            {
                var myimage:photo = list[i];
                contain.setChildIndex(myimage,i);

}

}

}
}

显示出来了,接下来见证奇迹的时刻。我们为每一个小球增加一个z轴,从数学角度上看,复制出一个小球,就让新的小球的高度和前一个小球的高度相差一个高度H。添加了这个高度后,你会发现很多不同效果也出来了。呈现出螺旋状的,看起来就像螺旋楼梯。 同样,可以改变角度间隔这样也可以创建出不同的值。

例如:我们将

private var numOfRotations:int=3;//圈数
  private var anglePer:Number = ((Math.PI*2) *numOfRotations) / num;

设定为

private var numOfRotations:int=1;//圈数
private var anglePer:Number = ((Math.PI*2) *numOfRotations) / num;

重新运行该程序你会发现改变了另外一种形态

同样再设置这个numOfRotations参数或者h这个参数,其他效果也会呈现出不同的效果,你会发现这种组合非常多和非常丰富。因为你可以发挥你的创意去改变你所喜欢的形态。这是你能做得到的,一定能。

有了这个前提下,我们可以继续创建出很多效果。

小结:

从俯视角度看,创建螺旋每一个点都是映射到圆的轨迹上,你只是对每一个点进行分布处理。而这个过程,为了让每一螺旋点产生空间感,需要对每一个螺旋点的高度进行一些设置。

数学公式:

X=cosA*R;

y=sinA *R;

Z+=H;

转化为屏幕的时候就需要进行投影。

X=cosA*R;

Z=sinA *R;

Y+=H;

转载于:https://www.cnblogs.com/hero82748274/archive/2010/01/16/1648980.html

Flash cs4: 螺旋效果相关推荐

  1. flash特效原理:螺旋效果

    很早之前尝试过3D效果也曾创建过这样的效果,现在使用CS4自身的能力去创建这种效果.在学习这种效果的时候,个人依旧强调效果背后的数学和物理原理,这些工具为我们创建效果带来帮助. Flash cs3 到 ...

  2. flash特效原理 螺旋效果

    很早之前尝试过3D效果也曾创建过这样的效果,现在使用CS4自身的能力去创建这种效果.在学习这种效果的时候,个人依旧强调效果背后的数学和物理原理,这些工具为我们创建效果带来帮助. Flash cs3 到 ...

  3. flash特效原理:螺旋效果 (3)

    最近对高数起了很大的兴趣,掏钱买了一本高等数学.发现里面的真是一份宝物,最近看了一个人的博客.关于高等数学的知识,对螺旋线的形态原来不仅仅是一种.过去尝试制作的图形也是一种的方式,现在提及这种螺旋线不 ...

  4. flash特效原理 螺旋效果 (3)

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 最近对高 ...

  5. Flash CS4网页中Flash背景透明

    Flash CS4网页中Flash背景透明 之前一直纳闷,为什么有的flash广告会在Html网页上说透明的,看了这个了解大概.转之... ============================== ...

  6. 结合Flex Builder和Flash CS4制作一个中国地图的应用

    本文来自:RIAMeeting 这篇文章,我们将了解到如何使用Flash技术创建一个中国地图的应用.相信在很多地方都会有这样的需求:比如一个全国性论坛的入口,需要显示一种导航给访客,让访客可以选择自己 ...

  7. 结合Flex Builder和Flash CS4制作一个中国地图的应用(转)

    结合Flex Builder和Flash CS4制作一个中国地图的应用 Posted 八月 9th, 2009 by 郭少瑞 地图 这篇文章,我们将了解到如何使用Flash技术创建一个中国地图的应用. ...

  8. 用matlab画水晶球,Flash CS4的Deco工具绘制一个有图案的水晶球

    本例主要使用Flash CS4的Deco工具绘制一个有图案的水晶球,通过本例的制作学习Deco工具创作的思路和方法.教程很不错,推荐过来,大家一起来学习吧! 我们先来看看最终的效果图: 本例思路: & ...

  9. 《Adobe Flash CS4中文版经典教程》——1.7 使用“工具”面板

    本节书摘来自异步社区<Adobe Flash CS4中文版经典教程>一书中的第1章,第1.7节,作者: [美]Adobe公司 译者: 陈宗斌 更多章节内容可以访问云栖社区"异步社 ...

最新文章

  1. 国务院任命!清华、北航分别迎来新任副校长
  2. tcpdump基础教程
  3. 廖雪峰Java2面向对象编程-4抽象类和接口-1抽象类
  4. android grideview 图片png透明,Android完美解决GridView异步加载图片和加载大量图片时出现Out Of Memory问题...
  5. Idea中实战Git
  6. 【温故知新】CSS学习笔记(盒子内边距介绍)
  7. 启明云端分享|ESP32摄像头应用方案常遇到的问题
  8. php实现的mongodb操作类
  9. jQuery的无new构建
  10. Samba服务器(一):windows访问samba服务器共享文件的简单实现(图文并茂)
  11. 【干货】打造优秀B端产品需求分析流程要点
  12. cv2.imread读取图像结果none_PyTorch 42.图像操作
  13. Unity3D之NGUI基础3.1:代码控制UILabel
  14. node.js stream
  15. 天空盒 Skybox
  16. CalHypso——用于计算面积高程积分(HI)曲线的ArcGis扩展工具
  17. redmibook pro 14 arch linux alsamixer 检测不到声卡
  18. webshell流量隐蔽CS和MSF联动
  19. win10的任务管理器显示所占内存,比实际占用内存小的原因
  20. 计算机网络分组交换特点,分组交换技术在计算机网络技术中的作用及特点是什么?...

热门文章

  1. 磁场强度H,磁感应强度(磁通密度)B的区别
  2. ldirectord.cf文件详解
  3. python判断一个文件夹里面是否为空_Python碎片化学习教程 @8. 判断目标文件夹是否为空...
  4. base源和epel源
  5. 正则匹配任意字符(常用正则表达式的书写)
  6. 并发并行多线程多进程协程
  7. 迪士尼在上海发布的限量版手机
  8. The Power of H3D2, 截图,视频! 少女时代 gee gee gee
  9. 搭建win7操作系统的虚拟机
  10. c语言fscanf读取结构体变量,怎样用fscanf读入结构体变量