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

    Flex Kaleidoscope

    Francisc Level 3

      Hello!

       

      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

            hi,

             

            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

             

             

            David.

            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

                    hi,

                     

                    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:s="library://ns.adobe.com/flex/spark"

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

                    <fx:Declarations>

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

                    </fx:Declarations>

                    <fx:Script>

                    <![CDATA[

                    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

                    {

                    updateShader();

                    }

                     

                    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;

                    ShaderParameter(shader.data.angle).value=[2*Math.PI/angle];

                    ShaderParameter(shader.data.direction).value=[direction/10];

                    ShaderParameter(shader.data.basepoint).value=[calcbase,calcbase];

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

                    job.target = jobResult;

                    job.start(false);        

                     

                    }

                     

                    private function shaderCompleteHandler(shaderEvent:ShaderEvent):void

                    {

                    job.removeEventListener(ShaderEvent.COMPLETE,shaderCompleteHandler);

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

                     

                     

                    protected function slider_changeHandler(event:Event):void

                    {

                    updateShader();

                    }

                    ]]>

                    </fx:Script>

                    <s:controlBarContent>

                     

                    </s:controlBarContent>

                    <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"/>

                    </s:Application>