View Full Version: AS2 Crash Course!

lassie >>Discussions >>AS2 Crash Course!


<< Prev | Next >>

fatbuoy1- 12-02-2007
AS2 Crash Course!
Edit: This post chronicals the various AS2 problems I had in making this website for a student project. I knew literally NOTHING about AS2 scripting before this, so if anyone else is in the same situation, this could be useful to you. Thanks again to Greg for all his advice! Im having problems with making a website in Flash. I have several menu buttons that appear when a button is clicked (they're contained within the 'Over' frame of the main button), like a pop-up menu. The problem is that whenever I scroll over one of the buttons, they all refresh themselves, playing through the 'appear' animation again. Anyone got any ideas how to stop this?

bigmac- 12-02-2007

Hey Chris... good concept on trying to make the pop-out menu with button states, but unfortunately, that isn't going to work for you. A button has a set hit area and will receive all mouse events (rollover, click) within those bounds, effectively blocking all mouse events to the button's child objects. As such, scripts are disabled within clips nested in button objects. So, you'll need to use our good friend the MovieClip. Make the MovieClip with two frames: one as the closed state with just the toggle button on it, the other as the open state with the popout menu. In frame one actions, stop the timeline and target the toggle button with a script... as in: stop(); toggle_btn.onPress = function() { gotoAndStop(2); } then on frame 2, do the same thing in reverse, and include all the sub menu items... as in: stop(); toggle_btn.onPress = function() { gotoAndStop(1); } menu1_btn.onPress = function() { // do something } menu2_btn.onPress = function() { // do something else } That's it. I also generally implement click-off functionality for pop-outs. That way, if someone clicks some random place on the screen, the menu will close. It's easy... Use frame-1 script from above, but add: if (this.onMouseDown != undefined) { delete this.onMouseDown; } Then use frame-2 script from above, but add: this.onMouseDown = function() { gotoAndStop(1); }

fatbuoy1- 12-03-2007

Thanks a ton Greg, you make it seem so easy! I actually had created a movie clip with 2 frames and a gotoAndStop but I was putting the actionscript on the buttons themselves, as opposed to the frames, so it went to frame 2 ok, but when i rolled over one of the sub-menu buttons it re-loaded frame 2, which made the buttons 'appear' again. So in future, should I always keep the coding to the frame, as opposed to each individual button, and basically just put instance_name. before the instruction to make it apply to a particular object?

fatbuoy1- 12-03-2007

Slight hiccup, I do like the click-off function but for some reason its just going back to frame 1 if I click ANYWHERE, even if its on one of the menu buttons. Any ideas?

bigmac- 12-03-2007

First, yes... NEVER put AS directly onto a clip. It's absolute and utter crap. It was a feature built into flash to accommodate non-code saavy folks like designers so that they could clickey-clickey and write simple commands to make Flash do tricks. However, from a development standpoint, its a nightmare because you've got peace meal code running rampant throughout your app. It makes you loose track of what has actions and what doesn't since there's no visual indicator that actions have been applied. Suddenly you've got object-specific actions getting lost in your program which creates weird results that you have no idea where they're coming from. I call them "gremlins"... stuff that sneaks or lingers in your program after they've outlived their purpose or have been modified. Clip actions introduce LOTS of gremlins. Anyway, that was a really long winded way of saying that you should always attach actions from a central source on the parent timeline. As for the menu click off... oh yeah. I did oversimplify that. You've got to hit--*test*-('") the current clip to see if you clicked outside of bounds, at which time you trigger close... So, use this as the frame-2 click-off script: this.onMouseDown = function() { if (!this.hitTest(_root._xmouse, _root._ymouse, true)) { gotoAndStop(1); } }

fatbuoy1- 12-03-2007

non-code saavy folks like designers Hey thats me! :D Thanks Greg i'll try that.

bigmac- 12-03-2007

No offense intended... I didn't mean to be overly harsh on designers; but some rage may have slipped out since they've been making my life very difficult recently. :? FYI: a couple excellent ways to make your flash guy go postal: 1) be anal and unwilling to compromise on a short timeline. 2) make frequent changes and hover over said flash guy's shoulder wondering why his interactive has old elements. 3) assume that all animation is simple key-framing and that totally changing something is just a matter of adjusting a timeline layer. 4) Ignore the fact that the site isn't fully navigable yet and complain that the logo doesn't have random ambient animations. 5) Design so that everything on screen glows. (ARGH!) 6) Keep flash guy working 60 hours a week for two months. k... maybe I'm bitter. Sorry. I feel better though. I promise I'll be friendlier soon! :roll:

fatbuoy1- 12-03-2007

Ouch, sounds diabolical. No offense taken :D Sounds like you're being expected to take bad design and magically make it good.

Matt Kempke- 12-04-2007

Hope that phase will end soon ... there's light at the end of the tunnel - if not just program it :)

bigmac- 12-04-2007

Sounds like you're being expected to take bad design and magically make it good. Wow, you have no idea how far ahead of the game you are if you're going into the great world of interactive design! Yep, that's what you do an a multimedia guy... Even exceptionally talented designers are somewhat hit-or-miss on producing graphics that come together into a successful interactive experience. As a multimedia guy, you've got to figure out how to reproduce the look of the pretty graphics while sealing the user into a little glass jar that limits their mobility to the flow of the site. It's often a fairly abstract concept that is totally separate from the visuals. Course, I don't mean to short sell designers... their job is not easy either. I know designers are fighting a constant battle with clients over tasteful visuals :). I guess designers fight with clients to make it look pretty, then developers fight designers to make it actually work.

fatbuoy1- 12-06-2007

Yeah, but if you DESIGN something that means more than just making it look pretty, its supposed to function too, otherwise you're an artist, not a designer. Thats what this project i'm doing is about actually; we've designed a large wall display, and now we have to design a booklet and a website to go with it, so we're effectively applying the same concept to 3 very different media. My concept kind of hangs on the fact that people will be walking past the display, so for my website i'm trying to implement an avatar-like navigation system who walks from page to page.. in many ways im kinda trying to turn it into a very small adventure game!

fatbuoy1- 12-06-2007

Does flash have a problem when you have too many movies-within-movies? I'll try and explain... What I WANT to happen is when the user rolls over the little man figure in the bottom right hand corner, an arrow and a speech bubble saying 'menu' appear. Click on the arrow and you move to the next screen, roll over the speech bubble and it expands to reveal the menu (so you can jump to anywhere in the site). The first part is achieved as you advised, i.e. 2 frames, one with just the figure, and the second with an arrow and the speech bubble, and it works fine. However, because i'm basically wanting the speech bubble to do the same again, i just used the same technique, and it KINDA works... when i roll over the menu it does expand to show the whole menu... but the buttons dont work. They don't even play their 'over' state... Heres the code thats in the second frame of the main movie (which is placed in the scene), the code regarding the speech bubble is at the bottom, and like i said it does move the specch bubble movie to the next frame, it just doesnt allow any kind of functionality within that frame: stop(); // Open up the navigation avatar.onPress = function() { gotoAndStop(1); } // Go to next section next_btn.onPress = function() { _root.play(); } // Close navigation this.onMouseDown = function() { if (!this.hitTest(_root._xmouse, _root._ymouse, true)) { gotoAndStop(1); } } // MENU //Making the menu expand speech_bubble.onRollOver = function() { speech_bubble.gotoAndStop(2); } That probably didnt make much sense, but any suggestions? :D

bigmac- 12-06-2007

If you could post a screen shot, it would be extremely helpful to this discussion. However, I think I understand what you're saying, and I think I know the problem. But for starters: no, flash does not have any (set) limit on clip nesting. Theoretically, you could hit a saturation point where Flash rendering chokes... but in my experience I've never come close to hitting it. As for your problem, correct me if I'm wrong but you have the rollover action that launches this pop-out balloon on the avatar (parent clip), then have the popout balloon graphic and buttons nested inside it as children? If so, therein lies your problem... guess this calls for a quick explanation on event capture versus bubbling. Event Capture is a top down approach. An event starts at the top of the DOM tree and works it's way down until it is received by a target, at which time the event stops propagating (being sent to new objects). Event Bubbling works the opposite direction. It starts at the source, then sends an event up through the DOM. So, assuming you're working in AS2, you're in an event capture model. That means that mouse events stop propagating when they encounter a receiver... in this case, the parent avatar clip (which has a rollover event on it). No children of the avatar clip will receive mouse events so long as that parent clip has a rollover. Make sense? There are a couple solutions to this. I go back and forth depending on the circumstance, you'll probably be fine with the easy one... though I'll include both. method A (easy): make the opener button with the rollover action a child of the avatar (and a sibling of the other buttons). That way the opener object is receiving mouse events at the same level as the nested buttons. I covered this in my first code example of this thread when I said to put the menu-open rollover action on a button inside the movie clip. method B (hard): dynamically attaching and removing mouse event handlers. Sometimes the situation won't allow for a nested button as the trigger, at which time you'd need to add mouse actions initially to open the panel, delete the mouse actions while the panel is open (to expose events to the nested buttons), then re-attach the mouse actions when the panel closes. So, does that make any sense? Let me know if you need further clarification.

fatbuoy1- 12-06-2007

Im a bit confused about the child/parent/sibling thing, is that something I need to set, or is it just a case of whether or not they're nested within one another? I'll upload the .swf for you to look at, thanks again by the way!

fatbuoy1- 12-06-2007

heres the .swf so you can kind of see what im trying to achieve. Excuse the rough look of it! http://www.pigstylearts.co.uk/vernacular-web.html

Forumer™ is Voted #1 Free Forum Hosting provider
Build your own community today with the largest message board hosting company.