Creating obstacles in AS3 - actionscript-3

Question

I'm having troubles with creating obstacles in Flash. I managed somehow to create obstacles but are only visible if there is no background. When adding one they simply disappear...
Here's the code for the main.as file:
package {
import flash.display.MovieClip;
import flash.events.Event;
import flash.filters.BitmapFilterQuality;
import flash.filters.BlurFilter;
import flash.utils.setInterval;
import flash.utils.clearInterval;
public class Main extends MovieClip {
private var obstacleArray:Array;
private var obstacleInterval:uint;
private var rural2:Rural2;
private var rural3:Rural2;
private var cityFront2:CityFront2;
private var cityFront3:CityFront2;
private var cityBack2:CityBack2;
private var cityBack3:CityBack2;
private var skyline:Skyline;
private var skyline2:Skyline;
public var ship:Ship;
public function Main() {
// constructor code
obstacleArray = new Array();
obstacleInterval = setInterval(createObstacle, 1000);
addSkylineToStage();
addCityBack2ToStage();
addCityFront2ToStage();
addRural2ToStage();
createShip();
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function addSkylineToStage() {
skyline = new Skyline();
/*var myBlurFilter:BlurFilter = new BlurFilter(8,8);
skyline.filters = [myBlurFilter];*/
stage.addChild(skyline);
skyline2 = new Skyline();
skyline2.x = skyline.width;
stage.addChild(skyline2);
}
private function addCityBack2ToStage() {
cityBack2 = new CityBack2();
cityBack2.y = 310;
cityBack2.x = 20;
var myBlurFilter:BlurFilter = new BlurFilter(3.7,3.7);
cityBack2.filters = [myBlurFilter];
stage.addChild(cityBack2);
cityBack3 = new CityBack2();
cityBack3.y = 310;
cityBack3.x = cityBack2.width-20;
cityBack3.filters = [myBlurFilter];
stage.addChild(cityBack3);
}
private function addCityFront2ToStage() {
cityFront2 = new CityFront2();
cityFront2.y = 310;
var myBlurFilter:BlurFilter = new BlurFilter(2.3,2.3);
cityFront2.filters = [myBlurFilter];
stage.addChild(cityFront2);
cityFront3 = new CityFront2();
cityFront3.y = 310;
cityFront3.x = cityFront2.width-8;
cityFront3.filters = [myBlurFilter];
stage.addChild(cityFront3);
}
private function addRural2ToStage() {
rural2 = new Rural2();
rural2.y = 410;
stage.addChild(rural2);
rural3 = new Rural2();
rural3.y = 410;
rural3.x = rural2.width-2;
stage.addChild(rural3);
}
var position:String = 'bottom';
private function createObstacle(){
if(position == 'bottom'){
position = 'top';
}else{
position = 'bottom';
}
var obstacle:Obstacle = new Obstacle(stage,position);
obstacleArray.push(obstacle);
obstacle.x = stage.stageWidth;
addChild(obstacle);
}
private function stopObstacles(){
for(var i:int = 0; i<obstacleArray.length;i++){
var obstacle:Obstacle = obstacleArray[i];
obstacle.removeEvents();
}
clearInterval(obstacleInterval);
}
private function onEnterFrame(evt:Event) {
rural2.x -= 2;
rural3.x -= 2;
if(rural2.x <= -rural2.width){
rural2.x = rural3.width-4;
}
if(rural3.x <= -rural3.width){
rural3.x = rural2.width-4;
}
cityFront2.x -= 1;
cityFront3.x -= 1;
if(cityFront2.x <= -cityFront2.width){
cityFront2.x = cityFront3.width-15;
}
if(cityFront3.x <= -cityFront3.width){
cityFront3.x = cityFront2.width-15;
}
cityBack2.x -= 0.5;
cityBack3.x -= 0.5;
if(cityBack2.x <= -cityBack2.width){
cityBack2.x = cityBack3.width-50;
}
if(cityBack3.x <= -cityBack3.width){
cityBack3.x = cityBack2.width-50;
}
skyline.x -= 0.25;
skyline2.x -= 0.25;
if(skyline.x <= -skyline.width){
skyline.x = skyline2.width-2;
}
if(skyline2.x <= -skyline2.width){
skyline2.x = skyline.width-2;
}
for(var i:int = 0; i<obstacleArray.length; i++){
var obstacle:Obstacle = obstacleArray[i];
if(obstacle.hitTestObject(ship)){
stage.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
stopObstacles();
}
}
}
public function createShip() {
ship = new Ship(stage);
stage.addChild(ship);
ship.x = 20;
ship.y = 180;
}
}
}
And the code for obstacles.as file:
package {
import flash.display.MovieClip;
import flash.events.Event;
import flash.display.Stage;
public class Obstacle extends MovieClip {
private var speed:Number = 3;
private var mPosition:String;
private var mStage:Stage;
public function Obstacle(stage:Stage, position:String = 'bottom') {
// constructor code
mPosition = position;
mStage = stage;
addEvents();
setPosition();
}
private function setPosition(){
var factor:Number = Math.random()+0.3;
this.scaleY = factor;
if(mPosition == 'bottom'){
this.y = mStage.stageHeight - this.height;
}else{
this.y = 0;
}
}
private function addEvents(){
addEventListener(Event.ENTER_FRAME, onFrame);
}
public function removeEvents(){
removeEventListener(Event.ENTER_FRAME, onFrame);
}
private function onFrame(evt:Event){
this.x -= speed;
}
}
}
How can I tweak the code, so both the parallax background and obstacles will be seen on the stage?
Thank you!

Answer 1

Oh, initially I missed the "setInterval" in your code which should indeed add your obstacles over the other elements. Maybe try setting their index to the top when they get added? So:
addChildAt(obstacle,stage.numChildren-1)
For testing layering issues, you can try setting all your elements alpha to 0.5 so you can see if something is on the stage but behind other elements or just not getting added to the stage.
Also, http://www.monsterdebugger.com is really helpful for debugging display list issues because you can select elements in the debugger and see their location on the screen.