Zmienne_pola_tekstowe.pdf

21.Pola tekstowe

We Flash-u mamy trzy rodzaje pól tekstowych.

- static text

- dynamic text

- input text

Pole typu static służy jedynie do umieszczania określonego tekstu na scenie.

dla takiego pola można jedynie określić krój tekstu, którym jest dany tekst wyświetlany i jego

pozycję oraz rozmiar – okienko properties.

Pole typu dynamic służy generalnie do wyświetlania wartości zmiennej stowarzyszonej z

danym oknem tekstowym – okienko Var .

Z tym oknem można również stowarzyszyć nazwą, będącą jego reprezentacją w kodzie action

scriptu – pole Instancje name . Można również zdecydować czy okno ma być jedną linią,

wieloma liniami z zawijaniem wierszy czy wieloma liniami bez zawijania wierszy.

Pole typu input test jest wykorzystywane, aby użytkownik mógł wprowadzić do aplikacji

określony tekst, który w zależności od zmiennej, która jest stowarzyszona z danym oknem

będzie interpretowana jako odpowiedni typ zmiennej.

Dla tego pola można dodatkowo ustawić maksymalną ilość wprowadzanych przez

użytkownika znaków – maximum characters oraz można spowodować aby wprowadzane

przez użytkownika znaki były kodowane gwiazdkami – password . Aby ograniczyć znaki,

które użytkownik może wprowadzać do okna należy użyć opcji Charakter...

22. Zmienne

We Flash-u mamy tylko trzy rodzaje zmiennych: liczbowe, tekstowe lub logiczne. W związku

z tym wyrażenia na zmiennych są realizowane kontekstowo.

zmienna1 = 12;

zmienna2 = 2;

zmienna3 = „test”;

zmienna4 = „zmian”;

wynik działania operacji będzie następujący:

zmienna1 + zmienna2 = 14 //zmienna liczbowa

zmienna3 + zmienna4 = „testzmian” //zmienna tekstowa

zmienna2 + zmienna3 = „test2”

//zmienna tekstowa

Aby pozwolić użytkownikowi komunikować się z aplikacją za pomocą zmiennych należy

stworzyć dwa okna tekstowe - pole tekstowe typu input text , w którym użytkownik poda

wartości i dynamic text , w którym użytkownik zobaczy rezultaty.

Przykład22_1.fla

Można również obrabiać teksty wprowadzone przez użytkownika. Służy do tego obiekt

String . Jeśli dana zmienna jest typu tekstowego to można na jej rzecz wywoływać metody

klasy String (Tabela poniżej).

Method summary for the String class

Method

Description

String.charAt()

Returns the character at a specific location in a string.

String.charCodeAt()

Returns the value of the character at the specified index as a 16-bit integer

between 0 and 65535.

String.concat()

Combines the text of two strings and returns a new string.

String.fromCharCode() Returns a string made up of the characters specified in the parameters.

String.indexOf()

Returns the position of the first occurrence of a specified substring.

String.lastIndexOf() Returns the position of the last occurrence of a specified substring.

String.slice()

Extracts a section of a string and returns a new string.

String.split()

Splits a String object into an array of strings by separating the string into

substrings.

String.substr()

Returns a specified number of characters in a string, beginning at a specified

location.

String.substring()

Returns the characters between two indexes in a string.

String.toLowerCase() Converts the string to lowercase and returns the result; does not change the

contents of the original object.

String.toUpperCase() Converts the string to uppercase and returns the result; does not change the

contents of the original object.

Property summary for the String class

Property

Description

String.length A nonzero-based integer specifying the number of characters in the specified String

object.

Ćwiczenia:

1. wykorzystując funkcję matematyczną Math.sqrt utwórz aplikację liczącą

pierwiastek kwadratowy z liczby podanej przez użytkownika.

2. Wykonaj kalkulator zgodnie z załącznikiem Przyklad

3. Utwórz aplikację, która liczy długość wprowadzonego tekstu,

4. Utwórz aplikację, która sprawdza wprowadzone hasło i nie jest wrażliwa na

wielkość liter

5. Utwórz aplikację, która sprawdza, czy wprowadzony ciąg znakowy zawiera

określony podtekst.

Wgrywanie zmiennych z zewnętrznego pliku

1. Robimy puste pole tekstowe i ustawiamy we właściwościach:

Nazwa zmiennej - text - będzie to nazwa, którą zapiszemy w pliku tekstowym.

2. Robimy guzik, który będzie pobierał nasze zmienne :

on(release) {

loadVariables("text.txt", "_root.varTarget");

}

korzystamy ze składni

loadVariables (" url " , target [, variables ])

W polu URL wpisujemy lokację naszego pliku ze zmiennymi w stosunku do naszego pliku

*.swf.

Target - ustawia nam miejsce w które wgrywamy nasze zmienne - jesli komórka z tekstem

znajduje się wewnątrz MovieClipa lub w innym Levelu musimy to tu ustawić !

Variables - Ustawia metodę pobierania zmiennych/danych - Don't Send, GET lub POST

Don't Send - pobiera dane bezpośrednio z naszego pliku

GET - używamy do malej ilości zmiennych

POST - wysyła zmienne w oddzielnych header-ach (dobry do wysyłania dużej ilości danych)

Nas na ogół będzie interesować tylko Don't Send ...

3. Teraz zostało nam już tylko stworzyć plik tekstowy o nazwie podanej w Load Variables - w

naszym przypadku będzie "text.txt". W tym pliku wpisujemy wartości naszych zmiennych:

text = nasza zmienna, tekst czy cokolwiek innego

w naszym przypadku będzie to :

text= Zmienne wgrane pomyślnie !

I gotowe !

Oczywiście musimy pamiętac aby plik ze zmiennymi był w tym samym katalogu co nasz

*.swf - lub też odpowiednio ustawić scieżkę do tego pliku w Load Variables . Zastosowanie

tego typu wgrywania zmiennych ułatwia nam update'owanie naszego *.swf - jeśli chodzi o

datę czy zawarty w nim tekst. A przy kombinacji z CGI możemy np. eksportować księgę

gości czy "hall of fame" z gier ...

Przykład22_2

Tworzenie efektów na tekście

Tworzymy mechanizm wyciągania kolejnych literek oraz przypisywania ich kolejnym

wstawianym klonom symboli, nie zapominając o kontroli długości już wyświetlonego tekstu.

Najpierw jednak tworzymy MovieClip z dynamicznym polem tekstowym w środku o nazwie

zmiennej txt i nadajemy mu linkageName literka , nie zapomnijmy też o włączeniu opcji

embed fonts/all dla pola tekstowego w menu character . Do jego klonów będą ładowane

kolejne literki. Od tego momentu będziemy zajmowali się już tylko i wyłącznie

programowaniem.

Na głównym tajmlajlnie (listwie czasowej) piszemy kod:

i = 0;

h_space = 10;

x = 30;

y = 50;

tekst = "jeszcze jakis inny tekst";

this.onEnterFrame = function() {

this.attachMovie("literka", "lt"+i, i);

clip = this["lt"+i];

clip.txt = tekst.substr(i, 1);

clip._x = i*h_space+x;

clip._y = y;

if (i == tekst.length) {

delete i;

this.onEnterFrame = undefined;

}

i++

};

W skrócie jak to działa: Przyklad22_3.swf

Ustawiamy licznik "i" na 0, definiujemy odległość między klipami z zawierające literki

(h_space), współrzędne pierwszego klipu (x i y), oraz tekst który zostanie wyświetlony

(tekst). Następnie przypisujemy zdarzeniu onEnterFrame dla głównego tajmlajnu blok kodu

zawarty w ciele funkcji. Wykonuje on kolejne czynności:

wstawia klon Symbolu z biblioteki, na scenę nadaje mu nazwę oraz głębokość

wyświetlania.

przechowujemy referencje do tego kolnu w lokalnej zmiennej clip

przypisujemy zmiennej pola tekstowego znajdującego się we stawionym klonie

odpowiednią literkę z naszego łańcucha znaków

obliczamy pozycje docelowe x i y dla kolonu

sprawdzamy czy wartość licznika jest równa długości łańcuch czyli czy wyświetlone

zostały wszystkie literki, jeżeli tak kasujemy wartość licznika i usuwamy funkcję ze

zdarzenia onEnterFrame przypisując mu wartość niezdefiniowaną.

Następnie dodajemy do powyższego animację za pomocą skryptu. Dołączymy funkcję

przypisaną zdarzeniu onEnterFrame, ale dla każdego wstawionego klonu, dzięki czemu każdy

będzie się animował od momentu wstawienia go na scenę. Modyfikacje w kodzie zaznaczono

Boldem:

i = 0;

h_space = 10;

x = 30;

y = 50;

tekst = "jeszcze jakis inny tekst";

this.onEnterFrame = function() {

this.attachMovie("literka", "lt"+i, i);

var clip = this["lt"+i];

clip.txt = tekst.substr(i, 1);

clip._x = i*h_space+x;

clip._y = y;

clip._alpha=0

clip.onEnterFrame = function() {

if (this._alpha<100) {

this._alpha += 5;

} else {

this.onEnterFrame = undefined;

}

};

if (i == tekst.length) {

delete i;

this.onEnterFrame = undefined;

}

i++

};

I cóż się dzieje, najpierw ustawiamy wartość _alpha dla klonu na 0 a następnie przypisujemy

zdarzeniu dla tego klonu blok kodu wykonujący następujące czynności: Jeżeli wartość _alpha

tego(!) klonu (stąd this, odwołujemy się do poziomu klonu a nie głównego tajmlajna) jest

mniejsza od 100 0 zwiększ wartość _alpha o 5; w innym razie (wartość _alpha >= 100) skasuj

(zmień na niezdefiniowane) zdarzenie onEnterFrame dla tego klipu.

Efekt jest taki że każdy wstawiony klon od momentu wstawienia zwiększa swoją wartość

alpha do momentu aż osiągnie ona 100. Wygląda to tak że literki pojawiają się kolejno i stają

się coraz mniej przezroczyste aż do chwili uzyskania zerowej przezroczystości (_alpha=100).

Przyklad22_4.swf

Spróbujmy teraz czegoś bardziej efektownego. Właściwie od tego momentu wszystkie

zmiany będą dotyczyły przede wszystkim definicji zdarzenia onEnterFrame dla klonów.

Powiedzmy że chcemy uzyskać efekt polegający na tym że literki pojawiają się w losowych

miejscach a następnie płynnie zajmują właściwą pozycję, tak jak by z rozsypanych literek

składała się linijka zdefiniowanego przez nas tekstu. Poparzmy jak teraz wygląda kod:

i = 0;

h_space = 10;

x = 30;

y = 50;

tekst = "jeszcze jakis inny tekst";

this.onEnterFrame = function() {

this.attachMovie("literka", "lt"+i, i);

var clip = this["lt"+i];

clip.txt = tekst

clip.x = i*h_space+x;

.substr(i, 1);

clip.y = y;

clip._x=clip.x+(random(100)-50)

clip._y=clip.y+(random(100)-50)

clip.speed=2

clip._alpha = 100;

clip.onEnterFrame = function() {

var sx=(this._x-this.x)/this.speed

var sy=(this._y-this.y)/this.speed

this._x-=sx

this._y-=sy

};

if (i == tekst.length) {

delete i;

this.onEnterFrame = undefined;

}

i++

};

Pogrubioną czcionką zaznaczyłem zamieniony fragment kodu. Na czym polegają zmiany.

Poza tym że zmianie uległa całość onEnterFrame dla klonu to zmieniło się oraz pojawiło

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: