FORUMS: list search recent posts

[AS3] How to have different layers on different frames?! (Avatar Creator)

COW Forums : Adobe Flash

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Alex Cameron
[AS3] How to have different layers on different frames?! (Avatar Creator)
on Nov 20, 2011 at 8:31:25 pm

Hi,

I am creating a web-nased online game using mainly php. However I would like there to be some certain flash elements involved and I am currently having trouble at the first hurdle.

I want my users to be able to create their own avatars, being able to select a skin tone, hair, top, legs, and shoes. Here is a (ROUGH!) diagram:
<-----O----->
<----/I --->
< --_/ _--->

There would be more arrows than that (1 for hair, 1 for skin, 1 for top, 1 for bottom, and 1 for shoes).

At the moment I have the following code: stop();

btn2.addEventListener(MouseEvent.CLICK, backward);
btn1.addEventListener(MouseEvent.CLICK, forward);

function forward(event:MouseEvent)
{
if (this.currentFrame == 5)
{
gotoAndStop(2);
}
else
{
nextFrame();
}
}


function backward(event:MouseEvent)
{
if (this.currentFrame == 2)
{
gotoAndStop(5);
}
else
{
prevFrame();
}
}


When I play my movie, I go to click the buttons i have made for the skin tone and it cycles through the skin tones which is GREAT, however... it also cycles through the different hair colours and tops and legs and shoes all at the same time...

SO MY QUESTION IS!:

How do I seperate buttons so that one set of buttons will go foward and backward through the skin tones, then the next set for hair, the next for top etc.

So for example, I can select a dark skin tone, and then blonde hair, and then a red top... but be able to interchange the different types.

Does that make sense?

I am completely new to flash so please bear with me! :)


Return to posts index

Pieter Helsen
Re: [AS3] How to have different layers on different frames?! (Avatar Creator)
on Nov 20, 2011 at 9:07:27 pm

Hey Alex,

First of all, I suggest reading up on class in Actionscript 3:
http://www.kirupa.com/developer/as3/classes_as3_pg1.htm

AS2 was all about putting actions on the timeline. AS3 is far more structured and allows you to create classes and subclasses.

Then, I would read OOP basics:
http://active.tutsplus.com/tutorials/actionscript/as3-101-oop-introduction-...

OOP explains how classes can inherit from other classes, creating subclasses.

The reason why you need this, is because you have an application that will benefit greatly from OOP code.

The way I would write an application like the one you suggest is by writing a class called Button, and that button would have two subclasses: LeftButton and RightButton.

The Button class would have the logic for rollovers and such. The Right and LeftButton classes would set the appearance of the button and the click actions. (go right, go left)

Then, you would need an AssetScroller class. The asset scroller class is really a container which contains your buttons, and your 'assets' the hair styles, shirts, etc.

The AssetScroller class would need a public function called addAsset or something similar.

Using those classes and functions, you would create something like this:

var hair:AssetScroller = new AssetScroller();
hair.addAsset(new RedHead());
hair.addAsset(new Brunette());
addChild(hair);

var top:AssetScroller = new AssetScroller();
top.addAsset(new Coat());
top.addAsset(new Shirt());
top.addAsset(new BikiniTop());

etc....


Now, what the addAsset function would do is really up to you.
The way I suggest doing it would be this:

[code]
public function addAsset(asset:MovieClip):void {
if(_assets.length != 0) asset.visible = false; // hide the asset if it is not the first asset being added to the scroller
_assets.push(asset); // this is an array and a private class property, so that is available every in your class' code
addChild(asset);
}
[/code]

Then... on your buttons, I would a code similar to this:

[code]
_left.addEventListener(MouseEvent.CLICK, leftClickHandler, false, 0, true); // _left is the private class property holding an instance of your LeftButton class

_right.addEventListener(MouseEvent.CLICK, rightClickHandler, false, 0, true); // _right is the private class property holding an instance of your RightButton class

private function leftClickHandler(evt:MouseEvent):void {

var current:MovieClip = MovieClip(_assets[_index]);
current.visible = false; // hide the 'current' button

if(_index != 0) _index--; // decrease the index by one
else _index = _assets.length - 1; // set the index to the LAST element

current = MovieClip(_assets[_index]);
current.visible = true;

}

private function rightClickHandler(evt:MouseEvent):void {

var current:MovieClip = MovieClip(_assets[_index]);
current.visible = false; // hide the 'current' button

if(_index != _assets.length -1) _index++; // increase the index by one
else _index = 0; // set the index to the FIRST element

current = MovieClip(_assets[_index]);
current.visible = true;

}


This is very high level of course. You'll still have to fill in the other functionalities of the classes. But this, along with the articles at the top, should get you underway.

Kind regards,
Pieter

General notice: from now on, I would like to ask everyone to put [AS2] or [AS3] (corresponding to the version of actionscript you are using on your project) in front of their post titles when the question is actionscript related! Please help us help you faster. Thank you.


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 CreativeCOW.net All Rights Reserved
[TOP]