This code will create a grid of thumbnails that will display fullscreen – and the number of thumbnails changes dynamically based upon the size of the browser window. It works similar to thefwa. This example loads a series of Movie Clips with an ID assigned to each one. But this can easily be customized to use an XML file for loading gallery assets.
var stageListener:Object = new Object();
stageListener.onResize = function() {
positionThumbs();
};
Stage.align = "TL";
Stage.scaleMode = "noScale";
Stage.addListener(stageListener);
function positionThumbs() {
var W:Number = Stage.width;
var H:Number = Stage.height;
var t_total:Number = 99;
var twidth:Number = 204;
var theight:Number = 124;
var tx:Number = 0;
var ty:Number = 0;
var rows:Number = Math.floor((t_total*twidth)/W);
var pagination:Number = 0;
for (var i:Number = 0; i<total; i++) {
var t_mc:MovieClip = target_mc.attachMovie("thumb", "thumb_mc"+i, i);
t_mc.ID = i;
t_mc.title_txt.text = i;
if (pagination<W-(twidth*2)) {
if (i != 0) {
pagination += twidth;
tx += twidth;
}
} else {
pagination = 0;
tx = 0;
if (i != 0) {
ty += theight;
}
}
t_mc._x = tx;
t_mc._y = ty;
t_mc.onRollOver = function() {
this._alpha = 50;
};
t_mc.onRollOut = t_mc.onReleaseOutside = function() {
this._alpha = 100;
};
}
}
positionThumbs();View the example above and try to resize your browser window. You’ll see that the number of thumbnails dynamically change.
Today I’ve created a gallery of YouTube videos and I’m displaying them using the awesome jQuery Fancybox. It is similar to the popular LightBox2, but I like Fancybox because of it’s look ‘n’ feel and lightness. Download the source and we’ll go through it.
I’ve created a really simple PHP script called video-req.php that grabs the video ID from the gallery and plays it in the YouTube player.
video-req.php
<?php
$vid = $_GET['video'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Playing dynamic YouTube videos with jQuery FancyBox</title>
<script type="text/javascript" src="scripts/swfobject.js"></script>
</head>
<body>
<div id="videoplayer"> </div>
<script type="text/javascript" language="javascript">
var so = new SWFObject("http://www.youtube.com/v/<?php echo $vid ?>&enablejsapi=1&playerapiid=ytplayer", "mymovie", "425", "356", "8", "#ffffff");
so.addParam("menu", "false");
so.write("videoplayer");
</script>
</body>
</html>In index.php you’ll see in our grid we are loading the thumbnails from YouTube’s server and we are loading the videos with this link: video-req.php?video=5W2B2mAocDc. The video-req.php is a page that gets loaded as an iframe into Fancybox and pulls in the video ID from the $_GET[video] param and passes it into the YouTube player. This is great for displaying your videos from your YouTube channel. Whenever you need to add more videos to your page, you just copy the link and thumbnail and just change the video ID.
Enjoy.
Here I’ll be showing you how to create a menu in Flash that creates a navigation structure from an XML file. Each button can load various types of media (images, swfs, videos) or even open a web page. We will open Flash and create a new Movie Clip called “nav” and give it the same linkage id class name. Create a a box 40px tall and convert it to a Movie Clip with the instance name of “bg”. Create a new layer and create a new dynamic text field with the instance name of “title_txt”. Make sure to embed your fonts for your desired character set. Now here is one thing I figured out that is kind of important. Create another layer on top and copy your MC called “bg” and paste it into this new layer with the instance name of “trans” and set the Alpha property to zero. This will act as our hit state. Without this the cursor loses focus when it is located over the dynamic text.
Create a class file called “BuildMenu.as”. In Flash, change your Document Class to BuildMenu. Save.
Create an XML file called “menu.xml” and fill it with these contents:
<?xml version="1.0" encoding="utf-8"?>
<navigation>
<button title="Image" action="image1.jpg" />
<button title="Video F4V" action="video1.f4v" />
<button title="Video MPEG" action="video2.mpeg" />
<button title="SWF File" action="swf1.swf" />
<button title="Contact" action="http://www.google.com" />
</navigation>
Open BuildMenu.as and fill it with this code:
// ActionScript file
package {
import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.display.*;
import flash.events.*;
import flash.net.*;
public class BuildMenu extends Sprite {
private var titles:Array = new Array();
private var actions:Array = new Array();
private var total:uint = 0;
private var xmlFile:String = "menu.xml";
private var loadMenuXML:URLLoader = new URLLoader();
private var fadeSpeed:Number = 0.2;
public function BuildMenu() {
var reqMenuXML:URLRequest = new URLRequest(xmlFile);
loadMenuXML.addEventListener(Event.COMPLETE, parseXML);
loadMenuXML.load(reqMenuXML);
}
private function parseXML(e:Event):void {
var menuXML:XML = new XML(loadMenuXML.data);
var container:Sprite = new Sprite();
container.name = "container";
container.x = 100;
addChild(container);
for (var i:int = 0; i<menuXML.*.length(); i++) {
titles.push(menuXML.button[i].@title);
actions.push(menuXML.button[i].@action);
var btn:MovieClip = new nav;
container.addChild(btn);
btn.y = i*40;
btn.title_txt.htmlText = titles[i];
btn.trans.addEventListener(MouseEvent.CLICK, navClick);
btn.trans.addEventListener(MouseEvent.ROLL_OVER, fadeDown);
btn.trans.addEventListener(MouseEvent.ROLL_OUT, fadeUp);
btn.trans.buttonMode = true;
btn.trans.ID = i;
}
}
private function fadeDown(e:Event):void {
var fDown:Tween = new Tween(e.currentTarget.parent.bg, "alpha", None.easeOut, e.currentTarget.parent.bg.alpha, 0.5, fadeSpeed, true);
}
private function fadeUp(e:Event):void {
var fUp:Tween = new Tween(e.currentTarget.parent.bg, "alpha", None.easeOut, e.currentTarget.parent.bg.alpha, 1, fadeSpeed, true);
}
private function navClick(e:Event):void {
determineLink(e.currentTarget.ID);
}
private function determineLink(id) {
//trace(titles[id]+" -> "+actions[id]);
var actionItem:String = actions[id].toString();
// Find file extension
var fileExtension:String = actionItem.substr(0,4);
if (fileExtension == "http") {
// this is a URL
} else {
fileExtension = actionItem.substr(actionItem.lastIndexOf('.')+1, actionItem.length);
// this is a file extension
}
var mediaType:String = fileExtension.toLowerCase();
switch (mediaType) {
case "http":
trace("Open URL -> "+actionItem);
openURL(actionItem);
break;
case "flv":
case "f4v":
case "mov":
case "mpeg":
case "mp4":
trace("Load video -> "+actionItem);
loadVideo(actionItem);
break;
case "jpg":
case "gif":
case "jpeg":
case "png":
trace("Load image -> "+actionItem);
loadImage(actionItem);
break;
case "swf":
trace("Load swf -> "+actionItem);
loadSWF(actionItem);
break;
default :
trace("Incorrect file type used");
break;
}
}
private function loadImage(file) {
// load Image
var assetLoader:Loader = new Loader();
addChild(assetLoader);
assetLoader.load(new URLRequest(file));
}
private function loadSWF(file) {
// load SWF
var assetLoader:Loader = new Loader();
addChild(assetLoader);
assetLoader.load(new URLRequest(file));
}
private function loadVideo(file) {
// load Video
}
private function openURL(url) {
// open URL
var loadURL:URLRequest = new URLRequest(url);
try {
navigateToURL(loadURL, "_blank");
} catch (e:Error) {
trace("Cannot load -> "+url);
}
}
}
}To view the output, Test Movie in Flash.
© 2010 Aaron Benson. All rights reserved.
