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;
Related
I have spent hours trying to find an answer to this, but can't find anything that exactly describes what I'm trying to do. I have 6 images that are shaped like jigsaw puzzle pieces, and I place them in proper position on a canvas. What I really want is for each of those puzzle pieces to also act like a button, so when a user clicks on a piece, I can capture that event and then navigate to a new page.
Everything I have found talks about using html buttons and then placing them on the canvas using css- but with these images all being oddly shaped jigsaw pieces, I can't do that.
Is it even possible to capture mouse events when they are on top of a particular image?
Thanks....
Ok, I've managed to track the cursor over each individual puzzle piece. Now, I'm trying to display a different version of the image when cursor hovers over a piece (a prelude to opening a new page). I am trying to store the original image and hover image in the points array, but nothing I try seems to work. I need to be able to show the hover image when the cursor is over the piece, and then restore it when the cursor moves away (haven't gotten that far yet). Right now, I get 404 errors when i try to pull the image out of the points array- tried storing the actual image variable and image pathname, to no avail.
Here's the code:
<script type="text/javascript" language="JavaScript">
var canvas;
var canvasWidth;
var ctx;
function init() {
HideContent('readLess');
var cursors=['default','w-resize','n-resize'];
var currentCursor=0;
canvas = document.getElementById('puzzle-container');
canvas.width = 815;
canvas.height = 425;
canvas.align = 'center';
ctx = canvas.getContext("2d");
var search = new Image();
search.src = 'img/puzzleSearch.png';
var searchHover = new Image();
search.onload = function() {
ctx.drawImage(search, 0, 0);
};
var nav = new Image();
nav.src = 'img/puzzleNav.png';
var navHover = new Image();
nav.onload = function() {
ctx.drawImage(nav, 119, 2.5 );
}
.
.
.
.
var events = new Image();
events.src = 'img/puzzleEvents.png';
var eventsHover = new Image();
eventsHover.src = 'img/puzzleEventsHover.png';
events.onload = function() {
ctx.drawImage(events, 564, 265 );
}
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
$("#puzzle-container").mousemove(function(e){handleMouseMove(e);});
var shapes=[];
shapes.push({
points:[{x:0,y:2.5},{x:155,y:2.5},{x:155,y:205},{x:0,y:205}], cursor:1, img:search, imgHov:searchHover,
});
.
.
.
shapes.push({
points:[{x:0,y:310},{x:250,y:310},{x:250,y:400},{x:0,y:400}], cursor:1, img:events, imgHov:'img/eventsHover.png',
});
for(var i=0;i<shapes.length;i++){
var s=shapes[i];
definePath(s.points);
ctx.stroke();
}
function definePath(p){
ctx.beginPath();
ctx.moveTo(p[0].x,p[0].y);
for(var i=1;i<p.length;i++){
ctx.lineTo(p[i].x,p[i].y);
}
ctx.closePath();
}
function handleMouseMove(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
var newCursor;
for(var i=0;i<shapes.length;i++){
var s=shapes[i];
definePath(s.points);
if(ctx.isPointInPath(mouseX,mouseY)){
if (i === 6 ) {
var img = new Image();
var imgSrc = s.imgHov;
img.src = imgSrc;
console.log("hover image is: " + s.imgHov );
ctx.drawImage(img, 564, 265 );
}
//console("the mouse is in shape "+ i );
newCursor=s.cursor;
break;
}
}
if(!newCursor){
if(currentCursor>0){
currentCursor=0;
canvas.style.cursor=cursors[currentCursor];
}
}else if(!newCursor==currentCursor){
currentCursor=newCursor;
canvas.style.cursor=cursors[currentCursor];
}
}
}
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
</script>
On the console I get the following:
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) ([object HTMLImageElement], line 0)
[Log] hover image is: [object HTMLImageElement] (index.html, line 168)
Is there some trivial thing I'm missing on how to save the images in the points array?
Thanks.....
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);
}
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.
I have an image gallery which loads a detail image, then draws a line next to the image on one side based on image dimensions. Clicking on the image returns one back to the main image thumbnail list, then clicking a thumb loads another image into detail holder. Everything works fine with it, except that the lines, rather than disappearing upon detail image unload, accumulate. Is there a way to clear the contents of the lineDrawing MovieClip without removing it from the stage, so that I can draw a new line in it? I've tried removeChild on the MovieClip, but then the lines disappear entirely, same with placing lineDrawing.clear() at the top of the setupDetail function. Here is my (relevant)code so far, any assistance will be greatly appreciated, I am stumped!
var detailImage:Loader = new Loader();
var lineDrawing:MovieClip = new MovieClip();
setupDetail();
function setupDetail():void {
detail.visible = false;
detail.buttonMode = true;
detail.closeMessage.mouseEnabled = false;
detail.addChild(detailImage);
detailImage.contentLoaderInfo.addEventListener(Event.COMPLETE, fullyLoaded);
// make sure detail is above the gallery
addChild(detail);
detail.addEventListener(MouseEvent.CLICK, onCloseDetail, false, 0, true);
}
function fullyLoaded(evt:Event):void {
var imgHeight:int = evt.target.content.height;
var imgWidth:int = evt.target.content.width;
var hOffset:int = imgWidth + 5 + 27;
var vOffset:int = imgHeight + 5;
detail.addChild(lineDrawing);
if(imgWidth == 600) {
lineDrawing.graphics.lineStyle(3,0x9a9345);
lineDrawing.graphics.moveTo(28,vOffset);
lineDrawing.graphics.lineTo(626,vOffset);
}
else if(imgHeight == 600) {
lineDrawing.graphics.lineStyle(3,0x9a9345);
lineDrawing.graphics.moveTo(hOffset, 1);
lineDrawing.graphics.lineTo(hOffset, 599);
}
}
function onCloseDetail(evt:MouseEvent):void {
// only allow it to be closed if it is at least 90% opaque
if (detailImage.alpha>.9){
detailImage.unload();
TweenLite.to(detail,.5, {autoAlpha:0});
detailImage.unload();
detail.visible = false;
}
}
lineDrawing.graphics.clear()
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.