2 Replies Latest reply on Aug 15, 2013 1:56 PM by resdesign

    To help the newbies - Pour aider les novices

    David_Tardiveau

      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,opacity:1},500).anima te({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

       

                http://jqueryui.com/download/

       

      !!! 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});

      }