Laser 3D documentation
Version 1.0.0 
About

This product contains three applications/files

  1. preloader 3D simple
  2. laser 3D
  3. Presentor laser 3D

preloader 3D simple
The preloader "simple" was the initial release of the 3D application. It's not as sophisticated as "laser 3D" or "presentor laser 3D". It contains a slightly simpler routine structure and only includes two pixelfont type of digits and no uppercase/lowercase. It can be used by anything as preloader animation. As long as you continuously keep pushing (e.g. by ENTER_FRAME event) the percentual value of the preloading progress of some/any content, to the 3D instances internal variable "fr" (short for "fraction"), then the 3D instance will do the rest for you and once reached 100% tell the parent of where it's added to play().

laser 3D
This is the main application. You can set shapes to be created from one of three ways
- from class definition (.as file)
- from xml file
- directly drawn with Component Inspector drawing panel

Presentor laser 3D
Same as "laser 3D" but implemented in the intro/banner file "Presentor", also available as non 3D version. This enhanced version automatically includes "laser 3D" when exporting so it doesn't need to load it as external file. You set 3D shapes directly in the Presentor .xml file

You can also use "laser 3D" for preloading purpose, in the Component Inspector it has a selectbox for it.
Video Tutorials


You can watch High Definition 1280x720 tutorials online explaining you with how basics work with
Configuring/choosing input

Laser 3D can accept 3 kind of inputs

  1. from class definition (.as file)
  2. from xml file
  3. directly drawn with Component Inspector drawing panel

The input from 1 (class) and 2 (xml) are very similar. In both cases, the points / lines / curve data for each individual shape is saved in an external file, either class or xml. Depending on the input and "glyhps / string" parameter, it will match and/or put in sequence any number of shapes you need it to display.

In other words, you can mix multiple shapes together in one combo and create as many combo-sequences as you like, it will run the combo-sequences one after the other and repeat from the first combo-sequence when completed.

(Notice ... one shape is not even necessarily literally "one single shape". It's ok using the drawing panel to draw a square + a circle + a triangle and then save all 3 together "as one shape", it will still work fine so you that gives you less to worry about.)

Class
In folder com / patrickjansendesign / laser3d you will find file definitions3D.as which the component instance will use to extract the shape data from in case you set the input type to class.

XML
File contents_3D.xml is a sample file which the component instance can use to extract the shape data from in case you set the input type to xml. Notice that you can create as many xml files as you like, but each component instance may only use one one xml file as source to extract the shape data from.

Drawing Panel
If you use the drawing panel directly in the Component Inspector, then the shape data is saved directly into 4 internal variables ("drawapp_string_grid", "drawapp_string_pts", "drawapp_string_sds" and "drawapp_string_sdscurveto"). You don't need to save the data to class or xml file. But you dó have the option to export/import the drawn result to or from class/xml code, so you can easily reuse it by other projects later if need be.
Basics

This is how you usually will start


Class


In case you use "class",

  • In component inspector select [Use Class Definition]
  • By default it will use a precreated shape "example_shape" as single entry. It's a simple rectangle just so it doesn't start blank.
  • Make sure all the shapes you'll be using are defined in the definitions3D.as file
  • If you use font "serif", "sans" or pixelfont digits, they'll be already available (precreated) in definitions3D.as
  • If you need a new shape, open the drawing panel either from the component inspector or the standalone draw "swf" file. Then draw your shape(s), click the [AS Class code] button on the left bottom and give your shape a name in the popup, then copy the code and paste it into the definitions3D.as file.
  • Now if you select "SET SHAPE(S) SEQUENCES" you can use the name as entry (where it would say "example_shape") or as one of the entries if you use more then one shape.
  • Export and it will use your shape.



XML


In case you use "xml",

  • In component inspector select [Use XML]
  • Select the xml file to use ("contents_3D.xml" precreated)
  • By default it will use a precreated shape "example_shape" as single entry. It's a simple rectangle just so it doesn't start blank.
  • Make sure all the shapes you'll be using are defined in the XML file. The file contents_3D.xml has been precreated for you so it's recommended you start with that file.
  • If you use font "serif", "sans" or pixelfont digits, they'll be already available (precreated) in contents_3D.xml
  • If you need a new shape, open the drawing panel either from the component inspector or the standalone draw "swf" file. Then draw your shape(s) , click the [XML code] button on the left bottom and give your shape a name in the popup, then copy the code and paste it into the contents_3D.xml file.
  • Selecting XML will NOT use "SET SHAPE(S) SEQUENCES" but node <glyphstring> in the contents_3D.xml file. You can use the name as entry (where it would say "example_shape") or as one of the entries if you use more then one shape.
  • Export and it will use your shape.



Drawing Panel


If you want to draw your shape directly and go

  • In component inspector select [Use Drawing Panel]
  • Draw your shape
  • Save/Close and export and it will use your shape

Notice that this method only saves the data into the component instance parameters. It's not saved to disk or file this way. If you want to save the data to class or xml file, before save/close click the button on the left-bottom to generate the xml or class code, then you can save that code to xml or class file.

 
Parameters

In the component3D.as file these parameters are defined. If you drag&drop the component to stage, you can set them through the Component Inspector which has a custom User Interface for easy understanding. But if you use addChild methods to generate an instance of the laser 3D component, you can set them through actionscript. Below is an overview of which parameter does what.

linethickness   Number
   

The thickness of the 3D shape lines
linealphafront   Number
   

The front alpha transparency of the 3D shape lines
linealphaback   Number
   

The back alpha transparency of the 3D shape lines
linealphaside   Number
   

The side alpha transparency of the 3D shape lines
raythickness   Number
   

The thickness of the laser / lightning ray
rayalpha   Number
   

The alpha transparency of the laser / lightning ray
     
blendmodeline   Number (0 = none , 1 = add)
   

The blendmode type of the 3D shape lines
blendmoderay   Number (0 = none , 1 = add)
   

The blendmode type of the laser / lightning ray
linecolor   hex/number
   

The color of the 3D shape lines
lineglowcolorin   hex/number
   

The first glow layer (inner) color of the 3D shape lines
lineglowcolorout   hex/number
   

The second glow layer (outer) color of the 3D shape lines
lineglowquality   Number
   

The glow quality of the 3D shape lines
lineglowstrength   Number
   

The glow strength of the 3D shape lines
lineglowalpha   Number
   

The glow alpha transparency of the 3D shape lines
lineglowblur   Number
   

The glow blur strength of the 3D shape lines
     
raycolor   hex/number
   

The color of the laser / lightning ray
rayglowcolorin   hex/number
   

The first glow layer (inner) color of the laser / lightning ray
rayglowcolorout   hex/number
   

The second glow layer (outer) color of the laser / lightning ray
rayglowquality   Number
   

The glow quality of the laser / lightning ray
rayglowstrength   Number
   

The glow strength of the laser / lightning ray
rayglowalpha   Number
   

The glow alpha transparency of the laser / lightning ray
rayglowblur   Number
   

The glow blur strength of the laser / lightning ray
     
gridsize   Number
   

The size of the 3D object
griddepth   Number
   

The depth of the 3D object
stretchX   Number
   

Horizontal stretch/scale of the 3D object
     
fixed3DrotationX   Number
   

The fixed/start rotation around axis X of the 3D object
fixed3DrotationY   Number
   

The fixed/start rotation around axis Y of the 3D object
fixed3DrotationZ   Number
   

The fixed/start rotation around axis Z of the 3D object
domouseincline   true/false
   

Rotate the object to mouse movement. Influenced by
"mouseareaW", "mouseareaH", "tilthorizontal" and "tiltvertical"
doobjectincline   true/false
   

Rotate the object to object movement. Influenced by
"mouseareaW", "mouseareaH", "tilthorizontal" and "tiltvertical"

obs: (mouseareaW / mouseareaH define the area where the object is allowed to move within if "objectfollowmouse" set to false)
mouseareaW   Number
   

The width of the animation-sensitive mouse area
mouseareaH   Number
   

The height of the animation-sensitive mouse area
tilthorizontal   Number
   

The amount to rotate the 3D object horizontally, if "domouseincline" or "doobjectincline"
tiltvertical   Number
   

The amount to rotate the 3D object vertically, if "domouseincline" or "doobjectincline"
slowrotate   Number
   

Fixed horizontal rotation per frame
autorotate   true/false
   

Rotate the object once throughout complete generation period
linebyline   true/false
   

Generates shape lines one by one (instead of all lines simultaneously)
linebuildsteps   Number
   

Number of frames it takes to build each line of a shape
delaytime   Number
   

Number of seconds to wait with fully created object before going to the next one in sequence
outsteps   Number
   

Number of frames it takes to remove the object (all lines decrease/shrink simultaneously)
     
usesource   Number
   

Use a source for the laser / lightning ray to start from
     
beam   String ("laser" or "ray")
   

The method creating the shapes coming out of the gun, either "laser" or (lightning) "ray"
frommouse   true/false
   

Decides if the laser is glued to the mouse cursor or not
fromobject   true/false
   

Decides if the laser object (gun) is added/used or not
gunminscale   Number
   

Laser gun minimum scale
gunmaxscale   Number
   

Laser gun maximum scale
objectfollowmouse   true/false
   

Decides if the laser object (gun) chases the mouse position or if it flies around randomly on its own
fixedpoint   true/false
   

Decides if a fixed point of origin is used or not
fixedpointX   Number
   

The horizontal fixed point of origin
fixedpointY   Number
   

The vertical fixed point of origin
singleplane   true/false
   

Decides if only the front side of the 3D object should be used/created
connectall   true/false
   

Decides if the front side points should all be connected to one point (if "singleplane" set to true)
noray   true/false
   

Decides if the generating laser / lightning ray line should be used or not (if "singleplane" set to true)
     
addsmoke   true/false
   

Decides if smoke particles should come from the point where the laser is drawing
addsparks   true/false
   

Decides if spark particles should come from the point where the laser is drawing
intervalsmoke   Number
   

Interval in frames between generation of smoke particles

intervalsparks   Number
   

Interval in frames between generation of spark particles
sparktype   Number (1,2 or 3)
   

The type of sparks it should generate:
1) Basic short hot sparks
2) Fusing smooth sparks
3) Heavier welding hot sparks
     
addmirror   true/false
   

Decides if a mirror reflection should be generated
mirrorgun   true/false
   

Decides if the laser object (gun) should also be reflected
mirrorscale   Number
   

The vertical scaling of the reflection
virtualfloor   Number
   

The thickness of the 3D shape lines
reflectionheight   Number
   

The height of the reflection (the bottom distance where it will be 0% transparent)
watermirror   true/false
   

Reflect the 3D object as water surface
     
xmlfile   String
   

The xml file name to use, in case of "inputtype" 1 (xml)
auto3D   true/false
   

Automatically generate 3D animation from 2D shape data

NOTICE: The component actually is able to receive 3D data from class or xml file (try the icosa as shape name and set "auto3D" to false). At this current moment it's not likely you'll need it but in case you do have methods to generate 3D data containing Vertices definition and faces definitions, you'll actually be able to use those. In the future it may be possible to extract those from 3rd party applications like 3D max or Swift 3D or maybe papervision or other solutions, so when that moment comes you'll be able to hook up your 3D creations into this precreated method.
aspreloader   true/false
   

Set the 3D animation to function as preloader. Don't forget to push the preloading % value to variable "fr" of the component instance. This method uses "pixel_simple" shape inputs (see function genobj() in component3D.as)
glyphstring   String
   

The string of shapes to be used [shape1A, shape1B] , [shape2A, shape2B ,shape2C] , [shape3A]

[example_shape, star] , [doublestar, SPACE,SPACE,SPACE, example_shape] , [serif_a, sans_a] , [FONT_SERIF_abc, FONT_SANS_abc]

The above example will do the following

sequence 1) combo example_shape + star
sequence 2) combo doublestar + example_shape and adds SPACE's inbetween (1 grid unit empty shape)
sequence 3) combo serif_a and sans_a
sequence 4) combo serif_a and serif_b and serif_c and sans_a and sans_b and sans_c
inputtype   Number (0,1 or 2)
   

Inputtype of the component
1) class
2) xml
3) drawing panel

Notice it's possible to actually use 3) drawing panel when you use addChild to generate instances. You can't draw anything that way and you'll still need to push appropriate strings to the 4 parameters below. You'll at least once need to use the drawing panel in the component instance to generate the data, but you can use trace() in the actionscript file (component3D.as) to trace out what you drew and save that result on some txt file on your computer and then you can later push that data when using addChild. Obviously recommended would be exporting to class or xml code and using that method instead. But there are cases where this method could prove useful
     
drawapp_string_grid   String
   

Combination of drawing app grid settings
drawapp_string_pts   String
   

Combination of drawing app grid settings points data

drawapp_string_sds   String
   

Combination of drawing app grid settings shape sides data
drawapp_string_sdscurveto   String
   

Combination of drawing app grid settings shape curveto sides data


Tips

Here are some tips to be aware of

  • Notice that the definitions3D.as class file will ALWAYS be implemented into the final .swf, so you if you want to keep file size low, you may choose to remove ALL the shape definitions it wont need. It contains all the upper and lowercases for Serif and Sans and digits for those as well as for the pixelfont types.

  • As the point above, you can also remove unneeded shapes in the XML file so it loads faster.

  • The choice of using Class or XML or direct drawing panel depends on your needs, keep in mind that using class and xml will be easier for mixing shapes together (because creating multiple shapes in one go using the drawing panel will actually save everything together in the component parameter as if it were one single "shape"-object)

  • Change a shapes code definition "gridw" and "space" value in the class or xml definition, if the next shape is too far or too close to the prior one.

  • You can also choose to use the SPACE-shape to put extra space between shapes. It's simply a precreated shape in the CLASS and XML file with the name "SPACE", in uppercase. It has no points nor sides or curveto sides, but a single gridw of value 1 (you can change that too) so it inserts 1 grid unit inbetween. You can see it for example in the contents_3D.xml node <glyphstring> where the second sequence has three times this "SPACE" between "doublestar" and "example shape", creating a little bit of extra distance between them.

  • Change the "shiftY" to offset a shape vertically, moving it up or down

  • Drawing Panel tips:

    - Hide a shape's or hole's dots when you're done drawing it by clicking the eye-icon above the square buttons with the numbers to select shapes and holes above the grid. This way it won't unnecessarily select dots and start drawing from that point.

    - Create as few points as possible to keep animation short

    - Export your drawing to Class/XML code and save it to temporary files every now and then if you're working on more complex drawings, that way you can clear everything and import it back if you encounter trouble, bugs or mess up at some point

    - If the drawing panel for some reason has trouble (e.g. not allowing drag-ing a shape or adding a point), try exporting the drawing as it is to XML or CLASS code and saving that data. Close your .fla and reopen it and start drawing from blank, import back the XML / CLASS code, and continue drawing. That can work because when generating/exporting XML or CLASS code it will only include the bare essentials and discard any data which is not needed, it performs more or less a kind of "cleanup".