resize handler mit zoom kombinieren

[darkside303]

ich bin gerade dabei eine website zu erstellen in der ein browser-füllendes bild im hintergrund liegt.
das funktioniert mit dem resize handler soweit bestens.
jetzt soll das bild zoomen wie bei Travel:Japan A Photo Journal
dazu dachte ich baue ich einen timer ein der zoom und resize abfängt.
erstes problem: error meldung: class must not be nested
also habe ich die classe in ein .as sheet gepackt und importiert ...
es funktioniert aber immer noch nicht. hat jemand einen ansatz?

(ich weiß, es fliegen einige "import leichen" rum ...)

PHP-Code:

import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.display.Sprite;
import flash.events.TimerEvent;
import flash.utils.Timer;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, resizeHandler);



import ShortTimer;

var time:ShortTimer = new ShortTimer;


/* class ShortTimer
{
var zoom;
public function ShortTimer()
{
// creates a new five-second Timer
var minuteTimer:Timer = new Timer(1000, 5);

// designates listeners for the interval and completion events
minuteTimer.addEventListener(TimerEvent.TIMER, onTick);
minuteTimer.addEventListener(TimerEvent.TIMER_COMP LETE, onTimerComplete);

// starts the timer ticking
minuteTimer.start();
zoom = 1;
}
*/
function onTick(event:TimerEvent):void
{
// displays the tick count so far
// The target of this event is the Timer instance itself.
zoom = zoom+1;

trace("tick " + event.target.currentCount);
}

function onTimerComplete(event:TimerEvent):void
{
trace("Time's Up!");
}

//function to handle background image resize.
function setBackground() {
var reg2 = stage.stageWidth / 2;
var reg1 = stage.stageHeight / 2;
bg_mc.x = reg2;
bg_mc.y = reg1;
bg_mc.width = stage.stageWidth*zoom;
bg_mc.height = stage.stageHeight*zoom;
bg_mc.scaleX <= bg_mc.scaleY ? (bg_mc.scaleX = bg_mc.scaleY) : (bg_mc.scaleY = bg_mc.scaleX);
}


//set position when stage resizes
function resizeHandler(event:Event):void {
setBackground();

}

[aceMa]

hallo darkside303,

vielleicht habe ich Dein Problem noch nicht ganz verstanden

ich bin gerade dabei eine website zu erstellen in der ein browser-füllendes bild im hintergrund liegt.
das funktioniert mit dem resize handler soweit bestens.
jetzt soll das bild zoomen wie bei Travel:Japan A Photo Journal
dazu dachte ich baue ich einen timer ein der zoom und resize abfängt.

Vielleicht gehst Du ja so vor:
1. Du erzeugst eine Klasse, die Dein Hintergrundbild abruft, darstellt und ggf. maskiert. und fügst ein entsprechendes DisplayObject der DisplayList hinzu.
2. in dieser Klasse wird dafür gesorgt, dass Dein Bild (mittels Timer) entsprechend Animiert wird. Hier auch tauschen des Bildes etc.
3. in deiner Dokumentenklasse wird durch einen EventHandler die Größe des Hintergrundbildes z.B. mittels scaleX u. scaleY angepasst.

habe ich das so richtig verstanden?

Grüße Holger

[darkside303]

hallo holger,
hab 2 tage flachgelegen und bin jetzt wieder am start ...
ja das hast du in jedem punkt richtig verstanden.

ich weiß jetzt nicht genau wo ich mit "aufräumen" des sripts anfangen soll ...

grüße, alex

[aceMa]

Hi,
zunächst funktioniert wahrscheinlich Dein Import nicht (Fehlermeldung?)
Stattdessen reicht es die Klasse in Deinem Klassenpfad zu platzieren und ein Objekt zu erzeugen.

PHP-Code:

var time:ShortTimer = new ShortTimer(); 


Ich würde Dir aber vorschlagen, das Ganze etwas anders aufzubauen:

Erstmal ganz einfach und auf die Schnelle. Du wirst darauf aufbauen.
Die Dokumentenklasse:

PHP-Code:

/**
* @author   de.frankly.hm <mailTo: h.manthey(at)alice-dsl.net>
* @version 001
* @copyright 
* @see
* @todo
*/
package yourPathToClasses.hm{
    import flash.display.*;
    import flash.events.*;
    import flash.net.*;
    import flash.text.*;
    //import fl.events.*;
    
    
    /**
    * Die Dokumentenklasse unseres Projekts, sie ist mit dem *.fla verknüpft.
    * @param
    * @return
    * @see
    * @todo 
    */
    public class MovingBackgroundDocumentClass extends MovieClip{
        var HG:MovingBackgroundSprite;
        
        /**
        * der Konstruktor der Klasse
        * @param
        * @return
        * @see
        * @todo 
        */
        public function MovingBackgroundDocumentClass():void{
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
            stage.addEventListener(Event.RESIZE, resizeHandler);
            //neuen Background erstellen
            
            
            HG = new MovingBackgroundSprite("yourBGimg.jpg", stage.stageWidth, stage.stageHeight, 100);
            addChild(HG);
        }
        
        /**
        * der EventHandler, der das Anpassen an die neue Bühnengröße erwirkt
        * @param e:Event
        * @return
        * @see
        * @todo 
        */
        private function resizeHandler(e:Event){
            //von hier aus alle DisplayObjekte zum anpassen bewegen
            HG.updateFit(stage.stageWidth, stage.stageHeight);
            
            
        }
        
    }//ende Klasse
}//ende Package 


und das Hintergrundobjekt:

PHP-Code:

/**
* @author   de.frankly.hm <mailTo: h.manthey(at)alice-dsl.net>
* @version 
* @copyright 
* @see
* @todo
*/
package yourPathToClasses.hm{
    import flash.display.*;
    import flash.events.*;
    import flash.net.*;
    import flash.utils.Timer;
    
    /**
    * Die Dokumentenklasse unseres Projekts, sie ist mit dem *.fla verknüpft.
    * @param
    * @return
    * @see
    * @todo 
    */
    public class MovingBackgroundSprite extends Sprite{
        var imgLoader:Loader = new Loader();  //LoaderObjekt zum Laden des Bildes
        var myMask:Shape = new Shape(); //Shape-Objekt, das als Maske dienen soll
        var myCont:Sprite = new Sprite(); //Sprite, der das Bild aufnimmt
        var w:uint;
        var h:uint;
        var delay:int;
        var moveTimer:Timer;
        //var deltaX:Number=1; //ein Anfangswert für die Bewegung
        //var deltaY:Number=-0.5;

        /**
        * der Konstruktor der Klasse
        * @param IMG:String -> URL des zu ladenden Bildes, W:uint -> Anfangsbreite, H:uint -> Anfangshöhe
        * @return
        * @see
        * @todo 
        */
        public function MovingBackgroundSprite(IMG:String,W:uint,H:uint, TimerDelay:int):void{
            trace(IMG,W,H);
            w=W;
            h=H;
            delay=TimerDelay;
            //Bild Laden
            imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaderCompleteListener);
            imgLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, imLoaderIOErrorListener);
            //imgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imgLoaderProgressListener);
            try{
                imgLoader.load(new URLRequest(IMG))
            } catch(e:ErrorEvent){
                trace("Fehler");
            }//
            //Maske erstellen
            /*myMask.graphics.beginFill(0x000000);
            myMask.graphics.drawRect(0,0,w,h);
            myMask.graphics.endFill();
            this.addChild(myMask);
            this.mask = myMask;*/
            
            moveTimer = new Timer(delay, 0);
            moveTimer.addEventListener(TimerEvent.TIMER, newPosOfImgListener);
            
            this.addEventListener(Event.REMOVED, removedEventListener);
            this.addEventListener(Event.ADDED_TO_STAGE, added_to_stageEventListener);
        }
        
        private function imgLoaderCompleteListener(e:Event){
            trace("complete");
            e.target.content.smoothing = true;
            addChild(imgLoader);
            imgLoader.x = (w-imgLoader.width)/2;
            imgLoader.y = (h-imgLoader.height)/2;
        }
            
        private function imLoaderIOErrorListener(e:IOErrorEvent){
            //Etwas sinnvolles mit einem IOError anfangen
            trace(e);
        }
        
        private function imgLoaderProgressListener(e:Event){
            //Etwas mit dem Ladefortschritt anfangen
        }
        
        private function removedEventListener(e:Event){
            //stopAnimation
            this.removeEventListener(Event.ENTER_FRAME, newPosOfImgListener)
        }
        
        private function added_to_stageEventListener(e:Event){
            //startAnimation
            moveTimer.start();
        }
        
        private function newPosOfImgListener(e:Event){
            //hier etwas elegantes mit dem Bild anstellen
            
        }
        
        /**
        * der EventHandler, der das Anpassen an die neue Bühnengröße erwirkt
        * @param e:Event
        * @return
        * @see
        * @todo 
        */
        public function updateFit(W:uint,H:uint){
            //hier neue Position und Größe für HG ;
            
        }
        
    }//ende Klasse
}//ende Package 


[darkside303]

hi,
2 kleine fragen (bin recht neu in oop)

1. brauche ich eine MovingBackgroundDocumentClass.as datei, oder wird die im script komplett ausgeführt?

2. package yourPathToClasses.hm{
verstehe ich nicht ganz, in der doku sind die meisten beispiele ohne pfad ...

tausend dank und grüße,
alex