últimos mensajes de: Kasswed

3. Diseñando el proyecto

[/size]

Una vez creado el proyecto podemos empezar con su diseño. Tenemos muchas herramientas, las cuales voy a explicar detalladamente. Pero lo primero es darle color al fondo.

Para comenzar a darle estilo a nuestro background, hacemos Doble Click sobre él, o Click derecho --> Properties. O simplemente trabajamos en el menú de la izquierda, que es más cómodo:

Bien, comencemos:

Name: Es el nombre de la página. Conviene poner un nombre sugerente, ya que si trabajamos con varias páginas al mismo tiempo (explicado en el punto 4) nos será más fácil al poner enlaces, identificar las páginas etc.
Background Style: Podremos elegir entre Solid, Gradient e Image. Solid será un fondo sólido, de un color; Gradient un fondo con degradado, es decir, mezcla entre dos colores; e Image que servirá para poner una imagen como fondo. Bacground image servirá para indicar la ruta de la imagen que queramos poner de fondo.
Background image: Aquí indicamos la ruta de la imagen (si es que hemos puesto una imagen como fondo) en la que se encontrará la imagen de fondo. Para buscarla con un navegador pinchamos en el botón de los tres puntos.
Imagen Style: Tenemos tres opciones: Fit to page, que sirve para ajustar la imagen background a la página; Tile para mostrar el background en forma de mosaico (la imagen background se repite); y Actual Size en la que la imagen de fondo no cambia de tamaño y se muestra en el background tal y como es sin ninguna variación.
Background Color: Si no hemos puesto una imagen de fondo, y hemos puesto un Background Style de tipo Solid este será el color de fondo de nuestra página. Hacemos click en la flechita de la derecha para seleccionar un color de la lista, también podemos personalizar el color pinchando en More Colors.
Gradient Color: Si hemos seleccionado en Background Style el tipo Gradient este será el color de nuestro degradado. Hacemos click en la flechita de la derecha para seleccionar un color de la lista, también podemos personalizar el color pinchando en More Colors.
Transition: Estos son los tres estilos que nos encontramos al cliquear en un Botón (los botones y todas sus funciones están explicados en el punto 4). Si elegimos None al clickear en el botón no habrá ningún efecto; si elegimos Disolve al clickear en el botón, éste comenzará a "disolverse" hasta ir al enlace del botón; si elegimos Side la página que vaya detrás del enlace aparecerá luego desde un márgen; si elegimos Wide la información de nuestra página irá desapareciendo hasta mostrar el contenido del enlace del botón. Para ver mejor esto, lo mejor es hacer por ti mismo.
Transition Settings: Según hayamos escogido en lo anterior (Transition) aquí tenemos diversas opciones. Para acceder a ellas basta con clickear en los tres puntos.
Inherit Background: Si tenemos varias páginas en nuestro proyecto podemos poner el background de otra página del mismo proyecto en la actual página.
Inherit Object: Si tenemos varias páginas en nuestro proyecto podemos poner en la actual páginas objetos, como textos, imágenes etc, de otras páginas del mismo proyecto. Posteriormente se explica cómo insertar más de una página en un mismo proyecto.

En el siguiente submenú (Actions) podremos insertar acciones gracias a Basic. Tenemos un asistente que nos puede ayudar en la tarea. No me meteré mucho más en este tema.

Ahora investigaremos la barra de herramientas:

: New Button Object; al clickear sobre esta opción nos dirá qué tipo de botón queremos crear, y las diversas opciones. Los botones y sus acciones, opciones etc están explicadas en el punto 4.

: New Label Object; sirve para crear etiquetas de texto. Tenemos diferentes opciones las cuales voy a explicar detalladamente:

Object:

Name: Es el nombre de la etiqueta. Conviene poner, al igual que en el nombre de la página, un nombre sugerente, por si trabajamos con muchas etiqeutas hacernos la vida más fácil.
Text: El texto que tendrá nuestra etiqueta.
Font: Podemos elegir diversas opciones para nuestra fuente: negrita, subrayado, tachado, el tamaño, la familia de la fuente etc Lo podremos cambiar dándole a los tres puntos.
Fonf Family: La familia de nuestra fuente; la podemos cambiar tanto en esta opción como en la anterior (Font).
Font Size: El tamaño de nuestra fuente; la podemos cambiar tanto en esta opción como en Font.
Font Bold: Esta opción te pregunta si la quieres negrita o no. Si marcas False no será negrita la fuente, si marcas True si. Esto lo podemos cambiar en la copión Font también.
Font Italic: Esta opción te pregunta si la quieres cursiva o no. Si marcas False no será negrita la fuente, si marcas True si. Esto lo podemos cambiar en la copión Font al igual que antes.
Alignment: Alineación; Right es alinear a la derecha, Left alinear a la izquierda y Center centrar el texto.
Orientation: Para voltear nuestro texto.

Colors:

Normal: El color de la etiqueta.
HighLight: El color de la etiqueta al pasar el puntero sobre ella cuando ya tengamos construído nuestro proyecto (explicado en el punto 6).
Click: Como su nombre indica, el color de la etiqeuta al hacer click sobre ella.
Disabled: Si nuestra etiqueta está deshabilitada, este será el color con la que se mostrará.

Attributes:

Tool Tip Text: Aquí podemos escribir un texto que aparecerá cuando dejemos el mouse sobre el objecto.
Enabled: Aquí es donde podemos habilitar (True) o deshabilitar (False) nuestra etiqueta.
Visible: Para indicar si la queremos visible (True) o invisible (False).
Cursor: Aquí indicamos el cursor que queremos que aparezca cuando pasemos por encima de nuestra etiqueta.

Position:

Left: Indicamos la posición horizontalmente.
Top: Indicamos la posición verticalmente.
Width: El ancho de nuestra etiqueta.
Height: El alto de nuestra etiqueta.

Sounds:

HightLight Sound: Un sonido al pasar el mouse. Si elegimos Standard el sonido será algo así como un "Click!" si elegimos Custom insertaremos nosotros el propio sonido.
HightLight File: Si hemos elegido Custom en la opción anterior es aquí donde debemos elegir la ruta de nuestro sonido. El sonido tiene que estar en formato OGG.
Click Sound: El sonido que saldrá al clickear sobre nuestra etiqueta. Las opciones son las mismas que en HightLight Sound.
Click File: Si hemos elegido Custom en Click Sound, aquí podemos elegir la ruta de nuestro sonido. El formato ha de ser OGG.

Actions:

Al igual que los botones, las etiquetas pueden tener acciones. Esto se explica en el capítulo cuatro de este manual.

: New Paragrahp Object; crea un cuadrito de texto. Sirve para poner licencias, poner notas, etc etc. Sus opciones son las mismas que en las etiquetas salvo que tenemos unas opciones más:

ScroolBars

ScrollBar Style: Aquí elegimos el estilo de nuestro scroolbar.
Vertical: Indicamos si queremos un ScroolBar vertical (On) o no (Off).
Horizontal: Indicamos si queremos un ScroolBar gorizontal (On) o no (Off).

: New Image Object; para insertar una imagen en nuestra página. Al insertarla aparecerán sus opciones a la izquierda, son las mismas que en las de las etiquetas y ScroolBars salvo en el submenú Object:

Name: El nombre de nuestro objecto imagen. Conviene poner un nombre sugerente, por si trabajamos ccon muchas imágenes hacernos la vida más fácil.
Image File: La ruta de la imagen. Podemos modificarla clickeando en los tres puntitos.
Use Transparent Color: Para usar los colores en modo transparencia. Si ponemos False esta opción estará deshabilitada, si pone,os True habilitada.
Transparent Color: El color que usamos en la transparencia si hemos marcado la opción de Use Transparent Color. Podemos añadir colores personalizados clickeando en More colors... .
Transparent Tolerance: El nivel (o tolerancia) de nuestra transparencia, si es que hemos marcado la opción de Use Transparent Color.
Opacity: La opacidad de nuestra imagen.
HitTest: Otro efecto para nuestra imagen. Podremos elegir entre Standard y Alpha.

: New Video Object; Con esto podemos insertar un vídeo en nuestra página de proyecto. Hay diferentes opciones las cuales son:

Object:

Name: Es el nombre de nuestro objeto de vídeo. Conviene poner un nombre sugerente por si trabajamos con más de un vídeo hacernos la vida más fácil.
Video File: La ruta de nuestro vídeo. Podemos elegir formatos AVI, MPEG, MPG etc.
Stage Color: El color inicial del vídeo. O el color de líneas (horizontales o verticales) resultante de agrandar el cuadro del vídeo.
Video Scaling Mode: Tenemos dos opciones: Stretch con la cual el vídeo se ajusta al cuadro del vídeo, hay que tener cuidado si marcamos esta opción porque podemos deformar el vídeo; y Maintain Aspect con el cual el vídeo no varía de tamaño proporcionalmente, y se mantiene el aspecto original.

Control Panel:

Control Style: Elegimos el estilo de nuestros botones de reproducción . Tenemos varios estilos para elegir.
Time: En el cuadro de reproducción, en la esquina derecha de abajo es donde haremos los cambios con esta opción de tiempo. Si ponemos None el tiempo del vídeo no aparecerá; si ponemos Elapsed el progreso de la duración del vídeo; si ponemos Length el tiempo del vídeo aparecerá como la duración total del vídeo; y si ponemos Both aparecerá el tiempo de transcurso del vídeo seguido del tiempo total del vídeo.
Panel Control: Elegimos el color del panel de reproducción. Podemos personalizar nuestro color clickeando sobre More colors... .
Text Color: Elegimos el color del texto del cuadro de reproducción (como por ejemplo, el color del tiempo). Podemos personalizar nuestro color clickeando sobre More colors... .
Control Buttons: Si elegimos False los botones de reproducción se deshabilitarán, y si elegimos True los botones de reproducción se habilitarán.
Slider: Si elegimos False la barra de transcurso del vídeo se deshabilitará; y si elegimos True se habilitará.

Special:

SutoStart: Indicamos si queremos que cuando el autorun se ejecute el vídeo se reproduzca automáticamente marcando la casilla True; si marcamos False el vídeo no se reproducirá automáticamente.
Loop: Elegimos si queremos que el vídeo se repita al finalizar marcando True; o que no se repita al finalizar marcando False.
Border: Elegimos si queremos un borde negro para el vídeo marcando la opción True; en caso contrario marcaremos False.

Object Mask:

Apply Window Mask: Aplicar una máscara para la reproducción. Si marcamos True la aplicamos, y si marcamos False la deshabilitamos.
Fit To Object: Ajustar la máscara al cuadrado de reproducción. Conviene marcar True si hemos marcado en Apply Window Mask True para no deformar la máscara.
Mask File: El archivo de la máscara. Lo podemos seleccionar clickeando en los tres puntitos.

En cuanto a las demás opciones, no han sido nombradas ni explicadas porque son iguales que en las etiquetas, imágenes etc.

: New Flash Object; Con esta opción podemos insertar un flash SWF en nuestro proyecto. Al insertarlo vemos diferentes opciones:

Object:

Name: Es el nombre de nuestro objecto flash. Conviene poner un nombre sugerente por si trabajamos con más de un objecto flash.
Flash File: La ruta de nuestro flash. Podemos modificarla clickeando en los tres puntitos.
Alignment: El alineamiento de nuestro flash, tenemos varias opciones: Default es alinear el Flash según su posición original; Top alinearlo arriba; Left alinearlo a la izquierda; Bottom hacerlo un botón; Right alinearlo a la derecha; Top Left alinearlo arriba a la izquierda; Top Right alinearlo arriba a la derecha; Bottom Left alinearlo como botón a la izquierda; y Bottom Right alinearlo como botón a la derecha.
Context Menu: Si marcamos Standard el menú que aparecerá cuando hagamos click derecho en nuestro autorun será un menú standard de Flash. Si marcamos Full el menú será un menú más completo.
Quality: Elegimos la calidad del Flash.
Flash Scaling Mode: Si marcamos Show All el flash mantendrá un tamaño proporcional; si marcamos No Border el flash podrá escapar a los bordes del objecto; y si marcamos Exact Fit podremos modificar el tamaño sin proporcionalidades.
Override Background: El fondo del flash lo podremos elegir si marcamos True; si marcamos False será negro.
Bacground Color: Si hemos marcado como True la opción Override Background Color aquí podremos elegir el color de fondo de nuestro flash.

: New Web Object; con esto podemos insertar objetos qcon enlaces a páginas webs. Tenemos dos opciones diferentes:

Name: Es el nombre del objecto web, y conviene, como siempre, poner un nombre sugerente por si trabajamos con más de uno no liarnos.
URL: Es la dirección que se cargará en el objecto.

: New hotspot object; Crea un botón transparente con el cual podemos realizar acciones. Las acciones se explican en el punto cuatro de este manual.

: New input object; Sirve para crear un cuadro u objecto en el cual podemos escribir una vez creado y construído nuestro proyecto. Sus opciones son iguales a las de las etiquetas de texto, salvo un par de singularidades:

Options:

Multiline Enabled: Indicamos si queremos que al escribir podamos hacer más de una línea; si marcamos True lo habilitamos, si marcamos False lo dehabilitamos.
Vertical ScrollBar: Si hemos marcado la opción anterior como True ahora podemos elegir si queremos el ScrollBar vertical marcando True o no lo queremos, marcando False.
Horizontal ScrollBar: Si hemos marcado la opción anterior como True ahora podemos elegir si queremos el ScrollBar horizontal marcando True o no lo queremos, marcando False.
Input Style: Decidimos si queremos que nuestro objecto input de escritura sea Standard, para poner un Password o si queremos un texto fijo seleccionando Input Mask.
Input Mask: Si hemos seleccionado en Input Style la opción Input Mask es aquí donde hemos de escribir el texto máscara. Esto sirve para hacer plantillas predeterminadas. Si por ejemplo queremos que en el input se escriban números de teléfono (en España son 9 dígitos, los tres primeros son el prefijo) pondríamos lo siguiente: ### ## ## ##. Donde cada almohadilla es un número. Y si construímos el proyecto veremos que no nos deja poner caracteres, sólo números. Si queremos que se pongan caracteres usaremos '?'. Por ejemplo, queremos crear un input que recoja un DNI, haremos: ######## ?. Y el usuario podrá escribir los 8 números correspondientes de su DNI y su letra. Si queremos que se escriba un carácter especial, como en el caso de su fecha de nacimiento (con la barra) tendremos que hacer uso de '\': ##\\##\\#### .
Place Holder Character: Esto sirve para mostrar en el input si hemos puesto Input Mask caracteres y números predeterminados. Si por ejemplo en el Input Mask hemos puesto ### ## ## ## para que se meta un número de teléfono, en el Place Holder Character metemos 9 y el teléfono saldría: 999 99 99 99 hasta que el usuario que ejecute el autorun lo sustituya.
Input Mask Return: Si elegimos Formatted se recogerán los datos que el usuario escribe; y si marcamos As Typed se recogerá todo.

: New List Box Object; Es un cuadro que permite crear una lista de subobjetos y relacionarla con Items, aunque los Items no se mostrarán y es opcional relacionarlos. Sirve para marcar opciones, por ejemplo, marcar una serie de canciones de un artista. Este punto lo veremos haciendo doble click sobre él, y abriendo sus propiedades, es el único que haciendo esto lo veremos todo más fácil, al contrario que en las demás herramientas:

Bien, estamos en Settings.

ListBox Items: Es donde añadiremos los items. Hacemos doble click en la fila 1, el cuadro correspondiente a Item Text. Ese será el nombre de nuestro primer Item, el cual aparecerá dentro del cuadro. Ahora a ese Item podemos relacionarle documento, fichero etc. Para ello hacemos click derecho sobre su correspondiente en Item Data y clickeamos en Insert File Reference y ahí podremos seleccionar el archivo que queremos relacionar con el Item.
Si queremos meter más de un Item simplemente repetimos el proceso en la fila 2, así sucesivamente.
Options: Tenemos las siguientes casillas para marcar: Multiple Selection, si marcamos esta casilla al seleccionar en nuestro List Box podremos marcar más de un Item a la vez; Sort ordena nuestros Ítems alfabéticamente; Vertical ScrollBar añade una barra vertical y Horizontal ScrollBar un ScrollBar horizontal. Luego tenemos Font... donde podremos selccionar la fuente.
Special: Tenemos Background, que es el color del fondo de nuestro List Box; Text que es el color del texto de nuestro List Box; y Border Mode en el cual tenemos: None, sin bordes; Flat, una línea delgada alrededor del cuadradito sin acaparar el ScrollBar; y Sunken, un borde alrededor de todo el List Box, de dos líneas.

Ahora aceptamos y cerramos la ventana de propiedades del List Box, y nos fijamos que el menú de la izquierda las siguientes opciones son las mismas que las de etiquetas, vídeos etc. Así que ya sabemos configurarlas.

: New ComboBox Object; Igual que List Box, con la única peculiaridad de que en este hay una flechita para elegir nuestro Ítem, y también podemos escribir en él. Podemos configurar sus opciones en sus propiedades, o bien en el menú de la izquierda.

Style: Tenemos dos opciones: DropDown list con el cual los Ítems aparecerán clickeando en la flechita; y DropDown edit que sirve para editar los propios Ítems.
Options: Sort sirve para clasificar alfabéticamente los Ítems. Lines to display in dropdown es la opción que nos permite decidir el número de líneas que queremos que muestre el ComboBox.Con Font seleccionamos la fuente de nuestro ComboBox.

Lo demás es igual que los menús anteriores, por lo tanto ya sabemos configurarlo.

: New Progress Object; Con esta herramienta podemos crear fácilmente barras de progreso totalmente personalizables. Sus menús son:

Object

Las primeras 7 opciones hasta Orientation ya las sabemos configurar.

Orientation: Aquí elegimos la orientación del progreso. SI las barritas de dentro de la barra progresarán verticalmente (Vertical) u horizontalmente (Horizontal).
Style: Elegimos el estilo de la barra. Bars será con pequeñas barritas dentro y Smooth será todo sólido, sin separaciones.
XP Style: Si marcamos True tendremos la barra al estilo XP, si marcamos False no.

Colors

Text Color: Color del text, si es que ponemos texto. El texto se mete en la opción Text de Object.
Background Color: El color de fondo.
Bar Color: El color de las barras de progreso.

Range

Minimium: El valor mínimo de nuestra barra de progreso.
Maximium: El valor máximo de nuestra barra de progreso.
Step: El valor que se resta al máximo cada vez que la barra de progreso progresa.

En cuanto a las demás opciones ya sabemos configurarlas.

: New Tree Object; con esto podemos crear un árbol de opciones, listas etc. Muy útil cuando queremos hcacer un menú muy amplio, por ejemplo. Sus diferentes opciones son:

Object:

Name: El nombre del objecto. Como siempre hay que poner un nombre sugerente, por si tenemos muchos objetos en un mismo proyecto.
Items: Aquí vamos a añadir los ítems de nuestro objeto. Hacemos click en los tres puntitos y veremos:

Lo primero que tenemos que hacer hacer doble click donde pone Item 1 y desplegará un menú así:

Tenemos que ir configurando opciones:
- Item Text: Es el nombre del ítem.
- Item Data: Los datos que contendrá el ítem; esto se mantiene oculto, y sólo sirve para relacionar el ítem con un dato.
- Image Index: Este número debemos dejarlo en 0 si queremos que la imágen asociada al ítem (que se explicará más adelante) aparezca justo cuando se muestre el Tree Object, o marcamos un número si queremos que aparezca cuando pulsemos en el ítem. No hay que usar un número mayor de 1.
- Selected Image Index: Seleccionamos 0 si queremos que muestre la imagen cuando esté seleccionado, y un número si queremos que no muestre la imagen. No debemos pone un número mayor de 1.
- Expand Item: Marcamos esto si queremos que al aparecer el objecto salga desplegado el ítem, y no lo marcamos si no queremos que salga desplegado.

Options:

Checkboxes: Ponemos True si queremos que en nuestro objecto al lado de cada ítem aparezca un cuadro para marcar, False si no lo queremos.
Has Lines: Ponemos True si queremos mostrar las líneas del árbol al desplegarlo (esas líneas discontínuas en forma de rama) y False si las queremos mantener ocultas.
Lines At Root: Ponemos True si queremos mostrar la línea principal del primer ítem, y False si la queremos oculta.
Has Buttons: Ponemos True si queremos mostrar las casillas de despliegue (es decir, las que contienen un + o un - según hayamos desplegado o no) y False si no las queremos mostrar.
Edit Labels: Ponemos True si quieres que el usuario pueda modificar el nombre del ítem, o False si no quieres que pueda ser renombrado. Para editar el nombre de un ítem una vez creado el autorun, haces click sobre él, y esperamos un par de seungod, y volvemos a hacer click; como hacemos al renombrar archivos o carpetas en Windows.
Always Show Selection: Marcamos True si queremos que cuando el usuario marque un ítem, y por ejemplo, abra una nueva ventana de Windows a parte, al volver siga teniendo el ítem marcado, y marcamos False si no queremos esto.
Border Mode: Elegimos None para que los ítems de nuestro árbol no tenga borde, Flat para que tenga un borde fino, y Sunken para que tenga un borde en relieve.
Read Order: Para leer el texto de izquierda a derecha selecciona Left To Right, pero si el idioma del proyecto es alguna lengua de lectura contraria, selecciona Right To Left. Si el proyecto no tiene una lengua de lectura de derecha a izquierda (como es el árabe, el hebreo etc) la opción no tendrá efecto.
Use Image: Elegimos True si queremos que a la izquierda (o derecha, si nuestro idioma es árabe, hebreo etc) de cada ítem apareza una imagen; False si no queremos imagen.
Image List: Seleccionamos la imagen a mostrar en caso de que en la opción Use Image hayamos marcado True. La imagen debe ser del tamaño 16*16, y tiene que estar en el formato BMP.
Image List Transparent Color: Seleccionamos el color que se mostrará si tenemos una imagen transparente, o con algún hueco transparente.

Respecto a las opciones que no he explicado es porque son las mismas que en objetos anteriores, y ya sabemos configurarlas.

: Object Properties; en realidad con esto no diseñamos el proyecto, pero es muy útil, por ejemplo, si queremos ver las propiedades de algún objecto, pinchamos sobre el objeto en el proyecto, y le damos a esta "lupa". También, si clickeamos en la flechita que tiene la derecha la lupa, podemos personalizar la barra de herramientas a nuestro gusto.

: Add Page: Clickeando aquí añadiremos una nueva pa´gina en nuestro objeto. Esto nos puede servir por si tenemos un menú en el proyecto, y al clickiear en nun botón del menú queremos que salga otro menú diferente, este menú nuevo lo pondremos en una nueva página. En el capítulo siguiente se explica el funcionamiento de los botones.

: Remove Page; eliminamos una página.

: Page Properties; accedemos a las propiedades de la página. Las propiedades a las que accederemos serán similares a las explicadas al comienzo de este capítulo.

: Preview; Para previsualizar el proyecto.

: Build; para construir el proyecto (expliicado detalladamente en el último capítulo).

: Help; para obtener ayuda. Estará toda en inglés.