6 Replies Latest reply on Jun 6, 2010 8:34 AM by David_F57

    Flex Kaleidoscope

    Francisc Level 3



      Does anyone know of any Kaleidoscope components out there?

      I would like to play around with such a thing but don't know how to start.


      Thank you!

        • 1. Re: Flex Kaleidoscope
          PRAYMAYERD Level 1

          I'm sorry, I'm not sure. But I do want to mention the MASH thing is awesome.

          • 2. Re: Flex Kaleidoscope
            David_F57 Level 5



            The answer is shaderjob, there are available kaeidedoscope/stereographic pixelbender filters that are available. I am busy at the moment but over the weekend I'll see if I can put something together



            http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1742 024


            http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1703 523




            1 person found this helpful
            • 3. Re: Flex Kaleidoscope
              Francisc Level 3

              Haha! Thank you, `PRAYMAYERD`.

              • 4. Re: Flex Kaleidoscope
                Francisc Level 3

                Thank you David. Much appreciated.

                • 5. Re: Flex Kaleidoscope
                  Francisc Level 3

                  David, the links you provided are exampls of doing that with Pixel Bender.

                  Is there no other way like using the native drawing API and BitmapData for example?

                  • 6. Re: Flex Kaleidoscope
                    David_F57 Level 5



                    You can use the drawing api but you still need to apply a formula to set the perspective to each view. Pixelbender filters work very well in flex, I've started to play a little with the filters I mentioned but having fun getting it right,below is the code so far, I might try the stereographic filter as this seems to be less savage with settings.


                    also these are a couple of links to where i've used pixelbender filters when 'playing'


                    http://gumbo.flashhub.net/menu/  - the crossfade is done with a pixelbender filter


                    http://gumbo.flashhub.net/reflect/ a filter that creates a dynamic reflection(pixel bender filter in a component)




                    <?xml version="1.0" encoding="utf-8"?>

                    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"


                       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)" skinClass="appskin">


                    <!-- Place non-visual elements (e.g., services, value objects) here -->




                    import mx.controls.Alert;

                    import mx.events.FlexEvent;


                    import spark.events.DropDownEvent;

                    [Embed(source="assets/Kaleidoscope.pbj", mimeType="application/octet-stream")] private var Kaleidoscope:Class;

                    [Bindable] [Embed(source="images/img1.jpg")] private var img:Class;

                    private var shader:Shader = new Shader(new Kaleidoscope());

                    [Bindable] private var job:ShaderJob;

                    [Bindable] private var angle: int = 4;

                    [Bindable] private var direction: Number=1;

                    [Bindable] private var basepoint: Number=1;


                    private var calcbase:Number=0.1;



                    protected function application1_creationCompleteHandler(event:FlexEvent):void





                    private function updateShader(): void


                    calcbase = holder.width*basepoint/10;

                    job = new ShaderJob(shader);

                    job.addEventListener(ShaderEvent.COMPLETE, shaderCompleteHandler);

                    ShaderInput(shader.data.src).input=(new img()).bitmapData;




                    var jobResult:BitmapData = new BitmapData(holder.width,holder.height);

                    job.target = jobResult;





                    private function shaderCompleteHandler(shaderEvent:ShaderEvent):void



                    holder.source=new Bitmap(shaderEvent.bitmapData);



                    protected function slider_changeHandler(event:Event):void









                    <mx:Image id="src" x="89" y="145" width="200" height="200" source="{img}"/>

                    <s:HSlider x="860" y="145" minimum="1" maximum="42" stepSize="1" value="@{direction}" change="{slider_changeHandler(event)}"/>

                    <s:HSlider x="860" y="183" minimum="1" maximum="10" stepSize="1" value="@{basepoint}" change="{slider_changeHandler(event)}"/>

                    <s:HSlider x="860" y="232" minimum="3" maximum="12" stepSize="1" value="@{angle}" change="slider_changeHandler(event)"/>

                    <mx:Image id="holder" x="345" y="145" width="200" height="200"/>