External Images with dynamic corners

 

The goal is to show how to display external images from a server directory and to dynamically place 2 corners around.
A PHP script 'll be used to read the directory. For the rest, it 's basically a script and a good understanding of progamming is required. setInterval method 'll be used.

Remarks :
I did not burden to test images loading ( a sophisticated script 'd have to ) Otherwise, images stored in the directory have gotten same zize. Which simplify matters. In the following demo, click on stage to get next image. You could accelerate with a doubleclick.

⇒ animation ⇐

We gonna describe the differents stages right away.

Creating Objects

1 - Set up Movie size 640x480 (background color #000033). Frame Rate : 100.
Be sure in Export, Mask off-stage objects is toggled.

2 - We create a virtual button which size is equal to the stage size.
We'll see in the script how successive clicks allow next images to display.
First, create the external rectangle 640x480 fully transparent. Anchor point : Top Left. Name it as mentioned.
Watch out carefully the next images :

transform   hot spot

3 - Draw a vertical line as shown hereafter :

transform   target

and another one :

transform   target

4 - Draw an horizontal line as shown hereafter :

transform   target

and another one :

transform   target

5 - You gonna draw upper corner. It's made with a colored external rectangle and an internal one (same color as background)
First external rectangle :

coin haut   

then internal rectangle (background color #000033)

coin haut   

Group the two ones. Name it CoinH. Target toggled.

6 - Then, draw the lower corner. First external rectangle :

coin haut   

then internal rectangle (background color #000033)

coin haut   

Group the two ones. Name it CoinB. Target toggled.

7 - Insert a sprite named Conteneur. It'll be used as a container for images.

PHP Script

Warning :
This example 'll use a PHP script (server side).
Then, to test your creation, you 'll need :
- either an Apache web server set on your computer ( with PHP installed )
- either put your files on your web directory , provide that your host allows PHP scripting.

With your favourite text editor, enter the following script :

Save as readir.php. You'll need it on the server.

Explanations :
We scan the directory /imageflash. While there are files in this directory, we 'll get width and height of images but, at end, we 'll only get the lowest ones.
( Anyway, that doesn't matter right here, all images are same )
The content of variables nb_total_image , largeur_min_image , hauteur_min_image , fini 'll be read by SwishMax script.

SwishMax Scripts

First main script in Scene_1

Script of virtual button b_virt :

on (press)
{ (compteur%2 == 0) ? go2() : go1(); }

If rest of 'compteur' divide by 2 is equal to 0 ( so compteur is even ) then runs go2 ( corners 'll back off ).
As compteur increases, next time rest 'll be équal to 1 and go1 'll run so corners 'll move around image.

A better hint :
In the previous code, an overflow of variable compteur could occur after a very high number of clicks. ( In practice no!)
For purists, we get a workaround :
- Declare compteur as boolean.
- Set up compteur=false;
- Replace compteur++; and compteur--; with compteur= ~compteur;
(i.e. complement to 1)

At last, for virtual button, replace code with

on (press) { if (compteur) go2(); else go1(); }

An advantage using setInterval is that we can accelarate process with successive clicks.

It's up to you to adapt the scripts to fit with different sizes of images but it'd be a tough work. Good luck.

 


Si vous aimez le site

 

Select a language if you need :


Page chargée en 0.004 sec.

Dernière Modification : Mer 25 Janvier 2017 8:56
Copyright © 1999-2017 Jean-Paul Molina Tous droits réservés.

to Google