Technology Demo

Flash Demo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Spot for images

Intro

This project will show you how to create a flash panel that contains a flash video, and also how to apply a flash video to a 3D object.

Set Up

After creating a new Luster project, we'll go into Root.lua and make all of our edits there. First, we'll import our .swf flash files. Right click on the project name and go to New > Folder and name the folder "flash". Right click on the new folder and go to Import Resources > Files. Then, select demo.swf and PlanetEarthMovie.swf.

Then, create another new folder called meshes, and import the SmoothCube.mesh file. This will be our cube to place the flash movie on later. Now you've got all the files you'll need to get started.

Flash Panel

The flash panel is just going to be a flash swf embedded into the Luster project that you can interact with. It's a plane that is stationary.

To create it, we need to put in a little bit of code below the camera creation in Root.lua.

self.panel=luster.flash.FlashPanel(luster.flash.SWF("flash/demo.swf"),500,400)
self:addChild(self.panel)
self.panel.y=100
self.panel.x=30
self.panel.mouseEnabled=true

The first line of code creates a new object called panel, which then stores our demo.swf file. The FlashPanel takes three arguments: the first is the swf itself, the second being the height of the swf, the third being the width. The next line of code adds this new 2D plane containing our swf to the stage so that it can be viewed. The next two lines simply position it to make the final product look a bit nicer.

By default, Flash allows the user to have mouse interactions with the document. Luster, however, does not, and so the last line of code simply turns on mouse interactions. You can now run your project to see how it looks.

Creating a Flash Movie

Now we're going to bring in a flash movie that will later be applied as a texture to our cube.

First, we need to bring in the swf for our Planet Earth movie.

self.player=luster.flash.FlashPlayer("testMovie",luster.flash.SWF("flash/PlanetEarthMovie.swf"),512,512)

The "self.player" makes the player object and sets it to a new instance of luster.flash.FlashPlayer. FlashPlayer takes four arguments - the first is a unique name for our flashplayer, the second is the swf itself, and the last two are the height and width.

Next, we'll create the basic cube that will have the movie applied to it as a material. Displaying a mesh is already covered in the Navigation tutorial, and this is just a little bit different.

self.entity=luster.display.Entity(luster.resources.Mesh("meshes/SmoothCube.mesh"))
self:addChild(self.entity)
self.entity.z=-250
self.entity.x=80

Instead of a local variable, we're making the entity variable part of self. We then add it to the stage and adjust the position a bit to make it look nice.

Creating and Applying a Material

Now we're going to take our movie and turn it into a material that we can apply to the cube. This will make the video play on all six sides of the smooth cube.

local material = luster.resources.Material("testMaterial")
local pass=material:getTechnique(0):getPass(0)
local textureUnit=pass:createTextureUnit()
textureUnit.texture=self.player.texture

We start by creating a local variable called material that stores a Material named testMaterial. We have to edit the material a bit to get it to look right, and we do this by calling the method getTechnique, which is set to default (the 0) which in turn calls getPass with default arguments. We create a local textureUnit variable and set it to a default TextureUnit.

The textureUnit's texture attribute is set to the texture of the player we created earlier. Now we'll apply our new Material to our cube.

self.entity:setMaterial(material)

Movement Controls

As covered in the Navigation tutorial, we need to put in some controls for moving the cube around. Inside of the same init function, let's add the event listeners that keep track of mouse movement.

self:addEventListener(luster.display.DisplayObject.MOUSE_DOWN, Function(self, self.onMouseDown))
self:addEventListener(luster.display.DisplayObject.MOUSE_UP, Function(self, self.onMouseUp))
self:addEventListener(luster.display.DisplayObject.MOUSE_MOVE, Function(self, self.onMouseMove))

Then let's add some functions that will complete our handling of the mouse movement.

function Root:onMouseDown(button)
   if button == 0 then
      self.moving = true
   end
end
function Root:onMouseUp(button)
   if button == 0 then
      self.moving = false
   end
end
function Root:onMouseMove(dx, dy)
   if self.moving then
      self.entity:yaw(dx*0.01)
      self.entity:pitch(dy*0.01)
   end
end

Now we're finished. We can run our program to see the movie playing on the cube, our flash box next to it, and we have the ability to roll the cube around.