FlashForum
  • Forum
  • Nyheder
  • Tutorials
  • DFUG
  • Log ind
  • Opret konto

Kasser

J-ROaR-H skrev i ActionScript 3

Hej..

Jeg er ved at lave en hjemmeside, men har et problem.

Jeg ved ikke hvordan jeg laver en kasse hvor "linjen" bliver større og ændre farve.

Eks.: http://www.creativewebsiteawards.com/

Nogen der kan hjælpe?

31 kommentarer

Thonbo's billede
Thonbo

mit bud er basic shape tween - alternativet er at du laver en outline som du via shapetween laver tyggere og mørkere og så masker du hele molevitten.. denne metode kan også scriptes

J-ROaR-H's billede
J-ROaR-H

Okay, har ikke så meget forstand på flash. Når jeg laver en kasse og sætter shape tween på, så bliver hele "stregen" på kassen større. Den går ikke "ind" i kassen, kan jeg få den til det?

Noget andet er at jeg også gerne vil have den til først at starte med at blive større når jeg kører musen ind i kassen.

Er denne kode så rigtig?

1
2
3
4
5
6
this["symbol 1" + i].onRollOver = function()
    {
      if(this.btnNum !=_root.activeBtn)
      {
        
        this.gotoAndStart(1);

Jeg syntes ikke den virker, så ved i hvad fejlen kan være?

Jeg har herunder linket til nogen billeder så i kan se hvordan jeg har lavet shape tween, og mask (Hvad gør mask egentlig? Synter ikke jeg kan se der er nogen forskel)

http://jrhkaep.wep.dk/Untitled-1.jpg
http://jrhkaep.wep.dk/Untitled-2.jpg

atorsten's billede
atorsten

Hej,

Prøv denne klasse... Den kan det du søger... Men mangler lige click-eventen.. Den må du selv lige tilføje

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
package
{
  import flash.display.Sprite;
  import flash.display.Graphics;
  import flash.display.Shape;
  import flash.events.MouseEvent;
  import flash.events.Event;
  import fl.transitions.Tween;
  import fl.transitions.easing.*;
  import flash.display.Loader;
  import fl.transitions.TweenEvent;
  import flash.net.URLRequest;
  import flash.geom.ColorTransform;
  
  public class ExtractBox extends Sprite
  {
    private var myImg:Loader = new Loader();
    private var borderBox:Shape;
    private var maskBox:Shape;
    private var scale:Number;   
    private var size:Number;
    private var border:Number;
    private var url:String;
    var startColor:ColorTransform = new ColorTransform(); 
    var endColor:ColorTransform = new ColorTransform();
    var ctween:Tween;
    var stween:Tween;
    
    function ExtractBox(_url:String, _x:Number, _y:Number, _size:Number, _border:Number)
    {
      url = _url;
      size = _size;
      border = _border;
      x = _x+(size/2);
      this.y = _y+(size/2);
      
      drawBorderBox();
      drawPictureBox();
      
      scale = maskBox.scaleX;
      addEventListener(MouseEvent.MOUSE_OVER, onPictureBoxOver);
      addEventListener(MouseEvent.MOUSE_OUT, onPictureBoxOut);
    }
  
    private function onPictureBoxOver(e:MouseEvent):void
    {
      startColor.color = 0x000000;  
      endColor.color = 0x888888; 
      
      ctween = new Tween(maskBox, "scaleY",Strong.easeOut, scale, scale*0.9, 5);
      new Tween(maskBox, "scaleX",Strong.easeOut, scale, scale*0.9, 5);
      ctween.addEventListener(TweenEvent.MOTION_CHANGE, TweenMyColors);     
    }
    
    private function onPictureBoxOut(e:MouseEvent):void
    {
      startColor.color = 0x888888; 
      endColor.color = 0x000000; 
      
      ctween = new Tween(maskBox, "scaleX",Strong.easeOut, scale*0.9, scale, 5);
      new Tween(maskBox, "scaleY",Strong.easeOut, scale*0.9, scale, 5);
      ctween.addEventListener(TweenEvent.MOTION_CHANGE, TweenMyColors);     
      
    }
    
    private function drawBorderBox():void
    {
      borderBox = new Shape();
      borderBox.graphics.beginFill(0x000000);
      borderBox.graphics.drawRoundRect(-(size/2),-(size/2),size,size,0);
      borderBox.graphics.endFill();
      borderBox.alpha = 0.5;
      addChild(borderBox)
    }
    
    private function drawPictureBox():void
    {
      myImg.load(new URLRequest(url));
      myImg.x = -(size/2)-2;
      myImg.y = -(size/2)-2;
      addChild(myImg);
      
      maskBox = new Shape();
            maskBox.graphics.beginFill(0xFF9999);
          maskBox.graphics.drawRoundRect(-(size/2)+border,-(size/2)+border,(size-(border*2)),(size-(border*2)),0);
            maskBox.graphics.endFill();
      
      addChild(maskBox);
      myImg.mask = maskBox;
      
    }
    
    function TweenMyColors(e:TweenEvent):void
    {
      borderBox.transform.colorTransform = interpolateColor(startColor, endColor, ctween.position);     
    }
 
    function interpolateColor(start:ColorTransform, end:ColorTransform, t:Number):ColorTransform 
    {
      var result:ColorTransform = new ColorTransform();     
      result.redMultiplier = start.redMultiplier + (end.redMultiplier - start.redMultiplier)*t;
      result.greenMultiplier = start.greenMultiplier + (end.greenMultiplier - start.greenMultiplier)*t;
      result.blueMultiplier = start.blueMultiplier + (end.blueMultiplier - start.blueMultiplier)*t;
      result.alphaMultiplier = start.alphaMultiplier + (end.alphaMultiplier - start.alphaMultiplier)*t;
      result.redOffset = start.redOffset + (end.redOffset - start.redOffset)*t;
      result.greenOffset = start.greenOffset + (end.greenOffset - start.greenOffset)*t;
      result.blueOffset = start.blueOffset + (end.blueOffset - start.blueOffset)*t;
      result.alphaOffset = start.alphaOffset + (end.alphaOffset - start.alphaOffset)*t;   
      return result;
    }
  }
}

Du kan kalde den fra din timeline ved at bruge

1
2
var eb:ExtractBox = new ExtractBox("http://farm1.static.flickr.com/194/472097903_b781a0f4f8.jpg",15,15,300,4);
addChild(eb);

J-ROaR-H's billede
J-ROaR-H

Tak, men kan ikke få det det at virke... ved meget lidt om as. men skal jeg ikke bare sætte den først kode ind i mc, og den anden ind på scenen?

Jeg skal ikke gøre andet vel? Embarassed

J-ROaR-H's billede
J-ROaR-H

Nogen der vil hjælpe?

Thonbo's billede
Thonbo

ye jeg tror ik en klasse er noget for en nystarter som dig "no offence" det kan kun virke forvirende hvis man ik ved hvordan man bruger en klasse .. lad mig kompose et eksempel til dig

Thonbo's billede
Thonbo

btw der er ik noget der hedder gotoAndStart() - der har du i hvertfald en fejl det hedder gotoAndPlay(1)

Thonbo's billede
Thonbo

http://www.thonbo.com/download/kasser.fla

3 eksempler et med outline og maske det er nok det mest lightweight - de 2 andre er basale shapes som ændre sig - der vil nogen gang opstå problemer med shapetween når man prikker hul i midten - derfor har jeg lavet et stable eksempel med transparent fill i midten den vil jeg anbeflae du bruger

J-ROaR-H's billede
J-ROaR-H

Tusind tak... Det virker perfekt... Nu mangler jeg bare at få den til først at starte når jeg føre musen ind i.

Har prøvet med

1
2
3
onRollOver = function
{
 this.gotoAndPlay(1);

Men virkede ikk... Kan du også hjælpe med det?

Thonbo's billede
Thonbo

shure - bruger du actionscript 2 eller 3 ?

as2 eksempel (se demo)(fla fil):

denne blok kode lægger du i første frame af din flash så virker den over hele din flash selv inde i de flash du loader ind.

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
//force movieClip back to frame 1
MovieClip.prototype.goBack = function () {
  this.onEnterFrame = function () {
    this._currentframe > 1 ? this.prevFrame () : delete this.onEnterFrame;
  };
};
//force movieClip forward to last frame
MovieClip.prototype.goForward = function () {
  this.onEnterFrame = function () {
    this._currentframe < this._totalframes ? this.nextFrame () : delete this.onEnterFrame;
  };
};
// basic rollOver rollOut function
MovieClip.prototype.mcRollOver = function () {
  this.stop ();
  this.onRollOver = function () {
    this.goForward ();
  };
  this.onRollOut = function () {
    this.goBack ();
  };
};
//SELECTION CONTROLLER /////////////////////
MovieClip.prototype.makeSelection = function () {
  newSelection = this;
  this.enabled = false;
  if (newSelection._currentframe != newSelection._totalframes) {
    newSelection.goForward ();
  } else {
    stop ();
  }
  oldSelection.goBack ();
  oldSelection.enabled = true;
  oldSelection = newSelection;
};

du bruger den bare ved at skrive mcRollOver() inde i dit movieclip du vil ha muse interaktion på så køre timlinen frem når du køre over dit clip og tilbage når du køre ud - i den nederste del af scriptet er der en selection controler der bruger de første functioners actions til at låse et clip i aktive stadie når du trykker på det så du ikke kan trykke på den samme knap igen når du så vælger en anden knap så vil den gamle låste knap blive låst op og animere tilbage til frame 1 og den nye knap vil animere frem til enden

kort sagt lav et clip med en lille timeline animation og skriv mcRollOver() i første frame thats it! du behøver ikke engang at lave en "mouse out animation" fordi den ruller tilbage af timelinen når du forlader clippet - du kan også skriver minKnap_mc.mcRollOver() uden for clippet så vil den ha samme functionalitet...

eksempel på koden som låser knappen i aktive stadie (animeret frem til last frame) og låser anden låst knap op

1
2
3
4
5
6
minKnap_mc.mcRollOver()
 
minKnap_mc.onRelease = function(){
  this.makeSelection()
  // din egen action kode her
}

den øverste linje er ikke nødvendig hvis du allerede har angevet din knap til at ha mcRollOver()

as3 eksemplet er lidt mere tricky for en ny i flash da det er classes - så sig til hvis du bruger actionscript 3 så kan jeg vise dig den samme kode som oven over lavet i classes til actionscript 3

J-ROaR-H's billede
J-ROaR-H

Tak... det virker fint.

Men hvordan får jeg link på?

J-ROaR-H's billede
J-ROaR-H

Tak... det virker fint.

Men hvordan får jeg link på?

Bruger AS2

J-ROaR-H's billede
J-ROaR-H

Vil du tjekke om jeg har gjort det rigtigt? Det virker fint, men man kan vel ligeså godt lave det rigtigt..

Du kan se det her: http://jrhkaep.wep.dk/

Og ved du hvordan jeg får et digitalt ud ind i? har lavet et ur, men ved ikke hvordan jeg får det ind..

jakobhs's billede
jakobhs

Hej..

Prøv at søg på nettet..

Men her er det:

1
2
3
4
minKnap_mc.onRelease = function(){
  this.makeSelection()
  getURL('http://www.google.com','_blank');
}

-Jakob

Thonbo's billede
Thonbo

ja og siden det er en startside du laver så prøv med _self i stedet for _blank så åbner linket i samme vindue i stedet for et nyt men det er jo smag sag...

ov forresten jeg så din fla fil - sæt din fps (frames per second) op til 24-30 stykker så ser det helt klart bedre ud.

J-ROaR-H's billede
J-ROaR-H

Tak...

Jeg har fået det med link til at virke, men kun når jeg er i flash og ser det (ctrl+enter) når jeg skal se det som hjemmeside virker linket ikke.. kan man gøre noget ved det?

Kan i også fortælle mig hvordan jeg får uret ind i min startside?

jakobhs's billede
jakobhs

Uret?

J-ROaR-H's billede
J-ROaR-H

ja.. jeg har et digitalt ur jeg gerne vil have ind. Jeg har lavet uret, det skal bare ind i min startside.

I kan hente/se det her: http://jrhkaep.wep.dk

Thonbo's billede
Thonbo

lav et tomt movieclip og kopier framesne ind i det

J-ROaR-H's billede
J-ROaR-H

Tak...

Har du også svaret på starten af #16

Thonbo's billede
Thonbo

kig på #14 ? - husk altid http

J-ROaR-H's billede
J-ROaR-H

Det har jeg med...

J-ROaR-H's billede
J-ROaR-H

Nogen der ved hvorfor jeg ikke kan bruge mine link når de virker når man ser dem inde i flash (ctrl+enter), og de ikke virker når man ser dem som hjemmeside (på pcen)?

Jeg har lagt siden ud her: http://jrhkaep.wep.dk/Index.swf, og der virker den fint. Jeg har bare det problem, at jeg ikke kan se swf filer på den pc jeg bruger, men på en anden jeg har virker det fint. Nogen der ved hvorfor jeg får en fejl (gul trekant) når jeg skal se swf filer på nettet?

Kan man ikke få link til at virke hvis man ikke ser den på nettet? Det går nået hurtigere at se den fra selve pcen

Thonbo's billede
Thonbo

det er ofte sådan at når du prøver at åbne link fra en swf som du spiller lokalt uden for flash programmet, i browser eller bare i standalone flash player så stoppes linken -

du får denne meddelelse

-- det skal man normalt ikke bekymre sig om da vi ved jo det virker fint når den kommer op og ligger live...

prøv at åbn din html i firefox og spil den der

kig her hvis du vil ha det fixet

http://www.macromedia.com/support/documentation/en/flashplayer/help/sett...

J-ROaR-H's billede
J-ROaR-H

Tak...

Har lige et andet lille problem.. Jeg vil gerne have at den skifter farve i menu teksten, samtidig med den lille trekant kommer op.. Jeg ved godt hvordan jeg skal, og så alligevel ikke... Jeg skal lave et tint på teksten, men det kan jeg ikke, når jeg klikker på teksten kommer menuen med "color" ikke frem, den bliver i tekst redigeringen.

Hvorfor kan jeg ikke det. Har jeg lavet det forkert?

Kik evt her: www.jrhkaep.wep.dk

Thonbo's billede
Thonbo

hva er det for en trekant du snakker om ?

J-ROaR-H's billede
J-ROaR-H

Det er en lille hvid trekant der kommer frem når man køre musen ind over teksten i den røde menulinje.

J-ROaR-H's billede
J-ROaR-H

Hvad skal man skrive når man liker til en anden side lavet i flash, men som ligger lokalt?

Jeg har flere sider i min startside, så er det rigtigt at jeg skal lave en .fla fil til alle mine sider?

J-ROaR-H's billede
J-ROaR-H

nogen der har svar på mine sidste to spørgsmål?

J-ROaR-H's billede
J-ROaR-H

Stadig ikke nogen?

felisan's billede
felisan

hey alle.

jeg faldt over denne post ved en tilfældighed, men hvor er jeg glad for at jeg opdagede den Wink
jeg har kigget en del på tidligere postede Class, har rodet rundt i den så jeg forstod indholdet og tilpasset den min forståelse for kode (f. eks. udskiftet Tween med Tweener).

her kan I se og læse hvad jeg er endt op med:
http://www.campjohn.dk/wp/?p=1020

hvis der er nogle, der har lyst til at udvikle på denne klasse, f. eks:
- gøre det muligt at loade billeder, der ikke er rektangulære
- tilføje en scriptet preloader, der vises indtil Class'en er færdig med at loade billedet

eller udvikle en helt 3. funktionalitet er det bare at poste det her, det kunne være spændende at følge med i!

uanset hvad, så synes jeg at FlashForum er et aldeles fremragende sted for vidensdeling og læring; big, fat thumbs up!
Smile

  • Om
  • Kontakt

Copyright © 2005-2012 FlashForum.dk

Bygget med Drupal. Hostet af Linode