WEB FLASH TWEEN (ENGLISH VERSIÓN)
Posted by admin | 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!
SEMINARIO ACTIONSCRIPT 3.0
Posted by admin | Posted in ACTIONSCRIPT, ADOBE, ADOBE FLASH, DISEÑO WEB, PROGRAMACIÓN, RECURSOS, RECURSOS WEB, WEB PROFESIONAL | Posted on 18-05-2009
Etiquetas: ACTIONSCRIPT, ADOBE, curso de actionscript, diseño web madrid, diseño web malaga, diseño web nerja, infoarquitectura, programacion web
2
SEMINARIO ACTIONSCRIPT 3.0 ADOBE FLASH
Desde Adobe, nos traen otro seminario, público en Actionscript. Como bien sabeis, no hace mucho se implantó el lenguaje de programación actionscript 3.0, dejando casi de lado al anterior, que todos dominábamos, el actionScript 2.0.
En este seminario que desde adobe, han bautizado como ActionScript 3.0 para dummys, nos presentan de modo muy simpático y simple las bases para que nuestra adaptacion a actionscript 3.0, no sea un "tirarnos de los pelos"
Suerte a todos los que os esteis migrando y confio en que lo disfrutéis.
RECURSOS WEB: APUNTES DE DISEÑO WEB
Posted by admin | Posted in ACTIONSCRIPT, ADOBE FLASH, CSS, DISEÑO WEB, DREAMWEAVER, HTML, JAVASCRIPT, MYSQL, PHP, PROGRAMACIÓN, XML | Posted on 17-11-2008
Etiquetas: diseño web madrid, diseño web malaga, diseño web nerja, DISEÑO WEB PROFESIONAL, especialista web, infoarquitectura malaga, Juan Garcia Delicado, recursos seo, RECURSOS WEB, www.4cuarenta.com, www.flashmania.es, www.menaline.com, www.servimena.es
0
RECURSOS WEB: APUNTES DE DISEÑO WEB.
PAra todos los que me visitaís pienso que sería bueno una introducción muy escueta y resumida de qué es esto de Internet, como comenzó y los distintos formatos de creación web que hay hasta la fecha. Sé que la teoría no suena nunca bien, pero creo que puede aportarnos cosas interesantes.
¿QUE ES INTERNET? Y ¿SUS INICIOS COMO FUERON?
internet para el ciudadano de a pie, les diré que no es más que un grupo de computadoras, ordenadores que estan conectadas entre sí intercambiando información. El termino servidor web, lo unico que hace es facilitar estos intercambios de información, ya que los encontraremos trabajando simepre, 24 hrs al dia, los 365 días del año.
Sus inicios, aunque se han datado en fechas al rededor de 1970, internet como tal, vino posterior a eso. Ocurrio como con casi todas las cosas un avance tecnológico en bases militares que poco despues adoptaron universidades y mas tarde pasó a dominio público. La primera conexion la realizaron 3 universidades al conectar e intercambiar información entre ellas. pero a nivel militar, ya se desarrollaba desde hacía algun tiempo.
¿QUÉ ES.....?
"HTML"... el html no es más que un lenguaje de creacion y diseño de páginas webs, html, o tambien reconocido como htm. La página principal de un proyecto web, siempre es index.html, a menos que se usen otras tecnologias.
PHP-XML-JAVASCRIPT....todos son lenguajes de programación y que sirven de complemento a nuestros proyectos realizados en HTML. El php, es un lenguaje de lado del servidor web es decir, es un lenguaje que se procesa en el servidor web, y a traves de nuestros exploradores web, lo que vemos, no es más que lo "procesado" por el servidor.PHP, comunica con el servidor y procesa todo lo que queramos, formularios, respaldos de datos, envio de mails, peticion de datos....etc.etc
XML, es un lenguaje parecido al html, se designa de igual manera, con etiquetas, pero que nosotros podemos escoger libremente, no tenemos que llamar a las etquetas de una determinada manera como ocurre en html. muy válido para almacenar datos, o facilitar información.
JAVASCRIPT.. el javascript es un lenguaje de programación para entornos web, que realiza cosas en local, es decir en el ordenador del usuario, ejemplos prácticos, podrian ser.. validacion de formularios, introducir calves, ventanas de advertencia, etc,etc...
ACTIONSCRIPT.... es el lengujae de programacion que usamos para programar en adobe Flash. Cuando programamos, tenemos que tener en cuenta que programamos de dos maneras, gráficamente, para conseguir un mejor ascpecto o lógicamente, hacer inteligentes las cosas hacemos.
CSS..... se denomina de esta manera a las hojas de estilo, atendiendo a la accesibilidad web, de todo proyecto web, separaremos 3 cosas siempre, por un lado , el contenido, los textos, imaganes, etc.. y por otro la forma/diseño, que tabularemos siempre con otro lenguaje de programación, el css.
MySQL...lenguaje de programacion que ejecuta rutinas para creacion, modificacion, borrado ... de bases de datos. potentísimo lenguaje.
Detras de esto comprendemos más lo complejo que puede llegar a ser una pagina web. dominar sin problemas 4-5 lenguajes de programación para hacer una web.
HTML+CSS+JAVASCRIPT+PHP+MySQL = a una web normalita.
Recurso Ofrecido por Juan Garcia Delicado
www.flashmania.es sugerencias en: webmaster@4cuarenta.com
RECURSOS WEB: SCRIPTS LISTOS PARA USAR
Posted by admin | Posted in ACCESIBLIDAD, ACTIONSCRIPT, ADOBE FLASH, CSS, DISEÑO WEB, DREAMWEAVER, HTML, JAVASCRIPT, MYSQL, PHP, POSICIONAMIENTO WEB, PROGRAMACIÓN, RECURSOS, RECURSOS WEB, USABILIDAD, WEB 2.0, WEB PROFESIONAL, XML | Posted on 24-09-2008
Etiquetas: diseño web madrid, diseño web malaga, diseño web nerja, especialista web, infoarquitectura malaga, Juan Garcia Delicado, recursos seo, RECURSOS WEB, Recursos web profesionales, www.4cuarenta.com, www.flashmania.es, www.menaline.com, www.servimena.es
0
RECURSOS WEB: SCRIPTS LISTOS PARA USAR
Buenas de nuevo os dejo un nuevo recurso para que le hecheis un vistacillo, se trata de una pagina web, donde podremos encontrar miles de scripts listos y totalmente operativos para insertar en nuestros proyectos webs. Todos o casi todos son Open Source, aunqeu tambien aprovechan en esta web para ofrecernos en bandeja, los scripts comerciales.
NO TODO ESTA HECHO
Cuando comencé en mi andadura profesional del campo del diseño web, me dí cuenta de lo sencillo que podria ser implementar "cosas/scripts" que otros ya habian realizado, la idea suena acojonante, las cosas como son.... pero la realidad no es tan así. Tras muchas horas de investigación acabas por darte cuenta que lo que te ofrecen, o puedes obtener para trus proyectos webs, no es al 100% lo que de verdad necesitamos.
Son recursos, que están ahí pero no terminan de solucionarnos las cosas, casi todos necesitan una adaptación a nuestras necesidades y es ahí donde aparece nuestra capacidad profesional, de "meterle mano a tó" para conseguir lo que de verdad necesitamos. Todo sea por logar llevar a cabo el proyecto de nuestro cliente.¿o no?
No me enrollo más y ahí os dejo el link
Recurso Ofrecido por Juan Garcia Delicado
www.flashmania.es sugerencias en: webmaster@4cuarenta.com
BOCETO DE LA GALERIA FLASH AS-XML
Posted by admin | Posted in ACTIONSCRIPT, ADOBE FLASH, DISEÑO WEB, PROGRAMACIÓN, XML | Posted on 14-07-2008
Etiquetas: diseño web malaga, diseño web nerja
1
Buenas como prometí, sigo trabajando en la galería dinámica con XML-AS, tengo que depurar algunas cositas, pero la idea básica es esta.
Galeria profesional Juan Garcia
Estad pendiente del blog, pronto, colgaré los .fla, para que veais el codigo y lo podais usar en vuestros proyectos!
Nos vemos sed buenos!
RECURSO OFRECIDO POR www.flashmania.es,
Elaborado por Juan Garcia - webmaster@4cuarenta.com Julio 2008
WEB FLASH TWEEN JUAN GARCIA EN 12KB
Posted by admin | Posted in ACTIONSCRIPT, ADOBE FLASH, DISEÑO WEB, PROGRAMACIÓN | Posted on 14-07-2008
Etiquetas: diseño web madrid, diseño web malaga, diseño web nerja, especialista web, infoarquitectura malaga, Juan Garcia Delicado, recursos seo, RECURSOS WEB, Recursos web profesionales, www.4cuarenta.com, www.flashmania.es, www.menacenter.es, www.menaline.com, www.servimena.es
15
He podido investigar en los últimos días el comportamiento de una página web que me ha parecido muy muy curiosa.
La pagina en cuestion es la siguiente:
http://www.christinarosenvinge.com/
Tras algunas pruebas con el código actionscript y jugando con la clase tween, este fué el resultado, hay dos versiones, una simple (la primera que hice) y otra algo más compleja. En esencia las dos funcionan con el mismo código, salvo pequeñas modificaciones. Este es un recurso que he desarrollado yo íntegramente y lo comparto con la comunidad, pensando en que puede ser interesante para nuestros proyectos. Se me ocurre por ejemplo hacer una galeria de fotos con este sistema, o un micro site, de presentacion de algún producto o servicio.
Ahí los tenéis y espero que sea de vuestro agrado...
Este es el simple...
Y este el complejo...
al final del post facilitaré tambien los archivos.fla, a fín de que quien lo desee, lo pueda descargar.
¿COMO SE HACE?
La idea es sencilla:
1) Crearemos movie clips con cada uno de los apartados de nuestra web
2) En Flash, seleccionaremos todos los MovieClips y crearemos un movie Clip-Total, que llamaremos contenedor.
3) En una hoja de papel iremos anotando las posiciones de "x" e "y" así como el ángulo que deberian rotar para que vieramos justo ese apartado en el escenario:
En el ejemplo y partiendo de que la Sección I esta inicialmente centrada en el escenario.
SECCION I x= 750 px ; y= 400 px: rotación= 0º.
SECCION II x= 400 px ; y= 50 px: rotación= -90º.*
SECCION III x= 250 px ; y= -100 px: rotación= 0º. *
SECCION IV x= 100 px ; y= -50 px: rotación= 90º. *
SECCION V x= -250 px ; y= -100 px: rotación= 0º. *
SECCION VI x= 750 px ; y= 400 px: rotación= 0º. *
*el angulo que anotémos será siempre haciendonos la siguiente pregunta ¿cuanto tiene que rotar el contenedor desde la sección I para llegar a la sección que sea...?
Pues la parte más compleja, ya la tenemos lista!
ahora a programar que en este caso es super sencillo, en este caso.
4) Generaremos, una capa con la botonera, os podeis currar la que querais...y finalmente la disposicion de las capas será asi de sencilla:

5) Abriremos el panel de Acciones (F9- Windows /ALT+F9 -Mac)
Lo primero que haremos será importar las clases, poniendo "*", las importamos todas.
import mx.transitions.*;
definirémos los botones como funcionesque contendrán tweens para que realicen las siguientes cosas:
A) posición X......desde la posición X desde donde se encuentre el contenedor (contenedor._x) hasta la posicion que le demos (en cada botón).
B) posición Y......desde la posición Y desde donde se encuentre el contenedor (contenedor._y) hasta la posicion que le demos (en cada botón).
C) Rotacion......desde el angulo que tenga el movie-clip "contenedor (contenedor._rotation) al ángulo que queramos.
definimos los tweens dentro de cada boton en extructura, quedará algo así.
btn1.onPress=function(){
los tweens
} ;
btn2.onPress=function(){
los tweens
} ;
btn3.onPress=function(){
los tweens
};
btn4.onPress=function(){
los tweens
};
btn5.onPress=function(){
los tweens
};
btn6.onPress=function(){
los tweens
};
Para el que no controle los "tween por programación", próximamente escribiré un post al completo hablando sobre ellos.
6) Básicamente la estructura, o idea de este recurso, esta aquí recogida, no obstante, para quien deseé, ampliar información, como con todos los recursos que ofrezco, facilito los archivos .fla para vuestro estudio.
MODELO SENCILLO: aquí
MODELO MÁS COMPLEJO: aquí
RECURSO OFRECIDO POR www.flashmania.es,
Elaborado por Juan Garcia - webmaster@4cuarenta.com Julio 2008
Saludos!





