22 Replies Latest reply on Feb 4, 2011 12:34 AM by goldenflashlight

    Need help with creating dynamic and interactive animation

    goldenflashlight

      Hello,

      I need to create flash interactive animation for one one of my regular clients, which should look and work similar to example in Nike store Customize:

      Link

      This is how my clients product (shirt) should look like and what sections should be editable:

      http://img510.imageshack.us/img510/1382/demoyb.jpg

      Basically it should work this way:

      1. End user chooses some element of shirt which he would like to edit (for example collar)
      2. When he clicks on that element, popup windows shows offering two main options: to change color and graphic (texture or pattern), same as on nike store customize example
      3. After user changes one section (collar) he goes to other section (lets say sleeve) and so on
      4. User should be able to zoom in or zoom out that shirt and also if it is possible to rotate it in 4-5 positions
      5. At the end it should be able to save that work (and load it if he wants to later ) and be able to print it.

      I have made many animations, games, banners and similar using Macromedia Flash MX and Adobe Flash so I am not a flash newbie but this is a first time I am dealing with this type of work. I know that there is no step by step tutorial for this kind of custom interactive animation but I need some help and and advice how to create these three first steps (1. 2. 3). Regarding steps (4.) and (5.) I think I could realize it (zoom in, zoom out, rotate movieclip, save in database and print screen), because I ahd some previous experince regarding this part.

       

      Any help is appreciated and many thanks in advance for propmt replys!

       

      Cheers

        • 1. Re: Need help with creating dynamic and interactive animation
          kglad Adobe Community Professional & MVP

          if this is a photorealistic app, you'll need to use bitmaps for each shirt element, each color, each texture.  replace the current bitmap with the selected one.

          1 person found this helpful
          • 2. Re: Need help with creating dynamic and interactive animation
            goldenflashlight Level 1

            Thank you very much kglad for quick reply.

             

            Yes, plan is to have photorealistic app just like on nike example so current bitmap will be replaced with the selected one after users chooses desired material/color.

            • 4. Re: Need help with creating dynamic and interactive animation
              goldenflashlight Level 1

              Could you help with some advice how can I realize one of the first three steps?

               

              Thank you.

              • 6. Re: Need help with creating dynamic and interactive animation
                goldenflashlight Level 1

                I would say that step two is very important for me because I not sure how to realize this:

                 

                "2. When he clicks on that element, popup windows shows offering two main options: to change color and graphic (texture or pattern), same as on nike store customize example"

                 

                and I need to know this:

                 

                - What code should I use in Actionscript so end user would see movable pop-up window after he clicks on some element of shirt (lets say collar) which will show two main options? One option is flash combobox (list box) which will contain list of materials (basically these are list of .png or .bmp textures) and second option are 5-10 small color squares with different colors and each one of them will have some actionscript code so when user clicks any of these textures from flash combobox (list box)or on any of 5-10  small color squares, sselected section of the Shirt (collar) will change it's value (instead of white becomes blue or insted of lines texture becomes becomes circle texture).

                 

                I hope I explained it correctly.

                • 7. Re: Need help with creating dynamic and interactive animation
                  kglad Adobe Community Professional & MVP

                  create a popup movieclip that contains a combobox, list component or datagrid and contains your colored square movieclips and make it look like a popup window that suits your style.  you'll probably want to add a "close"/X to the corner of the popup so it can be closed.  add code to your popup to enable it to communicate selected component items and colors.  instantiate the popup when an element is clicked and populate the popup's component with the appropriate data.

                  1 person found this helpful
                  • 8. Re: Need help with creating dynamic and interactive animation
                    goldenflashlight Level 1

                    Dear kglad,

                     

                    Sorry for my little delay, I was trying in meantime to construct step two (2.) based on all your suggestion and last post which helped be better realize how to do it and I have managed to complete most of of it except this part only:

                     

                    "One option is flash combobox (list box) which will contain list of materials (basically these are list of .png or .bmp textures)"

                     

                    I find some useful tutorial on web regarding creating small color squares which helped me easly to change color of movieclip but I just can't figure out way I could change materials/textures (basically these are list of .png or .bmp textures) using actionscript similar as shown on tutorial but instead of color changing there should be texture changing inside movieclip.

                     

                    I really hope can help me with this part.

                     

                    Thank you.

                    • 9. Re: Need help with creating dynamic and interactive animation
                      goldenflashlight Level 1

                      p.s. regarding texture fill I plan to have for example 10 different textures which would be original size 4px*4px and when user clicks on one these ten textures, movieclip (in my example it could be movie clip "collar" as one part of shirt) automatically gets filled with that texture, same as it would be with solid color.

                       

                      I Hope I explained it on right way.

                      • 10. Re: Need help with creating dynamic and interactive animation
                        kglad Adobe Community Professional & MVP

                        use a scrollpane to display your bitmaps.


                        • 11. Re: Need help with creating dynamic and interactive animation
                          goldenflashlight Level 1

                          That part is no problem, I have main problem how to realize this part mentioned:

                           


                          "you'll need to use bitmaps for each shirt element, each color, each texture.  replace the current bitmap with the selected one."

                           

                          so all I need to know is this to solve my problem is:

                           

                          If I have small 10 squares (size 4 x 4 px) which would cointain 10 different textures/materials/bitmaps and every one of these boxes will contain actionscript code which I imagine it would working on principle "If user clicks square no.1 then movie clip Collar will be filled with texture from square no.1, if clicks on square no.2 then movieclip Collar will be filled with texture from square no.2 and so on" so I need some actionscript code which would allow for these small 10 squares to comunicate with movieclip Collar on this way

                           

                          Greetings,

                          goldenflashlight

                          • 12. Re: Need help with creating dynamic and interactive animation
                            kglad Adobe Community Professional & MVP

                            create a movieclip that contains your 10 bitmaps and assign a linkage id (eg mcID).  convert each bitmap to a movieclip and assign an instance name (eg c1,c2,...,c10) and assign a property on that movieclip's timeline for each of the 10 that indicates its texture (eg, c1.texture="plaid", c2.texture="solid red", etc).

                             

                            if your scrollpane has instance name sp, you can then use:

                             

                            sp.contentPath="mcID";

                             

                            for(var i:Number=1;i<=10;i++){

                            sp.content["c+i].onRelease=function(){

                            // use this.texture to overlay the correct bitmap movieclip over the selected clothing part (eg collar)

                            }
                            }

                             

                             

                            p.s.  please mark helpful/correct answers.

                            1 person found this helpful
                            • 13. Re: Need help with creating dynamic and interactive animation
                              goldenflashlight Level 1

                              kglad, thank you very much for your prompt reply as always

                               

                              I followed your instructions step by step in detail but I received some error message:

                               

                              - "1120: Access of undefined property c."

                               

                              Also I am little confused with "function()" part because I am not sure what to place here: all I know is that my goal is that when user clicks on one of the small texture boxes, movieclip must be filled with current clicked bitmap/texture, like I mentined in my last post:

                               

                              If user clicks square no.1 then movie clip Collar will be filled with texture from square no.1, if clicks on square no.2 then movieclip Collar will be filled with texture from square no.2 and so on"

                               

                              To solve my issue easyer I have created one flash file which is based on you last post which includes all elements: color boxes, mcID, collar, code.. so I would really appreciate if you can look at the file and tell me what I am doing wrong..


                              Here's a file (FLA) for download

                               

                              Also I made to collar movieclips, collar and collar2 because I am not sure should movieclip collar be bitmap or dlash drawn object

                              • 14. Re: Need help with creating dynamic and interactive animation
                                goldenflashlight Level 1

                                No problem kglad, I have marked last post as helpful.

                                 

                                Thank you.

                                • 15. Re: Need help with creating dynamic and interactive animation
                                  kglad Adobe Community Professional & MVP

                                  i have a typo in that code.  (but from that error message it looks like you're using as3.  is that true?)

                                   

                                   

                                  as2:

                                   

                                  sp.contentPath="mcID";

                                   

                                  for(var i:Number=1;i<=10;i++){

                                  sp.content["c"+i].onRelease=function(){

                                  // use this.texture to overlay the correct bitmap movieclip over the selected clothing part (eg collar)

                                  }
                                  }

                                   

                                   

                                  as3:

                                   

                                  sp.source = new MC();  // where MC is your c1,c2,... containing movieclip's class

                                   

                                  for (var i:Number=1; i<=10; i++) {
                                      sp.content["c"+i].addEventListener(MouseEvent.CLICK,f);
                                  }

                                   

                                  function f(e:Event):void{
                                      trace(e.currentTarget.col);
                                  }

                                  1 person found this helpful
                                  • 16. Re: Need help with creating dynamic and interactive animation
                                    goldenflashlight Level 1

                                    When I use as2 I get this error:

                                     

                                    Description
                                    1119: Access of possibly undefined property contentPath through a reference with static type fl.containers:ScrollPane

                                     

                                    Source

                                    sp.contentPath="mcID";

                                     

                                     

                                    As for as3 code this is part I don't understand:

                                     

                                    // where MC is your c1,c2,... containing movieclip's class

                                    Does this mean that I have to rename movieclip mcID (which contains c1, c2..movieclips) to MC? If that's the case I tryed it and I get this:


                                    Description

                                    1180: Call to a possibly undefined method MC.

                                     

                                    Source

                                    sp.source = new MC();  // where MC is your c1,c2,... containing movieclip's class

                                     

                                    p.s. is there any other way to solve this without using SrollPane?

                                    • 17. Re: Need help with creating dynamic and interactive animation
                                      kglad Adobe Community Professional & MVP

                                      you don't have to use a scrollpane.

                                       

                                      are you publishing for as2 or as3?

                                      • 18. Re: Need help with creating dynamic and interactive animation
                                        goldenflashlight Level 1

                                        I am using Adobe Flash CS4 Professional and plan to publish for as2 because I have better knowledge of as2 then as3

                                         

                                        Greetings,

                                        goldenflashlight

                                        • 19. Re: Need help with creating dynamic and interactive animation
                                          kglad Adobe Community Professional & MVP

                                          then use the as2 code i suggested and use the as2 scrollpane.

                                           

                                          or, don't use the scrollpane.  you'll then need to use something else (like your own custom scrollpane/movieclip) to display your materials.

                                          • 20. Re: Need help with creating dynamic and interactive animation
                                            goldenflashlight Level 1

                                            Hello kglad, I have decided to use as2 only and without srollpane. I have made brand new FLA file which is based on as2 and more simple, this is how it looks like:

                                             

                                            - I have 3 layers: collar(movieclip), mcID(movieclip which contains c1, c2... movieclips) and layer actions (where I placed code)

                                             

                                            You can download it here Please take look this file so we could easly solve my issue faster.

                                             

                                            - I actions layer on top level I have this as2 code:

                                             

                                            for(var i:Number=1;i<=10;i++){

                                            mcID["c"+i].onRelease=function(){

                                            // use this.texture to overlay the correct bitmap movieclip over the selected clothing part (eg collar)

                                            }
                                            }

                                             

                                            and now I don't get any error messages. I hope this corrected code is OK and logical because I replaced sp.content with mcID ?

                                             

                                             

                                            In this code I don't see anything that comunicates with movieclip collar? I assume that part should be written in function() part of code? As I have mentioned in my last post I having problem understanding function part:

                                             

                                             

                                            "Also I am little confused with "function()" part because I am not  sure what to place here: all I know is that my goal is that when user  clicks on one of the small texture boxes, movieclip must be filled with  current clicked bitmap/texture, like I mentined in my last post:

                                             

                                            If user clicks square no.1 then movie clip Collar will be filled  with texture from square no.1, if clicks on square no.2 then movieclip  Collar will be filled with texture from square no.2 and so on"

                                            "

                                            • 21. Re: Need help with creating dynamic and interactive animation
                                              kglad Adobe Community Professional & MVP

                                              i don't download and correct files unless i'm hired.

                                               

                                              each of your child movieclips c1,c2,.. should have a string property (eg, texture) that indicates which texture it is.  you'll use that string property to assign a new bitmap for the selected part (eg, collar) of your clothing.

                                               


                                              var dep:Number=0;

                                              for(var i:Number=1;i<=10;i++){

                                              mcID["c"+i].onRelease=function(){

                                              yourclothing.selectedPart.attachMovie(yourclothing.selectedPart+this.texture+"ID",yourclot hing.selectedPart+this.texture+"_mc"+dep,dep++);
                                              // where you have library movieclips with this linkage id
                                              }
                                              }

                                               


                                              • 22. Re: Need help with creating dynamic and interactive animation
                                                goldenflashlight Level 1

                                                huh as I am not still that experienced to fully understand this code I will have to ask things I don't understand step by step:

                                                 

                                                1.

                                                 

                                                c1,c2,.. should have a string property

                                                I am not sure how to define string property, I read some help files from help.adobe.com and I have set these actions for mcID (which contains 10 movieclip textures/bitmaps):

                                                 

                                                on (release)
                                                {
                                                   
                                                var texture1:String = "texture1";
                                                c1.texture="texture1";   
                                                   
                                                var texture2:String = "texture2";
                                                c2.texture="texture2";

                                                 

                                                ...

                                                 

                                                }

                                                 

                                                Not sure is this the right way to define string for c1, c2... movieclips?

                                                 

                                                 

                                                2. This part I don't understand also:

                                                 

                                                // where you have library movieclips with this linkage id


                                                when you say library movieclips you mean c1, c2...?

                                                 


                                                when you say this linkage id on what linkage id you mean: "ID", "_mc", "mcID", "texture".. ? I also took some time to learn about attachMovie('linkageId', 'instanceName', depth) command but I still have problems with understanding this code:

                                                 

                                                yourclothing.selectedPart.attachMovie(yourclothing.selectedPart+this.t exture+"ID",yourclothing.selectedPart+this.texture+"_mc"+dep,dep++);
                                                // where you have library movieclips with this linkage id
                                                }
                                                }

                                                 

                                                3.  this part "yourclothing.selectedPart" I have replaced with  "collar" (which is movieclip) because right now in my test example I want to just change movieclip collar. Is this replacment ok?

                                                 

                                                4. I also didn't understand this partfrom earlyer post:

                                                 

                                                and assign a property on that movieclip's timeline for each of the 10 that indicates its texture (eg, c1.texture="plaid", c2.texture="solid red", etc).

                                                 

                                                Not sure where to define this eg. c1.texture="texture1", c2.texture="texture2, etc because I am not sure should I do this by setting labels for each one c1,c2... movieclips or do I have to assign a string property as mentioned in number 1 issue (1.),  from above text?

                                                 


                                                Thanks!