Zurück   Flashforum > Flash > ActionScript > ActionScript 1
dynamic interface! dynamic interface!
Registrieren Hilfe Alle Foren als gelesen markieren

Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 05-04-2004, 13:54   #1 (permalink)
squirlish
 
Benutzerbild von ChriZi
 
Registriert seit: Mar 2004
Ort: CH
Beiträge: 492
dynamic interface!
also ich hab mal so ein interactives interface gemacht (aus einem buch gelernt, und dann noch selber einen schatten dazu gebastelt)

als erstes hab ich eine funktion gemacht, die kästchen in der gewünschten grösse malt
hier der code:
ActionScript:
  1. function makeBox(x, y, w, h) {
  2.     var box = createEmptyMovieClip("box"+boxcount, boxCount++);
  3.     box._x = x
  4.     box._y = y
  5.     box.beginFill(0xffffff);
  6.     box.lineStyle(0, 0x000000);
  7.     box.lineTo(w, 0);
  8.     box.lineStyle(0, 0x000000);
  9.     box.lineTo(w, h);
  10.     box.lineTo(0, h);
  11.     box.endFill();
  12.     //ab hier kommt der schatten
  13.     box.lineStyle();
  14.     colors = [ 0x000000, 0x000000 ];
  15.     alphas = [ 60, 0 ];
  16.     ratios = [ 0, 0xFF];
  17.     matrix = {matrixType:"box", x:w, y:0, w:5, h:0, r:(0/180)*Math.PI};
  18.     box.beginGradientFill( "linear", colors, alphas, ratios, matrix);
  19.     box.moveto(w, 7);
  20.     box.lineto(w, h);
  21.     box.lineto(w+10,h);
  22.     box.lineto(w+10, 7);
  23.     box.lineto(w, 7);
  24.     box.endFill();
  25.     matrix = {matrixType:"box", x:0, y:h, w:5, h:5, r:(90/180)*Math.PI};
  26.     box.beginGradientFill( "linear", colors, alphas, ratios, matrix);
  27.     box.moveto(w, h);
  28.     box.lineto(w, h+10);
  29.     box.lineto(7,h+10);
  30.     box.lineto(7, h);
  31.     box.lineto(w, h);
  32.     box.endFill();
  33.     matrix = {matrixType:"box", x:w-6, y:h-6, w:11, h:11, r:(0/180)*Math.PI};
  34.     box.beginGradientFill( "radial", colors, alphas, ratios, matrix);
  35.     box.moveTo(w, h)
  36.     box.lineTo(w, h+7)
  37.     box.lineTo(w+7, h+7)
  38.     box.lineTo(w+7, h)
  39.     box.endFill();
  40.     matrix = {matrixType:"box", x:w-6, y:2, w:11, h:11, r:(0/180)*Math.PI};
  41.     box.beginGradientFill( "radial", colors, alphas, ratios, matrix);
  42.     box.moveTo(w, 0);
  43.     box.lineTo(w, 7);
  44.     box.lineTo(w+10, 7);
  45.     box.lineTo(w+10, 0);
  46.     box.endFill();
  47.     matrix = {matrixType:"box", x:1.1, y:h-6, w:11, h:11, r:(0/180)*Math.PI};
  48.     box.beginGradientFill( "radial", colors, alphas, ratios, matrix);
  49.     box.moveTo(0, h)
  50.     box.lineTo(7, h)
  51.     box.lineTo(7, h+10)
  52.     box.lineTo(0, h+10)
  53.     box.lineTo(0, h)
  54.     box.endFill
  55.     return box;
  56. }
wie ihr sehen könnt ist da noch so ein gradientFill drinn, das wäre der schatten!

wenn ich jetzt so ein kästchen mache:

box1_mc = makeBox(20, 20, 100, 100);

dann sieht das schon toll aus, nur wär das dann alles!

jetzt das eigentliche problem!

wenn ich box1_mc skallieren will, dann verzerrt es mir logischerweise den schatten!

kann mir jemand irgendwie sagen wie ich diesen schatten immer auf dem laufenden halten kann? also dass der sich laufend anpasst!

also ich denke es ist klar was gemeint ist ;)
kästchen grösser werden, schatten gleich bleiben!

und wenn ich das ganze anders machen soll, dann bitte sagen... und erklären ;)

danke für die hilfe!
Geändert von ChriZi (05-04-2004 um 18:00 Uhr)
ChriZi ist offline   Mit Zitat antworten
Alt 05-04-2004, 18:01   #2 (permalink)
squirlish
 
Benutzerbild von ChriZi
 
Registriert seit: Mar 2004
Ort: CH
Beiträge: 492
hei leute!

ich brauch hilfe


wenn ihr ne andere idee habt sowas zu machen meldet euch bitte!

danke nochmals!
ChriZi ist offline   Mit Zitat antworten
Alt 06-04-2004, 21:29   #3 (permalink)
Flashaholic
 
Benutzerbild von atothek
 
Registriert seit: Feb 2003
Ort: Berlin
Beiträge: 1.459
ich hab ne einfache lösung fürs problem
zeichne alles neu anstatt zu skalieren
ActionScript:
  1. this.makeShadow = function(pClip, pDepth, x, y, w, h) {
  2.     //ab hier kommt der schatten
  3.     pClip.shadowClip.removeMovieClip();
  4.     pClip.createEmptyMovieClip("shadowClip", pDepth);
  5.     var box = pClip.shadowClip;
  6.     //
  7.     box.lineStyle();
  8.     colors = [0x000000, 0x000000];
  9.     alphas = [60, 0];
  10.     ratios = [0, 0xFF];
  11.     matrix = {matrixType:"box", x:w, y:0, w:5, h:0, r: 0};
  12.     box.beginGradientFill("linear", colors, alphas, ratios, matrix);
  13.     box.moveto(w, 7);
  14.     box.lineTo(w, h);
  15.     box.lineTo(w+10, h);
  16.     box.lineTo(w+10, 7);
  17.     box.lineTo(w, 7);
  18.     box.endFill();
  19.     matrix = {matrixType:"box", x:0, y:h, w:5, h:5, r: (90/180)*Math.PI};
  20.     box.beginGradientFill("linear", colors, alphas, ratios, matrix);
  21.     box.moveTo(w, h);
  22.     box.lineTo(w, h+10);
  23.     box.lineTo(7, h+10);
  24.     box.lineTo(7, h);
  25.     box.lineTo(w, h);
  26.     box.endFill();
  27.     matrix = {matrixType:"box", x:w-6, y:h-6, w:11, h:11, r: 0};
  28.     box.beginGradientFill("radial", colors, alphas, ratios, matrix);
  29.     box.moveTo(w, h);
  30.     box.lineTo(w, h+7);
  31.     box.lineTo(w+7, h+7);
  32.     box.lineTo(w+7, h);
  33.     box.endFill();
  34.     matrix = {matrixType:"box", x:w-6, y:2, w:11, h:11, r: 0};
  35.     box.beginGradientFill("radial", colors, alphas, ratios, matrix);
  36.     box.moveTo(w, 0);
  37.     box.lineTo(w, 7);
  38.     box.lineTo(w+10, 7);
  39.     box.lineTo(w+10, 0);
  40.     box.endFill();
  41.     matrix = {matrixType:"box", x:1.1, y:h-6, w:11, h:11, r: 0};
  42.     box.beginGradientFill("radial", colors, alphas, ratios, matrix);
  43.     box.moveTo(0, h);
  44.     box.lineTo(7, h);
  45.     box.lineTo(7, h+10);
  46.     box.lineTo(0, h+10);
  47.     box.lineTo(0, h);
  48.     box.endFill;
  49. };
  50. this.makeRectangle = function(pClip, pDepth, x, y, w, h) {
  51.     //
  52.     pClip.shapeClip.removeMovieClip();
  53.     pClip.createEmptyMovieClip("shapeClip", pDepth);
  54.     var box = pClip.shapeClip;
  55.     //
  56.     //box._x = x;
  57.     //box._y = y;
  58.     box.beginFill(0xffffff);
  59.     box.lineStyle(0, 0x000000);
  60.     box.lineTo(w, 0);
  61.     box.lineStyle(0, 0x000000);
  62.     box.lineTo(w, h);
  63.     box.lineTo(0, h);
  64.     box.endFill();
  65. };
  66. this.createEmptyMovieClip("cont", 1);
  67. this.makeRectangle(this.cont, 2, 20, 20, 100, 100);
  68. this.makeShadow(this.cont, 1, 20, 20, 100, 100);
  69. this.cont.onPress = function() {
  70.     //
  71.     this.startDrag();
  72.     this._parent.makeRectangle(this, 2, 20, 20, 200, 200);
  73.     this._parent.makeShadow(this, 1, 20, 20, 200, 200);
  74. };
  75. this.cont.onRelease = function() {
  76.     //
  77.     this.stopDrag();
  78.     this._parent.makeRectangle(this, 2, 20, 20, 100, 100);
  79.     this._parent.makeShadow(this, 1, 20, 20, 100, 100);
  80. };
so hast du die Möglichkeit nen schatten zu machen oder auch nicht das ganze kann noch um div parameter ausgebaut werden ich glaube so biste flexibler

noch was immer an groß und kleinscreibung denken Flash2004 ist da empfindlich! hatte das script erst nicht zum laufen bekommen wegen den klein geschriebenen lineTo und moveTo anweisungen.
__________________
TVNEXT Solutions
Geändert von atothek (06-04-2004 um 23:11 Uhr)
atothek ist offline   Mit Zitat antworten
Alt 08-04-2004, 11:59   #4 (permalink)
squirlish
 
Benutzerbild von ChriZi
 
Registriert seit: Mar 2004
Ort: CH
Beiträge: 492
das ganze ist echt super! danke für die antwort!

nur ... wenn ich das ganze jetzt irgendwie z.b. mit den easing equations von robert penner erweitern wollen würde, um das rectangle zu vergrössern (elastic) dann würde es den schatten wiederum aufblasen!

oder muss ich jetzt einfach den schatten immer wieder neu machen lassen?

wie würd das dann in etwa aussehen????

danke!
ChriZi ist offline   Mit Zitat antworten
Alt 08-04-2004, 20:53   #5 (permalink)
Flashaholic
 
Benutzerbild von atothek
 
Registriert seit: Feb 2003
Ort: Berlin
Beiträge: 1.459
Genau wenn du das ganze animierthaben willst mußte jedes frame alles neu zeichnen hier mal eine schnelle Modifikation des ganzen allerdings habe ich nicht die penner klassen integriert ist nur zum veranschaulichen wie das ganze aufgebaut sein muß, kann, sollte!?!

ActionScript:
  1. this.makeShadow = function(pClip, x, y, w, h) {
  2.     //
  3.     var box = pClip;
  4.     //
  5.     box.clear();
  6.     box.lineStyle();
  7.     var colors = [0x000000, 0x000000];
  8.     var alphas = [60, 0];
  9.     var ratios = [0, 0xFF];
  10.     var matrix = {matrixType:"box", x:w, y:0, w:5, h:0, r: 0};
  11.     box.beginGradientFill("linear", colors, alphas, ratios, matrix);
  12.     box.moveto(w, 7);
  13.     box.lineTo(w, h);
  14.     box.lineTo(w+10, h);
  15.     box.lineTo(w+10, 7);
  16.     box.lineTo(w, 7);
  17.     box.endFill();
  18.     matrix = {matrixType:"box", x:0, y:h, w:5, h:5, r: (90/180)*Math.PI};
  19.     box.beginGradientFill("linear", colors, alphas, ratios, matrix);
  20.     box.moveTo(w, h);
  21.     box.lineTo(w, h+10);
  22.     box.lineTo(7, h+10);
  23.     box.lineTo(7, h);
  24.     box.lineTo(w, h);
  25.     box.endFill();
  26.     matrix = {matrixType:"box", x:w-6, y:h-6, w:11, h:11, r:0};
  27.     box.beginGradientFill("radial", colors, alphas, ratios, matrix);
  28.     box.moveTo(w, h);
  29.     box.lineTo(w, h+7);
  30.     box.lineTo(w+7, h+7);
  31.     box.lineTo(w+7, h);
  32.     box.endFill();
  33.     matrix = {matrixType:"box", x:w-6, y:2, w:11, h:11, r:0};
  34.     box.beginGradientFill("radial", colors, alphas, ratios, matrix);
  35.     box.moveTo(w, 0);
  36.     box.lineTo(w, 7);
  37.     box.lineTo(w+10, 7);
  38.     box.lineTo(w+10, 0);
  39.     box.endFill();
  40.     matrix = {matrixType:"box", x:1.1, y:h-6, w:11, h:11, r:0};
  41.     box.beginGradientFill("radial", colors, alphas, ratios, matrix);
  42.     box.moveTo(0, h);
  43.     box.lineTo(7, h);
  44.     box.lineTo(7, h+10);
  45.     box.lineTo(0, h+10);
  46.     box.lineTo(0, h);
  47.     box.endFill;
  48. };
  49. this.makeRectangle = function(pClip, x, y, w, h) {
  50.     //
  51.     var box = pClip;
  52.     //
  53.     box.clear();
  54.     box.beginFill(0xffffff);
  55.     box.lineStyle(0, 0x000000);
  56.     box.lineTo(w, 0);
  57.     box.lineStyle(0, 0x000000);
  58.     box.lineTo(w, h);
  59.     box.lineTo(0, h);
  60.     box.endFill();
  61. };
  62. this.createEmptyMovieClip("cont", 1);
  63. this.cont.createEmptyMovieClip("shadowClip", 1);
  64. this.cont.createEmptyMovieClip("shapeClip", 2);
  65. //
  66. this.makeRectangle(this.cont.shapeClip, 20, 20, 100, 100);
  67. this.makeShadow(this.cont.shadowClip, 20, 20, 100, 100);
  68. //
  69. this.cont.onPress = function() {
  70.     //
  71.     this._parent.drawAnimated(this, 200, 200, "bigger");
  72.     this.startDrag();
  73. };
  74. this.cont.onRelease = function() {
  75.     //
  76.     this._parent.drawAnimated(this, 100, 100, "smaller");
  77.     this.stopDrag();
  78. };
  79. this.drawAnimated = function(pClip, pW, pH, pMode) {
  80.     //
  81.     pClip.w = pW;
  82.     pClip.h = pH;
  83.     pClip.tw = this._width;
  84.     pClip.th = this._height;
  85.     //
  86.     pClip.onEnterFrame = function() {
  87.         //
  88.         this.tw += (this.w-this.shapeClip._width)/5;
  89.         this.th += (this.h-this.shapeClip._width)/5;
  90.         //
  91.         if (pMode == "bigger") {
  92.             if (Math.round(this.tw)>=this.w && Math.round(this.th)>=this.h) {
  93.                 //
  94.                 this._parent.makeRectangle(this.shapeClip, this._x, this._y, this.w, this.h);
  95.                 this._parent.makeShadow(this.shadowClip, this._x, this._y, this.w, this.h);
  96.                 trace(this.shapeClip._width);
  97.                 delete this.onEnterFrame;
  98.             }
  99.         } else if (pMode == "smaller") {
  100.             if (Math.round(this.tw)<=this.w && Math.round(this.th)<=this.h) {
  101.                 //
  102.                 this._parent.makeRectangle(this.shapeClip, this._x, this._y, this.w, this.h);
  103.                 this._parent.makeShadow(this.shadowClip, this._x, this._y, this.w, this.h);
  104.                 trace(this.shapeClip._width);
  105.                 delete this.onEnterFrame;
  106.             }
  107.         }
  108.         this._parent.makeRectangle(this.shapeClip, this._x, this._y, this.tw, this.th);
  109.         this._parent.makeShadow(this.shadowClip, this._x, this._y, this.tw, this.th);
  110.     };
  111. };

see ya
__________________
TVNEXT Solutions
Geändert von atothek (08-04-2004 um 21:03 Uhr)
atothek ist offline   Mit Zitat antworten
Alt 08-04-2004, 22:56   #6 (permalink)
squirlish
 
Benutzerbild von ChriZi
 
Registriert seit: Mar 2004
Ort: CH
Beiträge: 492
wow!

ok... das ganze wird jetzt recht komplex
ich werd mir jetzt ne weile zeit nehmen müssen um das ganze nach zu vollziehen!!!

danke vielmals für die hilfe!



und... ist das die methode wie man so ein animiertes feld mit schatten macht?
oder gäbe es noch einfachere?
ChriZi ist offline   Mit Zitat antworten
Alt 09-04-2004, 07:41   #7 (permalink)
Flashaholic
 
Benutzerbild von atothek
 
Registriert seit: Feb 2003
Ort: Berlin
Beiträge: 1.459
Na das gelbe vom ei ist das mit der drawAnimated nicht wirklich aber um das alles eleganter zu lösen bedarf es mehr zeit und die ist knapp Der rest ist ansich schon gut da alles in einzelnen Fkt gekapsellt ist und somit verschieden verwendet werden kann. Funktionen sollten am besten immer so programmiert sein das sie das machen was ihr name sagt und nicht mehr. es ist nicht wirklich schick die sogenannten "WollMilchSäue"
zu proggen

Ich vertrete die meinung lieber 4 Fkt. die genau das machen was sie aussagen als eine die alles macht und nix aussagt oder so ähnlich.

Mann könnte die drawAnimated so modifizieren das sie auf die penner klassen angepasst wird und diese über einzelnen Parameter verwendet/verarbeitet.

Ich hoffe das hat geholfen

see ya
__________________
TVNEXT Solutions
atothek ist offline   Mit Zitat antworten
Antwort

Lesezeichen

« Vorheriges Thema | Nächstes Thema »
Themen-Optionen
Ansicht
Linear-Darstellung Linear-Darstellung

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks sind an
Pingbacks sind an
Refbacks sind an


Alle Zeitangaben in WEZ +1. Es ist jetzt 07:59 Uhr.

Domains, Webhosting & Vserver von Host Europe
Unterstützt das Flashforum!
Adobe User Group

Kontakt - Impressum - Flashforum - Archiv - Datenschutzerklärung - Nach oben

Copyright ©1999 – 2012 Marc Thiele