Simplifying Flex / AS3 Code
I've been programming in php for a while, but it was all procedural oriented. Now I have a project in Flex 3 and I made a simple script that animates (moves) a few objects, but I think I am missing the point of OOP here because I am repeating some things over and over ... Maybe , it mixed up with all the confusion I have regarding AS3, so please tell me if there is a smarter way to write this code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.events.EffectEvent;
public var opened1:Boolean;
public var opened2:Boolean;
public var opened3:Boolean;
public var opened4:Boolean;
[Bindable] public var pgW:Number;
private function init():void{
pgW = this.width;
opened1 = false;
opened2 = false;
opened3 = false;
opened4 = false;
addListeners();
}
private function mouseOver1(event:MouseEvent):void{
removeListeners();
if (opened2){
moveOut.target = txt2;
}
if (opened3){
moveOut.target = txt3;
}
if (opened4){
moveOut.target = txt4;
}
moveOut.play();
setOpened(1);
moveIn.target = txt1;
moveIn.play();
}
private function mouseOver2(event:MouseEvent):void{
removeListeners();
if (opened1){
moveOut.target = txt1;
}
if (opened3){
moveOut.target = txt3;
}
if (opened4){
moveOut.target = txt4;
}
moveOut.play();
setOpened(2);
moveIn.target = txt2;
moveIn.play();
}
private function mouseOver3(event:MouseEvent):void{
removeListeners();
if (opened1){
moveOut.target = txt1;
}
if (opened2){
moveOut.target = txt2;
}
if (opened4){
moveOut.target = txt4;
}
moveOut.play();
setOpened(3);
moveIn.target = txt3;
moveIn.play();
}
private function mouseOver4(event:MouseEvent):void{
removeListeners();
if (opened1){
moveOut.target = txt1;
}
if (opened2){
moveOut.target = txt2;
}
if (opened3){
moveOut.target = txt3;
}
moveOut.play();
setOpened(4);
moveIn.target = txt4;
moveIn.play();
}
private function addListeners():void{
btn1.addEventListener(MouseEvent.MOUSE_DOWN, mouseOver1);
btn2.addEventListener(MouseEvent.MOUSE_DOWN, mouseOver2);
btn3.addEventListener(MouseEvent.MOUSE_DOWN, mouseOver3);
btn4.addEventListener(MouseEvent.MOUSE_DOWN, mouseOver4);
}
private function removeListeners():void{
btn1.removeEventListener(MouseEvent.MOUSE_DOWN, mouseOver1);
btn2.removeEventListener(MouseEvent.MOUSE_DOWN, mouseOver2);
btn3.removeEventListener(MouseEvent.MOUSE_DOWN, mouseOver3);
btn4.removeEventListener(MouseEvent.MOUSE_DOWN, mouseOver4);
}
private function setOpened(nr:int):void{
if (nr == 1){
opened1 = true;
opened2 = false;
opened3 = false;
opened4 = false;
}
if (nr == 2){
opened1 = false;
opened2 = true;
opened3 = false;
opened4 = false;
}
if (nr == 3){
opened1 = false;
opened2 = false;
opened3 = true;
opened4 = false;
}
if (nr == 4){
opened1 = false;
opened2 = false;
opened3 = false;
opened4 = true;
}
trace("opened" + nr);
}
private function setPositions(event:EffectEvent):void{
event.effectInstance.target.x = -(pgW);
}
private function klik(event:MouseEvent):void {
event.stopPropagation();
}
]]>
</mx:Script>
<mx:Move id="moveIn"
xFrom="{-pgW}" xTo="0"
yFrom="0" yTo="0"
duration="1000"
effectEnd="addListeners();"/>
<mx:Move id="moveOut"
xFrom="0" xTo="0"
yFrom="0" yTo="250"
duration="1000"/>
<mx:Image id="btn1" source="assets/img/32/32-btn1.swf"
x="0" y="0"
width="100%"
click="klik(event)"/>
<mx:Image id="btn2" source="assets/img/32/32-btn2.swf"
x="0" y="0"
width="100%"
click="klik(event)"/>
<mx:Image id="btn3" source="assets/img/32/32-btn3.swf"
x="0" y="0"
width="100%"
click="klik(event)"/>
<mx:Image id="btn4" source="assets/img/32/32-btn4.swf"
x="0" y="0"
width="100%"
click="klik(event)"/>
<mx:Image id="txt1" source="assets/img/32/32-txt1.swf"
x="{-pgW}" y="0"
width="100%"/>
<mx:Image id="txt2" source="assets/img/32/32-txt2.swf"
x="{-pgW}" y="0"
width="100%"/>
<mx:Image id="txt3" source="assets/img/32/32-txt3.swf"
x="{-pgW}" y="0"
width="100%"/>
<mx:Image id="txt4" source="assets/img/32/32-txt4.swf"
x="{-pgW}" y="0"
width="100%"/>
</mx:Canvas>
Thanks a lot for your time!
t.
source to share
Your code example is PERFECT for being OO'ed (made object oriented).
You have four things (which you will define with a single class) which contain a link to a button, text, open state, etc. So you define one class as an MXML component that contains a button, text, and any other state, and you put ON THAT COMPONENT methods (in a block <mx:Script>
). Also, you initialize a component in it creationComplete
so that the public variable is false when it finishes the internal drawing. Even your method is mouseOver
perfect: you can let the objects decide if they need to do something or not (and the MXML component will automatically handle events). Basically, this is what we're going to do: the MXML component deals with its own internal state, not an external object that needs to manage state for the list.
Since the MouseOver method will be placed in your MXML component, each of them will need to contain references to the others. There are many ways to do this, including passing in a reference at some point earlier and saving it, or having a static
var that contains a list of x other objects.
Hope this makes sense and helps.
source to share
Hurry up and do something like. In pseudocode:
init()
btn[] = create array of buttons
txt[] = create array of txt
opened[] = create array of boolean
opened[] = false
for each btn
btn.mouseover = mouseover
add listeners
mouseover
remove listeners
i = find source btn index from event
moveout.target = movein.target
moveout.play
opened[] = false
opened[i] = true
movein.target = txt[i]
movein.play
You probably don't need public variables.
source to share
In fact, the value moveOut.target
after the next code segment is executed will always be txt3
if opened3
equal true
(regardless of the values opened2/3
). Is this by design or opened1/2/3/4
mutually exclusive (only one can be true at a time) or are you missing instructions else
or ...?
if (opened1){
moveOut.target = txt1;
}
if (opened2){
moveOut.target = txt2;
}
if (opened3){
moveOut.target = txt3;
}
source to share