5 Replies Latest reply on Jun 23, 2009 8:22 AM by Ned Murphy

    tweening assistance needed

    VickyC112 Level 1



      I've been asked to re-design this website http://www.tandp-dancewear.co.uk/ but the client still wants to keep the tweening effect of the images merging into one another.


      Can anyone point me in the direction of a decent tutorial or some tips on the best way to go about it. I use Fireworks and Dreamweaver CS3 and I have very basic knowledge of Flash so I'm not afraid to use that application if I have to.


      Thank you!

        • 1. Re: tweening assistance needed
          Ned Murphy Adobe Community Professional & MVP

          This effect can be fairly easily achieved using timeline tweening (as opposed to code-based tweening... which is a longer learning curve).  What version of Flash would you be using?  I ask because the latest version (CS4) is a bit different to use for timeline tweening.  Since you mentioned CS3 for Dreamweaver, if you have Flash CS3 then I can explain how to do it (I don't have CS4).

          • 2. Re: tweening assistance needed
            VickyC112 Level 1

            I'm using Flash CS3.

            • 3. Re: tweening assistance needed
              Ned Murphy Adobe Community Professional & MVP
            • I'll walk you thru the process of tweening one image on one layer and try to explain how to mix the rest of the images in.

              With a new Flash file open, select the first frame in the timeline.  Then import an image to the stage using the main menu bar... File -> Import -> Import to Stage.


              You should now now see the image on the stage and the frame in the timeline that you selected should a darkened keyframe.  Right click on the image on the stage and select Convert to Symbol.  In the interface that opens, give the image a name of your choosing and select the Graphic option (you select any of the three, but Graphic is sufficient).


              Then, on that same layer in the timeline, right click on the frame 10 and choose Insert Keyframe.  Do the same for frames 30 and 40.  After this you should have the image extending from frame 1 thru frame 40 with 4 keyframes.  The keyframes will be used to set the end points of the transitions from fading in to fading out.  The keyframes from 10 and and 30 will be the duration of the image being fully visible.


              Right click on frame 1 and select Insert Motion Tween,  repeat the same for frame 30.  These frames mark the fade in and fade out starting points, respectively.  You should see blue frames from 1 thru 10 and from 30 to 40, with arrows across them... ths indicates valid tweens have been created... a dashed line would indicate something ain't right.


              Select frame 1 again and click on the symbol on the stage.  In the properties panel, in the color dropdown list, select "Alpha".  Either drag the slider that appears down to 0%, or enter 0% in the field there.  Repeat this for the frame 40.


              You should now be able to test the movie and see the image fade in, stay for a while, and fade out.


              To add another image that fades in while the first is fading out, add a new layer and insert a keyframe (right click -> insert keyframes) on frame 30 on that new layer.  Then repeat the process above using frame 30 as the first frame (keyframes ending up in frames 30, 40, 60, and 70).


              When you have all the images added into layers following the above directions, advancing further down the timeline for each image, you end up with an image at the end that you'll want to transition into the first image you added.  To do that, go back to that first image's layer and add two frames at the end of the timeline to coincide with the fade out of the last image and add a fade in transition there for the first image.


              Then you want to insert one more layer for some actionscript.  In the very last frame of the timeline of that new layer, insert a new keyframe, and with your actions window open (Window -> Actions) and that keyframe selected, type the following in the actions panel: gotoAndPlay(10);


              Hopefully I've explained it clearly enough.  Here's a link to a web page that might help a little, though the tutorial is tweening something different... position rather than color/alpha.  http://www.entheosweb.com/Flash/motion_tween.asp

              • 4. Re: tweening assistance needed
                VickyC112 Level 1

                Have had a few practices and think I've got it!


                Thank you!

                • 5. Re: tweening assistance needed
                  Ned Murphy Adobe Community Professional & MVP

                  You're welcome