Tween Confusion

  • Tokunbo
  • Student
  • Student
  • Tokunbo
  • Posts: 73
  • Loc: Applications Developer

Post 3+ Months Ago

hello,

Im trying to understand the idea about shape tweens. Ive understood that for a motin tween, the object has to be converted to a symbol(movie clip), then a motion tween is applied.

However for shape tweens, perhaps im getting it all wrong.

This is what i want to do: i import 2 .jpg images on stage, and i just want one to tween into another. I observed that these images are not tweening into each other.

However, if i draw up a circle and a square, both aligned at the middle of the stage, and I select a shape-tween for each, running the file shows me the circle(tweening- changing in shape until it becomes a square).

please can you help me clarify both of these issues, at least in lay mans terms. Im following some tutorials I found online.

Toks
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

huh? what exactly are you trying to do? probably you need a fade tween.
shape tween means a shape transforming to another .... an image is a square, the other image is another square ... so at most there can be a square becoming a bigger or a lesser one, and then bump ... the second image appears.
  • Tokunbo
  • Student
  • Student
  • Tokunbo
  • Posts: 73
  • Loc: Applications Developer

Post 3+ Months Ago

ok, yes, both images are squares......maybe a fade tween then. I just want one image to become another.

but among the tween options in the properties section, there are only options for shape, motion and none. I didnt see anything like fade-tween. How do i achieve this fade tween.

Toks
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

ok, here you go: 2 layers, one for each image. Transform each image in a symbol (select image -> press F8 -> make it shape)

First image start from frame1.
in frame 15 for the first image, right click -> insert frame
then right click -> Create Motion Tween.
Again right click in frame 15 -> insert key frame.
click on the image in frame 15, go to Properties panel, select alpha from Color -> set alpha to 0.

Second image starts in frame 7.
same steps as for image 1, only the last keyframe will be in frame 22.
And in frame 22 -> Color set to none
In frame 7 -> Color -> alpha -> 0.

then test your movie.

Or, by actionscript (transform the images in movie clips. name their instances to mcImage and mcImage2):

Code: [ Select ]
import mx.transitions.Tween;
import mx.transitions.easing.*;

var tFadeOut:Tween = new Tween(mcImage, "_alpha", None.easeIn, 100 , 0, 20);
var tFadeIn:Tween = new Tween(mcImage2, "_alpha", None.easeOut, 0 , 100, 30);
stop();
  1. import mx.transitions.Tween;
  2. import mx.transitions.easing.*;
  3. var tFadeOut:Tween = new Tween(mcImage, "_alpha", None.easeIn, 100 , 0, 20);
  4. var tFadeIn:Tween = new Tween(mcImage2, "_alpha", None.easeOut, 0 , 100, 30);
  5. stop();
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

for a given number of images ... N, when one image is half faded out the next image starts to fade in. For this you need to have the instance of all your images on the scene, also make sure all of them are alpha 0.
Code: [ Select ]
import mx.transitions.Tween;
import mx.transitions.easing.*;

function GetNextID(crtID, maxCount)
{
    crtID++;
    if (crtID >= maxCount)
    {
        crtID = 0;
    }
    return crtID;
}

function SetFade()
{
    mcFadeOutImg = this["mcImage"+crtImgID];
    crtImgID = GetNextID(crtImgID, maxImgCount);
    mcFadeInImg = this["mcImage"+crtImgID];
    trace(mcFadeOutImg+":in:"+mcFadeInImg);
    tFadeOut = new Tween(mcFadeOutImg, "_alpha", None.easeOut, 100 , 0, 20);
    tFadeIn = new Tween(mcFadeInImg, "_alpha", None.easeOut, 0 , 100, 20);
    tFadeIn.stop();

}
var tFadeOut:Tween;
var tFadeIn:Tween;
var crtImgID = 0;
var maxImgCount = 2;
var bFadeIn = false;
SetFade();

onEnterFrame = function()
{
    if (tFadeOut.position < 60 && !bFadeIn)
    {
        tFadeIn.start();
        bFadeIn = true;
    }
    if (tFadeIn.position == 100)
    {
        delete tFadeOut;
        delete tFadeIn;
        bFadeIn = false;
        SetFade();
    }
}
stop();
  1. import mx.transitions.Tween;
  2. import mx.transitions.easing.*;
  3. function GetNextID(crtID, maxCount)
  4. {
  5.     crtID++;
  6.     if (crtID >= maxCount)
  7.     {
  8.         crtID = 0;
  9.     }
  10.     return crtID;
  11. }
  12. function SetFade()
  13. {
  14.     mcFadeOutImg = this["mcImage"+crtImgID];
  15.     crtImgID = GetNextID(crtImgID, maxImgCount);
  16.     mcFadeInImg = this["mcImage"+crtImgID];
  17.     trace(mcFadeOutImg+":in:"+mcFadeInImg);
  18.     tFadeOut = new Tween(mcFadeOutImg, "_alpha", None.easeOut, 100 , 0, 20);
  19.     tFadeIn = new Tween(mcFadeInImg, "_alpha", None.easeOut, 0 , 100, 20);
  20.     tFadeIn.stop();
  21. }
  22. var tFadeOut:Tween;
  23. var tFadeIn:Tween;
  24. var crtImgID = 0;
  25. var maxImgCount = 2;
  26. var bFadeIn = false;
  27. SetFade();
  28. onEnterFrame = function()
  29. {
  30.     if (tFadeOut.position < 60 && !bFadeIn)
  31.     {
  32.         tFadeIn.start();
  33.         bFadeIn = true;
  34.     }
  35.     if (tFadeIn.position == 100)
  36.     {
  37.         delete tFadeOut;
  38.         delete tFadeIn;
  39.         bFadeIn = false;
  40.         SetFade();
  41.     }
  42. }
  43. stop();
  • Tokunbo
  • Student
  • Student
  • Tokunbo
  • Posts: 73
  • Loc: Applications Developer

Post 3+ Months Ago

hi Icecold,


thanks, it worked. I use the Alpha idea stuff, not the action script!
  • new_AS
  • Born
  • Born
  • new_AS
  • Posts: 3

Post 3+ Months Ago

Hi there,

If i am implementing this using solely actipon script where do i put my images (moveclips) ... on the stage or in the library or do i refer to the folder they are stored?

Basically want to loop through 3 or 4 pictures so they fade in and fade out...

Thanks in advance.

new_AS!
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

read my post again please (only the comment before the code). Maybe i mistaken stage with scene ... but ... you get now the idea.
  • new_AS
  • Born
  • Born
  • new_AS
  • Posts: 3

Post 3+ Months Ago

Hi

So i have two layers; content and actions, both only have one frame.

Ok so i have imported 3 images into the library and dragged them onto the stage on my Content Layer Frame 1 i have converted each to a movieclip named mcImage, mcImage2 and mcImage3 and set the alpha of each to 0.

Then i have copy and pasted the above code into frame 1 Actionscript of my Actions layer.

When i run it i get the error "undefined:in:undefined" continuously looping?

I assumed it is not recognising the mcImage(s) ?

Am i missing something?

Thanks in advance - this is confusing to a novice like me!
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

you need to have: mcImage0, mcImage1, .... also, did you instantiate your mcImages ?
  • didier
  • Born
  • Born
  • didier
  • Posts: 1
  • Loc: BELGIUM

Post 3+ Months Ago

thanx for your script, it's really working..
I was looking for a while after something like this...
can you explain the parameters of the functions fadeIn and Out..

thx

IceCold wrote:
for a given number of images ... N, when one image is half faded out the next image starts to fade in. For this you need to have the instance of all your images on the scene, also make sure all of them are alpha 0.
Code: [ Select ]
import mx.transitions.Tween;
import mx.transitions.easing.*;

function GetNextID(crtID, maxCount)
{
    crtID++;
    if (crtID >= maxCount)
    {
        crtID = 0;
    }
    return crtID;
}

function SetFade()
{
    mcFadeOutImg = this["mcImage"+crtImgID];
    crtImgID = GetNextID(crtImgID, maxImgCount);
    mcFadeInImg = this["mcImage"+crtImgID];
    trace(mcFadeOutImg+":in:"+mcFadeInImg);
    tFadeOut = new Tween(mcFadeOutImg, "_alpha", None.easeOut, 100 , 0, 20);
    tFadeIn = new Tween(mcFadeInImg, "_alpha", None.easeOut, 0 , 100, 20);
    tFadeIn.stop();

}
var tFadeOut:Tween;
var tFadeIn:Tween;
var crtImgID = 0;
var maxImgCount = 2;
var bFadeIn = false;
SetFade();

onEnterFrame = function()
{
    if (tFadeOut.position < 60 && !bFadeIn)
    {
        tFadeIn.start();
        bFadeIn = true;
    }
    if (tFadeIn.position == 100)
    {
        delete tFadeOut;
        delete tFadeIn;
        bFadeIn = false;
        SetFade();
    }
}
stop();
  1. import mx.transitions.Tween;
  2. import mx.transitions.easing.*;
  3. function GetNextID(crtID, maxCount)
  4. {
  5.     crtID++;
  6.     if (crtID >= maxCount)
  7.     {
  8.         crtID = 0;
  9.     }
  10.     return crtID;
  11. }
  12. function SetFade()
  13. {
  14.     mcFadeOutImg = this["mcImage"+crtImgID];
  15.     crtImgID = GetNextID(crtImgID, maxImgCount);
  16.     mcFadeInImg = this["mcImage"+crtImgID];
  17.     trace(mcFadeOutImg+":in:"+mcFadeInImg);
  18.     tFadeOut = new Tween(mcFadeOutImg, "_alpha", None.easeOut, 100 , 0, 20);
  19.     tFadeIn = new Tween(mcFadeInImg, "_alpha", None.easeOut, 0 , 100, 20);
  20.     tFadeIn.stop();
  21. }
  22. var tFadeOut:Tween;
  23. var tFadeIn:Tween;
  24. var crtImgID = 0;
  25. var maxImgCount = 2;
  26. var bFadeIn = false;
  27. SetFade();
  28. onEnterFrame = function()
  29. {
  30.     if (tFadeOut.position < 60 && !bFadeIn)
  31.     {
  32.         tFadeIn.start();
  33.         bFadeIn = true;
  34.     }
  35.     if (tFadeIn.position == 100)
  36.     {
  37.         delete tFadeOut;
  38.         delete tFadeIn;
  39.         bFadeIn = false;
  40.         SetFade();
  41.     }
  42. }
  43. stop();
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

Code: [ Select ]
tFadeOut = new Tween(mcFadeOutImg, "_alpha", None.easeOut, 100 , 0, 20);
tFadeIn = new Tween(mcFadeInImg, "_alpha", None.easeOut, 0 , 100, 20);
  1. tFadeOut = new Tween(mcFadeOutImg, "_alpha", None.easeOut, 100 , 0, 20);
  2. tFadeIn = new Tween(mcFadeInImg, "_alpha", None.easeOut, 0 , 100, 20);


Tween(targetMovieClip, movieclip property to tween(in this case: _alpha), ease mode, start value, end value, number of frames in which to make the tweening)
  • cranky
  • Born
  • Born
  • cranky
  • Posts: 2

Post 3+ Months Ago

Thanks IceCold, I have used this script and it works great, however I have 14 images, all is fine until mcImage11 rolls around... The next 3 clips flash quickly rather than fade nicely (mcImage11, mcImage12, mcImage13). Once it gets back to mcImage0 all is fine again. I'm a beginner at actionscript so if it's something obvious please be gentle on me...

Code: [ Select ]
import mx.transitions.Tween;
import mx.transitions.easing.*;

function GetNextID(crtID, maxCount)
{
crtID++;
if (crtID >= maxCount)
{
     crtID = 0;
}
return crtID;
}

function SetFade()
{
mcFadeOutImg = this["mcImage"+crtImgID];
crtImgID = GetNextID(crtImgID, maxImgCount);
mcFadeInImg = this["mcImage"+crtImgID];
trace(mcFadeOutImg+":in:"+mcFadeInImg);
tFadeOut = new Tween(mcFadeOutImg, "_alpha", None.easeOut, 100 , 0, 30);
tFadeIn = new Tween(mcFadeInImg, "_alpha", None.easeOut, 0 , 100, 30);
tFadeIn.stop();

}
var tFadeOut:Tween;
var tFadeIn:Tween;
var crtImgID = 0;
var maxImgCount = 14;
var bFadeIn = false;
SetFade();

onEnterFrame = function()
{
if (tFadeOut.position < 60 && !bFadeIn)
{
     tFadeIn.start();
     bFadeIn = true;
}
if (tFadeIn.position == 100)
{
     delete tFadeOut;
     delete tFadeIn;
     bFadeIn = false;
     SetFade();
}
}
stop();
  1. import mx.transitions.Tween;
  2. import mx.transitions.easing.*;
  3. function GetNextID(crtID, maxCount)
  4. {
  5. crtID++;
  6. if (crtID >= maxCount)
  7. {
  8.      crtID = 0;
  9. }
  10. return crtID;
  11. }
  12. function SetFade()
  13. {
  14. mcFadeOutImg = this["mcImage"+crtImgID];
  15. crtImgID = GetNextID(crtImgID, maxImgCount);
  16. mcFadeInImg = this["mcImage"+crtImgID];
  17. trace(mcFadeOutImg+":in:"+mcFadeInImg);
  18. tFadeOut = new Tween(mcFadeOutImg, "_alpha", None.easeOut, 100 , 0, 30);
  19. tFadeIn = new Tween(mcFadeInImg, "_alpha", None.easeOut, 0 , 100, 30);
  20. tFadeIn.stop();
  21. }
  22. var tFadeOut:Tween;
  23. var tFadeIn:Tween;
  24. var crtImgID = 0;
  25. var maxImgCount = 14;
  26. var bFadeIn = false;
  27. SetFade();
  28. onEnterFrame = function()
  29. {
  30. if (tFadeOut.position < 60 && !bFadeIn)
  31. {
  32.      tFadeIn.start();
  33.      bFadeIn = true;
  34. }
  35. if (tFadeIn.position == 100)
  36. {
  37.      delete tFadeOut;
  38.      delete tFadeIn;
  39.      bFadeIn = false;
  40.      SetFade();
  41. }
  42. }
  43. stop();

Post Information

  • Total Posts in this topic: 13 posts
  • Users browsing this forum: No registered users and 15 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.