Category: Flash experiments

Categories
AS3 Flash Flash experiments

Six screens Flash animation

I currently working on a project where a Flash Application is played on six (6!) screens.
The screens are 1366×768 which must be (a least mine) the biggest Flash animation (8196px wide and 768pixels high)
The problem with Flash is that it will not go full-screen on more then on screen. With some hacking you can get it to open full-screen on your secondary monitor but not 2 monitors.

I hoped to find the solution in AIR, but that has a 2880px limit (read here)

After some googling I found Flash Dancer by Gizmoware.

Flash Dancer by Gizmoware

And who can explain it better then the Flash Dancer creator himself:

Flash Dancer gives Adobe Flash multi-monitor support. Want to play your Flash file fullscreen on monitor 2? Now you can. Want it to span fullscreen over 4 monitors? No problem with Flash Dancer. This is extremely useful in kiosk type applications, large scale multimedia installations, restaurants displaying menus on remote monitors, etc. Its been confirmed to work on a 6 monitor setup without a burp.

(I’m the one that has confirmed that it works on Vista and on 6 monitors 🙂 )

So what can I tell more:

[as highlight=”4″ light=”false” wraplines=”true”]
// Specifies that the size of the application be fixed, so that it remains unchanged even as the size of the player window changes.
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.quality = StageQuality.LOW; // important: the image will be cut off when you use HIGH
[/as]

And of course you need to tile a pattern, but I’ll leave that up to you.

Categories
Flash Flash experiments

Flash experiments: amazing tube

I was experimenting with Google SketchUp 6 and Pepakura designer v2 .1.2.
And I saw in the Pepakura a pattern when creating tubes.

Update: it not only creates tubes (example: 15 sides) but also cubes (4 sides) and prism (3 sides)

And off course I couldn’t resist building it in Flash:

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

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

I have made something similar: the amazing cube.
I’m working towards something????

Categories
Flash Flash experiments

Flash experiments: omtrek cirkel

I have to do this in Dutch because I have no idea what’s it called in English, sorry.
It not really important, and will be used in a project which has little to do with this explanation.

Een klein testje om de omtrek en de oppervlakte van een cirkel te berekenen.
Het moest van ver komen dus heb ik het ff opgezocht:
wiswijzer.nl
wisfaq.nl

Omtrek = pi * diameter = 2 * pi * straal
Oppervlakte = 1/4 * pi * diameter2 = pi * straal2

[swf]http://www.matthijskamstra.nl/laboratory/swf_experiments/omtrek.swf, 450, 250[/swf]
Update #1: For my English readers:
(more about circles here)
“omtrek” = circumference
“oppervlakte” = area (read more: circle area)
“diameter” = diameter (diameter)
“straal” = radius
(look more math stuff up at at Math Open Reference)
Categories
Flash Flash experiments

Flash experiments: tiled background

Update #1: Recently there are some who like to have the source of this project, that’s not a problem. But the source is what it is, and there are no comment in the code….
And because this post was not up-to-date, I’ve remove some of the links to sites with patterns because they didn’t exist anymore. That’s also the reason that I had to update the Flash file.
shortcut to download

Another experiment, to use external images for background patterns.

But there was no need to start from zero, so here are some tutorials that I used:

both tutorials were used in the experiment.

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

(I had to update this file because of broken links: this is version 2)

Get the source files here:

The .ZIP file contains:

+ tiledBackground     
     + deploy
            - AC_RunActiveContent.js
            - tiledBackground_v02.html
            - tiledBackground_v02.swf
     + source
            - tiledBackground_v02.fla

Borrowed some seamless background pattern from Squidfingers
pattern_021.gif
pattern_095.gif
pattern_111.gif
pattern_131.gif
pattern_141.gif

It’s not possible to link directly to Squidfingers!

But you can find your own patterns on the internet, examples of site with seamless background patterns:
http://www.wonderbackgrounds.com/
http://www.cameradio.tk/tiles1.htm

root2art.co.uk
http://backgroundsarchive.com/tiles/wood.php?page=2

I used http://www.neopets.com/backgrounds_tiled.phtml in the flash source.
But you can use any image from the internet!
(Need some help: find “tiled background” with google )

Categories
Flash Flash experiments

Flash experiments: select

Update: Before I could publish this post, before I finished this experiment, I found a better class to do what I want. TransformManager Released – Scale/Rotate/Move any MovieClip from Jack Doyle (Greensock). This class is what I had in mind when I started…. and much, much more… I’m using this class in the future.

Another experiment: I needed a possibility to select and manipulate a graphic in Flash.
So I looked at illustrator and Flash how they did it, and made a variation of my own.

So for now, I can select the top graphic, move and rotate it (not yet resize…)

Check it here:

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

Or check it the select experiment full screen..

Categories
Flash Flash experiments

Flash experiments: tools

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:

Or just check tools menu full screen..

Based upon xml: toolsmenu.xml

Categories
Flash Flash experiments

Flash experiments: Debug Button

Update #1: it seems that to much data makes this button not function, so I toned it down a little

For FlashBox I was looking for a way to get more/better feedback from the users when they report a bug.

It started with:


function submitBug (target_mc:MovieClip) {
	for(var i in target_mc) {
		trace ( 'key: ' + i + ', value: ' + target_mc[i]);
	}
}

But I’ve extended it, with other usefull information (stage-width/height, url, framenumber, etc);
And in combination with FlashBox (or in combination with the Browser detect – by Peter-Paul Koch [quirksmode]) you also can get the Operating system (I can get that too with Flash), Browser name (not possible with Flash) and version-number of the browser (also not possible with Flash)

With this information it should be easier to debug….

To export the data to me I used the lowest tech solution I could think of: 

getURL ("mailto:reportbut@zapper.com?subject=BugReport&body=bug:");

Just give it a try:

[swf]http://www.matthijskamstra.nl/blog/wp-content/uploads/debugBtn.swf, 220 ,70[/swf]
Categories
Flash Flash experiments FlashBox Open source / Freeware WordPress Plugin

My second WordPress plugin: wp-flashbox

Update #1: There are some problems with the plugin in Firefox 2 for the Mac and Flock: FlashBox is loaded, the images are loaded into it, but FlashBox is not visible.
I am looking into it, sorry Mac users!
There is also a difference between Firefox for the PC and IE for the PC: it works perfectly, but in Firefox FlashBox will be restarted and in IE FlashBox starts where it left of (if it’s started before). These is not a bug this is a feature!

Update #2: A feature I forgot to tell about: you don’t have to change the rel="lightbox" tags, it will also work with FlashBox. If you’re planning to use both, you have to use rel="flashbox"– tag. But if you want to use FlashBox instead of Lightbox, you have te deactivate lightbox!

FlashBox is my attempt to create a simple, unobtrusive script used to overlay images on the current page.

Read more about FlashBox in detail, the different post about FlashBoxor you can follow my progress in the Flashbox directory where my experiments are.

But to sum it up: It had to be smaller then the other (Lightbox, Thickbox and Graybox), but with the animation (like Lightbox).
Or just another alternative for Lightbox / Thickbox / Graybox?

And because I wanted to use it on my own blog, I wrote a plugin too. And I’m not afraid to share it with you.

Download WordPress Plugin – Download FlashBox v1.0

Check the latest Flashbox version: the category FlashBox

Download wp-flashbox wp-flashbox_v01.zip (17,9 kB)

Continue reading “My second WordPress plugin: wp-flashbox”
Categories
Flash Flash experiments FlashBox

Flash experiments: Flashbox – part 4

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

Today I’m focusing on Flash.

  1. First task was of course the security-box from Flash (which seems to fail ???)
  2. Get the basic stuff in there (loader, navigation, image, caption)
  3. And get it to center after loading
  4. ….

Done
But ….
I’ve got everything working in Flash at this moment but to “copy” Lightbox I need to use animations.

Because the animations create with the default animations classes from Adobe (mx.transitions.Tween) are quite heavy, I was looking for an alternative.
Which I found in TweenLite an excellent piece op work by Jack Doyle.

TweenLite provides a lightweight (about 2k), easy way to tween almost any property over time including a MovieClip’s volume. You can easily tween multiple properties at the same time too.

And because size does matter in this project, this will be a life saver.

Preview:

[swf]http://www.matthijskamstra.nl/laboratory/flashbox/flashbox_v01.swf, 450,450[/swf]

View directly

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;
}