Posted: December 19, 2007 at 1:46 pm
I discovered a few things when trying to add img tags to html content on a site I have been working on. Mabye this is common knowledge, but I thought I'd share my experience since I had a hard time getting anymore info on it.
-
Nesting an <a href> tag around an <img> tag doesn't work.
- When you embed an image into text using the img tag the image is added to the TextField's DisplayList. For example if you embed an image in the TextField "contentfield", it's the same as doing contentfield.addChild(htmlImage); Which brings me to…
- The TextField has a method called getImageReference(id:String):DisplayObject; Basically this method returns the DisplayObject or image that is contained within a given TextField. This is great, but I noticed it only works when there is one image in a TextField. If someone can confirm this, that would be great.
Basically I wanted to link the embedded images in my TextField so the popup a larger version of the image. Simple enough, yet when I wrapped the img tag with an href, the outside of the image would show the hand cursor, but the image wouldn't link. Now if the parent of the img is the TextField, then wouldn't it make sense to have numChildren as a TextField Method? Then I could loop through the children of the text field and create buttons. I've made this request to Adobe, and so far they have been receptive to the idea. Hopefully this will get passed through.
I did however, come up with another way to dynamically load images into a TextField. When loading a swf into a TextField using the img tag you can set the instance name of that swf using the id attribute. I use this id attribute to pass the path to the image, as well as an image id that is passed into the popup window that loads the larger image. Here's an example of the html source that is passed into the TextField.
<img src="thumb.swf" id="../flashassets/images/slideshow/2_sm.jpg,2_sm.jpg" />
I separate the two parameters using a comma which are String split in the thumb.swf. Here's the code in the thumb.swf:
if(this.parent.name != null) var results:Array = this.parent.name.split(",");
var imagepath:String = (this.parent.name == null) ? "../flashassets/images/slideshow/1_sm.jpg" : results[0];
var link:String = (this.parent.name == null) ? "http://www.google.com" : results[1];
var image:Sprite = new Sprite();
image.useHandCursor = image.buttonMode = image.mouseEnabled = true;
image.addEventListener(MouseEvent.CLICK, onClick);
this.addChild(image);
var loader:Loader = new Loader();
var request:URLRequest = new URLRequest(imagepath);
loader.load(request);
image.addChild(loader);
var border:Sprite = new Sprite();
this.addChild(border);
border.graphics.lineStyle(2, 0xCC3300, 1, true, "none");
border.graphics.drawRect(1,1,148, 148);
function onClick(event:MouseEvent):void{
navigateToURL(new URLRequest("javascript:window.open('image.php?cat=slideshow&id="+link+"','atest','menubar=yes,resizable=no,width=710,height=730,left=50,top=50');"), "_self");
}
Posted: September 28, 2007 at 5:36 pm
Here's a little utility that I did for multiple Omniture calls to a javascript in the html page. It will also accept another call, such as an iFrame refresh. It delays each call a tiny bit to make sure that events are fired off. Also has a runtime environment detection so your browser window doesnt keep popping up during publishing. Source file below as well.
Usage:
_oSendJavascript = SendJavascript.getInstance();
// Genric Javascript
function clickHandler(event:MouseEvent):void {
_oSendJavascript.addEvent(
"AutoReloadIFrame();"
);
}
//or…
// Omniture call
function clickHandler(event:MouseEvent):void {
_oSendJavascript.addEvent(
"var x = new Object(); x.pageName = 'Primary Section - Secondary Section';trackPageView(x);"
);
}
//or…
// Google Analytics call
function clickHandler(event:MouseEvent):void {
_oSendJavascript.addEvent(
"_uacct = 'YOURGOOGLEACCOUNTNUMBER-000000-1'; urchinTracker();"
);
}
// And of course you can stack calls
_oSendJavascript.addEvent("AutoReloadIFrame();");
_oSendJavascript.addEvent("function1();");
_oSendJavascript.addEvent("function2();");The class:
package com.hydrotik.utils {
/**
* @author Donovan Adams
* @version September 28, 2007
*
* @description SendJavascript Tracking Utility. Queues up SendJavascript events that fire off incrementally.
*
* @usage Example:
<code>
// This should only be called once! THe SendJavascript class is a Singleton pattern
_oSendJavascript = SendJavascript.getInstance();
// Called whenever an even needs to be triggered.
function clickHandler(event:MouseEvent):void{
_oSendJavascript.addEvent("AutoReloadIFrame();");
}
</code>
*/
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.navigateToURL;
import flash.events.TimerEvent;
import flash.utils.Timer;
import flash.system.Capabilities;
public class SendJavascript {
private static const DELAY:Number = .1; // Time in seconds
private static var _oSendJavascript : SendJavascript;
private static var _queueArray:Array;
private static var _queueTimer:Timer;
private static var _count:int;
public static function getInstance() : SendJavascript{
if (_oSendJavascript == null) _oSendJavascript = new SendJavascript();
return _oSendJavascript;
}
public function SendJavascript():void {
trace('\n\n\n\n======== SendJavascript Initializing '+(new Date()).toString()+'=========\n\n');
_queueArray = [];
_count = 0;
_queueTimer = new Timer(DELAY*1000, 0);
_queueTimer.addEventListener(TimerEvent.TIMER, sendEvent);
_queueTimer.addEventListener(TimerEvent.TIMER_COMPLETE, queueComplete);
}
public function addEvent(p:String):void{
trace("\t>> SendJavascript :: addEvent() - _count: "+_count);
_queueArray.push("javascript: " + p);
_queueTimer.repeatCount++;
if(!_queueTimer.running) sendQueue();
trace(_count);
_count++;
}
private function sendQueue():void{
trace("\t>> SendJavascript :: sendQueue()");
_queueTimer.reset();
_queueTimer.start();
}
private function sendEvent(event:TimerEvent):void{
trace("\t>> SendJavascript :: sendEvent() - currentCount: "+_queueTimer.currentCount, _queueTimer.repeatCount);
/* you can add any other variables you want to track above x.sprop2, x.channel, etc; */
var playerType:String = Capabilities.playerType;
if (playerType == "External" || playerType == "StandAlone") {
trace("\t\tnavigateToURL("+_queueArray[_queueTimer.currentCount - 1]+"),'_self');");
} else {
navigateToURL(new URLRequest(_queueArray[_queueTimer.currentCount - 1]),'_self');
}
}
private function queueComplete(event:TimerEvent):void {
trace("\t>> SendJavascript - queueComplete() - type: "+event.type);
flush();
_queueTimer.reset();
}
private function flush():void{
trace("\t>> SendJavascript :: flush()");
_queueArray = [];
_count = _queueTimer.repeatCount = 0;
}
}
}
Javascript Call Utility Source
Posted: September 27, 2007 at 11:41 pm
Came across this cool javascript that tweens a bunch of objects. Javascript Motion Tweener
Here's an example
In the swf:
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(Event.RESIZE, resizeHandler);
var openState:Boolean = true;
var closedSize:String = "200";
var openSize:String = "400";
var bg:Shape = new Shape();
bg.graphics.beginFill(0x454545, 1);
bg.graphics.drawRect(0, 0, 400, 400);
addChild(bg);
var bg2:Shape = new Shape();
bg2.graphics.beginFill(0x666666, 1);
bg2.graphics.drawRect(0, 0, 400, 20);
addChild(bg2);
var btn:Sprite = new Sprite();
addChild(btn);
btn.x = 10;
btn.y = 400-26;
btn.graphics.beginFill(0xCCCCCC, 1);
btn.graphics.drawRect(0, 0, 100, 16);
btn.buttonMode = true;
btn.useHandCursor = true;
btn.mouseEnabled = true;
btn.addEventListener(MouseEvent.CLICK, resizeClickHandler);
var label:TextField = new TextField();
label.autoSize = TextFieldAutoSize.CENTER;
label.selectable = false;
label.mouseEnabled = false;
label.defaultTextFormat = new TextFormat("Arial", 11, 0x454545);
label.x = 50;
label.htmlText = "RESIZE";
btn.addChild(label);
function resizeClickHandler(event:MouseEvent):void {
try {
navigateToURL(new URLRequest("javascript:setHeight("+ ((openState) ? openSize : closedSize) + "," + ((openState) ? closedSize : openSize) +");"),'_self');
openState = !openState;
} catch (e:SecurityError) {
var alert:TextField = new TextField();
alert.autoSize = TextFieldAutoSize.RIGHT;
alert.selectable = false;
alert.mouseEnabled = false;
alert.defaultTextFormat = new TextFormat("Arial", 11, 0xFFFFFF);
alert.x = 390;
alert.htmlText = e.toString();
addChild(alert);
}
}
function resizeHandler(event:Event):void {
bg.width = stage.stageWidth;
bg.height = stage.stageHeight;
btn.y = stage.stageHeight - 26;
}And in the html:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>resize test</title>
<script type="text/javascript" src="swfobject.js"></script>
<script language="javascript" src="Tween.js"></script>
<script language="javascript" src="Sequence.js"></script>
</head>
<body bgcolor="#ffffff">
<script type="text/javascript">
// <![CDATA[
function setHeight(start,end) {
t1 = new Sequence();
t1.addChild(new Tween(document.getElementById('flashPulse').style, 'height', Tween.strongEaseOut, start, end, 0.5, 'px'));
t1.start();
}
// ]]>
</script>
<div id="flashPulse" style="width:400px; height:400px;">
</div>
<br>
Some Text
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("resize.swf", "pulseMovie", "100%", "100%", "9.0.0", "#000000");
so.addParam("salign", "LT");
so.addParam("scale", "noscale")
so.addParam("AllowScriptAccess", "always");
so.write("flashPulse");
// ]]>
</script>
</body>
</html>I have yet to fully test this on a windows machine so let me know if there are any problems.
Resize SWF Source Code
Posted: August 21, 2007 at 12:27 am
Earlier I posted a little javascript about how to deep link with the anchor variable in the url. I was surfing some design sites and found one using a similar method. Low and behold after viewing source, a complete script that sits on SWFObject called SWFAddress. I guess I am living under a rock.
Here's an example:
myButton.onRelease = function() {
SWFAddress.setValue('/my-deep-link/');
}
SWFAddress.onChange = function() {
myNavigationLogic();
SWFAddress.setTitle('My deep link');
}Here's the site:
http://www.asual.com/swfaddress/
Here's a direct link to getting started and good practices
http://www.asual.com/blog/swfaddress/2007/05/18/swfaddress-bad-practices.html
Posted: August 15, 2007 at 10:59 am
Here's a simple and easy way I was able to link to primary navigation sections in an all flash site.
Basically when you add #video to the end of your URL the blow code will push that video string to a swfobject add variable method. I haven't tried it yet but I think it would be easy to add a sub section by adding #video/2 or #video/interviews etc. and do a split in the javascript. In the example below the ",0″ is an appended index reference to a sub section within the flash. In my flash if the pageid variable equals "none" then it loads normally.