Flash Quizzes

[tobley]

I wanted to start a thread where people can talk about, ask questions about, and possibly collaborate on Sporcle quizzes that utilize Flash in some way. I am by no means an expert, but I have some number of years of experience with it, and I would like to help people out. I am happy to answer questions on any level, even if people are just curious how the Flash files themselves are made. I will also provide any of the source files for the games I have created for people to use as a guide (they will be almost impossible to decipher by the uninitiated, and possibly even difficult for real programmers due to my complete lack of comments or naming conventions).

Here are some examples of my quizzes (for another great person, see darinh's at http://www.sporcle.com/user/darinh/contributed) organized into some categories that people may be interested in using as a template for their own:

Beating Sporcle's 300 limit:
http://www.sporcle.com/games/tobley/limit_exceeded

Clicking interactions:
http://www.sporcle.com/games/tobley/lanthanides_of_march
http://www.sporcle.com/games/tobley/sporcle_americas_pastime
http://www.sporcle.com/games/tobley/dictionarythmia

Tools:
http://www.sporcle.com/games/tobley/word_work

Sound:
http://www.sporcle.com/games/tobley/im_the_best
http://www.sporcle.com/games/tobley/codacious
http://www.sporcle.com/games/tobley/victory_is_mine

Puzzles:
http://www.sporcle.com/games/tobley/perpetually_puzzling
http://www.sporcle.com/games/tobley/patriotically_puzzling
http://www.sporcle.com/games/tobley/perennially_puzzling
http://www.sporcle.com/games/tobley/plentifully_puzzling
http://www.sporcle.com/games/tobley/palatially_puzzling
http://www.sporcle.com/games/tobley/penguinly_puzzling

Animation:
http://www.sporcle.com/games/tobley/mavis_beacon_eat_your_heart_out

Even if you are not able to code at all, I may be willing to implement an idea that is both interesting and not too time consuming.

On a separate but related note, this may be a good place to discuss if and how games that utilize Flash could be published to the main page. I never really expected any of these to make it there - just the few people that play them in the user created section is enough - but some may be worth introducing to a wider audience. I would assume the main problem with this is that Sporcle has a mobile presence, which means that these flash games would forever be unavailable to anyone not on a Flash enabled device. Another issue is that many of these games require a code system to input into the Sporcle so you can actually submit your score and compare with other users. Some of these quizzes may beg the question "why have these on Sporcle and not some Flash only site?", which is why I try very hard to make the games fit in with what I believe to be the Sporcle feel. An alternative would be to connect the quizzes directly to the stats, but this would require work on the Sporcle Engineers side as well.

-tobley

[BanjoZebra]

I really enjoy all of these flash quizzes, although I wish there was some kind of "Give Up" button so that you wouldn't have to finish the whole game to enter the codes. Just a thought.

[BanjoZebra]

And also, I think a jigsaw puzzle flash quiz would be really fun.

[MovieGuru]

Hey Tobley, I'd love to learn the process of creating a flash quiz. If you want to post it here or email me, I would much appreciate it!

[tobley]

MG: I explained the process of the map quizzes a few months ago via email, so I will just copy that response here. I think that is better than just a general response since you can see some of the specifics that go into making a quiz:

Flash basics:
The whole process starts with the platform on which I create the games. As you probably have noticed, this is all flash based, so you first need some kind of way to make the flash. I use Flash 8 (when it was still owned by macromedia before being bought out by adobe), but I should probably start using Flash CS5 more often since it is a bit more powerful. There is programming that goes into the flash, and the specific coding language that flash uses is Actionscript 2 (AS2 - the newest version is AS3; again, more powerful). Flash is designed to be pretty versatile across internet browsers, though mobile platforms have yet to use it (mostly for some technical reasons as well as issues with flash being owned by a single company (adobe) and thus does not have to adhere to any open standards (like HTML5, a possible flash alternative)). One of the things I like best about flash is that everything is vectorized, meaning that you can zoom into the image without loss of resolution. This prevents pixelation of the images (very important for the map quizzes since I want to have a lot of detail for countries) and is achieved by treating images as a collection of points that make up polygons that can be redrawn as needed at the different zoom levels instead of just pixels.

Map tracing:
Before doing any coding, the next (and MOST time consuming part) is to trace the maps. Unfortunately for the countries of the world quiz, I did not start with one consistent world map and would just try to find as high resolution of a map as possible to trace the countries out, which just means that I will need to redo Africa and Europe (as well as add Australia/USA/Canada since I haven't done those yet as countries). I take the map, zoom way in, and start manually tracing the countries. I want this part to have as much detail as possible since I do not want people to correlate loss in resolution to the size of the county (in other words, at any zoom level, you would have similar detail for large and small countries - this is still sometimes a problem). Tracing a continent takes around 10 hours. So far, I do this part in about one sitting or so (or at least across a day).

Flash for map quizzes:
Once I have each country, I separate them into their own symbols (another cool thing about flash) so that they can be individually manipulated (changing rotation and size). I color the countries to conform to a 4-color map (minimum number of colors needed to color countries on a map to ensure that there are no two bordering countries that share a color). A small point, but I try to include as many details as possible that people probably don't realize takes some thought to make the game as good as I can. I next take each of the country symbols, and, starting with the actual coding now, move them to the container on the left and rotate them some random number of degrees and make all of the sizes the same. I then add the dragging/sizing/rotation functionality (surprisingly easy to do with the flash framework) and just say that a country is in the correct place if the (x, y) position is within some number of pixels (I think ±6), the size is within some percentage (I started out with around ±10%, but this is biased to be harder for larger countries, so I changed that algorithm around a bit), and within 10º for the rotation. Once you put a country in the correct place, it disappears and goes to the correct color, and I add labels so you can see what it is when you hover the mouse over it. Next, I just add the timer and the codes for when you get various countries and give time and other bonuses. The one most difficult thing to add was the zooming capability (which will have to be improved even more for the countries of the world quiz) that I have on the later quizzes. I won't go too much into detail about how I do this, but it basically involves creating a separate symbol for the continent outline and keeping track of the transformed position and sizing. Fortunately, the coding has been pretty reusable between games, so I just find myself adding functionality each time following user suggestions and ideas that I have. I hope to go back at some point and add all of these things to the earlier quizzes, but that will take some time.

Adding to Sporcle:
Next, I just need to create the sporcle container quiz and embed the flash, which is made pretty easy thanks to the sporcle engineers. I just host the swf flash file on some site (swfcabin.com has been pretty good and somewhat stable so far) in order to embed it into the sporcle. I then put in all of the codes (harder than it seems) and come up with strange and related titles for the various criteria. As you may have noticed, I adore any and all alliteration.

If I have left out anything that anyone would like to know, or if any more clarification is needed, please let me know.

BZ : I think my games all have the option to give up since you always get the code once you have met the criteria, though I guess what you are asking may be to have a button you can just press so you can have the puzzle solved for you and use it just as an interactive map. That wouldn't be too hard to add I guess. As for a jigsaw puzzle game, I will try to think of some interesting way to do this...

-tobley

[druhutch]

Okay, Tobley. You clearly can put your money where your mouth is (nice work with Impuzzible). Here's a request that may be ridiculous. Can you make a flash movie picture quiz? Like, say it was an actor quiz. Say it was set up like the jigsaw puzzle quiz, and the grid had a bunch of pictures of actors in roles where they look completely different from how they normally look (Like Tim Curry in "Legend" or oh wait, look, someone already made a regular version of this. But on the outside are a bunch of pictures of the actors how they actually look, possibly with their names at the bottom. So one would have to drag and drop the "actual" actor pics onto the "unrecognizable movie role" pics. I guess it would need a timer and a right/wrong function. (I have no idea how flash quizzes work; trying to read your description or just thinking about it in general gives me a headache.) At any rate, would something like this--or at least something close to it--be possible?