Creating animation by copying pixels
通过复制点创建动画
A basic definition of animation is the illusion of motion, or change, created by changing an image over time.
动画的一个基本定义是通过在一定时间内改变或移动图像而产生的幻觉。
In this sample, the goal is to create the illusion of a spherical moon rotating around its vertical axis.
在本例中,目标是创建球状的月亮在它竖直轴附近转动的幻觉影像。
However, for the purposes of the animation, you can ignore the spherical distortion aspect of the sample.
但是,为了动画的目的,你可以忽略例子的球状变形的问题
Consider the actual image that’s loaded and used as the source of the moon image data:
考虑到实际加载并使用的图像是这样的月亮图像

As you can see, the image is not one or several spheres; it’s a rectangular photograph of the surface of the moon.
就像你看到的,图像不是一个或几个面,它是一个长方形的月亮表面的图像
Because the photo was taken exactly at the moon’s equator,
因为,图像是从月亮的赤道上方拍摄来的
the parts of the image that are closer to the top and bottom of the image are stretched and distorted.
部分靠近顶端和底端图像是变形了的图像
To remove the distortion from the image and make it appear spherical, we will use a displacementmap filter, as described later.
为了消除变形,使其看上去像个球,我们将用到一个像后面描述的displacementmap过滤器,
However, because this source image is a rectangle, to create the illusion that the sphere is rotating, the code simply needs to slide the moon surface photo horizontally, as described in the following paragraphs.
尽管如此,因为源图像是个长方形,为了创建创建球型转动的幻觉,代码需要将月球表面照片转换成地平面。下文详谈。
Notice that the image actually contains two copies of the moon surface photograph next to each other.
注意 图像实际上包含月亮表面图像的两个copy
This image is the source image from which image data is copied repeatedly to
create the appearance of motion.
这个图像是用来创建月亮外貌的源数据
By having two copies of the image next to each other, a continuous, uninterrupted scrolling effect can more easily be created.
把图像的复制一个在它的旁边,有利于创建旋转效果。
Let’s walk through the process of the animation step-by-step to see how this works.
让我们通过看动画制作的一个个步骤来理解其原理
The process actually involves two separate ActionScript objects.
整个步骤实际上包含了两个相对独立的ActionScript对象(模块)
First, there is the loaded source image, which in the code is represented by the BitmapData instance named textureMap.
首先,有个被加载的源图像,在代码中它被存储在BitmapData类型变量textureMap中
As described previously, textureMap is populated with image data as soon as the
external image loads, using this code:
就像前面讨论的,textureMap是在图像加载完毕的时候被赋值的,下面是代码:
textureMap = event.target.content.bitmapData;The content of textureMap is the image shown previously.
textureMap的内容就是前面展示过的那图像
In addition, to create the animated rotation,
另外为了创建真实的旋转效果
the sample uses a Bitmap instance named, which is the actual display object that shows the moon image onscreen.
例中使用了一个叫sphere的Bitmap类型变量,它是真正把图像显示在屏幕上的量
Like textureMap, the sphere object is created and populated with its initial image data in the imageLoadComplete() method, using the following code:
就像textureMap类似,sphere对象在imageLoadComplete()函数中初始化图像数据,下面是代码
sphere = new Bitmap();
sphere.bitmapData = new BitmapData(textureMap.width / 2,textureMap.height);
sphere.bitmapData.copyPixels(textureMap,new Rectangle(0, 0, sphere.width, phere.height),new Point(0, 0));
本文转自:http://www.5uflash.com/flashjiaocheng/Flashyingyongkaifa/515.html
发表评论
-
as3.0游戏开发之打气球系列(一)
2010-04-09 12:48 623好久没有写正经的文章 ... -
as3按钮事件
2010-04-09 12:48 545在刚开始学As3时,如果不知道按钮的事件如onPress的话 ... -
【as3】ActionScript 3.0体验试教学视频教程
2010-04-09 12:48 596很不错的视频教程 原文地址: http://blog.sina ... -
as3 使用sound类(翻译)-暂停和继续播放声音
2010-04-09 12:48 550[1b]问题十[/1b] 如何暂停声音,如何从暂停的地 ... -
利用AS3类直接读取Rar文件中的swf文件
2010-04-09 12:47 1277名称:RarExtractor(Rar文件解压器) 作者:fl ... -
AS3.0传递引用时应当注意的问题
2010-04-09 08:27 603整和同事写的地图编辑器代码的时候发现有个引用明明改变了,但是调 ... -
AS3.0传递引用时应当注意的问题
2010-04-09 08:27 636整和同事写的地图编辑器代码的时候发现有个引用明明改变了,但是调 ... -
AS3.0 Socket读取原理分析
2010-04-09 08:27 798AS3.0中使用Socket接收数据我们必须使用Progres ... -
AS3.0 Socket读取原理分析
2010-04-09 08:27 895AS3.0中使用Socket接收数据我们必须使用Progres ... -
开源的as3 3D引擎jiglibFlash
2010-04-09 08:26 1149jiglibFlash:http://code.google. ... -
教你做个性FLASH导航条
2010-04-08 07:52 988首先下载软件Macromedia Flash 8简体中文正式版 ... -
菜鸟制作精美Flash导航菜单
2010-04-08 07:52 1386为方便网友浏览,导航 ... -
菜鸟制作精美Flash导航菜单
2010-04-08 07:51 919为方便网友浏览,导航 ... -
Flash动态缓冲图片导航制作详解
2010-04-08 07:51 782缓冲公式在制作特效中非常有用,著名的三星导航菜单就用到了此公式 ... -
Flash动态缓冲图片导航制作详解
2010-04-08 07:51 663缓冲公式在制作特效中非常有用,著名的三星导航菜单就用到了此公式 ... -
ActionScript 2.0入门系列(继承与接口)
2010-04-07 10:21 683下载地址: [url=/Files/BeyondPic/200 ... -
AS代码2.0:面向对象模型
2010-04-07 10:21 568自从几年前在Flash中引入动作脚本语言(Action Scr ... -
AS代码2.0:面向对象模型
2010-04-07 10:21 706自从几年前在Flash中引入动作脚本语言(Action Scr ... -
AS代码2.0:脚本编辑和调试
2010-04-07 10:20 696Flash MX Professional 2004的动作脚本 ... -
AS代码2.0:脚本编辑和调试
2010-04-07 10:20 583Flash MX Professional 2004的动作脚本 ...
相关推荐
5. **旋转动画**:程序中地球绕太阳旋转,月亮绕地球旋转,这需要用到旋转矩阵和时间变量来计算每个物体的旋转角度,实现动态效果。 6. **顶点着色器和片段着色器**:OpenGL使用着色器语言(GLSL)编写自定义的顶点...
Flash动画主要基于帧的概念,通过在时间轴上创建关键帧并填充内容,然后在关键帧之间添加中间帧,形成平滑的动画效果。 - **Flash动画特点**:矢量图形基础,占用存储空间小,可缩放不失真,支持交互性,适合网络...
【标题】"纯CSS3实现的模拟太阳、地球、月亮旋转效果源码"是一个利用现代Web技术,特别是CSS3,来创建动态天文景象的项目。这个项目的核心目标是通过CSS3的动画属性来模拟太阳、地球和月亮之间的相对运动,为用户...
2. **定义几何形状**:太阳、地球和月亮可以简化为球体。我们可以使用三角网格或者顶点数组来表示这些球体。在OpenGL中,这可以通过`glGenBuffers`、`glBindBuffer`和`glBufferData`等函数来实现。 3. **坐标变换**...
它通过图形管道工作,将复杂的几何数据转化为屏幕上的像素。在这个过程中,我们通常会涉及顶点坐标、纹理映射、光照模型、投影和视口变换等概念。 要模拟太阳系,我们首先需要定义太阳、地球和月亮的三维坐标。这些...
- **位图示例**:带动画效果的旋转的月亮的例子展示了如何使用位图和动画技术来创建动态效果。 - **位图图像的异步解码**:通过 `BitmapData.decode()` 方法可以异步加载和解码位图图像。 #### 十四、过滤显示对象...
旋转矩阵可以使用glRotate函数来创建,该函数接受旋转角度和旋转轴作为参数。 此外,为了实现地球和月球的纹理映射,我们需要加载相应的图像文件作为纹理,并使用glGenTextures和glTexImage2D函数来创建和设置纹理...
- **位图示例**:通过一个具体的示例——带动画效果的旋转的月亮,展示位图的实际应用。 #### 十五、过滤显示对象 - **过滤显示对象的基础知识**:介绍过滤显示对象的基本概念。 - **创建和应用滤镜**:说明如何...
- **位图示例:带动画效果的旋转的月亮**:通过一个动态月球旋转的示例,展示如何结合位图处理和动画技术。 - **位图图像的异步解码**:介绍如何异步加载和解码位图图像,以避免阻塞UI线程,提高用户体验。 #### 第...
2. **几何建模**:创建表示太阳、地球和月亮的3D几何形状,例如球体,可能通过多边形网格来近似。 3. **变换矩阵**:使用变换矩阵来实现物体的自转和公转。自转可以通过绕自身轴线的旋转矩阵来实现,公转则需要应用...
6. **动画和帧速率**:为了让太阳、地球和月亮动态运行,开发者需要实现时间驱动的动画更新。这可能涉及到计时器和基于帧的更新,确保以平稳的帧速率渲染场景。 7. **用户交互**:尽管没有明确提到,但通常这样的...
3. **旋转与平移**:为了模拟地球和月亮的运动,你需要应用矩阵变换来实现物体的旋转和平移。可以使用四元数来处理旋转,避免万向节死锁问题。平移可以通过简单的向量加法完成。 4. **物理模拟**:要准确地表现地月...
这可能包括地球的旋转动画,通过改变顶点坐标来模拟地球围绕自身轴线的自转,以及围绕太阳的公转。为了实现这种动态效果,开发者可能使用了时间变量和数学公式来计算位置和角度。 此外,OpenGL的纹理映射技术用于在...
总的来说,这个OpenGL行星模拟系统是一个基础的三维动画项目,展示了如何用编程语言和OpenGL库来表现宇宙中的天体运动。尽管它可能比较简化,但仍然能帮助学习者理解OpenGL的基本原理和3D图形渲染的概念。
在太阳系模型中,太阳、地球和月亮可能被表示为球体,通过多个三角面片来近似表示。每个天体的表面贴图(texture mapping)则增强了视觉效果,使得它们看起来更真实。贴图通常是一个二维图像,通过映射到三维模型...
位图示例:带动画效果的旋转的月亮 位图图像的异步解码 第章:过滤显示对象 过滤显示对象的基础知识 创建和应用滤镜 可用的显示滤镜 筛选显示对象示例:FilterWorkbench 第章:使用PixelBender着色器 PixelBender着色...
视点变换,旋转,加速减速,星空背景 太阳,光晕 各行星纹理 #include #include #include #include #include <wininet.h> #include <windows.h> #include #pragma comment(lib, "winmm.lib") #pragma ...
通过JavaScript,开发者可以直接控制像素,创建出各种复杂的图像和动画。在这个特效中,Canvas作为3D渲染的画布,为月球和星空的显示提供了一个可交互的舞台。 Three.js库在此特效中发挥了关键作用。它提供了对象...
7. **动画循环**:通过在主循环中更新物体的位置和角度,实现动态效果。这通常涉及到时间变量的处理和帧率控制。 8. **视口和投影**:设置合适的视口大小和投影模式(正交投影或透视投影),以达到理想的观察效果。...
利用它们,设计师和开发者可以通过简单的旋转和缩放,灵活调整以适应各种不同场景的具体需求。 所谓的“补天素材”,则是一个更为广泛的概念,它不仅仅包含了天空全景贴图,还可能包括云彩、星辰、月亮、太阳等元素...