Gabriela Trindade Perry: HCI, Design Cognition, Flex

What if we wanted to have all of our images preloaded at the same time? And what if we wanted to display information while the loading progresses?

I can’t figure out a good way of doing it on a timeline base.

So Im writting this short tute: it is an excellent example of the power of object orientation.

Figure 1 depicts the gallery we want to build.

Figure 2 shows the basic preloading code.

Suppose youre showing images from a XML file. It’s a very common setting. This means you dont know how many images youre going to show.

So, whats the big deal?

Check out the code of Figure 2. See that we instantiated MyBar, which is a simple bar MovieClip. We add it to stage when the preloading starts, change its scaleX as the loading progresses and remove it from stage when the loading finishes. So far so good, hun?

So, you dont know how may pictures you have… What are you going to do about the loading bars? Are you going to instantiate and add them to stage as you read your XML? Great! Excellent idea! But, hey, youre probably inside a function, dont you? So your variables are all “locals”… How are you going to remove the loading bars?

Well, before someone thinks of something like “hey, what if I make an Array of loading bars”, let’s check the OO approach

First, a warning for the experienced programmer: this is a novice tute. I am pretty aware of DP an it all… Im not gonna cover these issues here…

So, as I was saying… Imagine that, instead of having all of our code on the timeline, we are going to have objects that represent each of the images we are loading. Each one of them is responsible for its own loading, so it takes care of its bars and warnings…

We will only instantiate them and put them on stage.

This is the idea. Now you download the code and read the as files. And if you figure out an elegant way of doing this on the timeline Ill writte a  tribute in your name in my MSN (hehe).

/*****************************************************/
E se nós quiséssemos carregar todas nossas imagens ao mesmo tempo?

E se quiséssemos mostrar informação enquanto elas carregam?

Eu não consigo pensar num jeito bcana de fazer isso via timeline.

Por isso estou escrevendo esse pequeno tutorial: é um excelente exemplo do poder da orientação a objetos.

Figura 1 mostra a geleria que queremos construir.

Figura 2 mostra um código básico de preloading.

Suponha que você vai mostrar as imagens de um arquivo XML. É uma coisa muito comum. Isso significa que você não sabe quantas imagens você vai mostrar.

E daí, qual o problema?

Olhe o código da figura 2. Veja que instaciamos MyBar, que é um MovieClip simples, com uma barra. Nós colocamos ele no palco quando o carregamento começa, mudamos sua scaleX durante o progresso e removemos ele do palco quando o carregamento terminia. Até tudo bem, certo?

Então…  você não sabe quantas imagens vai ter… Como você vai fazer com as barras de carregamento? Você vai instaciá-las e colocá-las no aplco enquanto lê seu XML? Ótimo! Excelente idéia! mas, olha só, você provavelmente está dentro de uma função, não? Então suas variáveis são todas “locais”… Como você vai remover as barras de carregamento?

Bem, antes que alguém pense em algo do tipo “e se eu criasse um Array de barras de carregamento”, vamos ver a abordagem OO

Primeiro, um aviso aos programadores experientes: este é um tutorial para iniciantes. Eu estou bem ciente dos padrões de projeto e tals… E não vou cobrir estes assuntos aqui…

Então, como eu estava dizendo… Imagine que, ao invés de ter todo seu código na timeline, nós vamos ter objetos que representam cada uma das imagens que nós vamos carregar. Cada uma delas é reponsável por seu próprio carregamento, por isso cuida de suas barras e avisos…

Nós só vamos instaciar os objetos e colocá-los no palco.

Essa é a idéia. Agora você baixa o código e lê os arquivos. E se você achar um jeito elegante de fazer isso na timeline eu escrevo uma homenagem a você no meu MSN (hehe).