Categories
AS3 AS3 migration Flash

Tiled background AS3

Sometimes you just need a pattern in the background that is fullscreen, of course you can use a big .PNG file but that is not always necessary.
You can use a pattern that you need to tile, I’ve written about this before: my post about tiled-background in Flash 8 AS2.
The code over there is based upon a tutorial (http://www.kirupa.com/developer/flash8/tiledbackground_flash8.htm)

And because kirupa is great they already have the answer:http://www.kirupa.com/forum/showthread.php?t=265953

But to put it next to each other:

AS2 example

For this example you need a bitmap in the library (right-click >> Linkage… >> activate ‘Export for ActionScript’) with the Linkage IndentifierStripePattern_mc‘ and this AS2 code placed in the root
[as]
import flash.display.BitmapData;
var backGroundBMP:BitmapData = BitmapData.loadBitmap(“StripePattern_mc”);
this.beginBitmapFill(backGroundBMP);
this.lineTo(Stage.width, 0);
this.lineTo(Stage.width, Stage.height);
this.lineTo(0, Stage.height);
this.lineTo(0, 0);
this.endFill();
[/as]

AS3 example

But in AS3 some things have changed. And for consistency I’m using StripePattern_mc although coding conventions will say it has to be StripePattern
[as]
var backGroundSprite:Sprite = new Sprite();
backGroundSprite.graphics.beginBitmapFill(new StripePattern_mc(0, 0));
backGroundSprite.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
backGroundSprite.graphics.endFill();
addChild(backGroundSprite);
[/as]

Besides the obvious changes, which I’m not going to explain (Stage.width vs stage.stageWidth, etc).

code line 2
BitmapData.loadBitmap is removed from AS3. There are no longer Linkage Identifiers and there is no longer attachMovie. Everything is created using the new operator.
And because a Bitmap(Data) needs two extra variables:
public function BitmapData(width:int, height:int, transparent:Boolean = true, fillColor:uint = 0xFFFFFFFF)

code line 3
drawRect is a new Graphic methode, but is does the same as the AS2 code part with lineTo, but shorter.

code line 5
and you need to add it to the displaylist (hmmm perhaps I need to explain this in a future post)

For this example I created a pattern with stripegenerator.com/ but any pattern will do.

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