Solved

How do I create Flash buttons that resize on mouseover

Posted on 2006-11-09
7
461 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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I know the transition can be hard. We got used to the ease of use ActionScript 2 had, but honestly, it became problematic later on, especially if designers were involved in the project and found it easy to add code as they saw fit. So, this artic…
The last time I worked with Flash and Socket connections was in AS1. A recent project required flash connecting to a Socket, and sending receiving information - we figured it would be easy enough - we all know about the socket policy documents and c…
The goal of the tutorial is to teach the user how to live broadcast using Flash Media Live Encoder and connecting it to YouTube to broadcast. Log into your Youtube account, choose live stream settings, start live stream from Flash Media Live Enc…
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.

743 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now