How to do this? (puccaclub)

[infiniti]

http://puccaclub.com/pucca_eng/

I am curious how the site is modularized. So a guess would be that each box being a movie clip with a few buttons inside, and on mouse over the box will load an animation (also a movie clip) on top. Every box is being placed in a big movie. Does this sound right? (I am more interested to know how each box is created)

[jayouk]

There are a number of ways to do this.

One way is to make each box a seperate swf. Over each movies goes an invisibible button the size of the stage which plays a movie clip animation.

Another way is that each side is a seperate swf. The way they could look seperate would be to use layer masks above the animated movie clip layer so it would only be visible in that particular module.

Make sense?

[pixelwit]

I think there's more to it than that. To me the trickiest part of the site seems to be the fact that the site uses buttons nested within other buttons.

The Big square (like "Pucca is") is a button that causes the animation to play-in on RollOver and (*NOTE*) play-out on RollOut. The reason I say it's a button is because you can see the hand cursor when you rollOver it.

Within the big square button there are smaller rectangular buttons ("Profile", "Pucca's Room" and "News") which seem to be buttons since they also display the hand cursor and they maintain complex behaviors such as not activating if you dragOut and release outside the button.

If you never tried this before it seems like the solution would be pretty easy. Make a big button to control the animation then place a series of small buttons over the big button to "do things". The trouble is you can never be Over two buttons at any one time. So when you rollOver any one of the little buttons you must first rollOut of the big button then rollOver the little button. This is a problem because as soon as you rollOut of the big button, the animation will try to play-out (see *NOTE* above)even though you're still over the small button which is over the big button. Confusing? You bet. Maybe reading it a few times will help, if not, try it yourself and let me know what you discover.

I've come up with a way to do it but it's a bit clunky. I'll post it later if nobody else comes up with a solution. Consider it a challenge of sorts. :) I look forward to your solutions.

-PiXELWiT
http://www.pixelwit.com

[rrottman]

1.
Maybe the menu items (the text) is not buttons at all but they use the mouse position within each scene to highlight the menu items and do a selection on press?

2.
Maybe they maintain a variable. So if you roll over one of the menu items (text) they set "menuitemactive = true" and within the roll-out eventhandler of the bigger button they only rewing the animation (play off) if none of the menuitems is active (menuitemactive == false)?

[pixelwit]

I considered your #1 solution but the text buttons exhibit fairly complex behaviors like activating on Release not press and not activating on dragOut which would be a pretty long way to go (coding wise) just so you can use a big standard button to activate the animation.

#2 seems like a good bet, but I'm not convinced just yet. I believe you will rollOut of the big button before you register a rollOver in the small text button. Therefore any variable you set with the onRollOver of the little button will come too late since by that time you've already rollOut of the big Button. I attached a file showing this behavior.

For the record, my current solution is 25 lines total and controls one big button and three subButtons.

I hope you keep at this since I would really like to see some different ways of achieving this effect.

-PiXELWiT
http://www.pixelwit.com

[rrottman]

Would you mind explaining the concepts behind your code / solution in a few words?

[pixelwit]

Well I "could" but what would be the challenge in that? :)

-PiXELWIT
http://www.pixelwit.com

[pixelwit]

I'm trying to have a little fun so I've turned my solution to the nested buttons problem into a game of sorts. I've set everything up for you, all the buttons, the animation, frame labels and everything else, it's all there. I even left the basic code structure intact but I removed the four key segments which make everything "go".

In my solution the missing code is fairly simple. If you were to count all the characters in the four missing lines of code, there'd be less than 100 total characters.

All the code is placed on the first frame of the BlockClip.

When you add the right lines of code everything should work almost exactly like the example on the PuccaClub site. I've found one difference but it's hardly noticeable since it involves right-clicking.

Winner gets... ummm.... winner gets to officially refer to themselves as"Winner" amongst all their friends and coworkers.

Now hurry up and take a whack at the "Nested Button Challenge". You know you want to.

File attached.

-PiXELWiT
http://www.pixelwit.com

[infiniti]

took a guess but something is missing :(


SubButton1.onRollOver =
SubButton2.onRollOver=
SubButton3.onRollOver =

myHit.onRollOver = function(){
if(comingIn==false){
NM8.gotoAndPlay("intro");
comingIn = true;
}
}

SubButton1.onRollOut =
SubButton2.onRollOut =
SubButton3.onRollOut =

myHit.onRollOut = function(){
if(comingIn == true){
NM8.gotoAndPlay("outro");
comingIn = false;
}
}


I know where the problem is but can't think of a solution. Basically having buttons and the box sharing the same function messes up. PixelWit please release the solution so I don't need to use my stupid brain :)

[infiniti]

there's one more thing I couldn't figure out. The name buttons, I see that you use labels to name them, but when I go in the MC I can't modify anything in the hit area and text labels. I couldnt understand this part, I tried using labels with spaces but when I want to use the instance name in actionscript I can't. Does this make sense? So say I used label "What is" for a name button and in the actions What is.onRollOver is obviously a syntax error. Any solutions to get away with this? Thanks.

[pixelwit]

The name buttons are just quick easy buttons I use for testing. They'll display whatever name you give them when you drag them on stage. If you want them to display a different name you need to change the textField's variable name.

You can't play with the Label and HitArea layers because they are locked.

-PiXELWiT
http://www.pixelwit.com

[infiniti]

The website is finally back up, please ignore my email. I figured out changing the instance name part, but if I want the buttons to show something like "For Kids", with the space I won't be able to use the instance in the actionscript. So For Kids.onRollOut is a syntax error, was looking to get around this.

Do you mind releasing the solution to the nestedbutton challenge? I am in a hurry with this stuff, thanks!

[infiniti]

Anyone can help solving this challenge? I am in a major hurry!!!! Help please!!

[Mortimer Jazz]

Hey pix, when you say 4 lines of code do you count the code inside an if-statment as a line? - damn you for wasting my morning. You know I love puzzles ;)

[pixelwit]

Hey Infinity, I sent you the solution about three days ago in a private message.

Thanks for the link in the General Chat forum Mort.

Regarding how many lines you're allowed, all you need to do is replace the comments with code.

Still surprised nobody has found the solution yet.

Keep trying, it can be done.

-PiXELWiT
http://www.pixelwit.com