New Media Fun

Having fun in an online world

Archive for the ‘Flash’ Category

Converting PowerPoint to Flash

Posted by admin under Flash, HTML

Ever needed to convert a PowerPoint presentation to a Flash SWF file? Well, Open Office Impress is your solution!

Simply, open your PowerPoint file in Impress, choose to export the presentation. When the dialog box appears, change the file format to Macromedia Flash (SWF). Impress then creates a flash file that has all your slides and includes functionality to advance by clicking on a slide.

Impress does a fine job and for most people that would be good enough in most situations. A recent project the presentation flash file was almost 2 MB and I wasn’t satisfied with the usability of just clicking on the slide. I used SWF Decompiler to extract the SWF file into a FLA file that would allow me to customize the presentation.

Once inside the flash file, I removed the hidden layer that allowed the user to click on the presentation. Each slide takes up 3 key frames, I reduced the keyframes to one per slide, this will be helpful when using ActionScript to advanced the slides. In the first keyframe of the actions layer, include stop(); to prevent the presentation from animating through all the slides.

Just be aware that when you are using SWF Decomplier some graphics and/or text might get altered or blocked from being created.

I then created a simple Flash holder that has a loader and a control module to allow the user to click through the presentation and go fullscreen.

You can see this work in action at Curriculum Commons.

UPDATE! The SWF Object plugin for jQuery has been recently updated to include allowfullscreen! Click here to get it!

I am a big fan of jQuery and when ever I am using JavaScript, it is the first engine I go to. Lately, I have been building a video player that has full screen functionality. Normally, I would use jQuery SWFObject but for some reason I was getting errors when I clicked on the button for the video to go to full screen. A quick inspection of the plugin’s code revealed that full screen functionality hadn’t been included.

It turned out adding ‘allowFullScreen’ to the plugin’s code was easier that I originally anticipated. The plugin uses a object that contains information like the SWF URL, width, height, wmode, flashvars, etc. All I needed to do was add an extra line of code that would grab ‘allowFullScreen’ value and integrate it into the rendered code to display the flash file.

I used the uncompressed plugin JS file to make the adjustments needed to make full screen to work.

Find this section of code in the JS file:

attrs: {
    id: obj.id,
    name: obj.name,
    height: obj.height || 180,
    width: obj.width || 320
},
params: {
    wmode: obj.wmode || 'opaque',
    flashvars: obj.flashvars
}

Insert the following code after wmode:

    allowFullScreen: obj.allowFullScreen || 'false',

The new code should look like this:

attrs: {
    id: obj.id,
    name: obj.name,
    height: obj.height || 180,
    width: obj.width || 320
},
params: {
    wmode: obj.wmode || 'opaque',
    allowFullScreen: obj.allowFullScreen || 'false',
    flashvars: obj.flashvars
}

Now the plugin will use the allowFullScreen correctly. This is a sample of how to use it:

$(document).ready(function(){
    $("#flashContent").flash(
                     {
                        swf:'sample.swf',
                        width:'800',
                        height:'600',
                        wmode: 'window',
                        allowFullScreen: 'true'
                    }
                    );
});

Finally, you will want to compress the revised code. I suggest going over to Google Code and using their Closure tool.

BulkLoader and CSS

Posted by admin under Flash, HTML

I have become a big fan of using BulkLoader. It is a great class library that allows me to load many different types of files in a controlled and organized fashion. However, it isn’t clear on how to load CSS.

I assumed I would be able to use a “getCSS” function, but there isn’t one coded into the class structure.

To get around this I used the loaded CSS file as a String and then used the parseCSS() function to convert the String into a usable CSS Object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// create the loader instance
var loader:BulkLoader = new BulkLoader("cssLoading");

var css:StyleSheet;
var cssURL:String = "myCSS.css";

loader.add(cssURL);

...

 // when loader is complete
 function parseCSS():void{
  // place the loaded CSS into a string
  var cssContent:String = String(loader.getContent(cssURL))
 
  css = new StyleSheet();
  css.parseCSS(cssContent);

  // trace should output '[object StyleSheet]'
  trace(" Loaded Style Sheet: " + css);
 }

Hope this can be helpful for others.

FlashVars Simplified

Posted by admin under Flash

Today, I was having a frustrating time finding a clear method flashVars code snippet. With some trial and error, I finally had success with a simple method to grab variables from the html embedding code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package{
 import flash.display.LoaderInfo;
 import flash.display.Sprite;
 
 public class DocumentClass extends Sprite{
  private var _myflashVar:String = LoaderInfo(root.loaderInfo).parameters.myVar;
 
  public function DocumentClass(){
   if(_myflashVar == null){
    _myflashVar = "ERROR"
   }
  }
 }
}

Hope this helps anyone out there.

Today I started to play around with the idea of creating a box with a gradient in it. Of course I was using Adobe Livedocs to get the basic code for creating a box with a gradient fill:

1
2
3
4
5
6
7
8
9
10
11
import flash.geom.*
import flash.display.*
var fillType:String = GradientType.LINEAR;
var colors:Array = [0xFF0000, 0x0000FF];
var alphas:Array = [1, 1];
var ratios:Array = [0x00, 0xFF];
var matr:Matrix = new Matrix();
matr.createGradientBox(20, 20, 0, 0, 0);
var spreadMethod:String = SpreadMethod.PAD;
this.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);  
this.graphics.drawRect(0,0,100,100);

The confusion I was experiencing was the createGradientBox(). It wasn’t clear to me how to adjust the matrix numbers to get a result I was looking for. Fortunately, I came across a great flash file found on Poly Geek.

Gradient Tool screen shot from Poly Geek

Gradient Tool screen shot from Poly Geek