Rastereffekt mit AS3

[dhoefgen]

Hallo zusammen,

wie kriege ich denn so einen Raster-Effekt hin wie auf dieser Seite:
http://www.dmcgroup.eu/de/

Meine Seite hat auch einen Film im Vollbild laufen, aber die Rasterung ist schwierig.
Ich hatte es zunächst mit einem transparenten PNG versucht, das ich mit Photoshop vorbereitet hatte. Das ergibt aber Pixelfehler auf dem Screen, sobald man das Fenster skaliert.

Ich bin für jeden Tipp dankbar!

[salazar]

hi und willkommen im flashforum,
schau mal. das folgende bsp. dürfte dir weiterhelfen:

PHP-Code:

var pattern:BitmapData = /* hier deine bitmapData mit der du das raster erstellen willst */

var wi:Number = stage.stageWidth;
var hi:Number = stage.stageHeight;

var backroundGrid:Sprite = new Sprite();
    //backroundGrid.graphics.clear();
    backroundGrid.graphics.beginBitmapFill( pattern );
    backroundGrid.graphics.drawRect( 0, 0, wi, hi );
    
addChild( backroundGrid ); 


cheers, sal

[dhoefgen]

Hi sal,

cool danke!

var pattern:BitmapData = /* hier deine bitmapData mit der du das raster erstellen willst */

Dumme Frage (bin AS Newbie): wie gebe ich die Bitmapdatei an...

var pattern:BitmapData = "raster.gif"

??

[salazar]

wenn dein bild in der bibliothek liegt und einen linkage namen hat... z.B. DeinBitmapData.... dann erzeugste davon eine instanz wie folgt:

PHP-Code:

 = new DeinBitmapData( 0, 0 ); 


cheers, sal

[[RK]]

ööööhm - wie wärs den Effekt ins Video reinzurechnen?
Einen geeigneten Filter für dein Videobearbeitungs-Tool deiner Wahl finden, anwenden und rausrendern?

Ansonnsten schreit das ja nach Pixelbender \o/ - lol (ja ich habs im Moment mit Pixelbender)

[landa]

Ahoj,

wenn man das Raster direkt ins Video reinzeichnet, dann hat das den derben Nebeneffekt, dass das Raster mitskaliert wird je nach Browserfenstergröße.
Man kann also nicht festlegen wie groß- oder kleinmaschig das Raster wird.

Mich hat vor Kurzem auch mal interessiert wie das gehen könnte und hab das gefunden:
How to create a de-pixelating grid for flash video

PHP-Code:

// Create a transparent black square, 2x2 pixels
var bmpd:BitmapData = new BitmapData(2, 2, true, 0x00000000);
// Create a rectangle, 1x1 pixels
var rect:Rectangle = new Rectangle(0, 0, 1, 1);
// Place the rectangle inside the bitmap data object
// Give it a color... Black.
bmpd.fillRect(rect,0xFF000000);

Then, use the beginBitmapFill to draw a rectangle the size of your stage...

AS3:
var mc:MovieClip = new MovieClip();
// Create a new bitmap fill based on the bitmap data object
// And allow it to repeat
mc.graphics.beginBitmapFill(bmpd, null, true);
mc.graphics.drawRect(0, 0, 200, 200);
mc.graphics.endFill();

AS2:
var mc:MovieClip = createEmptyMovieClip("grid_mc", 1);
with (mc) {
beginBitmapFill(bmpd);
moveTo(0,0);
lineTo(0,200);
lineTo(200,200);
lineTo(200,0);
lineTo(0,0);
endFill();
} 


man muß noch das import ...bitmapdata und import ...rectangle oben reinschreiben, ansonsten funktioniert das script für ein Raster.
(Mir ist es aber nicht gelungen es auf stageWidth/height anzulegen. Es hat nicht mitskaliert ... weiß eventuell Einer von Euch wie das geht?)

Gruß
landa

[hmpf]

Diese Raster sind ja auch deshalb so beliebt, weil man damit etwas über die Skalierung/Pixel/Komprimierung hinwegtäuschen kann, wenn man z.B. ein Video im Fullscreen laufen hat.
Wenn man das Raster direkt ins Video reinrechnet, wird es nicht nur mitskaliert, sondern, vor allem wenn es ein feines Pixelraster ist, kaputt komprimiert. Und wenn es nicht bei der Videokompression zermatschen soll, wird die Dateigröße des Videos explodieren.

[hmpf]

Zitat von landa

(Mir ist es aber nicht gelungen es auf stageWidth/height anzulegen. Es hat nicht mitskaliert ... weiß eventuell Einer von Euch wie das geht?)

stage.addEventListener(Event.RESIZE, rasterZeichnen);
 
var mc:MovieClip = new MovieClip();
function rasterZeichnen(event:Event):void{
 
mc.graphics.clear();
mc.graphics.beginBitmapFill(bmpd, null, true);
mc.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
mc.graphics.endFill(); 
} 

[uncle.sam]

Wie wird eigentlich nur das video iim hintergrund skaliert? der content bleibt immer in der gleichen grösse.
Ich weiss ja mit allowscale und noscale, aber bezieht sich das nicht immer auf den ganzen film?

[landa]

Zitat von uncle.sam

Wie wird eigentlich nur das video iim hintergrund skaliert?

Ahoj,

ich hab hier einen mc ("scaleMC") in dem das video-Objekt liegt.
"MC" ist ein movieclip der nicht skaliert, aber mittig positioniert werden soll.

PHP-Code:

Stage.scaleMode = "noScale"; 
//Skalierung für die ganze Bühne abschalten. 
Stage.align = "TL"; 
//Die aktuelle Ausrichtung der SWF-Datei im Player oder Browser. In diesem Fall TL(Top-Left).  
lstrn = new Object(); 
//Listener erstellen. 
lstrn.onResize = function() { 
    //Beim verändern der Bühnengröße... 
    scaleMC._x = Stage.width/2; 
    //den zu skalierenden MovieClip in die Mitte des Flash Films setzen. 
    scaleMC._y = Stage.height/2; 
    //den zu skalierenden MovieClip in die Mitte des Flash Films setzen. 
    scaleMC._width = Stage.width; 
    //die Breite des MovieClip = die Breite der Bühne. 
    scaleMC._height = Stage.height; 
    //die Höhe des MovieClip = die Höhe der Bühne. 
    MC._x = Stage.width/2-280; 
    //den MovieClip der nicht skaliert werden soll, in die Mitte des Flash Films setzen. 
    MC._y = Stage.height/2-160; 
    //den MovieClip der nicht skaliert werden soll, in die Mitte des Flash Films setzen.
    
}; 
Stage.addListener(lstrn); 
//Listener der Bühne hinzufügen. 
lstrn.onResize() 
//sofort die Funktion aufrufen. 


Es gibt hier im ff ein schönes Tutorial wo das alles anschaulich beschrieben ist.

@hmpf:
bei Deinem script bekomme ich Fehler: kann die funktion Event nicht laden. Was fehlt mir da?

schönen morgentlichen Gruß
landa

[uncle.sam]

gibt es das tut auch in AS3?
edit: das interessante an diesem beispiel ist, das das HGvideo immer im seitenverhältniss bleibt, also nicht verzerrt wird, beim resize.

PHP-Code:

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

trace("Stage.stageWidth= "+stage.stageWidth);
trace("Stage.stageHeight= "+stage.stageHeight);

stage.addEventListener(Event.RESIZE, resizeListener);

function resizeListener(e:Event):void 
{
    hgBild.width = stage.stageWidth;
    hgBild.height = stage.stageHeight;
    hgBild.x = stage.stageWidth/2;
    hgBild.y = stage.stageHeight/2;
}

//positionierung am anfang 
hgBild.width = stage.stageWidth;
hgBild.height = stage.stageHeight;
hgBild.x = stage.stageWidth/2;
hgBild.y = stage.stageHeight/2; 


habe hier das ganze mal mit einem bild in AS3, nur das bild wird beim resize verzerrt. gibt dafür eine lösung?

[landa]

Zitat von uncle.sam

das interessante an diesem beispiel ist, das das HGvideo immer im seitenverhältniss bleibt, also nicht verzerrt wird, beim resize.

Das stimmt natürlich, das tut es bei meiner Anwendung nicht (in meinem Fall auch kein Problem)
Interessanter Einwand! ... gute Frage ;-)

gruß
landa

[hmpf]

Zitat von landa

@hmpf:
bei Deinem script bekomme ich Fehler: kann die funktion Event nicht laden. Was fehlt mir da?

import flash.events.Event;
    import flash.events.EventDispatcher; 

Zitat von uncle.sam

Wie wird eigentlich nur das video iim hintergrund skaliert? der content bleibt immer in der gleichen grösse.
Ich weiss ja mit allowscale und noscale, aber bezieht sich das nicht immer auf den ganzen film?

Ja, würde ich aber niemals so machen, weil das ziemlich unkontrolliert und amateurhaft ist.
Ich habe mir ein Fullscreen Package für Videos und Bilder geschrieben, ich poste einfach mal die Funktion, die den Inhalt auf Fullscreen skaliert (wird mit stage Event.RESIZE aufgerufen):

var view : DisplayObject; // das Video/Bild
var alignX : String; // X Ausrichtung: "left", "right", default ist mittig
var alignY : String; // Y Ausrichtung: "top", "bottom", default ist mittig
var distort : Boolean = false // beim Skalieren verzerren oder nicht
 
 
        public function scaleView (event:Event):void{
            
            if(distort){
                view.width = stage.stageWidth;
                view.height = stage.stageHeight;
            }
            else{ 
// unter Beachtung des Seitenverhältnisses wird auf die maximale Größe skaliert
// dabei ist entweder die Höhe ODER die Breite genau passend
                var v1 : Number = view.width/view.height;
                var v2 : Number = stage.stageWidth/stage.stageHeight;
                if(v1 > v2){
                    view.height = stage.stageHeight;
                    view.scaleX = view.scaleY;
                }
                else{
                    view.width = stage.stageWidth;
                    view.scaleY = view.scaleX;
                }
            }
            
            switch(alignX) {
                case "right" :
                    view.x = (stage.stageWidth - view.width);
                    break;          
                case "left" :
                    view.x = 0;
                    break;
                default :
                    view.x = (stage.stageWidth - view.width) / 2;
            }
            switch(alignY) {
                case "top":
                    view.y = 0; 
                    break;
                case "bottom" :
                    view.y = (stage.stageHeight - view.height); 
                    break;
                default :
                    view.y = (stage.stageHeight - view.height) / 2; 
            }
        } 

Edit: wenn das Seitenverhältnis des Bildes/Videos genau dem Seitenverhältnis der Bühne entspricht, ist natürlich Breite UND Höhe genau passend. Aber das ist ja eher unwahrscheinlich...

[uncle.sam]

phantastisch. an diese relationsskalierung habe ich auch schon gedacht, aber hmpf hat das wundervoll aufgelöst.
vielen dank!

[uncle.sam]

um auf die Rasterung zurückzukommen: die in diesem Bespiel besteht aus weissen Punkten falls es noch niemanden aufgefallen sein sollte.