I'm a newbie, i'm trying to understand how the JQuery works ans here are ma first tests. If it can help somebody…
Sorry, i won't have time enough to create a website like Yazo.net, the one i've done for the french for ActionScript between 1998 and now 
// ##### ATTENTION #####
The code in the creationComplete is executed before compositionReady
// ##### TARGET ELEMENTS - CIBLER DES ELEMENTS #####
!!! Always/Toujours begin with /commence par
sym.$("elementName") or sym.$("#identifiant") or sym.$(".class")
This is what you must use with methods - C'est ce que vows devez utilizer avec les méthodes
Exemples :
sym.$("titre").hide();
sym.$("titre").css({color:"red"});
- If you need to target a nested élément - Si vous avez besoin de cibler un élément intégré (dans un autre).
sym.getSymbol("bloc").$("titre").hide();
// ##### ACCESS TO THE STAGE - ACCEDER À LA SCENE #####
$("#Stage")
- To center the stage in the browser - Centrer la scene dans le navigateur (in/dans) CompositionReady
$("#Stage").css({margin:"auto"}); // AVEC UN S MAJUSCULE à STAGE
- Change the color - Changer la couleur de scène :
$("#Stage").css({backgroundColor:"orange"});
!!! : With a preload - Avec un preload
In the <head> tag - Dans la balise <head>
<style type="text/css">
<!--
#Stage {
height: 600px;
width: 400px;
margin-right: auto;
margin-left: auto;
}
-->
</style>
There also is this that you can use - Il y a aussi celle que vous pouvez utiliser :
$(document)
$(window)
Exemple : $(document).height();
// ##### WAY HOW TO WRITE A HANDLER - METHODE POUR ÉCRIRE UN GESTIONNAIRE D'ÉVENEMENT/ÉCOUTEUR #####
sym.$("visuel").hover(dessus,dehors);
function dessus() {
alert("dessus");
}
function dehors() {
alert("dehors");
}
// ##### TO ATTRIBUTE DATAS TO AN ELEMENT - ATTRIBUER DES VALEURS À UN ÉLÉMENT #####
sym.$("visuel").data({nom:"Tardiveau",prenom:"David",site:"VOXPedago" });
then/puis…
alert(sym.$("visuel").data("prenom"));
Remarque : The name of the property must be between quotas - Le nom de la propriété (prénom dans l'exemple ci-dessus) doit être saisi entre guillemets).
// ##### TO LOAD AN PNG OR JPG - CHARGER UNE IMAGE #####
!!!! YOU MUST TARGET A IMG ELEMENT AND NOT A DIV - VOUS DEVEZ CIBLER UN ELEMENT IMG ET NON UNE DIV
sym.$("cadre").attr({src:"paris.png"});
// ##### TO CONVERT A NUMBER IN A STRING AS A REAL NUMBER - CONVERTIR UN NOMBRE ENTRE GUILLEMETS EN NOMBRE #####
var total=0;
var age="23";
total = +age + 35
// ##### TWEENMAX #####
In the HTML document - Dans la page HTML
<script type="text/javascript" src="js/TweenMax.js"></script>
then/puis…
TweenMax.to(sym.$("maForme"), 3, {x:250,y:300, rotation:90, scale:0.5, opacity:0.5});
!!! : Use/Utiliser left and top to set the position/pour positionner
Et surtout pour la rotation : http://www.greensock.com/css3/#
// ##### TO DETECT THE KEYBOARD USE - DETECTER LA PRESSION SUR UNE TOUCHE DU CLAVIER #####
if (e.which == 37) {
sym.getSymbol("Personnage").play("MarcheGauche");
}
if (e.which == 39) {
sym.getSymbol("Personnage").play("MarcheDroite");
}
// ##### TO SET THE POSITION (X & Y) OF AN ELEMENT - REGLER LA POSITION D'UN ÉLEMENT #####
sym.$("forme").css({top:10,left:10});
sym.$("Ellipse").css("top",10).css("left",10);
…for the width and height - pour la larger et la hauteur
sym.$("c2").width(20).height(20);
moreover/par ailleurs…
sym.$("carre").css({left:20,top:20,width:200,backgroundColor:"purple" });
// ##### TO PLAY A SOUND - JOUER UN SON #####
var adobesound=new Audio();
adobesound.src="zic.mp3";
adobesound.volume=0.6;
adobesound.play();
// ##### TO CONTROL THE TIMELINE - POUR CONTROLER LA TIMELINE #####
- To stop the timeline - Pour bloquer la timeline (scénario)
sym.stop();
- To play the timeline - Pour jouer/lancer la timeline
sym.play();
!!! If you specify a value like this, stop(3000) or play(3000), that means you ask to move the playhead on the 3rd second - Si vous spécifiez une valeur comme celle-ci, stop(3000) ou play(3000), cella veut dire que vous demandez à placer la fête de lecture à la 3e second.
- To play reverse - Pour jouer dans l'autre sens
sym.playReverse();
- To get the position of the playhead - Pour obtenir la position de la tête de lecture
sym.getPosition()
// ##### TO ANIMATE AN ELEMENT - POUR ANIMER UN ELEMENT #####
sym.$("the moon").animate({opacity:0}, 500);
sym.$("themoon").animate({bottom:200}, 500);
Use/Utilisez 500 or "slow" or "fast" - 500 means/signifie 0,5 seconds. Use/Utilisez 3000 for/pour 3 second(e)s
To increase a value/Pour incrémenter une valeur
sym.$("Rond").animate({width:"+=20"},500);
- To n'est animations - Pour imbriquer des animations
sym.$("Rond2").fadeTo(2000,0.1).animate({left:10},500);
sym.$("Rond2").animate({left:10,opacity:0.2},500).animate({left:200,o pacity:1},500).animate({top:20},500);
// ##### TO GET AN ALERT WINDOW (FOR DEBUG) - POUR AFFICHER UNE FENÊTRE D'ALERTE (POUR LE DEBUG) #####
alert("what you want to show, with or without quotes");
// ##### TO CHANGE A TEXT - POUR CHANGER UN TEXTE #####
sym.$("Titre").text("ok");
sym.$("Titre").html("ok");
sym.$("Titre").value("ok");
// ##### DRAG AND DROP #####
!!! First of all - Avant-tout
- Put a folder named "js" in the folder where the index.html is - Placer un dossier intitulé "js" dans le dossier de la page index.html
- Add inside, this file - Ajouter à l'intérieur de ce dossier, ce fichier :
jquery-ui-1.9.2.custom.min.js
!!! In/Dans creationComplete :
$.getScript("js/jquery-ui-1.9.2.custom.min.js", scriptCharge);
function scriptCharge() {
sym.$("ball").draggable();
}
!!! It will be another number (1.9.2 because i wrote this post in august 2013) - Ce sera un autre nombre (1.9.2 car j'ai publié ce post en août 2013)
- Ton constraint - Pour contraindre :
Put an élément on the stage and give a name (ex. "zone") - Placer un élément sur la scène et le nommer. (Ex. : "zone").
The the code is/Le code est alors
var zone = sym.$("zone");
Just change/Chnagez simplement…
draggable ({containment:zone})
Or/ou (for a gris - pour une grille).
draggable({grid: [ 20, 20 ]})
// ##### TO LOAD A HTML FILE ON THE STAGE - POUR CHARGER UNE PAGE HTML SUR LA SCÈNE #####
sym.$("zoneTexte").load("demo_test.txt") tout simplement
- To check the download - Pour vérifier le chargement
sym.$("zoneTexte").load("demo_test.txt",gestionChargement);
function gestionChargement(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("External content loaded successfully!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
}
It's not my example, i copied it - Ce n'est pas mon exemple, je l'ai copié.
- Very interesting - Très intéressant !!!!!
ou aussi !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!
In the file named "demo_test.txt " - Dans le fichier intitulé "demo_test.txt"
<p id="1" >Ce texte qui se trouve ici et là ne peut pas manger sa propre hampe.</p>
<p id="2" >This is the text</p>
<p id="3" >Este es texto</p>
then/ensuite
sym.$("preuve").load("demo_test.txt #2");
or/ou
var numero = 2;
sym.$("preuve").load("demo_test.txt #"+numero);
// ##### OTHER #####
The hide(), show(), fadeIn(), etc methods can have callBack - Les méthodes hide(), show(), fadeIn() peuvent avoir des fonctions callBack.
// Boucle et placement dynamique
var forme;
var chiffre;
for(var i=0;i<=5;i++) {
chiffre=100+(i*110);
forme = sym.createChildSymbol("Formes", "Stage").getSymbolElement();;
forme.css({position:"fixed",left:chiffre,top:20});
}