\m/ = RockOnFlash.com Logo == Papervision3D.Demo.download ? true

This is a bit of a re-hash of the original 2D/Flash8 logo I did with dynamic ambient lighting. It just made sense to create a 3D version of the logo and while I was at it, play with video materials and try out the ambient lighting with a 3D model! I seriously don’t think this would have been possible with AS2. There’s over 4000 poly’s in the scene, add to that video decoding AND dynamic ambient dropShadowFilter, and you got yerself a healthy helping of JIT happiness.

I’m releasing the source files as a Papervision3D demo which covers using MovieScene3d, MovieMaterial with an external SWF and dynamic ambient lighting. This time, I took the time to create docs. I’ve started on a Papervision3D library that I’ll be releasing at the classes in June (Rich Media Institute) and using in the samples and I’m including what’s in there now. These are basic classes I use all the time with the PV3D work I’ve been doing:

  • SceneManager: Creates a PV3D scene with camera. Includes a timer that updates the scene
  • SWFManager: Loads and manages external SWF’s and provides easy access to the content
  • BitmapMaterialsTools: Includes createBitmapMaterial() which creates a BitmapMaterial from the class you provide
  • ColladaSceneLoader: Simple class for loading and maintaining the properties of a loaded collada scene
  • ObjectController: Used for basic rotation control of an object on stage with mouse drag as well as keyboard control
  • IlluminationMonitor: This needs to be cleaned up for use with other projects, but it calculates the dominant color in a box area and applies a dropShadowFilter to the specified target

Docs located here
Download the Flex2 Builder project files here (all FLA’s, images, 3DS, ai files are included)
Download this video, and put it in the videos directory. Or use any FLV and call it currentVideo.flv and put it in the videos directory

*NOTE: you don’t need Flex2 builder, you can compile and run this with FlashCS3. Just sent the main document to RockOnFlashLogo and you should be able to compile and run.

I was going to go through a full tutorial on this, but I just don’t have the time unfortunately. So, what I’ll do is describe the steps taken and field any questions after you check out the source and digest.

The workflow for this project included:
FlashCS3 (vector logo) -> ai files -> 3D Studio Max 7 -> DAE (Collada) -> FlashCS3 (create movieclip skin) -> Flex2 Builder

  • Flash CS3
    • Created vector art of RockOnFlash logo
    • Exported to Adobe Illustrator 6.0 files
  • 3D Studio Max
    • Imported .ai files into new 3D Studio Max scene
    • Extruded elements and converted to editable Poly (important to do BEFORE applying textures 😉
    • Added unwrap UVW modifier to objects and applied logo material to the objects created
    • Exported as Collada file
  • FlashCS3
    • Imported RockOnFlashLogo.jpg into FlashCS3 so that I could create a movieclip for use with Papervision3d’s MovieMaterial. I dynamically create a Video object in the SWF at runtime.
    • Published SWF into the deploy directory for runtime loading
  • Flex2 Builder
    • Created ActionScript project in Flex2 Builder
    • In the RockOnFlashLogo.as class:
      • Create new Sprite to be the canvas for the 3D scene
      • Create the Scene with SceneManager and pass our newly created canvas
      • Draw and align the stage
      • Load the LogoSkin.swf (created earlier)
      • Create the MovieMaterial() with the loaded SWF movieclip
      • Add new material to the MaterialsList for the collada scene
      • Load collada scene
      • When the collada scene is loaded and parsed:
        • Start SceneManager.getInstance().monitorScene() – starts rendering the camera to the scene
        • Create the video container and start playing the FLV
        • Tell the IlluminationManager what target and filterTarget to use
        • Tell the ObjectController which stage and object to control by passing collada.getObject() and the RockOnFlashLogo’s stage object
        • Rotate the Logo object slightly for initial view
        • Start timer to update the dynamic ambient color filter

The IlluminationManager reduces the size of the video in half, then uses an even smaller area to sample the colors from. This is for 2 reasons:

  • Performance – the least amount of pixels we have to test, the better
  • Quality – if you test the entire video, you not get a good experience usually because there’s always some dominant color throughout the scene (like black for live music videos). So, you concentrate on the middle where a camera man tries to keep his subjects, and that usually gives you the desired affect.

The green box shows you were I’m sampling the color information from. If I were sampling the entire area, it’d always be black.

And finally: The video is of the Atomic Punks Live performing Van Halen’s “Unchained”. They’re an incredible Van Halen tribute band who’s singer sounds EXACTLY like David Lee Roth – incredible. The guitarist covers Eddie’s stuff in beautiful form and the overall sound they produce FREAKIN’ ROCKS \M/!!! THEY get a 5 rock on rating from me. If their drummer ever dies or just goes away, I’m SOOOOO there!!

RockOn Rating:   RockOn voteRockOn voteRockOn voteRockOn voteRockOn vote

  1. nice!

  2. Wow. What a great resource. Thanks for doing this.

  3. it was my pleasure!

  4. I can’t wait for the class. Thanks again for the intro to X-Ray. I am definitely gonna be using that 24-7 now.

    Great work!

  5. anytime man!! I can’t wait to get the AS3 version of xray working 😉

  1. No trackbacks yet.

Comments are closed.