- Textillate.js (http://textillate.js.org/) – A JS plugin for doing CSS animation.
- Animate.css (https://daneden.github.io/animate.css/) – Library for CSS animations.
Welcome to the inaugural episode of the Script Van Winkle podcast! My name is Script Van Winkle, but my friends call me… annoying.
Now the first half of this inaugural episode will be just like the rest of the upcoming episodes. I’ll cover some technology, trick, technique, library, program, problem or other information I have discovered as I take this long journey to try to “catch up” to modern programming and development. Or is it catsup? I always get confused.
The second half of this episode will be a long comprehensive deep dive into the complexities, history and mystery of…well, me, from conception to the bitter end! Or, I might just give a quick 5 minute overview of my programming background. We’ll see. Could go either way.
I may even stuff an awesome surprise right between the two. So hang onto your hat this here is the wildest podcast in the Disney genre. What’s that? Oh right this is the programming podcast. Let me try that again. I may even stuff an awesome surprise right between the two. Cause dude this is the sickest podcast in the programming verse. I wonder why our writer emphasized sickest? Oh well, who knows what goes through the mind of a third grader.
So recently in my pursuit of other opportunities, I came across an ad for a really cool position with a digital advertising agency in a nearby city. I’ve always wanted to work in advertising. I love creativity. I love the challenge of coming up with new and fresh ideas. And I totally binge watched “Mad Men”.
Then it hit me. This is an advertising firm. They are used to dealing with pitch reels and other types of presentations. If I could create a pitch reel that could generate enough interest from them to at least land an interview I would have a good shot of nailing it. But how would I go about it?
For the text animation, I settled on this cool library called “Textillate.js” (http://textillate.js.org/). Basically it wraps a whole bunch of JS functions around HTML5 animation specifications. In short, it makes it easier to make the text do all kinds of really cool stuff.
Don’t get me wrong, I still had to do a lot of CSS work to do to make sure I had the right fonts, color, size, and positioning. I had to place it where I wanted the element to be when the animation ended.
Another cool feature about animate CSS is you also have exit animations. So I had to pick out and program those as well. It was starting to look really cool! The best part wass the whole thing was just text and images.
But as I started doing that, I realized that there was some refactoring I could do to make this work with less code. A lot of my text was using the same font. So I created one function to which I passed the text, size, color, and top and left coordinates. That function would render the text out as a new element. Did you catch that? As a new element!
So that led me to write a function whose only purpose was to create a new HTML element on the page, well technically on the DOM. Now since all of the elements needed unique IDs, I needed to be able to dynamically generate them. That led me to writing another function whose only purpose was to generate the id.
So if you just joined us…I have a function that creates an ID, one the creates an HTML element, and one that handles all the common text displayed in that pitch reel. Then I created one that handles images. I also made one or two others that dealt with special text. So now I could generate all the visual elements I needed, but I still had to control the timing.
Initially I tried using a series of setTimeOut() functions, one for each element I was generating. It worked OK, but what do you think would happen is the audio was paused or just simply stutters? You guessed it… things would go off the rails really fast!
So I looked more into the HTML5 audio object. And it turns out there are a couple of really useful properties including “currentTime” which returns the current time position within the audio. I also made use of the event “onTimeUpdate” to set up a trigger to run a function each time the time value changed.
This code grabbed the current second the audio was on and used that as a key to dataStructure I had set up to map out the presentation. Each element of that main data structure contained an array of the text or graphic elements that needed to be displayed at that particular time of the presentation.
Things started working much better at that point. Not 100% perfect, but still pretty cool.
Ultimately I decided against going through with applying at that company as I just didn’t see myself working in that city. So I will never know if the gamble would have paid off. But I did learn about HTML5 Animation and audio and found a couple of great libraries in the process.
More after this.
FAUXMERCIAL: “Fusion Kingdom”
Coming soon to the Adobe Studios Resort in Orlando, a brand new theme park experience for the entire coding family, Adobe’s Fusion Kingdom.
Your journey begins on a scenic ferry boat ride across the majestic CFCs lagoon. Next you’ll take a magica stroll through the enchanted Allaire forest.
Once Inside the Fusion Kingdom your true adventure begins. Enjoy Popular roller coasters like the Oop de loop, Cache mountain and the futuristic suppress white space mountain.
And be sure not to miss the dazzling splendor of Thunder mountain, where you will bolt like Zeus down the mystic Merrimack river through a stormy blizzard, dodging scorpions while being chased by a centaur. Who knows what else may develop before your ride is over?
For more family-friendly fun experience the many different settings in the Adventures of Neo and friends or enjoy classic attractions like the Carousel of Progress Bars.
If you are hungry, you can dine in an award-winning restaurant like the spaghetti code Café, or trythe retro chic Macaroni Meatia restaurant.
As night falls the Fusion Kingdom comes alive with the glowing pagentry of the Spectra Magic parade followed by the Adobe’s world famous Fireworks. As you exit the park, don’t forget to preserve those memories by picking up a hat, tshirt or put your name on your very own Fusion Kingdom custom tag.
Great times and precious memories at Adobes Fusion Kingdom. Where the action is always unscripted. Unless you want it to be.
Construction of Fusion Kingdom is slated to begin soon, upon completion of Adobes Photoshop pier, Acrobat Adventure, llustrator Island, Flash Fantasy Island, Preimer Park, Dreamweaver Farms, After Effects Experience, Audition Alley, Muse Magic, In Design Dominion, and Creative Cloud Land.
“Call to Adventure” Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 3.0
Welcome back to the Script Van Winkle podcast. Now, if you are still listening, congratulations! I mean, they say there is one in every crowd, and you apparently are it! Truthfully, if you are still listening I appreciate it and hope that means you found some merit in the first part of this episode.
Now I promised to talk about my favorite subject….me. But it’s your lucky day…I’ll just do the brief overview.
So I have been doing this web development thing for well over 20 years. I started in 1996 when the only browsers most people had to choose from were Netscape and NCSA Mosaic. Go ahead, Junior Developers, Google those puppies! And while you are at it, you might want to look up what what search engine we used to crawl the web back then. Leave your guesses in the comments.
I mean those were wild days! Days when we coded in Notepad, used bold, strong, and blink tags,put our color and stylings right into the tag, and worked our ASP off without a net. I’m talking so far back, that us web developers were pushing our family and friends to switch to the latest and greatest brand new browser called Internet Explorer! Why? Because it was far superior to the other two! (Sigh)….you don’t get those days back.
In 1997 I was introduced to ColdFusion version 3 and never looked back. Well, I mean, I’m not still using version 3. But I am still programming in CF.
The next several years I spent staying on top of the new technologies and bringing them to the projects I worked on. But, for a variety of reasons, that faded and I pretty much “fell asleep” for several years as the leading edge programming community passed me by.
When I finally woke up again in 2011 I found programming to be a whole new (sing “A whole new world”).. What? Oh right. Programming podcast! I keep forgetting.
So now you know why I am Script Van Winkle. And maybe, just maybe, you understand why I am doing all this. I mean what is the point of learning new things if you can’t blab on incessantly…..uh…I mean…share it with other professionals.
See, that wasn’t so painful was it?
Again, thanks for hanging in. I am so stoked to get this podcast launched and hopefully build a community of friends with which to discuss the industry. This is a two street though. Feel free to contact me or share experiences with me via the comments, email, or social media. You can email me at email@example.com or find me on Twitter @ScriptVanWinkle. You can subscribe to the podcast in iTunes or on Stitcher. You can comment on this episode, see blog posts and find more info at scriptvanwinkle.com.
Thanks for listening and I’ll talk to you next time.