24 Replies Latest reply: Jun 25, 2009 1:35 PM by Ned Murphy RSS

    Bing "like" Pictures

    zm15 Community Member

      Wanting to know if there is a relatively easy way to do this: Much like on the bing homepage, where you can scoll over areas of the picture and info pops up, i want to do this with a picture and have small boxes around the picture that when clicked on, a small image pops up and some text is below it.

       

      I'm new to flash, but am willing to take all the tips and advice i can get. This seems fairly easy and straight forward, just curious as to how to do it exactly.

        • 1. Re: Bing "like" Pictures
          Ned Murphy CommunityMVP

          See if using invisible buttons works for you as starter.  To create one, simply create a new button symbol and only place something in the "hit" frame of its timeline.

           

          If you were to place that on the stage at tis point you would see an aqua colored shape on the stage... this will not appear when you play, but is helpful in sizing and placement of the button.

           

          Another thing you could do is add what you want displayed in the "over" frame of that button.  Tha would make it so that when you hover over the button whatever you have in that over frame will appear.  So it could be a small blurb or something that points to the thing your cursor is over (where the invisible button portion is).

           

          There's other options you can pursue as well, but try those out first and see how you would like to change it if so.

          • 2. Re: Bing "like" Pictures
            zm15 Community Member

            Thanks for the reply Ned!

             

            Ok, i've attached a picture for the look i am going for. I want the buttons to always be visible and when clicked on an picture pops up with a description.

            I like your idea about making that the 'over' stage. Would it take much work to make it zoom out like in the picture?

            • 3. Re: Bing "like" Pictures
              Ned Murphy CommunityMVP

              You would want to use movieclips for the zooming part--so you make a movieclip animation of the image zooming and stick it in the over frame.  You could use a movieclip overall instead of a button, but the button lets you make the over reaction happen without the need for any code.

              • 4. Re: Bing "like" Pictures
                Ned Murphy CommunityMVP

                To make a movieclip of that picture/info zooming, first create a Graphic symbol in Flash that contains the stuff you want shown for that... Insert -> New Symbol -> Graphic... put stuff in it.

                 

                Once you have that Graphic symbol complete, drag an instance of it onto the stage (just for creation of the mc), right click it and select Convert To Symbol -> Movieclip.  Now that graphic is encased in a movieclip.  Double click that movieclip to edit its innards.

                 

                The Graphic symbol will be occupying frame 1 of the timeline.  Right click on frame 20 and select Insert Keyframe.  That graphic now spans from frame 1 thru 20.

                 

                Note: if you are using CS4, the following may be a waste of my time... they changed the process... the following will work for CS3 and earlier versions

                 

                Click on frame 1 and then click on the graphic on the stage.  Select Modify -> Transform -> Scale and Rotate... enter 0.2% in the scale entry field and click OK... I think that's as low as you can go.

                 

                Right click on frame 1 and select Insert Motion Tween... the frame from 1 thru 19 will now appear blue with an arrow... (if not, something is amiss)

                 

                Insert a new layer in the timeline and add a keyframe at frame 20.  Select frame 20 and in the actions panel enter: stop();

                 

                Doubleclick elsewhere on the stage top exit the movieclip editing ( or select Edit -> Document) and test the movie... you should see the movieclip playing such that it grows and stops.  Delete it from the stage... open a button for editing, select the over frame and drag an instance of that movieclip onto the stage.  You'll probably need to fiddle and adjust things, but that's the basics of creating an animated zooming movieclip.

                • 5. Re: Bing "like" Pictures
                  zm15 Community Member

                  Thanks for the excellent instructions Ned. I'm using CS4 so i went and found out how to do tweening, so i have that part. I added a button, an dmade the over position the moviclip, but when i go to preview it, there is not button, and the image just keeps zooming, over and over. I put the stop command, but i keep getting an error. I attached a screen shot of how i have it set up, and the error too.

                  • 6. Re: Bing "like" Pictures
                    Ned Murphy CommunityMVP

                    If you want the buttons to be visible, as you said yesterday, then you need to have something in the first frame of the button.

                     

                    The repeated zooming could be one of two things (I beleieve, anyways)... either you did not include a stop at the end of the timeline tween, or the movie is just going bonkers due to whatever that coding error is that you have... making the movie go bonkers is how AS3 throws a tantrum... aside from yelling at you about the problem.

                     

                    I'm curious what you have in the lower frame at frame 20 that is making that cell look gray, as though there's some content there.  The warning you are getting is pointing to Layer 1, so I don't know what's going on there since your code appears to be on Layer 6.

                    • 7. Re: Bing "like" Pictures
                      zm15 Community Member

                      Ok, well i've made some progress. I had to put the stop command outside of the movieclip itself as well, on the main timeline. I attached the swf file of what i have so far. I'm almost there, now i just can't seem to get it to do the 'over' position correctly. You have to go over it twice. You can see what i mean in the file.

                      • 8. Re: Bing "like" Pictures
                        Ned Murphy CommunityMVP

                        If the Enter button is what I was supposed to be using, it worked on the first shot... rather nicely too... good animation work there (can be tricky to conquer at times)

                        • 9. Re: Bing "like" Pictures
                          zm15 Community Member

                          yep, that's the right one. The only thing is, after you take your mouse off, and put it on again it doesnt work, you have to do that twice for it to work. Ideally i would like it to expand everytime you roll your mouse over it, not every other time. I'm sure it's something simple but i just can't quite get it. Any thoughts?  ALSO, how can i get the left picture to be on top of the other small box? I guess, how can i get the active picture to always be on top?

                           

                          attached is an updated look

                          • 10. Re: Bing "like" Pictures
                            Ned Murphy CommunityMVP

                            I don't remember it having any problem with having to rollover it twice.  At the moment though, I don't see any button to go over.

                            • 11. Re: Bing "like" Pictures
                              Ned Murphy CommunityMVP

                              Do you happen to have any code in frame 1 of the animation?  In the picture you show earlier there seems to be some actionscript in the first frame.  The only code in the animtion should be the stop at the end

                              • 12. Re: Bing "like" Pictures
                                lemunchbunch Community Member

                                What's going on????? I am getting everyone's reply

                                 

                                Help!!!!!!!!!!

                                • 13. Re: Bing "like" Pictures
                                  lemunchbunch Community Member

                                  What's going on????? I am getting everyone's reply

                                   

                                  Help!!!!!!!!!!

                                  • 14. Re: Bing "like" Pictures
                                    zm15 Community Member

                                    That extra code fixed the problem!!! Thanks!

                                     

                                    updated the animation, let me know if it work ok on your end, ther eare 2 small icons, instead of the 'enter' button

                                     

                                    How do i get them from overlapping on each other? To make sure the active picture is always on top

                                    • 15. Re: Bing "like" Pictures
                                      Ned Murphy CommunityMVP

                                      To have the currently hovered one always on top will require adding code for the buttons.  Adding code for the buttons means you need to give the buttons instnace names (in the properties panel).  Are you at all familiar with coding buttons with event listeners?

                                      • 16. Re: Bing "like" Pictures
                                        zm15 Community Member

                                        no i'm not, but i'm ready to learn!

                                        • 17. Re: Bing "like" Pictures
                                          zm15 Community Member

                                          EDIT: UPDATE

                                           

                                          so i have all the pictures on there, and some of them overlap and some don't. I didn't do any coding or anything, and reason for this?

                                           

                                          updated is attached

                                          • 18. Re: Bing "like" Pictures
                                            Ned Murphy CommunityMVP

                                            As you've seen, a button is already a self animating object that will react to mouse interactions, but only visually at this stage.  The first thing you need to do to make it useful code-wise is to assign it a unique instance name.  So select a button and enter that unique instance name for it in the Properties panel... let's say you name it "btn1"... move to the next button and maybe name it "btn2"... keep at it 'til all buttons have a unique instance name assigned to them.


                                            In AS3, to make a button work with code, you need to add an event listener for it.  You might need to add a few (for different events, like rollover, rollout, clicking it, but for now we'll just say you want to be able to rollover it and make it be on top of any other item on the stage.  In the timeline that holds that button, in a separate actions layer that you create, in a frame numbered the same as where that button exists, you would add the event listener:


                                            btn1.addEventListener(MouseEvent.ROLL_OVER, bringToFront);


                                            Descriptively, that line of code contains the following:


                                            buttonInstanceName . displayObjectMethod (eventClass . eventType, eventHandlerFunction);


                                            The name of the unique function for processing the rollover event of that button was already defined at the end of the event listener assignment, so now you just have to write that function out:

                                             

                                            function bringToFront(evt:MouseEvent):void {

                                                 this.setChildIndex(evt.currentTarget, this.numChildren-1);

                                            }

                                             

                                            I have written that function so that any of your buttons will be able to use it, so all of your event listeners that you assign will be assigned the same listener information.  Now if you name your buttons as I described, btn1, btn2, btn3,...  you can use a loop to assign the event listeners and save some coding effort...

                                             

                                            for(var i:uint = 1; i<=numBtns; i++){  // use actual number of buttons in place of numBtns

                                                 this["btn"+i].addEventListener(MouseEvent.ROLL_OVER, bringToFront);

                                            }

                                            • 19. Re: Bing "like" Pictures
                                              zm15 Community Member

                                              ok, so i've made some progress. The coding is all new to me here in flash, but i am bearing with you. I have applied the first line of code, but am unsure where i write the function out at. I attached a screen shot and you can see where the code is at top, and the error at the bottom. I know i'm missing something, which is the function code, i just don't know where it goes.

                                               

                                              I've put the function code below the first line of code, and just get an error too.

                                              • 20. Re: Bing "like" Pictures
                                                zm15 Community Member

                                                second error attached

                                                • 21. Re: Bing "like" Pictures
                                                  zm15 Community Member

                                                  possibly useful screenshot, shot of timeline

                                                  • 22. Re: Bing "like" Pictures
                                                    Ned Murphy CommunityMVP

                                                    AS3 can be a pain in the butt.  Change the function's inner code to:

                                                     

                                                    this.setChildIndex(SimpleButton(evt.currentTarget), this.numChildren-1);

                                                     

                                                    If it'll save you from "bearing with" me (I wouldn't want you to go out of your way to do that... )  here's a link to a file that demonstrates the buttons swapping levels... http://www.nedwebs.com/Flash/AS3_Swap_Index.fla

                                                    • 23. Re: Bing "like" Pictures
                                                      zm15 Community Member

                                                      You my friend, are a flash master mind, thanks! That worked! The fla file really helped me see the structure of the layout and layers. Thank you so much for all of your help and sticking it out with me in this! I sure appreciate it!!!!

                                                       

                                                      Zach

                                                      • 24. Re: Bing "like" Pictures
                                                        Ned Murphy CommunityMVP

                                                        You're welcome Zach