Animated button as3

Hi there
I have this animated button that I created from a tutorial, but am a little confused at to how I could set a hotspot for the button, the button is just a white outline square, no background image, so the button is not completely filled.
it only triggers when rollover line, am I making any sense.
is this the easiest way to create an animated button in as3, seems like there is alot of script???
I have attached fla example of button

thank you for that, yes that makes sense
is this now the norm for making animated buttons in as3, or do/can you use a hotspot from the button movieclip??
what is the correct way?
many thanks

Similar Messages

HELP: Preloader and Button AS3

Hi guys!
I used to work on AS2 to make my animations, buttons and portfolios, but now I needed to use AS3 to make some forms interact with some PHP script.
TextInputs and Buttons on COMPONENTS are working and interacting normally with PHP. My PreLoader is working great too. But what should the easiest is not working: MY SIMPLE BUTTONS! It used to be so easy in AS1 and 2, but now on AS3 it's not working. I am putting all my action and codes in a ACTIONS FRAME in the top of my animation, but it is not working!
I have my Preloader on my frame 1 working, calling my animation on frame 2. The code is here (it's working):
stop();
addEventListener(Event.ENTER_FRAME, loading);
function loading(event:Event) {
var bytestotal = stage.loaderInfo.bytesTotal;
var bytesloaded = stage.loaderInfo.bytesLoaded;
var sclbar = Math.round(bytesloaded*100/bytestotal);
custom_animation.gotoAndPlay(sclbar);
if (bytesloaded >= bytestotal) {
removeEventListener(Event.ENTER_FRAME, loading);
removeChild(custom_animation);
gotoAndPlay(2);
Then I placed my buttons actions on the frame 2.
If I use the action:
home_btn.addEventListener(MouseEvent.CLICK,clickHome);
function clickHome(evt:MouseEvent):void {
gotoAndPlay(2);}
release_btn.addEventListener(MouseEvent.CLICK,clickRelease);
function clickRelease(evt:MouseEvent):void {
gotoAndPlay(2690);}
My movie pauses and no action is added to my buttons.
I get this error: TypeError: Error #1009: Cannot access a property or method of a null object reference.
at index_Scene1_fla::MainTimeline/frame2()
If I use the action:
addEventListener("addedToStage", oas);
function oas(ev){
init();
home_btn.addEventListener(MouseEvent.CLICK,clickHome);
function clickHome(evt:MouseEvent):void {
gotoAndPlay(2);}
release_btn.addEventListener(MouseEvent.CLICK,clickRelease);
function clickRelease(evt:MouseEvent):void {
gotoAndPlay(2690);}
The movie plays complete, but I get no actions in buttons and a error in my components textinput and button (they look like shaking).
I get this error: 1180: Call to a possibly undefined method init.
I tried to use the import flash.display.SimpleButton too, but it doesn't work too.
Anyone could help me????
Thanks,
Pedro

If you can provide a clear explanation of where the buttons are and where the code for them is located that might help lead to a solution. From what you have described already it is not clear where the code is and where the buttons are. You should not have to use an init function if you are doing so to wait for the buttons to be loaded... they are already loaded when you get wherever they are.
For the 1009 error, it is indicative of the object targeted by your code does not exist in theframe where that code is. SO if you have your code on frame 1 and your buttons are in frame 2, that would account for that error, as well as a few other possible scenarios.

What happens to the rendered animated buttons on sub-menus

I am on a 3GB of memory MacBook Pro using Encore (CS3). Here is a description of how I have produced a working DVD...so far 3 out of 5 DVDs I have tried to render have worked.
ANYWAY...seems that Encore implodes when I try to render the same project more than one at a time. Encore chokes and I am back in the MAC OS.
HERE is my main question...every time it blows it seems to blow away the RENDERED ANIMATED BUTTONS on the secondary menu. SO each time I try this again I have to re-render the buttons taking about 1.5 hours. Why do I have to re-render...why aren't the rendered 2nd level menus SAVED.
To make it clear...after I rendered the menus...previewed...saw the buttons are animated...SAVED...try to write a DVD Disc from the Current Project...succeed...try to burn another DVD...it aborts (why...I have no idea)...I empty trash...bring up Encore again...try to preview the secondary menu...NO ANIMATION there so have to rerender and start all over.
I have been reading about compatibility of DVD disc, computer players and DVD players...what a PILE...without all the techies our there we can't make a dependable environment to create, burn and play DVDs...these companies should be ashamed...all they are doing is producing a whole bunch of frustrated producers (or lack of producing producers).
Can anyone shed a light on my problem!?!?
Thanks, --bill
p.s. Are there better forums than here at Adobe? Seems I don't get many if any replies to queries.

Bill,
A couple of questions, mainly to make sure that I understand what is happening.
1.) There are two files (an audio and a MOV), that show in the Orphanage, when you Check Project. Do they appear there BEFORE you Check Project, or only AFTER?
2.) Do they appear BEFORE in your Project Panel, or only AFTER you Check Project?
3.) Since they are Orphans, I assume that you do not intend to use them in this Project - right? Were they ever in the Project (Imported as Assets, or Timelines)?
4.) Was this Project started fresh, or did you modify an existing Project, to create it, say using a Save_As, etc.?
5.) If they were not Imported into this Project, were they Imported into another Project, that is/was being worked on coincidental to this one?
6.) Can you find these files on your system? Where are they located?
If 1.) is After and 2.) is After, then your Project might be corrupt. The Assets/Timelines/etc. are linked to the Project by XML. This can become corrupt for many reasons, most are often unknown - power dip, or hardware issue on Save, etc..
Two ways to check this theory, is to start the Project from scratch, and see what happens. Another is to use a freeware program, XML Wrench, and run the Project file through it. Aside from pointing out broken links, and other problems, it should also allow you to search for these files names in the body. Save a copy of the Project file, so you will have it untouched, and then remove any lines, that reference these files. Save_As (new Project name) and open that in Encore. Being on MAC, doesnt every data file have a finder file, associated with it? Could this finder file be cross-linked, in some way, to your real Assets?
It could be that there is a hardware issue, and this causes the links to the Rendered files to become broken, and also to link to files, that should not be included. Any other strange things with your system lately? I do not know the MAC folder/file structure, but can you do the equivalent of Windows Check Disk? If so, set it to find lost clusters, or whatever MAC calls them.
Also, being on PC, I do not know what utilities might be available for your OS, or what other programs might be causing a problem. On PCs, other DVD burning software, especially if their packet-writing applet is installed, can cause havoc with Encore and are discouraged. Anything else installed, and/or running, that you can think of?
Sorry to play twenty questions, but Id like to be as clear, as I can, on exactly what is happening, before I make too many more guesses.
Hunt

Animated Button unexpected issues

Very weird. I've been working on an animated button - and suddenly when I preview in the browser (Chrome) the size has doubled unexpectedly.
I am not aware of having done anything to affect this, and the file looks exctly the same inside Animate.
I've checked and the elements within the symbol are the same size....

Stage at 100% Size given as 100px - but...

Add a hyperlink to animated button created in Edge.

Hello,
Is there any way to insert an animated button I created in Edge into Muse and add a hyperlink to it. The roll over and roll out work perfectly when inserted into my web page, I just can't attach any actions to it. Thanks.

I'm attempting to do exactly this, and when I preview the Muse site in the browser, I get a page not found reply.
As a test I've rigged up buttons in Muse that go to the exact same page, and they work perfectly.
When I click the link, this is added to the end of the url.
assets/design-page-animated-menu/logo-design.html, when the folders for assets, and design-page-animated-menu don't exist.
This url seems to be generated somewhere in the export/preview process, but is not the url I directed the Edge Animate link to. It is simply directed to logo-design.html which as far as I can tell should work, as both pages are in the same folder—when exported—with no subfolders involved.
Where is this longer url being generated, and is there anyway around it?
Edit.
Upon researching this further, I see that even though the muse pages are all in the same folder, the page that Edge is creating—that is being displayed on the Muse page via an iframe—is in it's own folder, and is therefore unable to see the pages I was linking to.
I see that as mentioned above, it's just better to use absolute urls, and that they just won't work in testing.

Animated Buttons: How to Change Clip?

My animated buttons always play the first 15 seconds of the chapter. I usually want to start the clip a few seconds later. How?

Select the chapter marker of the chapter you are working with. Move the CTI to the point you want the button animation to start. Right click, "Set Poster Frame." If there is already a poster frame separate from the chapter marker, you can drag that.
Duration etc is interesting. I think the duration of the menu is what is set for the buttons also. And a loop point will also be applied to the button, it appears from the poster frame.

A few questions on making animated buttons for a website Nav

Hello, I have a few questions on creating some animated buttons for a nav.
There are 2 actions I want to trigger on moue over.
If I want to use a static (PNG) image that I created in Photoshop for the actual button, can I use that? I want to smoothly slide button down on mouse-over and slide back up on mouse off. If I push part of the button off the "canvas" (sorry, this is coming from a Photoshop guy) will it disappear in the final animation? Another way to put that is, if I put an animated element off the white area, will it no longer show up in the movie (.swf) when it's published?
For the second part; you can see a bit of what I want to do if you look at this website's top Nav: http://www.photoshopsupport.com/index.html
I need the "light" above the button and it's going to be on another colored <div> so I can't set one solid BG color for my flash document. But I want to achieve the effect of the "bar" lighting up above the button and the actual button sliding down upon moue over.
Any help you can provide would be greatly appreciated.

Hi,
Regarding this button problem mentionned by kglad, it is easily overcome with a little trick.
I call this the undesired "jumpy button". Your button starts to hesitate down-back-down-back quickly, like it's a bug, and then it settles.
What you could do is create a simple sprite or movieclip containing only a simple shape, whatever the color, put it on top of your button's graphic, change this sprite/movieclip's alpha to 0, then add your mouse events on this invisible "target" instead of your graphic. So, when you mouse over, you have the graphic move, not the invisible "target".
Sometimes, for this invisible target, you will be using a movieclip, not a sprite, so you can easily add your own properties on it.
Example:
var graphicBtn:Sprite; // your png
var targetBtn:MovieClip; // your invisible target, created with code or not
targetBtn.graphics.beginFill(0x000000);
targetBtn.graphics.drawRect(0, 0, graphicBtn.width, graphicBtn.height);
targetBtn.alpha = 0;
targetBtn.mygraphic = graphicBtn;
targetBtn.addEventListener(MouseEvent.MOUSE_OVER, onOver);
targetBtn.addEventListener(MouseEvent.MOUSE_OUT, onOut);
addChild(graphicBtn);
addChild(targetBtn);
function onOver(event:MouseEvent):void
TweenLite.to(event.target.mygraphic, 0.25, {y:40, ease:Back.easeOut});
function onOut(event:MouseEvent):void
TweenLite.to(event.target.mygraphic, 0.25, {y:0, ease:Cubic.easeOut});
So you see, you can have only one function (well, 1 for over, 1 for out) used for all your buttons. You can add as many properties you need on your movieclip to make that one-function flexible.
Here I used GreenSock's tweening engine, but use the one you prefer (Here, I am moving the graphicBtn in y for 0.25 second).
Design Cyboïde
Création de sites web

Animated Button Oddity...

Hi, Using Encore 2. On my chapter selection page, I have animated buttons, they look great as a still...when rendered there is a one pixel line that shows up right above the bottom where the stroke meets the animated image. Since it's one pixel...it shimmers and ruins the menu. Is this an Encore issue, or something that I could do to fix it? Thanks

Joe, since the stroke is part of the %, they move together, I tried moving the entire button up, but it has no effect. It really looks awful and ruins the otherwise beautiful DVD. Is there a way to upload a jpeg screen capture? Thanks.
PS: I also have those same buttons that I use on still pictures and these don't display the same issue, so the issue is the rendering of the motion menu. I captured before and after renders...just let me know where to send them.

Convert To Timeline Animation Button doesnt appear.

Convert To Timeline Animation Button doesnt appear and its driving me crazy.
in the animation window its in frame animation mode and this button im talking about doesnt appear!.
Can someone please help me?!.

Timeline animation is only available for Photoshop Extended. You don't have Extended so you don't get to make timeline animations

Can i use animated buttons

Is it possible to have animated buttons or words on my iWeb site?

Another examples of a rollover being a link are #1 and #2 on this demo page: Mouse Rollover. It just takes any two images or graphic objects of any size.
OT

Animating buttons - How to go to another chapter when selected

I am putting together a DVD of soccer highlights. I thought it would be great to have an Animating button for each player with one of the best clips in the button. The problem I can't figure out is when the button is selected for that player it goes to the chapter# from the animation and not the chapter # where the player's highlights start. I thought I could do it with Button Override but there must be something I am missing. Thank you.

Bill,
One Timeline and one chapter for each player.
In previous DVD's I started each chapter with a jersey number that is in a static button.
Rather than start the animation with the jersey number and then the title to a clip (for each game I have a 4 second title with date, team score etc) I would like to have a highlight of their best play in their button.
I have gotten this to work with the first player(by adding two more chapters before the next player's chapter and using this chapter for animation and setting the end action to go to the player's chapter) but when the button is selected things go wrong. The animation that is in the button plays full screen and then jumps to the start of the player's chapter. I could live with this but when I add a second player using this same technique things seem to go wrong. I may of had some overrides that are the culprit.
From what you said what I am trying to do may not be possible but I wanted to give it a try. Thank you.
Bob

Creating an Animated Button

HI
I am new to flash. So i am trying to create an animated button, using a Movie Clip.
1. I create a Rectangle with a fill.
2. I convert it to a Symbol (Movie)
3. Double Click on the graphic to create it's on Timeline.
4. Why do i then need to convert to a symbol again?
It will not animate unless i convert that timeline button again.
I will now add a behavior, i think i am OK there...
Thanks in advance...

When you converted it to a movieclip. it already had a timeline. In step 3 you would be accessing that timeline, not creating it. Whether or not you need to convert the rectangle to a symbol (inside the movieclip) depends on what/how you intend to animate. Inside the movieclip the rectangle is the raw drawn item you started with, not an object that you can control except possibly to do a shape tween. If you plan to tween the rectangle, such as fading it or moving it, then it needs to be converted to at least a graphic symbol.

Please help - 3 second animated buttons

Hey all,
I am using Flash CS3 to create a button for a site I am building in Dreamweaver CS4.
The button I am trying to create looks like a volume knob on a guitar amp. I need it to
start at zero and then "turn up to 10" over a period of 3 seconds when the user hovers over
it. It also needs to play a sound on mouse over.
I have created seperate images in photoshop for the knob pointing at each increment 1-10. I
added these to a new Flash doc on separate layers. However I cannot figure out how to get it
set in a button. I tried both the layers version and exporting it as a movie and creating a
movie button.
I have created simple buttons but not one that "plays a longer animation" like this.
Thanks for any help you can provide!

Thanks! I appreciate your patience with my lack of knowledge here.
So I created a new .fla file as AS3, inserted each image into a frame and applied the stop() command to the first frame:
I then saved it as a Movie (.swf)
Is that correct?
Next steps...Do I then take that exported movie and insert it into a new layer in the original .FLA file and apply the action you outlined in your post?
Thanks again for your help and patience!!!!

Problems with animated buttons

hi
what I did:
in encore I imported a psd file with a background layer and 4 buttons
in after effects I animated the buttons so that they wiggle along
then back in encore (dynamic link) the buttons are wiggeling but they did nothing but wiggeling. the whole stuff from after effects was brought in as background
did I something wrong ?
what could I do to animate the buttons so that they wiggle and that they are real buttons ?
thanks for help

A "button" on a DVD-Video disc consists of two elements: One is a rectangular
hit area. The other is
subpicture highlight which can be made up of maximum three colors and which is enclosed by the hit area. Both are static elements.
Anything else on the menu is part of the background. You can have full color, moving elements in the background which look like buttons to the user, but the actual button is always the hit area - with or without an accompanying highlight.
The background with the wiggling buttons you made in AE can work just fine, but you can't have any highlights wiggling with it.

Code placement for drop down menu within an animated button

I have a main menu comprised of 7 buttons; 6 of which are all
straight forward with an animation. (The animation is that when the
buttons are rolled over the button extends itself out to the right.
On the rollout the button returns to its original state.) The 6 all
function fine.
The 7th menu button is the same idea but with the edition of
a two button drop down menu that appears when the main button is
rolled over. The roll over part is fine. My problem is moving the
cursor off the main button to get to the sub-menu items without
having them disappear once the cursor if off the main 7th button.
Within the time line of the 7th button (all of the buttons
are movie clip buttons) I put an invisible button, removing the
sections over both the main button and the sub buttons. I have
tried the following:
(I should point out that the labels within the button for the
animation are an _up, _over and _out states...the buttons animate
out in the _over label and animate back to the original position in
the _out label,)
The code and where I have (unsuccessfully) tried placing it
are as follows:
1.) On the invisible button itself (within the main button):
on (rollOver) {
gotoAndPlay("_out");
2.) On the Actions layer (within the main button):
invisible_btn.onRollOver = function () {
gotoAndPlay("_out");
3.) On the Actions layer (on the main timeline...which is
where the code for the other 6 buttons is and running as should):
btnMusic_mc.invisible_btn.onRollOver = function () {
btnMusic_mc.gotoAndPlay("_out");
4.) Just a slight variation of #3 (still on the Actions layer
of the main timeline):
btnMusic_mc.invisible_btn.onRollOver = function () {
brnMusic_mc.invisible_btn.gotoAndPlay("_out");
The result for all four of these options has been the same.
In rolling over the main button (btnMusic_mc) it does animate out
as it should, exposing the two sub buttons. But moving the cursor
off the btnMusic_mc neither allows me to reach the sub buttons nor
does the btnMusic_mc animate back to its first position (as it
should). It just snaps back into that position.
Clearly I am missing something here. Any thoughts would be
appreciated.

Here is what it should read, and does on Safari:
Rates and Hours
FAQ - Yoga
FAQ - Reiki
FAQ - Massage
No, it shouldn't and it doesn't. It should look like :
Rates, Hours, Reservations
Rates and Hours
FAQ - Yoga
FAQ - Reiki
FAQ - Massage
FAQ and Reserve - Training
Here's the correct part :
<select>
          <option value="">Rates, Hours, Reservations</option>
          <option value="http://yogareikimassage.com/MG/Rates.html*_top">Rates and Hours</option>
          <option value="http://yogareikimassage.com/MG/FAQ_-_Yoga.html*_top">FAQ and Reserve - Yoga</option>
          <option value="http://yogareikimassage.com/MG/FAQ_-_Reiki.html*_top">FAQ and Reserve - Reiki</option>
          <option value="http://yogareikimassage.com/MG/FAQ_-_Massage.html*_top">FAQ and Reserve - Massage</option>
          <option value="http://yogareikimassage.com/MG/FAQ_-_Personal_Training.html*_top">FAQ and Reserve - Training</option>
</select>
The <select> item was missing. And if you don't want the first line in the menu (Rates, Hours, Reservations) then don't enter it in the first place.
BTW, it's not a dropdown menu. It's a selection list in a form.

Animated button as3

Similar Messages

Maybe you are looking for