当前位置：&>&&>&
flash中通过形状改变而实现的图片切换
作者：　源自：　时间： 12:42:08
关键字：flash,flash技巧
这个做起来就比较简单,我们只需要做的是把两个图片放在不同的图层,然后,上面的图片做一遮罩层,遮罩层最终能覆盖上面整个图片.图像切换完成了.
这个比较简单，我们只要三个图层就能解决问题.
两层图像,上面再加一个遮罩上面图形（就是切换后的图形）的遮罩层.
具体做法如下:
1.新建一FLASH文档.创建三个图层.
2.导入两个图片(最好大小一样),分别放在下面的两个图层.让上面图片刚好能覆盖下面的图片.
3.在第三层里画一小正方形,转换为元件MC,命名为MASKFIELD,实例名一样.
4.双击MASKFIELD,进入编辑状态,让元件的原点跟正方形的左上顶点重合.
5.把正方形转为MC,命名为MASK,实例名一样.
6.双击MASK,进入编辑状态,让元件的原点跟正方形的左上顶点重合.
7.在正方形所在图层的第十五帧(帧数可以自己把握)插入一关键帧.然后,对第一帧的正方形进行一些变形(这可以发挥你们的创意与想象力,不过对初学者来说,建议该帧的图形不要完全盖住原来的正方形,否则可能会看不到效果.
8.在第一帧与第十五帧之间创建形状补间动画.在第十五帧添加AS:stop();
9.回到主场景,把MASKFIELD所在的图层设为遮罩层.
10.测试影片,现在可以看到下面图像有一部分被切换成上面的图象了.所以,下一步,就是要复制多个MASK,以实现整个图像最终被切换的效果.
11.关闭测试窗口,继续做.
12.我们看到,正方形出现的先后顺序没什么规律,这是因为笔者用了随机函数.所以,再插入一图层,写定义随机变量的代码.又因为这是个二维空间,所以最好定义二维数组.
13.假设正方形的边长为25,图像为400*300,则加代码:
var&maxhor=400/25
var&maxver=300/25
//这里没采用变量,是防止形变过程影响宽度和高度.
var&order=new&Array();
for(var&hor=0;hor&=maxhor-1;hor++){
&&order[hor]=new&Array();
&&for(var&ver&=0;ver&=maxver-1;ver++){
&&&&order[hor][ver]=maxver*hor+ver
}//首先对每个方格设置一个索引,用它来控制出场顺序.
//但是该出场顺序是从上到下,从左到右有序出来的,所以要再定义一个随机数组.
for(var&hor=0;hor&=maxhor-1;hor++){
&for(var&ver=0;ver&=maxver-1;ver++){
&&tempvalue=order[hor][ver]
&&randhor=random(maxhor)
&&randver=random(maxver)
&&order[hor][ver]=order[randhor][randver]
&&order[randhor][randver]=tempvalue
//这是常用的产生随机数组的算法,是一套相对固定的模式.至于打乱顺序的原理如何,自己测试一下就可以体会出来.
//下面定义一个控制出场的最终数组INDEX,利用前面的随机数组来生成.
var&index=new&Array()
for(var&hor=0;hor&=maxhor-1;hor++){
&for(var&ver=0;ver&=maxver-1;ver++){
&&&&&&&&index[order[hor][ver]]=hor+&_&+ver
上一篇文章：&nbsp
下一篇文章：&nbsp
本文引用地址：
本文关键字：flash,flash技巧flash怎么定位元件?
flash注册点和变形点的区别
作者：佚名
字体：[ ] 来源：互联网 时间：05-18 09:52:49
flash怎么定位元件？flash中位置对齐设计到两个概念，注册点和变形点。的注册点和变形点并不是同时出现的，今天我们就来看看注册点和变形点的区别，需要的朋友可以参考下
学flash，对于位置问题，弄清楚，可以避免很多后续问题。在flash里面，位置的对齐涉及到两个概念，注册点和变形点。如下图，左上角的注册点和右下角的变形点并不是同时出现的，你可以鼠标点击随时切换。
软件名称：Macromedia Flash Pro(动画制作软件) V8.0 简体中文绿色注册版软件大小：47.6MB更新时间：
第一种情况：注册点与变形点区别
1、一般我们在舞台上新建形状的时候，像矩形、圆形，默认的注册点在图形的左上角，变形点在图形的center。
2、怎么验证？请看，【ctrl+i】打开信息，下图描述的正是通过变形点设置形状的位置，原点在画布的左上角。
3、点击左上角，切换到注册点进行比较，数值发生了变化。以上就是注册点和变形点的区别。
第二种情况：元件层级的注册点和变形点
1、一般我们【ctrl+f8】新建元件的时候，例如图形元件，确认之后，会自动进入元件内部，这时视野中心会出现一个十字，这个十字的坐标默认就是（0，0），我们在元件内部新建形状，选择图形通过图形的注册点或者变形点设置图形相对于（0，0）的位置，道理和上面是一样的。
2、切换到变形点，看一下。
3、现在回到场景。从库里面拖拽我们刚刚新建的元件到舞台。可以看到，一个十字光标和一个空心圆点，对就是元件层级的注册点和变形点。在这个层级上，依葫芦画瓢，可以选中元件后，设置元件相对于画布左上角的位置。
第三种情况：元件的注册点位置
1、一般我们对图形右键操作成元件时，有一个对齐选项，这里其实就是让我们选择元件的注册点位置，有9个点可以选择，你去试试吧！
注意事项：
flash不离元件，调整位置的时候别搞错层级了，元件内部是相对（0，0），场景中是相对画布左上角。
相关推荐：
大家感兴趣的内容
12345678910
最近更新的内容怎么使用CSS来修改SVG原点和制作SVG动画 - HTML/CSS当前位置:& &&&怎么使用CSS来修改SVG原点和制作SVG动画怎么使用CSS来修改SVG原点和制作SVG动画&&网友分享于：&&浏览：0次如何使用CSS来修改SVG原点和制作SVG动画
SVG元素可以像HTML元素一样，使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。
SVG元素可以像HTML元素一样，使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。
大多数情况下，一个复杂的动画效果需要组合多种变换效果：旋转、倾斜、缩放以及他们的转换和过渡效果。多数情况下，SVG元素和HTML元素在使用transform和transform-origin上是相同的。但它们之间也有不同之处，SVG元素不能使用box model来管理，因此，它没有margin、padding、border或content boxes。
默认情况下，一个HTML元素的transform原点位于该元素的(50%, 50%)的地方，这里是元素的中心点。与之不同，SVG元素的transform原点位于当前用户坐标系统的原点上，这个点是画布的左上角位置。
假设我们有一个&div&和一个SVG &rect&元素：
&!DOCTYPE html&
&div style="width: 100 height: 100 background-color: orange"& &/div&
&svg style="width: 150 height: 150 background-color: #eee"&
&rect width="100" height="100" x="25" y="25" fill="orange" /&
如果我们在没有改变原点的情况下，都将它们旋转45度，我们将会得到下图的效果（图中的小圆点是它们各种的原点）。
如何使用CSS来修改SVG原点和制作SVG动画
如果我们想根据SVG元素的自身原点，而不是用户坐标系原点来旋转SVG图形该怎么办呢？我们需要使用transform-origin属性来明确的设置SVG元素的transform原点位置。
在HTML元素上设置转换原点是一件非常简单的事情：你设置的任何值都是相对于元素的border box。
在SVG中，transform原点可以使用百分比值或一个绝度值（如像素）来设置。如果你使用百分比值来设置transform-origin，这个值被设置为相对于元素的bounding box，它包括用于绘制边框的stroke。如果你使用一个绝对值来来设置transform-origin，那么这个值被设置为相对于用户的当前坐标系统，即SVG的画布。
如果我们要将上例中的&div&和&rect&都使用百分比来设置其transform原点到中心，代码如下：
&!DOCTYPE html&
div, rect {
transform-origin: 50% 50%;
得到的结果如下图所示：
如何使用CSS来修改SVG原点和制作SVG动画
必须指出的是，到写这篇文章为止，Firefox浏览器仍不支持使用百分比来设置transform的原点，这是一个总所周知的bug。因此，目前最好还是使用绝对值来设置transform的原点。你仍可以在webkit内核的浏览器中使用百分比来设置原点。
下面是一个SVG风车的小例子，我们使用CSS animation来使它不停的旋转。为了使风车绕指定的原点旋转，我们同时使用像素和百分比来设置它的transform原点。
transform-origin: 193px 164
-webkit-transform-origin: 50% 50%;
-webkit-animation: rotate 4s cubic-bezier(.49,.05,.32,1.04)
animation: rotate 4s cubic-bezier(.49,.05,.32,1.04)
@-webkit-keyframes rotate {
-webkit-transform: rotate(360deg);
@keyframes rotate {
transform: rotate(360deg);
&!-- SVG content --&
注意，到目前为止，在使用SVG元素的时候，CSS 3D transformations是没有硬件加速的，只是在SVG transform属性上做了一些优化。但是，Firefox 浏览器对SVG的transforms有一定的加速效果。
SVG路径动画
我们没有办法使用CSS将一个SVG图像转换为另外一个图形。如果你想制作路径变形动画，那么你需要使用javascript。我们建议使用Dmitry Baranovskiy写的Snap.svg。
使用Snap.svg可以很容易的处理一写怪异的问题。
你可以使用CSS来创建动态的画线效果，这个效果你需要知道画线路径的总长度，然后使用SVG的stroke-dashoffset和stroke-dasharray属性来制作画线效果，如果你知道画线路径的总长度，可以使用下面的CSS代码来制作这个动画效果：
stroke-dasharray: pathL
stroke-dashoffset: pathL
/* transition stroke-dashoffset */
transition: stroke-dashoffset 2
svg:hover #path{
stroke-dashoffset: 0;
上面的代码中，当鼠标滑过SVG元素时，路径会向前绘制2秒钟。
在下面的这个例子中，我们使用相同的技术-一个带延迟的CSS transition来制作一个电灯泡通电的效果。
stroke: #FFF2B1;
stroke-dasharray: ;
stroke-dashoffset: 4000;
stroke-width: 4;
transition: stroke-dashoffset 8
svg:hover #cable {
stroke-dashoffset: 0;
/* turn lamp on */
.inner-lamp{
transition: fill .5s ease-in 6s;
svg:hover .inner-lamp {
fill: #FBFFF8;
如果两条线和间隙的值都相等的话，你也可以使用stroke-dasharray: 4000;来替换stroke-dasharray: 。
有些时候你不知道动画路径的总长度，这时，你可以使用javascript的getTotalLength()方法来获取路径的长度。
var path = document.querySelector('.drawing-path');
path.getTotalLength();
//set CSS properties up
path.style.strokeDasharray =
path.style.strokeDashoffset =
//set transition up
path.style.transition = 'stroke-dashoffset 2s ease-in-out';
// animate
path.style.strokeDashoffset = '0';
上面的代码说明我们可以使用javascript来完成和CSS同样的事情。
出处：/ziliaoku/qianduanjiaocheng/.html
本文：如何使用CSS来修改SVG原点和制作SVG动画
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有}