WEB FLASH TWEEN (ENGLISH VERSIÓN)
Posted by webmaster | Posted in ACTIONSCRIPT, ADOBE FLASH, DISEÑO WEB, PROGRAMACIÓN, RECURSOS, RECURSOS WEB | Posted on 03-07-2009
Etiquetas: RECURSOS WEB, Recursos web profesionales, web flash tween
0
DESDE EL NORTE DE EEUU, SE HA PUESTO EN CONTACTO UN VISITANTE WEB QUE ESTABA INTERESADO EN ACCEDER AL CONTENIDO DE ESTE RECURSO WEB QUE COMPARTÍ CON VOSOTROS DE MANERA TOTALMENTE GRATUITA MESES ATRAS.
PARA MI ME ES GRATO SABER QUE MI PROYECTO BLOG ESTÁ TENIENDO ÉXITO, NO SOLO EN ESPAÑA, SINO ADEMÁS, MAS ALLÁ DE LAS FRONTERAS.
GRACIAS A TODOS! y ahí os delo la versión english de este recurso
si quereis volver a ver la versión spanish la teneis aquí:
http://www.flashmania.es/recursos_web/diseno-web/web-flash-tween
I have in recent days to investigate the behavior of a website that I found very very strange.
The page in question is the following:
http://www.christinarosenvinge.com/
After some tests with the actionscript code and playing with the tween class, this was the result, there are two versions, a single (the first thing I did) and somewhat more complex. In essence the two functions with the same code, except for minor changes. This is a resource that I have developed and I fully share with the community, thinking that might be interesting for our projects. I think such a photo gallery with this system, a micro site of production of any product or service.
There they have and hope it is your pleasure ...
This is the simple ...
This complex ...
At the end of the post also readily provide archives .fla, to whoever you want, you can download.
How is this done?
The idea is simple:
1) Create movie clips in each section of our website
2) In Flash, select all movieclips and create a movie clip-Total, which we call container.
3) On a piece of paper we scored the positions of "x" and "y" and the angle that should be rotated to see the paragraph just on the stage:
In the example from which this section I focused initially on the stage.
SECTION I= 750 px I x, y = 400 px: = 0 ° rotation.
SECTION II x = 400 px and px = 50: rotation = -90 º .*
SECTION III = x 250 px and px = -100: rotation = 0 °. *
SECTION IV = x 100 px and px = -50: rotation = 90 º. *
SECTION V x = px -250 and -100 = px: = 0 ° rotation. *
SECTION VI = x 750 px, y = 400 px: = 0 ° rotation. *
* the angle that you recorded will always be asking the next question is ¿how much to rotate the container from Section I to reach the section that is ...?
Well, the most complex, it´s complette!!!
Now that schedule in this case is super simple, in this case.
4) generate a layer with the menu (botonera), which you can curran want ... and finally the arrangement of layers is so easy:
5) open the Actions panel (F9-Windows / Mac-ALT + F9)
The first thing we will do is import the class by putting "*", all imported.
import mx.transitions .*;
define buttons as funtions what contain tweens to perform the following:
A) ...... X position from the position where X is the container (contenedor._x) to the position to give you (for each button).
B) Y position from the position ...... And from where the container (contenedor._y) to the position to give you (for each button).
C) Rotation angle ...... who has the movie-clip "container (contenedor._rotation) to the angle we want.
Define tweens within each button in extructura, is something.
btn1.onPress = function () {
the tweens
} ;
btn2.onPress = function () {
the tweens
};
btn3.onPress = function () {
the tweens
};
btn4.onPress = function () {
the tweens
};
btn5.onPress = function () {
the tweens
};
btn6.onPress = function () {
the tweens
};
For those who do not check the "tween programming," will write a post talking about them completely.
6) The main structure, or idea of this resource, this collection here, however, who wishes more information, as with all the resources they offer, provide the files. Fla to your study.
MODELO SENCILLO: aquí SIMPLE MODEL: here
MODELO MÁS COMPLEJO: aquí More complex models: here
Prepared by Juan Garcia - webmaster@4cuarenta.com July 2008
Saludos! Greetings!