I'm having a really weird problem with the MOUSE_OVER event. I'm building dynamic tabs representing mp3 songs containing textfields with info and a dynamic image for the cover art. I am trying to get a simple MOUSE_OVER working over the whole tab, such that you can select the next song to play.
I am using a Sprite with alpha 0 that overlays my whole tab (incl. the textFields) as a Listener for MOUSE_OVER and _OUT... I've checked by setting the alpha to something visible and it indeed covers my tab and follows it around as I move it (just making sure I'm not moving the tab without moving the hotspot). Also, I only create it once my cover art is loaded, ensuring that it will cover that too.
Now, when the tab is in the top position, everything is dandy. As soon as I move the tab to make space for the next tab, the textFields break my roll behaviour... just like that noob mistake of overlaying a sprite over the one that you're listening for MouseEvents on. But... the roll area is still on top of the field, I've set selectable and mouseEnabled to false on the textFields... nothing.
It is as if the mere fact of moving the whole tab now puts the textField on top of everything in my tab (whereas visually, it's still in its expected layer).
I'm using pixel fonts but tried it with system fonts, same thing... at my wits end here.
public function Tab(tune:Tune) {
_tune = tune;
mainSprite = new Sprite();
addChild(mainSprite);
drawBorder();
createFormat();
placeArtist();
placeTitle();
placeAlbum();
coverArt();
}
private function placeButton():void {
_button = new Sprite();
_button.graphics.beginFill(0xFF000,0);
_button.graphics.drawRect(0,0,229,40);
_button.graphics.endFill();
_button.addEventListener(MouseEvent.MOUSE_OVER, mouseListener);
_button.addEventListener(MouseEvent.MOUSE_OUT, mouseListener);
_button.buttonMode = true;
mainSprite.addChild(_button);
}
private function mouseListener(event:MouseEvent):void {
switch(event.type){
case MouseEvent.MOUSE_OVER :
hilite(true);
break;
case MouseEvent.MOUSE_OUT :
hilite(false);
break;
}
}
private function createFormat():void {
_format = new TextFormat();
_format.font = "FFF Neostandard";
_format.size = 8;
_format.color = 0xFFFFFF;
}
private function placeArtist():void {
var artist : TextField = new TextField();
artist.selectable = false;
artist.defaultTextFormat = _format;
artist.x = 41;
artist.y = 3;
artist.width = 135;
artist.text = _tune.artist;
artist.mouseEnabled = false;
mainSprite.addChild(artist);
}
private function placeTitle():void {
var title : TextField = new TextField();
title.selectable = false;
title.defaultTextFormat = _format;
title.x = 41;
title.y = 14;
title.width = 135;
title.text = _tune.title;
title.mouseEnabled = false;
mainSprite.addChild(title);
}
private function placeAlbum():void {
var album : TextField = new TextField();
album.selectable = false;
album.defaultTextFormat = _format;
album.x = 41;
album.y = 25;
album.width = 135;
album.text = _tune.album;
album.mouseEnabled = false;
mainSprite.addChild(album);
}
private function drawBorder():void {
_border = new Sprite();
_border.graphics.lineStyle(1, 0x545454);
_border.graphics.drawRect (0,0,229,40);
mainSprite.addChild(_border);
}
private function coverArt():void {
_image = new Sprite();
var imageLoader : Loader = new Loader();
_loaderInfo = imageLoader.contentLoaderInfo;
_loaderInfo.addEventListener(Event.COMPLETE, coverLoaded)
var image:URLRequest = new URLRequest(_tune.coverArt);
imageLoader.load(image);
_image.x = 1.5;
_image.y = 2;
_image.addChild(imageLoader);
}
private function coverLoaded(event:Event):void {
_loaderInfo.removeEventListener(Event.COMPLETE, coverLoaded);
var scaling : Number = IMAGE_SIZE / _image.width;
_image.scaleX = scaling;
_image.scaleY = scaling;
mainSprite.addChild (_image);
placeButton();
}
public function hilite(state:Boolean):void{
var col : ColorTransform = new ColorTransform();
if(state){
col.color = 0xFFFFFF;
} else {
col.color = 0x545454;
}
_border.transform.colorTransform = col;
}
Fixed it. What was happening was that I didn't set the height of the textfield. That was overshooting the tab and hence lying over the previously instantiated tab, blocking MouseOver... don't even ask.
Related
I have a png image on top of any elements that are added to the working area. The user can click and drag new elements to the area and then print the picture they create. The png image is not moveable. The png image acts as a background image or like a container for the user's picture.
When I try to print it, the png image does not show. I get the elements to show nicely, but that is it. If I change a few things I am able to print only the png image and not the elements. How do I get them to print together?
//This puts my png image on top and unclickable
stage.addChild(seal);
seal.mouseEnabled = false;
//this brings the current element to the front
for (var fl_ChildIndex_5:int = 0;
fl_ChildIndex_5 < this.numChildren;
fl_ChildIndex_5++) {
this.getChildAt(fl_ChildIndex_5).addEventListener(MouseEvent.CLICK, fl_ClickToBringToFront_5);
}
function fl_ClickToBringToFront_5(event:MouseEvent):void {
this.addChild(event.currentTarget as DisplayObject);
}
//This is my print button
var button:Sprite = new Sprite();
button.graphics.beginFill(0xf67821, 1);
button.graphics.drawRect(0, 0, 120, 60);
button.graphics.endFill();
addChild(button);
button.addEventListener(MouseEvent.CLICK, printContent);
var myArea:MovieClip = root as MovieClip;
var myRectangle:Rectangle = new Rectangle(150,0,700,500);
function printContent(event:MouseEvent) {
var printJob:PrintJob = new PrintJob();
if (printJob.start()) {
if (myArea.width > printJob.pageWidth){
myArea.width = printJob.pageWidth;
myArea.scaleY = myArea.scaleX;
{printAsBitmap:true};
}
printJob.addPage(myArea, myRectangle);
}
printJob.send();
printJob = null;
}
NEWEST CODE
var workingarea:MovieClip = new MovieClip();
stage.addChild(workingarea);
var seal:Sprite = new Sprite();
seal = new SealImg();
seal.x = 475;
seal.y = 271;
workingarea.addChild(seal);
seal.mouseEnabled = false;
seal.mouseChildren = false;
I have multiple bitmap images added into sprites(each image added into 1 sprite) in a loop, then all the sprites added to 1 _contentHolder(Sprite) then that is added to a viewport.
What the problem is, the multiple sprites that are added inside the loop, everything displays with no problem but only the last sprite added is clickable. None of the sprite added before it is clickable. Wondering what the problem is, they are not overlapping and when i hover the mouse over the top of all the sprites, it turns into the mouse clicker but it just won't click.
Thanks for your time!
My code:
function onImageLoaded(e:Event):void {
loadedArray.push(e.target.content as Bitmap);
for(var i:int = 0; i < loadedArray.length; i++){
var currentY1:int = 200;
var image: Sprite= new Sprite;
e.currentTarget.loader.content.height =200;
e.currentTarget.loader.content.y += currentY1;
image.mouseChildren = true; // ignore children mouseEvents
image.mouseEnabled = true; // enable mouse on the object - normally set to true by default
image.useHandCursor = true; // add hand cursor on mouse over
image.buttonMode = true;
image.addChild(loadedArray[i]);
_contentHolder.addChild(image);
}
newArray.push(image);
var viewport:Viewport = new Viewport();
viewport.y = 0;
viewport.addChild(_contentHolder);
var scroller:TouchScroller = new TouchScroller();
scroller.width = 300;
scroller.height = 265;
scroller.x = 10;
scroller.y = 100;
scroller.viewport = viewport;
addChild(scroller);
image.addEventListener(MouseEvent.CLICK, gotoscene);
}
loadImage();
Edit:
function gotoscene(e: MouseEvent):void{
var index:Number;
index = newArray.indexOf(e.target);
trace(index);
blackBox.graphics.beginFill(0x000000);
blackBox.graphics.drawRect( -1, -1, stage.width, stage.height);
blackBox.alpha = 0.7;
addChild(blackBox);
var originalBitmap : BitmapData = loadedArray[index].bitmapData;
var duplicate:Bitmap = new Bitmap(originalBitmap);
duplicate.width = stage.width;
_contentHolder1.addChild(duplicate);
// Use counter here to only add _contentHolder1 once
//Assuming that `samedata` is a class member (I can't see the rest of your code)
addChild(_contentHolder1);
}
Edit2:
private var image:Array = new Array;
//In the For loop
image[i] = new Sprite();
image[i].addChild(loadedArray[i]);
image[i].addEventListener(MouseEvent.CLICK, gotoscene);
function gotoscene(e:MouseEvent):void{
index = image.indexOf(e.target);
trace(index);
}
You should move image.addEventListener(MouseEvent.CLICK, gotoscene); statement into the loop where you add child sprites. Once you do, the listener will be added to all of the sprites, not just the last one that's currently stored in image variable, and is the only one that responds to your clicks.
for(var i:int = 0; i < loadedArray.length; i++){
var currentY1:int = 200;
var image: Sprite= new Sprite;
e.currentTarget.loader.content.height =200;
e.currentTarget.loader.content.y += currentY1;
image.mouseChildren = true; // ignore children mouseEvents
image.mouseEnabled = true; // enable mouse on the object - normally set to true by default
image.useHandCursor = true; // add hand cursor on mouse over
image.buttonMode = true;
image.addEventListener(MouseEvent.CLICK, gotoscene); // <-- THIS
image.addChild(loadedArray[i]);
_contentHolder.addChild(image);
}
And for all that is holy, learn to indent your code, so that you will be able to visually find the start and end of your loops and see if a certain statement is within the loop or not.
I did work for a few years in AS3 and this was a weird an usual problem. I used to solve it with a function that adds the event to each clip:
function someFunction():void {
for (...) {
var image:Sprite = new Sprite();
addSceneListener(image);
}
}
function addSceneListener(mc:Sprite):void {
mc.addEventListener(MouseEvent.CLICK, gogoscene);
}
I'm having a problem with a Feathers List control. It works the first time I enter the screen that contains the list, but the second time I enter that screen in the same app execution, the scrolling list doesn't scroll at all plus texts don't appear. No error appears in the console.
I've tried lots of stuff, but I still have the same problem: It only works the first time it's instantiated. If I exit the screen and come back, it doesn't work at all!
When exiting the screen it's disposed and when coming back to that screen it's a new instance of List. Why does it work only the first time?
Also, I tried not using a custom ItemRenderer at all, so only the images appear, no text, and still the same happens. The list doesn't respond to scroll events the SECOND time is instantiated. So it's not a problem with the ItemRenderer.
Ok, here's some code:
typeList = new List();
typeList.x = Settings.appResolution[0] - Settings.menuTypeColumnWidth;
typeList.y = Settings.topBarHeight;
typeList.width = Settings.menuTypeColumnWidth;
typeList.height = Settings.appResolution[1] - Settings.topBarHeight;
typeList.dataProvider = new ListCollection(listContents);
typeList.itemRendererProperties['labelField'] = 'text';
typeList.itemRendererProperties['accessoryLabelField'] = 'articles';
typeList.itemRendererProperties['iconSourceField'] = 'thumbnail';
var listLayout:VerticalLayout = new VerticalLayout();
listLayout.gap = Settings.menuTypeItemGap;
typeList.layout = listLayout;
typeList.addEventListener(Event.CHANGE, onListChange);
typeList.itemRendererType = MenuTypeItemRenderer;
As you can see it's nothing out of the ordinary.
Thanks for your help.
Are you sure that the ListCollection used by the list is still available when the 2nd instantiation is performed?
_list.dataProvider = new ListCollection(items);
Here's a sample of code I've used. See if it offers any clues. I call the clearList function before the class is removed from the stage.
private function onAddedToStage(e:starling.events.Event):void {
removeEventListener(starling.events.Event.ADDED_TO_STAGE, onAddedToStage);
addEventListener(starling.events.Event.REMOVED_FROM_STAGE, onRemovedFromStage);
//only do this if a list does not already exist.
if(!_list){
items = new <ListItem>[];
for(var i:int = 0; i < 20; i++) {
items.push(new ListItem("Item text"));
}
_list = new List();
_list.itemRendererFactory = function():IListItemRenderer {
renderer = new ListItemRenderer();
// pass your skins in here
renderer.defaultSkin = new Image(AssetManager.getAtlas().getTexture("listItemClear_normal"));
renderer.defaultSelectedSkin = new Image(AssetManager.getAtlas().getTexture("listItemClear_selected"));
return renderer;
};
vl = new VerticalLayout();
vl.hasVariableItemDimensions = false;
_list.layout = vl;
_list.scrollerProperties.snapScrollPositionsToPixels = true;
_list.scrollerProperties.verticalScrollPolicy = Scroller.SCROLL_POLICY_AUTO;
_list.scrollerProperties.horizontalScrollPolicy = Scroller.SCROLL_POLICY_OFF;
_list.scrollerProperties.scrollBarDisplayMode = Scroller.SCROLL_BAR_DISPLAY_MODE_FLOAT;
//need to use a factory as we are not using a theme
_list.scrollerProperties.verticalScrollBarFactory = myScrollBarFactoryFunction;
_list.isSelectable = false;
_list.scrollerProperties.hasElasticEdges = true;
_list.itemRendererProperties.height = 60r;
_list.addEventListener(starling.events.Event.CHANGE, list_changeHandler);
_list.width = 320;
_list.height = StartUp._stageHeight;
addChild(_list);
_list.dataProvider = new ListCollection(items);
}
}
public function myScrollBarFactoryFunction():IScrollBar {
scrollBar = new SimpleScrollBar();
scrollBar.direction = SimpleScrollBar.DIRECTION_VERTICAL;
scrollBar.thumbProperties.defaultSkin = new Scale3Image(new Scale3Textures(AssetManager.getAtlas().getTexture("vertical-scroll-bar-thumb-skin"), 5, 14, Scale3Textures.DIRECTION_VERTICAL));
scrollBar.thumbProperties.width = 4;
scrollBar.thumbProperties.minHeight = 20;
scrollBar.width = 4;
return scrollBar;
}
public function clearList():void {
if (_list) {
scrollBar = null;
renderer = null;
vl = null;
removeChild(_list);
_list = null;
items.length = 0;
items = null;
}
}
I'm doing a button on AS3 made out of a sprite wich (just a simple square). When I add the event listener so that it acts as a button it works but depending on button.x, so when I put the button where I want the button stops working.
Thanks
public function pintaInterficieTrad(){
while(numChildren != 0) removeChildAt(0);
var idioma = new TextField();
idioma.text=traductor.*[numTrad].*;
idioma.width=200;
idioma.selectable=false;
idioma.setTextFormat(format);
idioma.x=20;
idioma.y=20;
addChild(idioma);
var trad = new Sprite();
trad.graphics.lineStyle(5,0x00ff00);
trad.graphics.beginFill(0x000000);
trad.graphics.drawRect(300,20,150,70);
addChild(trad);
var textTrad = new TextField();
if(numTrad==0) {
textTrad.text="Traduir";
}else{
textTrad.text="Traducir";
}
textTrad.width=200;
textTrad.selectable=false;
textTrad.setTextFormat(format);
textTrad.x=270;
textTrad.y=40;
addChild(textTrad);
var getBack = new Sprite();
getBack.graphics.lineStyle(5,0x00ff00);
getBack.graphics.beginFill(0x000000);
getBack.graphics.drawRect(500,20,150,70);
addChild(getBack);
var textgetBack = new TextField();
if(numTrad==0) {
textgetBack.text="Tornar";
}else{
textgetBack.text="Volver";
}
textgetBack.width=200;
textgetBack.selectable=false;
textgetBack.setTextFormat(format);
textgetBack.x=470;
textgetBack.y=40;
addChild(textgetBack);
trad.addEventListener(MouseEvent.CLICK,traduirBtn);
getBack.addEventListener(MouseEvent.CLICK,tornarBtn);
var userBox = new Sprite();
userBox.graphics.lineStyle(2,0x00ff00);
userBox.graphics.beginFill(0xffffff);
userBox.graphics.drawRect(40,130,610,160);
addChild(userBox);
var tradBox = new Sprite();
tradBox.graphics.lineStyle(2,0x00ff00);
tradBox.graphics.beginFill(0xffffff);
tradBox.graphics.drawRect(40,320,610,160);
addChild(tradBox);
var formatTxt = new TextFormat();
formatTxt.color=0x000000;
formatTxt.size=14;
var textUser = new TextField();
var textTraduit = new TextField();
textUser.defaultTextFormat=formatTxt;
textUser.text = textUsuari;
textUser.width = 600;
textUser.height = 150;
textUser.x=45;
textUser.y=130;
addChild(textUser);
textTraduit.text = traduccio;
textTraduit.setTextFormat(formatTxt);
textTraduit.width = 600;
textTraduit.height = 150;
textTraduit.x=45;
textTraduit.y=325;
addChild(textTraduit);
}
public function traduirBtn(e){
while(numChildren != 0) removeChildAt(0);
tradueix();
pintaInterficieTrad();
}
public function tornarBtn(e){
while(numChildren != 0) removeChildAt(0);
pintaMenu();
}
}
If I put the squares on x=0 they do what they're suposed to do...
seems like the button you're talking about is trad. You're addChilding it quite early in your code, which means that antoher displayobject could get above it at the same position. When you click at that position, the click event will only get send to the top most element, so try adding the elements you want people to interact with as the last (buttons, text field inputs, etc.)
Your problem is in the fact that you are adding the text over the button and the text is being clicked, not the button.
Add the text to the button itself and your click event will work.
Also verify that no other component is covering the button. Even if transparent, like a textbox.
Ok, my mind is boggling over this issue im having. I know this might seem like such an easy issue and I can't understand why I cant figure it out but none the less I can't and I've just about given up. Here's the issue:
I have a sprite container which is supposed to hold a bunch of thumbnails to videos. I am able to populate the container with all the videos and the whole works but obviously if I add a bunch of videos its going to exceed the size of the flash document so I need to add a UIScrollBar (which I did) now the scrollbars target is set to the container but isnt allowing me to scroll and if im correct this is because the container doesnt have a set height. So Im trying to set the height of this container but the second I try setting the height or even width all my thumbnails I used to be able to see are gone! It's as if the size is being set to 0 when its not I've even tried to set it to a specified size just to test and nothing. Anyways heres my code if anyone can help out I'd really appreciate it! Thanks in advance!
import fl.controls.UIScrollBar;
var videoList:XMLList;
var numVideos:Number;
var current_Video:Number = 0;
var video_position:Number;
var video_paused:Boolean;
var xmlPlaylist:String;
//XML File setup
var playlist_xml:XML;
var myLoader:URLLoader = new URLLoader();
//Playlist setup
var thumb_width:Number;
var thumb_height:Number;
var thumbs_x:Number;
var thumbs_y:Number;
var main_container:Sprite;
var thumbs:Sprite;
var scrollbar:UIScrollBar;
//Loader Data
this.loaderInfo.addEventListener(Event.COMPLETE, loaderComplete);
function loaderComplete(e:Event):void
{
var myQueryStrings = this.loaderInfo.parameters;
xmlPlaylist = myQueryStrings.pList;
myLoader.load(new URLRequest(xmlPlaylist + "?uniq=" + new Date().getTime()));
}
myLoader.addEventListener(Event.COMPLETE, processXML);
function processXML(e:Event):void {
playlist_xml = new XML(e.target.data);
numVideos = playlist_xml.video.length();
videoList = playlist_xml.video;
thumb_width = playlist_xml.#thumb_width;
thumb_height = playlist_xml.#thumb_height;
thumbs_x = playlist_xml.#thumbs_x;
thumbs_y = playlist_xml.#thumbs_y;
current_Video = Math.round(Math.random()*(numVideos-1))+1;
current_Video--;
startPlayer();
}
function startPlayer()
{
makeContainers();
callThumbs();
setVideo(current_Video);
}
function makeContainers():void
{
main_container = new Sprite();
addChild(main_container);
thumbs = new Sprite();
thumbs.addEventListener(MouseEvent.CLICK, playVideo);
thumbs.addEventListener(MouseEvent.MOUSE_OVER, onOver);
thumbs.addEventListener(MouseEvent.MOUSE_OUT, onOut);
thumbs.x = thumbs_x;
thumbs.y = thumbs_y;
This is where the Issue is: (If i comment out this code it displays the thumbnails)
thumbs.width = thumb_width;
thumbs.height = (thumb_height + 11) * 3;
thumbs.buttonMode = true;
main_container.addChild(thumbs);
scrollbar = new UIScrollBar();
scrollbar.x = thumbs_x + thumb_width + 2;
scrollbar.y = thumbs_y;
scrollbar.setSize(25, (thumb_height + 11) * 3);
scrollbar.visible = true;
scrollbar.scrollTarget = thumbs;
main_container.addChild(scrollbar);
}
function callThumbs():void
{
for (var i:Number = 0; i (less than) numVideos; i++) //For some reason Stack Overflow isnt allowing me to put the symbol less than so i just typed it in...
{
var thumb_url = videoList[i].#thumb;
var thumb_loader = new Loader();
thumb_loader.name = i;
thumb_loader.load(new URLRequest(thumb_url));
thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
thumb_loader.y = (thumb_height + 11) * i;
}
}
function thumbLoaded(e:Event):void
{
var my_thumb:Loader = Loader(e.target.loader);
thumbs.addChild(my_thumb);
}
function playVideo(e:MouseEvent):void
{
setVideo(e.target.name);
}
function onOver (e:MouseEvent):void
{
var my_thumb:Loader = Loader(e.target);
my_thumb.alpha = 0.5;
}
function onOut (e:MouseEvent):void
{
var my_thumb:Loader = Loader (e.target);
my_thumb.alpha = 1;
}
function setVideo(current_Video)
{
var display:String = videoList[current_Video].#title;
var video:String = videoList[current_Video].#url;
txt_Display.text = display;
flvPlayer.source = video;
}
stop();
This is easy. You are creating Sprite, adding listeners, setting coordinates. The sprite is still empty. Then you set width and height, which are translating to scaleX and scaleY. On empty sprite this messes up transformation matrix and sprite will never show up. Set width, height, or scaleX/Y only on non-empty sprites.