Форум Flasher.ru - Плавное увеличение рисунка в мувиклипе при наведении мыши, и уменьшение при отведении

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- ActionScript 3.0 (http://www.flasher.ru/forum/forumdisplay.php?f=83)

Плавное увеличение рисунка в мувиклипе при наведении мыши, и уменьшение при отведении

Здравствуйте,
Совсем недавно пришлось перейти на actioscript 3.0, и нет пока навыков. Проблема такая:
Раньше на actioscript 2.0 я писала код с import mx.transitions.Tween и т.п. для легкого увеличения мувика при наведении мыши и уменьшении при отведении. На actioscript 3.0 это уже не срабатывает. Не знаю, что сделать. Может, проблема в синтаксисе или писать уже нужно совсем другое в коде? В голове уже такая путаница, что из кусочков такой код мне не собрать для actioscript 3.0.

Могли бы вы помочь мне с этой проблемой? Показать пример файла с кодом, или выслать линк на подробный туториал?

Спасибо!

Да эти устаревшие технологии срабатывают, но зачем они? actioscript 3.0 инструмент покруче.
легко и просто пользоваться специальным классом
Animator
Что бы увеличить мувик с инстанс именем например my_mc достаточно написать простой код

Код:

import fl.transitions.*;

import fl.transitions.easing.*;





var m_out_trigger:Boolean=true;

import fl.motion.Animator;

import fl.motion.MotionEvent;



var abox_xml_big:XML = <Motion duration="10" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">

    <Keyframe index="0" x="0" y="0" scaleX="1" scaleY="1" rotation="0">



        <tweens>

            <SimpleEase ease="0.8"/>

        </tweens>

    </Keyframe>



    <Keyframe index="9" x="0" y="0" scaleX="3" scaleY="3" rotation="0"/>

</Motion>;

var abox_animator:Animator = new Animator(abox_xml_big, my_mc);

Комментировать? Или нет? Вот в чем вопрос...
Теперь, что бы мувик начал плавно увеличиваться нужно запустить функцию

Код:

abox_animator.play();

Как же его плавно уменьшить? Думать долго не целесообразно...

Код:

var abox_xml_small:XML = <Motion duration="10" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">

    <Keyframe index="0" x="0" y="0" scaleX="3" scaleY="3" rotation="0">



        <tweens>

            <SimpleEase ease="0.8"/>

        </tweens>

    </Keyframe>



    <Keyframe index="9" x="0" y="0" scaleX="1" scaleY="1" rotation="0"/>

</Motion>;





var abox_animator_small:Animator = new Animator(abox_xml_small, my_mc);



abox_animator_small.play();//эту функцию нужно вызвать по необходимости она уменьшит

http://dnadillo.dn.ua/fla/js-swf-htm...e-on-scale.swf
http://dnadillo.dn.ua/fla/js-swf-htm...e-on-scale.zip

используй класс Tweener http://code.google.com/p/tweener/downloads/list

2 Alex Lexcuk: ты всегда для простого увеличения одного объекта, пишешь так много xml и текста? Или только другим советуешь?

Простое увеличение в три раза делается так

Код:

my_mc.scaleX=my_mc.scaleY=3;

А плавное увеличение в три раза за 9 кадров делается с использованием xml, но всегда писать их не нужно, можно один раз написать и пользоваться ими сколько нужно, можно даже засунуть их в отдельный класс, назвать его caurinaMegaLite и сувать всем кому ни попадя.

Плавное увеличение делается в две строчки.

Код:

new Tween(mc, "width", easingFunction, mc.width, mc.width*3, fadeTime, true);

new Tween(mc, "height", easingFunction, mc.height, mc.height*3, fadeTime, true);

Код:

import fl.transitions.Tween;

import fl.transitions.easing.*;



box.addEventListener( MouseEvent.ROLL_OUT, mouseListener );

box.addEventListener( MouseEvent.ROLL_OVER, mouseListener );

box.buttonMode = true;



function mouseListener( event:MouseEvent ):void

{

   switch( event.type )

      {

         case MouseEvent.ROLL_OVER:

            new Tween( box, "scaleX", Strong.easeOut,  box.scaleX, 1.5, .50, true );

            new Tween( box, "scaleY", Strong.easeOut, box.scaleY, 1.5, .50, true );

         break;

                        

         case MouseEvent.ROLL_OUT:

            new Tween( box, "scaleX", Strong.easeOut, box.scaleX, 1.0, .50, true );

            new Tween( box, "scaleY", Strong.easeOut, box.scaleY, 1.0, .50, true );

         break;

         }

}

если мувик делаеться программно то при ROLL_OVER он раширяется вправо и вниз, а как его... что бы он равномерно во все стороны ?!?!

ну вот, кстате, я вижу прелести в классе Animator

можно описать детальную анимацию ( не вызываю при этом кучу твинов )

вопрос на засыпку
что быстрее будет работать в "жеских" условиях ? класс аниматор или анимация через каурину ( твиновая которая )

Цитата:

Сообщение от Makak (Сообщение 770771)

Ваш програмный мувик по умолчанию имеет точку трансформации в левом верхнем углу своего баундинг бокса.
Поместите програмно созданный мувик в контейнер и выровняйте по центру. Эффект применяйте к контейнеру.

Цитата:

Сообщение от Alex Lexcuk (Сообщение 746128)

http://dnadillo.dn.ua/fla/js-swf-htm...e-on-scale.swf
http://dnadillo.dn.ua/fla/js-swf-htm...e-on-scale.zip

Каурина анимирует плавнее. Alex, я поражаюсь твоим творениям. =)

Ну это не удачный зип,
потом я сделал чуть лучше
http://www.dnadillo.dn.ua/fla/button-big-small.html

хмм ... делаю так:

Код:

var container:MovieClip = new MovieClip();

container.addChild(box);

и на экране пусто ...

и еще "контейнер" обязательно должен быть мувиклипом ?

Цитата:

Сообщение от Makak (Сообщение 770865)

хмм ... делаю так:

Код:

var container:MovieClip = new MovieClip();

container.addChild(box);

и на экране пусто ...

и еще "контейнер" обязательно должен быть мувиклипом ?

А контейнер в display list добавлять типа не надо?

:rolleyes: извинияюсь ... ступил ...

а точка трансформации никак програмно не сдвигается ? а то что-то с контейнерами не фэньшуй .. :(

так и не допонял как в контейнере выровнить ... :wacko:

Центровка Tween

Код:

package 

{ 

import flash.display.*; 

import flash.events.*; 

import flash.events.*; 

import flash.text.*; 



 dynamic public class BigSmallDoc extends Sprite {

  var inter:InterActivScale;

  var i:int,xi:int,yi:int;

  var sp:Sprite;

  var string:String;

  function BigSmallDoc()  {

        stage.scaleMode = StageScaleMode.NO_SCALE;

        stage.align = StageAlign.TOP_LEFT;

        string = "Прикольная фишка получилась. Это мега прикол. Надо будет попробовать кому нибуть сделать "+

        "Такой прикол используя, непонятно зачем Caurina или MaxTween, а может лучше GTween? ";  

    for (i=0; i<string.length; i++) 

        {inter = new InterActivScale(this,string.charAt(i));

        }

        inter.x = 200;

        inter.y = 200;        

        rescan();

  }

  function rescan(){

        for (i=0;i<this.numChildren;i++){

                sp = this.getChildAt(i) as Sprite;

                sp.x = xi + sp.width/2;

                xi+=sp.width;

                sp.y = yi + sp.height/2;                

                if (xi+sp.height>stage.stageWidth) {

                        xi=0;

                        yi+=sp.height;

                        trace(">");

                }



        }

  }

 }  

}

Код:

package {

        import flash.display.*;

        import flash.events.*;

        import flash.events.*;

        import flash.text.*;

        import fl.transitions.*;

        import fl.transitions.easing.*;



        dynamic public class InterActivScale extends Sprite {;

        var doc:BigSmallDoc;

        var txt:TextField;

        var tween:Tween;

        var scale:int;

        var anim_trig:Boolean;

        var current:int;

        var max:int;

        var min:int;

        function InterActivScale(_doc:BigSmallDoc, _caption:String) {

                doc = _doc;

                doc.addChild(this);

                txt = new TextField();

                txt.text = _caption;

                txt.autoSize = TextFieldAutoSize.LEFT;

                txt.border = true;

                txt.background= true;

                txt.backgroundColor = 0xffa0ff;

                addChild(txt);

                txt.selectable = false;

                max = 8;

                min = 3;

                scaleX = scaleY = min;

                //закрыть клип прямоугольником, для предотвращения перекрывания текстовой областью

                var square:Sprite = new Sprite();

                square.graphics.beginFill(0xFF,0);

                square.graphics.drawRect(0, 0, txt.width, txt.height);

                square.graphics.endFill();

                addChild(square);



                txt.x = square.x = - txt.width/2;

                txt.y = square.y = - txt.height/2;



                this.addEventListener(MouseEvent.MOUSE_OVER, over_func);

                doc.addEventListener(MouseEvent.MOUSE_OUT, doc_out_func);

                this.useHandCursor = true;

                this.buttonMode = true;

                tween = new Tween({i:0}, "i", None.easeNone, min, max, 0.3, true);

                current = min;

                tween.stop();

                tween.addEventListener(TweenEvent.MOTION_CHANGE, tween_motion_change);

        }

        function over_func(evt:MouseEvent) {

                //trace("over");

                tween.stop();

                tween.begin = current;

                tween.finish = max;

                //trace("over_func");

                tween.start();

                doc.addChild(this);

        }

        function doc_out_func(evt:MouseEvent) {

                tween.stop();

                tween.begin = current;

                tween.finish = min;

                //trace("doc_out_func");

                tween.start();

        }

        function tween_motion_change(evt:TweenEvent):void {

                current = tween.obj.i;

                scaleX = scaleY = tween.obj.i;

        }



}

}

http://murmadillo.tut.su/fla/BigSmall.swf

2: Makak

Просто сдвигайте ваш мувик влево по оси x на половину длинны (width/2) и вверх по оси y на половину высоты (height/2) вашего програмного мувика в рамках вашего контейнера. Эффект к контейнеру.

P.S. Не советую вам забивать голову постами автора Alex Lexcuk. Это моё субъективное мнение.