pjqalg博客

人是要有点精神的

(原创)旋转花纹文字动画效果制作详述

(原创)旋转花纹文字动画效果制作详述
 

  

    晚上空余时间制作动画是一个不错的选择,即可充实自己、又可动脑动手,何乐而不为呢?以下是我制作的效果图和详细实录,希望对想制作动画的朋友们有点帮助。
一、制作效果图

图片

二、具体制作步骤: (根据本人实际制作撰写)

1、打开flash cs5.5;

2、新建一个空白flash文档;

3、打开属性面板进行必要设置;(帧速为每秒24帧,像素大小为500x300)

4、点击“文件”—“导入到舞台”, 导入相关素材(即所想要的图片),并进行调整;

5、点击“修改”—“转换为元件”并命名为“背景”,类型为“图形”;

6、点击“插入”—“新建元件”并命名为“花朵颜色变换”,类型为“图形”;

7、用钢笔工具画一朵花,笔触颜色设为黑色;(注意:画时把比例放大到1600左右为好)

8、然后填充为橘黄色,并将其转换成“花朵”的图形元件;

9、在第5帧处插入关键帧,同时点击图形设置“高级”(Alpha100%、蓝 0% +255、红、绿均为0%);

10、在第10帧处插入关键帧,同时点击图形设置“高级”(Alpha100%、红0% +255 ;绿、 蓝均为0%);

11、在第15帧处插入关键帧,同时点击图形设置“高级”(Alpha100%、绿0% +255 ;红、蓝均为0%);

12、在第20帧处插入关键帧,同时点击图形设置“高级”(Alpha100%、红、绿、蓝均为100% +0 );

13、分别在第1、5、10、15帧处插入传统补间动画;

14、新建元件为“花朵旋转动画”,类型为“影片剪辑”,并将“花朵”拖入舞台(注意:不要放置在原位置处);

15、在第10帧处插入关键帧,并放大和旋转图形;

16、在第20帧处插入关键帧并旋转图形;

17、分别在第1帧、第10帧处插入传统补间动画;

18、点时间轴左下方的新建图层,跳出图层2,并在第74处插入帧,第75帧处插入空白帧;

19、点击菜单栏中“窗口”—“动作”,输入代码gotoAndPlay(1);

20、点击“插入”—“新建元件”并命名为“天”,在舞台中输入“天”字(笔尖调整为4.0);并“分离”为图形文件;

21、点时间轴左下方的新建图层,跳出图层2后再输入“天”字;

22、按照第20、21点分别写出:天、想、你;

23、点击“插入”—“新建元件”并命名为“文字动画”,并将各文字拖入舞台且调整好位置;(注意:每拖入一个字需在将该字属性中名称依次转换成“c1、c2、c3、c4”);

25、在第3帧处插入帧,接着点时间轴左下方的新建图层,跳出图层2后将“花朵旋转动画”拖入舞台,调整好位置;并将属性中名称转换成“r1”;

26、点时间轴左下方的新建图层,跳出图层3后在第1帧处插入“空白关键帧”;

27、点击菜单栏中“窗口”—“动作”,输入代码1、nCharacterCount = 4;
nFrameCount = 3;
nAlphaSpeed = 3;
nFlowerWidth = 10;
nFlowerHeight = 10;
function AddAlpha()
{
    for (i = 1; nCharacterCount >= i; i++)
    {
        if (i == nWhoRun)
        {
            continue;
        } // end if
        if (this["c" + i]._alpha >= 100)
        {
            continue;
        } // end if
        this["c" + i]._alpha = this["c" + i]._alpha + nAlphaSpeed;
    } // end of for
} // End of the function
function fun()
{
    AddAlpha();
    if (j > 50)
    {
        j = 0;
        ++nWhoRun;
        if (nCharacterCount < nWhoRun)
        {
            nWhoRun = 1;
        } // end if
        this["c" + nWhoRun]._alpha = 0;
        nPosX = this["c" + nWhoRun]._x;
        nPosY = this["c" + nWhoRun]._y;
        return;
    } // end if
    ++j;
    x = j * Math.cos(j);
    y = j * Math.sin(j);
    duplicateMovieClip("r1", "r1" + j, j + 16384);
    setProperty("r1" + j, _x, x + nPosX);
    setProperty("r1" + j, _y, y + nPosY);
    setProperty("r1" + j, _width, nFlowerWidth);
    setProperty("r1" + j, _height, nFlowerHeight);
} // End of the function
function again()
{
    gotoAndPlay(2);
} // End of the function
nPosX = c1._x;
nPosY = c1._y;
nWhoRun = 1;
r1._visible = false;
j = 0;
c1._alpha = 0;
fun();
28、在第2帧处插入“空白关键帧”,然后点击菜单栏中“窗口”—“动作”,

输入代码2、fun();

29、在第3帧处插入“空白关键帧”,然后点击菜单栏中“窗口”—“动作”,

输入代码3、again();

30、返回场景,将“背景”拖入舞台;

31、将“文字动画”拖入舞台并调整好位置;

32、保存;

33、测试。

以下是我制作的其他一些动画(原创)

(原创)旋转花纹文字动画效果制作详述 - 秋 - pjqalg博客


(原创)旋转花纹文字动画效果制作详述 - 秋 - pjqalg博客


(原创)旋转花纹文字动画效果制作详述 - 秋 - pjqalg博客


(原创)旋转花纹文字动画效果制作详述 - 秋 - pjqalg博客

 



边框制作:枫叶知秋

评论