Solved

How do I create Flash buttons that resize on mouseover

Posted on 2006-11-09
7
463 Views
Last Modified: 2008-01-09
Hello experts I have several images at the bottom of my page (let's say 4 of them) that I will be using as buttons. I want to create this effect: All images are the same size until a mousover occurs on one of them. I need the mousovered image to double in size, and "push" the other images out of the way. On mouseout I need the image to return to its original shape, and the other images to return to their normal spots.

 
0
Comment
Question by:CementTruck
  • 4
  • 3
7 Comments
 
LVL 14

Expert Comment

by:trigger-happy
ID: 17912887
Just a few questions. Are you after an instant effect or an animated effect? When I say instant, the moment you rollover, the image will scale and those beside will be shoved over. When I say animated, the image will scale smoothly and the other images will also be shoved smoothly. 2nd, which direction will the images be shoved to? or will they be shoved both ways equally?

I'll need to know answers to these questions in order to come up with a good idea on how to get it done because otherwise, it may become difficult to implement them (this kind if trick is difficult in the 1st place).

--trigger-happy
0
 

Author Comment

by:CementTruck
ID: 17940622
Trigger,

I guess I want it to scale, not instant. The images to either side of the scaling image will be "shoved" to the left or right, i.e. if Image#3 is mouseovered, then Images1 and 2 get moved to the left, and Image 4 gets moved to the right.
0
 
LVL 14

Expert Comment

by:trigger-happy
ID: 17945279
Well, I'd say what you're trying to do is quite difficult since you have to find a way to anime the stuff correctly and at the same time notify all the images that they have to move over and at a certain distance.

I'd actually suggest doing this the object oriented way since it's the best way for me and it keeps things organized. The idea is to have 1 centralized controller class which we will call Controller. The job of this class is to control the other classes when needed (when an image is mouse-overed, the needed actions have to happen). You would then have another kind of class called the SpecialClip (change the name if you want, I just couldn't think of any good name for it at the moment) which is a subclass of the basic MovieClip class. This is the basic layout and it should work fine but I'll need to know a few things before I can move on.

1.) Will you have a fixed number of images? Or will you be having a varied number of them?
2.) Will these images appear at the very start of the movie and all the way til the end? or only at a portion of the movie?

--trigger-happy
0
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 

Author Comment

by:CementTruck
ID: 17946594
Trigger,

1)  At this point, we'll probably only have 4, or 5 main images(buttons), but this might increase in the future. There are grandiose plans to get this fLASH ANIMATION TO "PULL" from a database, so the images will increase and decrease dependent on the quantity on the database. That's still a long way off, and I'm not going to worry about that now.

2) These images will appear at the beginning, and after the user clicks on an image a series of events happen. Let me explain - one of the images will be a small map. Once clicked, the main screen and all the buttons will either disappear, or be covered up by a large map of all our locations. Each location, in turn, will be a hidden button, and once clicked an image of the specific location will appear. Each location image, and large map image will have a "close" button. When the close button is clicked, the main page will reappear again, with all the original buttons.

Just for a little more info, this is going to be an interactive display on a large flat panel monitor in our waiting room. People/customers/vendors who  are visiting and are waiting patiently in the waiting room will have something to do, clicking buttons, and learning more about our company to boot. I can do all of this in HTML and JavaScript, but the powers-that-be would like it Animated in Flash. I want to show a simple proof of concept before I start adding other cool things like click sounds, etc. If this endevor will be too dificult, please let me know now so I can abandon this idea.
0
 
LVL 14

Accepted Solution

by:
trigger-happy earned 200 total points
ID: 17955696
Indeed this kind of thing is hard, but as of right now I already have a rough idea on how to best implement this kind of thing. All I really need right now is to come up with a concrete implementation for this. Thing is, I hope that you have a good idea of how object-oriented programming works because I have a feeling this will be really complicated...

My rough idea of how things will flow:
>startup
Movie starts and the controller class starts up -> controller class checks with the server for the number of pictures (this part can be changed to adapt to circumstances. You can have hard-coded data or data that can come out from a database but the purpose is the same, to find out how many images and what are they.) -> controller class creates several instances of the SpecialClips which are the actual images onscreen.

>onmouseover
specialclip notifies controller class by sending it an id which was given to it by the controller class -> controller class determines, using the id, which speclalclip called it -> controller class calls the enlarge function of the specialclip which was mouseovered while calling the shiftleft and shiftright functions of the others. -> the specialclips play their respective animations.

>onmouseout
same as onmouseover except it calls the shrink function and reverses the shift of the other clips.

>onrelease/onclick
not sure what you want to happen at this point. This is actually a point of concern since the clips will be dynamically made, aka no hardcoding. If you will have a dynanic amount of images, this will get VERY tricky. If you have a fixed amount then it would be possible to hard code their actions from the controller class initialization at least.

That's about it at the moment.

--trigger-happy
0
 

Author Comment

by:CementTruck
ID: 17957111
OK. This is probably a little out of my reach at the moment due to time restrictions, etc., but I will probably resurect this at some later time. I thank you for your time.
0
 
LVL 14

Expert Comment

by:trigger-happy
ID: 17960563
ok then, post back the same question when you think it's time to work on it :)

--trigger-happy
0

Featured Post

Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
3D rotation for a product 3 339
How do I change text in a Flash (FLA, SWF) file? 3 1,004
How to convert pdf file to html file 8 394
How to convert image files to a movie file 6 111
Introduction This article is primarily concerned with ActionScript 3 and generally specific to AVM2.  Most suggestions would apply to ActionScript 2 as well, and I've noted those tips that differ between AS2 and AS3. With the advent of ActionS…
While working over numerous projects I often had the requirement for doing a screen capture in AS3.0. Unfortunately I found no "ready made" solutions in google search that suited my requirements. But I did come across some great resources which help…
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.
The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question