Jump to content
Search Community

Search the Community

Showing results for tags 'colormatrixfilter'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 5 results

  1. GreenSock

    PixiPlugin

    PixiJS is a canvas library that can utilize WebGL for insanely fast rendering, plus it has all sorts of crazy filters and fun effects. You could always use GSAP to animate PixiJS objects (after all, GSAP can tween any property of any JS object), but it was a tad cumbersome with certain properties because they're tucked inside sub-objects in PixiJS's API, like object.position.x, object.scale.y, object.skew.x, etc. Plus PixiJS defines rotational values in radians instead of degrees which isn't as intuitive for most developers/designers. PixiPlugin saves you the headaches: //old way (without plugin): gsap.to(pixiObject.scale, {x: 2, y: 1.5}); gsap.to(pixiObject.skew, {x: 30 * Math.PI / 180}); gsap.to(pixiObject, {rotation: 60 * Math.PI / 180}); //new way (with plugin): gsap.to(pixiObject, {pixi:{scaleX: 2, scaleY: 1.5, skewX: 30, rotation: 60}}); PixiJS requires that you define color-related values in a format like 0xFF0000 but with PixiPlugin, you can define them the same way you would in CSS, like "red" | "#F00" | "#FF0000" | "rgb(255,0,0)" | "hsl(0, 100%, 50%)" | 0xFF0000. You can even do relative HSL values! "hsl(+=180, +=0%, +=0%)". Another big convenience is that PixiPlugin recognizes some special values like saturation, brightness, contrast, hue, and colorize (which all leverage a ColorMatrixFilter under the hood). Or if you have a custom ColorMatrixFilter, just pass that in as the colorMatrixFilter property and it'll handle animating between states. Lastly, PixiPlugin recognizes blur, blurX, and blurY properties, so it's very simple to apply a blur without having to create a new BlurFilter instance, add it to the filters array, and animate its properties separately. PixiPlugin significantly improves developer ergonomics for anyone animating in PixiJS. Less code, fewer headaches, and faster production. See the docs for details. To learn how to include PixiPlugin into your project, see the GSAP install docs.
  2. Transform Manager works GREAT in general, first off. But, when I apply a ColorMatrixFilter to a container - in this case taking the whole design area and applying a greyscale effect - the TransformManager selection box / handles show up offset up and left from the actual target. The filter applied looks like- _greyScaleEnabled == true; var matrix:Array = new Array(); matrix=matrix.concat([0.5,0.5,0.5,0,0]);// red matrix=matrix.concat([0.5,0.5,0.5,0,0]);// green matrix=matrix.concat([0.5,0.5,0.5,0,0]);// blue matrix=matrix.concat([0,0,0,1,0]);// alpha var greyscaleFilter:ColorMatrixFilter=new ColorMatrixFilter(matrix); applyCanvasMatrixFilter(greyscaleFilter) applied to the layers container (where all the interactive objects are in child containers for different layers) public function applyCanvasMatrixFilter( $matrixFilter:ColorMatrixFilter ):void { if (!_myFilters) { _myFilters = []; } _myFilters.push($matrixFilter); _layersContainer.filters = _myFilters; } From this point on, after the TransformTool had been positioned perfectly up until this point, it will now be offset significantly up and left. It seems there may be some kind of translation from child x,y position to the stage position / transform tool container (localToGlobal or similar?) that might not be working right when a filter like this is applied to a grandparent of the target object. Scale is at play too of both the target object and the container object as well. Is this a known bug, or are there configurations for the TransformTool that will help correct offset? Does applying a filter to a parent container wipe out location data of child objects in flash somehow? Thanks so much for any insight on how to fix this...
  3. Is there a known issue of the ColorMatrixFilter plugin not working in the Safari browser? I am using the plugin to colorize two images, and it works in both Firefox and Chrome, but not Safari.
  4. I am using TweenMax to fade some interface arrows on an AIR / iOS project, using the following (slightly simplified) code: TweenMax.to( overlay.arrowE, 0, { alpha:overlayFactorX + minOverlayAlpha, colorMatrixFilter: { saturation:overlayFactorX }} ); The tween essentially responds to a user drag action, and highlights one arrow graphic (colour and alpha up) to show the direction of travel, whilst other arrows recede (colour desaturates to greyscale, and alpha decreases). A bigger drag creates a stronger highlight. Everything works fine when viewed in preview on PC, and the code does runs when compiled and running on an iPad, BUT the saturation doesn't appear to work. The arrows (there are four) change alpha, but their colour saturation remains unchanged. Any ideas why this might be the case? Thanks! TweenTest.zip
  5. Hi folks, been having a rather perplexing problem while using the colorMatrixFilter property in TweenMax on an object. It seems to remove blendModes like BlendMode.ADD from any children or nested children in the display object. Thus any images with black backgrounds that were originally hidden by setting to ADD or SCREEN become visible during the tween. As I understand it, colorMatrixFilter or most filters cache the object as a bitmap if I am not mistaken and this is a probable cause of this is happening. Is there anyway to maintain blendmodes of children when applying this filter in a tween? Thanks!
×
×
  • Create New...