blog.swish.pl

Widzieliście pewnie wiele animacji Flash, gdzie obrazy przechodziły jedne w drugie, poprzez obracanie ich w kierunku pionowym lub poziomym. Tego typu działanie jest dość łatwe do osiągnięcia z podstawową wiedzą o  trygonometrii ze szkoły średniej, oraz pewnych skryptów.

Ten poradnik wyjaśnia podstawy  trygonometrii, tak, by można było rozszerzyć to rozwiązanie na własny użytek.

Konstruowanie klipu filmowego

Konspekt dla tego przykładu jest pokazany obok.

Aby utworzyć klip filmowy, zaimportuj dwa obrazy tej samej wielkości do obszaru roboczego. Zmień ich nazwę na s1 i s2. Następnie ustaw opcję Cel (w panelu Właściwości) dla s1 i s2. Wybierz obydwa kształty i zgrupuj je do klipu filmowego (wybierz, kliknij prawym przyciskiem | grupowanie | Grupuj jako Klip filmowy). Nazwij nowy klip filmowy rotateimage. Oba kształty mają ich początkowe nazwy _x i _y ustawione na  0,0 z punktami odniesienia i transformacji ustawianymi na środek (ustawić za pomocą paneli Transformacja lub Zmiana kształtu).

Prosta Trygonometria

Na powyższym diagramie, przyprostokątna przyległa (ang. Adjacent) i przyprostokątna naprzeciwległa(ang. Opposite) są w odniesieniu do kąta A.

A,B i C są kątami. np. Kąt A jest wewnętrznym kątem tworzonym przez boki  b i c.

a,b i c są długościami boków trójkąta. Dlatego:

sin(A) = przyprostokątna naprzeciwległa (a, ang. Opposite) / przeciwprostokątna (c, ang. Hypotenuse)

cos(A) = przyprostokątna przyległa (b, ang. Adjacent) / przeciwprostokątna (c, ang. Hypotenuse)

W podobny sposób, dla kąta B:

sin(B) = (b) / (c)

cos(B) = (a) / (c)

Wpis Wikipedii o Trygonometrii można znaleźć tutaj.

Przy użyciu obiektu Math dostępnego w skryptach, możliwe jest obliczenie sin() i cos() dla dowolnego kąta. Obliczenia te mogą być następnie wykorzystane do obliczenia skali i przesunięcia, które mają być zastosowane do każdego obrazka dla danego kąta obrotu. (Uwaga: W ramach obiektu Math Flash-a , sin() i cos() oczekują, że kąt wyrażony w radianach, dla kątów wyrażonych w stopniach, użyj sindeg() i cosdeg()).

Poniższy schemat wyprowdza te obliczenia na podstawie widoku  boku zdjęć podczas obracania. Najedź myszką na różne części diagramu by zobaczyć podpięty opis w panelu tekstowym niżej.

Dla 90-180 zastąp image 3 w image 1

Dla 180-270 zastąp image 3 w image 1 i image 4 w image 2

Dla 270-360 użyj image 1 i zastąp image 4 w image 2.

Ze względu na dodatkowe zdjęcia, konieczne jest wyraźnie widoczność dla każdego obrazu w kodzie dla każdego segmentu.

Uaktualniony skrypt jest poniżej:

function setAngle(a) {
    a = a%360;
    if (a < 0) {
        a += 360;
    }

    var ca = Math.cosdeg(a);
    var sa = Math.sindeg(a);

    if (a < 90) {
        s1._visible = true;
        s2._visible = true;
        s3._visible = false;
        s4._visible = false;
        s1._yscale = ca*100;
        s1._y = sa*h0/2;
        s2._yscale = sa*100;
        s2._y = -ca*h0/2;
    } else if (a < 180) {
        s1._visible = false;
        s2._visible = true;
        s3._visible = true;
        s4._visible = false;
        s3._yscale = -ca*100;
        s3._y = -sa*h0/2;
        s2._yscale = sa*100;
        s2._y = -ca*h0/2;
    } else if (a < 270) {
        s1._visible = false;
        s2._visible = false;
        s3._visible = true;
        s4._visible = true;
        s3._yscale = -ca*100;
        s3._y = -sa*h0/2;
        s4._yscale = -sa*100;
        s4._y = ca*h0/2;
    } else {
        s1._visible = true;
        s2._visible = false;
        s3._visible = false;
        s4._visible = true;
        s1._yscale = ca*100;
        s1._y = sa*h0/2;
        s4._yscale = -sa*100;
        s4._y = ca*h0/2;
    }
}

Poziomy obrót