29 Replies Latest reply on Jul 21, 2009 2:17 PM by rweaver7777

    Newbie question - how to do this effect

    rweaver7777

      Hello, I won't pull any punches - I am an absolute newbie - as in just loaded the Flash software.

       

      I want to create this effect, in just about every detail:

       

      http://www.bostoncorporateportraits.com/portrait-retouching/index.php

       

      Can anyone give me tips on how to begin, or failing that, point me at some books or previous forum topics that will help me?

       

      Problem is, I don't even know what kind of effect to search the forum for.

       

      Thanks in advance for any direction any of you can give.

       

      Thanks,

      Rick Weaver

        • 1. Re: Newbie question - how to do this effect
          kglad Adobe Community Professional & MVP

          use two different movieclips and a moveable mask to mask/reveal/hide the top-most movieclip.

          • 2. Re: Newbie question - how to do this effect
            rweaver7777 Level 1

            I assume a photograph is just a VERY SHORT movieclip?  This answer makes perfect sense - will go get a basic Flash book and look for how to do this sequence.

             

            THANKS!

            • 3. Re: Newbie question - how to do this effect
              kglad Adobe Community Professional & MVP

              you're welcome.

              • 4. Re: Newbie question - how to do this effect
                rweaver7777 Level 1

                OK, my newbieness is showing.

                 

                I've tried for about 4 hours using some books I bought at Barnes and Noble to do this but I can't seem to get the last 5% figured out.

                 

                For testing I have a B&W version of a photo and a color version.  I've imported them and converted them to movieclip symbols on two different layers.

                 

                Then while on the top layer I insert a layer, convert it to a mask layer, then unlock it and draw a rectangle symbol over the entire image.

                 

                Here is where things don't work for me.  I can create a motion tween to move the mask, but the bottom-most layer doesn't get shown after the mask moves.

                 

                Top layer - motion tween

                next layer - mask

                next layer - color photo

                next layer - B&W photo

                 

                Can anyone advise what detail(s) I'm missing to get this to work?  The books and online help aren't helping on this.

                 

                I've attached the fla file of where I am currently.

                 

                THanks,

                Rick

                • 5. Re: Newbie question - how to do this effect
                  rweaver7777 Level 1

                  It looks like the fla file wasn't attached - email me at rick@dreamweaverartists.com and I'll email it to anyone if that will help.

                   

                  Thanks,

                  Rick

                  • 6. Re: Newbie question - how to do this effect
                    kglad Adobe Community Professional & MVP

                    there's nothing to this effect.  i'm attaching a fla that shows how to do it.

                    • 7. Re: Newbie question - how to do this effect
                      rweaver7777 Level 1

                      THANK YOU.

                       

                      I agree I should not be having this much trouble and I have a lot to learn.

                       

                      Thanks for being patient and showing this ID10T how this is done.

                       

                      Rick

                      • 8. Re: Newbie question - how to do this effect
                        kglad Adobe Community Professional & MVP

                        lol.  i spent many years being an idiot and consider myself something of an expert in all possible ways to make stupid errors with flash.

                        • 9. Re: Newbie question - how to do this effect
                          rweaver7777 Level 1

                          Hello, kglad,

                           

                          I've tried many ways of downloading the zip file but windows says it is invalid.

                           

                          Can you resend?

                           

                          Thanks for your help!

                          Rick

                          • 10. Re: Newbie question - how to do this effect
                            kglad Adobe Community Professional & MVP

                            i just downloaded, extracted and opened that file in flash with no problem.

                             

                            i've also uploaded it to:  www.kglad.com/Files/Untitled-2.fla

                            • 11. Re: Newbie question - how to do this effect
                              rweaver7777 Level 1

                              THANKS MUCH for your help! If you look at the original link I posted, while the movie does not have focus/mousedown, the mask moves from left to right. I looked for a timer function in A.S. but didn't see one.  If you can point me in the right direction (i.e., propose a method for me to accomplish it), I will attempt it.  I'm not asking you to do my work for me, just help me with discovering a way to do it. Also, you see the vertical line at the edge of the mask on the original web site?  I assume there is a way to draw a line 5 pixels wide or so, from top to bottom of the clips? Attached is my enhanced FLA file (I hope it goes through).  I also attached it as a zip. Thanks, Rick

                              • 12. Re: Newbie question - how to do this effect
                                rweaver7777 Level 1

                                THANKS MUCH for your help! If you look at the original link I posted, while the movie does not have focus/mousedown, the mask moves from left to right. I looked for a timer function in A.S. but didn't see one.  If you can point me in the right direction (i.e., propose a method for me to accomplish it), I will attempt it.  I'm not asking you to do my work for me, just help me with discovering a way to do it. Also, you see the vertical line at the edge of the mask on the original web site?  I assume there is a way to draw a line 5 pixels wide or so, from top to bottom of the clips? Attached is my enhanced FLA file (I hope it goes through).  I also attached it as a zip. Thanks, Rick

                                • 13. Re: Newbie question - how to do this effect
                                  kglad Adobe Community Professional & MVP

                                  you can timeline tween your mask.  that would probably be easiest for you.

                                  • 14. Re: Newbie question - how to do this effect
                                    rweaver7777 Level 1

                                    Sorrry to be really dumb here, but would that be a motion, shape, or classic tween (as in CS4)?

                                     

                                    I've been trying the motion tween but that was what I could not get to work earlier before I asked this question on the forum.

                                     

                                    Thanks,

                                    Rick

                                    • 15. Re: Newbie question - how to do this effect
                                      kglad Adobe Community Professional & MVP

                                      a shape tween.  you probably want your mask to tween from a zero width rectangular shape to the full-width of the masked object.

                                      • 16. Re: Newbie question - how to do this effect
                                        rweaver7777 Level 1

                                        Hi,

                                         

                                        You've been a great help!  I have another question.

                                         

                                        I modified your original bit of code to only move the mask when it is clicked on, and to keep 25 pixels on the sides intact (i.e., the mask is minimum 25 pix wide, and max 25 pix less than the width of the clips).  Your example code was very instrumental in my figuring out how to do all that.

                                         

                                        I'll go research shape tweening and begin implementing your suggestion.

                                         

                                        Once I get the shape tween working, when the mousedown event occurs on the movieclip (i.e., the user clicks on the clip), how do I "stop" the timeline, and in laymans terms, give control of the mask width to the user's mouse?  And when the mouseup event occurs how do I restart the timeline (although once I know how to stop it, I'm sure I could probably get it restarted)?  Once this is done, except for the vertical line on the example from Boston Portraits, we'll have duplicated their functionality the way I wanted to.

                                         

                                        Maybe stopping and restarting the timeline will happen automatically but for some reason I don't think I'll be that lucky...

                                         

                                        Thanks again,

                                        Rick

                                        • 17. Re: Newbie question - how to do this effect
                                          rweaver7777 Level 1

                                          Ok,

                                           

                                          I followed the instructions in the adobe help to create a shape tween, (add blank keyframe, draw new shape, click in the timeline to insert the tween) but in cs4, the shape tween option is greyed out at that point.  So just to hack away, I created a classic tween and got some results.

                                           

                                          THis resulted in the mask growing from small to large as expected.  I need to tweak the easing and the frame rate but it did what I wanted.

                                           

                                          However, in trying to create a 2nd tween to go back to the original small size isn't working for me (tweener is just moving the large mask to the left and not shrinking in the reverse way it was expanded).  The example from Boston Portraits goes to the right, then moves back, and loops.

                                           

                                          I'll zip up my results if needed and post.

                                           

                                          Is there a way to insert the shape tween that I'm not aware of?  The adobe online help seems to not be accurate.

                                           

                                          Thanks,

                                          Rick

                                          • 18. Re: Newbie question - how to do this effect
                                            kglad Adobe Community Professional & MVP

                                            if you created a timeline tween with the mask expanding, click and hold and highlight all the frames of your tween, right click, copy and paste that tween just after original tween.  click and highlight the 2nd tween frames, right click and click reverse frames.

                                            • 19. Re: Newbie question - how to do this effect
                                              rweaver7777 Level 1

                                              Sorry I double-posted, just dusting off this question from 3 posts ago:

                                               

                                              Once I get the tween working the way I want it to, when the mousedown event occurs on the movieclip (i.e., the user clicks on the clip), how do I "stop" the timeline, and in laymans terms, give control of the mask width to the user's mouse?  And when the mouseup event occurs how do I restart the timeline (although once I know how to stop it, I'm sure I could probably figure out how to get it restarted)?  Once this is done, except for the vertical line on the example from Boston Portraits, we'll have duplicated their functionality the way I wanted to.

                                               

                                              Thanks,

                                              Rick

                                              • 20. Re: Newbie question - how to do this effect
                                                kglad Adobe Community Professional & MVP

                                                on press, you can create a mousemove handler to start a loop that adjust the frame of your mask movieclip bases on the mouse position.

                                                 

                                                when the mouse is at one extreme position the mask timeline should be displaying at min (or max) width and when the mouse is at the other extreme the mask timeline should be displaying at max (or min) width.  you can use linear interpolation to direct the mask mc to the correct frame based on the mouse position.

                                                • 21. Re: Newbie question - how to do this effect
                                                  rweaver7777 Level 1

                                                  Hi, again!

                                                   

                                                  I've had enough of Flash for the moment, and will undertake your suggestion sometime later this week.

                                                   

                                                  So you can share the sense of accomplishment I have, you can see the finished first draft flash file at:

                                                   

                                                  www.dreamweaverartists.com/Rachel.html

                                                   

                                                  THANKS AGAIN for your patient help.

                                                   

                                                  Rick

                                                  • 22. Re: Newbie question - how to do this effect
                                                    kglad Adobe Community Professional & MVP

                                                    you're welcome.

                                                    • 23. Re: Newbie question - how to do this effect
                                                      rweaver7777 Level 1

                                                      OK, I followed your suggestion and it is tracking the mouse ROUGHLY, but I want to get the vertical line (what I call the wiper) that you see in my swf to follow the point of my cursor more closely.

                                                       

                                                      Is there a way in actionscript to access the wiperlayer->timeline->frame->symbol._x position? I want to loop through the frames and select the frame and "gotoandstop" that has the vertical bar symbol whose x position is closest to the mouse x position.

                                                       

                                                      I looked through all the AS index but didn't see anything named timeline or frame...

                                                       

                                                      Thanks,

                                                      Rick

                                                      • 24. Re: Newbie question - how to do this effect
                                                        kglad Adobe Community Professional & MVP

                                                        if you're using timeline tweening for the mask width, you should use timeline tweening for the vertical line's motion tween.

                                                        • 25. Re: Newbie question - how to do this effect
                                                          rweaver7777 Level 1

                                                          Yes, I got that working correctly.

                                                           

                                                          I'm asking about when I want the line to follow my mouse when I click/hold and move the mouse.  It's a combination of what you helped me with the first time (the mask following the mouse) and the timeline running when the mouse is not used over the image (as in link I posted).

                                                           

                                                          I use onmousedown to "switch modes" and go back to where the mask width follows the mouse.  When the onmouseup event occurs I go back to the timeline tween operation.

                                                           

                                                          Sorry maybe I was being unclear.

                                                           

                                                          Is there a way to access the timeline frames and interrogate the "x" position of the symbols in the frame?

                                                           

                                                          Thanks,

                                                          Rick

                                                          • 26. Re: Newbie question - how to do this effect
                                                            kglad Adobe Community Professional & MVP

                                                            for the mouse follow part, do the same thing you did for the mask width.   actually, you can probably just assign the line's _x property to be the same as _xmouse.

                                                            • 27. Re: Newbie question - how to do this effect
                                                              rweaver7777 Level 1

                                                              Gee, that was so obvious I can't believe I didn't think of it.  Thanks for your patience.

                                                               

                                                              Now I have the issue where when I move the line via the mouse, when the onmouseup event occurs and the timeline restarts via "play()", the line doesn't move with the tween.  Is there something I must do to "reattach" the object to the timeline?

                                                               

                                                              Another question - my mask isn't a symbol it is just a shape.  Can you advise how to reference it in AS (it doesn't have a name I can find to reference it)?

                                                               

                                                              Sorry for my non-technical jargon here...

                                                               

                                                              Thanks,

                                                              Rick

                                                              • 28. Re: Newbie question - how to do this effect
                                                                kglad Adobe Community Professional & MVP

                                                                you can probably store the _x property of your line when you start to control it with the mouse and then when you're done using the mouse you can probably just reassign the line's _x property to be the value you stored at the begining.

                                                                 

                                                                you can't use actionscript to control a shape.  convert it to a movieclip and give it an instance name.  you can then use the instance name in your actionscript.

                                                                • 29. Re: Newbie question - how to do this effect
                                                                  rweaver7777 Level 1

                                                                  Thanks for the info on the shape - I thought that might be the case.  If I convert the shape to a symbol it messes with the tween frames and they all end up at the original shape position, except for the last keyframe which has the line in the final position.  Do I need to delete and recreate the tween after converting it to a symbol?

                                                                   

                                                                  When I restore the "_x" value of the line, the timeline still does not move it even though I can tell the mask is working properly (the photos change).  When the timeline restarts via the "play()" command upon onmouseup, the line does not move.  It's almost like I somehow decoupled it from the tween.  Any ideas?

                                                                   

                                                                  I posted the current test swf on my web site at http://www.dreamweaverartists.com/Rachel%202.html

                                                                   

                                                                  You can see I stored the position of the line when the mouse took control, but then when the play resumes the line does not 'obey" the tween...

                                                                   

                                                                  Thanks,

                                                                  Rick