11 Replies Latest reply on Aug 6, 2012 12:47 PM by impof2

    How to make and easy rotating banner ad?


      Hey guys I have Flash CS3 and I just started working with flash.  I was just wondering if there's and easy way to make a rotating banner ad?  If you check out this site http://www.activerideshop.com/ they have one on there front page.  I want to make one really similiar to that and I was just wondering if something like that is hard to make.  If anyone has and ideas or suggestion I would really appreciate it thanks.



        • 1. Re: How to make and easy rotating banner ad?
          kglad Adobe Community Professional & MVP

          banner ads are trivial to make.

          • 2. Re: How to make and easy rotating banner ad?
            logeye Level 1



            Welcome to the forum.


            When you say rotating I think of angles.  I assume you are speaking of the ads that slide from right to left pushing the other ads out of the way.


            I know nothing of CS3. I'm stuck with Flash 8 Actionscript 2.  You do not need actionscript for this.  If it has a timeline here's what you can do.


            Set your stage size for a new flash file and set the frame rate to 15 fps.


            On any layer, import your first graphic onto the stage.  Convert it to a symbol (ie. movieclip).  Make it the size you want it.

            Decide how many seconds you want the graphic to display.  Myltiply it by 15 (ie. (3 seconds) * (15 frames per second) = 45 frames).


            On the same layer that your new movieclip is on go to the frame you calculated and select that frame and push the F6 key.  This will create a new key frame.


            Determine how long you want the transition from one pix to the other.  I'll use 1/2 sec or 15 frames.  On the same layer as before select the frame that is 15 frames past the last one we created.  Select key F6 again.  This creates another key frame.


            In this last keyframe left click on the graphic. Hold down the shift key and press the left arrow on the keyboard.  Move the graphic until it is just off of the stage.Left mouse clich on the layer between the last two keyframes and right mouse click.  There should be an option that says create motion tween.  Left mouse click on that.  An ar row should appear between these keyframes.


            Now we'll do the same thing for the next graphic:


            Insert a new layer.  Its the little folder at the bottom of the tool bar.


            On this new layer select the keyframe just below that of the original graphic just as it began to move.


            Into this key frame import your next graphic.  Convert it to a movieclip as you did before.  Align it so that it is to the side of the first graphic.


            Select the keyframe just below the one where the original(first) graphic stopped it's motion.  Select the F6 key.  Move the graphic to the centered position.  Set the motion tween as you did before.


            Now run the program.


            You'll have to fix the beginning of the first graphic but this will have two graphics constantly replacing each other.


            hope this helps,

            • 3. Re: How to make and easy rotating banner ad?
              idbstyler Level 1

              Thank you.  When I put this into a webpage, will it give me the option of pausing it, and clicking to the next and previous slide?

              • 4. Re: How to make and easy rotating banner ad?
                idbstyler Level 1

                So is there an easy way to make one?  Or would you have some any other suggestions?

                • 5. Re: How to make and easy rotating banner ad?
                  logeye Level 1

                  You're welcome.


                  The above ad will continue to transition between the graphics you choose.

                  If you want to stop the graphic when you click on it, you will have to add actionscript and a button/movieclip that is either visible or invisible.


                  Check out the attached.   It is written in Flash 8 Actionscript 2 even though the code is as1.


                  Rename bannerAd.txt to bannerAd.fla and see if it gives you any ideas.

                  • 6. Re: How to make and easy rotating banner ad?
                    idbstyler Level 1

                    Thanks again.  And on more thing.  What if I wanna give each image its own link?

                    • 7. Re: How to make and easy rotating banner ad?

                      Hi there,

                      I would probably make two arrays. One with the images and one with the links. Like that whenever you select an image you can select the link thats comes with it.You can also make an multidimensional array but I prefer two seperate arrays.


                      _root.urls = ["http://www.google.com","http://www.grafia.fr","etc"];

                      _root.images = ["google.jpg","grafia.jpg","etc"];



                      Guido Braak

                      Creation site internet | Jeux Gratuits

                      • 8. Re: How to make and easy rotating banner ad?
                        logeye Level 1



                        In my previous post I included a file with links.  My computer says the file is still being quequed.


                        I'll try again.  Change the .txt to .fla.


                        Hope this helps.

                        • 9. Re: How to make and easy rotating banner ad?

                          please tell me the code of making banner too.. and can u please tell me how to use flash banner in ADOBE DREAMWEAVER CS-4 and CS-5????

                          • 10. Re: How to make and easy rotating banner ad?

                            it's not that hard for cs3.


                            1. Open Photoshop. Then go to "File" and click "New." Make the size requirements larger than what you want for your banner. Leave the resolution at 72. Go to the bottom of the "Layer" panel. Click on the "New Layer" icon.
                            2. Create your banner, importing in any background image you might want and adding any text or logo. Leave a border margin. Click on the "Eye" next to the background layer to hide it. Then go to "Layer" and click "Merge Visible."
                            3. Go to "File" and click "Save for Web." Save the image as a JPEG in a folder you make for the purpose. Name it "1."
                            4. Go to "Edit," then "Transform." Select "Distort." Use the corner handles to move the banner in such a way as to give the appearance of rotation. This means that, in addition to moving them in horizontally, you need to have a pair of handles on one side get closer together vertically, while the pair on the other side gets farther apart.
                            5. Repeat Steps 3 and 4 several times, each time giving the new file a higher number for the file name. Continue this until you have almost brought the sides close together.
                            6. Open ImageReady. Go to "File," then "Import." Click "Import Folder as Frames." The images should all be placed in the time-line. Now just go to "File" and click "Save as Optimized." Finally, save the file as a GIF. And that's it. You now have an animated GIF with your rotating banner.


                            check out the example on http://www.stixrideshop.com/ if you are lost. i hope it helps.

                            • 11. Re: How to make and easy rotating banner ad?

                              Thanks you guys. I also want to make a rotating banner on my website http://www.whatsappoppc.net but im a total flash noob.

                              But i think i will figure it out with this information

                              If you dont see me here again i have not failed ;)