Tag Archives: Web Design

Edge Animate Power Workshop – Free Videos

Edge Animate, Publication, ,

As with all of my publications with video2brain, there are a number of free videos that are made available through a number of distribution channels, including the video2brain website and YouTube. I have added all of these to my Edge Animate playlist for easy access. In all; 25 videos at nearly 2 hours of free Edge Animate content. Not a bad little resource.

Oh, and if you want the full 4.5 hour Edge Animate Power Workshop course; I have a 20% discount code for you! Coupon Code: EDGE20 is good through the 25th of January, 2013!

Included Videos:
Edge Animate Power Workshop Trailer
What Is Edge Animate?
Building the Composition Elements
Setting Up Symbol States
Constructing the Slideshow
Working with Edge Inspect

Simplified WordPress Theme for 2011

Uncategorized

I’ve been wanting to take control of my blog theme for some time in order to both simplify how everything was being displayed, and to obtain a greater degree of flexibility over time. There are a lot of great themes out there for WordPress, and I’ve been fairly happy with many of those I’ve tried – but they still were not exactly what I wanted.

I decided to come up up with something of my own by creating a child theme of the default WordPress “TwentyTen”. Seeing as how I don’t need many features on here, and that “TwentyTen” is a modern design that supports all the new 3.0 features, a child theme sounded perfect. I also tend to shift these around over time, and this would allow that as well.

Adobe Fireworks


The first thing I did is sketch out on paper a sample of the sort of layout I was looking to create. I then created a basic measured layout in Fireworks, followed by a number of textured image segments for the navigation menu, page background, and content area. Fireworks is great for stuff like this, due to the robust texturing system available.

Adobe Dreamweaver


Dreamweaver CS5 has extended support for PHP-based CMS and blogging systems like WordPress. During prerelease, I was playing around with these features quite a bit but had actually never done any work with the final release. It’s actually very convenient to be able to view and interact with the live website files (on my testing server, of course) while designing and tweaking elements of the theme. Dreamweaver can also be enabled to provide code-completion for core WordPress functionality, although I didn’t need it in this case.

Most of what I did was remove a lot of the header stuff I didn’t need, and create a custom navigation menu along the top of the page. The rest of the work was just a lot of CSS hack and slash to get things looking right, setting up new elements, and skinning everything with my exported images. It actually went a lot more smoothly than anticipated.

Adobe BrowserLab


Most of the cross browser rendering checks were done on my local machine using Chrome 8, FireFox 4 beta, and Internet Explorer 8. I have other machines I could log into and check browsers like Opera or the IE9 beta, but don’t have a way to test on OSX from my home. Anyone familiar with DropFolders knows the snails-pace I take when it comes to doing any Apple stuff… So I fired up BrowserLab and was able to check my basic design rendered on what must have been nearly 20 different browsers across Windows and OSX.

It is interesting to see how relatively similar the design rendered across browsers. The most trouble that I noticed was lack of support for my embedded fonts in older browsers. You can also see in the above image that we definitely have some shifting going on in regard to the positioning of elements on the page, but nothing so terrible to render the design unusable.

I’m very pleased with both the resulting design, and the simple, unified workflow involved in getting to this point. There are lots of little things that will probably come up which I’ll modify in the future… but it’s great to know now how very simple it will be to do so.

WordPress 3.0 Released: New Blog Theme!

Uncategorized, , ,

Before today, I wasn’t all that impressed with WordPress 3.0. I had been using several release candidates over the past month or so and aside from the new update mechanism (which is very nice!), I really didn’t see much that sparked my interest. With yesterday’s release, I upgraded and it went smoothly as always… but didn’t do much digging around. Why bother when I’d been using the RC builds for so long, right? I’ve known about the new default theme “TwentyTen” that is finally replacing Kubrick but had never looked into exactly what was new aside from basic visual differences.

I’ve been using a number of themes designed by others over the past three years or so with the last one being Traction. As my needs changed from time to time, it was much simpler to just adopt someone else’s design rather than going through the trouble of mucking around and getting my own up and running. Theme designs I’d done in the past had been based off of Kubrick, but as that theme aged, I wanted features that simply were not present there… so found myself jumping from theme to theme as my needs dictated. This has worked out okay- but I found myself regularly dissatisfied with certain quirks, bugs, or deficiencies. For instance, the Traction theme kept destroying my RSS feed. I had to make my own modifications and upgrades would inevitably start the cycle over again. A big pain in the ass…

So today I looked into TwentyTen to see what could be done with it. Hats off you you guys and girls over at WordPress! This is a great basic theme for customizing that includes all the new functionality introduced since Kubrick was released, and the ability to create child themes. What makes child themes so cool is that when the parent theme is updated, it isn’t going to wipe out all your customizations… yet you still have this nice, solid foundation to build off of that can be updated as necessary. So I created this current theme based off of TwentyTen and am really liking it so far. If I need something in the future, I’ll just do my own modifications. With the ability to push updates without destroying themes, I expect this one will not age so poorly either.

The theme is already HTML5 compliant (for whatever that is worth) but I also tossed in some CSS3 and Google Font Directory stuff to make everything nice and forward-looking! Want to know what else is new in WordPress 3.0? There are plenty of others talking about custom menus, custom post types, multiuser integration, et cetera; here’s the official scoop.

I was wrong about this release. It is the most useful to date on all fronts and am hugely impressed.

Look at that! Wrote something that wasn’t Flash or AIR related!

UPDATE: After posting this, I was contacted by @drewstrojny regarding the feed bug with Traction. In a matter of hours he reported the bug as filed and fixed. A patch is located here. That’s responsive!

Just To Put Things In Perspective…

Flash, , ,

Ever since Apple announced their new iPad, I’ve been reading a whole lot about how HTML5 will replace (I believe “kill” is the preferred term) Flash. Most arguments state that the emerging HTML5 spec includes such things as <canvas> and <video> which effectively renders the need for Flash a thing of the past… seriously? I wonder when the last time these commentators have read up on the vast capabilities of the platform; Flash is much more than any simple animation and video playback mechanism as these people seem to believe it to be.

I did a little research. HTML5 has the following new features (proposed, mind you) that share some similarity with what Flash can do:

Audio Playback -> Flash 4 [1999]
Video Playback -> Flash MX [2002]
Canvas (2D Drawing) -> Flash 1 [1996](Timeline) / Flash MX [2002](API)
Offline Storage -> Flash MX [2002] (Local Shared Objects)

So… far as I can tell, HTML5 will share some capabilities with Flash MX circa 2002.

Understand that I’m not trying to in any way bash HTML5 here. I remember when I was first learning HTML and the frustration I had upon the realization that there was no video or audio tag to simply playback a piece of media. I welcome such innovations and truly hope that after the video codec battle and other disputes are over that we have a truly ubiquitous solution for marking up text and media content for the Web.

In fact, I do a lot of development in HTML/CSS/JavaScript currently and would love to be able to use some of the innovations presented in the HTML5 spec along with some of the CSS3 elements I’m adding into my work. Yeah, my main deal is Flash/Flex/AIR – but that’s the thing; these technologies work well together; they complement/complete one another. It would be absurd for me to state that I want HTML to “die” — just as absurd as it is for others to say the same regarding Flash.

So I have no opposition whatsoever for HTML to evolve and mature as the Web itself grows richer in data and presentation- but Flash is not HTML and HTML is not Flash. I know this is nothing new to a lot of you but apparently a lot of others have trouble with this concept. For a simple example: Flash has some trouble rendering any HTML but for the simplest tags. Do I fault Flash for this? No! HTML for years has not been able to render native video or provide any of the rich application experiences that the Flash Platform enables. Do I fault HTML for this? Equally, no! The purpose of Flash is not to render or replace HTML in what it does best and the purpose of HTML5 should not be to replace Flash in all that it is capable of.

Let’s look some basic facts. HTML 4.01 was finalized and published in December of 1999. At this time, Flash was at version 4 which included the capability to do much of what is now proposed in draft form for HTML5. When will HTML5 be finalized? The editor of HTML5 specification, Ian Hickson of Google, outlines the timeline as such:

  • First W3C Working Draft in October 2007.
  • Last Call Working Draft in October 2009.
  • Call for contributions for the test suite in 2011.
  • Candidate Recommendation in 2012.
  • First draft of test suite in 2012.
  • Second draft of test suite in 2015.
  • Final version of test suite in 2019.
  • Reissued Last Call Working Draft in 2020.
  • Proposed Recommendation in 2022.

2022. I kid you not.

Granted, much of the spec is considered stable and certain items can be used in web browsers today. Just as with the browser wars of the late 1990′s there are many different interpretations and implementations of the specs with multiple vendors all vying for their specific interpretation to emerge as dominant. History does repeat itself, doesn’t it?

Think on this… if HTML5 is going to be a work in progress until 2022… where will Flash, Sliverlight, Unity, and others be at this time? Given the present release cycle for Flash Player, one could assume that 2022 will see the release of Flash Player 17 or so, if Flash is even still a viable platform at that time.

Food for thought.

Simple AS3 Slideshow Widget: Part 3

Flash, , , ,

This is the final post in a three part tutorial detailing the creation of a Flash slideshow widget using ActionScript 3.0. Have a look over Part 1 and Part 2 before moving ahead.

In this post, we are examining the two methods which actually handle image loading and display within our module.

1
2
3
4
5
6
7
8
9
10
11
12

private function switchImage(e:TimerEvent):void {
	imageBitmapData.draw(this);
	imageBitmap.bitmapData = imageBitmapData;
	imageBitmap.alpha = 1;
	if(currentImage < imageArray.length-1){
		currentImage++;
	}else{
		currentImage = 0;
	}
	urlRequ.url = appPath + "path/to/images/" + imageArray[currentImage];
	imageLoader.load(urlRequ);
}

“switchImage” is invoked by the Timer we established previously. The function this method is to set up our eventual transition from one image to the next, grab the next image from our Array and begin to load it into our Loader instance on the Stage, and keep track of what position we are at in our Array. To accomplish this, we first “draw()” the entire Stage to our “imageBitmapData” instance. This data is then assigned to the “imageBitmap” bitmapData property, effectively duplicating the visible data within our Loader instance. This switch from Loader to Bitmap is in no way apparent to the viewer. We also switch the alpha property of out Bitmap to 1, ensuring that it is completely visible.

We then manage our “currentPosition” variable by checking the current value against the Length of the Array. If we have reached the end, we simply revert to a value of “0″ causing an infinite loop.

All we have to do then is change the “url” property of our URLRequest object and then invoke another load() upon “imageLoader”.

1
2
3

private function imageLoaded(e:Event):void {
	imageTween = new Tween(imageBitmap, "alpha", Regular.easeIn, 1, 0, 2, true)
}

This is the last method we have in our little widget. “imageLoaded” is fired by an Event.COMPLETE when a loading image is finally loaded up. At this point, we simply use Tweener to tween the alpha of our Bitmap (displaying the previous image) down to 0, revealing the freshly loaded image beneath.

I recommend using SWFObject to embed the module into your website.

Here is the full PHP code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php 
$firstrun = true;
$files = "";
$dir = opendir("front_images");
while (false !== ($file = readdir($dir))) {
	if (strpos($file, ".gif", 1) || strpos($file, ".jpg", 1) || strpos($file, ".png", 1)) {
		if($firstrun){
			$files = $files . "" . $file;
			$firstrun = false;
		}else{
			$files = $files . "," . $file;
		}
	}
}
echo $files;
?>

Here is the full ActionScript class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

package {
	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.utils.Timer;
	import flash.net.URLRequest;
	import flash.net.URLLoader;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
 
	public class SlideShow extends Sprite {
		private var appPath:String;
		private var imgDur:int;
		private var currentImage:int;
		private var urlRequ:URLRequest;
		private var urlLoad:URLLoader;
		private var imageArray:Array;
		private var imageBitmap:Bitmap;
		private var imageBitmapData:BitmapData;
		private var imageLoader:Loader;
		private var imageTimer:Timer;
		private var imageTween:Tween;
 
		public function SlideShow():void {
			if (root.loaderInfo.parameters.appPath != undefined) {
				appPath = root.loaderInfo.parameters.appPath;
			} else {
				appPath = "http://yourwebsite.com/";
			}
			if (root.loaderInfo.parameters.imgDur != undefined) {
				imgDur = root.loaderInfo.parameters.imgDur*1000;;
			} else {
				imgDur = 5*1000;
			}
			gatherFiles();
		}
 
		private function gatherFiles():void {
			urlRequ = new URLRequest();
			urlRequ.url = appPath + "gatherFrontImages.php";
			urlLoad = new URLLoader();
			urlLoad.dataFormat = flash.net.URLLoaderDataFormat.TEXT;
			urlLoad.addEventListener(Event.COMPLETE, urlComplete);
			urlLoad.load(urlRequ);
		}
 
		private function urlComplete(e:Event):void {
			imageArray = e.target.data.split(",");
			currentImage = imageArray.length-1;
			imageLoader = new Loader();
			imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
			this.addChild(imageLoader);
			imageBitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
			imageBitmap = new Bitmap();
			this.addChild(imageBitmap);
			switchImage(new TimerEvent(TimerEvent.TIMER));
			imageTimer = new Timer(imgDur);
			imageTimer.addEventListener(TimerEvent.TIMER, switchImage);
			imageTimer.start();
		}
 
		private function switchImage(e:TimerEvent):void {
			imageBitmapData.draw(this);
			imageBitmap.bitmapData = imageBitmapData;
			imageBitmap.alpha = 1;
			if(currentImage < imageArray.length-1){
				currentImage++;
			}else{
				currentImage = 0;
			}
			urlRequ.url = appPath + "path/to/images/" + imageArray[currentImage];
			imageLoader.load(urlRequ);
		}
 
		private function imageLoaded(e:Event):void {
			imageTween = new Tween(imageBitmap, "alpha", Regular.easeIn, 1, 0, 2, true)
		}
 
	}
}