0 Replies Latest reply on Oct 10, 2010 11:11 AM by Astraport2012

    3D tag cloud for Flex

    Astraport2012 Level 1

      I'm trying to use this one class to create the tag cloud to flex.

      1.I created a master document.

       

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

          creationComplete="init();" minWidth="955" minHeight="600" xmlns:local="*">

      <fx:Script>

      <![CDATA[

       

      import mx.core.IVisualElement;

      import mx.core.UIComponent;

       

       

      public var inputWordr:String = "";

       

      private function init():void {

      c20.addElement(tirs as IVisualElement);

      }

       

       

       

      ]]>

      </fx:Script>

      <fx:Declarations>

      <local:MyComponent id="tirs" x="0" y="0" width="300" height="300"/>

      </fx:Declarations>

       

      <s:BorderContainer x="10" y="38" width="542" height="428" id="c20">

       

      </s:BorderContainer>

       

       

      </s:Application>

       

       

      2. And created a class (MyComponent.as) based on code from the example and import all required swc.

       

      package

      {

      import flash.display.BitmapData;

      import flash.display.Sprite;

      import flash.events.Event;

      import flash.filters.BitmapFilterQuality;

      import flash.filters.BlurFilter;

      import flash.filters.GlowFilter;

      import flash.text.TextField;

      import mx.core.UIComponent;

      import org.papervision3d.core.geom.Particles;

      import org.papervision3d.core.geom.renderables.Particle;

      import org.papervision3d.events.InteractiveScene3DEvent;

      import org.papervision3d.materials.special.BitmapParticleMaterial;

      import org.papervision3d.objects.DisplayObject3D;

      import org.papervision3d.view.BasicView;

      public class MyComponent extends Sprite

      {

      private var scale:Number = 5;

      private var radius:Number = 350;

      private var smoothing:Boolean = true;

      private var minAlpha:Number = 0.3;

      private var glow:GlowFilter;

      private var tags:Array;

      private var tag_num:uint;

      private var bv:BasicView;

      private var tagArray:Array;

      private var tagContainer:DisplayObject3D;

       

      public function MyComponent()

      {

      init ();

      }

      private function init ():void {

      glow = new GlowFilter (0x003366, 1, 8, 8, 2, BitmapFilterQuality.LOW, true, false);

      tags = ["free","news","Cookie","practice","JavaScript","toy","life","something","LocalConnection ","memo","MSN","funny", "ActionScript 3", "Food", "Book", "Photo", "favorite"];

      tag_num = tags.length;

      tagArray = [];

      tagContainer = new DisplayObject3D ("tag_container");

      tagContainer.x = -radius * 0.25;

      tagContainer.y =  radius * 0.25;

       

      bv = new BasicView (300, 300, true, true);

      bv.viewport.interactive = true;

      bv.scene.addChild (tagContainer);

      bv.camera.z = -2 * radius;

      bv.camera.zoom = 20;

      bv.startRendering ();

       

      addChild (bv);

       

      buildTags ();

       

      addEventListener (Event.ENTER_FRAME, enterFrameHandler);

      }

       

      private function buildTags ():void {

      var i:uint;

      for (i = 0; i < tag_num; i++) {

      // 2D

      var txt:TextField = new TextField ();

      txt.text = tags[i];

      txt.filters = [new BlurFilter(1.1, 1.1)];

      var txtW:Number = txt.textWidth + 4;

      var txtH:Number = txt.textHeight + 4;

      var bitmap:BitmapData = new BitmapData (txtW, txtH, true, 0x01FFFFFF);

      bitmap.draw (txt);

       

      var phi:Number = Math.acos((2 * (i + 1) - 1) / tag_num - 1);

      var theta:Number = Math.sqrt(tag_num * Math.PI) * phi;

       

      // 3D

      var material:BitmapParticleMaterial = new BitmapParticleMaterial (bitmap);

      material.interactive = true;

      material.smooth = smoothing;

      var tag:Particle = new Particle (material, scale, 0, 0, 0);

      var tagHolder:Particles = new Particles ("tag_");

      tagHolder.addParticle (tag);

      tagHolder.x = radius * Math.cos (theta) * Math.sin (phi);

      tagHolder.y = radius * Math.sin (theta) * Math.sin (phi);

      tagHolder.z = radius * Math.cos (phi);

      tagHolder.useOwnContainer = true;

      tagHolder.autoCalcScreenCoords = true;

      tagHolder.addEventListener (InteractiveScene3DEvent.OBJECT_OVER, objectOverHandler);

      tagHolder.addEventListener (InteractiveScene3DEvent.OBJECT_OUT, objectOutHandler);

      //tagHolder.addEventListener (InteractiveScene3DEvent.OBJECT_PRESS, objectPressHandler);

       

      tagContainer.addChild (tagHolder);

      tagArray.push (tagHolder);

      }

      }

       

      private function objectOverHandler (e:InteractiveScene3DEvent):void {

      bv.viewport.buttonMode = true;

      e.target.filters = [glow];

      }

       

      private function objectOutHandler (e:InteractiveScene3DEvent):void {

      bv.viewport.buttonMode = false;

       

      for (var j:uint = 0; j < tag_num; j++) {

      tagArray [j].filters = [];

      }

      }

       

      private function enterFrameHandler (e:Event):void {

      tagContainer.rotationX += (mouseY - 300 * 0.5) * 0.01;

      tagContainer.rotationY += (mouseX - 300 * 0.5) * 0.01;

       

      for (var j:uint = 0; j < tag_num; j++) {

      tagArray[j].alpha = minAlpha + (1 - minAlpha) * (1 - (tagArray[j].screen.z - radius) / (2 * radius));

      }

      }

      }

      }

       

      3. Then I created a call of custom component, but nothing is displayed or causes errors. I tried to insert this component in different ways.

      Check out where I made mistakes, please.