Sitecheck : www.zill-music.de
| 07.06.2009, 11:54 | Re16 | Beiträge: 18
Wohnort: Baden-Baden
Registriert: Mar 2009
Themenautor/in
| ah cool. ey, das rockt ja mal. der perfomancegewinn ist echt krass :) vielen dank für den super tipp :) | |
| 07.06.2009, 14:19 | Re17 | Beiträge: 154
Registriert: Jun 2005
| gerne ;)
schau mal da verwende ich die selbe technik: ambi light läuft auf meinem Rechner auf 120 fps,
die langsamen Rechner sollten immer noch 60fps erreichen.
Grüße | |
| | | nicht sichtbar bei eingeloggten Mitgliedern |
|
| 07.06.2009, 14:49 | Re18 | Beiträge: 18
Wohnort: Baden-Baden
Registriert: Mar 2009
Themenautor/in
| coole sache, läuft bei mir auch mit 118 - 121 / 120..... da geht noch was :D | |
| 07.06.2009, 16:04 | Re19 | Beiträge: 18
Wohnort: Baden-Baden
Registriert: Mar 2009
Themenautor/in
| sodala, ich hab jetzt noch die galerie hinzugefügt, und bis auf den mp3 player alles debuggt. wenn jemand da nochmal final drüber schauen könnte, wäre das nett :)
vielen dank. | |
| 07.06.2009, 17:16 | Re20 | Beiträge: 4906
Wohnort: zuhaus
Registriert: Apr 2004
| hi,
beim ersten click auf den volumeslider hatte ich folgenden fehler...
PHP:1
2
3
4
5
6
7
8
9
|
<?
TypeError: Error #1009: Der Zugriff auf eine Eigenschaft oder eine Methode eines null-Objektverweises ist nicht möglich.
at playerClass/setVolume()
at playerClass/startVolume()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at volumeBar/adjustVolume()
?>
|
ansonsten ist mir jetzt nichts mehr aufgefallen....lieber chips essen und danach voller zweifel sein, als voller zweifel chips essen... | |
| | | nicht sichtbar bei eingeloggten Mitgliedern | 
|
| 07.06.2009, 18:26 | Re21 | Beiträge: 154
Registriert: Jun 2005
| Hi,
da kann man noch ein paar dinge verbessern,
-buttonmode auf allen links
-scroller auch mit mouseWheel ( für mac brauchst du ne js lösung google nach "as3 MacMouseWheel")
-richtick schick wär deeplinking ( SWFAddress )
-mehr übergangseffeckte bei den hauptkategorien ( den content einmal flippen oder so wie beim übergang zur gallery )
-gallery bilder nur bei mouseDown drehen ( find ich persöhnlich besser weil man so die bilder besser anklicken kann)
-bg wird nicht mehr vom kompletten disp. beeinflusst... vll kann man den effeckt auch noch etwas vestärken? Poste doch mal den Code wenn du da nicht weiter kommst.
Fehler sind bei mir keine, aber die fps sind noch zu niedrig.
Was läuft denn alles in einem onEnterFrame oder Intervall? Vll kannst du gerade dort noch was optimieren ( deactiviere vll mal einigis um zu sehen wo genau der performance fresser ist. Ich schalte dazu immer die FPS auf max 120 so kannst du viel genauer sehen was wieviel fps frisst). Hast du den disp fx im enterFrame oder Intervall?
Design,
-Zuviele verschiedene Typo größen
-Kein Raster angelegt siehe Anhang, mit Grid sieht es einfach aufgeräumter aus( gutes tut dazu: http://www.smashingmagazine.com/2008/03/26/grid-based-design-six-creative-column-techniques/ und http://www.markboulton.co.uk/articles/detail/five_simple_steps_to_designing_grid_systems/ )
Grüße
Angehängte Dateien:
| |
| 07.06.2009, 19:31 | Re22 | Beiträge: 18
Wohnort: Baden-Baden
Registriert: Mar 2009
Themenautor/in
| @springer: vielen dank. das werde ich gleich mal überprüfen, dass hängt mit dem ladezustand zusammen.
@marianG: "gallery bilder nur bei mouseDown drehen", das ist eine sehr gute Idee. Die anderen Punkte werde ich dezent unter den Tisch fallen lasse, weil das Budget so niedrig ist, dass ich mich der Seite eher als ein Referenzprojekt angenähert habe.
"buttonmode auf allen links" - liegt drauf, keinen plan warum das nicht fusioniert. debugge ich aber auch nicht mehr.
"scroller auch mit mouseWheel" - muss ich mal guggen, das müsste drin sein.
"richtick schick wär deeplinking" - der kriegt parallel noch ein blog von mir, da kann er wichtige sachen posten.
"mehr übergangseffeckte bei den hauptkategorien" - hatte ich geplant, aber ich denke nach dem fünften mal gehts dir auf den kecks.
"bg wird nicht mehr vom kompletten disp. beeinflusst..." was meinst du mit der wird nicht mehr komplett beeinflusst?
das mit den fps ist so ne sache, ich rutsche nie unter 20 mit meinem rechner hier. auf dem netbook meiner freundin läuft sie mit ca 8-13 fps.
Daher Frage an alle: was habt ihr für eine Monitorauflösung?
code für die displacementmap sieht so aus:
ActionScript:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166 | package de.kai_reinhardt
{
import away3d.animators.SkinAnimation;
import flash.events.Event;
import de.kaireinhardt.BackgroundBitmapData;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.filters.DisplacementMapFilter;
import flash.geom.Point;
import flash.utils.Timer;
import gs.TweenMax;
import gs.easing.Back;
import gs.easing.Sine;
import net.hires.debug.Stats;
/**
* LEERRAUM IMAGINATIONEN
* www.leerraum-imaginationen.de
* Dipl.-Des. (UAS) Kai Reinhardt
*
*/
public class BackgroundAnimation extends Sprite
{
private var _backgroundImage : BackgroundBitmapData;
private var _displacementMap : BGDisplacementMap;
private var _bmpContainer : Sprite;
private var _displacementMapData : BitmapData;
private var _displacementMapFilter : DisplacementMapFilter;
private var _bitmap :Bitmap;
private var _centerPoint : Point;
private var _backgroundProportions : Number;
private var _averageFPS : Number;
private var _fpsCheckCycles : int;
private var _stopBackgroundAnimation : Boolean = false;
private var _fpsWatcher : Stats;
private var _timestampD : Date;
private var _timestamp : int;
private var _keepFPS : uint;
private var _displacementMapBitmap : Bitmap;
public function BackgroundAnimation()
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(ev:Event = null):void {
removeEventListener(Event.ADDED_TO_STAGE, init);
_bmpContainer = new Sprite();
_fpsWatcher = new Stats();
_averageFPS = 60;
_timestampD = new Date();
_timestamp = _timestampD.time;
_displacementMapBitmap = new Bitmap();
_bmpContainer.mouseEnabled = false;
_displacementMap = new BGDisplacementMap();
var getScreenProportions : Number = stage.stageWidth / stage.stageHeight;
_displacementMapData = new BitmapData((stage.stageWidth/3)*2, Math.round((stage.stageHeight*getScreenProportions/3)*2), true, 0xFFFFFFFF);
_displacementMapData.draw(_displacementMap);
_backgroundImage = new BackgroundBitmapData((stage.stageWidth/3)*2,Math.round(stage.stageHeight*getScreenProportions/3)*2);
_bitmap = new Bitmap(_backgroundImage, 'auto', true);
var point : Point = new Point(0,0);
_displacementMapFilter = new DisplacementMapFilter(_displacementMapData,point,1,1,0,0,"clamp",0,0);
_bmpContainer.addChild(_bitmap);
_bmpContainer.filters = [_displacementMapFilter];
_centerPoint = new Point (stage.stageWidth >> 1, stage.stageHeight >> 1);
alignObjects();
addToStage();
animateMe("up");
TweenMax.to(this, 7, { onComplete:
function ():void { animateMe("up"); } } );
stage.addEventListener(Event.RESIZE, onResizeStage);
}
private function animateMe(dir:String):void
{
if (_stopBackgroundAnimation == false) {
TweenMax.to(_displacementMapFilter, 6, { scaleY:dir == "up"?27:0, ease:Sine.easeInOut, onComplete:animateMe, onCompleteParams:[dir == "up"?"down":"up"], onUpdate:function():void { _bmpContainer.filters = [_displacementMapFilter] } } );
}else if(dir =="down"){
TweenMax.to(_displacementMapFilter, 6, { scaleY:dir == "up"?27:0, ease:Sine.easeInOut, onComplete:killDisplacementMap, onUpdate:function():void { _bmpContainer.filters = [_displacementMapFilter] } } );
}
}
private function killDisplacementMap () :void
{
_bmpContainer.filters = [];
}
private function alignObjects () :void {
if(stage.stageWidth >= stage.stageHeight){
_backgroundProportions = _bmpContainer.width / _bmpContainer.height;
_bmpContainer.width = stage.stageWidth;
_bmpContainer.height = Math.round(_bmpContainer.width / _backgroundProportions);
} else {
_backgroundProportions = _bmpContainer.width / _bmpContainer.height;
_bmpContainer.height = stage.stageHeight;
_bmpContainer.width = Math.round(_bmpContainer.height * _backgroundProportions);
}
}
private function addToStage():void
{
_bmpContainer.alpha = 0;
addChild(_bmpContainer);
addChild(_fpsWatcher);
TweenMax.to(_bmpContainer, 0.5, { alpha:1 } );
onResizeStage();
}
private function onResizeStage(ev:Event = null):void {
_centerPoint = new Point (stage.stageWidth >> 1, stage.stageHeight >> 1);
if (Math.round(stage.stageWidth / _backgroundProportions) >= stage.stageHeight) {
_bmpContainer.width = stage.stageWidth;
_bmpContainer.height = Math.round(_bmpContainer.width / _backgroundProportions);
} else {
_bmpContainer.height = stage.stageHeight;
_bmpContainer.width = Math.round(_bmpContainer.height * _backgroundProportions);
}
}
}
}
|
| |
| 08.06.2009, 21:48 | Re23 | Beiträge: 154
Registriert: Jun 2005
| Hi,
sorry hab dein leckeres Bild kopiert ^^.
Vll ist meine Lösung schneller? Sonst hast du ja eigentlich nichts rechenintensieves oder?
Meine vorgehensweise bringt bei mir 120 / 120 fps >>> http://cortexdesign.de/experiment/zill/ obwohl ich keine skallierung oder sonstige tricks anwende.
Ich hab mir beim painten von der Displacementmap keine mühe gegeben, dass überlasse ich dir ;)
Du kannst aber gut erkennen wie man die Richtung der Transformation durch verschiedene Farben beeinflussen kann.
Viel spaß beim Muskel studieren - nur schade dass es kein weiblicher Körper ist ^^
Source ( lads schnell runter, brauch den platz )
PS: wenn du mehr speed haben willst, dann kannst du einen Ausschnitt ( bis zur transformationsgrenze ) von dem Körper nehmen und unter den Effeckt legst du das komplette Bild.
Mit matrix.translate kommst du an einen beliebigen Auschnitte von einem Bitmapdata ran! | Geändert von marianG am 08.06.09 um 21:49 Uhr
| |
|
| 08.06.2009, 22:08 | Re24 | Beiträge: 154
Registriert: Jun 2005
| der Source noch, damit alle was davon haben ;)
Main
ActionScript:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 | package{
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.events.Event;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import cortex.fx.dispMove.DispMove;
import cortex.components.Stats;
import gs.TweenMax;
public class TestDisp extends Sprite
{
public function TestDisp()
{
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
var bgFX:Bitmap = DispMove.add(new BG(),new Disp())
// 0x808080 wird nicht vom disp beeinflusst! grün und rot wirken endgegengesetzt.
addChild(bgFX );
bgFX.width = stage.stageWidth
bgFX.height = stage.stageHeight
addChild( new Stats())
DispMove.value = -11;
TweenMax.to(DispMove,2,{value:11,yoyo:true})
stage.addEventListener(Event.RESIZE,
function():void{
//TweenMax.to(DispMove,2,{value:11,yoyo:true})// value der stageHeight anpassen!
bgFX.width = stage.stageWidth;
bgFX.height = stage.stageHeight;
});
}
}
}
|
Und hier der eigentlich Script
ActionScript:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95 | package cortex.fx.dispMove {
/*
copyright: 2009 M.Gieseler
email: office@cortexdesign.de
blog: core.cortexdesign.de
lizens: macht doch eh jeder was er will
*/
import flash.display.DisplayObject;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.filters.DisplacementMapFilter;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.utils.setInterval;
import flash.utils.clearInterval;
public class DispMove {
public static var timer:int;
public static var output:Bitmap
public static var dispBMD:BitmapData;
public static var filter:DisplacementMapFilter;
public function DispMove(){}
public static function add(
source:DisplayObject, // beliebiges DisplayObject
displacement:DisplayObject, // displacement
tx:int = 0,ty:int = 0, // Matrix.scale ( verschiebt das bitmapData vom displacement!)
updateTime:int = 100
):Bitmap // return BMP
{
output = new Bitmap(new BitmapData(source.width,source.height))
output.bitmapData.draw(source)
dispBMD = new BitmapData(source.width,source.height,true,0x000000);
var matrix:Matrix = displacement.transform.matrix;
matrix.tx = tx
matrix.ty = ty
dispBMD.draw(displacement,matrix);
filter = new DisplacementMapFilter(dispBMD,null,1,1,0,0,"clamp",0,0);
startRendering(updateTime);
return output;
}
public static function clear( ):void
{
stopRendering();
output.bitmapData.dispose();
dispBMD.dispose();
dispBMD = null; output = null;
}
public static function startRendering(updateTime:int = 100):void
{
timer = setInterval(render, updateTime);
}
public static function stopRendering():void
{
clearInterval(timer);
}
public static function render(event:*=null):void
{
output.filters = [ filter ];
}
public static function get value():Number
{
return filter.scaleY
}
public static function set value(value:Number):void
{
filter.scaleY = value
}
}
}
|
Also nochmal zum speed Optimieren, die Displacementmap braucht am Rand den Farbwert 0x808080 damit diese stelle nicht beeinflusst wird.
-In Photoshop misst du die Breite und Höhe bis zum vollen Farbwert 0x808080
-In Flash erzeugst du ein BitmapData mit der Abmessung
-falls sich das Displacment nicht auf x=0 und y=0 befindet, erzeugst du eine neue Matrix() matrix.translate(x,y)
-neues Bitmap für das displacement erzeugen und bm.draw( new BG(), matrix)
-Bitmap gegebenenfalls mit x und y neu positionieren
-und das neue Bitmap auf den Hintergrund adden
-bei resize muss dann nur noch der Hintergrund skalliert werden
Grüße | |
| 08.06.2009, 22:14 | Re25 | Beiträge: 154
Registriert: Jun 2005
| @echo,
die values abhängig vom beat transformieren ^^ | |
| 08.06.2009, 22:27 | Re26 | Beiträge: 18
Wohnort: Baden-Baden
Registriert: Mar 2009
Themenautor/in
| ok, ich habs grade runtergeladen, habs kurz angeschaut, funktioniert, bin baff. ich kanns aber erst morgen richtig auffassen, wochenende durchgearbeitet, heute schon wieder 12 stunden... bin grade groggi. | |
| 09.06.2009, 16:13 | Re27 | Beiträge: 18
Wohnort: Baden-Baden
Registriert: Mar 2009
Themenautor/in
| ich habs! 1 1/2 stunden rumprobieren, bis ich gecheckt hab, dass der timer tatsächlich den perfomance gewinn bringt. das ist echt nützlich! vielen dank an dich! | |
| 09.06.2009, 16:22 | Re28 | Beiträge: 154
Registriert: Jun 2005
| Für einen dankbaren Forumuser gerne ;)
Denk aber daran, du kannst noch viel mehr speed rausholen da das bitmapData so immer auf die Ursprungsgröße vom BG berechnet wird. Das würde ich dringend optimieren! | |
| 09.06.2009, 16:27 | Re29 | Beiträge: 18
Wohnort: Baden-Baden
Registriert: Mar 2009
Themenautor/in
| hm... naja, auf meiner kiste läuft die seite jetzt mit 61 fps.... ich habs grade auf nem 800Mhz PC getestet, geht auch noch :)
ich denk das reicht mit der optimierung. ich werd heute abend noch das netbook meiner freundin bemühen, und dann is aber feierabend mit der seite. | |
| | Themen Ähnliche Beiträge zum Thema | 04.04.2011 - Caine123 10.06.2010 - RnBesk 23.09.2010 - Flux0 18.11.2010 - SaintGeorge |
|
Flashhilfe.de Flash Platform Tipps & Tutorials Flash Platform Andere Programmiersprachen Jobangebote Diskussionen
 Flashhilfe News 
Regeln & Bedingungen
|
