{"id":3508,"date":"2016-02-12T18:25:53","date_gmt":"2016-02-13T01:25:53","guid":{"rendered":"http:\/\/www.nathalielawhead.com\/candybox\/?p=3508"},"modified":"2016-02-12T18:25:53","modified_gmt":"2016-02-13T01:25:53","slug":"tutorial-making-a-frog-generator-with-adobe-animate-html5-createjs","status":"publish","type":"post","link":"http:\/\/www.nathalielawhead.com\/candybox\/tutorial-making-a-frog-generator-with-adobe-animate-html5-createjs","title":{"rendered":"Tutorial: Making a Frog Generator with Adobe Animate (HTML5 & CreateJS)"},"content":{"rendered":"

You can VIEW the end result here: http:\/\/frogs.alienmelon.com\/html5\/<\/a>
\nYou can DOWNLOAD the sourcefiles here: http:\/\/nathalielawhead.com\/sourcefiles\/Weird_Alien_Frogs\/<\/a><\/p>\n

\"\"<\/p>\n

This tutorial will walk you through using Animate to make a procedural frog generator. It will cover all the basics of using the HTML5 Canvas output, as well as timeline scripting for the functionality.<\/p>\n

For those that are interested I also have a tutorial for making a game with CreateJS + the canvas in Flash\/Animate here<\/a>.
\nIt’s a bit older, and some of the issues (and resulting workarounds) I mention there no longer apply. Although the tutorial itself is still fairly relevant.<\/p>\n

It’s also interesting to note that it’s easy to run into minor weird bugs or issues working with the canvas. I do frequently. While creating the tutorial I ran into one “hard to explain one”.
\nAlso, there are some things this doesn’t support that makes using this for games difficult. For example, at the moment InputText is not supported. Working with (fancier fontier) text can be very hard. Selectable text isn’t supported either. The filters (like glow, etc) aren’t supported… These are things that keep me up at night. Hoping… Waiting…
\nThen again, for a while .width & .height where not supported which made collision detection (and other things) hard. Now there’s getBounds() and getTransformedBounds(), and setBounds(), or object.nominalBounds.width. Good things come to those that wait… but you know… it’s good to keep in mind that there’s always a workaround.<\/p>\n

Moving on…<\/p>\n

This tutorial is based on my original frog generator<\/a>. The original was ActionScript based, but I ported it to HTML5 Canvas (createJS) so I can write a fun tutorial about generating frogs with something javascript! Yay!
\nI also figure a Javascript tutorial is probably more interesting to people.
\nI’m under the impression that ActionScript programmers do not need tutorials because they already know what they are doing.<\/p>\n

Also, on the note of frog generating tutorials, G.P. Lackey gave a pretty kick ass presentation where he built a frog generator with Construct 2. Video is here<\/a>. It’s also something you can follow along to make your own frog generator. His end result is playable here. http:\/\/mousefountain.itch.io\/fantastic-frogs-forever<\/a><\/p>\n

Ok. Let’s begin…<\/p>\n

—<\/p>\n

PAGE SETUP<\/strong><\/p>\n

Like I said… This will be using timeline scripting. Timeline scripting is usually looked down on, and controversial among self-respecting programmers. I’m neither of these things and think it’s one of the greatest things that ever happened. So I use timeline scripting.<\/p>\n

Add a top layer called “JS”. Keep this layer at the top, and only scripts go here.<\/p>\n

\"\"<\/p>\n

In the first frame add the following page setup:<\/p>\n

<\/p>\n

\n
\/\/PAGE SETUP\/\/<\/span>\r\n\r\nvar<\/span> page_body =<\/span> document<\/span>.getElementsByTagName("body"<\/span>)[0<\/span>];\r\npage_body.style.backgroundColor =<\/span> "black"<\/span>;\r\npage_body.style.overflow =<\/span> "hidden"<\/span>;\/\/hide scrollbars<\/span>\r\npage_body.style.position =<\/span> "fixed"<\/span>;\/\/no scroll. ever.<\/span>\r\n\/\/<\/span>\r\nvar<\/span> page_canvas =<\/span> document<\/span>.getElementsByTagName("canvas"<\/span>)[0<\/span>];\r\n\/\/these two variables are important<\/span>\r\nstageWidth =<\/span> page_canvas.width;\r\nstageHeight =<\/span> page_canvas.height;\r\n\/\/<\/span>\r\ndocument<\/span>.documentElement.style.cursor =<\/span> 'url("images\/CURSOR_FROG_3.gif"), auto'<\/span>;\r\n\/\/<\/span>\r\nfunction<\/span> onResize()\r\n{\r\n\tstage.width =<\/span> window<\/span>.innerWidth;\r\n\tstage.height =<\/span> window<\/span>.innerHeight;\r\n\tpage_canvas.style.height =<\/span> window<\/span>.innerHeight +<\/span> "px"<\/span>;\r\n\tpage_canvas.style.width =<\/span> window<\/span>.innerWidth +<\/span> "px"<\/span>;\r\n}\r\n\/\/<\/span>\r\nwindow<\/span>.onresize =<\/span> function<\/span>()\r\n{\r\n     onResize();\r\n}\r\n\/\/<\/span>\r\nonResize();\r\n<\/pre>\n<\/div>\n
Of course you could add this to the HTML page in a script tag, or in a separate js file, or however you want it. I add it like this because it’s convenient.<\/p>\n
Basically, it makes the canvas\/stage stretch to fit the window (so it’s sort of fullscreen). There are a lot of ways of sizing the canvas to fit the screen. You can also keep it proportionate, but I like it this way. However you prefer.<\/p>\n
It also changes the mouse cursor to Kermit, because Kermit is a pretty awesome frog. So this is fitting.<\/p>\n
—<\/p>\n
SOUNDS<\/strong><\/p>\n
Sounds that you want to play\/stop have to be loaded in first. As far as I know (and from last time I checked) linkage identifiers don’t work (loading in from the library).
\nI cover sounds very extensively in this tutorial: http:\/\/www.nathalielawhead.com\/candybox\/tutorial-building-a-game-with-flash-html5-canvas-createjs-haxatron-2000<\/a>
\nso there is no need to repeat myself.<\/p>\n
The code is as follows…<\/p>\n
<\/p>\n
\n
\/\/REFERENCES (GLOBAL)\/\/<\/span>\r\n\r\n_stage =<\/span> this<\/span>;\/\/stage<\/span>\r\n\/\/save width\/height<\/span>\r\n_stage.width =<\/span> 1366<\/span>;\r\n_stage.height =<\/span> 768<\/span>;\r\n\r\n\/\/AUDIO\/\/<\/span>\r\n\r\n\/\/http:\/\/createjs.com\/docs\/soundjs\/classes\/Sound.html<\/span>\r\nvar<\/span> assetsPath =<\/span> "sounds\/"<\/span>;\r\nvar<\/span> snd_manifest =<\/span> [\r\n\t{id:<\/span>"snd_title_start"<\/span>, src:<\/span>"AUD_START.mp3"<\/span>},\r\n\t{id:<\/span>"snd_title_credits"<\/span>, src:<\/span>"AUD_CREDITS.mp3"<\/span>},\r\n\t{id:<\/span>"snd_transition"<\/span>, src:<\/span>"AUD_TRANSITION_01.mp3"<\/span>},\r\n\t{id:<\/span>"snd_evnt01"<\/span>, src:<\/span>"AUD_EVNT01.mp3"<\/span>},\r\n\t{id:<\/span>"snd_evnt02"<\/span>, src:<\/span>"AUD_EVNT02.mp3"<\/span>},\r\n\t{id:<\/span>"snd_evnt03"<\/span>, src:<\/span>"AUD_EVNT03.mp3"<\/span>},\r\n\t{id:<\/span>"snd_evnt04"<\/span>, src:<\/span>"AUD_EVNT04.mp3"<\/span>},\r\n\t{id:<\/span>"snd_evnt05"<\/span>, src:<\/span>"AUD_EVNT05.mp3"<\/span>},\r\n\t{id:<\/span>"snd_mountains"<\/span>, src:<\/span>"AUD_SCENE_MOUNTAIN.mp3"<\/span>},\r\n\t{id:<\/span>"snd_stream"<\/span>, src:<\/span>"AUD_SCENE_STREAM.mp3"<\/span>},\r\n\t{id:<\/span>"snd_space"<\/span>, src:<\/span>"AUD_SCENE_SPACE.mp3"<\/span>},\r\n\t{id:<\/span>"snd_frog01"<\/span>, src:<\/span>"AUD_LOOP_FROG01.mp3"<\/span>},\r\n\t{id:<\/span>"snd_frog02"<\/span>, src:<\/span>"AUD_LOOP_FROG02.mp3"<\/span>},\r\n\t{id:<\/span>"snd_frog03"<\/span>, src:<\/span>"AUD_LOOP_FROG03.mp3"<\/span>},\r\n\t{id:<\/span>"snd_camera"<\/span>, src:<\/span>"AUD_CAMERASHUTTER01.mp3"<\/span>}\r\n];\r\n\t\r\nvar<\/span> queue =<\/span> new<\/span> createjs.LoadQueue(true<\/span>, assetsPath);\r\n\/\/See: http:\/\/www.createjs.com\/Docs\/SoundJS\/classes\/Sound.html#property_alternateExtensions<\/span>\r\ncreatejs.Sound.alternateExtensions =<\/span> ["mp3"<\/span>, "wav"<\/span>];\r\nqueue.installPlugin(createjs.Sound);\r\n\/\/load is complete, and the other to display the load progress<\/span>\r\nqueue.addEventListener("complete"<\/span>, handleComplete);\r\nqueue.addEventListener("progress"<\/span>,handleProgress);\r\n\/\/load manifest is to load multiple sounds\/a set of them<\/span>\r\nqueue.loadManifest(snd_manifest);\r\n\/\/to load an individual file:<\/span>\r\n\/\/queue.loadFile({id:"snd_title_start", src:"AUD_START.mp3"});<\/span>\r\n\t\r\nfunction<\/span> handleComplete(evt) {\r\n\tconsole.log("all sounds loaded."<\/span>);\r\n\tplaySound("snd_title_start"<\/span>);\r\n\t_stage.gotoAndStop("mainmenu"<\/span>);\r\n}\r\nfunction<\/span> handleProgress(evt) {\r\n\t\/\/console.log("Event Loading: " + (queue.progress.toFixed(2) * 100) + "%");<\/span>\r\n}\r\n\r\n\/\/manage playing and stopping of sounds<\/span>\r\n\/\/to play a sound pass it the string name<\/span>\r\nplaySound =<\/span> function<\/span>(name) {\r\n\treturn<\/span> createjs.Sound.play(name);\r\n}\r\nplaySoundLoop =<\/span> function<\/span>(name, loops){\r\n\treturn<\/span> createjs.Sound.play(name, {loop:<\/span>loops});\r\n};\r\n\/\/play a random sound from one of the arrays<\/span>\r\nplayArrSound =<\/span> function<\/span>(arr){\r\n\tvar<\/span> arr_element =<\/span> arr[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr.length)-<\/span>1<\/span>];\r\n\treturn<\/span> createjs.Sound.play(arr_element);\r\n}\r\nstopSound =<\/span> function<\/span>(name){\r\n\treturn<\/span> createjs.Sound.stop(name);\r\n}\r\nstopAllSounds =<\/span> function<\/span>(){\r\n\tcreatejs.Sound.stop();\r\n}\r\n\r\n\/\/sound arrays<\/span>\r\n\/\/for randomly playing a sound<\/span>\r\narr_snd_events =<\/span> ["snd_evnt01"<\/span>, "snd_evnt02"<\/span>, "snd_evnt03"<\/span>, "snd_evnt04"<\/span>, "snd_evnt05"<\/span>];\r\n\/\/frog 'singing'<\/span>\r\narr_frog_sound =<\/span> ["snd_frog01"<\/span>, "snd_frog02"<\/span>, "snd_frog03"<\/span>];\r\n\r\n\/\/various event functions (random sounds)<\/span>\r\n\/\/on key down, and other<\/span>\r\nplayEvntSound =<\/span> function<\/span>(){\r\n\tplayArrSound(arr_snd_events);\r\n}\r\n<\/pre>\n<\/div>\n
So you see they are queued, and there are two formats I offer (mp3 or wav).
\nThere are a bunch of functions for controlling audio. These should be pretty self-explanatory, and cover all cases.
\nTo play one you call the function and pass it the name (as a string).
\nSounds that I want to play at random are kept in an array, and the playArrSound<\/code> function handles that playback.<\/p>\n
Once loading is completed, we proceed to the “mainmenu” and play the Main Menu music (\"snd_title_start\"<\/code>)…<\/p>\n
—<\/p>\n
INPUT TEXT<\/strong><\/p>\n
Like I said, there are some things createjs (Animate’s HTML5 canvas output) doesn’t support that really starts to get hard if you’re making games. In this case input text is not supported.<\/p>\n
I mean, yes it sort of is, but not really. You have to add a DOM element<\/a> if you want real input text. I don’t like that. It gets messy really fast, especially if you want to use your own fonts.<\/p>\n
For the sake of this tutorial I’ll try to do something different while using what is supported.<\/p>\n
I’ll capture keypresses (document.onkeydown = event_keydown<\/code>) and +=<\/code> them to the dynamic text field. Some basic logic is there. It will allow for deleting, and adding new characters. This is enough for me.<\/p>\n
The name of the dynamic “input” text field is “txt_namefield<\/code>“.<\/p>\n
This is what we will use:<\/p>\n
<\/p>\n
\n
str_startmsg =<\/span> "START TYPING YOUR NAME"<\/span>;\r\nstr_name =<\/span> ""<\/span>;\/\/the frogname (yourname)<\/span>\r\n\r\n\/\/keyboard<\/span>\r\nfunction<\/span> setKeyboard(){\r\n\t\/\/<\/span>\r\n\tdocument<\/span>.onkeydown =<\/span> event_keydown;\r\n\t\/\/<\/span>\r\n};\r\n<\/pre>\n<\/div>\n
The actual event looks like this. The comments should be pretty self explanatory…<\/p>\n
<\/p>\n
\n
function<\/span> event_keydown(e){\r\n\tif<\/span>(!<\/span>e){ var<\/span> e =<\/span> window<\/span>.event; }\r\n\t\/\/get the charcdoe<\/span>\r\n\tvar<\/span> num_char =<\/span> e.keyCode;\r\n\tconsole.log(num_char);\r\n\t\/\/get the letter<\/span>\r\n\tvar<\/span> str_letter =<\/span> String<\/span>.fromCharCode(e.keyCode);\r\n\t\/\/regex to allow only for letters (no numbers or puncuation)<\/span>\r\n\tvar<\/span> regex_letters =<\/span> \/^[A-Za-z\\s]+$\/<\/span>; \/\/ \/^[A-Za-z\\s]*$\/;<\/span>\r\n\t\/\/clear text field if nothing entered yet<\/span>\r\n\tif<\/span>(_stage.txt_namefield.text ==<\/span> str_startmsg){\r\n\t\t_stage.txt_namefield.text =<\/span> ""<\/span>;\r\n\t}\r\n\t\/\/if "enter" is hit (same as selecting manually)<\/span>\r\n\tif<\/span>(num_char ==<\/span> 13<\/span> &&<\/span> _stage.txt_namefield.text.length ><\/span> 0<\/span> &&<\/span> _stage.txt_namefield.text !=<\/span> str_startmsg){\r\n\t\tmainmenu_refresh();\r\n\t}else<\/span> if<\/span>(num_char ==<\/span> 8<\/span> ||<\/span> num_char ==<\/span> 46<\/span>){\r\n\t\t\/\/if backspace or delete<\/span>\r\n\t\t\/\/trim off the last character<\/span>\r\n\t\t\/\/start with saving the contents of the text field into a string<\/span>\r\n\t\tvar<\/span> str_textfield =<\/span> _stage.txt_namefield.text;\r\n\t\t\/\/now trim it<\/span>\r\n\t\tstr_textfield =<\/span> str_textfield.substring(0<\/span>, str_textfield.length -<\/span> 1<\/span>);\r\n\t\t\/\/set the text field to the new value<\/span>\r\n\t\t_stage.txt_namefield.text =<\/span> str_textfield;\r\n\t}else<\/span> if<\/span>(_stage.txt_namefield.text.length <<\/span> 25<\/span> &&<\/span> str_letter.match(regex_letters)){\r\n\t\t\/\/if not backspace or delete<\/span>\r\n\t\t\/\/and if only letter (no numbers or punctuation)<\/span>\r\n\t\t\/\/and if under 25 characters long<\/span>\r\n\t\t\/\/populate text field with:<\/span>\r\n\t\t_stage.txt_namefield.text +=<\/span> str_letter;\r\n\t\tstr_yourname =<\/span> _stage.txt_namefield.text;\r\n\t};\r\n\t\/\/show or hide btn_refresh (if text is actually input, and not the default string)<\/span>\r\n\tif<\/span>(_stage.txt_namefield.text.length ><\/span> 0<\/span> &&<\/span> _stage.txt_namefield.text !=<\/span> str_startmsg){\r\n\t\t_stage.btn_refresh.visible =<\/span> true<\/span>;\r\n\t}else<\/span>{\r\n\t\t_stage.btn_refresh.visible =<\/span> false<\/span>;\r\n\t}\r\n\t\/\/play event sound (frog ribbit)<\/span>\r\n\tplayEvntSound();\r\n}\r\n<\/pre>\n<\/div>\n
The variables at the top get the keycode and the letter from that keycode.
\nThe regular expression makes sure you can only enter letters. Numbers and punctuation is not allowed. I apologize if you have a fancy name.
\nThe first condition is just so we can get rid of the \"START TYPING YOUR NAME\"<\/code> text. The only downside of this is if there is a person who is actually named “START TYPING YOUR NAME”, but I doubt it.
\nThe second condition takes care of text input. Enter key takes precedence (same as selecting the “start button” manually), then deleting and backspace, and then whatever is entered (with the condition of under 25 and regex_letters).
\nAlso make sure to show or hide the button that generates the frog. This button is what makes the magic happen. Alternatively you can just press ENTER to make the magic happen. All cases are covered.
\nPlay ribbit sound!<\/p>\n
Also, for those who are interested. A couple useful links for understanding js char codes and keys:
\nhttp:\/\/www.cambiaresearch.com\/articles\/15\/javascript-char-codes-key-codes<\/a>
\nhttp:\/\/www.quirksmode.org\/js\/keys.html<\/a><\/p>\n
That’s it!<\/p>\n
The biggest downside of this is that it will not work on mobile. If we where so inclined we could create an alternative for these users, but for the sake of simplicity we’ll leave that for later. Some other time.<\/p>\n
Minor issue here is that you can’t select (to edit) wherever you want in the text field. I mean, if you worked on it you could probably get it to work. It doesn’t really mater to me. It’s probably a good idea that they don’t put in long names anyway. :)<\/p>\n
—<\/p>\n
MAIN MENU<\/strong><\/p>\n
The “main menu” is really simple. It’s basically just the title with giant rotating lines (like light rays), to give it a little motion.<\/p>\n
There’s a credits screen. The visibility of it is set to false, unless you click the “credits” button to see it.
\nTo read more about buttons I suggest checking this out: http:\/\/www.createjs.com\/docs\/easeljs\/classes\/ButtonHelper.html<\/a>
\nYou may also find this helpful: http:\/\/www.createjs.com\/tutorials\/Mouse%20Interaction\/<\/a>
\nYou could use the ButtonHelper<\/code> Class to take care of over, out, etc… but (for convenience sake) I just “create new symbol” of type Button.<\/p>\n
Here you will also put in your name so it can be turned into a frog, and you can meet your frogself. I covered this functionality above.<\/p>\n
Also there are two transitions (on their own “Transitions”) layer. These provide a little “flashy” animation for transitioning to the next area (like game, or opening the credits screen). A small audio “hit” plays for the larger one.
\nThe “flashy” colors here are a series of frames. The playhead is sent to a random frame for the funky flashy static effect.<\/p>\n
Like so:<\/p>\n
<\/p>\n
\n
gotoAndStopRandom =<\/span> function<\/span>(clip){\r\n\tclip.gotoAndStop(Math<\/span>.ceil(Math<\/span>.random()*<\/span>clip.timeline.duration));\r\n};\r\ngotoAndPlayRandom =<\/span> function<\/span>(clip){\r\n\tclip.gotoAndPlay(Math<\/span>.ceil(Math<\/span>.random()*<\/span>clip.timeline.duration));\r\n};\r\n<\/pre>\n<\/div>\n
To play the transition you would call the following function<\/p>\n
<\/p>\n
\n
\/\/Transitions<\/span>\r\n\/\/play transitions   <\/span>\r\nplay_transition =<\/span> function<\/span>(clip){\r\n\t\/\/chan_title.stop();<\/span>\r\n\tclip.gotoAndPlay(2<\/span>);\r\n}\r\n<\/pre>\n<\/div>\n
There is one difficult thing working with the HTML5 Canvas Document you will encounter often… make sure to keep scope in mind when referencing things.
\nLocal scope isn’t implicit in HTML canvas timelines. You have to be explicit.<\/p>\n
For example JUST calling stop();<\/code> to stop your animation will not work because that’s the global scope (same as saying window.stop();<\/code>)
\nthis.stop();<\/code> will work. That’s the current timeline.<\/p>\n
It’s probably a good idea to save a reference to your “stage” by using something like (on a separate “JS” layer):<\/p>\n
_stage = this;\/\/stage<\/code><\/p>\n
Then always reference _stage.whatever<\/code> to get access to anything on the stage.<\/p>\n
You may already know this, but…<\/p>\n
If you want to make symbols (Buttons, MovieClips, Sprites) on your stage accessible to code be sure to always assign it a name in the Properties panel. Like so:<\/p>\n
\"\"<\/p>\n
Then to access it you can “_stage.mc_title...<\/code>”<\/p>\n
So, what we will have in the main menu is:<\/p>\n
<\/p>\n
\n
\/\/UNIVERAL (GLOBAL)\/\/<\/span>\r\n\r\n\/\/Timelines<\/span>\r\ngotoAndStopRandom =<\/span> function<\/span>(clip){\r\n\tclip.gotoAndStop(Math<\/span>.ceil(Math<\/span>.random()*<\/span>clip.timeline.duration));\r\n};\r\ngotoAndPlayRandom =<\/span> function<\/span>(clip){\r\n\tclip.gotoAndPlay(Math<\/span>.ceil(Math<\/span>.random()*<\/span>clip.timeline.duration));\r\n};\r\n\r\n\/\/Transitions<\/span>\r\n\/\/play transitions   <\/span>\r\nplay_transition =<\/span> function<\/span>(clip){\r\n\tstopAllSounds();\r\n\tclip.gotoAndPlay(2<\/span>);\r\n}\r\n\r\n\/\/MENU SETUP\/\/<\/span>\r\n\r\n\/\/strings<\/span>\r\n\r\nstr_startmsg =<\/span> "START TYPING YOUR NAME"<\/span>;\r\nstr_yourname =<\/span> ""<\/span>;\/\/your name before frogification<\/span>\r\nstr_name =<\/span> ""<\/span>;\/\/the name for frogification<\/span>\r\n<\/pre>\n<\/div>\n
These are the more “global” functions and setup. The strings you know from the textfield + keyboard input part.
\nThe transition function is important.<\/p>\n
Then there is:<\/p>\n
<\/p>\n
\n
\/\/width & height of things that are hard to get the width\/height for<\/span>\r\n\r\n_stage.txt_namefield.width =<\/span> 1146<\/span>;\r\n_stage.txt_namefield.height =<\/span> 42<\/span>;\r\n\r\n\/\/seting up clips<\/span>\r\n\r\nset_small_ribbon =<\/span> function<\/span>(){\r\n\t\/\/<\/span>\r\n\t_stage.mc_ribbon.gotoAndStop("small"<\/span>);\r\n\t_stage.mc_ribbon.x =<\/span> Math<\/span>.ceil(_stage.width\/<\/span>2<\/span>);\r\n\t_stage.txt_namefield.x =<\/span> (_stage.mc_ribbon.x-<\/span>_stage.mc_ribbon.nominalBounds.width\/<\/span>2<\/span>+<\/span>50<\/span>) +<\/span> _stage.txt_namefield.width\/<\/span>2<\/span>;\r\n}\r\n\r\nset_large_ribbon =<\/span> function<\/span>(){\r\n\t_stage.mc_ribbon.gotoAndStop("large"<\/span>);\r\n\t_stage.mc_ribbon.x =<\/span> Math<\/span>.ceil(_stage.width\/<\/span>2<\/span>);\r\n\t_stage.txt_namefield.x =<\/span> (_stage.mc_ribbon.x-<\/span>_stage.mc_ribbon.nominalBounds.width\/<\/span>2<\/span>+<\/span>50<\/span>) +<\/span> _stage.txt_namefield.width\/<\/span>2<\/span>;\r\n\t_stage.txt_namefield.y =<\/span> 518.9<\/span>;\r\n\t_stage.mc_ribbon.y =<\/span> 513.2<\/span>;\r\n\t_stage.mc_ribbon.x =<\/span> 682.85<\/span>;\r\n\t_stage.btn_refresh.x =<\/span> 1214<\/span>;\r\n\t_stage.btn_refresh.y =<\/span> 505<\/span>;\r\n}\r\n<\/pre>\n<\/div>\n
I “record” the width\/height of text fields because that’s sort of harder to get.
\nThe ribbons (that’s the backdrop to the text) gets moved up and down a lot. So that’s here too.
\nThe UI generally will get shuffled around a lot for all the different states. For example, when you take a picture of your frog, the UI changes to make that look nicer.<\/p>\n
After that we have our keyboard input portion (above), and then this final bit:<\/p>\n
<\/p>\n
\n
\/\/credits<\/span>\r\nfunction<\/span> event_credits_open(event){\r\n\tstopSound("snd_title_start"<\/span>);\r\n\tplaySound("snd_title_credits"<\/span>);\r\n\t\/\/<\/span>\r\n\tplay_transition(_stage.mc_transition_bottom);\r\n\tplay_transition(_stage.mc_transition_top);\r\n\t_stage.mc_credits.visible =<\/span> true<\/span>;\r\n}\r\nfunction<\/span> event_credits_close(event){\r\n\tstopSound("snd_title_credits"<\/span>);\r\n\tplaySound("snd_title_start"<\/span>);\r\n\t\/\/<\/span>\r\n\tplay_transition(_stage.mc_transition_bottom);\r\n\tplay_transition(_stage.mc_transition_top);\r\n\t_stage.mc_credits.visible =<\/span> false<\/span>;\r\n}\r\n\/\/credits (url)<\/span>\r\nfunction<\/span> event_credits_twitter(event){\r\n\twindow<\/span>.open("http:\/\/twitter.com\/alienmelon"<\/span>, "_blank"<\/span>);\r\n}\r\nfunction<\/span> event_credits_moreabout(event){\r\n\twindow<\/span>.open("http:\/\/www.allaboutfrogs.org\/weird\/weird.html"<\/span>, "_blank"<\/span>);\r\n}\r\n\r\n\/\/function for "refresh", enter key and refresh button use this<\/span>\r\nfunction<\/span> mainmenu_refresh(){\r\n\tevent_clearmenu();\r\n\tstopSound("snd_title_credits"<\/span>);\r\n\tstopSound("snd_title_start"<\/span>);\r\n\t\/\/<\/span>\r\n\tplay_transition(_stage.mc_transition_bottom);\r\n\tplay_transition(_stage.mc_transition_top);\r\n\t\/\/<\/span>\r\n\t_stage.gotoAndPlay("froggen"<\/span>);\r\n}\r\n\r\n\/\/go to the froggen screen (start)<\/span>\r\n\/\/clear everything, stop everything, and play the transition<\/span>\r\nfunction<\/span> event_mainmenu_refresh(event){\r\n\tmainmenu_refresh();\r\n}\r\n\r\n\/\/clear everything (all events)<\/span>\r\nfunction<\/span> event_clearmenu(){\r\n\t_stage.btn_credits.removeEventListener("click"<\/span>, event_credits_open);\r\n\t_stage.mc_credits.btn_close.removeEventListener("click"<\/span>, event_credits_close);\r\n\t_stage.mc_credits.btn_link01.removeEventListener("click"<\/span>, event_credits_twitter);\r\n\t_stage.mc_credits.btn_link02.removeEventListener("click"<\/span>, event_credits_moreabout);\r\n\t_stage.btn_refresh.removeEventListener("click"<\/span>, event_mainmenu_refresh);\r\n\t\/\/<\/span>\r\n\tdocument<\/span>.onkeydown =<\/span> null<\/span>;\r\n}\r\n \r\n\/\/add events<\/span>\r\nsetKeyboard();\r\n_stage.btn_credits.addEventListener("click"<\/span>, event_credits_open);\r\n_stage.mc_credits.btn_close.addEventListener("click"<\/span>, event_credits_close);\r\n_stage.mc_credits.btn_link01.addEventListener("click"<\/span>, event_credits_twitter);\r\n_stage.mc_credits.btn_link02.addEventListener("click"<\/span>, event_credits_moreabout);\r\n_stage.btn_refresh.addEventListener("click"<\/span>, event_mainmenu_refresh);\r\n\/\/setup clips<\/span>\r\nset_small_ribbon();\r\n_stage.txt_namefield.text =<\/span> str_startmsg;\r\n\/\/<\/span>\r\n_stage.mc_credits.visible =<\/span> false<\/span>;\r\n_stage.mc_ui_back.visible =<\/span> false<\/span>;\r\n_stage.btn_save.visible =<\/span> false<\/span>;\r\n_stage.btn_refresh.visible =<\/span> false<\/span>;\r\n<\/pre>\n<\/div>\n
These are the various button events, and menu setup.
\nThe comments should make this pretty self explanatory.<\/p>\n
Simple! That’s all there is to the menu.<\/p>\n
Now for the actual frog generator…<\/p>\n
—<\/p>\n
THE GENERATOR<\/strong><\/p>\n
We’ll begin with the frogification of the name entered.
\nThe idea of this generator is that you enter your name, and it generates a frog. This is your frogself. You get to know yourself if you where a frog.<\/p>\n
Make sure that “Multiframe bounds” is selected in the Publish Settings. That’s under the Advanced tab.<\/p>\n
\"\"<\/p>\n
Reason is probably given here: http:\/\/blog.createjs.com\/update-width-height-in-easeljs\/#comment-798<\/a>
\nYou can’t just check against .width or .height. You have to be more specific. In this case we’ll be doing a lot of mc_body.frameBounds[mc_body.currentFrame].height<\/code> or clip.getTransformedBounds().width<\/code> and the like… I’m very certain that there’s a better way of doing it. Sorry. This is how I did it.
\nTo make life easier it’s in a function that returns:<\/p>\n
<\/p>\n
\n
function<\/span> return_bounds(clip){\r\n\t\/\/return clip.frameBounds[clip.currentFrame]; \/\/you can do this<\/span>\r\n\treturn<\/span> clip.getTransformedBounds(); \/\/or this<\/span>\r\n}\r\n<\/pre>\n<\/div>\n
and then use it like so:<\/p>\n
return_bounds(mc_body).height<\/code> or return_bounds(mc_body).width<\/code><\/p>\n
You can read more about this here: http:\/\/blog.createjs.com\/update-width-height-in-easeljs\/<\/a><\/p>\n
For starters we will turn the name entered into a frog version, and provide a little description of the personality.
\nIt’s random, and takes place by splicing, slicing, and looping, and a bunch of arrays with tons of stuff randomly combined.<\/p>\n
The arrays…<\/p>\n
<\/p>\n
\n
\/\/description (about your frog)<\/span>\r\nvar<\/span> adj_aka =<\/span> ["The humans call you"<\/span>, "Also commonly known as"<\/span>, "Also known as"<\/span>, "Often referred to as"<\/span>, "Someone once called you"<\/span>];\r\n\r\nvar<\/span> adj_very =<\/span> ["very"<\/span>, "quite"<\/span>, "fully"<\/span>, "perfectly"<\/span>, "really"<\/span>, "thoroughly"<\/span>, "totally"<\/span>, "truly"<\/span>,"rather"<\/span>];\r\nvar<\/span> arr_personality =<\/span> ["an adventurous"<\/span>, "one "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" cool"<\/span>, "a kick-ass"<\/span>, "a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" small but formidable"<\/span>, "a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" formidable"<\/span>," a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" calm"<\/span>, "a composed"<\/span>, "a calm and "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" composed"<\/span>, "a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" rowdy, and unruly"<\/span>, "a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" great"<\/span>, "a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" busy"<\/span>, "a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" successful"<\/span>, "a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" fortunate"<\/span>, "an outstanding"<\/span>, "a strong and stout"<\/span>, "a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" stout"<\/span>, "a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" strong"<\/span>, "a frog ahead of its game at being a"<\/span>, "a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" lucky"<\/span>,"an all in all"<\/span>,"an extraordinary"<\/span>,"a notable"<\/span>,"an undefeated"<\/span>,"an undefeated frog at being a"<\/span>,"a reigning"<\/span>,"a champion"<\/span>,"a boss"<\/span>,"a choice"<\/span>,"a top-notch"<\/span>,"a world class"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" distinguished"<\/span>,"an outstanding"<\/span>,"a prime"<\/span>,"a superior"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" audacious"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" bold"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" courageous"<\/span>,"a risk-taker"<\/span>,"an enterprising"<\/span>,"a daredevil"<\/span>,"a critically acclaimed"<\/span>,"a distinguished frog at being a"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" distinguished"<\/span>,"an eminent"<\/span>,"an esteemed"<\/span>,"a famed"<\/span>,"a notable"<\/span>,"a reputable"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" loved"<\/span>,"a beloved"<\/span>,"an admired"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" popular"<\/span>,"an adventurous"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" audacious"<\/span>,"a gallant"<\/span>,"a gusty"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" heroic"<\/span>,"a resolute"<\/span>,"a spirited"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" stout"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" forward thinking"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" chivalrous"<\/span>,"a gritty"<\/span>,"an unblenching"<\/span>,"a formidable"<\/span>,"a redoubtable"<\/span>,"a daunted"<\/span>,"a frog aghast at all that is"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" alarmed"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" anxious"<\/span>,"a suspicious"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" timid"<\/span>,"an easily frightened"<\/span>,"a frog in awe at all that is"<\/span>,"a nervous"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" perplexed"<\/span>,"a perturbed"<\/span>,"an easily startled"<\/span>,"an artistic"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" creative"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" dramatic"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" musical"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" idealistic"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" harmonious"<\/span>,"a "<\/span>+<\/span>adj_very[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_very.length)-<\/span>1<\/span>]+<\/span>" rhythmical"<\/span>,"a sensitive"<\/span>,"a stylish"<\/span>,"a tasteful"<\/span>,"an extravagant"<\/span>,"an ample"<\/span>,"a decided"<\/span>,"a strong-minded"<\/span>,"a responsible"<\/span>,"an honest"<\/span>,"a positive"<\/span>,"an adaptable"<\/span>,"a self-driven"<\/span>,"a self-motivated"<\/span>,"a patient"<\/span>,"a kind"<\/span>,"an all around good"<\/span>];\r\n\/\/<\/span>\r\nvar<\/span> arr_01 =<\/span> [", and have so many of them"<\/span>, ", and have such a large family"<\/span>, ", and love your family"<\/span>, ", and love everything about everyone"<\/span>];\r\nvar<\/span> arr_02 =<\/span> [". You just escaped after being held captive in an aquarium for years"<\/span>, ". No one can capture you"<\/span>, ". It's so warm and titillating here, you love everyone"<\/span>];\r\nvar<\/span> arr_03 =<\/span> [". Your genus has settled all the difficult places"<\/span>, ". You're proud to be part of such a widespread species"<\/span>, ". You fear nothing, not even the dog"<\/span>];\r\nvar<\/span> arr_04 =<\/span> [", even if you're the last of your kind after a city grew over your natural habitat"<\/span>, ". You just know everything will work out, even if your natural habitat is disappearing"<\/span>, ". Your self esteem is a force to be reckoned with"<\/span>];\r\nvar<\/span> arr_05 =<\/span> [". If you where human you know you would rule the world as an ungainly frogtyrant"<\/span>, ". You have better things to do than to be boring"<\/span>, ". You have a punchline for every predator, even your mom"<\/span>];\r\nvar<\/span> arr_06 =<\/span> [". All frogs can count on you, you are the frogcount"<\/span>, ". You've waited days for that bug to crawl out of its hole"<\/span>, ". You can literally wait all winter for a ray of sunshine"<\/span>];\r\nvar<\/span> arr_07 =<\/span> ["... although everyone knows you're cold-blooded, duh"<\/span>, "... although frogs are cold-blooded, duh"<\/span>, ". If you had fur you would be a cuddle cat"<\/span>];\r\nvar<\/span> arr_08 =<\/span> [". Once you put your mind to something you never change it"<\/span>, ". Sometimes you like to sit in something that's too hot just to see how long you can do it"<\/span>, ". Sometimes you like to sit in hot water just to test yourself"<\/span>];\r\nvar<\/span> arr_09 =<\/span> [". You know what's good. That's good. Yes"<\/span>, ". You like to play it safe and that's smart"<\/span>, ". You rather do the eating than to be eaten"<\/span>];\r\nvar<\/span> arr_10 =<\/span> [". There's no climate too harsh for you"<\/span>, ". What some call climate change you call a nice challenge. Yes"<\/span>, ". Your genus evolves gracefully"<\/span>];\r\nvar<\/span> arr_11 =<\/span> [". You love to sing and keep everyone awake"<\/span>, ". You once kept an entire neighborhood awake with your musical talents"<\/span>, ". You like to sit in high places and make noise"<\/span>];\r\nvar<\/span> arr_12 =<\/span> [". You love the sound of your own croaks"<\/span>, ". You love to listen to the sounds you make"<\/span>, ". You're pretty certain that if you spoke english humans would call the sound of your voice poetry"<\/span>];\r\nvar<\/span> arr_13 =<\/span> [". You just escaped after being held captive in an aquarium for years"<\/span>, ". Nothing can stop you, not even that cat"<\/span>, ". You're never too old, especially with a face like that"<\/span>];\r\nvar<\/span> arr_14 =<\/span> [". You have all the answers to all the questions"<\/span>, ". If you where a human you would be the ungainly frogdictator of the world"<\/span>, ". You're pretty sure you're a smart frog no matter what the stinky humans say"<\/span>];\r\nvar<\/span> arr_15 =<\/span> [". You're not afraid to show your soft side, which is everywhere"<\/span>, ". You've got a squishy center and just as squishy skin"<\/span>, ". You're pretty soft, all over"<\/span>];\r\nvar<\/span> arr_16 =<\/span> [". You like to sit here and daydream for hours"<\/span>, ". You're a beautiful daydreamer. Actually, you're pretty sure you're dreaming right now"<\/span>, ". You've got all sorts of ideas about all sorts of frogs"<\/span>];\r\nvar<\/span> arr_17 =<\/span> [". Good looks like yours only happen once"<\/span>, ", like that one time... but you rather not talk about it"<\/span>, ". You could brag, but that would be rude"<\/span>];\r\nvar<\/span> arr_18 =<\/span> ["... in the vernacular. Everyone knows you're coldblooded"<\/span>, "... although frogs like you are coldblooded, but you appreciate the colloquialism"<\/span>, "... although your appreciate the colloquialism, frogs are coldblooded"<\/span>];\r\nvar<\/span> arr_19 =<\/span> [". There's so much to do and so little time"<\/span>, ". You're so happy to have evolved this way"<\/span>, "... amphibians are the best, even bester than reptiles"<\/span>];\r\nvar<\/span> arr_20 =<\/span> [". You pride yourself in being open-minded, but only in a manner of speaking"<\/span>, ". Although you're a small frog you're big on the inside"<\/span>, ". You keep growing. If you keep it up you'll be a frogbeast in no time"<\/span>];\r\nvar<\/span> arr_21 =<\/span> [". Your bonds last for life! That's how strong love is. YOUR love"<\/span>, ". Your bonds last a life-time, maybe two, or three"<\/span>, ". Once a frogfriend, always a frogfriend. It's what your frogdaddy taught you"<\/span>];\r\nvar<\/span> arr_22 =<\/span> ["... There's no need to brag, we're all frogs"<\/span>, ". You're pretty good at what you do, and that's being a frog. No need to brag"<\/span>, ". You know, you're just a small frog, and that's a pretty big deal, in a small way"<\/span>];\r\nvar<\/span> arr_23 =<\/span> [". Any frog can count on you to get the job done right"<\/span>, ". You can be counted on. You are a frog"<\/span>, ". You are a hardworking frogcitizen and anyone can count on that"<\/span>];\r\nvar<\/span> arr_24 =<\/span> [". You love to work hard and play harder"<\/span>, "... it's like they always say work hard and frog harder. That is not a pun. It's a frogsaying"<\/span>, ". Your ancestors came to this land with nothing and now populate everything"<\/span>];\r\nvar<\/span> arr_25 =<\/span> [". Your ability to find warm water is unrivaled"<\/span>, ". You understand your surroundings perfectly and that's why you eat so well"<\/span>, ". They call you the frogwhisperer because you're so frog"<\/span>];\r\nvar<\/span> arr_26 =<\/span> [". You're pretty sure that's a good thing"<\/span>, "... which is not bad for a frog"<\/span>, ". You've got class, and that's all a frog can ask... rhyme intended"<\/span>];\r\nvar<\/span> arr_27 =<\/span> [". You have so much offspring as a result"<\/span>, ". All the frogs love you and love to love you. So much love"<\/span>, ". You're a lovable amphibian and that is good"<\/span>];\r\nvar<\/span> arr_28 =<\/span> [". Everyone wants to be your neighbor"<\/span>, ". Everyone loves being near you. As a result it's a heavily populated area"<\/span>, ". You'll get around to it, but friends come first"<\/span>];\r\nvar<\/span> arr_29 =<\/span> [". Strong opinions are what keep this place running"<\/span>, ". You break up fights, but that's what frogfriends are for"<\/span>, "... all's good that frogs well, and frog is what you're all about"<\/span>];\r\nvar<\/span> arr_30 =<\/span> [". You'll get it done, no matter what"<\/span>, ". You'll move a mountain if you have to. Even if that means evolving into a bigger scarier species first"<\/span>, "... as a result you're constantly growing into god knows what"<\/span>];\r\nvar<\/span> arr_31 =<\/span> [". You've got a squishy center, and squishy surface. All around squishy"<\/span>, ". You have a strong feeling that squishy is good"<\/span>, ". You have a big heart... literally. That thing is HUGE"<\/span>];\r\nvar<\/span> arr_32 =<\/span> [". It's good to care! You're a frog"<\/span>, ". You throw yourself into anything 100%. You're a good jumper"<\/span>, ". You're a strong frog for all that you've been through"<\/span>];\r\nvar<\/span> arr_33 =<\/span> [". Everyone loves you and wants to love you"<\/span>, ". You swallowed a magnet once, and now everything chases you"<\/span>, "... ever since you swallowed that magnet everything seems drawn to you"<\/span>];\r\nvar<\/span> arr_34 =<\/span> [". You believe in the better good of frogs, they'll never catch you"<\/span>, ". Your best friend was used in a middle school dissection you try to stay positive to honor him"<\/span>, ". You escaped that aquarium and now intend to live life to the fullest"<\/span>];\r\nvar<\/span> arr_35 =<\/span> [". You always sound like you're laughing. It's because of a genetic defect, but that's ok"<\/span>, ". You can turn the darkest situations into a joke"<\/span>, ". You can see the humor in everything and everyone"<\/span>];\r\nvar<\/span> arr_36 =<\/span> [". You're a frog they can count on"<\/span>, ". You're blunt and that's a good thing, especially for a frog"<\/span>, ". They can count on your opinions. You are a frog"<\/span>];\r\nvar<\/span> arr_37 =<\/span> [". You enjoy the deeper conversations, but not too deep. You're not that great of a jumper"<\/span>, "... it's because of your big head. You can store lots of big ideas"<\/span>, ". There are so many things to talk about. You are a smart frog"<\/span>];\r\nvar<\/span> arr_38 =<\/span> [". You work hard and get frogthings done"<\/span>, ". There's always more frog that needs frogging and you frog hard"<\/span>, ". There are so many frogthings to get done"<\/span>]; \r\nvar<\/span> arr_39 =<\/span> [". You've got a goal and nofrog can stop you now"<\/span>, ". You can accomplish anything you put your froghead to"<\/span>, ". You're a hardworking frog, and good at it too"<\/span>];\r\nvar<\/span> arr_40 =<\/span> [". You've lived here a long time despite all the natural predators"<\/span>, ". You would rather eat than be eaten and that's why you're so fat"<\/span>, ". Despite all the natural predators you're growing quite old"<\/span>];\r\nvar<\/span> arr_41 =<\/span> [". You're hilarious when you get going"<\/span>, ". You take it easy and laugh a lot. This is good for a frog"<\/span>, ". Your sense of humor is not bad for a frog. It's impressive"<\/span>];\r\nvar<\/span> arr_42 =<\/span> ["... everyone can count on you"<\/span>, ". Every frog can count on you to be a frog"<\/span>, ". Every frog can count on you! You are a frog"<\/span>];\r\nvar<\/span> arr_43 =<\/span> [". You never lie even if that involves telling the truth"<\/span>, "... even if you have to tell the truth you'll never lie"<\/span>, ". You're a frog other frogs can count on to be a true frog"<\/span>];\r\nvar<\/span> arr_44 =<\/span> [". You dig your own holes, and catch your own meals"<\/span>, ". You catch your own food. No handouts"<\/span>, ". You dig your own holes, and even use tools"<\/span>];\r\nvar<\/span> arr_45 =<\/span> [". You come up with all sorts of applicable ideas"<\/span>, ". No one can catch you! You are a smart frog"<\/span>, ". They'll never catch you. You are a cunning frog"<\/span>];\r\nvar<\/span> arr_46 =<\/span> [". It's obvious from looking at your gooey surface"<\/span>, ". Everyone can tell from your gooey surface that you have a soft center"<\/span>, ". You have a soft center and even softer surface"<\/span>];\r\nvar<\/span> arr_47 =<\/span> [". You donate your bugs to the hungry"<\/span>, ". You regularly feed hungry fish your freshly caught butterflies"<\/span>, ". You like to help others, and help yourself in the process. This is good frogging"<\/span>];\r\nvar<\/span> arr_48 =<\/span> [". You are probably an alien but you live among the frogs"<\/span>, ". You don't think about yourself much, even if others think you're an alien"<\/span>, ". Sometimes you wonder if you're an alien, but you try not to think about yourself too much"<\/span>];\r\nvar<\/span> arr_49 =<\/span> [". You know what's up even when you don't know why just yet"<\/span>, ". You've got feelings. So many"<\/span>, ". You can understand the struggle of being a frog and help other frogs to frog better"<\/span>];\r\n\/\/<\/span>\r\nvar<\/span> arr_aboutyou =<\/span> ["great with the tadpoles"<\/span>+<\/span>arr_01[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_01.length)-<\/span>1<\/span>],"adventurous and energetic"<\/span> +<\/span> arr_02[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_02.length)-<\/span>1<\/span>],"pioneering and courageous"<\/span> +<\/span> arr_03[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_03.length)-<\/span>1<\/span>],"enthusiastic and confident"<\/span> +<\/span> arr_04[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_04.length)-<\/span>1<\/span>],"dynamic and quick witted"<\/span>+<\/span>arr_05[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_05.length)-<\/span>1<\/span>],"patient and reliable"<\/span> +<\/span> arr_06[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_06.length)-<\/span>1<\/span>],"warmhearted and loving"<\/span> +<\/span> arr_07[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_07.length)-<\/span>1<\/span>],"persistent and determined"<\/span> +<\/span> arr_08[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_08.length)-<\/span>1<\/span>],"placid and security loving"<\/span> +<\/span> arr_09[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_09.length)-<\/span>1<\/span>],"adaptable and versatile"<\/span> +<\/span> arr_10[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_10.length)-<\/span>1<\/span>],"communicative and witty"<\/span> +<\/span> arr_11[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_11.length)-<\/span>1<\/span>],"intellectual and eloquent"<\/span> +<\/span> arr_12[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_12.length)-<\/span>1<\/span>],"youthful and lively"<\/span> +<\/span> arr_13[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_13.length)-<\/span>1<\/span>],"cunning and inquisitive"<\/span> +<\/span> arr_14[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_14.length)-<\/span>1<\/span>],"emotional and loving"<\/span> +<\/span> arr_15[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_15.length)-<\/span>1<\/span>],"intuitive and imaginative"<\/span> +<\/span> arr_16[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_16.length)-<\/span>1<\/span>],"protective and sympathetic"<\/span> +<\/span> arr_17[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_17.length)-<\/span>1<\/span>],"generous and warmhearted"<\/span> +<\/span> arr_18[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_18.length)-<\/span>1<\/span>],"creative and enthusiastic"<\/span> +<\/span> arr_19[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_19.length)-<\/span>1<\/span>],"broad-minded and expansive"<\/span> +<\/span> arr_20[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_20.length)-<\/span>1<\/span>],"faithful and loving"<\/span> +<\/span> arr_21[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_21.length)-<\/span>1<\/span>],"modest and shy"<\/span> +<\/span> arr_22[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_22.length)-<\/span>1<\/span>],"meticulous and reliable"<\/span> +<\/span> arr_23[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_23.length)-<\/span>1<\/span>],"practical and diligent"<\/span> +<\/span> arr_24[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_24.length)-<\/span>1<\/span>],"intelligent and analytical"<\/span> +<\/span> arr_25[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_25.length)-<\/span>1<\/span>],"diplomatic and urbane"<\/span> +<\/span> arr_26[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_26.length)-<\/span>1<\/span>],"romantic and charming"<\/span> +<\/span> arr_27[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_27.length)-<\/span>1<\/span>],"easygoing and sociable"<\/span> +<\/span> arr_28[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_28.length)-<\/span>1<\/span>],"idealistic and peaceable"<\/span> +<\/span> arr_29[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_29.length)-<\/span>1<\/span>],"determined and forceful"<\/span> +<\/span> arr_30[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_30.length)-<\/span>1<\/span>],"emotional and intuitive"<\/span> +<\/span> arr_31[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_31.length)-<\/span>1<\/span>],"powerful and passionate"<\/span> +<\/span> arr_32[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_32.length)-<\/span>1<\/span>],"exciting and magnetic"<\/span> +<\/span> arr_33[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_33.length)-<\/span>1<\/span>],"optimistic and freedom-loving"<\/span> +<\/span> arr_34[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_34.length)-<\/span>1<\/span>],"jovial and good-humored"<\/span> +<\/span> arr_35[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_35.length)-<\/span>1<\/span>],"honest and straightforward"<\/span> +<\/span> arr_36[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_36.length)-<\/span>1<\/span>],"intellectual and philosophical"<\/span> +<\/span> arr_37[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_37.length)-<\/span>1<\/span>],"practical and prudent"<\/span> +<\/span> arr_38[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_38.length)-<\/span>1<\/span>],"ambitious and disciplined"<\/span> +<\/span> arr_39[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_39.length)-<\/span>1<\/span>],"patient and careful"<\/span> +<\/span> arr_40[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_40.length)-<\/span>1<\/span>], "humorous and reserved"<\/span> +<\/span> arr_41[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_41.length)-<\/span>1<\/span>],"friendly and frogitarian"<\/span> +<\/span> arr_42[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_42.length)-<\/span>1<\/span>], "honest and loyal"<\/span> +<\/span> arr_43[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_43.length)-<\/span>1<\/span>], "original and inventive"<\/span> +<\/span> arr_44[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_44.length)-<\/span>1<\/span>], "independent and intellectual"<\/span> +<\/span> arr_45[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_45.length)-<\/span>1<\/span>], "imaginative and sensitive"<\/span> +<\/span> arr_46[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_46.length)-<\/span>1<\/span>], "compassionate and kind"<\/span> +<\/span> arr_47[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_47.length)-<\/span>1<\/span>], "selfless and unworldly"<\/span> +<\/span> arr_48[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_48.length)-<\/span>1<\/span>], "intuitive and sympathetic"<\/span> +<\/span> arr_49[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_49.length)-<\/span>1<\/span>]];\r\nvar<\/span> arr_punctuation =<\/span> ["!"<\/span>, "."<\/span>];\r\n<\/pre>\n<\/div>\n
Ok, that’s a lot. This is the meat of the written content.<\/p>\n
Then we have the actual function that makes the frogification magic happen. It looks like this:<\/p>\n
<\/p>\n
\n
\/\/make the frog name<\/span>\r\n\/\/frogification of names. this is the future of naming conventions.<\/span>\r\nfunction<\/span> generate_frogname(){\r\n\t\/\/frog arrays<\/span>\r\n\tvar<\/span> arr_frogvariant =<\/span> ["Frog"<\/span>, "Froglet"<\/span>, "Toad"<\/span>, "Frog"<\/span>, "Tadpole"<\/span>, "Amphibian"<\/span>];\r\n\tvar<\/span> arr_frogplaces =<\/span> ["pond"<\/span>, "lake"<\/span>, "swamp"<\/span>, "marsh"<\/span>, "woods"<\/span>, "underbrush"<\/span>, "creek"<\/span>, "tree"<\/span>, "canopy"<\/span>, "forest"<\/span>, "woods"<\/span>, "waters"<\/span>, "stream"<\/span>, "brook"<\/span>];\r\n\tvar<\/span> arr_title =<\/span> ["duke"<\/span>,"marquis"<\/span>,"earl"<\/span>,"viscount"<\/span>,"baron"<\/span>,"baronet"<\/span>,"knight"<\/span>,"lord"<\/span>];\r\n\tvar<\/span> arr_akafrogs =<\/span> ["Abs"<\/span>, "Agnus"<\/span>, "Al-gea"<\/span>, "Amphibulus"<\/span>, "Scrubby"<\/span>, "Crusty"<\/span>, "Bouncer"<\/span>, "Bouncy"<\/span>, "Blinky"<\/span>, "Booboo the Bloatoad"<\/span>, "Bobo"<\/span>, "Booboo"<\/span>, "Bob"<\/span>, "Boo"<\/span>, "Boogy"<\/span>, "Bubba"<\/span>, "Bubble"<\/span>, "Buds"<\/span>, "Buddy"<\/span>, "Buggy"<\/span>, "Bumpy"<\/span>, "Chicky"<\/span>, "Chops"<\/span>, "Chubby"<\/span>, "Fats"<\/span>, "Fatso"<\/span>, "Chubber"<\/span>, "Flubber"<\/span>, "Chubbs"<\/span>, "Chunk"<\/span>, "Chunky"<\/span>, "Chunko"<\/span>, "Copper"<\/span>, "Conan"<\/span>, "Cool Frog"<\/span>, "Croaker"<\/span>, "Croaks"<\/span>, "Croaky"<\/span>, "Crunchy"<\/span>, "Cups"<\/span>, "Curmet"<\/span>, "Kermits"<\/span>, "Darty"<\/span>, "Dars"<\/span>, "Doc"<\/span>, "Dots"<\/span>, "Frogzilla"<\/span>, "Peppers"<\/span>, "Ducky"<\/span>, "Ducks"<\/span>, "Dumbell"<\/span>, "Dumpy"<\/span>, "Dumby"<\/span>, "Edgar"<\/span>, "Mimi"<\/span>, "Fatso"<\/span>, "Fatty"<\/span>, "Fatter Frog"<\/span>, "Fattest"<\/span>, "Fattest Frog"<\/span>, "Fatty Arbuckles"<\/span>, "Fearless Froglet"<\/span>, "Fergie"<\/span>, "Fibby"<\/span>, "Fiddles"<\/span>, "Fillmore"<\/span>, "Filbert"<\/span>, "Ferdinand"<\/span>, "Figaro"<\/span>, "Flibbit"<\/span>, "Flips"<\/span>, "Floatie"<\/span>, "Flubbers"<\/span>, "Francis"<\/span>, "Freaky Frog"<\/span>, "Freaky"<\/span>, "Froggens"<\/span>, "Froggins"<\/span>, "Froglestew"<\/span>, "Freckle"<\/span>, "Fugie"<\/span>, "Glossy"<\/span>, "Gobble"<\/span>, "Gobbles"<\/span>, "Gomez"<\/span>, "Gooey"<\/span>, "Gordon"<\/span>, "Gorf"<\/span>, "Gorf"<\/span>, "Gordito"<\/span>, "Greenie"<\/span>, "Gregan"<\/span>, "Grinner"<\/span>, "Grog"<\/span>, "Guacamole"<\/span>, "Guacky"<\/span>, "Gub-gub"<\/span>, "Gumball"<\/span>, "Gus"<\/span>, "Gus Gus"<\/span>, "Hogie"<\/span>, "Hoogie"<\/span>, "Hoogy"<\/span>, "Howie"<\/span>, "Hecktor"<\/span>, "Gerby"<\/span>, "Herby"<\/span>, "Hippyfrog"<\/span>, "Hopkins"<\/span>, "Hopper"<\/span>, "Hoppy"<\/span>, "Hoppity"<\/span>, "Hoppity-Hop"<\/span>, "Hop-Hop"<\/span>, "Hopps-alot"<\/span>, "Hopson"<\/span>, "Hopston"<\/span>, "Hot Frog"<\/span>, "Hot-Toad"<\/span>, "Hugo-a-go-go"<\/span>, "Hugo"<\/span>, "Ichabod"<\/span>, "Iggy"<\/span>, "Ivan"<\/span>, "Jabba"<\/span>, "Jabba the Jumpy"<\/span>, "Jumpy"<\/span>, "Jeremiah"<\/span>, "Jimmy da toad"<\/span>, "Joey"<\/span>, "Jorg"<\/span>, "Yurg"<\/span>, "Jumpiter"<\/span>, "Kermit"<\/span>, "Kermit Klein"<\/span>, "Ketchup"<\/span>, "Kilroy"<\/span>, "Kirby"<\/span>, "King Kirby"<\/span>, "Klack"<\/span>, "Kokomo"<\/span>, "Krebbit"<\/span>, "Kroppy"<\/span>, "Leaper"<\/span>, "Leapy"<\/span>, "Leafy"<\/span>, "Legs"<\/span>, "Leroy"<\/span>, "Little Guy"<\/span>, "Leggy"<\/span>, "Louie"<\/span>, "Lumpy"<\/span>, "Lumps"<\/span>, "Man-o Frog"<\/span>, "Marina"<\/span>, "Mark McGwire"<\/span>, "Max"<\/span>, "Maxter"<\/span>, "Mermin"<\/span>, "Merms"<\/span>, "Germs"<\/span>, "Mr.Croak"<\/span>, "Mr. Frog"<\/span>, "Mr. Fribble"<\/span>, "Mr. Skinny"<\/span>, "Mr. Mouth"<\/span>, "Mister Mac"<\/span>, "Mr. Red Bottom"<\/span>, "Mr. Moco"<\/span>, "Mog"<\/span>, "Moe Moe"<\/span>, "Munky"<\/span>, "Murdock"<\/span>, "Nanotoad"<\/span>, "Noodles"<\/span>, "Nozy"<\/span>, "Frogy-Wan"<\/span>, "Patches"<\/span>, "Peabody"<\/span>, "Peanut"<\/span>, "Peeps"<\/span>, "Squeeks"<\/span>, "Pekkle"<\/span>, "Pickles"<\/span>, "Pickle"<\/span>, "Floyd"<\/span>, "Pip"<\/span>, "Phyto-P"<\/span>, "Plop"<\/span>, "Plopps"<\/span>, "Po"<\/span>, "Poegy"<\/span>, "Pogo"<\/span>, "Pookee"<\/span>, "Crackers"<\/span>, "Popcorn"<\/span>, "Prince Soggy Bottom"<\/span>, "Puddles"<\/span>, "Pug Pug"<\/span>, "Punkins"<\/span>, "Pudgetta"<\/span>, "Quigley"<\/span>, "Quiggle"<\/span>, "Quibbit"<\/span>, "Quigleys"<\/span>, "Quiggles"<\/span>, "Giggles"<\/span>, "Quiglly"<\/span>, "Raisin"<\/span>, "Ruperts"<\/span>, "Crumbs"<\/span>, "Shamrockfrog"<\/span>, "Sir Croaks alot"<\/span>, "Skippy"<\/span>, "Skippydippy"<\/span>, "Skittles"<\/span>, "Slappy"<\/span>, "Slims"<\/span>, "Slimmy"<\/span>, "Slinky"<\/span>, "Slippy"<\/span>, "Slick"<\/span>, "Slub"<\/span>, "Sluggs"<\/span>, "Sluggo"<\/span>, "Soupy"<\/span>, "Smeaglet"<\/span>, "Smiles"<\/span>, "Smiley"<\/span>, "Springer"<\/span>, "Sprocket"<\/span>, "Sprog"<\/span>, "Sproing"<\/span>, "Spud"<\/span>, "Spuds"<\/span>, "Squiggly"<\/span>, "Squirt"<\/span>, "Sticky"<\/span>, "Stinky"<\/span>, "Stomper"<\/span>, "Stone Cold"<\/span>, "Stoney"<\/span>, "Stubby"<\/span>, "Stumper"<\/span>, "Stud"<\/span>, "Studs"<\/span>, "Squishy"<\/span>, "Squeeky"<\/span>, "Squirmy"<\/span>, "Squirms"<\/span>, "Tater"<\/span>, "Tomato"<\/span>, "Taters"<\/span>, "Tamoto"<\/span>, "El Tamoto"<\/span>, "Tapioca"<\/span>, "Tiggle"<\/span>, "Tiggles"<\/span>, "Tibbir"<\/span>, "Ribbits"<\/span>, "Tommy the Toad"<\/span>, "Tricky"<\/span>, "Tubby"<\/span>, "Tubs"<\/span>, "Tuffy"<\/span>, "Twiggles"<\/span>, "Watermelonbaby"<\/span>, "Webby"<\/span>, "Webs"<\/span>, "Wet Willy"<\/span>, "Wembley"<\/span>, "Wiggles"<\/span>, "Giggles"<\/span>, "Winky"<\/span>, "Wiggletins"<\/span>, "Whopper"<\/span>, "Xorcon"<\/span>, "Yggorf"<\/span>, "Zenon"<\/span>, "Zippity"<\/span>, "Zippy"<\/span>, "Zips"<\/span>, "Zookey"<\/span>, "Zucchini"<\/span>];\r\n\t\/\/get starting values<\/span>\r\n\tstr_name =<\/span> str_yourname;\r\n\t\/\/aka sentence<\/span>\r\n\tstr_aka =<\/span> arr_akafrogs[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_akafrogs.length)-<\/span>1<\/span>];\r\n\tvar<\/span> arr_aka_sentence =<\/span> [adj_aka[Math<\/span>.ceil(Math<\/span>.random()*<\/span>adj_aka.length)-<\/span>1<\/span>]+<\/span>" "<\/span>+<\/span>str_aka, str_aka+<\/span>" "<\/span>+<\/span>"for short"<\/span>];\r\n\t\/\/<\/span>\r\n\tarr_originalname =<\/span> [];\r\n\tarr_originalname =<\/span> (str_name).split(" "<\/span>);\r\n\tarr_fullname =<\/span> (str_name).split(" "<\/span>);\r\n\t\/\/clear<\/span>\r\n\tstr_name =<\/span> ""<\/span>;\r\n\t\/\/start<\/span>\r\n\tfor<\/span>(var<\/span> i=<\/span>0<\/span>; i<<\/span>arr_fullname.length; ++<\/span>i){\r\n\t\tif<\/span>(arr_fullname[i].length><\/span>4<\/span>){\r\n\t\t\tarr_fullname[i] =<\/span> "Frog"<\/span>+<\/span>(arr_fullname[i].slice(4<\/span>,arr_fullname[i].length));\r\n\t\t}else<\/span> if<\/span>(Math<\/span>.random()*<\/span>100<\/span>><\/span>50<\/span>){\r\n\t\t\tvar<\/span> randTitle =<\/span> arr_frogvariant[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_frogvariant.length)-<\/span>1<\/span>]+<\/span>arr_title[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_title.length)-<\/span>1<\/span>];\r\n\t\t\tarr_fullname[i] =<\/span> randTitle+<\/span>" of "<\/span>+<\/span>arr_fullname[i]+<\/span>"frog"<\/span>;\r\n\t\t}\r\n\t\tif<\/span>((i==<\/span>arr_fullname.length-<\/span>1<\/span> &&<\/span> Math<\/span>.random()*<\/span>100<\/span>><\/span>50<\/span>) &&<\/span> arr_fullname.length><\/span>1<\/span>){\r\n\t\t\tarr_fullname[i] =<\/span> "of the "<\/span>+<\/span> arr_frogplaces[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_frogplaces.length)-<\/span>1<\/span>] +<\/span>" of "<\/span>+<\/span>arr_fullname[i];\r\n\t\t}\r\n\t\t\/\/set to this<\/span>\r\n\t\tstr_name+=<\/span>arr_fullname[i]+<\/span>" "<\/span>;\r\n\t}\r\n\t_stage.txt_aboutfrog.text =<\/span> ("Your frogname is: "<\/span>+<\/span>str_name+<\/span>". "<\/span>+<\/span> arr_aka_sentence[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_aka_sentence.length)-<\/span>1<\/span>] +<\/span>", "<\/span>+<\/span>arr_personality[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_personality.length)-<\/span>1<\/span>]+<\/span>" frog. You are known for being "<\/span>+<\/span>arr_aboutyou[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_aboutyou.length)-<\/span>1<\/span>]+<\/span>arr_punctuation[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_punctuation.length)-<\/span>1<\/span>]);\r\n};\r\n<\/pre>\n<\/div>\n
It sends the value to the _stage.txt_aboutfrog<\/code> text field.<\/p>\n
The important thing about making a good generator is how you place all the body parts. Depending on how you build it, you will most likely have a lot of random pieces, of varying shapes and sizes.
\nGetting them all to place on each-other, or relative to each-other, is the key to making something look good (and hopefully goofy).
\nSo registration points here are important, and nesting things right (if you decide to nest things, which works very well in many cases).<\/p>\n
We have the following structure:<\/p>\n
<\/p>\n
\n
\/\/paths<\/span>\r\nvar<\/span> mc_frog =<\/span> _stage.mc_frog;\r\nvar<\/span> mc_head =<\/span> _stage.mc_frog.mc_face.mc_head;\r\nvar<\/span> mc_body =<\/span> _stage.mc_frog.mc_body;\r\nvar<\/span> mc_arm_left =<\/span> _stage.mc_frog.mc_arm_left;\r\nvar<\/span> mc_arm_right =<\/span> _stage.mc_frog.mc_arm_right;\r\nvar<\/span> mc_arm_back_left =<\/span> _stage.mc_frog.mc_arm_back_left;\r\nvar<\/span> mc_arm_back_right =<\/span> _stage.mc_frog.mc_arm_back_right;\r\nvar<\/span> mc_eye_left =<\/span> _stage.mc_frog.mc_face.mc_eyes.mc_eye_left;\r\nvar<\/span> mc_eye_right =<\/span> _stage.mc_frog.mc_face.mc_eyes.mc_eye_right;\r\nvar<\/span> mc_mouth =<\/span> _stage.mc_frog.mc_face.mc_mouth;\r\nvar<\/span> mc_eyes =<\/span> _stage.mc_frog.mc_face.mc_eyes;\r\n<\/pre>\n<\/div>\n
All clips need a proper registration point to where they connect to their appropriate body part, or body.
\nFor example, the head’s registration point is at the bottom middle. Like a neck. It connects to the body.<\/p>\n
\"\"<\/p>\n
Arms are somewhere top left (for left arm) and top right (for right arm).<\/p>\n
\"\"<\/p>\n
The body is at the bottom middle, because it will be sitting on the ground.<\/p>\n
\"\"<\/p>\n
You notice from the “paths” above that things are grouped within their appropriate body part. For example, the “FACE” holds the head, eyes, and mouth. This is so, after all the placing, moving it is easier.<\/p>\n
\"\"<\/p>\n
The most busily grouped thing is the face. The rest is just inside of FROG.<\/p>\n
Of course there are many ways of doing this, but if you’ll watch G.P. Lackey’s<\/a> presentation where he makes a frog generator on stage, he does it in a similar way. Creates many graphics, scales them, colors them, and places them.
\nI think this approach is more intuitively to visual people. It also offers the most control over the resulting character’s style.<\/p>\n
I found that, if the approach leaned more in the programming direction, I would have had to spend too much time programming the blobs to work as body parts and (although cooler) it would end up being pretty much the same thing in the end, but much more work. This way is faster.<\/p>\n
For creating the actual body parts, you make a ton of them. The starting groups act like “types”, then you can optionally “morph” them together in varying combinations to get even more types.
\nThese are all on frames inside the body part.<\/p>\n
\"\"<\/p>\n
The generator then takes care of placing, and choosing them appropriately. Some parts that require a similar body part will choose from the same random frame. Sometimes it’s totally random so, for example, there are two different arms and the frog looks like it’s making some sort of gesture.
\nEyes are usually the same eye type. There is “tiny”, “slanted”, and “round”.<\/p>\n
In the very end, a minor amount of movement is applied to all the parts. To give it some life.<\/p>\n
The movement functionality looks like this:<\/p>\n
<\/p>\n
\n
var<\/span> arr_movement =<\/span> [];\/\/refferneces to clips that move go here, ticker loops through it<\/span>\r\n\r\n\/\/movement for the frog<\/span>\r\nfunction<\/span> start_randomMovement(clip, mcProp, maxVal, minVal, decay, decimal) {\r\n\t\/\/starting values<\/span>\r\n\tclip.ymoveval =<\/span> 0<\/span>;\r\n\tclip.yPos =<\/span> 0<\/span>;\r\n\tclip.yTarget =<\/span> 0<\/span>;\r\n\tclip.yval =<\/span> 0<\/span>;\r\n\tclip.rVar =<\/span> 0<\/span>;\r\n\tclip.fVar =<\/span> 0<\/span>;\r\n\tclip.yVar =<\/span> 0<\/span>;\r\n\t\/\/<\/span>\r\n\tclip.mcProp =<\/span> mcProp;\r\n\tclip.maxVal =<\/span> maxVal;\r\n\tclip.minVal =<\/span> minVal;\r\n\tclip.decay =<\/span> decay;\r\n\tclip.decimal =<\/span> decimal;\r\n\t\/\/<\/span>\r\n\tarr_movement.push(clip);\r\n}\r\n\r\n\/\/random movement's listener<\/span>\r\nfunction<\/span> evnt_randomMovement(event) {\r\n\t\/\/<\/span>\r\n\tfor<\/span>(var<\/span> i =<\/span> 0<\/span>; i<<\/span>arr_movement.length; ++<\/span>i){\r\n\t\tvar<\/span> clip =<\/span> arr_movement[i];\r\n\t\t\/\/<\/span>\r\n\t\tif<\/span> (clip.ymoveval <<\/span> 0.1<\/span> &&<\/span> clip.ymoveval ><\/span> -<\/span>0.1<\/span>) {\r\n\t\t\tclip.rVar =<\/span> ((Math<\/span>.ceil(Math<\/span>.random() *<\/span> 4<\/span>) +<\/span> 4<\/span>) \/<\/span> 100<\/span>);\r\n\t\t\tclip.fVar =<\/span> ((Math<\/span>.ceil(Math<\/span>.random() *<\/span> 4<\/span>) +<\/span> 4<\/span>) \/<\/span> 10<\/span>);\r\n\t\t\tclip.yVar =<\/span> (Math<\/span>.random() *<\/span> (clip.maxVal -<\/span> clip.minVal)) +<\/span> clip.minVal;\r\n\t\t}\r\n\t\t\/\/           <\/span>\r\n\t\tclip.yPos =<\/span> (clip.yPos *<\/span> clip.fVar) +<\/span> ((clip.yVar -<\/span> clip.yTarget) *<\/span> clip.rVar);\r\n\t\tclip.yTarget =<\/span> clip.yTarget +<\/span> clip.yPos;\r\n\t\tclip.ymoveval =<\/span> (clip.yTarget -<\/span> clip.yval) *<\/span> clip.decimal +<\/span> (clip.ymoveval *<\/span> clip.decay);\r\n\t\tclip.yval =<\/span> clip.yval +<\/span> clip.ymoveval;\r\n\t\tclip[clip.mcProp] =<\/span> clip.yval;\r\n\t};\r\n}\r\n\r\n\/\/scale, y, and rotation mostly<\/span>\r\nstart_randomMovement(mc_mouth, "scaleY"<\/span>, .5<\/span>, 0<\/span>, 1<\/span>, 0.9<\/span>);\r\nstart_randomMovement(mc_frog.mc_face, "y"<\/span>, mc_frog.mc_face.y, mc_frog.mc_face.y-<\/span>8<\/span>, 0.1<\/span>, 0.05<\/span>);\r\nstart_randomMovement(mc_body, "rotation"<\/span>, 3<\/span>, -<\/span>3<\/span>, 0.1<\/span>, 0.05<\/span>);\/\/breathing<\/span>\r\nstart_randomMovement(mc_arm_left, "rotation"<\/span>, 5<\/span>, -<\/span>5<\/span>, 0.1<\/span>, 0.05<\/span>);\r\nstart_randomMovement(mc_arm_right, "rotation"<\/span>, 5<\/span>, -<\/span>5<\/span>, 0.1<\/span>, 0.05<\/span>);\r\nstart_randomMovement(mc_head, "rotation"<\/span>, -<\/span>3<\/span>, 3<\/span>, 0.1<\/span>, 0.05<\/span>);\r\nstart_randomMovement(mc_eye_left, "y"<\/span>, mc_eye_left.y,mc_eye_left.y-<\/span>10<\/span>, 0.1<\/span>, 0.07<\/span>);\r\nstart_randomMovement(mc_eye_right, "y"<\/span>, mc_eye_right.y,mc_eye_right.y-<\/span>10<\/span>, 0.1<\/span>, 0.07<\/span>);\r\n\/\/ticker for movement<\/span>\r\ncreatejs.Ticker.addEventListener("tick"<\/span>, evnt_randomMovement);\r\n<\/pre>\n<\/div>\n
Whatever part you wish to move is pushed to the arr_movement<\/code> array. You give it some values because all parts move different. For example, the mouth (if there is one) is very erratic.
\nThe rest is fairly self explanatory.<\/p>\n
In the original ActionScript version<\/a> there where also lines being drawn to the eyes.
\nExample of that, so you know what I mean:
\n<\/p>\n
\n
function <\/span>evnt_drawEyeline<\/span>(<\/span>event:<\/span>Event<\/span>){<\/span>\r\n\tif<\/span>(<\/span>bool_drawEyeLine){<\/span>\r\n\t\tmc_eyes.<\/span>graphics<\/span>.<\/span>clear<\/span>();<\/span>\r\n\t\tvar<\/span> point_start:Point<\/span> =<\/span> mc_eyes.<\/span>globalToLocal<\/span>(<\/span>mc_eye_left.<\/span>localToGlobal<\/span>(<\/span>new<\/span> Point<\/span>()));<\/span>\r\n\t\tvar<\/span> point_end:Point<\/span> =<\/span> mc_eyes.<\/span>globalToLocal<\/span>(<\/span>mc_head.<\/span>localToGlobal<\/span>(<\/span>new<\/span> Point<\/span>()));<\/span>\r\n\t\tmc_eyes.<\/span>graphics<\/span>.<\/span>lineStyle<\/span>(<\/span>15<\/span>,<\/span> calc_hexTint(<\/span>col_frog,<\/span>0.7<\/span>));<\/span>\r\n\t\tmc_eyes.<\/span>graphics<\/span>.<\/span>moveTo<\/span>(<\/span>point_start.<\/span>x<\/span>-<\/span>2<\/span>,<\/span>point_start.<\/span>y<\/span>);<\/span>\r\n\t\tmc_eyes.<\/span>graphics<\/span>.<\/span>lineTo<\/span>(<\/span>point_end.<\/span>x<\/span>-<\/span>mc_head.<\/span>width<\/span>\/4,point_end.y-mc_head.height\/<\/span>2<\/span>);<\/span>\r\n\t\t\/\/<\/span>\r\n\t\tpoint_start =<\/span> mc_eyes.<\/span>globalToLocal<\/span>(<\/span>mc_eye_right.<\/span>localToGlobal<\/span>(<\/span>new<\/span> Point<\/span>()));<\/span>\r\n\t\tpoint_end =<\/span> mc_eyes.<\/span>globalToLocal<\/span>(<\/span>mc_head.<\/span>localToGlobal<\/span>(<\/span>new<\/span> Point<\/span>()));<\/span>\r\n\t\tmc_eyes.<\/span>graphics<\/span>.<\/span>lineStyle<\/span>(<\/span>15<\/span>,<\/span> calc_hexTint(<\/span>col_frog,<\/span>0.7<\/span>));<\/span>\r\n\t\tmc_eyes.<\/span>graphics<\/span>.<\/span>moveTo<\/span>(<\/span>point_start.<\/span>x<\/span>-<\/span>2<\/span>,<\/span>point_start.<\/span>y<\/span>);<\/span>\r\n\t\tmc_eyes.<\/span>graphics<\/span>.<\/span>lineTo<\/span>(<\/span>point_end.<\/span>x<\/span>+<\/span>mc_head.<\/span>width<\/span>\/4,point_end.y-mc_head.height\/<\/span>2<\/span>);<\/span>\r\n\t\t\/\/graphics.clear();\/\/in case of on enter and must follow around keep drawing (in event)<\/span>\r\n\t}<\/span>else<\/span>{<\/span>\r\n\t\tmc_eyes.<\/span>graphics<\/span>.<\/span>clear<\/span>();<\/span>\r\n\t}<\/span>\r\n}<\/span>\r\n<\/pre>\n<\/div>\n
This was so that the eyes always stay attached to their bodies. Sometimes the eyes hover just a bit above the head. I was testing it again in this version and decided I will not do this, because they look sort of adorable with the eyes doing that.
\nIf you like you can incorporate that yourself. bool_drawEyeLine<\/code> is handled in the generateFrog()<\/code> function I will be describing shortly.<\/p>\n
The original ActionScript version was a bit more complicated. It did more. This is simplified for the sake of a readable tutorial.<\/p>\n
The backgrounds…<\/strong><\/p>\n
There are three different backgrounds. Space, Mountains, and Stream. They all have their own ambient soundtrack playing. Space is super rare. Space is for the super rare Spacefrogs.
\nThe function that sets the background, and takes care of the associating soundtrack is as follows:<\/p>\n
<\/p>\n
\n
\/\/set a background<\/span>\r\nfunction<\/span> set_background(){\r\n\t\/\/stop the sounds first (if curr_background has a value)<\/span>\r\n\tif<\/span>(curr_background !=<\/span> ""<\/span>){\r\n\t\tstopSound("snd_"<\/span>+<\/span>curr_background);\r\n\t};\r\n\t\/\/<\/span>\r\n\tvar<\/span> arr_backgrounds =<\/span> ["space"<\/span>, "mountains"<\/span>, "stream"<\/span>, "mountains"<\/span>, "stream"<\/span>, "mountains"<\/span>, "stream"<\/span>, "mountains"<\/span>, "stream"<\/span>, "mountains"<\/span>, "stream"<\/span>];\r\n\tcurr_background =<\/span> arr_backgrounds[Math<\/span>.ceil(Math<\/span>.random()*<\/span>arr_backgrounds.length)-<\/span>1<\/span>];\r\n\t_stage.mc_foreground.gotoAndStop(curr_background);\r\n\t_stage.mc_background.gotoAndStop(curr_background);\r\n\t\/\/set soundscape<\/span>\r\n\tif<\/span>(curr_background ==<\/span> "space"<\/span>){\r\n\t\tplaySoundLoop("snd_space"<\/span>, 999<\/span>);\r\n\t}\r\n\tif<\/span>(curr_background ==<\/span> "stream"<\/span>){\r\n\t\tplaySoundLoop("snd_stream"<\/span>, 999<\/span>);\r\n\t}\r\n\tif<\/span>(curr_background ==<\/span> "mountains"<\/span>){\r\n\t\tplaySoundLoop("snd_mountains"<\/span>, 999<\/span>);\r\n\t}\r\n}\r\n<\/pre>\n<\/div>\n
_stage.mc_foreground<\/code> is the foreground clip that contains foreground details like rocks and grass.
\n_stage.mc_background<\/code> is the large scene in the back.<\/p>\n
These two clips have frame labels named \"space\", \"mountains\", \"stream\"<\/code>. It’s very simple.
\nThe sound is then handled. Sound ID’s for these areas look like this:<\/p>\n
<\/p>\n
\n
{id:<\/span>"snd_mountains"<\/span>, src:<\/span>"AUD_SCENE_MOUNTAIN.mp3"<\/span>},\r\n{id:<\/span>"snd_stream"<\/span>, src:<\/span>"AUD_SCENE_STREAM.mp3"<\/span>},\r\n{id:<\/span>"snd_space"<\/span>, src:<\/span>"AUD_SCENE_SPACE.mp3"<\/span>},\r\n<\/pre>\n<\/div>\n
So that’s why the (\"snd_\"+curr_background<\/code>)… If you stop a sound that doesn’t exist things break. You have to be specific.<\/p>\n
Now on to the generateFrog()<\/code> function…<\/p>\n
The generateFrog()<\/code> function is the big thing where all the magic happens. It looks like this:<\/p>\n
<\/p>\n
\n
\/\/generate the frog (triggered by the 'refresh' button)<\/span>\r\nfunction<\/span> generateFrog(){\r\n\t\/\/<\/span>\r\n\tstopAllSounds();\r\n\t\/\/<\/span>\r\n\tplay_transition(_stage.mc_transition_bottom);\r\n\tplay_transition(_stage.mc_transition_top);\r\n\tmc_frog.visible =<\/span> true<\/span>;\r\n\t_stage.btn_save.visible =<\/span> true<\/span>;\/\/only appears after frogs start coming in<\/span>\r\n\t_stage.mc_ui_back.visible =<\/span> true<\/span>;\r\n\t_stage.txt_aboutfrog.visible =<\/span> true<\/span>;\r\n\tset_large_ribbon();\r\n\tset_background();\r\n\t\/\/<\/span>\r\n\tgenerate_frogname();\r\n\t\/\/random head and body<\/span>\r\n\tgotoAndStopRandom(mc_head);\r\n\tgotoAndStopRandom(mc_body);\r\n\t\/\/get a random arm (frame number)<\/span>\r\n\tvar<\/span> num_arm_frame =<\/span> (Math<\/span>.ceil(Math<\/span>.random()*<\/span>mc_arm_left.timeline.duration)); \/\/same frame for both arms<\/span>\r\n\tif<\/span>(Math<\/span>.random()*<\/span>100<\/span>><\/span>50<\/span>){\/\/50 chance of both arms being same frame<\/span>\r\n\t\tmc_arm_left.gotoAndStop(num_arm_frame);\r\n\t\tmc_arm_right.gotoAndStop(num_arm_frame);\r\n\t}else<\/span>{\r\n\t\t\/\/random gesture<\/span>\r\n\t\tgotoAndStopRandom(mc_arm_left);\r\n\t\tgotoAndStopRandom(mc_arm_right);\t\r\n\t}\r\n\t\/\/eyes and legs<\/span>\r\n\tvar<\/span> num_arm_back_frame =<\/span> (Math<\/span>.ceil(Math<\/span>.random()*<\/span>mc_arm_back_left.timeline.duration));\r\n\tmc_arm_back_left.gotoAndStop(num_arm_back_frame);\r\n\tmc_arm_back_right.gotoAndStop(num_arm_back_frame);\r\n\tvar<\/span> num_eye_frame =<\/span> (Math<\/span>.ceil(Math<\/span>.random()*<\/span>mc_eye_left.timeline.duration));\r\n\tmc_eye_left.gotoAndStop(num_eye_frame);\r\n\tmc_eye_right.gotoAndStop(num_eye_frame);\r\n\t\/\/does it have a mouth? show or hide it...<\/span>\r\n\t\/\/if it has a mouth, frog must sing<\/span>\r\n\tif<\/span> (Math<\/span>.random()*<\/span>100<\/span>><\/span>50<\/span>){\r\n\t\tplayFrogSound();\r\n\t\tmc_mouth.visible =<\/span> true<\/span>\r\n\t}else<\/span>{\r\n\t\tstopFrogSound()\r\n\t\tmc_mouth.visible =<\/span> false<\/span>;\t\r\n\t}\r\n\t\/\/<\/span>\r\n\t\/\/size the body parts. frogs come in many shapes and sizes<\/span>\r\n\tvar<\/span> num_sizeoffset =<\/span> Math<\/span>.ceil(Math<\/span>.random()*<\/span>10<\/span>);\r\n\tmc_head.width =<\/span> mc_body.width+<\/span>num_sizeoffset;\r\n\tmc_arm_left.width =<\/span> num_arm_left_width+<\/span>num_sizeoffset;\r\n\tmc_arm_left.height =<\/span> num_arm_left_height+<\/span>num_sizeoffset;\r\n\tmc_arm_right.width =<\/span> num_arm_left_width+<\/span>num_sizeoffset;\r\n\tmc_arm_right.height =<\/span> num_arm_left_height+<\/span>num_sizeoffset;\r\n\t\/\/eyes (reset size first for eyes) - eyes must have an if else that determines if both are different size or same size (circles only both different size)<\/span>\r\n\t\/\/reset<\/span>\r\n\tmc_eye_left.width =<\/span> mc_eye_right.width =<\/span> num_eye_left_width;\r\n\tmc_eye_left.height =<\/span> mc_eye_right.height =<\/span> num_eye_left_height;\r\n\t\/\/if round allow random size, else no (uniform size)<\/span>\r\n\t\/\/mc_eye_right.frameBounds[mc_eye_right.currentFrame].width<\/span>\r\n\tif<\/span>(eye_type==<\/span>"round"<\/span>){\r\n\t\tmc_eye_left.height =<\/span> mc_eye_left.width =<\/span> Math<\/span>.ceil(number_randomRange(return_bounds(mc_eye_right).width, return_bounds(mc_eye_right).width*<\/span>8<\/span>));\r\n\t\tmc_eye_right.height =<\/span> mc_eye_right.width =<\/span> Math<\/span>.ceil(number_randomRange(return_bounds(mc_eye_right).width, return_bounds(mc_eye_right).width*<\/span>8<\/span>));\r\n\t}else<\/span> if<\/span>(eye_type==<\/span>"slanted"<\/span>){\r\n\t\tmc_eye_left.height =<\/span> mc_eye_right.height =<\/span> Math<\/span>.ceil(number_randomRange(return_bounds(mc_eye_right).height, return_bounds(mc_eye_right).height*<\/span>2<\/span>));\r\n\t\tmc_eye_left.width =<\/span> mc_eye_right.width =<\/span> Math<\/span>.ceil(number_randomRange(return_bounds(mc_eye_right).width, return_bounds(mc_eye_right).width*<\/span>8<\/span>));\r\n\t}else<\/span>{\/\/tiny or other<\/span>\r\n\t\tmc_eye_left.height =<\/span> mc_eye_left.width =<\/span> number_randomRange(2<\/span>, 7<\/span>);\r\n\t\tmc_eye_right.height =<\/span> mc_eye_right.width =<\/span> number_randomRange(2<\/span>, 7<\/span>);\r\n\t}\r\n\tmc_mouth.width =<\/span> number_randomRange(20<\/span>, mc_head.width-<\/span>5<\/span>);\/\/-width of line<\/span>\r\n\tmc_mouth.height =<\/span> number_randomRange(10<\/span>, 85<\/span>);\r\n\tnum_mouth_height =<\/span> mc_mouth.height;\/\/max value to tweak<\/span>\r\n\t\r\n\t\/\/place<\/span>\r\n\tvar<\/span> num_placeoffset =<\/span> Math<\/span>.ceil(number_randomRange(20<\/span>, 30<\/span>));\r\n\tmc_head.y =<\/span> (mc_body.y-<\/span>return_bounds(mc_body).height)+<\/span>(num_placeoffset);\/\/offset could be random<\/span>\r\n\t\r\n\tmc_arm_left.x =<\/span> mc_body.x-<\/span>return_bounds(mc_body).width\/<\/span>2<\/span>+<\/span>3<\/span>;\r\n\tmc_arm_left.y =<\/span> mc_body.y-<\/span>return_bounds(mc_body).height\/<\/span>2<\/span>;\r\n\tmc_arm_right.x =<\/span> mc_body.x+<\/span>return_bounds(mc_body).width\/<\/span>2<\/span>-<\/span>3<\/span>;\r\n\tmc_arm_right.y =<\/span> mc_body.y-<\/span>return_bounds(mc_body).height\/<\/span>2<\/span>;\r\n\t\r\n\tvar<\/span> num_arm_back_placeoffset =<\/span> Math<\/span>.ceil(number_randomRange(-<\/span>10<\/span>,10<\/span>));\r\n\tmc_arm_back_left.x =<\/span> mc_body.x-<\/span>return_bounds(mc_body).width\/<\/span>2<\/span>+<\/span>10<\/span>;\r\n\tmc_arm_back_left.y =<\/span> mc_body.y-<\/span>return_bounds(mc_body).height\/<\/span>2<\/span>+<\/span>num_arm_back_placeoffset;\r\n\r\n\tmc_arm_back_right.x =<\/span> mc_body.x+<\/span>return_bounds(mc_body).width\/<\/span>2<\/span>-<\/span>10<\/span>;\r\n\tmc_arm_back_right.y =<\/span> mc_body.y-<\/span>return_bounds(mc_body).height\/<\/span>2<\/span>+<\/span>num_arm_back_placeoffset;\r\n\t\r\n\tmc_eyes.x =<\/span> mc_head.x;\r\n\tmc_eyes.y =<\/span> mc_head.y -<\/span> (return_bounds(mc_head).height\/<\/span>2<\/span>) +<\/span> number_randomRange(-<\/span>10<\/span>,10<\/span>);\r\n\t\r\n\t\/\/minimum is -20 for left 20 for right<\/span>\r\n\tvar<\/span> num_eyes_place =<\/span> number_randomRange(20<\/span>, return_bounds(mc_head).width\/<\/span>2<\/span> +<\/span> (return_bounds(mc_eye_left).width) -<\/span> return_bounds(mc_head).width\/<\/span>8<\/span>);\/\/ - one fourth of the head<\/span>\r\n\tmc_eye_left.x =<\/span> -<\/span>num_eyes_place;\/\/left eye on left side of head + width of eye to keep it on the head<\/span>\r\n\tmc_eye_right.x =<\/span> num_eyes_place;\/\/<\/span>\r\n\t\r\n\t\/\/<\/span>\r\n\tmc_mouth.x =<\/span> mc_head.x;\r\n\tmc_mouth.y =<\/span> mc_head.y;\r\n\t\r\n\t\/\/draw lines to eyes to connect to body<\/span>\r\n\t\/\/this is handled in an event (constant timer because movement updates)<\/span>\r\n\tif<\/span>(eye_type ==<\/span> "round"<\/span> ||<\/span> eye_type ==<\/span> "slanted"<\/span>){\r\n\t\tbool_drawEyeLine =<\/span> true<\/span>;\r\n\t}else<\/span>{\r\n\t\tbool_drawEyeLine =<\/span> false<\/span>;\r\n\t}\r\n\t\r\n\t\/\/flip body parts<\/span>\r\n\t\/\/for added randomness<\/span>\r\n\tif<\/span>(Math<\/span>.random()*<\/span>100<\/span>><\/span>50<\/span>){\r\n\t\tmc_head.scaleX *=<\/span> -<\/span>1<\/span>;\r\n\t}\r\n\tif<\/span>(Math<\/span>.random()*<\/span>100<\/span>><\/span>50<\/span>){\r\n\t\tmc_body.scaleX *=<\/span> -<\/span>1<\/span>;\r\n\t}\r\n}\r\n<\/pre>\n<\/div>\n
The beginning takes care of the new scene and sounds. Also setting visibility of the UI incase it’s hidden.
\nThen the frogname is generated.
\nThe rest is all body and placement of the body.
\nThe comments should make sense of the mess.<\/p>\n
As you can see, the:<\/p>\n
<\/p>\n
\n
\/\/returns a random number range<\/span>\r\n\/\/eye calc: eye1 = random number in from 0, eye2 = width of head - random number in...<\/span>\r\nfunction<\/span> number_randomRange(min, max){\r\n\treturn<\/span> min +<\/span> (max -<\/span> min) *<\/span> Math<\/span>.random();\r\n}\r\n\r\nfunction<\/span> return_bounds(clip){\r\n\treturn<\/span> clip.getTransformedBounds();\r\n}\r\n<\/pre>\n<\/div>\n
Are being heavily used.<\/p>\n
At the end this is all called in the handler for the refresh button:<\/p>\n
<\/p>\n
\n
function<\/span> evnt_refresh(event){\r\n\tgenerateFrog();\r\n\tplayEvntSound();\r\n}\r\n<\/pre>\n<\/div>\n
And that’s it for the meat of it!<\/p>\n
—<\/p>\n
SAVING THE FROG<\/strong><\/p>\n
The idea here is that once you found your perfect frog. Your frog soulmate, or frog spirit guide. You can save it as a pretty picture. We’ll do this as .png.<\/p>\n
There are a few ways to save a canvas to image. Most notably canvas.toDataURL<\/code>.
\nIf I remember right:<\/p>\n
<\/p>\n
\n
var<\/span> canvas =<\/span> document<\/span>.getElementsByTagName("canvas"<\/span>)[0<\/span>];\r\nvar<\/span> dataURL =<\/span> canvas.toDataURL('image\/png'<\/span>);\r\nwindow<\/span>.open(dataURL);\r\n<\/pre>\n<\/div>\n
There are also many libraries, resources, and tutorials for doing this. To name some:<\/p>\n
https:\/\/github.com\/gillyb\/reimg<\/a>
\nhttps:\/\/github.com\/hongru\/canvas2image<\/a>
\nhttp:\/\/greenethumb.com\/article\/1429\/user-friendly-image-saving-from-the-canvas\/<\/a>
\nhttps:\/\/github.com\/eligrey\/FileSaver.js\/<\/a>
\nhttps:\/\/github.com\/aaccurso\/canvas-image-saver<\/a>
\nhttp:\/\/stackoverflow.com\/questions\/923885\/capture-html-canvas-as-gif-jpg-png-pdf<\/a><\/p>\n
Also, in the original ActionScript version you could save as both .png or record your frog and save it as an animated .gif. You can easily accomplish both of these things with javascript. There are a few solutions for recording canvas to animated .gif. Most notably:<\/p>\n
https:\/\/github.com\/aaccurso\/canvas-image-saver<\/a>
\nhttp:\/\/antimatter15.com\/wp\/2010\/07\/javascript-to-animated-gif\/<\/a>
\nhttps:\/\/github.com\/jnordberg\/gif.js<\/a><\/p>\n
So at the moment, to keep things simple, I’ll just do this:<\/p>\n
<\/p>\n
\n
\/\/called at the end of the camera shutter animation<\/span>\r\nsaveFrog =<\/span> function<\/span>(){\r\n\tvar<\/span> canvas =<\/span> document<\/span>.getElementsByTagName("canvas"<\/span>)[0<\/span>];\r\n\tvar<\/span> dataURL =<\/span> canvas.toDataURL('image\/png'<\/span>);\r\n    window<\/span>.open(dataURL);\r\n\t\/\/put it back the way it was<\/span>\r\n\tset_large_ribbon();\r\n\t_stage.btn_refresh.visible =<\/span> true<\/span>;\r\n\t_stage.btn_save.visible =<\/span> true<\/span>;\r\n}\r\n\r\n\/\/button event for downloading the frog (save as image)<\/span>\r\nfunction<\/span> event_saveFrog(event){\r\n\t\/\/hide UI and make it look nice for the picture<\/span>\r\n\tset_small_ribbon();\r\n\t_stage.btn_refresh.visible =<\/span> false<\/span>;\r\n\t_stage.btn_save.visible =<\/span> false<\/span>;\r\n\t\/\/camera shutter<\/span>\r\n\t_stage.mc_camera.play();\r\n\tplaySound("snd_camera"<\/span>);\r\n}\r\n<\/pre>\n<\/div>\n
This can be made fancy some other time.
\nThe important thing here is to re-arrange the UI so it’s nice for the picture (get rid of the buttons, and center the banner again). Then play a little camera shutter animation.
\nWhen that’s done, save the frog. Put everything back the way it was.<\/p>\n
The picture will open in a new browser window, where you can save it yourself.<\/p>\n
By the way if you run this (save the picture part) locally you may get “Tainted canvases may not be exported.”. It’s explained here: http:\/\/stackoverflow.com\/questions\/22710627\/tainted-canvases-may-not-be-exported<\/a><\/p>\n
—<\/p>\n
Conclusion<\/strong><\/p>\n
\"\"<\/p>\n
That’s about it! Frog generators are tons of fun. :)
\nAgain, here are the download links to the sourcefiles and end result:<\/p>\n
PLAY it here: http:\/\/frogs.alienmelon.com\/html5\/<\/a><\/p>\n
DOWNLOAD sourcefiles: http:\/\/nathalielawhead.com\/sourcefiles\/Weird_Alien_Frogs\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
You can VIEW the end result here: http:\/\/frogs.alienmelon.com\/html5\/ You can DOWNLOAD the sourcefiles here: http:\/\/nathalielawhead.com\/sourcefiles\/Weird_Alien_Frogs\/ This tutorial will walk you through using Animate to make a procedural frog generator. It will cover all the basics of using the HTML5 Canvas output, as well as timeline scripting for the functionality. For those that are interested I also have a tutorial for making a game with CreateJS + the canvas in Flash\/Animate here. It’s a bit older, and some of the issues (and resulting workarounds) I mention there no longer apply. Although the tutorial itself is still fairly relevant. It’s also interesting...<\/p>\n","protected":false},"author":1,"featured_media":4522,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[30,12],"tags":[],"class_list":["post-3508","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-games","category-resources"],"_links":{"self":[{"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/3508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/comments?post=3508"}],"version-history":[{"count":5,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/3508\/revisions"}],"predecessor-version":[{"id":3513,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/3508\/revisions\/3513"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/media\/4522"}],"wp:attachment":[{"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/media?parent=3508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/categories?post=3508"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/tags?post=3508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}