I'm trying to use some features from the pixastic libary and combine it with kineticjs. One of which is to apply the sepia effect in pixastic to an image created with kineticjs.
I have a jsfiddle setup here:
http://jsfiddle.net/SkVJu/28/
I thought the following would work:
function sepia() {
Pixastic.process(darth, "sepia");
layer.draw();
}
but the image just stays the same. Have i missed something or is this not even possible to combine the both libraries together?
My guess is that you can't apply a Pixastic function directly onto a Kinetic.Image object, as it is slightly different than a regular image object.
Alternatively, you need to grab the original source of the image, then you can run the Pixastic effects on that image, and then set the Kinetic.Image object with the new affected image after.
function sepia() {
var sepia = Pixastic.process(darth.attrs.image, "sepia");
darth.setImage(sepia);
layer.draw();
}
Here's the full code: jsfiddle
Note: You'll have to run this on your local server, as it won't work on jsfiddle (the pixastic library can't be loaded as an external resource, without a CDN host)
2nd Note: You had to declare var layer outside of the imageObj.onload function, or else your sepia() function could not access the layer from inside the imageObj.onload. You can see how I did it in the jsfiddle.
Related
I want to mask the png image pattern.png with another image - mask.png, but it doesn't work at all and I can't find the reason. Instead of masking the image, the mask just disappears and the pattern stays the same as it was.
I tried making a MovieClip, drawing e.g. a circle and using that as the mask instead of mask.png and it works just fine. Is it because you can't use loader objects as masks? How do I make it work?
edit: After changing the size of mask.png to be smaller than the pattern, I've realized that it actually does kind of work, but what happens is instead of cutting the pattern into the shape I've drawn in the png file it just cuts it into the shape of the entire file, as in, it counts the rectangular transparent background as well. How can I make it cut out just the shape?
var mask:Loader = new Loader();
mask.load(new URLRequest("mask.png"));
var pattern:Loader = new Loader();
pattern.load(new URLRequest("pattern.png"));
pattern.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
function loadComplete(e:Event):void {
addChild(pattern);
addChild(mask);
pattern.mask = mask;
}
Your code is looks correctly. The mask property of DisplayObject wants DisplayObject too. But try to make few things, to find the trouble:
You have only one listener, to pattern.png. But you must be sure, that mask.png has loaded already too.
Despite that Loader is DisplayObject too - try to get content from loader for mask, and just after that try to use it.
*Ah, and one more thing. You must at first add listener, and only later try to load.
I am working on a flash sound mixer application with multiple sound channels, and I am having trouble with the lights beside the volume knob.
Is there a way to hide just a part of an image?
On the image below, image-2 is on top of image-1 to create some kind of volume level indicator effect, and how much of image-2 is shown depends on the value of the volume.
image-url: http://s30.postimg.org/r3ow1g5bl/volume_lights_level.png
I've tried by just reducing the height of image-2, but it looks awful and distorted.
Is there something in flash that works closely the same as CSS's behavior.
example: I'll just make image-2 a background of a shape, and when I reduce the shape's height, the image-background does not get distorted or changes it's height as well.
By searching for solutions, I have come across the mask property, but I don't quite understand how it works, and most of the examples shown are images placed inside circles.
Is the mask property applicable in this situation?
I'm quite new to flash so I don't know a lot of things yet.
You can indeed use a mask.
How to programmatically create your mask
Put an occurrence of your image named myImage on the stage, and put over this occurrence a mask named myMask with the same dimensions. You can apply myMask mask to myImage using it's mask property like below:
Main Timeline
myImage.mask = myMask;
function mouseMoveHandler(e:MouseEvent):void {
myMask.height = myImage.y - e.stageY;
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
You have just to adapt this code to your animation, in the function where you click your button.
I got it working now, many THANKS #VC.One. heres how I did it.
Imported img-2 to stage, converted it into symbol(type:Movie Clip), assigned instance name: img2_mc.
I created a new layer for the mask, drawn a rectangle using rectangle tool, converted it also to symbol(type:Movie Clip), assigned instance name: mask_mc.
Then applied the mask to img2_mc.
/* the code */
img2_mc.mask = mask_mc;
function onEnterFrame(event:Event):void{
var volumeKnob_y = volSliderKnobOn.y + 12; // adjust it to the center of the knob
mask_mc.height = volumeKnob_y;
}
Is it possible to only trigger a div's mouseover when the cursor is over an opaque part of the div's background image? Perhaps via Javascript?
All I can find with Google are old IE PNG fixes.
This looks like a similar question to this one: Hit detection on non-transparent pixel
I suppose this could also be done for background image by getting the attribute with jQuery:
$('#myDiv').css('background-image');
I haven't personally done this, but it seems like a viable solution. This will only work for modern browsers, but you should be able to make it back-compatible with excanvas.
It is possible, just not very easily. You'll have to use a lot of Javascript.
You'd want to attach to your <div>'s onmousemove event, which returns the X,Y coordinates of the cursor. Your event handler function would then test to see if the cursor is in the correct place in order to trigger an alternative onmouseover event.
Implementing the "is the cursor over an opaque pixel or not?" test can be done two ways: the first is to create a simple mathematical expression (say if the opaque parts of the image make neat rectangles, circles or polygons). The more difficult (and less browser-supported) way is to load the background image into a Canvas object and then get the current pixel value's opacity figure and take it from there, like so:
var pixel = canvas.getImageData(x, y, 1, 1).data;
var alpha = pixel[3]; // assuming RGBA
if( alpha > threshold ) onMouseOver(); // raise the event
Another alternative is to create an entirely transparent div (or some other element) positioned and sized so that it only covers the opaque part of the div below, then just test the mouseover of that element's box.
It's a bit of tweaking but why don't you add a class to your opaque div, and use JavaScript to check for it?
In jQuery:
$('div').mouseover(function(){
if ($(this).is('.opaque')) {
//Some actions
}
});
I've two different stages on top of another.
And, I'm adding layers to them and placed two image objects.
Now, I've given "click" event to those image objects.
However, since recently added layer is on top of other layers, Only top layer is triggering the events.
Problem : Clicking on purple indicator , I'm getting the alert. But, yellow indicator does not trigger any event since it is behind the layer.
(Check JSFiddle Link which is provided at the bottom)
How to overcome this issue..?
Here is the code sample that I'm using to add & position the image.
Working JS Fiddle Link : http://jsfiddle.net/v4u2chat/aqf9Y/8/
NOTE : Use the Slider to change the position of the image.
Image Positioning Code
$function positionImage(stage,centerX,centerY,radius,startingAngle,endingAngle,targetValue4ImagePositioning,divIdvalue)
{
var imgLayer = new Kinetic.Layer();
var angleInDegress = 360*targetValue4ImagePositioning-90-5;
var angleInRadians = (Math.PI/180)*angleInDegress;
imgLayer.rotate((Math.PI/180)*(360*targetValue4ImagePositioning));
var arcEndX = centerX+ ((radius+25)*Math.cos(angleInRadians));
var arcEndY = centerY+ ((radius+25)*Math.sin(angleInRadians));
imgLayer.setX(arcEndX);
imgLayer.setY(arcEndY);
var kineticImage = new Kinetic.Image(
{
x: 0
,y: 0
,width:18
,height:22
,image: $('#'+divIdvalue)[0]
,id:'kineticImage_'+divIdvalue
});
kineticImage.on("click", callBackFn);
imgLayer.add(kineticImage);
stage.add(imgLayer);
}
Thanks **Steve** for your input.
The actual problem lies in Stage. I'm using two different stages which is not required.
Now, I changed my code to single Stage and it works like charm :)
Layer will not occupy the whole canvas area. It'll occupy only the area of the shape for which we have created the layer. So, No fuss or problem with Layers.
Updated JS Fiddle can be found from the below mentioned link.
http://jsfiddle.net/v4u2chat/aqf9Y/9/
I'm wondering if someone can shed some light on how this effect is achieved?
This site shows a constant changing background colour.
http://bdw.colorado.edu/#/index.php
I want to utilize the same "ever changing" background colour effect on my site.
Here is the link to my example site:
http://continuous.be/
(I've found the CSS but not sure how it relates? )
/* == Dynamic Colors ==
.dynamicbgcolor {
background-color: rgb(0,149,191); }
.dynamiccolor {
color: rgb(0,149,191); }
*/
You won't be able to do this using CSS alone. As Vladislav says there is a spectrum() function that does the work using javascript and jQuery. Basically:
Store an array of colours.
Use Math.Random randomly pick
one of the stored colours.
Using jQuery.animate() to animate the backgroundColor property of the required element.
On completion of the animation, use jQuery.delay() to call the above function in XX seconds time.
Update
I've had a look at the test you put up. You're missing the closing }); at the end of your script file. Also, you've only defined the function spectrum, you don't call it. Add spectrum(false); at the end of your file, just within the }); that you've just added.
Try using Firebug for firefox, this pointed out the missing }); straight away.
this is done using JavaScript - the script animates the CSS. Look in http://bdw.colorado.edu/js/main.js for function spectrum(bool)
The idea is simple. They load js script to their page. And there (from line 373) you will find necessary code (together with hardcoded background colors.