Categories
Flash Flash experiments FlashBox

Flash experiments: Flashbox – part 3

Update: Check the Flashbox directory or more post about FlashBox for recent update

Lightbox Javascript to Flashbox Javascript
Bugs in the Lightbox script:

  1. Lightbox doesn’t follow when the window is scrolled, I’ve fixed this bug
  2. if no Image (broken link) is loaded, there is no way to stop this process, and you get no feedback

Bug #1: My fix for the scroll bug:


function onscrollChange ()
{
	var arrayPageSize = getPageSize ();
	var arrayPageScroll = getPageScroll ();
	var lightboxTop = arrayPageScroll [1] + (arrayPageSize [3] / 15);
	setTop ('flashcontent', arrayPageScroll [1]);

}

and in the showFlashbox function I started to check if the window is scrolled:
window.onscroll = onscrollChange;

Bug #2: This is a bug which will not be fixed in javascipt, but in Flash.

Lightbox HTML to Flashbox HTML

use this doctype in your html files, you need it if you want layers (

) to have a 100% width and height:



put the following lines in you directory structure and html:



Lightbox CSS to Flashbox CC


body,html  {height: 100%;margin: 0;padding: 0;}
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}
#flashcontent{
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
Categories
Flash Flash experiments FlashBox

Flash experiments: Flashbox – part 2

Update: Check the Flashbox directory or more post about FlashBox for recent update

Flash and crossdomain

The first obstacle is the security box / crossdomain in Flash.
If you want to know more about the security box and crossdomain.xml, visit Martijn de Visser blog, he has an excellent explanation (with images!!!).

But in short, if you want to load images/ xml/ etc from a different server then your own, you need permission (crossdomain.xml) from that server.

This information is given to us by Macromedia Adobe:
loadClip (MovieClipLoader.loadClip method) which explains about crossdomain, security box and the MovieClipLoader (this is the method I use to load the images).

And here I seem to run into a bug: it should not be possible to load from another server without a crossdomain.xml, but I can.
When I follow my HTTP traffic between my machine and the Internet (using Charles) I don’t come across a crossdomain.xml when I load images but when I load xml form that same server I don’t get permission to do so (it can’t find a crossdomain.xml and so it’s not allowed to load xml from that server).

Xml loading from another server is not allowed without crossdomain.xml, but images doesn’t seem to be a problem.

Categories
Flash Flash experiments FlashBox

Flash experiments: Flashbox – part 1

Update: I am not keeping files for historical purposes, so the Flashbox directory will be update. (This means: when you view the progress, explained in this post, there is a possibility that the files are already evolved some… and the description here won’t fit what you see )
Check for more recent post about FlashBox.

Introduction to Flash experiment: Flashbox

In “Flatpack toys other then ReadyMech” I started to experimented with Lightbox JS v2.0 to show images without using a popup or leave the page. I used wp-lightbox2.
And I was impressed! It uses prototype.js which is a JavaScript Framework. Until I saw that wp-lightbox2 plugin (lightbox.js, prototype.js, effects.js, images, css and php file) is a total of 86,6kB….

So I looked for a alternative, and found thickbox which was smaller (total 31kB) and more versatile (not only images and galleries but also inline content, iframes and AJAX content). Thickbox uses jQuery which is a JavaScript Library.
I used the wp-thickbox plugin (20,8 kB) and don’t forget wp-jQuery (19.5kB). So to get thickbox working on WordPress it will add up to 40.3kB total (less then half of lightbox).

And here comes the trouble:
A couple of days ago there was an update of WordPress: WordPress 2.1 Ella and this version of WordPress uses prototype.
And prototype and jQuery can live together but can cause problem.
Which it did in my case: Thickbox didn’t work any more, and a theme I was working on (using jQuery) stop working too.

Update: Not functioning of Thickbox had nothing to do with WordPress 2.1 or with the wp-plugin. I was to hasty with my conclusion. Read the comments

So I changed this blog (not update to wp2.1 yet) back to Lightbox again, because of the prototype/jQuery issues and future updates of my blog.

Categories
Flash Flash experiments

Flash experiments: the amazing cube

I decided to “share” my unstructured flash experiments:

And in this case it’s a flash application that creates flat, printable versions of cubes. Just print it, cut it out, glue it together and there you have it: the amazing cube:

[swf]http://www.matthijskamstra.nl/laboratory/swf_experiments/amazing_cube.swf, 450, 450[/swf]

Or just check the amazing cube full screen..

Categories
Flash experiments

Flash experiments: a new category

I added the category “Flash experiments” in which I will show you all my experiments.

Which usually lead to nothing, but I have fun making them.
And I have a lot of them, so this seems the best place to show them.

So to sum it up:

  • Little projects to fix a “itch” I have
  • Usually not very usefull
  • But fun to make
  • Sometimes animations
  • OOP

Soon more about this Category

Categories
Firefox extensions Flash Tools of the trade

Flash tools of the trade: flash-plugin switcher

Very recently I wrote about a Firefox extension: the FlashTracer written by Alessandro Crugnola. This extension will only make the hearts of Flash developers go faster, which it did in my case: I love this plugin! And although this is a relative new Firefox extension, it already helped me debug a application that I build.

Alessandro Crugnola is also the guy that gave us SE|PY (this is the editor I use for Flash programming)

Screenshot of Flash Switcher extension for FirefoxAlessandro created another Firefox extension: Flash Switcher extension for Firefox


Flash Switcher extension for FirefoxFlash Switcher – This extension comes with all the currently published flash player plugins (from the version 2 to the most recent 9,0,16) and allows you to easily switch from one plugin to another, or also to remove the currently installed plugin (maybe for testing the express install).

I used to use KewBee Plugin Switcher. Which is now for free, but if I remember correctly will be a commercial program. The big plus of that program is that it also works for IE, but who cares…. (and windows doesn’t like that you install / uninstall something without their knowledge, so it creates lot of ERRORS).

Categories
Firefox extensions Flash Tools of the trade

Flash tools of the trade: debug

I try not to regurgitate info from other blogs…
But I have to talk about a entry from Alessandro: because it makes me “extremely” happy.

The creator of SE|PY: Alessandro Crugnola has created his first firefox extension. Good for him, but what it´s to me?

FlashTracerWell… it’s one of the first tools that makes it possible to trace / debug in Firefox.
While running any .SWF Flash file in your browser you can see all the output generated by the “trace” flash functions in this sidebar component. This is very useful especially working with server side technology.
You can debug without anyone knowing this, even with on a live site: only people that have this extension installed will know this.

You just need to install the debug version of the flashplayer and the Firefox extension and you’re ready to go!

It made me painfully aware that we Flash-developers leave a lot of “traces” behind in the .SWF’s.
But this can be fixed: just check ‘Omit trace actions’ in the publish settings.

FlashTracerFlashTracer – While running any .swf Flash file in your browser you can see all the output generated by the “trace” flash functions in this sidebar component.
You *NEED* the flash player debug version to run this extension correctly: flashplayer_9_plugin_debug

Update #1: A colleague found a “funny” trace at youtube: it has something to do with the play button not wanting to appear….

Categories
Flash video player

How can I make FLV with freeware / opensource software

I have written about the creation of FLV (Flash Video) with freeware/open-source software before. But I’ve made the mistake to talk about to many different aspects of the FLV: the encoder, the offline flv-player and the web flv-player.

This will be corrected in this post, so after reading this you will know:

  1. Which programs you can use to encode FLV but don’t have to pay for.
  2. Which program I would use.
  3. And why I would use this program

I know of these freeware/open-source projects you can use to encode FLV:

  1. Riva FLV Encoder
  2. Digitalgroover FLV Encoder
  3. Super
  4. Mediacoder

I’ve been testing them on a couple points.

And the winner is: Riva FLV Encoder!
But it was a close race with number 2: Digitalgroover FLV Encoder
Both of these programs are very easy to use: they can do only one thing: create FLV, which makes them very powerful and useful.
Riva FLV Encoder wins because it can save presets (settings), has some documentation and runs immediately on my home computer. Digitalgroover FLV Encoder could win with the next round (version) if: it runs on my home computer (it works fine on my computer at work…) and save/load presets (settings) in XML.

The other programs can be used to encode more than one at a time (batch) but both don’t write FLV1.1 (no MetaData) so you will need to update this with Buraks FLVMDI (FLV MetaData Injector) which also has the capability to batch.
The combination of complex interface, possibility to encode more than only FLV and no MetaData, makes Super and Mediacoder more programs for professionals.

Categories
Flash video player

Why do I need MetaData?

So the first question that I have to answer is:
What is MetaData?
MetaData is information stored in the video file itself (FLV-file) and is not immediately visible.
Typical information stored in the video is the video’s duration, creation date, data rates, but this depends of the encoder.

Second question would be:
Why do I need MetaData?
Well you don’t need MetaData for anything. The FLV-players need it. The MetaData is usually used to create the position of the playhead. Which makes it easier for the viewer of the video to determine how long the video will be, or skip to a specific place in the video. But can also be used to search through video with a specific creationdate, framerate, filesize, width or height. So with MetaData you will make it easier to view your video!

Some other questions:
Do I need to worry about MetaData?
No, if you use a encoder which creates FLV 1.1, it will also create MetaData.

How do I know if my video has MetaData?
If you play your video and the playhead doesn’t move, your movie probably doesn’t have any MetaData.

How can I make/repair MetaData?
To put MetaData into a FLV file you can use Buraks FLVMDI (FLV MetaData Injector)
FLVMDI is free to use, but you can’t distribute it. It looks very intimidating; [it’s a command line application] but there’s also a GUI which makes our lives much easier.
And the Digitalgroover flvplayer has a repair button to fix your FLV. It will not show the seekbar if there isn’t any MetaData.

Will repairing MetaData change the quality of the video
No, it will change in filesize (about 2kB on a file which was 2.014kB) but won’t change any video or audio quality.
Yes, it will change the viewing quality because you can see the playhead-position and the ability to search/skip parts.

Categories
Flash Flash video player

Flash Video (FLV) Player 1.3 released

About the project

Read more about it here

flvPlayer mck v1.3

Download

Because y’all not knocking down the door for this player, I’ve given myself some time to clean up the source code. So just as in version 1.1 and version 1.2 no class files available but you can download the SWF, the readme.txt and some html files in a ZIP

Get your stuff here: flvPlayer_mck_v1_3.zip

Licensing